gristlabs_grist-core/app/client/ui/WelcomeCoachingCall.ts

import {AppModel} from 'app/client/models/AppModel';
import {bigBasicButton, bigPrimaryButtonLink} from 'app/client/ui2018/buttons';
import {testId, theme, vars} from 'app/client/ui2018/cssVars';
import {cardPopup, cssPopupBody, cssPopupButtons, cssPopupCloseButton,
        cssPopupTitle} from 'app/client/ui2018/popups';
import {icon} from 'app/client/ui2018/icons';
import {getGristConfig} from 'app/common/urlUtils';
import {dom, styled} from 'grainjs';

const FREE_COACHING_CALL_URL = 'https://calendly.com/grist-team/grist-free-coaching-call';

export function shouldShowWelcomeCoachingCall(appModel: AppModel) {
  const {deploymentType} = getGristConfig();
  if (deploymentType !== 'saas') { return false; }

  const {behavioralPromptsManager, dismissedWelcomePopups} = appModel;

  // Defer showing coaching call until Add New tip is dismissed.
  const hasSeenAddNewTip = behavioralPromptsManager.hasSeenTip('addNew');
  const shouldShowTips = behavioralPromptsManager.shouldShowTips();
  if (!hasSeenAddNewTip && shouldShowTips) { return false; }

  const popup = dismissedWelcomePopups.get().find(p => p.id === 'coachingCall');
  return (
    // Only show if the user is an owner.
    appModel.isOwner() && (
      // And preferences for the popup haven't been saved before.
      popup === undefined ||
      // Or the popup has been shown before, and it's time to shown it again.
      popup.nextAppearanceAt !== null && popup.nextAppearanceAt <= Date.now()
    )
  );
}

/**
 * Shows a popup with an offer for a free coaching call.
 */
export function showWelcomeCoachingCall(triggerElement: Element, appModel: AppModel) {
  const {dismissedWelcomePopups} = appModel;

  cardPopup(triggerElement, (ctl) => {
    const dismissPopup = (scheduleNextAppearance?: boolean) => {
      const dismissedPopups = dismissedWelcomePopups.get();
      const newDismissedPopups = [...dismissedPopups];
      const coachingPopup = newDismissedPopups.find(p => p.id === 'coachingCall');
      if (!coachingPopup) {
        newDismissedPopups.push({
          id: 'coachingCall',
          lastDismissedAt: Date.now(),
          timesDismissed: 1,
          nextAppearanceAt: scheduleNextAppearance
            ? new Date().setDate(new Date().getDate() + 7)
            : null,
        });
      } else {
        Object.assign(coachingPopup, {
          lastDismissedAt: Date.now(),
          timesDismissed: coachingPopup.timesDismissed + 1,
          nextAppearanceAt: scheduleNextAppearance && coachingPopup.timesDismissed + 1 <= 1
            ? new Date().setDate(new Date().getDate() + 7)
            : null,
        });
      }
      dismissedWelcomePopups.set(newDismissedPopups);
      ctl.close();
    };

    // TODO: i18n
    return [
      cssPopup.cls(''),
      cssPopupHeader(
        cssLogoAndName(
          cssLogo(),
          cssName('Grist'),
        ),
        cssPopupCloseButton(
          cssCloseIcon('CrossBig'),
          dom.on('click', () => dismissPopup(true)),
          testId('popup-close-button'),
        ),
      ),
      cssPopupTitle('Free Coaching Call', testId('popup-title')),
      cssPopupBody(
        cssBody(
          dom('div',
            'Schedule your ', cssBoldText('free coaching call'), ' with a member of our team.'
          ),
          dom('div',
            "On the call, we'll take the time to understand your needs and "
            + 'tailor the call to you. We can show you the Grist basics, or start '
            + 'working with your data right away to build the dashboards you need.'
          ),
        ),
        testId('popup-body'),
      ),
      cssPopupButtons(
        bigPrimaryButtonLink(
          'Schedule Call',
          dom.on('click', () => dismissPopup(false)),
          {
            href: FREE_COACHING_CALL_URL,
            target: '_blank',
          },
          testId('popup-primary-button'),
        ),
        bigBasicButton(
          'Maybe Later',
          dom.on('click', () => dismissPopup(true)),
          testId('popup-basic-button'),
        ),
      ),
      testId('coaching-call'),
    ];
  });
}

const cssBody = styled('div', `
  display: flex;
  flex-direction: column;
  row-gap: 16px;
`);

const cssBoldText = styled('span', `
  font-weight: 600;
`);

const cssCloseIcon = styled(icon, `
  padding: 12px;
`);

const cssName = styled('div', `
  color: ${theme.popupCloseButtonFg};
  font-size: ${vars.largeFontSize};
  font-weight: 600;
`);

const cssLogo = styled('div', `
  flex: none;
  height: 32px;
  width: 32px;
  background-image: var(--icon-GristLogo);
  background-size: ${vars.logoSize};
  background-repeat: no-repeat;
  background-position: center;
`);

const cssLogoAndName = styled('div', `
  display: flex;
  align-items: center;
  gap: 4px;
`);

const cssPopup = styled('div', `
  display: flex;
  flex-direction: column;
`);

const cssPopupHeader = styled('div', `
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
`);