@salesforcedevs/dw-components 1.3.148-canary.24 → 1.3.148-canary.26

package/package.json

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

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

@@ -38,6 +38,21 @@ export type StepDatum = {
     stepTitle: string;
 };
 
+// Field names expected by DRM; see: https://salesforce.quip.com/daInAFETbPGm
+export type DrmFormData = {
+    Email: string;
+    FirstName: string;
+    LastName: string;
+    MailingCountry: string;
+    Company__c: string;
+    DRM_Role__c: string;
+    TBID__c: string;
+    Opt_In__c?: boolean;
+    Privacy_Statement__c?: boolean;
+    j2s_terms?: boolean;
+    Referral_Email__c?: string;
+};
+
 export default class J2sCardSequence extends LightningElement {
     _didRenderStaticInnerHtml = false;
     _isDrmLoading = false;
@@ -79,7 +94,7 @@ export default class J2sCardSequence extends LightningElement {
 
     private countries = "[]";
     private currentSequenceStep = 0;
-    private didFormSubmissionFail = false;
+    private formSubmissionFailureState = null;
     private recaptchaToken = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
@@ -118,23 +133,23 @@ export default class J2sCardSequence extends LightningElement {
 
     private get formIncomingUserInfo() {
         if (!this.tbidUserInfo) {
-            return {};
+            return {} as DrmFormData;
         }
 
         return {
-            firstName: decodeURIComponent(this.tbidUserInfo.given_name),
-            lastName: decodeURIComponent(this.tbidUserInfo.family_name),
-            email: decodeURIComponent(this.tbidUserInfo.email),
-            jobRole: decodeURIComponent(
+            FirstName: decodeURIComponent(this.tbidUserInfo.given_name),
+            LastName: decodeURIComponent(this.tbidUserInfo.family_name),
+            Email: decodeURIComponent(this.tbidUserInfo.email),
+            DRM_Role__c: decodeURIComponent(
                 this.tbidUserInfo.custom_attributes?.Role
             ),
-            companyName: decodeURIComponent(
+            Company__c: decodeURIComponent(
                 this.tbidUserInfo.custom_attributes?.CompanyName
             ),
-            country: decodeURIComponent(
+            MailingCountry: decodeURIComponent(
                 this.tbidUserInfo.custom_attributes?.Country
             )
-        };
+        } as DrmFormData;
     }
 
     private get initialStepIndex() {
@@ -192,12 +207,12 @@ export default class J2sCardSequence extends LightningElement {
             this._didRenderStaticInnerHtml = true;
         }
 
-        if (this.didFormSubmissionFail) {
+        if (this.formSubmissionFailureState) {
             const j2sFormEl = (this.template.querySelector(
                 "dw-j2s-form"
             ) as unknown) as J2sForm | null;
-            j2sFormEl?.notifySubmitFailure();
-            this.didFormSubmissionFail = false;
+            j2sFormEl?.notifySubmitFailure(this.formSubmissionFailureState);
+            this.formSubmissionFailureState = null;
         }
     }
 
@@ -245,22 +260,23 @@ export default class J2sCardSequence extends LightningElement {
         evt.preventDefault(); // don't proceed automatically to next step
         this._isFormSubmitting = true;
 
-        try {
-            const j2sFormEl = (this.template.querySelector(
-                "dw-j2s-form"
-            ) as unknown) as J2sForm | null;
-            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;
-            }
-            if (typeof formData.Privacy_Statement__c !== "boolean") {
-                formData.Privacy_Statement__c = true;
-            }
+        const j2sFormEl = (this.template.querySelector(
+            "dw-j2s-form"
+        ) as unknown) as J2sForm | null;
+        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;
+        }
+        if (typeof formData.Privacy_Statement__c !== "boolean") {
+            formData.Privacy_Statement__c = true;
+        }
 
+        try {
             const res = await fetch(this.formHandler, {
                 method: "POST",
                 headers: {
+                    "Content-Type": "application/json",
                     "Captcha-Response": this.recaptchaToken
                 },
                 body: JSON.stringify({
@@ -287,7 +303,7 @@ export default class J2sCardSequence extends LightningElement {
                 );
             }
         } catch (ex) {
-            this.didFormSubmissionFail = true;
+            this.formSubmissionFailureState = formData;
             console.error(ex);
         }
 
@@ -373,9 +389,9 @@ export default class J2sCardSequence extends LightningElement {
                 if (stepIndex === 2) {
                     // User's email is supposed to show on final step
                     markup = `${bodyHtml}${
-                        !this.formIncomingUserInfo.email
+                        !this.formIncomingUserInfo.Email
                             ? ""
-                            : `<span class="final-email-address">${this.formIncomingUserInfo.email}</span>`
+                            : `<span class="final-email-address">${this.formIncomingUserInfo.Email}</span>`
                     }`;
                 }
                 bodyMarkupContainer.innerHTML = markup || "";

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

@@ -11,7 +11,7 @@
                 required
                 validity-on-blur
                 onchange={handleFormFieldChange}
-                value={state.firstName}
+                value={state.FirstName}
             ></dx-input>
             <dx-input
                 class="last-name-field"
@@ -22,7 +22,7 @@
                 required
                 validity-on-blur
                 onchange={handleFormFieldChange}
-                value={state.lastName}
+                value={state.LastName}
             ></dx-input>
         </div>
         <div class="form-row">
@@ -34,7 +34,7 @@
                 placeholder="Your company name"
                 required
                 validity-on-blur
-                value={state.companyName}
+                value={state.Company__c}
                 onchange={handleFormFieldChange}
             ></dx-input>
             <dx-select
@@ -45,7 +45,7 @@
                 options={jobRoles}
                 placeholder="Select Job Role"
                 required
-                value={state.jobRole}
+                value={state.DRM_Role__c}
                 onchange={handleFormFieldChange}
             ></dx-select>
         </div>
@@ -60,7 +60,7 @@
                 disabled
                 readonly="true"
                 required
-                value={state.email}
+                value={state.Email}
             ></dx-input>
             <dx-select
                 label="Country/Region"
@@ -69,7 +69,7 @@
                 options={countries}
                 placeholder="Select Country/Region"
                 required
-                value={state.country}
+                value={state.MailingCountry}
                 onchange={handleFormFieldChange}
             ></dx-select>
         </div>
@@ -80,6 +80,7 @@
                 label="If anyone has referred you, please share their Email ID below, with their consent."
                 validity-on-blur="true"
                 type="email"
+                value={state.Referral_Email__c}
                 onchange={handleFormFieldChange}
             ></dx-input>
         </div>

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

@@ -2,6 +2,7 @@ import { toJson } from "dxUtils/normalizers";
 import { api } from "lwc";
 import debounce from "debounce";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
+import { DrmFormData } from "dw/j2sCardSequence";
 
 // Hard-coding for now because we can't get information about an endpoint for this
 const tbidValidRoles = [
@@ -21,8 +22,7 @@ const tbidValidRoles = [
     "Product Manager"
 ];
 
-export type J2sFormState = {
-    country: string;
+export type J2sFormState = DrmFormData & {
     legalText: string;
     marketingText: string;
     learnMore: string;
@@ -40,7 +40,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
 
     @api formMetadata: any = {};
     @api id = "";
-    @api incomingUserInfo: any = {};
+    @api incomingUserInfo = {} as DrmFormData;
     @api referralText = "";
 
     @api
@@ -85,22 +85,25 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         this._recaptchaToken = value;
         if (!this._isInitialRender) {
             // Treat recaptcha checkbox as a required form field even though not technically marked as such:
-            this.handleFormFieldChange({ target: { required: true } } as any);
+            this.setState({
+                isFormValid: this.checkValidity()
+            });
         }
     }
 
     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);
+        return !this.isParticipatingCountry(this.state.MailingCountry);
     }
 
     get isCountryWithReferralInput() {
-        return this.countriesWithReferralInput.includes(this.state.country);
+        return this.countriesWithReferralInput.includes(
+            this.state.MailingCountry
+        );
     }
 
     get notAvailableAlertInfo() {
@@ -124,7 +127,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
             isFormValid: false,
             showMarketingText: true
         };
-        const initialCountry = initialState.country;
+        const initialCountry = initialState.MailingCountry;
         const initialCountryData =
             initialCountry && this._countriesLookup[initialCountry];
         if (initialCountryData) {
@@ -147,8 +150,8 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         }
 
         if (
-            this.state.country &&
-            this.state.country !== this.prevState.country
+            this.state.MailingCountry &&
+            this.state.MailingCountry !== this.prevState.MailingCountry
         ) {
             // Re-render new country's terms
             this.updateInnerHtml(
@@ -198,53 +201,77 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     }
 
     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;
+        // Event target information must be read prior to debouncing; the target is gone after the debounce.
+        const { target = {}, detail } = evt;
+        const {
+            name: targetName,
+            required: isRequiredField
+        } = target as HTMLInputElement;
+        const value =
+            typeof detail === "string"
+                ? detail
+                : typeof detail.checked === "boolean"
+                ? detail.checked
+                : detail.value;
+
+        // Perform the real work after a debounce, in order to prevent unnecessary work on rapid form value changes:
+        this.callbackWithDebounce(() => {
+            if (targetName === "MailingCountry") {
+                this.handleCountryChange(value);
+            } else {
+                const nextState: Partial<J2sFormState> = {};
+                if (targetName) {
+                    nextState[targetName as keyof J2sFormState] = value;
+                }
+                if (isRequiredField) {
+                    nextState.isFormValid = this.checkValidity();
+                }
+                this.setState(nextState);
             }
-        });
 
-        // Don't do unnecessary work too often if form fields are rapidly being changed
-        this.debouncedFormFieldChangeHandler(callbacks);
+            this.unsetSubmitFailure();
+        });
     };
 
     @api
-    notifySubmitFailure() {
+    notifySubmitFailure(formSubmissionFailureState: DrmFormData) {
         this.showSubmitFailureAlert = true;
+        // After form submission failure, restore at most the following values to the form:
+        const {
+            FirstName,
+            LastName,
+            Email,
+            MailingCountry,
+            Company__c,
+            DRM_Role__c,
+            Referral_Email__c
+        } = formSubmissionFailureState;
+        this.setState({
+            FirstName,
+            LastName,
+            Email,
+            MailingCountry,
+            Company__c,
+            DRM_Role__c,
+            Referral_Email__c
+        });
     }
 
-    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({
-                isFormValid: isFormNowValid
-            });
+    private unsetSubmitFailure() {
+        if (this.showSubmitFailureAlert) {
+            this.showSubmitFailureAlert = false;
         }
     }
 
+    private callbackWithDebounce = debounce((callback: Function) => {
+        callback();
+    }, 1000 / 15 /* 15fps seems reasonable */);
+
     private handleCountryChange(countryCode: string) {
         const countryData = this._countriesLookup[countryCode];
 
         this.setState({
-            country: countryCode,
+            MailingCountry: countryCode,
             learnMore: countryData.learnMore,
             legalText: countryData.legalText,
             marketingText: countryData.marketingText,
@@ -253,7 +280,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         });
 
         // Because updating the country can update the required fields, we need to re-set form
-        // validity after render
+        // validity _after_ render
         requestAnimationFrame(() =>
             this.setState({
                 isFormValid: this.checkValidity()
@@ -275,7 +302,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     private checkValidity() {
         return (
             // Boolean(this.recaptchaToken) &&
-            this.isParticipatingCountry(this.state.country) &&
+            this.isParticipatingCountry(this.state.MailingCountry) &&
             this.requiredFormFields.every(
                 (requiredFormField) =>
                     // @ts-ignore