refactor: replace 'preact' with 'react' (#1048)

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

@@ -1,20 +1,20 @@
-import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
 import { observer } from 'mobx-react-lite'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
-import { Authentication } from './Authentication'
-import { Credentials } from './Credentials'
-import { Sync } from './Sync'
-import { Subscription } from './Subscription/Subscription'
-import { SignOutWrapper } from './SignOutView'
-import { FilesSection } from './Files'
+import Authentication from './Authentication'
+import Credentials from './Credentials'
+import Sync from './Sync'
+import Subscription from './Subscription/Subscription'
+import SignOutWrapper from './SignOutView'
+import FilesSection from './Files'
+import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 
 type Props = {
   application: WebApplication
   appState: AppState
 }
 
-export const AccountPreferences = observer(({ application, appState }: Props) => (
+const AccountPreferences = ({ application, appState }: Props) => (
   <PreferencesPane>
     {!application.hasAccount() ? (
       <Authentication application={application} appState={appState} />
@@ -28,4 +28,6 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
     {application.hasAccount() && appState.features.hasFiles && <FilesSection application={application} />}
     <SignOutWrapper application={application} appState={appState} />
   </PreferencesPane>
-))
+)
+
+export default observer(AccountPreferences)

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

@@ -1,20 +1,21 @@
-import { FunctionalComponent } from 'preact'
-import { PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
-import { OfflineSubscription } from '@/Components/Preferences/Panes/Account/OfflineSubscription'
+import { FunctionComponent } from 'react'
+import OfflineSubscription from '@/Components/Preferences/Panes/Account/OfflineSubscription'
 import { WebApplication } from '@/UIModels/Application'
 import { observer } from 'mobx-react-lite'
 import { AppState } from '@/UIModels/AppState'
-import { Extensions } from '@/Components/Preferences/Panes/Extensions/Extensions'
+import Extensions from '@/Components/Preferences/Panes/Extensions/Extensions'
 import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
-import { AccordionItem } from '@/Components/Shared/AccordionItem'
+import AccordionItem from '@/Components/Shared/AccordionItem'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
-interface IProps {
+type Props = {
   application: WebApplication
   appState: AppState
   extensionsLatestVersions: ExtensionsLatestVersions
 }
 
-export const Advanced: FunctionalComponent<IProps> = observer(({ application, appState, extensionsLatestVersions }) => {
+const Advanced: FunctionComponent<Props> = ({ application, appState, extensionsLatestVersions }) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -33,4 +34,6 @@ export const Advanced: FunctionalComponent<IProps> = observer(({ application, ap
       </PreferencesSegment>
     </PreferencesGroup>
   )
-})
+}
+
+export default observer(Advanced)

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

@@ -1,16 +1,20 @@
-import { Button } from '@/Components/Button/Button'
-import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
+import Button from '@/Components/Button/Button'
+import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 import { AccountIllustration } from '@standardnotes/icons'
 import { AccountMenuPane } from '@/Components/AccountMenu/AccountMenuPane'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
-export const Authentication: FunctionComponent<{
+type Props = {
   application: WebApplication
   appState: AppState
-}> = observer(({ appState }) => {
+}
+
+const Authentication: FunctionComponent<Props> = ({ appState }) => {
   const clickSignIn = () => {
     appState.preferences.closePreferences()
     appState.accountMenu.setCurrentPane(AccountMenuPane.SignIn)
@@ -43,4 +47,6 @@ export const Authentication: FunctionComponent<{
       </PreferencesSegment>
     </PreferencesGroup>
   )
-})
+}
+
+export default observer(Authentication)

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

@@ -1,16 +1,13 @@
-import { useState } from '@node_modules/preact/hooks'
-import {
-  ModalDialog,
-  ModalDialogButtons,
-  ModalDialogDescription,
-  ModalDialogLabel,
-} from '@/Components/Shared/ModalDialog'
-import { Button } from '@/Components/Button/Button'
-import { FunctionalComponent } from 'preact'
+import ModalDialog from '@/Components/Shared/ModalDialog'
+import ModalDialogButtons from '@/Components/Shared/ModalDialogButtons'
+import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
+import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
+import Button from '@/Components/Button/Button'
+import { FunctionComponent, useState } from 'react'
 import { WebApplication } from '@/UIModels/Application'
 import { useBeforeUnload } from '@/Hooks/useBeforeUnload'
-import { ChangeEmailForm } from './ChangeEmailForm'
-import { ChangeEmailSuccess } from './ChangeEmailSuccess'
+import ChangeEmailForm from './ChangeEmailForm'
+import ChangeEmailSuccess from './ChangeEmailSuccess'
 import { isEmailValid } from '@/Utils'
 
 enum SubmitButtonTitles {
@@ -29,7 +26,7 @@ type Props = {
   application: WebApplication
 }
 
-export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, application }) => {
+const ChangeEmail: FunctionComponent<Props> = ({ onCloseDialog, application }) => {
   const [currentPassword, setCurrentPassword] = useState('')
   const [newEmail, setNewEmail] = useState('')
   const [isContinuing, setIsContinuing] = useState(false)
@@ -158,3 +155,5 @@ export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, applica
     </div>
   )
 }
+
+export default ChangeEmail

app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx

@@ -1,16 +1,15 @@
-import { StateUpdater } from 'preact/hooks'
-import { FunctionalComponent } from 'preact'
+import { Dispatch, SetStateAction, FunctionComponent } from 'react'
 
 type Props = {
-  setNewEmail: StateUpdater<string>
-  setCurrentPassword: StateUpdater<string>
+  setNewEmail: Dispatch<SetStateAction<string>>
+  setCurrentPassword: Dispatch<SetStateAction<string>>
 }
 
 const labelClassName = 'block mb-1'
 
 const inputClassName = 'sk-input contrast'
 
-export const ChangeEmailForm: FunctionalComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
+const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
   return (
     <div className="w-full flex flex-col">
       <div className="mt-2 mb-3">
@@ -42,3 +41,5 @@ export const ChangeEmailForm: FunctionalComponent<Props> = ({ setNewEmail, setCu
     </div>
   )
 }
+
+export default ChangeEmailForm

app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx

@@ -1,6 +1,6 @@
-import { FunctionalComponent } from 'preact'
+import { FunctionComponent } from 'react'
 
-export const ChangeEmailSuccess: FunctionalComponent = () => {
+const ChangeEmailSuccess: FunctionComponent = () => {
   return (
     <div>
       <div className={'sk-label sk-bold info mt-2'}>Your email has been successfully changed.</div>
@@ -11,3 +11,5 @@ export const ChangeEmailSuccess: FunctionalComponent = () => {
     </div>
   )
 }
+
+export default ChangeEmailSuccess

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

@@ -0,0 +1,30 @@
+import Button from '@/Components/Button/Button'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent } from 'react'
+import { Title, Text } from '../../PreferencesComponents/Content'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+
+const ClearSessionDataView: FunctionComponent<{
+  appState: AppState
+}> = ({ appState }) => {
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Clear workspace</Title>
+        <Text>Remove all data related to the current workspace from the application.</Text>
+        <div className="min-h-3" />
+        <Button
+          dangerStyle={true}
+          label="Clear workspace"
+          onClick={() => {
+            appState.accountMenu.setSigningOut(true)
+          }}
+        />
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default observer(ClearSessionDataView)

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

@@ -1,28 +1,24 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
-import { Button } from '@/Components/Button/Button'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/UIModels/Application'
 import { observer } from '@node_modules/mobx-react-lite'
-import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import { dateToLocalizedString } from '@standardnotes/snjs'
-import { useCallback, useState } from 'preact/hooks'
-import { ChangeEmail } from '@/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail'
-import { FunctionComponent, render } from 'preact'
+import { useCallback, useState, FunctionComponent } from 'react'
+import ChangeEmail from '@/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail'
 import { AppState } from '@/UIModels/AppState'
-import { PasswordWizard } from '@/Components/PasswordWizard/PasswordWizard'
+import PasswordWizard from '@/Components/PasswordWizard/PasswordWizard'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
   appState: AppState
 }
 
-export const Credentials: FunctionComponent<Props> = observer(({ application }: Props) => {
+const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
   const [isChangeEmailDialogOpen, setIsChangeEmailDialogOpen] = useState(false)
+  const [shouldShowPasswordWizard, setShouldShowPasswordWizard] = useState(false)
 
   const user = application.getUser()
 
@@ -30,35 +26,46 @@ export const Credentials: FunctionComponent<Props> = observer(({ application }:
   const passwordCreatedOn = dateToLocalizedString(passwordCreatedAtTimestamp)
 
   const presentPasswordWizard = useCallback(() => {
-    render(<PasswordWizard application={application} />, document.body.appendChild(document.createElement('div')))
-  }, [application])
+    setShouldShowPasswordWizard(true)
+  }, [])
+
+  const dismissPasswordWizard = useCallback(() => {
+    setShouldShowPasswordWizard(false)
+  }, [])
 
   return (
-    <PreferencesGroup>
-      <PreferencesSegment>
-        <Title>Credentials</Title>
-        <Subtitle>Email</Subtitle>
-        <Text>
-          You're signed in as <span className="font-bold wrap">{user?.email}</span>
-        </Text>
-        <Button
-          className="min-w-20 mt-3"
-          variant="normal"
-          label="Change email"
-          onClick={() => {
-            setIsChangeEmailDialogOpen(true)
-          }}
-        />
-        <HorizontalSeparator classes="mt-5 mb-3" />
-        <Subtitle>Password</Subtitle>
-        <Text>
-          Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
-        </Text>
-        <Button className="min-w-20 mt-3" variant="normal" label="Change password" onClick={presentPasswordWizard} />
-        {isChangeEmailDialogOpen && (
-          <ChangeEmail onCloseDialog={() => setIsChangeEmailDialogOpen(false)} application={application} />
-        )}
-      </PreferencesSegment>
-    </PreferencesGroup>
+    <>
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>Credentials</Title>
+          <Subtitle>Email</Subtitle>
+          <Text>
+            You're signed in as <span className="font-bold wrap">{user?.email}</span>
+          </Text>
+          <Button
+            className="min-w-20 mt-3"
+            variant="normal"
+            label="Change email"
+            onClick={() => {
+              setIsChangeEmailDialogOpen(true)
+            }}
+          />
+          <HorizontalSeparator classes="my-4" />
+          <Subtitle>Password</Subtitle>
+          <Text>
+            Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
+          </Text>
+          <Button className="min-w-20 mt-3" variant="normal" label="Change password" onClick={presentPasswordWizard} />
+          {isChangeEmailDialogOpen && (
+            <ChangeEmail onCloseDialog={() => setIsChangeEmailDialogOpen(false)} application={application} />
+          )}
+        </PreferencesSegment>
+      </PreferencesGroup>
+      {shouldShowPasswordWizard ? (
+        <PasswordWizard application={application} dismissModal={dismissPasswordWizard} />
+      ) : null}
+    </>
   )
-})
+}
+
+export default observer(Credentials)

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

@@ -1,15 +1,16 @@
 import { WebApplication } from '@/UIModels/Application'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { SubscriptionSettingName } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
-import { PreferencesGroup, PreferencesSegment, Subtitle, Title } from '../../PreferencesComponents'
+import { FunctionComponent, useEffect, useState } from 'react'
+import { Subtitle, Title } from '../../PreferencesComponents/Content'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
 }
 
-export const FilesSection: FunctionComponent<Props> = ({ application }) => {
+const FilesSection: FunctionComponent<Props> = ({ application }) => {
   const [isLoading, setIsLoading] = useState(true)
   const [filesQuotaUsed, setFilesQuotaUsed] = useState<number>(0)
   const [filesQuotaTotal, setFilesQuotaTotal] = useState<number>(0)
@@ -63,3 +64,5 @@ export const FilesSection: FunctionComponent<Props> = ({ application }) => {
     </PreferencesGroup>
   )
 }
+
+export default FilesSection

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

@@ -1,21 +1,20 @@
-import { FunctionalComponent } from 'preact'
-import { Subtitle } from '@/Components/Preferences/PreferencesComponents'
-import { DecoratedInput } from '@/Components/Input/DecoratedInput'
-import { Button } from '@/Components/Button/Button'
-import { useEffect, useState } from 'preact/hooks'
+import React, { FunctionComponent, useEffect, useState } from 'react'
+import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
+import DecoratedInput from '@/Components/Input/DecoratedInput'
+import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/Strings'
 import { ButtonType, ClientDisplayableError } from '@standardnotes/snjs'
-import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 
-interface IProps {
+type Props = {
   application: WebApplication
   appState: AppState
 }
 
-export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ application }) => {
+const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
   const [activationCode, setActivationCode] = useState('')
   const [isSuccessfullyActivated, setIsSuccessfullyActivated] = useState(false)
   const [isSuccessfullyRemoved, setIsSuccessfullyRemoved] = useState(false)
@@ -31,7 +30,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
     return !application.hasAccount() || application.isThirdPartyHostUsed() || hasUserPreviouslyStoredCode
   }
 
-  const handleSubscriptionCodeSubmit = async (event: Event) => {
+  const handleSubscriptionCodeSubmit = async (event: React.FormEvent) => {
     event.preventDefault()
 
     const result = await application.features.setOfflineFeaturesCode(activationCode)
@@ -123,4 +122,6 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
       <HorizontalSeparator classes="mt-8 mb-5" />
     </>
   )
-})
+}
+
+export default observer(OfflineSubscription)

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

@@ -1,21 +1,21 @@
-import { Button } from '@/Components/Button/Button'
-import { OtherSessionsSignOutContainer } from '@/Components/OtherSessionsSignOut/OtherSessionsSignOut'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import Button from '@/Components/Button/Button'
+import OtherSessionsSignOutContainer from '@/Components/OtherSessionsSignOut/OtherSessionsSignOut'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
+import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+import ClearSessionDataView from './ClearSessionDataView'
 
-const SignOutView: FunctionComponent<{
+type Props = {
   application: WebApplication
   appState: AppState
-}> = observer(({ application, appState }) => {
+}
+
+const SignOutView: FunctionComponent<Props> = observer(({ application, appState }) => {
   return (
     <>
       <PreferencesGroup>
@@ -36,6 +36,7 @@ const SignOutView: FunctionComponent<{
             <Button variant="normal" label="Manage sessions" onClick={() => appState.openSessionsModal()} />
           </div>
         </PreferencesSegment>
+        <HorizontalSeparator classes="my-4" />
         <PreferencesSegment>
           <Subtitle>This workspace</Subtitle>
           <Text>Remove all data related to the current workspace from the application.</Text>
@@ -54,33 +55,13 @@ const SignOutView: FunctionComponent<{
   )
 })
 
-const ClearSessionDataView: FunctionComponent<{
-  appState: AppState
-}> = observer(({ appState }) => {
-  return (
-    <PreferencesGroup>
-      <PreferencesSegment>
-        <Title>Clear workspace</Title>
-        <Text>Remove all data related to the current workspace from the application.</Text>
-        <div className="min-h-3" />
-        <Button
-          dangerStyle={true}
-          label="Clear workspace"
-          onClick={() => {
-            appState.accountMenu.setSigningOut(true)
-          }}
-        />
-      </PreferencesSegment>
-    </PreferencesGroup>
-  )
-})
+SignOutView.displayName = 'SignOutView'
 
-export const SignOutWrapper: FunctionComponent<{
-  application: WebApplication
-  appState: AppState
-}> = observer(({ application, appState }) => {
+const SignOutWrapper: FunctionComponent<Props> = ({ application, appState }) => {
   if (!application.hasAccount()) {
     return <ClearSessionDataView appState={appState} />
   }
   return <SignOutView appState={appState} application={application} />
-})
+}
+
+export default observer(SignOutWrapper)

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

@@ -1,13 +1,14 @@
-import { FunctionalComponent } from 'preact'
-import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents'
-import { Button } from '@/Components/Button/Button'
+import { FunctionComponent, useState } from 'react'
+import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
+import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/UIModels/Application'
-import { useState } from 'preact/hooks'
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'
 
-export const NoSubscription: FunctionalComponent<{
+type Props = {
   application: WebApplication
-}> = ({ application }) => {
+}
+
+const NoSubscription: FunctionComponent<Props> = ({ application }) => {
   const [isLoadingPurchaseFlow, setIsLoadingPurchaseFlow] = useState(false)
   const [purchaseFlowError, setPurchaseFlowError] = useState<string | undefined>(undefined)
 
@@ -39,3 +40,5 @@ export const NoSubscription: FunctionalComponent<{
     </>
   )
 }
+
+export default NoSubscription

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

@@ -0,0 +1,61 @@
+import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
+import { observer } from 'mobx-react-lite'
+import { Text } from '@/Components/Preferences/PreferencesComponents/Content'
+
+type Props = { subscriptionState: SubscriptionState }
+
+const StatusText = ({ 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 default observer(StatusText)

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

@@ -1,17 +1,19 @@
-import { PreferencesGroup, PreferencesSegment, Title } from '@/Components/Preferences/PreferencesComponents'
+import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/UIModels/Application'
-import { SubscriptionInformation } from './SubscriptionInformation'
-import { NoSubscription } from './NoSubscription'
+import SubscriptionInformation from './SubscriptionInformation'
+import NoSubscription from './NoSubscription'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 import { AppState } from '@/UIModels/AppState'
+import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
   appState: AppState
 }
 
-export const Subscription: FunctionComponent<Props> = observer(({ application, appState }: Props) => {
+const Subscription: FunctionComponent<Props> = ({ application, appState }: Props) => {
   const subscriptionState = appState.subscription
   const { userSubscription } = subscriptionState
 
@@ -33,4 +35,6 @@ export const Subscription: FunctionComponent<Props> = observer(({ application, a
       </PreferencesSegment>
     </PreferencesGroup>
   )
-})
+}
+
+export default observer(Subscription)

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

@@ -1,70 +1,16 @@
 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 Button from '@/Components/Button/Button'
 import { WebApplication } from '@/UIModels/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
+import StatusText from './StatusText'
 
 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 SubscriptionInformation = ({ subscriptionState, application }: Props) => {
   const manageSubscription = async () => {
     openSubscriptionDashboard(application)
   }
@@ -80,4 +26,6 @@ export const SubscriptionInformation = observer(({ subscriptionState, applicatio
       />
     </>
   )
-})
+}
+
+export default observer(SubscriptionInformation)

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

@@ -1,21 +1,19 @@
-import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents'
-import { Button } from '@/Components/Button/Button'
-import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs'
+import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import Button from '@/Components/Button/Button'
+import { SyncQueueStrategy } from '@standardnotes/snjs'
 import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
-import { useState } from '@node_modules/preact/hooks'
 import { observer } from 'mobx-react-lite'
 import { WebApplication } from '@/UIModels/Application'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent, useState } from 'react'
+import { formatLastSyncDate } from '@/Utils/FormatLastSyncDate'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
 }
 
-export const formatLastSyncDate = (lastUpdatedDate: Date) => {
-  return dateToLocalizedString(lastUpdatedDate)
-}
-
-export const Sync: FunctionComponent<Props> = observer(({ application }: Props) => {
+const Sync: FunctionComponent<Props> = ({ application }: Props) => {
   const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
   const [lastSyncDate, setLastSyncDate] = useState(formatLastSyncDate(application.sync.getLastSyncDate() as Date))
 
@@ -55,4 +53,6 @@ export const Sync: FunctionComponent<Props> = observer(({ application }: Props)
       </PreferencesSegment>
     </PreferencesGroup>
   )
-})
+}
+
+export default observer(Sync)