(core) Update onboarding flow

Summary:
A new onboarding page is now shown to all new users visiting the doc
menu for the first time. Tutorial cards on the doc menu have been
replaced with a new version that tracks completion progress, alongside
a new card that opens the orientation video.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

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

app/common/Prefs.ts

@@ -107,12 +107,15 @@ export interface BehavioralPromptPrefs {
 export const DismissedPopup = StringUnion(
   'deleteRecords',        // confirmation for deleting records keyboard shortcut
   'deleteFields',         // confirmation for deleting columns keyboard shortcut
-  'tutorialFirstCard',    // first card of the tutorial
   'formulaHelpInfo',      // formula help info shown in the popup editor
   'formulaAssistantInfo', // formula assistant info shown in the popup editor
   'supportGrist',         // nudge to opt in to telemetry
   'publishForm',          // confirmation for publishing a form
   'unpublishForm',        // confirmation for unpublishing a form
+  'onboardingCards',      // onboarding cards shown on the doc menu
+
+  /* Deprecated */
+  'tutorialFirstCard',    // first card of the tutorial
 );
 export type DismissedPopup = typeof DismissedPopup.type;
 

app/common/UserAPI.ts

@@ -144,7 +144,7 @@ export interface DocumentOptions {
 
 export interface TutorialMetadata {
   lastSlideIndex?: number;
-  numSlides?: number;
+  percentComplete?: number;
 }
 
 export interface DocumentProperties extends CommonProperties {
@@ -368,6 +368,7 @@ export interface UserAPI {
   getOrgWorkspaces(orgId: number|string, includeSupport?: boolean): Promise<Workspace[]>;
   getOrgUsageSummary(orgId: number|string): Promise<OrgUsageSummary>;
   getTemplates(onlyFeatured?: boolean): Promise<Workspace[]>;
+  getTemplate(docId: string): Promise<Document>;
   getDoc(docId: string): Promise<Document>;
   newOrg(props: Partial<OrganizationProperties>): Promise<number>;
   newWorkspace(props: Partial<WorkspaceProperties>, orgId: number|string): Promise<number>;
@@ -587,6 +588,10 @@ export class UserAPIImpl extends BaseAPI implements UserAPI {
     return this.requestJson(`${this._url}/api/templates?onlyFeatured=${onlyFeatured ? 1 : 0}`, { method: 'GET' });
   }
 
+  public async getTemplate(docId: string): Promise<Document> {
+    return this.requestJson(`${this._url}/api/templates/${docId}`, { method: 'GET' });
+  }
+
   public async getWidgets(): Promise<ICustomWidget[]> {
     return await this.requestJson(`${this._url}/api/widgets`, { method: 'GET' });
   }

app/common/gristUrls.ts

@@ -101,8 +101,6 @@ export const commonUrls = {
   formulas: 'https://support.getgrist.com/formulas',
   forms: 'https://www.getgrist.com/forms/?utm_source=grist-forms&utm_medium=grist-forms&utm_campaign=forms-footer',
 
-  basicTutorial: 'https://templates.getgrist.com/woXtXUBmiN5T/Grist-Basics',
-  basicTutorialImage: 'https://www.getgrist.com/wp-content/uploads/2021/08/lightweight-crm.png',
   gristLabsCustomWidgets: 'https://gristlabs.github.io/grist-widget/',
   gristLabsWidgetRepository: 'https://github.com/gristlabs/grist-widget/releases/download/latest/manifest.json',
   githubGristCore: 'https://github.com/gristlabs/grist-core',
@@ -111,6 +109,8 @@ export const commonUrls = {
   versionCheck: 'https://api.getgrist.com/api/version',
 };
 
+export const ONBOARDING_VIDEO_YOUTUBE_EMBED_ID = '56AieR9rpww';
+
 /**
  * Values representable in a URL. The current state is available as urlState().state observable
  * in client. Updates to this state are expected by functions such as makeUrl() and setLinkUrl().
@@ -811,6 +811,9 @@ export interface GristLoadConfig {
   // The org containing public templates and tutorials.
   templateOrg?: string|null;
 
+  // The doc id of the tutorial shown during onboarding.
+  onboardingTutorialDocId?: string;
+
   // Whether to show the "Delete Account" button in the account page.
   canCloseAccount?: boolean;