refactor: repo (#1070)

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

@@ -0,0 +1,51 @@
+import { FeatureStatus } from '@standardnotes/snjs'
+import { FunctionComponent } from 'react'
+
+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={'sk-app-bar no-edges no-top-edge dynamic-height'}>
+        <div className={'left'}>
+          <div className={'sk-app-bar-item'}>
+            <div className={'sk-app-bar-item-column'}>
+              <div className={'sk-circle danger small'} />
+            </div>
+            <div className={'sk-app-bar-item-column'}>
+              <div>
+                <strong>{statusString(featureStatus, expiredDate, componentName)}</strong>
+                <div className={'sk-p'}>{componentName} is in a read-only state.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={'right'}>
+          <div className={'sk-app-bar-item'} onClick={() => manageSubscription()}>
+            <button className={'sn-button small success'}>Manage Subscription</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default IsExpired