(core) Add behavioral and coaching call popups

Summary:
Adds a new category of popups that are shown dynamically when
certain parts of the UI are first rendered, and a free coaching
call popup that's shown to users on their site home page.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

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

app/common/Prefs.ts

@@ -27,6 +27,10 @@ export interface UserPrefs extends Prefs {
   seenDeprecatedWarnings?: DeprecationWarning[];
   // List of dismissedPopups user have seen.
   dismissedPopups?: DismissedPopup[];
+  // Behavioral prompt preferences.
+  behavioralPrompts?: BehavioralPromptPrefs;
+  // Welcome popups a user has dismissed.
+  dismissedWelcomePopups?: DismissedReminder[];
 }
 
 // A collection of preferences related to a combination of user and org.
@@ -63,11 +67,47 @@ export const DeprecationWarning = StringUnion(
 );
 export type DeprecationWarning = typeof DeprecationWarning.type;
 
+export const BehavioralPrompt = StringUnion(
+  'referenceColumns',
+  'referenceColumnsConfig',
+  'rawDataPage',
+  'accessRules',
+  'filterButtons',
+  'nestedFiltering',
+  'pageWidgetPicker',
+  'pageWidgetPickerSelectBy',
+  'editCardLayout',
+);
+export type BehavioralPrompt = typeof BehavioralPrompt.type;
+
+export interface BehavioralPromptPrefs {
+  /** Defaults to false. */
+  dontShowTips: boolean;
+  /** List of tips that have been dismissed. */
+  dismissedTips: BehavioralPrompt[];
+}
+
 /**
  * List of all popups that user can see and dismiss
  */
 export const DismissedPopup = StringUnion(
   'deleteRecords', // confirmation for deleting records keyboard shortcut
-  'deleteFields'  // confirmation for deleting columns keyboard shortcut
+  'deleteFields',  // confirmation for deleting columns keyboard shortcut
 );
 export type DismissedPopup = typeof DismissedPopup.type;
+
+export const WelcomePopup = StringUnion(
+  'coachingCall',
+);
+export type WelcomePopup = typeof WelcomePopup.type;
+
+export interface DismissedReminder {
+  /** The name of the popup. */
+  id: WelcomePopup;
+  /** Unix timestamp in ms when the popup was last dismissed. */
+  lastDismissedAt: number;
+  /** If non-null, Unix timestamp in ms when the popup will reappear. */
+  nextAppearanceAt: number | null;
+  /**  The number of times this popup has been dismissed. */
+  timesDismissed: number;
+}

app/common/ThemePrefs-ti.ts

@@ -75,6 +75,8 @@ export const ThemeColors = t.iface([], {
   "tooltip-close-button-fg": "string",
   "tooltip-close-button-hover-fg": "string",
   "tooltip-close-button-hover-bg": "string",
+  "tooltip-popup-header-fg": "string",
+  "tooltip-popup-header-bg": "string",
   "modal-bg": "string",
   "modal-backdrop": "string",
   "modal-border": "string",

app/common/ThemePrefs.ts

@@ -87,6 +87,8 @@ export interface ThemeColors {
   'tooltip-close-button-fg': string;
   'tooltip-close-button-hover-fg': string;
   'tooltip-close-button-hover-bg': string;
+  'tooltip-popup-header-fg': string;
+  'tooltip-popup-header-bg': string;
 
   /* Modals */
   'modal-bg': string;

app/common/gristUrls.ts

@@ -62,8 +62,12 @@ export const MIN_URLID_PREFIX_LENGTH = 12;
 export const commonUrls = {
   help: getHelpCenterUrl(),
   helpAccessRules: "https://support.getgrist.com/access-rules",
+  helpColRefs: "https://support.getgrist.com/col-refs",
   helpConditionalFormatting: "https://support.getgrist.com/conditional-formatting",
+  helpFilterButtons: "https://support.getgrist.com/search-sort-filter/#filter-buttons",
   helpLinkingWidgets: "https://support.getgrist.com/linking-widgets",
+  helpRawData: "https://support.getgrist.com/raw-data",
+  helpUnderstandingReferenceColumns: "https://support.getgrist.com/col-refs/#understanding-reference-columns",
   helpTriggerFormulas: "https://support.getgrist.com/formulas/#trigger-formulas",
   helpTryingOutChanges: "https://support.getgrist.com/copying-docs/#trying-out-changes",
   plans: "https://www.getgrist.com/pricing",

app/common/themes/GristDark.ts

@@ -66,6 +66,8 @@ export const GristDark: ThemeColors = {
   'tooltip-close-button-fg': 'white',
   'tooltip-close-button-hover-fg': 'black',
   'tooltip-close-button-hover-bg': 'white',
+  'tooltip-popup-header-fg': '#EFEFEF',
+  'tooltip-popup-header-bg': '#1DA270',
 
   /* Modals */
   'modal-bg': '#32323F',

app/common/themes/GristLight.ts

@@ -66,6 +66,8 @@ export const GristLight: ThemeColors = {
   'tooltip-close-button-fg': 'white',
   'tooltip-close-button-hover-fg': 'black',
   'tooltip-close-button-hover-bg': 'white',
+  'tooltip-popup-header-fg': 'white',
+  'tooltip-popup-header-bg': '#16B378',
 
   /* Modals */
   'modal-bg': 'white',