From 84ba497857db1afbbbefa556fc44cf28d69027d9 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Mon, 6 Sep 2021 03:57:33 -0300
Subject: [PATCH 1/9] feat: subscription info in preferences

---
 .../preferences/panes/AccountPreferences.tsx  |   3 +-
 .../panes/account/Subscription.tsx            | 187 ++++++++++++++++++
 .../preferences/panes/account/index.ts        |   1 +
 app/assets/stylesheets/_sn.scss               |   4 +
 4 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/preferences/panes/account/Subscription.tsx

diff --git a/app/assets/javascripts/preferences/panes/AccountPreferences.tsx b/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
index 6b034d7c6..8dd126cba 100644
--- a/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
+++ b/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
@@ -1,4 +1,4 @@
-import { Sync } from '@/preferences/panes/account';
+import { Sync, Subscription } from '@/preferences/panes/account';
 import { PreferencesPane } from '@/preferences/components';
 import { observer } from 'mobx-react-lite';
 import { WebApplication } from '@/ui_models/application';
@@ -7,6 +7,7 @@ export const AccountPreferences = observer(({application}: {application: WebAppl
   return (
     <PreferencesPane>
       <Sync application={application} />
+      <Subscription application={application} />
     </PreferencesPane>
   );
 });
diff --git a/app/assets/javascripts/preferences/panes/account/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/Subscription.tsx
new file mode 100644
index 000000000..0a3c79bd4
--- /dev/null
+++ b/app/assets/javascripts/preferences/panes/account/Subscription.tsx
@@ -0,0 +1,187 @@
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Text,
+  Title,
+} from '@/preferences/components';
+import { Button } from '@/components/Button';
+import { observer } from '@node_modules/mobx-react-lite';
+import { WebApplication } from '@/ui_models/application';
+import { useEffect, useState } from 'preact/hooks';
+import { GetSubscriptionResponse } from '@standardnotes/snjs/dist/@types/services/api/responses';
+
+type Props = {
+  application: WebApplication;
+};
+
+enum PlanName {
+  CorePlan = 'CORE_PLAN',
+  PlusPlan = 'PLUS_PLAN',
+  ProPlan = 'PRO_PLAN',
+}
+
+type Subscription = {
+  cancelled: boolean;
+  planName: PlanName;
+  endsAt: number;
+};
+
+type SubscriptionInformationProps = {
+  subscription?: Subscription;
+};
+
+type ValidSubscriptionProps = {
+  subscription: Subscription;
+};
+
+const mapPlanNameToString = (planName: PlanName) => {
+  switch (planName) {
+    case 'CORE_PLAN':
+      return 'Core';
+    case 'PLUS_PLAN':
+      return 'Plus';
+    case 'PRO_PLAN':
+      return 'Pro';
+    default:
+      return '';
+  }
+};
+
+const NoSubscription = () => (
+  <>
+    <Text>You don't have a Standard Notes subscription yet.</Text>
+    <div className="flex">
+      <Button
+        className="min-w-20 mt-3 mr-3"
+        type="normal"
+        label="Refresh"
+        onClick={() => null}
+      />
+      <Button
+        className="min-w-20 mt-3"
+        type="primary"
+        label="Purchase subscription"
+        onClick={() => null}
+      />
+    </div>
+  </>
+);
+
+const ActiveSubscription = ({ subscription }: ValidSubscriptionProps) => (
+  <>
+    <Text>
+      Your{' '}
+      <span className="font-bold">
+        Standard Notes {mapPlanNameToString(subscription.planName)}
+      </span>{' '}
+      subscription will be{' '}
+      <span className="font-bold">
+        renewed on {new Date(subscription.endsAt).toLocaleString()}
+      </span>
+      .
+    </Text>
+    <div className="flex">
+      <Button
+        className="min-w-20 mt-3 mr-3"
+        type="normal"
+        label="Refresh"
+        onClick={() => null}
+      />
+      <Button
+        className="min-w-20 mt-3 mr-3"
+        type="normal"
+        label="Change plan"
+        onClick={() => null}
+      />
+      <Button
+        className="min-w-20 mt-3"
+        type="primary"
+        label="Cancel subscription"
+        onClick={() => null}
+      />
+    </div>
+  </>
+);
+
+const CancelledSubscription = ({ subscription }: ValidSubscriptionProps) => (
+  <>
+    <Text>
+      Your{' '}
+      <span className="font-bold">
+        Standard Notes {mapPlanNameToString(subscription.planName)}
+      </span>{' '}
+      subscription has been{' '}
+      <span className="font-bold">
+        canceled but will remain valid until{' '}
+        {new Date(subscription.endsAt).toLocaleString()}
+      </span>
+      . You may resubscribe below if you wish.
+    </Text>
+    <div className="flex">
+      <Button
+        className="min-w-20 mt-3 mr-3"
+        type="normal"
+        label="Refresh"
+        onClick={() => null}
+      />
+      <Button
+        className="min-w-20 mt-3 mr-3"
+        type="normal"
+        label="Change plan"
+        onClick={() => null}
+      />
+      <Button
+        className="min-w-20 mt-3"
+        type="primary"
+        label="Renew subscription"
+        onClick={() => null}
+      />
+    </div>
+  </>
+);
+
+const SubscriptionInformation = ({
+  subscription,
+}: SubscriptionInformationProps) => {
+  const now = new Date().getTime();
+  if (subscription && subscription.endsAt > now) {
+    return subscription.cancelled ? (
+      <CancelledSubscription subscription={subscription} />
+    ) : (
+      <ActiveSubscription subscription={subscription} />
+    );
+  }
+  return <NoSubscription />;
+};
+
+const Subscription = observer(({ application }: Props) => {
+  const [subscription, setSubscription] =
+    useState<Subscription | undefined>(undefined);
+
+  useEffect(() => {
+    const getSubscription = async () => {
+      const result = await application.getUserSubscription();
+      if (!result.error && result.data) {
+        const data = (result as GetSubscriptionResponse).data;
+        const subscription = data!.subscription;
+        setSubscription(subscription);
+      }
+    };
+    getSubscription();
+  }, [application]);
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <div className="flex flex-row items-center">
+          <div className="flex-grow flex flex-col">
+            <Title>Subscription</Title>
+            <SubscriptionInformation subscription={subscription} />
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+});
+
+export default Subscription;
diff --git a/app/assets/javascripts/preferences/panes/account/index.ts b/app/assets/javascripts/preferences/panes/account/index.ts
index 2225b5881..d30c31420 100644
--- a/app/assets/javascripts/preferences/panes/account/index.ts
+++ b/app/assets/javascripts/preferences/panes/account/index.ts
@@ -1 +1,2 @@
 export { default as Sync } from './Sync';
+export { default as Subscription } from './Subscription';
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 32baa1cb4..a8a4bed8b 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -149,3 +149,7 @@
 .sn-title {
   @extend .font-bold;
 }
+
+.mr-3 {
+  margin-right: 0.75rem;
+}

From 1b87df18bc42b0f4491d881465ffdead96de4762 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 7 Sep 2021 11:19:51 -0300
Subject: [PATCH 2/9] feat: get plan name from subscriptions endpoint

---
 .../panes/account/Subscription.tsx            | 103 ++++++++++++------
 1 file changed, 69 insertions(+), 34 deletions(-)

