Make free coaching call url configurable and popup translatable (#823)

README.md

@@ -263,6 +263,7 @@ GRIST_FORCE_LOGIN    | Much like GRIST_ANON_PLAYGROUND but don't support anonymo
 GRIST_SINGLE_ORG | set to an org "domain" to pin client to that org
 GRIST_TEMPLATE_ORG | set to an org "domain" to show public docs from that org
 GRIST_HELP_CENTER | set the help center link ref
+FREE_COACHING_CALL_URL | set the link to the human help (example: email or meeting scheduling tool)
 GRIST_SUPPORT_ANON | if set to 'true', show UI for anonymous access (not shown by default)
 GRIST_SUPPORT_EMAIL | if set, give a user with the specified email support powers. The main extra power is the ability to share sites, workspaces, and docs with all users in a listed way.
 GRIST_TELEMETRY_LEVEL | the telemetry level. Can be set to: `off` (default), `limited`, or `full`.

app/client/ui/WelcomeCoachingCall.ts

@@ -7,8 +7,9 @@ import {cardPopup, cssPopupBody, cssPopupButtons, cssPopupCloseButton,
 import {icon} from 'app/client/ui2018/icons';
 import {getGristConfig} from 'app/common/urlUtils';
 import {dom, styled} from 'grainjs';
+import { makeT } from '../lib/localization';
 
-const FREE_COACHING_CALL_URL = 'https://calendly.com/grist-team/grist-free-coaching-call';
+const t = makeT('WelcomeCoachingCall');
 
 export function shouldShowWelcomeCoachingCall(appModel: AppModel) {
   const {deploymentType} = getGristConfig();
@@ -63,7 +64,6 @@ export function showWelcomeCoachingCall(triggerElement: Element, appModel: AppMo
       ctl.close();
     };
 
-    // TODO: i18n
     return [
       cssPopup.cls(''),
       cssPopupHeader(
@@ -77,35 +77,39 @@ export function showWelcomeCoachingCall(triggerElement: Element, appModel: AppMo
           testId('popup-close-button'),
         ),
       ),
-      cssPopupTitle('Free Coaching Call', testId('popup-title')),
+      cssPopupTitle(t('free coaching call'),
+        dom.style('text-transform', 'capitalize'),
+        testId('popup-title')
+      ),
       cssPopupBody(
         cssBody(
           dom('div',
-            'Schedule your ', cssBoldText('free coaching call'), ' with a member of our team.'
+            t('Schedule your {{freeCoachingCall}} with a member of our team.',
+              {freeCoachingCall: cssBoldText(t('free coaching call'))}
+            )
           ),
           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.'
+            t("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',
+          t('Schedule Call'),
           dom.on('click', () => {
             dismissPopup(false);
             logTelemetryEvent('clickedScheduleCoachingCall');
           }),
           {
-            href: FREE_COACHING_CALL_URL,
+            href: getGristConfig().freeCoachingCallUrl,
             target: '_blank',
           },
           testId('popup-primary-button'),
         ),
         bigBasicButton(
-          'Maybe Later',
+          t('Maybe Later'),
           dom.on('click', () => dismissPopup(true)),
           testId('popup-basic-button'),
         ),

app/common/gristUrls.ts

@@ -675,6 +675,9 @@ export interface GristLoadConfig {
   // Url for support for the browser client to use.
   helpCenterUrl?: string;
 
+  // Url for free coaching call scheduling for the browser client to use.
+  freeCoachingCallUrl?: string;
+
   // When set, this directs the client to encode org information in path, not in domain.
   pathOnly?: boolean;
 
@@ -879,6 +882,15 @@ export function getHelpCenterUrl(): string|null {
   }
 }
 
+export function getFreeCoachingCallUrl(): string|null {
+  if(isClient()) {
+    const gristConfig: GristLoadConfig = (window as any).gristConfig;
+    return gristConfig && gristConfig.freeCoachingCallUrl || null;
+  } else {
+    return process.env.FREE_COACHING_CALL_URL || null;
+  }
+}
+
 /**
  * Like getKnownOrg, but respects singleOrg/GRIST_SINGLE_ORG strictly.
  * The main difference in behavior would be for orgs with custom domains

app/server/lib/sendAppPage.ts

@@ -54,6 +54,7 @@ export function makeGristConfig(options: MakeGristConfigOptions): GristLoadConfi
     baseDomain,
     singleOrg: process.env.GRIST_SINGLE_ORG,
     helpCenterUrl: process.env.GRIST_HELP_CENTER || "https://support.getgrist.com",
+    freeCoachingCallUrl: process.env.FREE_COACHING_CALL_URL || "https://calendly.com/grist-team/grist-free-coaching-call",
     pathOnly,
     supportAnon: shouldSupportAnon(),
     enableAnonPlayground: isAffirmative(process.env.GRIST_ANON_PLAYGROUND ?? true),

static/locales/en.client.json

@@ -1306,6 +1306,13 @@
     "HiddenQuestionConfig": {
         "Hidden fields": "Hidden fields"
     },
+    "WelcomeCoachingCall": {
+        "free coaching call": "free coaching call",
+        "Maybe Later": "Maybe Later",
+        "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.": "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.",
+        "Schedule Call": "Schedule Call",
+        "Schedule your {{freeCoachingCall}} with a member of our team.": "Schedule your {{freeCoachingCall}} with a member of our team."
+    },
     "FormView": {
         "Publish": "Publish",
         "Publish your form?": "Publish your form?",