feat: iap (#1996)

2022-11-13 09:28:16 -06:00
parent e56a960bbf
commit d519aca685
49 changed files with 512 additions and 151 deletions
--- a/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
+++ b/packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx
@@ -199,7 +199,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
      <AndroidBackHandlerProvider application={application}>
        <DarkModeHandler application={application} />
        <ResponsivePaneProvider paneController={application.getViewControllerManager().paneController}>
-          <PremiumModalProvider application={application} viewControllerManager={viewControllerManager}>
+          <PremiumModalProvider application={application} featuresController={viewControllerManager.featuresController}>
            <div className={platformString + ' main-ui-view sn-component h-full'}>
              <div id="app" className="app app-column-container" ref={appColumnContainerRef}>
                <FileDragNDropProvider
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
@@ -213,16 +213,14 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
          'Create powerful workflows and organizational layouts with per-tag display preferences.'}
      </p>

-      {!application.hideSubscriptionMarketing && (
-        <Button
-          primary
-          small
-          className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
-          onClick={() => application.openPurchaseFlow()}
-        >
-          Upgrade Features
-        </Button>
-      )}
+      <Button
+        primary
+        small
+        className="col-start-1 col-end-3 mt-3 justify-self-start uppercase"
+        onClick={() => application.openPurchaseFlow()}
+      >
+        Upgrade Features
+      </Button>
    </div>
  )