diff --git a/app/assets/javascripts/preferences/panes/account/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/Subscription.tsx
index 0a3c79bd4..712964a17 100644
--- a/app/assets/javascripts/preferences/panes/account/Subscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/Subscription.tsx
@@ -8,43 +8,35 @@ import { Button } from '@/components/Button';
 import { observer } from '@node_modules/mobx-react-lite';
 import { WebApplication } from '@/ui_models/application';
 import { useEffect, useState } from 'preact/hooks';
-import { GetSubscriptionResponse } from '@standardnotes/snjs/dist/@types/services/api/responses';
+import {
+  GetSubscriptionResponse,
+  GetSubscriptionsResponse,
+} from '@standardnotes/snjs/dist/@types/services/api/responses';
 
 type Props = {
   application: WebApplication;
 };
 
-enum PlanName {
-  CorePlan = 'CORE_PLAN',
-  PlusPlan = 'PLUS_PLAN',
-  ProPlan = 'PRO_PLAN',
-}
-
 type Subscription = {
+  planName: string;
   cancelled: boolean;
-  planName: PlanName;
   endsAt: number;
 };
 
+type AvailableSubscriptions = {
+  [key: string]: {
+    name: string;
+  };
+};
+
 type SubscriptionInformationProps = {
   subscription?: Subscription;
+  availableSubscriptions: AvailableSubscriptions;
 };
 
 type ValidSubscriptionProps = {
   subscription: Subscription;
-};
-
-const mapPlanNameToString = (planName: PlanName) => {
-  switch (planName) {
-    case 'CORE_PLAN':
-      return 'Core';
-    case 'PLUS_PLAN':
-      return 'Plus';
-    case 'PRO_PLAN':
-      return 'Pro';
-    default:
-      return '';
-  }
+  availableSubscriptions: AvailableSubscriptions;
 };
 
 const NoSubscription = () => (
@@ -67,12 +59,15 @@ const NoSubscription = () => (
   </>
 );
 
-const ActiveSubscription = ({ subscription }: ValidSubscriptionProps) => (
+const ActiveSubscription = ({
+  subscription,
+  availableSubscriptions,
+}: ValidSubscriptionProps) => (
   <>
     <Text>
       Your{' '}
       <span className="font-bold">
-        Standard Notes {mapPlanNameToString(subscription.planName)}
+        Standard Notes {availableSubscriptions[subscription.planName]}
       </span>{' '}
       subscription will be{' '}
       <span className="font-bold">
@@ -103,12 +98,15 @@ const ActiveSubscription = ({ subscription }: ValidSubscriptionProps) => (
   </>
 );
 
-const CancelledSubscription = ({ subscription }: ValidSubscriptionProps) => (
+const CancelledSubscription = ({
+  subscription,
+  availableSubscriptions,
+}: ValidSubscriptionProps) => (
   <>
     <Text>
       Your{' '}
       <span className="font-bold">
-        Standard Notes {mapPlanNameToString(subscription.planName)}
+        Standard Notes {availableSubscriptions[subscription.planName]}
       </span>{' '}
       subscription has been{' '}
       <span className="font-bold">
@@ -142,13 +140,20 @@ const CancelledSubscription = ({ subscription }: ValidSubscriptionProps) => (
 
 const SubscriptionInformation = ({
   subscription,
+  availableSubscriptions,
 }: SubscriptionInformationProps) => {
   const now = new Date().getTime();
   if (subscription && subscription.endsAt > now) {
     return subscription.cancelled ? (
-      <CancelledSubscription subscription={subscription} />
+      <CancelledSubscription
+        subscription={subscription}
+        availableSubscriptions={availableSubscriptions}
+      />
     ) : (
-      <ActiveSubscription subscription={subscription} />
+      <ActiveSubscription
+        subscription={subscription}
+        availableSubscriptions={availableSubscriptions}
+      />
     );
   }
   return <NoSubscription />;
@@ -157,16 +162,39 @@ const SubscriptionInformation = ({
 const Subscription = observer(({ application }: Props) => {
   const [subscription, setSubscription] =
     useState<Subscription | undefined>(undefined);
+  const [availableSubscriptions, setAvailableSubscriptions] =
+    useState<AvailableSubscriptions>({});
+  const [error, setError] = useState(false);
 
   useEffect(() => {
-    const getSubscription = async () => {
-      const result = await application.getUserSubscription();
-      if (!result.error && result.data) {
-        const data = (result as GetSubscriptionResponse).data;
-        const subscription = data!.subscription;
-        setSubscription(subscription);
+    const getSubscriptions = async () => {
+      try {
+        const result = await application.getSubscriptions();
+        if (result.data) {
+          const data = (result as GetSubscriptionsResponse).data;
+          setAvailableSubscriptions(data!);
+        } else {
+          setError(true);
+        }
+      } catch (e) {
+        setError(true);
       }
     };
+    const getSubscription = async () => {
+      try {
+        const result = await application.getUserSubscription();
+        if (!result.error && result.data) {
+          const data = (result as GetSubscriptionResponse).data;
+          const subscription = data!.subscription;
+          setSubscription(subscription);
+        } else {
+          setError(true);
+        }
+      } catch (e) {
+        setError(true);
+      }
+    };
+    getSubscriptions();
     getSubscription();
   }, [application]);
 
@@ -176,7 +204,14 @@ const Subscription = observer(({ application }: Props) => {
         <div className="flex flex-row items-center">
           <div className="flex-grow flex flex-col">
             <Title>Subscription</Title>
-            <SubscriptionInformation subscription={subscription} />
+            {error ? (
+              'No subscription information available.'
+            ) : (
+              <SubscriptionInformation
+                subscription={subscription}
+                availableSubscriptions={availableSubscriptions}
+              />
+            )}
           </div>
         </div>
       </PreferencesSegment>

From 28dab13fb19631bcf8946d8fc40306b086fff676 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 7 Sep 2021 12:04:25 -0300
Subject: [PATCH 3/9] refactor: use mobx for state and separate files for
 components

---
 .../preferences/panes/AccountPreferences.tsx  |   4 +-
 .../panes/account/Subscription.tsx            | 222 ------------------
 .../preferences/panes/account/index.ts        |   2 +-
 .../subscription/ActiveSubscription.tsx       |  49 ++++
 .../subscription/CancelledSubscription.tsx    |  50 ++++
 .../account/subscription/NoSubscription.tsx   |  23 ++
 .../account/subscription/Subscription.tsx     |  92 ++++++++
 .../subscription/SubscriptionWrapper.tsx      |  20 ++
 .../subscription/subscription_state.tsx       |  51 ++++
 9 files changed, 288 insertions(+), 225 deletions(-)
 delete mode 100644 app/assets/javascripts/preferences/panes/account/Subscription.tsx
 create mode 100644 app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx
 create mode 100644 app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
 create mode 100644 app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
 create mode 100644 app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
 create mode 100644 app/assets/javascripts/preferences/panes/account/subscription/SubscriptionWrapper.tsx
 create mode 100644 app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx

diff --git a/app/assets/javascripts/preferences/panes/AccountPreferences.tsx b/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
index 8dd126cba..4d74e7a89 100644
--- a/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
+++ b/app/assets/javascripts/preferences/panes/AccountPreferences.tsx
@@ -1,4 +1,4 @@
-import { Sync, Subscription } from '@/preferences/panes/account';
+import { Sync, SubscriptionWrapper } from '@/preferences/panes/account';
 import { PreferencesPane } from '@/preferences/components';
 import { observer } from 'mobx-react-lite';
 import { WebApplication } from '@/ui_models/application';
@@ -7,7 +7,7 @@ export const AccountPreferences = observer(({application}: {application: WebAppl
   return (
     <PreferencesPane>
       <Sync application={application} />
-      <Subscription application={application} />
+      <SubscriptionWrapper application={application} />
     </PreferencesPane>
   );
 });
diff --git a/app/assets/javascripts/preferences/panes/account/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/Subscription.tsx
deleted file mode 100644
index 712964a17..000000000
--- a/app/assets/javascripts/preferences/panes/account/Subscription.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Text,
-  Title,
-} from '@/preferences/components';
-import { Button } from '@/components/Button';
-import { observer } from '@node_modules/mobx-react-lite';
-import { WebApplication } from '@/ui_models/application';
-import { useEffect, useState } from 'preact/hooks';
-import {
-  GetSubscriptionResponse,
-  GetSubscriptionsResponse,
-} from '@standardnotes/snjs/dist/@types/services/api/responses';
-
-type Props = {
-  application: WebApplication;
-};
-
-type Subscription = {
-  planName: string;
-  cancelled: boolean;
-  endsAt: number;
-};
-
-type AvailableSubscriptions = {
-  [key: string]: {
-    name: string;
-  };
-};
-
-type SubscriptionInformationProps = {
-  subscription?: Subscription;
-  availableSubscriptions: AvailableSubscriptions;
-};
-
-type ValidSubscriptionProps = {
-  subscription: Subscription;
-  availableSubscriptions: AvailableSubscriptions;
-};
-
-const NoSubscription = () => (
-  <>
-    <Text>You don't have a Standard Notes subscription yet.</Text>
-    <div className="flex">
-      <Button
-        className="min-w-20 mt-3 mr-3"
-        type="normal"
-        label="Refresh"
-        onClick={() => null}
-      />
-      <Button
-        className="min-w-20 mt-3"
-        type="primary"
-        label="Purchase subscription"
-        onClick={() => null}
-      />
-    </div>
-  </>
-);
-
-const ActiveSubscription = ({
-  subscription,
-  availableSubscriptions,
-}: ValidSubscriptionProps) => (
-  <>
-    <Text>
-      Your{' '}
-      <span className="font-bold">
-        Standard Notes {availableSubscriptions[subscription.planName]}
-      </span>{' '}
-      subscription will be{' '}
-      <span className="font-bold">
-        renewed on {new Date(subscription.endsAt).toLocaleString()}
-      </span>
-      .
-    </Text>
-    <div className="flex">
-      <Button
-        className="min-w-20 mt-3 mr-3"
-        type="normal"
-        label="Refresh"
-        onClick={() => null}
-      />
-      <Button
-        className="min-w-20 mt-3 mr-3"
-        type="normal"
-        label="Change plan"
-        onClick={() => null}
-      />
-      <Button
-        className="min-w-20 mt-3"
-        type="primary"
-        label="Cancel subscription"
-        onClick={() => null}
-      />
-    </div>
-  </>
-);
-
-const CancelledSubscription = ({
-  subscription,
-  availableSubscriptions,
-}: ValidSubscriptionProps) => (
-  <>
-    <Text>
-      Your{' '}
-      <span className="font-bold">
-        Standard Notes {availableSubscriptions[subscription.planName]}
-      </span>{' '}
-      subscription has been{' '}
-      <span className="font-bold">
-        canceled but will remain valid until{' '}
-        {new Date(subscription.endsAt).toLocaleString()}
-      </span>
-      . You may resubscribe below if you wish.
-    </Text>
-    <div className="flex">
-      <Button
-        className="min-w-20 mt-3 mr-3"
-        type="normal"
-        label="Refresh"
-        onClick={() => null}
-      />
-      <Button
-        className="min-w-20 mt-3 mr-3"
-        type="normal"
-        label="Change plan"
-        onClick={() => null}
-      />
-      <Button
-        className="min-w-20 mt-3"
-        type="primary"
-        label="Renew subscription"
-        onClick={() => null}
-      />
-    </div>
-  </>
-);
-
-const SubscriptionInformation = ({
-  subscription,
-  availableSubscriptions,
-}: SubscriptionInformationProps) => {
-  const now = new Date().getTime();
-  if (subscription && subscription.endsAt > now) {
-    return subscription.cancelled ? (
-      <CancelledSubscription
-        subscription={subscription}
-        availableSubscriptions={availableSubscriptions}
-      />
-    ) : (
-      <ActiveSubscription
-        subscription={subscription}
-        availableSubscriptions={availableSubscriptions}
-      />
-    );
-  }
-  return <NoSubscription />;
-};
-
-const Subscription = observer(({ application }: Props) => {
-  const [subscription, setSubscription] =
-    useState<Subscription | undefined>(undefined);
-  const [availableSubscriptions, setAvailableSubscriptions] =
-    useState<AvailableSubscriptions>({});
-  const [error, setError] = useState(false);
-
-  useEffect(() => {
-    const getSubscriptions = async () => {
-      try {
-        const result = await application.getSubscriptions();
-        if (result.data) {
-          const data = (result as GetSubscriptionsResponse).data;
-          setAvailableSubscriptions(data!);
-        } else {
-          setError(true);
-        }
-      } catch (e) {
-        setError(true);
-      }
-    };
-    const getSubscription = async () => {
-      try {
-        const result = await application.getUserSubscription();
-        if (!result.error && result.data) {
-          const data = (result as GetSubscriptionResponse).data;
-          const subscription = data!.subscription;
-          setSubscription(subscription);
-        } else {
-          setError(true);
-        }
-      } catch (e) {
-        setError(true);
-      }
-    };
-    getSubscriptions();
-    getSubscription();
-  }, [application]);
-
-  return (
-    <PreferencesGroup>
-      <PreferencesSegment>
-        <div className="flex flex-row items-center">
-          <div className="flex-grow flex flex-col">
-            <Title>Subscription</Title>
-            {error ? (
-              'No subscription information available.'
-            ) : (
-              <SubscriptionInformation
-                subscription={subscription}
-                availableSubscriptions={availableSubscriptions}
-              />
-            )}
-          </div>
-        </div>
-      </PreferencesSegment>
-    </PreferencesGroup>
-  );
-});
-
-export default Subscription;
diff --git a/app/assets/javascripts/preferences/panes/account/index.ts b/app/assets/javascripts/preferences/panes/account/index.ts
index d30c31420..063947150 100644
--- a/app/assets/javascripts/preferences/panes/account/index.ts
+++ b/app/assets/javascripts/preferences/panes/account/index.ts
@@ -1,2 +1,2 @@
 export { default as Sync } from './Sync';
-export { default as Subscription } from './Subscription';
+export { SubscriptionWrapper } from './subscription/SubscriptionWrapper';
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx
new file mode 100644
index 000000000..eb5d984ad
--- /dev/null
+++ b/app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx
@@ -0,0 +1,49 @@
+import { observer } from 'mobx-react-lite';
+import { SubscriptionState } from './subscription_state';
+import { Text } from '@/preferences/components';
+import { Button } from '@/components/Button';
+
+type Props = {
+  subscriptionState: SubscriptionState;
+};
+
+export const ActiveSubscription = observer(
+  ({ subscriptionState }: Props) => {
+    const { userSubscription, userSubscriptionName } = subscriptionState;
+    return (
+      <>
+        <Text>
+          Your{' '}
+          <span className="font-bold">
+            Standard Notes{userSubscriptionName ? " " : ""}{userSubscriptionName}
+          </span>{' '}
+          subscription will be{' '}
+          <span className="font-bold">
+            renewed on {new Date(userSubscription!.endsAt).toLocaleString()}
+          </span>
+          .
+        </Text>
+        <div className="flex">
+          <Button
+            className="min-w-20 mt-3 mr-3"
+            type="normal"
+            label="Refresh"
+            onClick={() => null}
+          />
+          <Button
+            className="min-w-20 mt-3 mr-3"
+            type="normal"
+            label="Change plan"
+            onClick={() => null}
+          />
+          <Button
+            className="min-w-20 mt-3"
+            type="primary"
+            label="Cancel subscription"
+            onClick={() => null}
+          />
+        </div>
+      </>
+    );
+  }
+);
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
new file mode 100644
index 000000000..84cf6639c
--- /dev/null
+++ b/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
@@ -0,0 +1,50 @@
+import { observer } from 'mobx-react-lite';
+import { SubscriptionState } from './subscription_state';
+import { Text } from '@/preferences/components';
+import { Button } from '@/components/Button';
+
+type Props = {
+  subscriptionState: SubscriptionState;
+};
+
+export const CancelledSubscription = observer(
+  ({ subscriptionState }: Props) => {
+    const { userSubscription, userSubscriptionName } = subscriptionState;
+    return (
+      <>
+        <Text>
+          Your{' '}
+          <span className="font-bold">
+            Standard NotesStandard Notes{userSubscriptionName ? " " : ""}{userSubscriptionName}
+          </span>{' '}
+          subscription has been{' '}
+          <span className="font-bold">
+            canceled but will remain valid until{' '}
+            {new Date(userSubscription!.endsAt).toLocaleString()}
+          </span>
+          . You may resubscribe below if you wish.
+        </Text>
+        <div className="flex">
+          <Button
+            className="min-w-20 mt-3 mr-3"
+            type="normal"
+            label="Refresh"
+            onClick={() => null}
+          />
+          <Button
+            className="min-w-20 mt-3 mr-3"
+            type="normal"
+            label="Change plan"
+            onClick={() => null}
+          />
+          <Button
+            className="min-w-20 mt-3"
+            type="primary"
+            label="Renew subscription"
+            onClick={() => null}
+          />
+        </div>
+      </>
+    );
+  }
+);
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
new file mode 100644
index 000000000..5042ea992
--- /dev/null
+++ b/app/assets/javascripts/preferences/panes/account/subscription/NoSubscription.tsx
@@ -0,0 +1,23 @@
+import { FunctionalComponent } from "preact";
+import { Text } from '@/preferences/components';
+import { Button } from '@/components/Button';
+
+export const NoSubscription: FunctionalComponent = () => (
+  <>
+    <Text>You don't have a Standard Notes subscription yet.</Text>
+    <div className="flex">
+      <Button
+        className="min-w-20 mt-3 mr-3"
+        type="normal"
+        label="Refresh"
+        onClick={() => null}
+      />
+      <Button
+        className="min-w-20 mt-3"
+        type="primary"
+        label="Purchase subscription"
+        onClick={() => null}
+      />
+    </div>
+  </>
+);
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
new file mode 100644
index 000000000..3ced9309e
--- /dev/null
+++ b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
@@ -0,0 +1,92 @@
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Title,
+} from '@/preferences/components';
+import { observer } from '@node_modules/mobx-react-lite';
+import { WebApplication } from '@/ui_models/application';
+import { useEffect, useState } from 'preact/hooks';
+import {
+  GetSubscriptionResponse,
+  GetSubscriptionsResponse,
+} from '@standardnotes/snjs/dist/@types/services/api/responses';
+import { SubscriptionState } from './subscription_state';
+import { CancelledSubscription } from './CancelledSubscription';
+import { ActiveSubscription } from './ActiveSubscription';
+import { NoSubscription } from './NoSubscription';
+
+type Props = {
+  application: WebApplication;
+  subscriptionState: SubscriptionState;
+};
+
+type SubscriptionInformationProps = {
+  subscriptionState: SubscriptionState;
+};
+
+const SubscriptionInformation = ({
+  subscriptionState,
+}: SubscriptionInformationProps) => {
+  const now = new Date().getTime();
+  const { userSubscription } = subscriptionState;
+
+  if (userSubscription && userSubscription.endsAt > now) {
+    return userSubscription.cancelled ? (
+      <CancelledSubscription subscriptionState={subscriptionState} />
+    ) : (
+      <ActiveSubscription subscriptionState={subscriptionState} />
+    );
+  }
+  return <NoSubscription />;
+};
+
+export const Subscription = observer(({ application, subscriptionState }: Props) => {
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const getSubscriptions = async () => {
+      try {
+        const result = await application.getSubscriptions();
+        if (result.data) {
+          const data = (result as GetSubscriptionsResponse).data;
+          subscriptionState.setAvailableSubscriptions(data!);
+        }
+      } catch (e) {
+        // Error in this call will only prevent the plan name from showing
+      }
+    };
+    const getSubscription = async () => {
+      try {
+        const result = await application.getUserSubscription();
+        if (!result.error && result.data) {
+          const data = (result as GetSubscriptionResponse).data;
+          const subscription = data!.subscription;
+          subscriptionState.setUserSubscription(subscription);
+        } else {
+          setError(true);
+        }
+      } catch (e) {
+        setError(true);
+      }
+    };
+    getSubscriptions();
+    getSubscription();
+  }, [application, subscriptionState]);
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <div className="flex flex-row items-center">
+          <div className="flex-grow flex flex-col">
+            <Title>Subscription</Title>
+            {error ? (
+              'No subscription information available.'
+            ) : (
+              <SubscriptionInformation subscriptionState={subscriptionState} />
+            )}
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+});
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionWrapper.tsx b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionWrapper.tsx
new file mode 100644
index 000000000..9a1c4033f
--- /dev/null
+++ b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionWrapper.tsx
@@ -0,0 +1,20 @@
+import { WebApplication } from '@/ui_models/application';
+import { FunctionalComponent } from 'preact';
+import { Subscription } from './Subscription';
+import { SubscriptionState } from './subscription_state';
+
+type Props = {
+  application: WebApplication;
+};
+
+export const SubscriptionWrapper: FunctionalComponent<Props> = ({
+  application,
+}) => {
+  const subscriptionState = new SubscriptionState();
+  return (
+    <Subscription
+      application={application}
+      subscriptionState={subscriptionState}
+    />
+  );
+};
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx b/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
new file mode 100644
index 000000000..aaa2bab72
--- /dev/null
+++ b/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
@@ -0,0 +1,51 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+
+type Subscription = {
+  planName: string;
+  cancelled: boolean;
+  endsAt: number;
+};
+
+type AvailableSubscriptions = {
+  [key: string]: {
+    name: string;
+  };
+};
+
+export class SubscriptionState {
+  userSubscription: Subscription | undefined;
+  availableSubscriptions: AvailableSubscriptions | undefined;
+
+  constructor() {
+    makeObservable(this, {
+      userSubscription: observable,
+      availableSubscriptions: observable,
+
+      userSubscriptionName: computed,
+
+      setUserSubscription: action,
+      setAvailableSubscriptions: action,
+    });
+  }
+
+  get userSubscriptionName(): string {
+    if (
+      this.availableSubscriptions &&
+      this.userSubscription &&
+      this.availableSubscriptions[this.userSubscription.planName]
+    ) {
+      return this.availableSubscriptions[this.userSubscription.planName].name;
+    }
+    return '';
+  }
+
+  public setUserSubscription(subscription: Subscription): void {
+    this.userSubscription = subscription;
+  }
+
+  public setAvailableSubscriptions(
+    subscriptions: AvailableSubscriptions
+  ): void {
+    this.availableSubscriptions = subscriptions;
+  }
+}

From 99ef854ae8b36a993583b7e29ffa6ca66a57d3c6 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 7 Sep 2021 12:06:25 -0300
Subject: [PATCH 4/9] fix: set mobx store as local state

---
 .../panes/account/subscription/SubscriptionWrapper.tsx         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionWrapper.tsx b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionWrapper.tsx
index 9a1c4033f..9a19112e6 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionWrapper.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionWrapper.tsx
@@ -1,5 +1,6 @@
 import { WebApplication } from '@/ui_models/application';
 import { FunctionalComponent } from 'preact';
+import { useState } from 'preact/hooks';
 import { Subscription } from './Subscription';
 import { SubscriptionState } from './subscription_state';
 
@@ -10,7 +11,7 @@ type Props = {
 export const SubscriptionWrapper: FunctionalComponent<Props> = ({
   application,
 }) => {
-  const subscriptionState = new SubscriptionState();
+  const [subscriptionState] = useState(() => new SubscriptionState());
   return (
     <Subscription
       application={application}

From 41257977a7bcc52e8e80af5268782a25c888887d Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 7 Sep 2021 13:14:12 -0300
Subject: [PATCH 5/9] fix: fix state and add loading state

---
 .../subscription/CancelledSubscription.tsx    |  2 +-
 .../account/subscription/Subscription.tsx     | 78 +++++++++++--------
 .../subscription/subscription_state.tsx       |  6 +-
 3 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
index 84cf6639c..d3742e65c 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
@@ -15,7 +15,7 @@ export const CancelledSubscription = observer(
         <Text>
           Your{' '}
           <span className="font-bold">
-            Standard NotesStandard Notes{userSubscriptionName ? " " : ""}{userSubscriptionName}
+            Standard Notes{userSubscriptionName ? " " : ""}{userSubscriptionName}
           </span>{' '}
           subscription has been{' '}
           <span className="font-bold">
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
index 3ced9309e..df5b3f9fc 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
@@ -5,7 +5,7 @@ import {
 } from '@/preferences/components';
 import { observer } from '@node_modules/mobx-react-lite';
 import { WebApplication } from '@/ui_models/application';
-import { useEffect, useState } from 'preact/hooks';
+import { useCallback, useEffect, useState } from 'preact/hooks';
 import {
   GetSubscriptionResponse,
   GetSubscriptionsResponse,
@@ -14,6 +14,8 @@ import { SubscriptionState } from './subscription_state';
 import { CancelledSubscription } from './CancelledSubscription';
 import { ActiveSubscription } from './ActiveSubscription';
 import { NoSubscription } from './NoSubscription';
+import { Text } from '@/preferences/components';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
@@ -24,7 +26,7 @@ type SubscriptionInformationProps = {
   subscriptionState: SubscriptionState;
 };
 
-const SubscriptionInformation = ({
+const SubscriptionInformation = observer(({
   subscriptionState,
 }: SubscriptionInformationProps) => {
   const now = new Date().getTime();
@@ -38,41 +40,53 @@ const SubscriptionInformation = ({
     );
   }
   return <NoSubscription />;
-};
+});
 
-export const Subscription = observer(({ application, subscriptionState }: Props) => {
+export const Subscription: FunctionalComponent<Props> = ({ application, subscriptionState }) => {
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
-  useEffect(() => {
-    const getSubscriptions = async () => {
-      try {
-        const result = await application.getSubscriptions();
-        if (result.data) {
-          const data = (result as GetSubscriptionsResponse).data;
-          subscriptionState.setAvailableSubscriptions(data!);
-        }
-      } catch (e) {
-        // Error in this call will only prevent the plan name from showing
+  const getSubscriptions = useCallback(async () => {
+    try {
+      const result = await application.getSubscriptions();
+      if (result.data) {
+        const data = (result as GetSubscriptionsResponse).data;
+        subscriptionState.setAvailableSubscriptions(data!);
       }
-    };
-    const getSubscription = async () => {
-      try {
-        const result = await application.getUserSubscription();
-        if (!result.error && result.data) {
-          const data = (result as GetSubscriptionResponse).data;
-          const subscription = data!.subscription;
-          subscriptionState.setUserSubscription(subscription);
-        } else {
-          setError(true);
-        }
-      } catch (e) {
+    } catch (e) {
+      // Error in this call will only prevent the plan name from showing
+    }
+  }, [application, subscriptionState]);
+
+  const getSubscription = useCallback(async () => {
+    try {
+      const result = await application.getUserSubscription();
+      if (!result.error && result.data) {
+        const data = (result as GetSubscriptionResponse).data;
+        const subscription = data!.subscription;
+        subscriptionState.setUserSubscription(subscription);
+      } else {
         setError(true);
       }
-    };
-    getSubscriptions();
-    getSubscription();
+    } catch (e) {
+      setError(true);
+    }
   }, [application, subscriptionState]);
 
+  const getSubscriptionInfo = useCallback(async () => {
+    setLoading(true);
+    try {
+      await getSubscription();
+      await getSubscriptions();
+    } finally {
+      setLoading(false);
+    }
+  }, [getSubscription, getSubscriptions]);
+
+  useEffect(() => {
+    getSubscriptionInfo();
+  }, [getSubscriptionInfo]);
+
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -80,7 +94,9 @@ export const Subscription = observer(({ application, subscriptionState }: Props)
           <div className="flex-grow flex flex-col">
             <Title>Subscription</Title>
             {error ? (
-              'No subscription information available.'
+              <Text>No subscription information available.</Text>
+            ) : loading ? (
+              <Text>Loading subscription information...</Text>
             ) : (
               <SubscriptionInformation subscriptionState={subscriptionState} />
             )}
@@ -89,4 +105,4 @@ export const Subscription = observer(({ application, subscriptionState }: Props)
       </PreferencesSegment>
     </PreferencesGroup>
   );
-});
+};
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx b/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
index aaa2bab72..f5a9a0a74 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
@@ -13,8 +13,8 @@ type AvailableSubscriptions = {
 };
 
 export class SubscriptionState {
-  userSubscription: Subscription | undefined;
-  availableSubscriptions: AvailableSubscriptions | undefined;
+  userSubscription: Subscription | undefined = undefined;
+  availableSubscriptions: AvailableSubscriptions | undefined = undefined;
 
   constructor() {
     makeObservable(this, {
@@ -40,7 +40,9 @@ export class SubscriptionState {
   }
 
   public setUserSubscription(subscription: Subscription): void {
+    console.log('set subscription in state', subscription);
     this.userSubscription = subscription;
+    console.log(this.userSubscription);
   }
 
   public setAvailableSubscriptions(

From dee0c74ebb238a4dd44e746242cfb457f49a3131 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 7 Sep 2021 14:37:37 -0300
Subject: [PATCH 6/9] Update
 app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx

Co-authored-by: Mo Bitar <mo@standardnotes.org>
---
 .../panes/account/subscription/subscription_state.tsx            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx b/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
index f5a9a0a74..fa09dfd0b 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
@@ -40,7 +40,6 @@ export class SubscriptionState {
   }
 
   public setUserSubscription(subscription: Subscription): void {
-    console.log('set subscription in state', subscription);
     this.userSubscription = subscription;
     console.log(this.userSubscription);
   }

From 2696f5b735db370e0efa10d60a8f2993d04b9510 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Tue, 7 Sep 2021 15:11:27 -0300
Subject: [PATCH 7/9] refactor: merge active and cancelled components into one

---
 .../subscription/ActiveSubscription.tsx       | 49 -----------
 .../subscription/CancelledSubscription.tsx    | 50 ------------
 .../account/subscription/Subscription.tsx     | 39 +++------
 .../subscription/SubscriptionInformation.tsx  | 81 +++++++++++++++++++
 .../subscription/subscription_state.tsx       |  1 -
 5 files changed, 94 insertions(+), 126 deletions(-)
 delete mode 100644 app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx
 delete mode 100644 app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
 create mode 100644 app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx

diff --git a/app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx
deleted file mode 100644
index eb5d984ad..000000000
--- a/app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import { SubscriptionState } from './subscription_state';
-import { Text } from '@/preferences/components';
-import { Button } from '@/components/Button';
-
-type Props = {
-  subscriptionState: SubscriptionState;
-};
-
-export const ActiveSubscription = observer(
-  ({ subscriptionState }: Props) => {
-    const { userSubscription, userSubscriptionName } = subscriptionState;
-    return (
-      <>
-        <Text>
-          Your{' '}
-          <span className="font-bold">
-            Standard Notes{userSubscriptionName ? " " : ""}{userSubscriptionName}
-          </span>{' '}
-          subscription will be{' '}
-          <span className="font-bold">
-            renewed on {new Date(userSubscription!.endsAt).toLocaleString()}
-          </span>
-          .
-        </Text>
-        <div className="flex">
-          <Button
-            className="min-w-20 mt-3 mr-3"
-            type="normal"
-            label="Refresh"
-            onClick={() => null}
-          />
-          <Button
-            className="min-w-20 mt-3 mr-3"
-            type="normal"
-            label="Change plan"
-            onClick={() => null}
-          />
-          <Button
-            className="min-w-20 mt-3"
-            type="primary"
-            label="Cancel subscription"
-            onClick={() => null}
-          />
-        </div>
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
deleted file mode 100644
index d3742e65c..000000000
--- a/app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import { SubscriptionState } from './subscription_state';
-import { Text } from '@/preferences/components';
-import { Button } from '@/components/Button';
-
-type Props = {
-  subscriptionState: SubscriptionState;
-};
-
-export const CancelledSubscription = observer(
-  ({ subscriptionState }: Props) => {
-    const { userSubscription, userSubscriptionName } = subscriptionState;
-    return (
-      <>
-        <Text>
-          Your{' '}
-          <span className="font-bold">
-            Standard Notes{userSubscriptionName ? " " : ""}{userSubscriptionName}
-          </span>{' '}
-          subscription has been{' '}
-          <span className="font-bold">
-            canceled but will remain valid until{' '}
-            {new Date(userSubscription!.endsAt).toLocaleString()}
-          </span>
-          . You may resubscribe below if you wish.
-        </Text>
-        <div className="flex">
-          <Button
-            className="min-w-20 mt-3 mr-3"
-            type="normal"
-            label="Refresh"
-            onClick={() => null}
-          />
-          <Button
-            className="min-w-20 mt-3 mr-3"
-            type="normal"
-            label="Change plan"
-            onClick={() => null}
-          />
-          <Button
-            className="min-w-20 mt-3"
-            type="primary"
-            label="Renew subscription"
-            onClick={() => null}
-          />
-        </div>
-      </>
-    );
-  }
-);
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
index df5b3f9fc..33dff200b 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
@@ -3,7 +3,6 @@ import {
   PreferencesSegment,
   Title,
 } from '@/preferences/components';
-import { observer } from '@node_modules/mobx-react-lite';
 import { WebApplication } from '@/ui_models/application';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import {
@@ -11,41 +10,25 @@ import {
   GetSubscriptionsResponse,
 } from '@standardnotes/snjs/dist/@types/services/api/responses';
 import { SubscriptionState } from './subscription_state';
-import { CancelledSubscription } from './CancelledSubscription';
-import { ActiveSubscription } from './ActiveSubscription';
+import { SubscriptionInformation } from './SubscriptionInformation';
 import { NoSubscription } from './NoSubscription';
 import { Text } from '@/preferences/components';
-import { FunctionalComponent } from 'preact';
+import { observer } from 'mobx-react-lite';
 
 type Props = {
   application: WebApplication;
   subscriptionState: SubscriptionState;
 };
 
-type SubscriptionInformationProps = {
-  subscriptionState: SubscriptionState;
-};
-
-const SubscriptionInformation = observer(({
+export const Subscription = observer(({
+  application,
   subscriptionState,
-}: SubscriptionInformationProps) => {
-  const now = new Date().getTime();
-  const { userSubscription } = subscriptionState;
-
-  if (userSubscription && userSubscription.endsAt > now) {
-    return userSubscription.cancelled ? (
-      <CancelledSubscription subscriptionState={subscriptionState} />
-    ) : (
-      <ActiveSubscription subscriptionState={subscriptionState} />
-    );
-  }
-  return <NoSubscription />;
-});
-
-export const Subscription: FunctionalComponent<Props> = ({ application, subscriptionState }) => {
+}: Props) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
+  const { userSubscription } = subscriptionState;
+
   const getSubscriptions = useCallback(async () => {
     try {
       const result = await application.getSubscriptions();
@@ -87,6 +70,8 @@ export const Subscription: FunctionalComponent<Props> = ({ application, subscrip
     getSubscriptionInfo();
   }, [getSubscriptionInfo]);
 
+  const now = new Date().getTime();
+
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -97,12 +82,14 @@ export const Subscription: FunctionalComponent<Props> = ({ application, subscrip
               <Text>No subscription information available.</Text>
             ) : loading ? (
               <Text>Loading subscription information...</Text>
-            ) : (
+            ) : userSubscription && userSubscription.endsAt > now ? (
               <SubscriptionInformation subscriptionState={subscriptionState} />
+            ) : (
+              <NoSubscription />
             )}
           </div>
         </div>
       </PreferencesSegment>
     </PreferencesGroup>
   );
-};
+});
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
new file mode 100644
index 000000000..eb97147a5
--- /dev/null
+++ b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
@@ -0,0 +1,81 @@
+import { observer } from 'mobx-react-lite';
+import { SubscriptionState } from './subscription_state';
+import { Text } from '@/preferences/components';
+import { Button } from '@/components/Button';
+
+type Props = {
+  subscriptionState: SubscriptionState;
+};
+
+const StatusText = observer(({ subscriptionState }: Props) => {
+  const { userSubscription, userSubscriptionName } = subscriptionState;
+
+  return userSubscription!.cancelled ? (
+    <Text>
+      Your{' '}
+      <span className="font-bold">
+        Standard Notes{userSubscriptionName ? ' ' : ''}
+        {userSubscriptionName}
+      </span>{' '}
+      subscription has been{' '}
+      <span className="font-bold">
+        canceled but will remain valid until{' '}
+        {new Date(userSubscription!.endsAt).toLocaleString()}
+      </span>
+      . You may resubscribe below if you wish.
+    </Text>
+  ) : (
+    <Text>
+      Your{' '}
+      <span className="font-bold">
+        Standard Notes{userSubscriptionName ? ' ' : ''}
+        {userSubscriptionName}
+      </span>{' '}
+      subscription will be{' '}
+      <span className="font-bold">
+        renewed on {new Date(userSubscription!.endsAt).toLocaleString()}
+      </span>
+      .
+    </Text>
+  );
+});
+
+const PrimaryButton = observer(({ subscriptionState }: Props) => {
+  const { userSubscription } = subscriptionState;
+
+  return (
+    <Button
+      className="min-w-20 mt-3"
+      type="primary"
+      label={userSubscription!.cancelled ? "Renew subscription" : "Cancel subscription"}
+      onClick={() => null}
+    />
+  );
+});
+
+export const SubscriptionInformation = observer(
+  ({ subscriptionState }: Props) => (
+    <>
+      <StatusText
+        subscriptionState={subscriptionState}
+      />
+      <div className="flex">
+        <Button
+          className="min-w-20 mt-3 mr-3"
+          type="normal"
+          label="Refresh"
+          onClick={() => null}
+        />
+        <Button
+          className="min-w-20 mt-3 mr-3"
+          type="normal"
+          label="Change plan"
+          onClick={() => null}
+        />
+        <PrimaryButton
+          subscriptionState={subscriptionState}
+        />
+      </div>
+    </>
+  )
+);
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx b/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
index fa09dfd0b..38f6768a0 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/subscription_state.tsx
@@ -41,7 +41,6 @@ export class SubscriptionState {
 
   public setUserSubscription(subscription: Subscription): void {
     this.userSubscription = subscription;
-    console.log(this.userSubscription);
   }
 
   public setAvailableSubscriptions(

From b3f2d778465efe68eee0e57774a6f157d1df31f3 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Mon, 13 Sep 2021 12:02:30 -0300
Subject: [PATCH 8/9] chore(version-snjs): 2.14.1

---
 .../account/subscription/Subscription.tsx     | 19 ++-----
 .../subscription/SubscriptionInformation.tsx  |  5 +-
 .../javascripts/ui_models/application.ts      |  4 +-
 package.json                                  |  2 +-
 yarn.lock                                     | 49 +++++++++----------
 5 files changed, 34 insertions(+), 45 deletions(-)

diff --git a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
index 33dff200b..4f159cb0c 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/Subscription.tsx
@@ -5,10 +5,6 @@ import {
 } from '@/preferences/components';
 import { WebApplication } from '@/ui_models/application';
 import { useCallback, useEffect, useState } from 'preact/hooks';
-import {
-  GetSubscriptionResponse,
-  GetSubscriptionsResponse,
-} from '@standardnotes/snjs/dist/@types/services/api/responses';
 import { SubscriptionState } from './subscription_state';
 import { SubscriptionInformation } from './SubscriptionInformation';
 import { NoSubscription } from './NoSubscription';
@@ -31,10 +27,9 @@ export const Subscription = observer(({
 
   const getSubscriptions = useCallback(async () => {
     try {
-      const result = await application.getSubscriptions();
-      if (result.data) {
-        const data = (result as GetSubscriptionsResponse).data;
-        subscriptionState.setAvailableSubscriptions(data!);
+      const subscriptions = await application.getAvailableSubscriptions();
+      if (subscriptions) {
+        subscriptionState.setAvailableSubscriptions(subscriptions);
       }
     } catch (e) {
       // Error in this call will only prevent the plan name from showing
@@ -43,13 +38,9 @@ export const Subscription = observer(({
 
   const getSubscription = useCallback(async () => {
     try {
-      const result = await application.getUserSubscription();
-      if (!result.error && result.data) {
-        const data = (result as GetSubscriptionResponse).data;
-        const subscription = data!.subscription;
+      const subscription = await application.getUserSubscription();
+      if (subscription) {
         subscriptionState.setUserSubscription(subscription);
-      } else {
-        setError(true);
       }
     } catch (e) {
       setError(true);
diff --git a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
index eb97147a5..a68b9c53f 100644
--- a/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
+++ b/app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx
@@ -9,6 +9,7 @@ type Props = {
 
 const StatusText = observer(({ subscriptionState }: Props) => {
   const { userSubscription, userSubscriptionName } = subscriptionState;
+  const expirationDate = new Date(userSubscription!.endsAt / 1000).toLocaleString();
 
   return userSubscription!.cancelled ? (
     <Text>
@@ -20,7 +21,7 @@ const StatusText = observer(({ subscriptionState }: Props) => {
       subscription has been{' '}
       <span className="font-bold">
         canceled but will remain valid until{' '}
-        {new Date(userSubscription!.endsAt).toLocaleString()}
+        {expirationDate}
       </span>
       . You may resubscribe below if you wish.
     </Text>
@@ -33,7 +34,7 @@ const StatusText = observer(({ subscriptionState }: Props) => {
       </span>{' '}
       subscription will be{' '}
       <span className="font-bold">
-        renewed on {new Date(userSubscription!.endsAt).toLocaleString()}
+        renewed on {expirationDate}
       </span>
       .
     </Text>
diff --git a/app/assets/javascripts/ui_models/application.ts b/app/assets/javascripts/ui_models/application.ts
index fba8edf08..99161903f 100644
--- a/app/assets/javascripts/ui_models/application.ts
+++ b/app/assets/javascripts/ui_models/application.ts
@@ -25,6 +25,7 @@ import { NativeExtManager } from '@/services/nativeExtManager';
 import { StatusManager } from '@/services/statusManager';
 import { ThemeManager } from '@/services/themeManager';
 import { AppVersion } from '@/version';
+import { isDev } from '@/utils';
 
 type WebServices = {
   appState: AppState;
@@ -64,7 +65,8 @@ export class WebApplication extends SNApplication {
       identifier,
       [],
       defaultSyncServerHost,
-      AppVersion
+      AppVersion,
+      isDev,
     );
     this.$compile = $compile;
     this.scope = scope;
diff --git a/package.json b/package.json
index 99ce6f3ad..f169b15cb 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@reach/dialog": "^0.13.0",
     "@standardnotes/sncrypto-web": "1.5.2",
     "@standardnotes/features": "1.6.1",
-    "@standardnotes/snjs": "2.12.3",
+    "@standardnotes/snjs": "2.14.1",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
     "preact": "^10.5.12",
diff --git a/yarn.lock b/yarn.lock
index 4dc1f340d..d8da7b59b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2011,34 +2011,29 @@
     prop-types "^15.7.2"
     tslib "^2.1.0"
 
-"@standardnotes/auth@3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.1.1.tgz#834701c2e14d31eb204bff90457fa05e9183464a"
-  integrity sha512-E9zDYZ1gJkVZBEzd7a1L2haQ4GYeH1lUrY87UmDH1AMYUHW+c0SqZ71af1fBNqGzrx3EZSXk+Qzr7RyOa6N1Mw==
-
-"@standardnotes/auth@^3.2.0":
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.7.0.tgz#1193f0521bd3b1c3655685c27aff894b98c7f582"
-  integrity sha512-lHMRyVOxF9g11MH04wcbhpErPysL721Hgrzbi6slRDqIuA+2VpECIkbAhI5WpgP5K8RjO/kZB4l0tzcRI1Mg/g==
+"@standardnotes/auth@3.7.1", "@standardnotes/auth@^3.7.0":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.7.1.tgz#d0b1eb63f605e04ecb077fdb5ef83e3fe6db33f9"
+  integrity sha512-xtjAvtikLW3Xv75X/kYA1KTm8FJVPPlXvl+ofnrf/ijkIaRkbUW/3TUhMES+G5CMiG2TZv6uVn32GqJipqgQQQ==
   dependencies:
-    "@standardnotes/common" "^1.0.0"
+    "@standardnotes/common" "^1.1.0"
 
-"@standardnotes/common@1.1.0", "@standardnotes/common@^1.0.0", "@standardnotes/common@^1.1.0":
+"@standardnotes/common@1.1.0", "@standardnotes/common@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.1.0.tgz#5ffb0a50f9947471e236bb66d097f153ad9a148f"
   integrity sha512-Nm2IFWbMSfZDD7cnKtN+Gjic0f+PhPq/da/o4eOoUKg21VeOaQkTn+jlQKraKIs6Lmf+w9mmPNAgMc5o4hj7Lg==
 
-"@standardnotes/domain-events@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.0.0.tgz#6e537485054c6b32cb1d9408fab9cd132ed0fb65"
-  integrity sha512-4rMCGw2Gy1CLfi6SkpsH7QzbT/80g5gVGeicEHhHvLhMolAEsHXCGOjpw5/nA3YKl8B/U8s6wvaee2vIDejFLA==
+"@standardnotes/domain-events@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.1.0.tgz#a5c4379983a728a738f145aa9e76f7640c7283a2"
+  integrity sha512-8bCQk2V2fyWKalVWC9L8cuj2kuKLe+bTTp0xBVTDpDhWrGFzXfsI79AzWbOl/CLHJU/PWrXf1lvUgQwPwT+RlA==
   dependencies:
-    "@standardnotes/auth" "^3.2.0"
+    "@standardnotes/auth" "^3.7.0"
 
-"@standardnotes/features@1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.6.0.tgz#91317255bbad376670fd81fa445abc2d14fd43d9"
-  integrity sha512-0gN1UKpX0LZxOk7HlnLxbl7N8Drvyw36zRErFn3pSetUNQpr92Pd6qTTNNflBBtY2pwzqoP4XVB/2kZRJFAo8w==
+"@standardnotes/features@1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.6.2.tgz#98c5998426d9f93e06c2846c5bc7b6aef8d31063"
+  integrity sha512-s/rqRyG7mrrgxJOzckPSYlB68wsRpM9jlFwDE+7zQO5/xKh+37ueWfy3RoqOgkKLey6lMpnTurofIJCvqLM3dQ==
   dependencies:
     "@standardnotes/common" "^1.1.0"
 
@@ -2067,15 +2062,15 @@
     "@standardnotes/sncrypto-common" "^1.5.2"
     libsodium-wrappers "^0.7.8"
 
-"@standardnotes/snjs@2.12.1":
-  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.12.1.tgz#4c2cac0e9f87d55d7d24a30f0fbe90d878869c7b"
-  integrity sha512-4ehV9Nviko0yLs8NUToSXQvOTcQs4XlU2e1sfSkvZZ+Z+iQZo/gR/Xc9gXhr/PvJpahecJIAnbcLpPlJ/DU9MQ==
+"@standardnotes/snjs@2.14.1":
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.1.tgz#cafd401fc32370919ccb94a2566d5318bb8805ee"
+  integrity sha512-iaKtF99LlmCfKRz8F6BnMrEeHSwmSyFmawMotcJkTc2vH66167xfF+VoijuB9YLzjbgjJpI5KXDlrPzZE/+PxQ==
   dependencies:
-    "@standardnotes/auth" "3.1.1"
+    "@standardnotes/auth" "3.7.1"
     "@standardnotes/common" "1.1.0"
-    "@standardnotes/domain-events" "2.0.0"
-    "@standardnotes/features" "1.6.0"
+    "@standardnotes/domain-events" "2.1.0"
+    "@standardnotes/features" "1.6.2"
     "@standardnotes/settings" "1.2.0"
     "@standardnotes/sncrypto-common" "1.5.2"
 

From 6a17bfa88865328aa2a452f0a94de68985adf627 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Mon, 13 Sep 2021 19:39:12 -0300
Subject: [PATCH 9/9] chore(version-snjs): 2.14.3

---
 package.json |  2 +-
 yarn.lock    | 29 ++++++++++++++++++-----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index f169b15cb..3e0e2ad59 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "@reach/dialog": "^0.13.0",
     "@standardnotes/sncrypto-web": "1.5.2",
     "@standardnotes/features": "1.6.1",
-    "@standardnotes/snjs": "2.14.1",
+    "@standardnotes/snjs": "2.14.3",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
     "preact": "^10.5.12",
diff --git a/yarn.lock b/yarn.lock
index c3f48a2f2..3efd11a6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2011,7 +2011,14 @@
     prop-types "^15.7.2"
     tslib "^2.1.0"
 
-"@standardnotes/auth@3.7.1", "@standardnotes/auth@^3.7.0":
+"@standardnotes/auth@3.7.2":
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.7.2.tgz#de553ca38c64ae76b3ee3a3aa12ea20311030adb"
+  integrity sha512-YED+iWX1FxMpn4UJ0Yo37/K0Py/xNYoqcFSlgEcXNorNllRHpLXGXKZ3ILAQVRa0R1oYXpmsthx4bjg2JSptiA==
+  dependencies:
+    "@standardnotes/common" "^1.1.0"
+
+"@standardnotes/auth@^3.7.0":
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.7.1.tgz#d0b1eb63f605e04ecb077fdb5ef83e3fe6db33f9"
   integrity sha512-xtjAvtikLW3Xv75X/kYA1KTm8FJVPPlXvl+ofnrf/ijkIaRkbUW/3TUhMES+G5CMiG2TZv6uVn32GqJipqgQQQ==
@@ -2030,12 +2037,12 @@
   dependencies:
     "@standardnotes/auth" "^3.7.0"
 
-"@standardnotes/features@1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.6.2.tgz#98c5998426d9f93e06c2846c5bc7b6aef8d31063"
-  integrity sha512-s/rqRyG7mrrgxJOzckPSYlB68wsRpM9jlFwDE+7zQO5/xKh+37ueWfy3RoqOgkKLey6lMpnTurofIJCvqLM3dQ==
+"@standardnotes/features@1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.6.1.tgz#bfa227bd231dc1b54449936663731f5132b08e23"
+  integrity sha512-IC6fEotUqs23JdZx96JnEgARxwYzjmPz3UwU/uVn8hHjxPev/W0nyZFRiSlj4v+dod0jSa6FTR8iLLsOQ6M4Ug==
   dependencies:
-    "@standardnotes/auth" "^3.7.0"
+    "@standardnotes/common" "^1.1.0"
 
 "@standardnotes/features@1.6.2":
   version "1.6.2"
@@ -2062,12 +2069,12 @@
     "@standardnotes/sncrypto-common" "^1.5.2"
     libsodium-wrappers "^0.7.8"
 
-"@standardnotes/snjs@2.14.1":
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.1.tgz#cafd401fc32370919ccb94a2566d5318bb8805ee"
-  integrity sha512-iaKtF99LlmCfKRz8F6BnMrEeHSwmSyFmawMotcJkTc2vH66167xfF+VoijuB9YLzjbgjJpI5KXDlrPzZE/+PxQ==
+"@standardnotes/snjs@2.14.3":
+  version "2.14.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.3.tgz#9d39508d5144db87359b3893ef05da8b0b793053"
+  integrity sha512-pX0WoWgY11ZMLdePvRNjnNoYVpTjWn4MLVnZGdSXp+Qz5rra/Y/ZBXFusrHG4+KqAqJ0AVhD6y5AwxtxuJwISQ==
   dependencies:
-    "@standardnotes/auth" "3.7.1"
+    "@standardnotes/auth" "3.7.2"
     "@standardnotes/common" "1.1.0"
     "@standardnotes/domain-events" "2.1.0"
     "@standardnotes/features" "1.6.2"