From 3c4d0719020e8aa4debe9b9f7115a385ac4086f9 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 14 May 2023 00:45:52 +0700
Subject: [PATCH 1/3] pricing page cancellation section

---
 .../fakeyou.com/src/scss/site-refresh.scss    |  4 +++
 .../src/v2/view/pages/premium/PricingPage.tsx | 31 ++++++++++---------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 98c2be5bb3..9107aa085f 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -1261,6 +1261,10 @@ styles with important tags:
       background-color: lighten($primary, 5%);
     }
   }
+
+  .fs-14 {
+    font-size: 14px;
+  }
 }
 
 select {
diff --git a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
index 04ed57b168..ac0bdaf807 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
@@ -92,7 +92,7 @@ function PricingPage(props: Props) {
   let eliteButtonText = "Buy Elite";
   let eliteButtonDisabled = false;
 
-  let unsubscribeButton = <></>;
+  let unsubscribeSection = <></>;
 
   if (userHasPaidPremium) {
     let unsubscribeKey = FYP.plus.internal_plan_key[planKey]; // NB: Default to something (I don't think this matters to Stripe.)
@@ -120,17 +120,21 @@ function PricingPage(props: Props) {
       eliteButtonText = "Switch to Elite";
     }
 
-    unsubscribeButton = (
+    unsubscribeSection = (
       <>
-        <div className="container pt-5 pb-3 text-center">
-          <motion.div className="mt-4" variants={item}>
-            <button
-              onClick={() => beginStripeFlow(unsubscribeKey, "unsubscribe")}
-              className="btn btn-link w-100 fs-6"
-            >
-              Unsubscribe
-            </button>
-          </motion.div>
+        <div className="panel p-4 mt-5 rounded">
+          <h4 className="fw-semibold mb-3">Cancel My Subscription</h4>
+          <p className="mb-4 fs-14">
+            Upon cancellation, your subscription to FakeYou's premium features
+            will be terminated at the end of your current term, which means you
+            will no longer have access to these exclusive functionalities.
+          </p>
+          <button
+            onClick={() => beginStripeFlow(unsubscribeKey, "unsubscribe")}
+            className="btn btn-destructive"
+          >
+            Cancel Subscription
+          </button>
         </div>
       </>
     );
@@ -359,7 +363,6 @@ function PricingPage(props: Props) {
                   );
                 })}
 
-
                 <li className="fw-semibold">{FYP.pro.vc.title}</li>
                 {FYP.pro.vc.features.map((e: any) => {
                   return (
@@ -607,9 +610,7 @@ function PricingPage(props: Props) {
           </motion.div>
         </div>
 
-        <div className="container mt-3 mb-5">
-          <div className="row gx-3 gy-4">{unsubscribeButton}</div>
-        </div>
+        {unsubscribeSection}
 
         {/* Starter Tier (to show for Latin American countries) */}
         {/* <div className="w-100 mt-4">

From 93b7964f52166a98360fb587ca296e72b28b8eb2 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 14 May 2023 01:09:37 +0700
Subject: [PATCH 2/3] profile edit cancel plan link to pricing page

---
 .../src/v2/view/pages/premium/PricingPage.tsx |  4 +--
 .../profile/profile_edit/ProfileEditFc.tsx    | 27 ++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
index ac0bdaf807..c5d8ebf504 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { faCheck, faHeart } from "@fortawesome/free-solid-svg-icons";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_edit/ProfileEditFc.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_edit/ProfileEditFc.tsx
index 4c4d2a36a3..60fafd0fec 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_edit/ProfileEditFc.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_edit/ProfileEditFc.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { ApiConfig } from "@storyteller/components";
-import { useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
 import { useParams } from "react-router-dom";
@@ -261,7 +261,7 @@ function ProfileEditFc(props: Props) {
                         name="preferred_tts_result_visibility"
                         onChange={handlePreferredTtsResultVisibilityChange}
                         value={preferredTtsResultVisibility}
-                        className="form-select"
+                        className="form-select rounded"
                       >
                         <option value="public">
                           Public (visible from your profile)
@@ -282,7 +282,7 @@ function ProfileEditFc(props: Props) {
                         name="preferred_w2l_result_visibility"
                         onChange={handlePreferredW2lResultVisibilityChange}
                         value={preferredW2lResultVisibility}
-                        className="form-select"
+                        className="form-select rounded"
                       >
                         <option value="public">
                           Public (visible from your profile)
@@ -512,15 +512,18 @@ function ProfileEditFc(props: Props) {
         </fieldset>
       </motion.form>
 
-      <motion.div className="container py-5" variants={item}>
-        <p>More profile and account features coming soon:</p>
-        <ul>
-          <li>Fully private models and templates</li>
-          <li>Sharing preferences (private, friends, auto-expire, etc.)</li>
-          <li>Website preferences</li>
-          <li>Custom avatar / profile pic uploads</li>
-          <li>Email change, password change, and password reset</li>
-        </ul>
+      <motion.div className="container-panel pt-5" variants={item}>
+        <div className="panel p-4 mt-5">
+          <h4 className="fw-semibold mb-3">Cancel My Subscription</h4>
+          <p className="mb-4 fs-14">
+            You can cancel your subscription at the bottom of the pricing page.
+          </p>
+          <div className="d-flex">
+            <Link to="/pricing" className="btn btn-secondary">
+              Go to pricing page
+            </Link>
+          </div>
+        </div>
       </motion.div>
     </motion.div>
   );

From e46ade9fbb5803b889b01d53356818d476b9b9e8 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 14 May 2023 01:12:05 +0700
Subject: [PATCH 3/3] unused

---
 .../fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
index c5d8ebf504..ac0bdaf807 100644
--- a/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useHistory, useLocation } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { faCheck, faHeart } from "@fortawesome/free-solid-svg-icons";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";