feat: display feature status (#745)

* feat: display feature status

* fix: hook dep

* fix: react hooks dep

app/assets/javascripts/preferences/PreferencesMenu.ts

@@ -1,7 +1,7 @@
 import { IconType } from '@/components/Icon';
 import { action, makeAutoObservable, observable } from 'mobx';
 import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
-import { ContentType, SNComponent } from '@node_modules/@standardnotes/snjs';
+import { ContentType, SNComponent } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 import { FeatureIdentifier } from '@node_modules/@standardnotes/features/dist/Domain/Feature/FeatureIdentifier';
 import { ComponentArea } from '@standardnotes/snjs';

app/assets/javascripts/preferences/panes/account/Credentials.tsx

@@ -3,7 +3,7 @@ import { Button } from '@/components/Button';
 import { WebApplication } from '@/ui_models/application';
 import { observer } from '@node_modules/mobx-react-lite';
 import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
-import { dateToLocalizedString } from '@/utils';
+import { dateToLocalizedString } from '@standardnotes/snjs';
 import { useState } from 'preact/hooks';
 import { ChangeEmail } from '@/preferences/panes/account/changeEmail';
 import { PasswordWizardType } from '@/types';

app/assets/javascripts/preferences/panes/account/Sync.tsx

@@ -5,10 +5,9 @@ import {
   Title,
 } from '@/preferences/components';
 import { Button } from '@/components/Button';
-import { SyncQueueStrategy } from '@node_modules/@standardnotes/snjs';
+import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs';
 import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
 import { useState } from '@node_modules/preact/hooks';
-import { dateToLocalizedString } from '@/utils';
 import { observer } from '@node_modules/mobx-react-lite';
 import { WebApplication } from '@/ui_models/application';
 import { FunctionComponent } from 'preact';

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

@@ -4,6 +4,7 @@ import { Text } from '@/preferences/components';
 import { Button } from '@/components/Button';
 import { WebApplication } from '@/ui_models/application';
 import { convertTimestampToMilliseconds } from '@standardnotes/snjs';
+import { openSubscriptionDashboard } from '@/hooks/manageSubscription';
 
 type Props = {
   subscriptionState: SubscriptionState;
@@ -44,14 +45,8 @@ const StatusText = observer(({ subscriptionState }: Props) => {
 
 export const SubscriptionInformation = observer(
   ({ subscriptionState, application }: Props) => {
-    const openSubscriptionDashboard = async () => {
-      const token = await application?.getNewSubscriptionToken();
-      if (!token) {
-        return;
-      }
-      window.location.assign(
-        `${window._dashboard_url}?subscription_token=${token}`
-      );
+    const manageSubscription = async () => {
+      openSubscriptionDashboard(application!);
     };
 
     return (
@@ -61,7 +56,7 @@ export const SubscriptionInformation = observer(
           className="min-w-20 mt-3 mr-3"
           type="normal"
           label="Manage subscription"
-          onClick={openSubscriptionDashboard}
+          onClick={manageSubscription}
         />
       </>
     );