@salesforcedevs/dw-components 1.3.148-canary.14 → 1.3.148-canary.16

package/package.json

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

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

@@ -35,7 +35,7 @@
                                 <dw-j2s-form
                                     id={stepDatum.formData.formId}
                                     countries={countries}
-                                    form-metadata={stepDatum.formMetadata}
+                                    form-metadata={stepDatum.formData}
                                     incoming-user-info={formIncomingUserInfo}
                                     onformvaliditychange={handleFormValidityChange}
                                     recaptcha-token={recaptchaToken}

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

@@ -3,6 +3,7 @@ import StepSequence from "dx/stepSequence";
 import { getListWithUuids } from "dxUtils/list";
 import { track } from "dxUtils/analytics";
 import { toJson } from "dxUtils/normalizers";
+import J2sForm from "dw/j2sForm";
 
 export type StepDatum = {
     bodyHtml?: string;
@@ -57,30 +58,22 @@ export default class J2sCardSequence extends LightningElement {
     }
     set stepsData(value) {
         // normalize incoming value with uuid keys and non-required props (for cleaner HTML template), etc.
-        this._stepsData = getListWithUuids<StepDatum>(toJson(value)).map(
-            (stepDatum) => {
-                const normalizedStepDatum = {
-                    ...stepDatum,
-                    headerData: stepDatum.headerData || {},
-                    primaryAction: {
-                        ...stepDatum.primaryAction,
-                        variant: stepDatum.primaryAction.variant || "primary",
-                        iconSprite:
-                            stepDatum.primaryAction.iconSprite || "general",
-                        iconSymbol:
-                            stepDatum.primaryAction.iconSymbol || "arrow-right"
-                    }
-                };
-
-                if (normalizedStepDatum.formData) {
-                    (normalizedStepDatum as any).formMetadata = JSON.stringify(
-                        normalizedStepDatum.formData
-                    );
+        const valueWithUuids = getListWithUuids<StepDatum>(toJson(value));
+        this._stepsData = valueWithUuids.map((stepDatum) => {
+            const normalizedStepDatum = {
+                ...stepDatum,
+                headerData: stepDatum.headerData || {},
+                primaryAction: {
+                    ...stepDatum.primaryAction,
+                    variant: stepDatum.primaryAction.variant || "primary",
+                    iconSprite: stepDatum.primaryAction.iconSprite || "general",
+                    iconSymbol:
+                        stepDatum.primaryAction.iconSymbol || "arrow-right"
                 }
+            };
 
-                return normalizedStepDatum;
-            }
-        );
+            return normalizedStepDatum;
+        });
     }
 
     private countries = "[]";
@@ -229,9 +222,12 @@ export default class J2sCardSequence extends LightningElement {
         evt.preventDefault(); // don't proceed automatically to next step
         this._isFormSubmitting = true;
 
+        const j2sFormEl = (this.template.querySelector(
+            "dw-j2s-form"
+        ) as unknown) as J2sForm | null;
+
         try {
-            const formData = (this.template.querySelector("dw-j2s-form") as any)
-                ?.formDataForDrm;
+            const formData = j2sFormEl?.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;
@@ -265,6 +261,7 @@ export default class J2sCardSequence extends LightningElement {
                 }
             }
         } catch (ex) {
+            j2sFormEl?.notifySubmitFailure();
             console.error(ex); // TODO
         }
 

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

@@ -10,7 +10,7 @@
                 placeholder="Your first name"
                 required
                 validity-on-blur
-                onblur={handleRequiredFieldUpdate}
+                onchange={handleFormFieldChange}
                 value={state.firstName}
             ></dx-input>
             <dx-input
@@ -21,7 +21,7 @@
                 placeholder="Your last name"
                 required
                 validity-on-blur
-                onblur={handleRequiredFieldUpdate}
+                onchange={handleFormFieldChange}
                 value={state.lastName}
             ></dx-input>
         </div>
@@ -34,21 +34,10 @@
                 placeholder="Your company name"
                 required
                 validity-on-blur
-                onblur={handleRequiredFieldUpdate}
                 value={state.companyName}
+                onchange={handleFormFieldChange}
             ></dx-input>
             <dx-select
-                if:false={isJobRoleRequired}
-                class="job-role-field"
-                label="Job Role"
-                message-when-value-missing="Select your job role"
-                name="DRM_Role__c"
-                options={jobRoles}
-                placeholder="Select Job Role"
-                value={state.jobRole}
-            ></dx-select>
-            <dx-select
-                if:true={isJobRoleRequired}
                 class="job-role-field"
                 label="Job Role"
                 message-when-value-missing="Select your job role"
@@ -57,7 +46,7 @@
                 placeholder="Select Job Role"
                 required
                 value={state.jobRole}
-                onchange={handleRequiredFieldUpdate}
+                onchange={handleFormFieldChange}
             ></dx-select>
         </div>
         <div class="form-row">
@@ -69,8 +58,8 @@
                 missing-error-message="Enter your email address"
                 validity-on-blur="true"
                 required
-                onblur={handleRequiredFieldUpdate}
                 value={state.email}
+                onchange={handleFormFieldChange}
             ></dx-input>
             <dx-select
                 label="Country/Region"
@@ -80,7 +69,7 @@
                 placeholder="Select Country/Region"
                 required
                 value={state.country}
-                onchange={handleCountryChange}
+                onchange={handleFormFieldChange}
             ></dx-select>
         </div>
         <div class="form-row" if:true={isCountryWithReferralInput}>
@@ -89,6 +78,7 @@
                 class="referral-email-field full-width"
                 label="If anyone has referred you, please share their Email ID below, with their consent."
                 type="email"
+                onchange={handleFormFieldChange}
             ></dx-input>
         </div>
         <div class="form-row" if:true={isNotParticipatingCountry}>
@@ -99,6 +89,14 @@
                 variant="accented"
             ></dx-alert>
         </div>
+        <div class="form-row" if:true={showSubmitFailureAlert}>
+            <dx-alert
+                alert-info={formSubmitFailureAlertInfo}
+                class="full-width"
+                type="danger"
+                variant="accented"
+            ></dx-alert>
+        </div>
         <div class="form-terms-container">
             <div class="form-row" if:true={state.showMarketingText}>
                 <dx-checkbox
@@ -106,7 +104,7 @@
                     name="Opt_In__c"
                     required
                     class="terms"
-                    onchange={handleRequiredFieldUpdate}
+                    onchange={handleFormFieldChange}
                     disabled={isNotParticipatingCountry}
                 >
                     <span lwc:dom="manual" class="marketing-terms"></span>
@@ -118,7 +116,7 @@
                     name="j2s_terms"
                     required
                     class="terms"
-                    onchange={handleRequiredFieldUpdate}
+                    onchange={handleFormFieldChange}
                     disabled={isNotParticipatingCountry}
                 >
                     <span lwc:dom="manual" class="j2s-terms"></span>
@@ -131,7 +129,7 @@
                     name="Privacy_Statement__c"
                     required
                     class="terms"
-                    onchange={handleRequiredFieldUpdate}
+                    onchange={handleFormFieldChange}
                     disabled={isNotParticipatingCountry}
                 >
                     <span lwc:dom="manual" class="legal-terms"></span>

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

@@ -1,5 +1,6 @@
 import { toJson } from "dxUtils/normalizers";
 import { api } from "lwc";
+import debounce from "debounce";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
 
 // Hard-coding for now because we can't get information about an endpoint for this
@@ -34,12 +35,12 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     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 formMetadata: any = {};
     @api referralText = "";
 
     @api
@@ -66,14 +67,6 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         this._incomingUserInfo = toJson(value);
     }
 
-    @api
-    get formMetadata() {
-        return this._formMetadata;
-    }
-    set formMetadata(value: string) {
-        this._formMetadata = toJson(value);
-    }
-
     @api
     get formDataForDrm() {
         // We should be able to just get the formData from the form automatically using `new FormData(theForm)`,
@@ -98,13 +91,15 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     }
     set recaptchaToken(value: string) {
         this._recaptchaToken = value;
-        this.handleRequiredFieldUpdate();
+        // Treat recaptcha checkbox as a required form field even though not technically marked as such:
+        this.handleFormFieldChange({ target: { required: true } } as any);
     }
 
     private participatingCountryCodes = ["US", "CA", "IN"];
     private countriesWithReferralInput = ["IN"];
     private countriesWithRequiredJobRole = ["CA"];
     private requiredFormFields: HTMLElement[] = [];
+    private showSubmitFailureAlert = false;
 
     get isNotParticipatingCountry() {
         return !this.isParticipatingCountry(this.state.country);
@@ -114,12 +109,12 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         return this.countriesWithReferralInput.includes(this.state.country);
     }
 
-    get isJobRoleRequired() {
-        return this.countriesWithRequiredJobRole.includes(this.state.country);
+    get notAvailableAlertInfo() {
+        return this.formMetadata.notAvailableAlertInfo;
     }
 
-    get notAvailableAlertInfo() {
-        return (this.formMetadata as any).notAvailableAlertInfo;
+    get formSubmitFailureAlertInfo() {
+        return this.formMetadata.formSubmitFailureAlertInfo;
     }
 
     get jobRoles() {
@@ -151,10 +146,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
 
     renderedCallback(): void {
         if (this._isInitialRender) {
-            this.updateInnerHtml(
-                "span.j2s-terms",
-                (this.formMetadata as any).j2sTerms
-            );
+            this.updateInnerHtml("span.j2s-terms", this.formMetadata.j2sTerms);
         }
 
         if (
@@ -202,7 +194,47 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         }
     }
 
-    handleRequiredFieldUpdate() {
+    handleLearnMore() {
+        this.template
+            .querySelector(".legal-terms-learn-more")
+            ?.classList.toggle("hidden");
+    }
+
+    handleFormFieldChange = (evt: CustomEvent) => {
+        const callbacks: Function[] = [];
+
+        // Event target information must be read prior to debouncing; otherwise, the target is gone after the debounce.
+        if ((evt.target as HTMLInputElement)?.name === "MailingCountry") {
+            const { value } = evt.detail;
+            callbacks.push(() => this.handleCountryChange(value));
+        } else if ((evt.target as HTMLInputElement)?.required) {
+            callbacks.push(() => this.handleRequiredFieldUpdate());
+        }
+
+        callbacks.push(() => {
+            // Remove submit failure message once any change is made to the form.
+            if (this.showSubmitFailureAlert) {
+                this.showSubmitFailureAlert = false;
+            }
+        });
+
+        // Don't do unnecessary work too often if form fields are rapidly being changed
+        this.debouncedFormFieldChangeHandler(callbacks);
+    };
+
+    @api
+    notifySubmitFailure() {
+        this.showSubmitFailureAlert = true;
+    }
+
+    private debouncedFormFieldChangeHandler = debounce(
+        (callbacks: Function[]) => {
+            callbacks.forEach((callback) => callback());
+        },
+        1000 / 15 /* 15fps seems reasonable */
+    );
+
+    private handleRequiredFieldUpdate() {
         const isFormNowValid = this.checkValidity();
         if (this.state.isFormValid !== isFormNowValid) {
             this.setState({
@@ -211,12 +243,11 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         }
     }
 
-    handleCountryChange({ detail }: CustomEvent) {
-        const { value } = detail;
-        const countryData = this._countriesLookup[value];
+    private handleCountryChange(countryCode: string) {
+        const countryData = this._countriesLookup[countryCode];
 
         this.setState({
-            country: value,
+            country: countryCode,
             learnMore: countryData.learnMore,
             legalText: countryData.legalText,
             marketingText: countryData.marketingText,
@@ -232,12 +263,6 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         );
     }
 
-    handleLearnMore() {
-        this.template
-            .querySelector(".legal-terms-learn-more")
-            ?.classList.toggle("hidden");
-    }
-
     private updateInnerHtml(selector: string, html: string): void {
         const element = this.template.querySelector(selector);
         if (element) {