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; `);