chore: move all components into Components dir with pascal case (#934)

app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx

@@ -0,0 +1,57 @@
+import { FunctionalComponent } from 'preact';
+import { LinkButton, Text } from '@/components/Preferences/components';
+import { Button } from '@/components/Button';
+import { WebApplication } from '@/ui_models/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"
+            type="primary"
+            label="Subscribe"
+            onClick={onPurchaseClick}
+          />
+        )}
+      </div>
+    </>
+  );
+};

app/assets/javascripts/components/Preferences/panes/account/subscription/Subscription.tsx

@@ -0,0 +1,45 @@
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Title,
+} from '@/components/Preferences/components';
+import { WebApplication } from '@/ui_models/application';
+import { SubscriptionInformation } from './SubscriptionInformation';
+import { NoSubscription } from './NoSubscription';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { AppState } from '@/ui_models/app_state';
+
+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,91 @@
+import { observer } from 'mobx-react-lite';
+import { SubscriptionState } from '../../../../../ui_models/app_state/subscription_state';
+import { Text } from '@/components/Preferences/components';
+import { Button } from '@/components/Button';
+import { WebApplication } from '@/ui_models/application';
+import { openSubscriptionDashboard } from '@/hooks/manageSubscription';
+
+type Props = {
+  subscriptionState: SubscriptionState;
+  application?: WebApplication;
+};
+
+const StatusText = observer(({ subscriptionState }: Props) => {
+  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"
+          type="normal"
+          label="Manage subscription"
+          onClick={manageSubscription}
+        />
+      </>
+    );
+  }
+);