From ca1b449f588d09afeb72f1224426a2160ecd578a Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 24 Feb 2022 21:07:07 +0530
Subject: [PATCH 1/2] feat: redirect present subscribers to dashboard instead
 of plans page

---
 .../components/ApplicationView.tsx            |  5 +++-
 .../components/Premium/usePremiumModal.tsx    | 24 +++++++++++++------
 .../components/PremiumFeaturesModal.tsx       | 16 +++++++++----
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/components/ApplicationView.tsx b/app/assets/javascripts/components/ApplicationView.tsx
index 36b95f40e22..7ba447673aa 100644
--- 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
index 2c9b3652ff0..16cec58aa09 100644
--- 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
index e61e8eab1b9..5ba304f2d21 100644
--- 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>

From c0d855a00e50a7309b5005286acdfe8aedaae26c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 24 Feb 2022 21:20:55 +0530
Subject: [PATCH 2/2] Update
 app/assets/javascripts/components/PremiumFeaturesModal.tsx

Co-authored-by: Mo <mo@standardnotes.com>
---
 app/assets/javascripts/components/PremiumFeaturesModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/components/PremiumFeaturesModal.tsx b/app/assets/javascripts/components/PremiumFeaturesModal.tsx
index 5ba304f2d21..a1601ea8c51 100644
--- a/app/assets/javascripts/components/PremiumFeaturesModal.tsx
+++ b/app/assets/javascripts/components/PremiumFeaturesModal.tsx
@@ -73,7 +73,7 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
               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}
             >
-              {hasSubscription ? 'Upgrade plan' : 'See Plans'}
+              {hasSubscription ? 'Upgrade Plan' : 'See Plans'}
             </button>
           </div>
         </div>