refactor: merge active and cancelled components into one

app/assets/javascripts/preferences/panes/account/subscription/ActiveSubscription.tsx

@@ -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>
-      </>
-    );
-  }
-);

app/assets/javascripts/preferences/panes/account/subscription/CancelledSubscription.tsx

@@ -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>
-      </>
-    );
-  }
-);

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 { SubscriptionInformation } from './SubscriptionInformation';
-import { ActiveSubscription } from './ActiveSubscription';
 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 = {
+export const Subscription = observer(({
-  subscriptionState: SubscriptionState;
+  application,
-};
-
-const SubscriptionInformation = observer(({
   subscriptionState,
-}: SubscriptionInformationProps) => {
+}: Props) => {
-  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 }) => {
   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>
   );
-};
+});

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

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(