--- a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
+++ b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
@@ -2,7 +2,6 @@ import { WebApplication } from '@/Application/Application'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { observer } from 'mobx-react-lite'
-import { loadPurchaseFlowUrl } from '../PurchaseFlow/PurchaseFlowFunctions'

 type Props = {
  application: WebApplication
@@ -14,22 +13,11 @@ const UpgradeNow = ({ application, featuresController, subscriptionContoller }:
  const shouldShowCTA = !featuresController.hasFolders
  const hasAccount = subscriptionContoller.hasAccount

-  if (hasAccount && subscriptionContoller.hideSubscriptionMarketing) {
-    return null
-  }
-
  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={() => {
-          if (hasAccount) {
-            void loadPurchaseFlowUrl(application)
-            return
-          }
-
-          application.getViewControllerManager().purchaseFlowController.openPurchaseFlow()
-        }}
+        onClick={() => application.openPurchaseFlow()}
      >
        {hasAccount ? 'Unlock features' : 'Sign up to sync'}
      </button>
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
@@ -2,7 +2,6 @@ import { FunctionComponent, useState } from 'react'
 import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/Application'
-import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'

 type Props = {
  application: WebApplication
@@ -16,9 +15,7 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
    const errorMessage = 'There was an error when attempting to redirect you to the subscription page.'
    setIsLoadingPurchaseFlow(true)
    try {
-      if (!(await loadPurchaseFlowUrl(application))) {
-        setPurchaseFlowError(errorMessage)
-      }
+      application.openPurchaseFlow()
    } catch (e) {
      setPurchaseFlowError(errorMessage)
    } finally {
@@ -31,14 +28,12 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
      <Text>You don't have a Standard Notes subscription yet.</Text>
      {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
      {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
-      {!application.hideSubscriptionMarketing && (
-        <div className="flex">
-          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
-          {application.hasAccount() && (
-            <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
-          )}
-        </div>
-      )}
+      <div className="flex">
+        <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+        {application.hasAccount() && (
+          <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
+        )}
+      </div>
    </>
  )
 }
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/NoProSubscription.tsx
@@ -2,7 +2,6 @@ import { FunctionComponent, useState } from 'react'
 import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/Application'
-import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'

 type Props = {
  application: WebApplication
@@ -16,9 +15,7 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
    const errorMessage = 'There was an error when attempting to redirect you to the subscription page.'
    setIsLoadingPurchaseFlow(true)
    try {
-      if (!(await loadPurchaseFlowUrl(application))) {
-        setPurchaseFlowError(errorMessage)
-      }
+      application.openPurchaseFlow()
    } catch (e) {
      setPurchaseFlowError(errorMessage)
    } finally {
@@ -35,14 +32,12 @@ const NoProSubscription: FunctionComponent<Props> = ({ application }) => {
      {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
      {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}

-      {!application.hideSubscriptionMarketing && (
-        <div className="flex">
-          <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
-          {application.hasAccount() && (
-            <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />
-          )}
-        </div>
-      )}
+      <div className="flex">
+        <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
+        {application.hasAccount() && (
+          <Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />
+        )}
+      </div>
    </>
  )
 }
--- a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeatureModalType.tsx
+++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeatureModalType.tsx
@@ -0,0 +1,4 @@
+export enum PremiumFeatureModalType {
+  UpgradePrompt,
+  UpgradeSuccess,
+}
--- a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
+++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
@@ -4,7 +4,7 @@ import Icon from '@/Components/Icon/Icon'
 import { WebApplication } from '@/Application/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
-import { loadPurchaseFlowUrl } from '../PurchaseFlow/PurchaseFlowFunctions'
+import { PremiumFeatureModalType } from './PremiumFeatureModalType'

 type Props = {
  application: WebApplication
@@ -13,6 +13,7 @@ type Props = {
  hasAccount: boolean
  onClose: () => void
  showModal: boolean
+  type: PremiumFeatureModalType
 }

 const PremiumFeaturesModal: FunctionComponent<Props> = ({
@@ -22,6 +23,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
  hasAccount,
  onClose,
  showModal,
+  type = PremiumFeatureModalType.UpgradePrompt,
 }) => {
  const plansButtonRef = useRef<HTMLButtonElement>(null)

@@ -29,11 +31,58 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
    if (hasSubscription) {
      void openSubscriptionDashboard(application)
    } else if (hasAccount) {
-      void loadPurchaseFlowUrl(application)
+      void application.openPurchaseFlow()
    } else if (window.plansUrl) {
      window.location.assign(window.plansUrl)
    }
-  }, [application, hasSubscription, hasAccount])
+    onClose()
+  }, [application, hasSubscription, hasAccount, onClose])
+
+  const UpgradePrompt = (
+    <>
+      <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.
+      </AlertDialogDescription>
+
+      <div className="p-4">
+        <button
+          onClick={handleClick}
+          className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
+          ref={plansButtonRef}
+        >
+          Upgrade
+        </button>
+      </div>
+    </>
+  )
+
+  const SuccessPrompt = (
+    <>
+      <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
+        Enjoy your new powered up experience.
+      </AlertDialogDescription>
+
+      <div className="p-4">
+        <button
+          onClick={onClose}
+          className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
+          ref={plansButtonRef}
+        >
+          Continue
+        </button>
+      </div>
+    </>
+  )
+
+  const title =
+    type === PremiumFeatureModalType.UpgradePrompt ? 'Enable Advanced Features' : 'Your purchase was successful!'
+
+  const iconName = type === PremiumFeatureModalType.UpgradePrompt ? PremiumFeatureIconName : '🎉'
+  const iconClass =
+    type === PremiumFeatureModalType.UpgradePrompt
+      ? `h-12 w-12 ${PremiumFeatureIconClass}`
+      : 'px-7 py-2 h-24 w-24 text-[50px]'

  return showModal ? (
    <AlertDialog leastDestructiveRef={plansButtonRef} className="p-0">
@@ -53,25 +102,11 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
              className="mx-auto mb-5 flex h-24 w-24 items-center justify-center rounded-[50%] bg-contrast"
              aria-hidden={true}
            >
-              <Icon className={`h-12 w-12 ${PremiumFeatureIconClass}`} type={PremiumFeatureIconName} />
+              <Icon className={iconClass} size={'custom'} type={iconName} />
            </div>
-            <div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
+            <div className="mb-1 text-center text-lg font-bold">{title}</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.
-          </AlertDialogDescription>
-          {!application.hideSubscriptionMarketing && (
-            <div className="p-4">
-              <button
-                onClick={handleClick}
-                className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
-                ref={plansButtonRef}
-              >
-                Upgrade
-              </button>
-            </div>
-          )}
+          {type === PremiumFeatureModalType.UpgradePrompt ? UpgradePrompt : SuccessPrompt}
        </div>
      </div>
    </AlertDialog>
--- a/packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
+++ b/packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
@@ -7,7 +7,6 @@ import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } fr
 import FloatingLabelInput from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from '@standardnotes/icons'
-import { loadPurchaseFlowUrl } from '../PurchaseFlowFunctions'

 type Props = {
  viewControllerManager: ViewControllerManager
@@ -52,10 +51,7 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
  }

  const subscribeWithoutAccount = () => {
-    loadPurchaseFlowUrl(application).catch((err) => {
-      console.error(err)
-      application.alertService.alert(err).catch(console.error)
-    })
+    application.getViewControllerManager().purchaseFlowController.openPurchaseWebpage()
  }

  const handleCreateAccount = async () => {
@@ -93,13 +89,7 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
      await application.register(email, password)

      viewControllerManager.purchaseFlowController.closePurchaseFlow()
-
-      if (!application.hideSubscriptionMarketing) {
-        loadPurchaseFlowUrl(application).catch((err) => {
-          console.error(err)
-          application.alertService.alert(err).catch(console.error)
-        })
-      }
+      viewControllerManager.purchaseFlowController.openPurchaseFlow()
    } catch (err) {
      console.error(err)
      application.alertService.alert(err as string).catch(console.error)
@@ -170,13 +160,15 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
            >
              Sign in instead
            </button>
-            <button
-              onClick={subscribeWithoutAccount}
-              disabled={isCreatingAccount}
-              className="flex cursor-pointer items-start border-0 bg-default p-0 font-medium text-info hover:underline"
-            >
-              Subscribe without account
-            </button>
+            {!application.isNativeIOS() && (
+              <button
+                onClick={subscribeWithoutAccount}
+                disabled={isCreatingAccount}
+                className="flex cursor-pointer items-start border-0 bg-default p-0 font-medium text-info hover:underline"
+              >
+                Subscribe without account
+              </button>
+            )}
          </div>
          <Button
            className="mb-4 py-2.5 md:mb-0"
--- a/packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
+++ b/packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
@@ -7,7 +7,6 @@ import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } fr
 import FloatingLabelInput from '@/Components/Input/FloatingLabelInput'
 import { isEmailValid } from '@/Utils'
 import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/icons'
-import { loadPurchaseFlowUrl } from '../PurchaseFlowFunctions'

 type Props = {
  viewControllerManager: ViewControllerManager
@@ -75,13 +74,7 @@ const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }
        throw new Error(response.error?.message || response.data?.error?.message)
      } else {
        viewControllerManager.purchaseFlowController.closePurchaseFlow()
-
-        if (!application.hideSubscriptionMarketing) {
-          loadPurchaseFlowUrl(application).catch((err) => {
-            console.error(err)
-            application.alertService.alert(err).catch(console.error)
-          })
-        }
+        viewControllerManager.purchaseFlowController.openPurchaseFlow()
      }
    } catch (err) {
      console.error(err)