chore: prettier files

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

@@ -12,8 +12,7 @@ export const NoSubscription: FunctionalComponent<{
   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.'
+    const errorMessage = 'There was an error when attempting to redirect you to the subscription page.'
     setIsLoadingPurchaseFlow(true)
     try {
       if (!(await loadPurchaseFlowUrl(application))) {
@@ -32,18 +31,9 @@ export const NoSubscription: FunctionalComponent<{
       {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}
-        />
+        <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}
-          />
+          <Button className="min-w-20 mt-3" variant="primary" label="Subscribe" onClick={onPurchaseClick} />
         )}
       </div>
     </>

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

@@ -1,8 +1,4 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import { PreferencesGroup, PreferencesSegment, Title } from '@/Components/Preferences/PreferencesComponents'
 import { WebApplication } from '@/UIModels/Application'
 import { SubscriptionInformation } from './SubscriptionInformation'
 import { NoSubscription } from './NoSubscription'
@@ -15,31 +11,26 @@ type Props = {
   appState: AppState
 }
 
-export const Subscription: FunctionComponent<Props> = observer(
-  ({ application, appState }: Props) => {
-    const subscriptionState = appState.subscription
-    const { userSubscription } = subscriptionState
+export const Subscription: FunctionComponent<Props> = observer(({ application, appState }: Props) => {
+  const subscriptionState = appState.subscription
+  const { userSubscription } = subscriptionState
 
-    const now = new Date().getTime()
+  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>
+  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>
-        </PreferencesSegment>
-      </PreferencesGroup>
-    )
-  },
-)
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})

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

@@ -10,49 +10,16 @@ type Props = {
   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>
-      )
-    }
+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{' '}
@@ -60,11 +27,42 @@ const StatusText = observer(
           Standard Notes{userSubscriptionName ? ' ' : ''}
           {userSubscriptionName}
         </span>{' '}
-        subscription will be <span className="font-bold">renewed on {expirationDateString}</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 () => {