refactor: native feature management (#2350)

packages/web/src/javascripts/Components/ComponentView/IframeFeatureView.tsx

@@ -1,27 +1,25 @@
 import {
   ComponentAction,
   FeatureStatus,
-  SNComponent,
-  dateToLocalizedString,
   ComponentViewerInterface,
   ComponentViewerEvent,
   ComponentViewerError,
+  ComponentInterface,
+  SubscriptionManagerEvent,
 } from '@standardnotes/snjs'
-import { WebApplication } from '@/Application/WebApplication'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import OfflineRestricted from '@/Components/ComponentView/OfflineRestricted'
 import UrlMissing from '@/Components/ComponentView/UrlMissing'
 import IsDeprecated from '@/Components/ComponentView/IsDeprecated'
-import IsExpired from '@/Components/ComponentView/IsExpired'
+import NotEntitledBanner from '@/Components/ComponentView/NotEntitledBanner'
 import IssueOnLoading from '@/Components/ComponentView/IssueOnLoading'
-import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
+import { useApplication } from '../ApplicationProvider'
 
-interface IProps {
-  application: WebApplication
+interface Props {
   componentViewer: ComponentViewerInterface
   requestReload?: (viewer: ComponentViewerInterface, force?: boolean) => void
-  onLoad?: (component: SNComponent) => void
+  onLoad?: () => void
 }
 
 /**
@@ -32,7 +30,9 @@ const MaxLoadThreshold = 4000
 const VisibilityChangeKey = 'visibilitychange'
 const MSToWaitAfterIframeLoadToAvoidFlicker = 35
 
-const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, componentViewer, requestReload }) => {
+const IframeFeatureView: FunctionComponent<Props> = ({ onLoad, componentViewer, requestReload }) => {
+  const application = useApplication()
+
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
   const [loadTimeout, setLoadTimeout] = useState<ReturnType<typeof setTimeout> | undefined>(undefined)
 
@@ -45,11 +45,7 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
   const [isDeprecationMessageDismissed, setIsDeprecationMessageDismissed] = useState(false)
   const [didAttemptReload, setDidAttemptReload] = useState(false)
 
-  const component: SNComponent = componentViewer.component
-
-  const manageSubscription = useCallback(() => {
-    void openSubscriptionDashboard(application)
-  }, [application])
+  const uiFeature = componentViewer.getComponentOrFeatureItem()
 
   const reloadValidityStatus = useCallback(() => {
     setFeatureStatus(componentViewer.getFeatureStatus())
@@ -63,13 +59,21 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
     }
 
     setError(componentViewer.getError())
-    setDeprecationMessage(component.deprecationMessage)
-  }, [componentViewer, component.deprecationMessage, featureStatus, isComponentValid, isLoading])
+    setDeprecationMessage(uiFeature.deprecationMessage)
+  }, [componentViewer, uiFeature, featureStatus, isComponentValid, isLoading])
 
   useEffect(() => {
     reloadValidityStatus()
   }, [reloadValidityStatus])
 
+  useEffect(() => {
+    return application.subscriptions.addEventObserver((event) => {
+      if (event === SubscriptionManagerEvent.DidFetchSubscription) {
+        reloadValidityStatus()
+      }
+    })
+  }, [application.subscriptions, reloadValidityStatus])
+
   const dismissDeprecationMessage = () => {
     setIsDeprecationMessageDismissed(true)
   }
@@ -123,9 +127,9 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
     setTimeout(() => {
       setIsLoading(false)
       setHasIssueLoading(false)
-      onLoad?.(component)
+      onLoad?.()
     }, MSToWaitAfterIframeLoadToAvoidFlicker)
-  }, [componentViewer, onLoad, component, loadTimeout])
+  }, [componentViewer, onLoad, loadTimeout])
 
   useEffect(() => {
     const removeFeaturesChangedObserver = componentViewer.addEventObserver((event) => {
@@ -149,7 +153,7 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
           application.keyboardService.handleComponentKeyUp(data.keyboardModifier)
           break
         case ComponentAction.Click:
-          application.getViewControllerManager().notesController.setContextMenuOpen(false)
+          application.controllers.notesController.setContextMenuOpen(false)
           break
         default:
           return
@@ -163,8 +167,8 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
   useEffect(() => {
     const unregisterDesktopObserver = application
       .getDesktopService()
-      ?.registerUpdateObserver((updatedComponent: SNComponent) => {
-        if (updatedComponent.uuid === component.uuid && updatedComponent.active) {
+      ?.registerUpdateObserver((updatedComponent: ComponentInterface) => {
+        if (updatedComponent.uuid === uiFeature.uniqueIdentifier) {
           requestReload?.(componentViewer)
         }
       })
@@ -172,13 +176,13 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
     return () => {
       unregisterDesktopObserver?.()
     }
-  }, [application, requestReload, componentViewer, component.uuid])
+  }, [application, requestReload, componentViewer, uiFeature])
 
   return (
     <>
       {hasIssueLoading && (
         <IssueOnLoading
-          componentName={component.displayName}
+          componentName={uiFeature.displayName}
           reloadIframe={() => {
             reloadValidityStatus(), requestReload?.(componentViewer, true)
           }}
@@ -186,19 +190,17 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
       )}
 
       {featureStatus !== FeatureStatus.Entitled && (
-        <IsExpired
-          expiredDate={dateToLocalizedString(component.valid_until)}
-          featureStatus={featureStatus}
-          componentName={component.displayName}
-          manageSubscription={manageSubscription}
-        />
+        <NotEntitledBanner featureStatus={featureStatus} feature={uiFeature.featureDescription} />
       )}
       {deprecationMessage && !isDeprecationMessageDismissed && (
         <IsDeprecated deprecationMessage={deprecationMessage} dismissDeprecationMessage={dismissDeprecationMessage} />
       )}
+
       {error === ComponentViewerError.OfflineRestricted && <OfflineRestricted />}
-      {error === ComponentViewerError.MissingUrl && <UrlMissing componentName={component.displayName} />}
-      {component.uuid && isComponentValid && (
+
+      {error === ComponentViewerError.MissingUrl && <UrlMissing componentName={uiFeature.displayName} />}
+
+      {uiFeature.uniqueIdentifier && isComponentValid && (
         <iframe
           className="h-full w-full flex-grow bg-transparent"
           ref={iframeRef}
@@ -216,4 +218,4 @@ const ComponentView: FunctionComponent<IProps> = ({ application, onLoad, compone
   )
 }
 
-export default observer(ComponentView)
+export default observer(IframeFeatureView)

packages/web/src/javascripts/Components/ComponentView/IsExpired.tsx

@@ -1,49 +0,0 @@
-import { FeatureStatus } from '@standardnotes/snjs'
-import { FunctionComponent } from 'react'
-import Button from '@/Components/Button/Button'
-import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
-
-type Props = {
-  expiredDate: string
-  componentName: string
-  featureStatus: FeatureStatus
-  manageSubscription: () => void
-}
-
-const statusString = (featureStatus: FeatureStatus, expiredDate: string, componentName: string) => {
-  switch (featureStatus) {
-    case FeatureStatus.InCurrentPlanButExpired:
-      return `Your subscription expired on ${expiredDate}`
-    case FeatureStatus.NoUserSubscription:
-      return 'You do not have an active subscription'
-    case FeatureStatus.NotInCurrentPlan:
-      return `Please upgrade your plan to access ${componentName}`
-    default:
-      return `${componentName} is valid and you should not be seeing this message`
-  }
-}
-
-const IsExpired: FunctionComponent<Props> = ({ expiredDate, featureStatus, componentName, manageSubscription }) => {
-  return (
-    <div className={'sn-component'}>
-      <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
-        <div className={'left'}>
-          <div className="flex items-center">
-            <IndicatorCircle style="danger" />
-            <div className="ml-2">
-              <strong>{statusString(featureStatus, expiredDate, componentName)}</strong>
-              <div className={'sk-p'}>{componentName} is in a read-only state.</div>
-            </div>
-          </div>
-        </div>
-        <div className={'right'}>
-          <Button onClick={manageSubscription} primary colorStyle="success" small>
-            Manage subscription
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default IsExpired

packages/web/src/javascripts/Components/ComponentView/NotEntitledBanner.tsx

@@ -0,0 +1,63 @@
+import { AnyFeatureDescription, FeatureStatus, dateToLocalizedString } from '@standardnotes/snjs'
+import { FunctionComponent, useCallback } from 'react'
+import Button from '@/Components/Button/Button'
+import { WarningCircle } from '../UIElements/WarningCircle'
+import { useApplication } from '../ApplicationProvider'
+import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
+
+type Props = {
+  feature: AnyFeatureDescription
+  featureStatus: FeatureStatus
+}
+
+const statusString = (featureStatus: FeatureStatus, expiredDate: Date | undefined, featureName: string) => {
+  switch (featureStatus) {
+    case FeatureStatus.InCurrentPlanButExpired:
+      if (expiredDate) {
+        return `Your subscription expired on ${dateToLocalizedString(expiredDate)}`
+      } else {
+        return 'Your subscription expired.'
+      }
+    case FeatureStatus.NoUserSubscription:
+      return 'You do not have an active subscription'
+    case FeatureStatus.NotInCurrentPlan:
+      return `Please upgrade your plan to access ${featureName}`
+    default:
+      return `${featureName} is valid and you should not be seeing this message`
+  }
+}
+
+const NotEntitledBanner: FunctionComponent<Props> = ({ featureStatus, feature }) => {
+  const application = useApplication()
+
+  const expiredDate = application.subscriptions.userSubscriptionExpirationDate
+
+  const manageSubscription = useCallback(() => {
+    void openSubscriptionDashboard(application)
+  }, [application])
+
+  return (
+    <div className={'sn-component'}>
+      <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
+        <div className={'left'}>
+          <div className="flex items-start">
+            <div className="mt-1">
+              <WarningCircle />
+            </div>
+            <div className="ml-2">
+              <strong>{statusString(featureStatus, expiredDate, feature.name)}</strong>
+              <div className={'sk-p'}>{feature.name} is in a read-only state.</div>
+            </div>
+          </div>
+        </div>
+        <div className={'right'}>
+          <Button onClick={manageSubscription} primary colorStyle="success" small>
+            Manage subscription
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NotEntitledBanner