feat: redirect subscribers to dashboard instead of plans page (#897)

standardnotes · Feb 24, 2022 · 7fe0873 · 7fe0873
1 parent f9fafec
commit 7fe0873
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 12 deletions.
diff --git a/app/assets/javascripts/components/ApplicationView.tsx b/app/assets/javascripts/components/ApplicationView.tsx
@@ -207,7 +207,10 @@ export class ApplicationView extends PureComponent<Props, State> {
     const renderAppContents = !this.state.needsUnlock && this.state.launched;
 
     return (
-      <PremiumModalProvider state={this.appState?.features}>
+      <PremiumModalProvider
+        application={this.application}
+        appState={this.appState}
+      >
         <div className={this.platformString + ' main-ui-view sn-component'}>
           {renderAppContents && (
             <div

diff --git a/app/assets/javascripts/components/Premium/usePremiumModal.tsx b/app/assets/javascripts/components/Premium/usePremiumModal.tsx
@@ -1,4 +1,5 @@
-import { FeaturesState } from '@/ui_models/app_state/features_state';
+import { WebApplication } from '@/ui_models/application';
+import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { FunctionalComponent } from 'preact';
 import { useContext } from 'preact/hooks';
@@ -24,24 +25,33 @@ export const usePremiumModal = (): PremiumModalContextData => {
 };
 
 interface Props {
-  state: FeaturesState;
+  application: WebApplication;
+  appState: AppState;
 }
 
 export const PremiumModalProvider: FunctionalComponent<Props> = observer(
-  ({ state, children }) => {
-    const featureName = state._premiumAlertFeatureName;
-    const activate = state.showPremiumAlert;
-    const close = state.closePremiumAlert;
+  ({ application, appState, children }) => {
+    const featureName = appState.features._premiumAlertFeatureName;
+    const activate = appState.features.showPremiumAlert;
+    const close = appState.features.closePremiumAlert;
 
     const showModal = !!featureName;
 
+    const hasSubscription = Boolean(
+      appState.subscription.userSubscription &&
+        !appState.subscription.isUserSubscriptionExpired &&
+        !appState.subscription.isUserSubscriptionCanceled
+    );
+
     return (
       <>
         {showModal && (
           <PremiumFeaturesModal
-            showModal={!!featureName}
+            application={application}
             featureName={featureName}
+            hasSubscription={hasSubscription}
             onClose={close}
+            showModal={!!featureName}
           />
         )}
         <PremiumModalProvider_ value={{ activate }}>

diff --git a/app/assets/javascripts/components/PremiumFeaturesModal.tsx b/app/assets/javascripts/components/PremiumFeaturesModal.tsx
@@ -7,22 +7,30 @@ import { FunctionalComponent } from 'preact';
 import { Icon } from './Icon';
 import { PremiumIllustration } from '@standardnotes/stylekit';
 import { useRef } from 'preact/hooks';
+import { WebApplication } from '@/ui_models/application';
+import { openSubscriptionDashboard } from '@/hooks/manageSubscription';
 
 type Props = {
+  application: WebApplication;
   featureName: string;
+  hasSubscription: boolean;
   onClose: () => void;
   showModal: boolean;
 };
 
 export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
+  application,
   featureName,
+  hasSubscription,
   onClose,
   showModal,
 }) => {
   const plansButtonRef = useRef<HTMLButtonElement>(null);
 
-  const onClickPlans = () => {
-    if (window._plans_url) {
+  const handleClick = () => {
+    if (hasSubscription) {
+      openSubscriptionDashboard(application);
+    } else if (window._plans_url) {
       window.location.assign(window._plans_url);
     }
   };
@@ -61,11 +69,11 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
           </AlertDialogDescription>
           <div className="p-4">
             <button
-              onClick={onClickPlans}
+              onClick={handleClick}
               className="w-full rounded no-border py-2 font-bold bg-info color-info-contrast hover:brightness-130 focus:brightness-130 cursor-pointer"
               ref={plansButtonRef}
             >
-              See Plans
+              {hasSubscription ? 'Upgrade Plan' : 'See Plans'}
             </button>
           </div>
         </div>