feat: Add "Manage subscription" button to Subscription preferences (#705)

* feat: Add "Manage subscription" button to Subscription preferences

* Update app/assets/javascripts/preferences/panes/account/subscription/SubscriptionInformation.tsx

Co-authored-by: Mo <mo@standardnotes.org>

* feat: Use convertTimestamp function instead of manual conversion in Subscription Info

Co-authored-by: Mo <mo@standardnotes.org>

app/assets/javascripts/app.ts

@@ -6,6 +6,8 @@ declare global {
     _bugsnag_api_key?: string;
     // eslint-disable-next-line camelcase
     _purchase_url?: string;
+    // eslint-disable-next-line camelcase
+    _dashboard_url?: string;
   }
 }
 
@@ -211,7 +213,7 @@ if (IsWebPlatform) {
     (window as any)._default_sync_server as string,
     new BrowserBridge(AppVersion),
     (window as any)._enable_unfinished_features as boolean,
-    (window as any)._websocket_url as string,
+    (window as any)._websocket_url as string
   );
 } else {
   (window as any).startApplication = startApplication;

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

@@ -77,7 +77,7 @@ export const Subscription: FunctionComponent<Props> = observer(({
             ) : loading ? (
               <Text>Loading subscription information...</Text>
             ) : userSubscription && userSubscription.endsAt > now ? (
-              <SubscriptionInformation subscriptionState={subscriptionState} />
+              <SubscriptionInformation subscriptionState={subscriptionState} application={application}/>
             ) : (
               <NoSubscription application={application} />
             )}

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

@@ -2,17 +2,22 @@ import { observer } from 'mobx-react-lite';
 import { SubscriptionState } from './subscription_state';
 import { Text } from '@/preferences/components';
 import { Button } from '@/components/Button';
+import { WebApplication } from '@/ui_models/application';
+import { convertTimestampToMilliseconds } from '@standardnotes/snjs';
 
 type Props = {
   subscriptionState: SubscriptionState;
+  application?: WebApplication;
 };
 
 const StatusText = observer(({ subscriptionState }: Props) => {
   const { userSubscription, userSubscriptionName } = subscriptionState;
-  const expirationDate = new Date(userSubscription!.endsAt / 1000).toLocaleString();
+  const expirationDate = new Date(
+    convertTimestampToMilliseconds(userSubscription!.endsAt)
+  ).toLocaleString();
 
   return userSubscription!.cancelled ? (
-    <Text>
+    <Text className="mt-1">
       Your{' '}
       <span className="font-bold">
         Standard Notes{userSubscriptionName ? ' ' : ''}
@@ -20,23 +25,19 @@ const StatusText = observer(({ subscriptionState }: Props) => {
       </span>{' '}
       subscription has been{' '}
       <span className="font-bold">
-        canceled but will remain valid until{' '}
-        {expirationDate}
+        canceled but will remain valid until {expirationDate}
       </span>
       . You may resubscribe below if you wish.
     </Text>
   ) : (
-    <Text>
+    <Text className="mt-1">
       Your{' '}
       <span className="font-bold">
         Standard Notes{userSubscriptionName ? ' ' : ''}
         {userSubscriptionName}
       </span>{' '}
       subscription will be{' '}
-      <span className="font-bold">
-        renewed on {expirationDate}
-      </span>
-      .
+      <span className="font-bold">renewed on {expirationDate}</span>.
     </Text>
   );
 });
@@ -48,35 +49,53 @@ const PrimaryButton = observer(({ subscriptionState }: Props) => {
     <Button
       className="min-w-20 mt-3"
       type="primary"
-      label={userSubscription!.cancelled ? "Renew subscription" : "Cancel subscription"}
+      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>
-    </>
-  )
+  ({ subscriptionState, application }: Props) => {
+    const openSubscriptionDashboard = async () => {
+      const token = await application?.getNewSubscriptionToken();
+      if (!token) {
+        return;
+      }
+      window.location.assign(
+        `${window._dashboard_url}?subscription_token=${token}`
+      );
+    };
+
+    return (
+      <>
+        <StatusText subscriptionState={subscriptionState} />
+        <div className="flex flex-wrap">
+          <Button
+            className="min-w-20 mt-3 mr-3"
+            type="normal"
+            label="Manage subscription"
+            onClick={openSubscriptionDashboard}
+          />
+          <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/views/application/app.html.erb

@@ -36,6 +36,7 @@
       window._enable_unfinished_features = "<%= ENV['ENABLE_UNFINISHED_FEATURES'] %>" === 'true';
       window._websocket_url = "<%= ENV['WEBSOCKET_URL'] %>";
       window._purchase_url = "<%= ENV['PURCHASE_URL'] %>";
+      window._dashboard_url = "<%= ENV['DASHBOARD_URL'] %>";
     </script>
 
     <% if Rails.env.development? %>

index.html

@@ -34,6 +34,7 @@
   data-enable-unfinished-features="<%= env.ENABLE_UNFINISHED_FEATURES %>"
   data-web-socket-url="<%= env.DEV_WEBSOCKET_URL %>"
   data-purchase-url="<%= env.PURCHASE_URL %>"
+  data-dashboard-url="<%= env.DASHBOARD_URL %>"
 >
   <script>
     window._default_sync_server = document.body.dataset.defaultSyncServer || "https://api.standardnotes.com";
@@ -41,6 +42,7 @@
     window._enable_unfinished_features = document.body.dataset.enableUnfinishedFeatures === 'true';
     window._websocket_url = document.body.dataset.webSocketUrl;
     window._purchase_url = document.body.dataset.purchaseUrl;
+    window._dashboard_url = document.body.dataset.dashboardUrl;
   </script>
   <application-group-view />
 </body>