refactor(web): dependency management (#2386)

packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx

@@ -1,6 +1,5 @@
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/WebApplication'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { PurchaseFlowPane } from '@/Controllers/PurchaseFlow/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } from 'react'
@@ -9,12 +8,11 @@ import { isEmailValid } from '@/Utils'
 import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from '@standardnotes/icons'
 
 type Props = {
-  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
-const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, application }) => {
-  const { setCurrentPane } = viewControllerManager.purchaseFlowController
+const CreateAccount: FunctionComponent<Props> = ({ application }) => {
+  const { setCurrentPane } = application.purchaseFlowController
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
@@ -51,7 +49,7 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
   }
 
   const subscribeWithoutAccount = () => {
-    application.controllers.purchaseFlowController.openPurchaseWebpage()
+    void application.purchaseFlowController.openPurchaseWebpage()
   }
 
   const handleCreateAccount = async () => {
@@ -88,8 +86,8 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
     try {
       await application.register(email, password)
 
-      viewControllerManager.purchaseFlowController.closePurchaseFlow()
-      void viewControllerManager.purchaseFlowController.openPurchaseFlow()
+      application.purchaseFlowController.closePurchaseFlow()
+      void application.purchaseFlowController.openPurchaseFlow()
     } catch (err) {
       console.error(err)
       application.alerts.alert(err as string).catch(console.error)

packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx

@@ -1,6 +1,5 @@
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/WebApplication'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { PurchaseFlowPane } from '@/Controllers/PurchaseFlow/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } from 'react'
@@ -10,12 +9,11 @@ import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/icons'
 import { isErrorResponse } from '@standardnotes/snjs'
 
 type Props = {
-  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
-const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }) => {
-  const { setCurrentPane } = viewControllerManager.purchaseFlowController
+const SignIn: FunctionComponent<Props> = ({ application }) => {
+  const { setCurrentPane } = application.purchaseFlowController
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [isSigningIn, setIsSigningIn] = useState(false)
@@ -74,8 +72,8 @@ const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }
       if (isErrorResponse(response)) {
         throw new Error(response.data.error?.message)
       } else {
-        viewControllerManager.purchaseFlowController.closePurchaseFlow()
-        void viewControllerManager.purchaseFlowController.openPurchaseFlow()
+        application.purchaseFlowController.closePurchaseFlow()
+        void application.purchaseFlowController.openPurchaseFlow()
       }
     } catch (err) {
       console.error(err)

packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowFunctions.ts

@@ -1,45 +0,0 @@
-import { WebApplication } from '@/Application/WebApplication'
-import { isDesktopApplication } from '@/Utils'
-import { Environment } from '@standardnotes/snjs'
-import { RouteType } from '@standardnotes/ui-services'
-
-export const getPurchaseFlowUrl = async (application: WebApplication): Promise<string | undefined> => {
-  const currentUrl = window.location.origin
-  const successUrl = isDesktopApplication() ? 'standardnotes://' : currentUrl
-
-  if (application.noAccount() || application.isThirdPartyHostUsed()) {
-    return `${window.purchaseUrl}/offline?&success_url=${successUrl}`
-  }
-
-  const token = await application.getNewSubscriptionToken()
-  if (token) {
-    return `${window.purchaseUrl}?subscription_token=${token}&success_url=${successUrl}`
-  }
-
-  return undefined
-}
-
-export const loadPurchaseFlowUrl = async (application: WebApplication): Promise<boolean> => {
-  const url = await getPurchaseFlowUrl(application)
-  const route = application.routeService.getRoute()
-  const params = route.type === RouteType.Purchase ? route.purchaseParams : { period: null, plan: null }
-  const period = params.period ? `&period=${params.period}` : ''
-  const plan = params.plan ? `&plan=${params.plan}` : ''
-
-  if (url) {
-    const finalUrl = `${url}${period}${plan}`
-
-    if (application.isNativeMobileWeb()) {
-      application.mobileDevice().openUrl(finalUrl)
-    } else if (application.environment === Environment.Desktop) {
-      application.desktopDevice?.openUrl(finalUrl)
-    } else {
-      const windowProxy = window.open('', '_blank')
-      ;(windowProxy as WindowProxy).location = finalUrl
-    }
-
-    return true
-  }
-
-  return false
-}

packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx

@@ -1,5 +1,4 @@
 import { WebApplication } from '@/Application/WebApplication'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { PurchaseFlowPane } from '@/Controllers/PurchaseFlow/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
@@ -13,25 +12,20 @@ type PaneSelectorProps = {
 } & PurchaseFlowViewProps
 
 type PurchaseFlowViewProps = {
-  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
-const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({
-  currentPane,
-  viewControllerManager,
-  application,
-}) => {
+const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({ currentPane, application }) => {
   switch (currentPane) {
     case PurchaseFlowPane.CreateAccount:
-      return <CreateAccount viewControllerManager={viewControllerManager} application={application} />
+      return <CreateAccount application={application} />
     case PurchaseFlowPane.SignIn:
-      return <SignIn viewControllerManager={viewControllerManager} application={application} />
+      return <SignIn application={application} />
   }
 }
 
-const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewControllerManager, application }) => {
-  const { currentPane } = viewControllerManager.purchaseFlowController
+const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ application }) => {
+  const { currentPane } = application.purchaseFlowController
 
   return (
     <div className="absolute left-0 top-0 z-purchase-flow flex h-full w-full items-center justify-center overflow-hidden bg-passive-super-light">
@@ -40,17 +34,13 @@ const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewContro
           <button
             className="absolute right-4 top-4 rounded-full p-1 hover:bg-info-backdrop"
             onClick={() => {
-              viewControllerManager.purchaseFlowController.closePurchaseFlow()
+              application.purchaseFlowController.closePurchaseFlow()
             }}
           >
             <Icon type="close" className="text-neutral" />
           </button>
           <SNLogoFull className="mb-5 h-7" />
-          <PurchaseFlowPaneSelector
-            currentPane={currentPane}
-            viewControllerManager={viewControllerManager}
-            application={application}
-          />
+          <PurchaseFlowPaneSelector currentPane={currentPane} application={application} />
         </div>
         <div className="flex justify-end px-4 md:px-0">
           <a

packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx

@@ -3,12 +3,12 @@ import { FunctionComponent } from 'react'
 import PurchaseFlowView from './PurchaseFlowView'
 import { PurchaseFlowWrapperProps } from './PurchaseFlowWrapperProps'
 
-const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> = ({ viewControllerManager, application }) => {
-  if (!viewControllerManager.purchaseFlowController.isOpen) {
+const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> = ({ application }) => {
+  if (!application.purchaseFlowController.isOpen) {
     return null
   }
 
-  return <PurchaseFlowView viewControllerManager={viewControllerManager} application={application} />
+  return <PurchaseFlowView application={application} />
 }
 
 export default observer(PurchaseFlowWrapper)

packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowWrapperProps.tsx

@@ -1,7 +1,5 @@
 import { WebApplication } from '@/Application/WebApplication'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 
 export type PurchaseFlowWrapperProps = {
-  viewControllerManager: ViewControllerManager
   application: WebApplication
 }