feat: open purchase flow when clicking upgrade cta with no account (#…

…1771)
standardnotes · Oct 7, 2022 · 734b986 · 734b986
1 parent 59db63f
commit 734b986
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
@@ -12,18 +12,6 @@ const UpgradeNow = ({ application, featuresController }: Props) => {
   const shouldShowCTA = !featuresController.hasFolders
   const hasAccount = application.hasAccount()
 
-  const openPlansPage = () => {
-    if (!window.plansUrl) {
-      return
-    }
-
-    if (application.isNativeMobileWeb()) {
-      application.mobileDevice().openUrl(window.plansUrl)
-    } else {
-      window.location.assign(window.plansUrl)
-    }
-  }
-
   return shouldShowCTA ? (
     <div className="flex h-full items-center px-2">
       <button
@@ -34,7 +22,7 @@ const UpgradeNow = ({ application, featuresController }: Props) => {
             return
           }
 
-          openPlansPage()
+          application.getViewControllerManager().purchaseFlowController.openPurchaseFlow()
         }}
       >
         Upgrade now

diff --git a/packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx b/packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
@@ -6,6 +6,7 @@ import { FunctionComponent } from 'react'
 import CreateAccount from './Panes/CreateAccount'
 import SignIn from './Panes/SignIn'
 import { SNLogoFull } from '@standardnotes/icons'
+import Icon from '../Icon/Icon'
 
 type PaneSelectorProps = {
   currentPane: PurchaseFlowPane
@@ -36,6 +37,14 @@ const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewContro
     <div className="absolute top-0 left-0 z-purchase-flow flex h-full w-full items-center justify-center overflow-hidden bg-passive-super-light">
       <div className="relative w-fit">
         <div className="rounded-0 relative mb-4 w-full border border-solid border-border bg-default px-8 py-8 md:rounded md:p-12">
+          <button
+            className="absolute top-4 right-4 rounded-full p-1 hover:bg-info-backdrop"
+            onClick={() => {
+              viewControllerManager.purchaseFlowController.closePurchaseFlow()
+            }}
+          >
+            <Icon type="close" className="text-neutral" />
+          </button>
           <SNLogoFull className="mb-5" />
           <PurchaseFlowPaneSelector
             currentPane={currentPane}