feat: show tier modal on account page after logging in

This shows the user the plan they wanted from the home page after logging in.
web3-storage · Oct 18, 2022 · 13ff0a2 · 13ff0a2
1 parent 188eb6e
commit 13ff0a2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/packages/website/components/accountPlansModal/accountPlansModal.js b/packages/website/components/accountPlansModal/accountPlansModal.js
@@ -30,11 +30,16 @@ export async function putUserPayment(pm_id, plan_id) {
   return res.json();
 }
 
+/**
+ *
+ * @typedef {import('../../components/contexts/plansContext').Plan} Plan
+ */
+
 /**
  * @param {object} obj
  * @param {any} obj.isOpen
  * @param {any} obj.onClose
- * @param {any} obj.planSelection
+ * @param {undefined|Plan} obj.planSelection
  * @param {any} obj.planList
  * @param {any} obj.stripePromise
  * @param {any} obj.setCurrentPlan
@@ -58,7 +63,7 @@ const AccountPlansModal = ({
   stripePromise,
 }) => {
   const [isCreatingSub, setIsCreatingSub] = useState(false);
-  const currentPlan = planList.find(p => p.id === planSelection.id);
+  const currentPlan = planList.find(p => p.id === planSelection?.id);
   return (
     <div className="account-plans-modal">
       <Modal

diff --git a/packages/website/pages/account/payment.js b/packages/website/pages/account/payment.js
@@ -2,6 +2,7 @@
  * @fileoverview Account Payment Settings
  */
 
+import { parse as queryParse } from 'querystring';
 import { useState, useEffect, useMemo } from 'react';
 import { Elements, ElementsConsumer } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
@@ -45,19 +46,36 @@ import GeneralPageData from '../../content/pages/general.json';
  * @property {PaymentMethodCard} card
  */
 
+function removePlanQueryParam() {
+  history.pushState({}, '', window.location.href.replace(/plan=[^&]+&?/, ''));
+}
+
 const PaymentSettingsPage = props => {
+  const planQueryParam = queryParse(window.location.search.substring(1))?.plan;
   const [isPaymentPlanModalOpen, setIsPaymentPlanModalOpen] = useState(false);
   const stripePromise = loadStripe(props.stripePublishableKey);
   const [needsFetchPaymentSettings, setNeedsFetchPaymentSettings] = useState(true);
   const [, setIsFetchingPaymentSettings] = useState(false);
   const [paymentSettings, setPaymentSettings] = useState(/** @type {undefined|PaymentSettings} */ (undefined));
-  const [planSelection, setPlanSelection] = useState('');
+  const [planSelection, setPlanSelection] = useState(/** @type {undefined|Plan} */ (undefined));
   const [editingPaymentMethod, setEditingPaymentMethod] = useState(false);
   // subcomponents that save a new plan can set this, which will trigger a re-fetch but the
   // ui can optimistically show the new value while the refetch happens.
   const [optimisticCurrentPlan, setOptimisticCurrentPlan] = useState(/** @type {Plan|undefined} */ (undefined));
   const [hasAcceptedTerms, setHasAcceptedTerms] = useState(false);
 
+  useEffect(() => {
+    if (planQueryParam) {
+      const desiredPlanFromQueryParam = plans.find(plan => plan.id === planQueryParam);
+      if (desiredPlanFromQueryParam) {
+        setPlanSelection(desiredPlanFromQueryParam);
+        setIsPaymentPlanModalOpen(true);
+      } else {
+        removePlanQueryParam();
+      }
+    }
+  }, [planQueryParam]);
+
   // fetch payment settings whenever needed
   useEffect(() => {
     async function loadPaymentSettings() {
@@ -187,6 +205,9 @@ const PaymentSettingsPage = props => {
           onClose={() => {
             setIsPaymentPlanModalOpen(false);
             setHasAcceptedTerms(false);
+            if (planQueryParam) {
+              removePlanQueryParam();
+            }
           }}
           planList={planList}
           planSelection={planSelection}