(core) Add product for new personal plan

Summary:
Adds the new personal plan as a product that will be available
in the future. Can be enabled along with other plan-related via
an environment variable.

Test Plan: Browser tests and existing tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: dsagal

Differential Revision: https://phab.getgrist.com/D3533

app/client/ui/AppHeader.ts

@@ -51,7 +51,11 @@ export class AppHeader extends Disposable {
         productPill(currentOrg),
         this._orgName && cssDropdownIcon('Dropdown'),
         menu(() => [
-          menuSubHeader(`${this._appModel.isTeamSite ? 'Team' : 'Personal'} Site`, testId('orgmenu-title')),
+          menuSubHeader(
+            `${this._appModel.isTeamSite ? 'Team' : 'Personal'} Site`
+              + (this._appModel.isLegacySite ? ' (Legacy)' : ''),
+            testId('orgmenu-title'),
+          ),
           menuItemLink(urlState().setLinkUrl({}), 'Home Page', testId('orgmenu-home-page')),
 
           // Show 'Organization Settings' when on a home page of a valid org.

app/client/ui/BillingPage.ts

@@ -10,7 +10,7 @@ import {BillingPlanManagers} from 'app/client/ui/BillingPlanManagers';
 import {createForbiddenPage} from 'app/client/ui/errorPages';
 import {leftPanelBasic} from 'app/client/ui/LeftPanelCommon';
 import {pagePanels} from 'app/client/ui/PagePanels';
-import {NEW_DEAL, showTeamUpgradeConfirmation} from 'app/client/ui/ProductUpgrades';
+import {showTeamUpgradeConfirmation} from 'app/client/ui/ProductUpgrades';
 import {createTopBarHome} from 'app/client/ui/TopBar';
 import {cssBreadcrumbs, cssBreadcrumbsLink, separator} from 'app/client/ui2018/breadcrumbs';
 import {bigBasicButton, bigBasicButtonLink, bigPrimaryButton} from 'app/client/ui2018/buttons';
@@ -45,9 +45,6 @@ export class BillingPage extends Disposable {
 
   constructor(private _appModel: AppModel) {
     super();
-
-    // TODO: remove once NEW_DEAL is there. Execute for side effect
-    void NEW_DEAL();
     this._appModel.refreshOrgUsage().catch(reportError);
   }
 

app/client/ui/DocMenu.ts

@@ -71,10 +71,11 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
             workspace ? makeLocalViewSettings(home, workspace.id) :
             home;
           return [
-            // Hide the sort option only when showing intro.
-            ((showIntro && page === 'all') ? css.prefSelectors(upgradeButton.showUpgradeButton()) :
-              // This is float:right element
-              buildPrefs(viewSettings, {hideSort: showIntro}, upgradeButton.showUpgradeButton())
+            buildPrefs(
+              viewSettings,
+              // Hide the sort and view options when showing the intro.
+              {hideSort: showIntro, hideView: showIntro && page === 'all'},
+              ['all', 'workspace'].includes(page) ? upgradeButton.showUpgradeButton() : null,
             ),
 
             // Build the pinned docs dom. Builds nothing if the selectedOrg is unloaded.
@@ -297,12 +298,16 @@ function buildOtherSites(home: HomeModel) {
 
 /**
  * Build the widget for selecting sort and view mode options.
- * If hideSort is true, will hide the sort dropdown: it has no effect on the list of examples, so
- * best to hide when those are the only docs shown.
+ *
+ * Options hideSort and hideView control which options are shown; they should have no effect
+ * on the list of examples, so best to hide when those are the only docs shown.
  */
 function buildPrefs(
   viewSettings: ViewSettings,
-  options: {hideSort: boolean},
+  options: {
+    hideSort: boolean,
+    hideView: boolean,
+  },
   ...args: DomArg<HTMLElement>[]): DomContents {
   return css.prefSelectors(
     // The Sort selector.
@@ -317,7 +322,7 @@ function buildPrefs(
     ),
 
     // The View selector.
-    buttonSelect<ViewPref>(viewSettings.currentView, [
+    options.hideView ? null : buttonSelect<ViewPref>(viewSettings.currentView, [
         {value: 'icons', icon: 'TypeTable'},
         {value: 'list', icon: 'TypeCardList'},
       ],

app/client/ui/HomeLeftPane.ts

@@ -191,7 +191,7 @@ function addMenu(home: HomeModel, creating: Observable<boolean>): DomElementArg[
              dom.cls('disabled', (use) => !roles.canEdit(orgAccess) || !use(home.available)),
              testId("dm-new-workspace")
     ),
-    upgradeText(needUpgrade),
+    upgradeText(needUpgrade, () => home.app.showUpgradeModal()),
   ];
 }
 
@@ -225,8 +225,12 @@ function workspaceMenu(home: HomeModel, ws: Workspace, renaming: Observable<Work
       testId('dm-delete-workspace')),
     upgradableMenuItem(needUpgrade, manageWorkspaceUsers,
       roles.canEditAccess(ws.access) ? "Manage Users" : "Access Details",
+      // TODO: Personal plans can't currently share workspaces, but that restriction
+      // should formally be documented and defined in `Features`, with this check updated
+      // to look there instead.
+      dom.cls('disabled', () => home.app.isPersonal),
       testId('dm-workspace-access')),
-    upgradeText(needUpgrade),
+    upgradeText(needUpgrade, () => home.app.showUpgradeModal()),
   ];
 }
 

app/client/ui/NotifyUI.ts

@@ -19,9 +19,13 @@ function buildAction(action: NotifyAction, item: Notification, options: IBeaconO
   const appModel = options.appModel;
   switch (action) {
     case 'upgrade':
-      return dom('a', cssToastAction.cls(''), 'Upgrade Plan', {target: '_blank'},
-        {href: commonUrls.plans});
-
+      if (appModel) {
+        return cssToastAction('Upgrade Plan', dom.on('click', () =>
+          appModel.showUpgradeModal()));
+      } else {
+        return dom('a', cssToastAction.cls(''), 'Upgrade Plan', {target: '_blank'},
+          {href: commonUrls.plans});
+      }
     case 'renew':
       // If already on the billing page, nothing to return.
       if (urlState().state.get().billing === 'billing') { return null; }