(core) Product update popups and hosted stripe integration

Summary:
- Showing nudge to individual users to sign up for free team plan.
- Implementing billing page to upgrade from free team to pro.
- New modal with upgrade options and free team site signup.
- Integrating Stripe-hosted UI for checkout and plan management.

Test Plan: updated tests

Reviewers: georgegevoian

Reviewed By: georgegevoian

Subscribers: paulfitz

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

app/client/ui/AccountWidget.ts

@@ -108,7 +108,7 @@ export class AccountWidget extends Disposable {
           menuItemLink(urlState().setLinkUrl({billing: 'billing'}), 'Billing Account') :
           menuItem(() => null, 'Billing Account', dom.cls('disabled', true))
         ) :
-        menuItemLink({href: commonUrls.plans}, 'Upgrade Plan'),
+        menuItem(() => this._appModel.showUpgradeModal(), 'Upgrade Plan'),
 
       mobileModeToggle,
 

app/client/ui/AppHeader.ts

@@ -6,7 +6,7 @@ import {shouldHideUiElement} from 'app/common/gristUrls';
 import * as version from 'app/common/version';
 import {BindableValue, Disposable, dom, styled} from "grainjs";
 import {menu, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
-import {isTemplatesOrg, Organization, SUPPORT_EMAIL} from 'app/common/UserAPI';
+import {isTemplatesOrg, Organization} from 'app/common/UserAPI';
 import {AppModel} from 'app/client/models/AppModel';
 import {icon} from 'app/client/ui2018/icons';
 import {DocPageModel} from 'app/client/models/DocPageModel';
@@ -35,10 +35,8 @@ export class AppHeader extends Disposable {
   public buildDom() {
     const theme = getTheme(this._appModel.topAppModel.productFlavor);
 
-    const user = this._appModel.currentValidUser;
     const currentOrg = this._appModel.currentOrg;
-    const isBillingManager = Boolean(currentOrg && currentOrg.billingAccount &&
-      (currentOrg.billingAccount.isManager || user?.email === SUPPORT_EMAIL));
+    const isBillingManager = this._appModel.isBillingManager() || this._appModel.isSupport();
 
     return cssAppHeader(
       cssAppHeader.cls('-widelogo', theme.wideLogo || false),

app/client/ui/BillingForm.ts

@@ -1,44 +1,21 @@
-import {get as getBrowserGlobals} from 'app/client/lib/browserGlobals';
-import {reportError} from 'app/client/models/AppModel';
 import {BillingModel} from 'app/client/models/BillingModel';
 import * as css from 'app/client/ui/BillingPageCss';
-import {colors, vars} from 'app/client/ui2018/cssVars';
-import {IOption, select} from 'app/client/ui2018/menus';
-import type {ApiError} from 'app/common/ApiError';
-import {IBillingAddress, IBillingCard, IBillingCoupon, IBillingOrgSettings,
-        IFilledBillingAddress} from 'app/common/BillingAPI';
+import {IBillingOrgSettings} from 'app/common/BillingAPI';
 import {checkSubdomainValidity} from 'app/common/orgNameUtils';
 import * as roles from 'app/common/roles';
 import {Organization} from 'app/common/UserAPI';
-import {Computed, Disposable, dom, DomArg, IDisposableOwnerT, makeTestId, Observable, styled} from 'grainjs';
-import sortBy = require('lodash/sortBy');
+import {Disposable, dom, DomArg, IDisposableOwnerT, makeTestId, Observable} from 'grainjs';
 
-const G = getBrowserGlobals('Stripe', 'window');
 const testId = makeTestId('test-bp-');
-const states = [
-  'AK', 'AL', 'AR', 'AS', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'FM', 'GA', 'GU', 'HI',
-  'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MH', 'MI', 'MN', 'MO', 'MP',
-  'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'PR',
-  'PW', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VI', 'VT', 'WA', 'WI', 'WV', 'WY'
-];
 
 export interface IFormData {
-  address?: IFilledBillingAddress;
-  card?: IBillingCard;
-  token?: string;
   settings?: IBillingOrgSettings;
-  coupon?: IBillingCoupon;
 }
 
 
 // Optional autofill vales to pass in to the BillingForm constructor.
 interface IAutofill {
-  address?: Partial<IBillingAddress>;
   settings?: Partial<IBillingOrgSettings>;
-  // Note that the card name is the only value that may be initialized, since the other card
-  // information is sensitive.
-  card?: Partial<IBillingCard>;
-  coupon?: Partial<IBillingCoupon>;
 }
 
 // An object containing a function to check the validity of its observable value.
@@ -51,69 +28,34 @@ interface IValidated<T> {
 }
 
 export class BillingForm extends Disposable {
-  private readonly _address: BillingAddressForm|null;
-  private readonly _discount: BillingDiscountForm|null;
-  private readonly _payment: BillingPaymentForm|null;
   private readonly _settings: BillingSettingsForm|null;
 
   constructor(
     org: Organization|null,
     billingModel: BillingModel,
-    options: {payment: boolean, address: boolean, settings: boolean, domain: boolean, discount: boolean},
+    options: {settings: boolean, domain: boolean},
     autofill: IAutofill = {}
   ) {
     super();
-
-    // Get the number of forms - if more than one is present subheaders should be visible.
-    const count = [options.settings, options.address, options.payment]
-      .reduce((acc, x) => acc + (x ? 1 : 0), 0);
-
     // Org settings form.
     this._settings = options.settings ? new BillingSettingsForm(billingModel, org, {
-      showHeader: count > 1,
+      showHeader: true,
       showDomain: options.domain,
       autofill: autofill.settings
     }) : null;
-
-    // Discount form.
-    this._discount = options.discount ? new BillingDiscountForm(billingModel, {
-      autofill: autofill.coupon
-    }) : null;
-
-    // Address form.
-    this._address = options.address ? new BillingAddressForm({
-      showHeader: count > 1,
-      autofill: autofill.address
-    }) : null;
-
-    // Payment form.
-    this._payment = options.payment ? new BillingPaymentForm({
-      showHeader: count > 1,
-      autofill: autofill.card
-    }) : null;
   }
 
   public buildDom() {
     return [
       this._settings ? this._settings.buildDom() : null,
-      this._discount ? this._discount.buildDom() : null,
-      this._address ? this._address.buildDom() : null,
-      this._payment ? this._payment.buildDom() : null
     ];
   }
 
   // Note that this will throw if any values are invalid.
   public async getFormData(): Promise<IFormData> {
     const settings = this._settings ? await this._settings.getSettings() : undefined;
-    const address = this._address ? await this._address.getAddress() : undefined;
-    const cardInfo = this._payment ? await this._payment.getCardAndToken() : undefined;
-    const coupon = this._discount ? await this._discount.getCoupon() : undefined;
     return {
       settings,
-      address,
-      coupon,
-      token: cardInfo ? cardInfo.token : undefined,
-      card: cardInfo ? cardInfo.card : undefined
     };
   }
 
@@ -173,233 +115,6 @@ abstract class BillingSubForm extends Disposable {
   }
 }
 
-/**
- * Creates the payment card entry form using Stripe Elements.
- */
-class BillingPaymentForm extends BillingSubForm {
-  private readonly _stripe: any;
-  private readonly _elements: any;
-
-  // Stripe Element fields. Set when the elements are mounted to the dom.
-  private readonly _numberElement: Observable<any> = Observable.create(this, null);
-  private readonly _expiryElement: Observable<any> = Observable.create(this, null);
-  private readonly _cvcElement: Observable<any> = Observable.create(this, null);
-  private readonly _name: IValidated<string> = createValidated(this, checkRequired('Name'));
-
-  constructor(private readonly _options: {
-    showHeader: boolean;
-    autofill?: Partial<IBillingCard>;
-  }) {
-    super();
-    const autofill = this._options.autofill;
-    const stripeAPIKey = G.window.gristConfig.stripeAPIKey;
-    try {
-      this._stripe = G.Stripe(stripeAPIKey);
-      this._elements = this._stripe.elements();
-    } catch (err) {
-      reportError(err);
-    }
-    if (autofill) {
-      this._name.value.set(autofill.name || '');
-    }
-  }
-
-  public buildDom() {
-    return this._stripe ? css.paymentBlock(
-        this._options.showHeader ? css.paymentSubHeader('Payment Method') : null,
-        css.paymentRow(
-          css.paymentField(
-            css.paymentLabel('Cardholder Name'),
-            this.billingInput(this._name, testId('card-name')),
-          )
-        ),
-        css.paymentRow(
-          css.paymentField(
-            css.paymentLabel({for: 'number-element'}, 'Card Number'),
-            css.stripeInput({id: 'number-element'}), // A Stripe Element will be inserted here.
-            testId('card-number')
-          )
-        ),
-        css.paymentRow(
-          css.paymentField(
-            css.paymentLabel({for: 'expiry-element'}, 'Expiry Date'),
-            css.stripeInput({id: 'expiry-element'}), // A Stripe Element will be inserted here.
-            testId('card-expiry')
-          ),
-          css.paymentSpacer(),
-          css.paymentField(
-            css.paymentLabel({for: 'cvc-element'}, 'CVC / CVV Code'),
-            css.stripeInput({id: 'cvc-element'}), // A Stripe Element will be inserted here.
-            testId('card-cvc')
-          )
-        ),
-        css.inputError(
-          dom.text(this.formError),
-          testId('payment-form-error')
-        ),
-        () => { setTimeout(() => this._mountStripeUI(), 0); }
-      ) : null;
-  }
-
-  public async getCardAndToken(): Promise<{card: IBillingCard, token: string}> {
-    // Note that we call createToken using only the card number element as the first argument
-    // in accordance with the Stripe API:
-    //
-    // "If applicable, the Element pulls data from other Elements you’ve created on the same
-    // instance of elements to tokenize—you only need to supply one element as the parameter."
-    //
-    // Source: https://stripe.com/docs/stripe-js/reference#stripe-create-token
-    try {
-      const result = await this._stripe.createToken(this._numberElement.get(), {name: await this._name.get()});
-      if (result.error) { throw new Error(result.error.message); }
-      return {
-        card: result.token.card,
-        token: result.token.id
-      };
-    } catch (e) {
-      this.formError.set(e.message);
-      throw e;
-    }
-  }
-
-  private _mountStripeUI() {
-    // Mount Stripe Element fields.
-    this._mountStripeElement(this._numberElement, 'cardNumber', 'number-element');
-    this._mountStripeElement(this._expiryElement, 'cardExpiry', 'expiry-element');
-    this._mountStripeElement(this._cvcElement, 'cardCvc', 'cvc-element');
-  }
-
-  private _mountStripeElement(elemObs: Observable<any>, stripeName: string, elementId: string): void {
-    // For details on applying custom styles to Stripe Elements, see:
-    // https://stripe.com/docs/stripe-js/reference#element-options
-    const classes = {base: css.stripeInput.className};
-    const style = {
-      base: {
-        '::placeholder': {
-          color: colors.slate.value
-        },
-        'fontSize': vars.mediumFontSize.value,
-        'fontFamily': vars.fontFamily.value
-      }
-    };
-    if (!elemObs.get()) {
-      const stripeInst = this._elements.create(stripeName, {classes, style});
-      stripeInst.addEventListener('change', (event: any) => {
-        if (event.error) { this.formError.set(event.error.message); }
-      });
-      elemObs.set(stripeInst);
-    }
-    elemObs.get().mount(`#${elementId}`);
-  }
-}
-
-/**
- * Creates the company address entry form. Used by BillingPaymentForm when billing address is needed.
- */
-class BillingAddressForm extends BillingSubForm {
-  private readonly _address1: IValidated<string> = createValidated(this, checkRequired('Address'));
-  private readonly _address2: IValidated<string> = createValidated(this, () => undefined);
-  private readonly _city: IValidated<string> = createValidated(this, checkRequired('City'));
-  private readonly _state: IValidated<string> = createValidated(this, checkFunc(
-    (val) => !this._isUS.get() || Boolean(val), `State is required.`));
-  private readonly _postal: IValidated<string> = createValidated(this, checkFunc(
-    (val) => !this._isUS.get() || Boolean(val), 'Zip code is required.'));
-  private readonly _countryCode: IValidated<string> = createValidated(this, checkRequired('Country'));
-
-  private _isUS = Computed.create(this, this._countryCode.value, (use, code) => (code === 'US'));
-
-  private readonly _countries: Array<IOption<string>> = getCountries();
-
-  constructor(private readonly _options: {
-    showHeader: boolean;
-    autofill?: Partial<IBillingAddress>;
-  }) {
-    super();
-    const autofill = this._options.autofill;
-    if (autofill) {
-      this._address1.value.set(autofill.line1 || '');
-      this._address2.value.set(autofill.line2 || '');
-      this._city.value.set(autofill.city || '');
-      this._state.value.set(autofill.state || '');
-      this._postal.value.set(autofill.postal_code || '');
-    }
-    this._countryCode.value.set(autofill?.country || 'US');
-  }
-
-  public buildDom() {
-    return css.paymentBlock(
-      this._options.showHeader ? css.paymentSubHeader('Company Address') : null,
-      css.paymentRow(
-        css.paymentField(
-          css.paymentLabel('Street Address'),
-          this.billingInput(this._address1, testId('address-street'))
-        )
-      ),
-      css.paymentRow(
-        css.paymentField(
-          css.paymentLabel('Suite / Unit'),
-          this.billingInput(this._address2, testId('address-suite'))
-        )
-      ),
-      css.paymentRow(
-        css.paymentField(
-          css.paymentLabel('City'),
-          this.billingInput(this._city, testId('address-city'))
-        ),
-        css.paymentSpacer(),
-        css.paymentField({style: 'flex: 0.5 1 0;'},
-          dom.domComputed(this._isUS, (isUs) =>
-            isUs ? [
-              css.paymentLabel('State'),
-              cssSelect(this._state.value, states),
-            ] : [
-              css.paymentLabel('State / Region'),
-              this.billingInput(this._state),
-            ]
-          ),
-          testId('address-state')
-        )
-      ),
-      css.paymentRow(
-        css.paymentField(
-          css.paymentLabel(dom.text((use) => use(this._isUS) ? 'Zip Code' : 'Postal Code')),
-          this.billingInput(this._postal, testId('address-zip'))
-        )
-      ),
-      css.paymentRow(
-        css.paymentField(
-          css.paymentLabel('Country'),
-          cssSelect(this._countryCode.value, this._countries),
-          testId('address-country')
-        )
-      ),
-      css.inputError(
-        dom.text(this.formError),
-        testId('address-form-error')
-      )
-    );
-  }
-
-  // Throws if any value is invalid. Returns a customer address as accepted by the customer
-  // object in stripe.
-  // For reference: https://stripe.com/docs/api/customers/object#customer_object-address
-  public async getAddress(): Promise<IFilledBillingAddress|undefined> {
-    try {
-      return {
-        line1: await this._address1.get(),
-        line2: await this._address2.get(),
-        city: await this._city.get(),
-        state: await this._state.get(),
-        postal_code: await this._postal.get(),
-        country: await this._countryCode.get(),
-      };
-    } catch (e) {
-      this.formError.set(e.message);
-      throw e;
-    }
-  }
-}
-
 /**
  * Creates the billing settings form, including the org name and the org subdomain values.
  */
@@ -430,7 +145,7 @@ class BillingSettingsForm extends BillingSubForm {
     const noEditAccess = Boolean(this._org && !roles.canEdit(this._org.access));
     const initDomain = this._options.autofill?.domain;
     return css.paymentBlock(
-      this._options.showHeader ? css.paymentSubHeader('Team Site') : null,
+      this._options.showHeader ? css.paymentLabel('Team name') : null,
       css.paymentRow(
         css.paymentField(
           this.billingInput(this._name,
@@ -444,7 +159,7 @@ class BillingSettingsForm extends BillingSubForm {
       ),
       this._options.showDomain ? css.paymentRow(
         css.paymentField(
-          css.paymentLabel('URL'),
+          css.paymentLabel('Team subdomain'),
           this.billingInput(this._domain,
             dom.boolAttr('disabled', () => noEditAccess),
             testId('settings-domain')
@@ -490,67 +205,6 @@ class BillingSettingsForm extends BillingSubForm {
   }
 }
 
-/**
- * Creates the billing discount form.
- */
-class BillingDiscountForm extends BillingSubForm {
-  private _isExpanded = Observable.create(this, false);
-  private readonly _discountCode: IValidated<string> = createValidated(this, () => undefined);
-
-  constructor(
-    private readonly _billingModel: BillingModel,
-    private readonly _options: { autofill?: Partial<IBillingCoupon>; }
-  ) {
-    super();
-    if (this._options.autofill) {
-      const { promotion_code } = this._options.autofill;
-      this._discountCode.value.set(promotion_code ?? '');
-      this._isExpanded.set(Boolean(promotion_code));
-    }
-  }
-
-  public buildDom() {
-    return dom.domComputed(this._isExpanded, isExpanded => [
-      !isExpanded ?
-        css.paymentBlock(
-          css.paymentRow(
-            css.billingText('Have a discount code?', testId('discount-code-question')),
-            css.billingTextBtn(
-              css.billingIcon('Settings'),
-              'Apply',
-              dom.on('click', () => { this.shouldAutoFocus = true; this._isExpanded.set(true); }),
-              testId('apply-discount-code')
-            )
-          )
-        ) :
-        css.paymentBlock(
-          css.paymentRow(
-            css.paymentField(
-              css.paymentLabel('Discount Code'),
-              this.billingInput(this._discountCode, testId('discount-code'), this.maybeAutoFocus()),
-            )
-          ),
-          css.inputError(
-            dom.text(this.formError),
-            testId('discount-form-error')
-          )
-        )
-    ]);
-  }
-
-  public async getCoupon() {
-    const discountCode = await this._discountCode.get();
-    if (discountCode.trim() === '') { return undefined; }
-
-    try {
-      return await this._billingModel.fetchSignupCoupon(discountCode);
-    } catch (e) {
-      const message = (e as ApiError).details?.userError;
-      this.formError.set(message || 'Invalid or expired discount code.');
-      throw e;
-    }
-  }
-}
 
 function checkFunc(func: (val: string) => boolean, message: string) {
   return (val: string) => {
@@ -588,23 +242,3 @@ function createValidated(
     }
   };
 }
-
-function getCountries(): Array<IOption<string>> {
-  // Require just the one file because it has all the data we need and is substantially smaller
-  // than requiring the whole module.
-  const countryNames = require("i18n-iso-countries/langs/en.json").countries;
-  const codes = Object.keys(countryNames);
-  const entries = codes.map(code => {
-    // The module provides names that are either a string or an array of names. If an array, pick
-    // the first one.
-    const names = countryNames[code];
-    return {value: code, label: Array.isArray(names) ? names[0] : names};
-  });
-  return sortBy(entries, 'label');
-}
-
-const cssSelect = styled(select, `
-  height: 42px;
-  padding-left: 13px;
-  align-items: center;
-`);

app/client/ui/DocMenu.ts

@@ -10,12 +10,13 @@ import {getTimeFromNow, HomeModel, makeLocalViewSettings, ViewSettings} from 'ap
 import {getWorkspaceInfo, workspaceName} from 'app/client/models/WorkspaceInfo';
 import * as css from 'app/client/ui/DocMenuCss';
 import {buildHomeIntro} from 'app/client/ui/HomeIntro';
+import {buildUpgradeNudge} from 'app/client/ui/ProductUpgrades';
 import {buildPinnedDoc, createPinnedDocs} from 'app/client/ui/PinnedDocs';
 import {shadowScroll} from 'app/client/ui/shadowScroll';
 import {transition} from 'app/client/ui/transitions';
 import {showWelcomeQuestions} from 'app/client/ui/WelcomeQuestions';
 import {buttonSelect, cssButtonSelect} from 'app/client/ui2018/buttonSelect';
-import {colors} from 'app/client/ui2018/cssVars';
+import {colors, isNarrowScreenObs} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
 import {menu, menuItem, menuText, select} from 'app/client/ui2018/menus';
@@ -24,11 +25,12 @@ import {IHomePage} from 'app/common/gristUrls';
 import {SortPref, ViewPref} from 'app/common/Prefs';
 import * as roles from 'app/common/roles';
 import {Document, Workspace} from 'app/common/UserAPI';
-import {Computed, computed, dom, DomContents, makeTestId, Observable, observable} from 'grainjs';
+import {Computed, computed, dom, DomContents, makeTestId, Observable, observable, styled} from 'grainjs';
 import sortBy = require('lodash/sortBy');
 import {buildTemplateDocs} from 'app/client/ui/TemplateDocs';
 import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
 import {bigBasicButton} from 'app/client/ui2018/buttons';
+import {getUserOrgPrefObs, getUserOrgPrefsObs} from 'app/client/models/UserPrefs';
 
 const testId = makeTestId('test-dm-');
 
@@ -46,94 +48,113 @@ export function createDocMenu(home: HomeModel) {
   ));
 }
 
+function createUpgradeNudge(home: HomeModel) {
+  const isLoggedIn = !!home.app.currentValidUser;
+  const isOnFreePersonal = home.app.currentOrg?.billingAccount?.product?.name === 'starter';
+  const userOrgPrefs = getUserOrgPrefsObs(home.app);
+  const seenNudge = getUserOrgPrefObs(userOrgPrefs, 'seenFreeTeamUpgradeNudge');
+  return dom.maybe(use => isLoggedIn && isOnFreePersonal && !use(seenNudge),
+    () => buildUpgradeNudge({
+      onClose: () => seenNudge.set(true),
+      // On show prices, we will clear the nudge in database once there is some free team site created
+      // The better way is to read all workspaces that this person have and decide then - but this is done
+      // asynchronously - so we potentially can show this nudge to people that already have team site.
+      onUpgrade: () => home.app.showUpgradeModal()
+  }));
+}
+
 function createLoadedDocMenu(home: HomeModel) {
   const flashDocId = observable<string|null>(null);
   return css.docList(
     showWelcomeQuestions(home.app.userPrefsObs),
-    dom.maybe(!home.app.currentFeatures.workspaces, () => [
-      css.docListHeader('This service is not available right now'),
-      dom('span', '(The organization needs a paid plan)')
-    ]),
+    cssDocMenu(
+      dom.maybe(!home.app.currentFeatures.workspaces, () => [
+        css.docListHeader('This service is not available right now'),
+        dom('span', '(The organization needs a paid plan)')
+      ]),
 
-    // currentWS and showIntro observables change together. We capture both in one domComputed call.
-    dom.domComputed<[IHomePage, Workspace|undefined, boolean]>(
-      (use) => [use(home.currentPage), use(home.currentWS), use(home.showIntro)],
-      ([page, workspace, showIntro]) => {
-        const viewSettings: ViewSettings =
-          page === 'trash' ? makeLocalViewSettings(home, 'trash') :
-          page === 'templates' ? makeLocalViewSettings(home, 'templates') :
-          workspace ? makeLocalViewSettings(home, workspace.id) :
-          home;
+      // currentWS and showIntro observables change together. We capture both in one domComputed call.
+      dom.domComputed<[IHomePage, Workspace|undefined, boolean]>(
+        (use) => [use(home.currentPage), use(home.currentWS), use(home.showIntro)],
+        ([page, workspace, showIntro]) => {
+          const viewSettings: ViewSettings =
+            page === 'trash' ? makeLocalViewSettings(home, 'trash') :
+            page === 'templates' ? makeLocalViewSettings(home, 'templates') :
+            workspace ? makeLocalViewSettings(home, workspace.id) :
+            home;
 
-        return [
-          // Hide the sort option only when showing intro.
-          ((showIntro && page === 'all') ? null :
-            buildPrefs(viewSettings, {hideSort: showIntro})
-          ),
-
-          // Build the pinned docs dom. Builds nothing if the selectedOrg is unloaded or
-          dom.maybe((use) => use(home.currentWSPinnedDocs).length > 0, () => [
-            css.docListHeader(css.docHeaderIconDark('PinBig'), 'Pinned Documents'),
-            createPinnedDocs(home, home.currentWSPinnedDocs),
-          ]),
-
-          // Build the featured templates dom if on the Examples & Templates page.
-          dom.maybe((use) => page === 'templates' && use(home.featuredTemplates).length > 0, () => [
-            css.featuredTemplatesHeader(
-              css.featuredTemplatesIcon('Idea'),
-              'Featured',
-              testId('featured-templates-header')
+          return [
+            // Hide the sort option only when showing intro.
+            ((showIntro && page === 'all') ? null :
+              buildPrefs(viewSettings, {hideSort: showIntro})
             ),
-            createPinnedDocs(home, home.featuredTemplates, true),
-          ]),
 
-          dom.maybe(home.available, () => [
-            buildOtherSites(home),
-            (showIntro && page === 'all' ?
-              null :
-              css.docListHeader(
-                (
-                  page === 'all' ? 'All Documents' :
-                  page === 'templates' ?
-                    dom.domComputed(use => use(home.featuredTemplates).length > 0, (hasFeaturedTemplates) =>
-                      hasFeaturedTemplates ? 'More Examples & Templates' : 'Examples & Templates'
-                  ) :
-                  page === 'trash' ? 'Trash' :
-                  workspace && [css.docHeaderIcon('Folder'), workspaceName(home.app, workspace)]
-                ),
-                testId('doc-header'),
-              )
-            ),
-            (
-              (page === 'all') ?
-                dom('div',
-                  showIntro ? buildHomeIntro(home) : null,
-                  buildAllDocsBlock(home, home.workspaces, showIntro, flashDocId, viewSettings),
-                  shouldShowTemplates(home, showIntro) ? buildAllDocsTemplates(home, viewSettings) : null,
-                ) :
-              (page === 'trash') ?
-                dom('div',
-                  css.docBlock('Documents stay in Trash for 30 days, after which they get deleted permanently.'),
-                  dom.maybe((use) => use(home.trashWorkspaces).length === 0, () =>
-                    css.docBlock('Trash is empty.')
+            // Build the pinned docs dom. Builds nothing if the selectedOrg is unloaded or
+            dom.maybe((use) => use(home.currentWSPinnedDocs).length > 0, () => [
+              css.docListHeader(css.docHeaderIconDark('PinBig'), 'Pinned Documents'),
+              createPinnedDocs(home, home.currentWSPinnedDocs),
+            ]),
+
+            // Build the featured templates dom if on the Examples & Templates page.
+            dom.maybe((use) => page === 'templates' && use(home.featuredTemplates).length > 0, () => [
+              css.featuredTemplatesHeader(
+                css.featuredTemplatesIcon('Idea'),
+                'Featured',
+                testId('featured-templates-header')
+              ),
+              createPinnedDocs(home, home.featuredTemplates, true),
+            ]),
+
+            dom.maybe(home.available, () => [
+              buildOtherSites(home),
+              (showIntro && page === 'all' ?
+                null :
+                css.docListHeader(
+                  (
+                    page === 'all' ? 'All Documents' :
+                    page === 'templates' ?
+                      dom.domComputed(use => use(home.featuredTemplates).length > 0, (hasFeaturedTemplates) =>
+                        hasFeaturedTemplates ? 'More Examples & Templates' : 'Examples & Templates'
+                    ) :
+                    page === 'trash' ? 'Trash' :
+                    workspace && [css.docHeaderIcon('Folder'), workspaceName(home.app, workspace)]
                   ),
-                  buildAllDocsBlock(home, home.trashWorkspaces, false, flashDocId, viewSettings),
-                ) :
-              (page === 'templates') ?
-                dom('div',
-                  buildAllTemplates(home, home.templateWorkspaces, viewSettings)
-                ) :
-                workspace && !workspace.isSupportWorkspace ?
-                  css.docBlock(
-                    buildWorkspaceDocBlock(home, workspace, flashDocId, viewSettings),
-                    testId('doc-block')
+                  testId('doc-header'),
+                )
+              ),
+              (
+                (page === 'all') ?
+                  dom('div',
+                    showIntro ? buildHomeIntro(home) : null,
+                    buildAllDocsBlock(home, home.workspaces, showIntro, flashDocId, viewSettings),
+                    dom.maybe(use => use(isNarrowScreenObs()), () => createUpgradeNudge(home)),
+                    shouldShowTemplates(home, showIntro) ? buildAllDocsTemplates(home, viewSettings) : null,
                   ) :
-                  css.docBlock('Workspace not found')
-            )
-          ]),
-        ];
-      }),
-    testId('doclist')
+                (page === 'trash') ?
+                  dom('div',
+                    css.docBlock('Documents stay in Trash for 30 days, after which they get deleted permanently.'),
+                    dom.maybe((use) => use(home.trashWorkspaces).length === 0, () =>
+                      css.docBlock('Trash is empty.')
+                    ),
+                    buildAllDocsBlock(home, home.trashWorkspaces, false, flashDocId, viewSettings),
+                  ) :
+                (page === 'templates') ?
+                  dom('div',
+                    buildAllTemplates(home, home.templateWorkspaces, viewSettings)
+                  ) :
+                  workspace && !workspace.isSupportWorkspace ?
+                    css.docBlock(
+                      buildWorkspaceDocBlock(home, workspace, flashDocId, viewSettings),
+                      testId('doc-block')
+                    ) :
+                    css.docBlock('Workspace not found')
+              )
+            ]),
+          ];
+        }),
+      testId('doclist')
+    ),
+    dom.maybe(use => !use(isNarrowScreenObs()) && use(home.currentPage) === 'all', () => createUpgradeNudge(home)),
   );
 }
 
@@ -407,7 +428,7 @@ async function doRename(home: HomeModel, doc: Document, val: string, flashDocId:
       flashDocId.set(doc.id);
       flashDocId.set(null);
     } catch (err) {
-      reportError(err);
+      reportError(err as Error);
     }
   }
 }
@@ -565,3 +586,7 @@ function shouldShowTemplates(home: HomeModel, showIntro: boolean): boolean {
   // Show templates for all personal orgs, and for non-personal orgs when showing intro.
   return isPersonalOrg || showIntro;
 }
+
+const cssDocMenu = styled('div', `
+  flex-grow: 1;
+`);

app/client/ui/DocMenuCss.ts

@@ -14,6 +14,7 @@ export const docList = styled('div', `
   padding: 32px 64px 24px 64px;
   overflow-y: auto;
   position: relative;
+  display: flex;
 
   &:after {
     content: "";

app/client/ui/SiteSwitcher.ts

@@ -1,9 +1,9 @@
-import {commonUrls, getSingleOrg, shouldHideUiElement} from 'app/common/gristUrls';
+import {getSingleOrg, shouldHideUiElement} from 'app/common/gristUrls';
 import {getOrgName} from 'app/common/UserAPI';
 import {dom, makeTestId, styled} from 'grainjs';
 import {AppModel} from 'app/client/models/AppModel';
 import {urlState} from 'app/client/models/gristUrlState';
-import {menuDivider, menuIcon, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
+import {menuDivider, menuIcon, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
 import {icon} from 'app/client/ui2018/icons';
 import {colors} from 'app/client/ui2018/cssVars';
 
@@ -39,8 +39,8 @@ export function buildSiteSwitcher(appModel: AppModel) {
         testId('org'),
       )
     ),
-    menuItemLink(
-      { href: commonUrls.createTeamSite },
+    menuItem(
+      () => appModel.showNewSiteModal(),
       menuIcon('Plus'),
       'Create new team site',
       testId('create-new-site'),