@salesforcedevs/dw-components 1.3.148-canary.1 → 1.3.148-canary.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.148-canary.1",
+    "version": "1.3.148-canary.10",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {

package/src/modules/dw/j2sCardSequence/j2sCardSequence.html

@@ -38,7 +38,12 @@
                                     form-metadata={stepDatum.formMetadata}
                                     incoming-user-info={formIncomingUserInfo}
                                     onformvaliditychange={handleFormValidityChange}
-                                ></dw-j2s-form>
+                                    recaptcha-token={recaptchaToken}
+                                >
+                                    <div slot="form-captcha-slot">
+                                        <slot name="captcha-slot"></slot>
+                                    </div>
+                                </dw-j2s-form>
                             </template>
                         </template>
                     </div>

package/src/modules/dw/j2sCardSequence/j2sCardSequence.ts

@@ -1,14 +1,8 @@
 import { api, LightningElement } from "lwc";
 import StepSequence from "dx/stepSequence";
 import { getListWithUuids } from "dxUtils/list";
+import { track } from "dxUtils/analytics";
 import { toJson } from "dxUtils/normalizers";
-import Button from "dx/button";
-
-function isNoAnimationCookieSet() {
-    return document.cookie
-        .split(";")
-        .some((ck) => ck.trim() === "no_j2s_animation=true");
-}
 
 export type StepDatum = {
     bodyHtml?: string;
@@ -42,14 +36,23 @@ export type StepDatum = {
     stepTitle: string;
 };
 
+function isNoAnimationCookieSet() {
+    return document.cookie
+        .split(";")
+        .some((ck) => ck.trim() === "no_j2s_animation=true");
+}
+
 export default class J2sCardSequence extends LightningElement {
     _didRenderStaticInnerHtml = false;
     _isDrmLoading = false;
+    _isFormSubmitting = false;
     _isJ2sFormInvalid = false;
     _isTbidLoading = false;
     _stepsData: StepDatum[] = [];
     @api animateTransitions = false;
     @api drmDomain: string = "https://drm.my.salesforce-sites.com";
+    @api formHandler: string =
+        "https://formhandlermule-1s9xrb.5sc6y6-4.usa-e2.cloudhub.io/form_handler";
     @api tbidApiBaseUrl: string | undefined;
     @api useHistory: boolean = false;
 
@@ -87,11 +90,14 @@ export default class J2sCardSequence extends LightningElement {
 
     private countries = "[]";
     private currentSequenceStep = 0;
+    private recaptchaToken = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
 
     private get isLoading() {
-        return this._isDrmLoading || this._isTbidLoading;
+        return (
+            this._isDrmLoading || this._isTbidLoading || this._isFormSubmitting
+        );
     }
 
     private get isLoggedIn() {
@@ -152,6 +158,16 @@ export default class J2sCardSequence extends LightningElement {
         );
     }
 
+    @api
+    recaptchaCallback(responseToken: string) {
+        this.recaptchaToken = responseToken;
+    }
+
+    @api
+    recaptchaExpiredCallback() {
+        this.recaptchaToken = "";
+    }
+
     connectedCallback() {
         this.getCountryList();
         this.getTbidUserInfo();
@@ -175,6 +191,15 @@ export default class J2sCardSequence extends LightningElement {
         }
     }
 
+    handleFormValidityChange({ detail }: CustomEvent) {
+        this.isJ2sFormInvalid = !detail.isValid;
+    }
+
+    handleStepSequenceChange({ detail }: CustomEvent) {
+        this.currentSequenceStep = detail.stepIndex;
+        this.resetCustomButtonColors();
+    }
+
     handleGetStarted(evt: Event) {
         // If the user is not yet logged in, we need to prevent moving immediately to the next
         // step, but set storage up so that they are on the second step when they return to the
@@ -188,25 +213,76 @@ export default class J2sCardSequence extends LightningElement {
         }
     }
 
-    handleFormValidityChange({ detail }: CustomEvent) {
-        this.isJ2sFormInvalid = !detail.isValid;
-    }
+    async handleFormSubmit(evt: Event) {
+        if (!this.formHandler || this.isJ2sFormInvalid || !this.isLoggedIn) {
+            return;
+        }
 
-    handleStepSequenceChange({ detail }: CustomEvent) {
-        this.currentSequenceStep = detail.stepIndex;
-        this.resetCustomButtonColors();
+        evt.preventDefault(); // don't proceed automatically to next step
+        this._isFormSubmitting = true;
+
+        try {
+            const formData = (this.template.querySelector("dw-j2s-form") as any)
+                ?.formDataForDrm;
+            // For some countries, explicit approvals will be present; for others, it is implicitly assumed
+            if (typeof formData.Opt_In__c !== "boolean") {
+                formData.Opt_In__c = true;
+            }
+            if (typeof formData.Privacy_Statement__c !== "boolean") {
+                formData.Privacy_Statement__c = true;
+            }
+
+            const res = await fetch(this.formHandler, {
+                method: "POST",
+                headers: {
+                    "Captcha-Response": this.recaptchaToken
+                },
+                body: JSON.stringify({
+                    ...formData,
+                    handlerName: "J2S Registration Page",
+                    TBID__c: this.tbidUserInfo.user_id
+                })
+            });
+
+            if (res.ok) {
+                const resData = await res.json();
+                if (resData.status === "success") {
+                    this.jumpToStepIndex(2);
+                } else {
+                    throw new Error(
+                        `Form submission failed. (status: ${resData.status}, message: ${resData.errorMessage})`
+                    );
+                }
+            }
+        } catch (ex) {
+            console.error(ex); // TODO
+        }
+
+        this._isFormSubmitting = false;
     }
 
     primaryActionHandler(evt: Event) {
-        if ((evt.target as Button)?.disabled) {
+        const target = evt.target as HTMLButtonElement;
+
+        if (!target || target.disabled) {
             evt.preventDefault();
             return;
         }
 
+        track(target, "custEv_ctaButtonClick", {
+            click_text: target.textContent,
+            element_title: this.stepsData[this.currentSequenceStep].stepTitle,
+            click_url:
+                this.stepsData[this.currentSequenceStep].primaryAction.link ||
+                "",
+            element_type: "button",
+            content_category: "cta"
+        });
+
         if (!this.currentSequenceStep) {
             this.handleGetStarted(evt);
-        } else if (this.currentSequenceStep === 2) {
-            // TODO: send data to DRM
+        } else if (this.currentSequenceStep === 1) {
+            this.handleFormSubmit(evt);
         }
     }
 
@@ -236,19 +312,18 @@ export default class J2sCardSequence extends LightningElement {
         );
     }
 
-    private jumpToStepOne() {
-        this.initialStepIndex = 0; // update sessionStorage value
-        (
-            this.template.querySelector(
-                "dx-step-sequence"
-            ) as unknown as StepSequence
-        )?.jumpToStep(0);
+    private jumpToStepIndex(stepIndex: number) {
+        this.initialStepIndex = stepIndex; // update sessionStorage value
+        ((this.template.querySelector(
+            "dx-step-sequence"
+        ) as unknown) as StepSequence)?.jumpToStep(stepIndex);
     }
 
     // HTML is received via config from DSC and should be static after initial render.
     private updateStaticInnerHtml() {
-        const bodyMarkupContainers =
-            this.template.querySelectorAll("span.body-markup");
+        const bodyMarkupContainers = this.template.querySelectorAll(
+            "span.body-markup"
+        );
         const secondaryActionMarkupContainers = this.template.querySelectorAll(
             "span.secondary-action-markup"
         );
@@ -272,7 +347,7 @@ export default class J2sCardSequence extends LightningElement {
     private async getCountryList() {
         this._isDrmLoading = true;
 
-        const errorMsg = "Error while getting county list";
+        const errorMsg = "Error while getting country list";
         try {
             const res = await fetch(
                 `${this.drmDomain}/utilities/services/apexrest/countries`
@@ -287,7 +362,7 @@ export default class J2sCardSequence extends LightningElement {
             if (this.initialStepIndex > 0) {
                 // Page loaded on a step higher than the first, but we can't get data for the form;
                 // send user back to the start for now.
-                this.jumpToStepOne();
+                this.jumpToStepIndex(0);
             }
         }
 
@@ -309,7 +384,7 @@ export default class J2sCardSequence extends LightningElement {
         if (!this.tbidUserInfo && this.initialStepIndex > 0) {
             // login failed and the user was previously beyond the start step; need to send them
             // back to the start:
-            this.jumpToStepOne();
+            this.jumpToStepIndex(0);
         }
 
         this._isTbidLoading = false;

package/src/modules/dw/j2sCardSequence/mockProps.ts

@@ -1,46 +1,61 @@
-export const stepsData = [
-    {
-        showStepNumber: "true",
-        stepTitle: "Get started now.",
-        bodyHtml:
-            '<p class="dx-text-display-7">Register for Journey to Salesforce and you\'ll be on your way to becoming a Salesforce Developer.</p><ul class="dx-text-display-8"><li>Step 1: Log in or sign up for a free Trailblazer.me account</li><li>Step 2: Confirm your program registration</li><li>Step 3: Begin your journey!</li></ul>',
-        primaryActionText: "Get Started"
-    },
-    {
-        showStepNumber: "true",
-        stepTitle: "Complete your registration.",
-        formData: {
-            countriesWithReferralInput: ["IN"],
-            countriewWithRequiredJobRole: ["CA"],
-            notAvailableAlertInfo: {
-                title: "Not Available",
-                body: 'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
+export const stepSequenceData = {
+    animateTransitions: "true",
+    stepsData: [
+        {
+            bodyHtml:
+                '<p class="dx-text-display-7">Register for Journey to Salesforce and you\'ll be on your way to becoming a Salesforce Developer.</p><ul class="dx-text-display-8"><li>Step 1: Log in or sign up for a free Trailblazer.me account</li><li>Step 2: Confirm your program registration</li><li>Step 3: Begin your journey!</li></ul>',
+            primaryAction: {
+                text: "Get Started"
             },
-            participatingCountryCodes: ["US", "CA", "IN"]
+            showStepNumber: "true",
+            stepTitle: "Get started now."
         },
-        bodyHtml:
-            '<p class="dx-text-display-7">You\'re almost done! Please review your information and agree to the Journey to Salesforce program terms and conditions.</p>',
-        secondaryActionHtml:
-            '<span class="required-notice">* Required to participate in Journey to Salesforce</span>',
-        primaryActionText: "Complete Registration"
-    },
-    {
-        showStepNumber: "true",
-        stepTitle: "Your Registration is Confirmed",
-        headerData: {
-            iconSymbol: "check-circle",
-            iconSprite: "general",
-            iconColor: "green-vibrant-65",
-            backgroundColor: "green-vibrant-95",
-            textColor: "indigo-vibrant-20"
+        {
+            bodyHtml:
+                '<p class="dx-text-display-7">You\'re almost done! Please review your information and agree to the Journey to Salesforce program terms and conditions.</p>',
+            formData: {
+                countriesWithReferralInput: ["IN"],
+                countriesWithRequiredJobRole: ["CA"],
+                formId: "j2s-form",
+                j2sTerms:
+                    'I agree to the Journey to Salesforce Program Terms, subject to the <a href="http://www.google.com">Salesforce Program Agreement</a>.',
+                notAvailableAlertInfo: {
+                    title: "Not Available",
+                    body:
+                        'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
+                },
+                participatingCountryCodes: ["US", "CA", "IN"]
+            },
+            primaryAction: {
+                text: "Complete Registration"
+            },
+            secondaryActionHtml:
+                '<span class="required-notice">* Required to participate in Journey to Salesforce</span>',
+            showStepNumber: "true",
+            stepTitle: "Complete your registration."
         },
-        bodyHtml:
-            '<div class="dx-text-display-8"><p>Welcome to Journey to Salesforce! Congratulations on taking this step in your journey towards becoming a Salesforce Developer. Through this program you\'ll gain the knowledge, experience, and skills to help you excel in the Salesforce ecosystem.</p><p>To get started, click the button below to join the Journey to Salesforce community, and make sure to check your email for links to bookmark!</p>',
-        secondaryActionHtml:
-            '<span class="dx-text-display-7">Ready to jump in?</span>',
-        primaryActionText: "Join Slack",
-        primaryActionVariant: "custom",
-        primaryActionIconSprite: "utility",
-        primaryActionIconSymbol: "new_window"
-    }
-];
+        {
+            bodyHtml:
+                '<div class="dx-text-display-8"><p>Welcome to Journey to Salesforce! Congratulations on taking this step in your journey towards becoming a Salesforce Developer. Through this program you\'ll gain the knowledge, experience, and skills to help you excel in the Salesforce ecosystem.</p><p>To get started, click the button below to join the Journey to Salesforce community, and make sure to check your email for links to bookmark!</p></div>',
+            headerData: {
+                backgroundColor: "green-vibrant-95",
+                iconSymbol: "check-circle",
+                iconSprite: "general",
+                iconColor: "green-vibrant-65",
+                textColor: "indigo-vibrant-20"
+            },
+            primaryAction: {
+                iconSprite: "utility",
+                iconSymbol: "new_window",
+                link:
+                    "https://salesforce-external.slack.com/archives/C05HJK4PGJV",
+                text: "Join Slack",
+                variant: "custom"
+            },
+            secondaryActionHtml:
+                '<span class="dx-text-display-7">Ready to jump in?</span>',
+            showStepNumber: "true",
+            stepTitle: "Your Registration is Confirmed"
+        }
+    ]
+};

package/src/modules/dw/j2sForm/j2sForm.css

@@ -21,8 +21,8 @@
 }
 
 .form-row .terms {
-    --dx-c-checkbox-text-line-height: 20px;
-    --dx-c-checkbox-font-size: 14px;
+    --dx-c-checkbox-text-line-height: var(--dx-g-text-lg);
+    --dx-c-checkbox-font-size: var(--dx-g-text-sm);
 
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-c-checkbox-font-size);
@@ -44,3 +44,9 @@
 .form-terms-container {
     padding-top: var(--dx-g-spacing-sm);
 }
+
+.form-captcha-slot {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}

package/src/modules/dw/j2sForm/j2sForm.html

@@ -1,11 +1,12 @@
 <template>
+    <!-- For the names of the form fields, see: https://salesforce.quip.com/daInAFETbPGm -->
     <form class="j2s-form">
         <div class="form-row">
             <dx-input
                 class="first-name-field"
                 label="First Name"
                 missing-error-message="Enter your first name"
-                name="first_name"
+                name="FirstName"
                 placeholder="Your first name"
                 required
                 validity-on-blur
@@ -16,7 +17,7 @@
                 class="last-name-field"
                 label="Last Name"
                 missing-error-message="Enter your last name"
-                name="last_name"
+                name="LastName"
                 placeholder="Your last name"
                 required
                 validity-on-blur
@@ -29,7 +30,7 @@
                 class="company-name-field"
                 label="Company Name"
                 missing-error-message="Enter your company name"
-                name="company_name"
+                name="Company__c"
                 placeholder="Your company name"
                 required
                 validity-on-blur
@@ -41,7 +42,7 @@
                 class="job-role-field"
                 label="Job Role"
                 message-when-value-missing="Select your job role"
-                name="job_role"
+                name="DRM_Role__c"
                 options={jobRoles}
                 placeholder="Select Job Role"
                 value={state.jobRole}
@@ -51,7 +52,7 @@
                 class="job-role-field"
                 label="Job Role"
                 message-when-value-missing="Select your job role"
-                name="job_role"
+                name="DRM_Role__c"
                 options={jobRoles}
                 placeholder="Select Job Role"
                 required
@@ -61,7 +62,7 @@
         </div>
         <div class="form-row">
             <dx-input
-                name="email"
+                name="Email"
                 type="email"
                 placeholder="Your email address"
                 label="Email"
@@ -74,7 +75,7 @@
             <dx-select
                 label="Country/Region"
                 message-when-value-missing="Select your country/region"
-                name="country"
+                name="MailingCountry"
                 options={countries}
                 placeholder="Select Country/Region"
                 required
@@ -84,7 +85,7 @@
         </div>
         <div class="form-row" if:true={isCountryWithReferralInput}>
             <dx-input
-                name="referral_email"
+                name="Referral_Email__c"
                 class="referral-email-field full-width"
                 label="If anyone has referred you, please share their Email ID below, with their consent."
                 type="email"
@@ -102,7 +103,7 @@
             <div class="form-row" if:true={state.showMarketingText}>
                 <dx-checkbox
                     value="marketing-terms"
-                    name="marketing_terms"
+                    name="Opt_In__c"
                     required
                     class="terms"
                     onchange={handleRequiredFieldUpdate}
@@ -127,7 +128,7 @@
                 <dx-checkbox
                     if:true={state.showLegalCheckbox}
                     value="legal-terms"
-                    name="legal_terms"
+                    name="Privacy_Statement__c"
                     required
                     class="terms"
                     onchange={handleRequiredFieldUpdate}
@@ -153,6 +154,7 @@
                     class="legal-terms no-checkbox"
                 ></span>
             </div>
+            <slot class="form-captcha-slot" name="form-captcha-slot"></slot>
         </div>
     </form>
 </template>

package/src/modules/dw/j2sForm/j2sForm.ts

@@ -31,12 +31,14 @@ export type J2sFormState = {
 };
 
 export default class J2sForm extends LightningElementWithState<J2sFormState> {
-    private _didSetFormId = false;
-    private _isInitialRender = true;
-    private _incomingUserInfo: any = {}; // TODO typings
-    private _formMetadata: any = {}; // TODO typings
     private _countriesJson = "";
     private _countriesLookup: any = {}; // TODO typings
+    private _didSetFormId = false;
+    private _formMetadata: any = {}; // TODO typings
+    private _incomingUserInfo: any = {}; // TODO typings
+    private _isInitialRender = true;
+    private _recaptchaToken = "";
+
     @api id = "";
     @api referralText = "";
 
@@ -72,6 +74,33 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         this._formMetadata = toJson(value);
     }
 
+    @api
+    get formDataForDrm() {
+        // We should be able to just get the formData from the form automatically using `new FormData(theForm)`,
+        // but our custom form elements don't seem to implement what it is required for that currently. See:
+        // https://web.dev/more-capable-form-controls/#defining-a-form-associated-custom-element
+        const formData: any = {};
+        this.template
+            .querySelectorAll("form [name]")
+            .forEach((namedElement) => {
+                const typedElement = namedElement as HTMLInputElement;
+                formData[typedElement.name] =
+                    typeof typedElement.checked === "boolean"
+                        ? typedElement.checked
+                        : typedElement.value;
+            });
+        return formData;
+    }
+
+    @api
+    get recaptchaToken() {
+        return this._recaptchaToken;
+    }
+    set recaptchaToken(value: string) {
+        this._recaptchaToken = value;
+        this.handleRequiredFieldUpdate();
+    }
+
     private participatingCountryCodes = ["US", "CA", "IN"];
     private countriesWithReferralInput = ["IN"];
     private countriesWithRequiredJobRole = ["CA"];
@@ -173,17 +202,6 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         }
     }
 
-    private updateInnerHtml(selector: string, html: string): void {
-        const element = this.template.querySelector(selector);
-        if (element) {
-            element.innerHTML = html;
-        }
-    }
-
-    private isParticipatingCountry(country: string) {
-        return this.participatingCountryCodes.includes(country);
-    }
-
     handleRequiredFieldUpdate() {
         const isFormNowValid = this.checkValidity();
         if (this.state.isFormValid !== isFormNowValid) {
@@ -220,8 +238,20 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
             ?.classList.toggle("hidden");
     }
 
+    private updateInnerHtml(selector: string, html: string): void {
+        const element = this.template.querySelector(selector);
+        if (element) {
+            element.innerHTML = html;
+        }
+    }
+
+    private isParticipatingCountry(country: string) {
+        return this.participatingCountryCodes.includes(country);
+    }
+
     private checkValidity() {
         return (
+            Boolean(this.recaptchaToken) &&
             this.isParticipatingCountry(this.state.country) &&
             this.requiredFormFields.every(
                 (requiredFormField) =>