fix(mobile): show premium modal on iOS

packages/web/src/javascripts/Application/Application.ts

@@ -356,7 +356,7 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     return this.getViewControllerManager().featuresController.entitledToFiles
   }
 
-  showPremiumModal(featureName: FeatureName): void {
+  showPremiumModal(featureName?: FeatureName): void {
     void this.getViewControllerManager().featuresController.showPremiumAlert(featureName)
   }
 

packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx

@@ -13,11 +13,19 @@ const UpgradeNow = ({ application, featuresController, subscriptionContoller }:
   const shouldShowCTA = !featuresController.hasFolders
   const hasAccount = subscriptionContoller.hasAccount
 
+  const onClick = () => {
+    if (application.isNativeIOS()) {
+      application.showPremiumModal()
+    } else {
+      application.openPurchaseFlow()
+    }
+  }
+
   return shouldShowCTA ? (
     <div className="flex h-full items-center px-2">
       <button
         className="rounded bg-info py-0.5 px-1.5 text-sm font-bold uppercase text-info-contrast hover:brightness-125 lg:text-xs"
-        onClick={() => application.openPurchaseFlow()}
+        onClick={onClick}
       >
         {hasAccount ? 'Unlock features' : 'Sign up to sync'}
       </button>

packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx

@@ -14,22 +14,27 @@ const NoSubscriptionBanner = ({
   title: string
   message: string
   className?: string
-}) => (
-  <div className={classNames('grid grid-cols-1 rounded-md border border-border p-4', className)}>
-    <div className="flex items-center">
-      <Icon className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
-      <h1 className="sk-h3 m-0 text-sm font-semibold">{title}</h1>
+}) => {
+  const onClick = () => {
+    if (application.isNativeIOS()) {
+      application.showPremiumModal()
+    } else {
+      application.openPurchaseFlow()
+    }
+  }
+
+  return (
+    <div className={classNames('grid grid-cols-1 rounded-md border border-border p-4', className)}>
+      <div className="flex items-center">
+        <Icon className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
+        <h1 className="sk-h3 m-0 text-sm font-semibold">{title}</h1>
+      </div>
+      <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">{message}</p>
+      <Button primary small className="col-start-1 col-end-3 mt-3 justify-self-start uppercase" onClick={onClick}>
+        Upgrade Features
+      </Button>
     </div>
-    <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">{message}</p>
-    <Button
-      primary
-      small
-      className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
-      onClick={() => application.openPurchaseFlow()}
-    >
-      Upgrade Features
-    </Button>
-  </div>
-)
+  )
+}
 
 export default NoSubscriptionBanner

packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx

@@ -15,7 +15,11 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
     const errorMessage = 'There was an error when attempting to redirect you to the subscription page.'
     setIsLoadingPurchaseFlow(true)
     try {
-      application.openPurchaseFlow()
+      if (application.isNativeIOS()) {
+        application.showPremiumModal()
+      } else {
+        application.openPurchaseFlow()
+      }
     } catch (e) {
       setPurchaseFlowError(errorMessage)
     } finally {

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx

@@ -15,7 +15,11 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
     const errorMessage = 'There was an error when attempting to redirect you to the subscription page.'
     setIsLoadingPurchaseFlow(true)
     try {
-      application.openPurchaseFlow()
+      if (application.isNativeIOS()) {
+        application.showPremiumModal()
+      } else {
+        application.openPurchaseFlow()
+      }
     } catch (e) {
       setPurchaseFlowError(errorMessage)
     } finally {

packages/web/src/javascripts/Components/Preferences/Panes/HelpFeedback.tsx

@@ -42,12 +42,20 @@ const HelpAndFeedback = ({ application }: { application: WebApplication }) => {
             </a>
           </Text>
           {application.isNativeIOS() && (
-            <LinkButton
-              className="mt-3"
-              label="Privacy Policy"
-              link="https://standardnotes.com/privacy"
-              onClick={handleClick}
-            />
+            <>
+              <LinkButton
+                className="mt-3"
+                label="Privacy Policy"
+                link="https://standardnotes.com/privacy"
+                onClick={handleClick}
+              />
+              <LinkButton
+                className="mt-3"
+                label="Terms of Use"
+                link="https://www.apple.com/legal/internet-services/itunes/dev/stdeula/"
+                onClick={handleClick}
+              />
+            </>
           )}
         </PreferencesSegment>
         <HorizontalSeparator classes="my-4" />

packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx

@@ -8,7 +8,7 @@ import { UpgradePrompt } from './Subviews/UpgradePrompt'
 
 type Props = {
   application: WebApplication
-  featureName: FeatureName | string
+  featureName?: FeatureName | string
   hasSubscription: boolean
   hasAccount: boolean
   onClose: () => void

packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/UpgradePrompt.tsx

@@ -13,7 +13,7 @@ export const UpgradePrompt = ({
   hasAccount,
   onClose,
 }: {
-  featureName: string
+  featureName?: string
   ctaRef: React.RefObject<HTMLButtonElement>
   application: WebApplication
   hasSubscription: boolean
@@ -52,8 +52,17 @@ export const UpgradePrompt = ({
         <div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
       </AlertDialogLabel>
       <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
-        To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features, upgrade
-        your current plan.
+        {featureName && (
+          <span>
+            To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
+            upgrade your current plan.
+          </span>
+        )}
+        {!featureName && (
+          <span>
+            To take advantage of all the advanced features Standard Notes has to offer, upgrade your current plan.
+          </span>
+        )}
         {application.isNativeIOS() && (
           <div className="mt-2">
             <div className="mb-2 font-bold">The Professional Plan costs $99.99/year and includes benefits like</div>

packages/web/src/javascripts/Controllers/FeaturesController.ts

@@ -82,7 +82,7 @@ export class FeaturesController extends AbstractViewController {
     }
   }
 
-  public async showPremiumAlert(featureName: FeatureName | string): Promise<void> {
+  public async showPremiumAlert(featureName?: FeatureName | string): Promise<void> {
     this.premiumAlertFeatureName = featureName
     this.premiumAlertType = PremiumFeatureModalType.UpgradePrompt