Merge pull request #239 from storytold/bflat-fy-cancellation

pricing and profile page cancellation

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 {

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">

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>
   );