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)