refactor: format and lint codebase (#971)

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx

@@ -0,0 +1,51 @@
+import { FunctionalComponent } from 'preact'
+import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
+import { WebApplication } from '@/UIModels/Application'
+import { useState } from 'preact/hooks'
+import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
+
+export const NoSubscription: FunctionalComponent<{
+  application: WebApplication
+}> = ({ application }) => {
+  const [isLoadingPurchaseFlow, setIsLoadingPurchaseFlow] = useState(false)
+  const [purchaseFlowError, setPurchaseFlowError] = useState<string | undefined>(undefined)
+
+  const onPurchaseClick = async () => {
+    const errorMessage =
+      'There was an error when attempting to redirect you to the subscription page.'
+    setIsLoadingPurchaseFlow(true)
+    try {
+      if (!(await loadPurchaseFlowUrl(application))) {
+        setPurchaseFlowError(errorMessage)
+      }
+    } catch (e) {
+      setPurchaseFlowError(errorMessage)
+    } finally {
+      setIsLoadingPurchaseFlow(false)
+    }
+  }
+
+  return (
+    <>
+      <Text>You don't have a Standard Notes subscription yet.</Text>
+      {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
+      {purchaseFlowError && <Text className="color-danger">{purchaseFlowError}</Text>}
+      <div className="flex">
+        <LinkButton
+          className="min-w-20 mt-3 mr-3"
+          label="Learn More"
+          link={window.plansUrl as string}
+        />
+        {application.hasAccount() && (
+          <Button
+            className="min-w-20 mt-3"
+            variant="primary"
+            label="Subscribe"
+            onClick={onPurchaseClick}
+          />
+        )}
+      </div>
+    </>
+  )
+}

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx

@@ -0,0 +1,41 @@
+import { PreferencesGroup, PreferencesSegment, Title } from '@/Components/Preferences/PreferencesComponents'
+import { WebApplication } from '@/UIModels/Application'
+import { SubscriptionInformation } from './SubscriptionInformation'
+import { NoSubscription } from './NoSubscription'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'preact'
+import { AppState } from '@/UIModels/AppState'
+
+type Props = {
+  application: WebApplication
+  appState: AppState
+}
+
+export const Subscription: FunctionComponent<Props> = observer(
+  ({ application, appState }: Props) => {
+    const subscriptionState = appState.subscription
+    const { userSubscription } = subscriptionState
+
+    const now = new Date().getTime()
+
+    return (
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <div className="flex flex-row items-center">
+            <div className="flex-grow flex flex-col">
+              <Title>Subscription</Title>
+              {userSubscription && userSubscription.endsAt > now ? (
+                <SubscriptionInformation
+                  subscriptionState={subscriptionState}
+                  application={application}
+                />
+              ) : (
+                <NoSubscription application={application} />
+              )}
+            </div>
+          </div>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    )
+  },
+)

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx

@@ -0,0 +1,85 @@
+import { observer } from 'mobx-react-lite'
+import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
+import { Text } from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
+import { WebApplication } from '@/UIModels/Application'
+import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
+
+type Props = {
+  subscriptionState: SubscriptionState
+  application: WebApplication
+}
+
+const StatusText = observer(
+  ({ subscriptionState }: { subscriptionState: Props['subscriptionState'] }) => {
+    const {
+      userSubscriptionName,
+      userSubscriptionExpirationDate,
+      isUserSubscriptionExpired,
+      isUserSubscriptionCanceled,
+    } = subscriptionState
+    const expirationDateString = userSubscriptionExpirationDate?.toLocaleString()
+
+    if (isUserSubscriptionCanceled) {
+      return (
+        <Text className="mt-1">
+          Your{' '}
+          <span className="font-bold">
+            Standard Notes{userSubscriptionName ? ' ' : ''}
+            {userSubscriptionName}
+          </span>{' '}
+          subscription has been canceled{' '}
+          {isUserSubscriptionExpired ? (
+            <span className="font-bold">and expired on {expirationDateString}</span>
+          ) : (
+            <span className="font-bold">but will remain valid until {expirationDateString}</span>
+          )}
+          . You may resubscribe below if you wish.
+        </Text>
+      )
+    }
+
+    if (isUserSubscriptionExpired) {
+      return (
+        <Text className="mt-1">
+          Your{' '}
+          <span className="font-bold">
+            Standard Notes{userSubscriptionName ? ' ' : ''}
+            {userSubscriptionName}
+          </span>{' '}
+          subscription <span className="font-bold">expired on {expirationDateString}</span>. You may
+          resubscribe below if you wish.
+        </Text>
+      )
+    }
+
+    return (
+      <Text className="mt-1">
+        Your{' '}
+        <span className="font-bold">
+          Standard Notes{userSubscriptionName ? ' ' : ''}
+          {userSubscriptionName}
+        </span>{' '}
+        subscription will be <span className="font-bold">renewed on {expirationDateString}</span>.
+      </Text>
+    )
+  },
+)
+
+export const SubscriptionInformation = observer(({ subscriptionState, application }: Props) => {
+  const manageSubscription = async () => {
+    openSubscriptionDashboard(application)
+  }
+
+  return (
+    <>
+      <StatusText subscriptionState={subscriptionState} />
+      <Button
+        className="min-w-20 mt-3 mr-3"
+        variant="normal"
+        label="Manage subscription"
+        onClick={manageSubscription}
+      />
+    </>
+  )
+})