feat: upgrade cta (#1655)

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

@@ -19,6 +19,7 @@ import { EditorEventSource } from '@/Types/EditorEventSource'
 import QuickSettingsButton from './QuickSettingsButton'
 import AccountMenuButton from './AccountMenuButton'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
+import UpgradeNow from './UpgradeNow'
 
 type Props = {
   application: WebApplication
@@ -382,6 +383,10 @@ class Footer extends PureComponent<Props, State> {
                 quickSettingsMenuController={this.viewControllerManager.quickSettingsMenuController}
               />
             </div>
+            <UpgradeNow
+              application={this.application}
+              featuresController={this.viewControllerManager.featuresController}
+            />
             {this.state.showBetaWarning && (
               <Fragment>
                 <div className="relative z-footer-bar-item ml-3 flex select-none items-center border-l border-solid border-border pl-3">

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

@@ -0,0 +1,46 @@
+import { WebApplication } from '@/Application/Application'
+import { FeaturesController } from '@/Controllers/FeaturesController'
+import { observer } from 'mobx-react-lite'
+import { loadPurchaseFlowUrl } from '../PurchaseFlow/PurchaseFlowFunctions'
+
+type Props = {
+  application: WebApplication
+  featuresController: FeaturesController
+}
+
+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
+        className="rounded bg-info py-0.5 px-1.5 text-xs font-bold uppercase text-info-contrast hover:brightness-125"
+        onClick={() => {
+          if (hasAccount) {
+            void loadPurchaseFlowUrl(application)
+            return
+          }
+
+          openPlansPage()
+        }}
+      >
+        Upgrade now
+      </button>
+    </div>
+  ) : null
+}
+
+export default observer(UpgradeNow)

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

@@ -12,6 +12,7 @@ import { classNames } from '@/Utils/ConcatenateClassNames'
 import Icon from '../Icon/Icon'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { isIOS } from '@/Utils'
+import UpgradeNow from '../Footer/UpgradeNow'
 
 type Props = {
   application: WebApplication
@@ -86,7 +87,7 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
         </div>
         <div className="flex items-center border-t border-border px-3.5 pt-2.5 md:hidden">
           <button
-            className="flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
+            className="mr-auto flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
             onClick={() => {
               toggleAppPane(AppPaneId.Items)
             }}
@@ -95,8 +96,9 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
           >
             <Icon type="chevron-left" />
           </button>
+          <UpgradeNow application={application} featuresController={viewControllerManager.featuresController} />
           <button
-            className="ml-auto flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
+            className="ml-2.5 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-default text-neutral hover:bg-contrast focus:bg-contrast"
             onClick={() => {
               viewControllerManager.accountMenuController.toggleShow()
             }}

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

@@ -20,7 +20,14 @@ export const loadPurchaseFlowUrl = async (application: WebApplication): Promise<
   const period = params.get('period') ? `&period=${params.get('period')}` : ''
   const plan = params.get('plan') ? `&plan=${params.get('plan')}` : ''
   if (url) {
-    window.location.assign(`${url}${period}${plan}`)
+    const finalUrl = `${url}${period}${plan}`
+
+    if (application.isNativeMobileWeb()) {
+      application.mobileDevice.openUrl(finalUrl)
+    } else {
+      window.location.assign(finalUrl)
+    }
+
     return true
   }
   return false