From 734b986294380954c7eb3ceac42d76ef17b27ca1 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 8 Oct 2022 01:39:40 +0530
Subject: [PATCH] feat: open purchase flow when clicking upgrade cta with no
 account (#1771)

---
 .../javascripts/Components/Footer/UpgradeNow.tsx   | 14 +-------------
 .../Components/PurchaseFlow/PurchaseFlowView.tsx   |  9 +++++++++
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
index 5218a412c..cdf627b66 100644
--- 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
index fccf16066..b5f50d808 100644
--- 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}