@salesforcedevs/dw-components 1.3.148-canary.25 → 1.3.148-canary.27

package/package.json

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

package/src/modules/dw/j2sCardSequence/j2sCardSequence.css

@@ -15,7 +15,8 @@ dx-step-sequence {
     scroll-margin-top: var(--dx-g-global-header-height);
 }
 
-dx-step-sequence-step:last-child dx-card-step::part(footer-container) {
+dx-step-sequence-step:last-child[data-has-primary-action="true"]
+    dx-card-step::part(footer-container) {
     background-color: var(--dx-g-indigo-vibrant-95);
     border-radius: 8px;
     margin: 0 30px 30px 30px;

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

@@ -8,7 +8,11 @@
         use-history={useHistory}
     >
         <template for:each={stepsData} for:item="stepDatum" for:index="index">
-            <dx-step-sequence-step key={stepDatum.id}>
+            <dx-step-sequence-step
+                key={stepDatum.id}
+                class={stepClassName}
+                data-has-primary-action={hasPrimaryAction}
+            >
                 <dx-card-step
                     header-icon-symbol={stepDatum.headerData.iconSymbol}
                     header-icon-sprite={stepDatum.headerData.iconSprite}
@@ -55,9 +59,10 @@
                     </div>
                     <div slot="primary-action-section">
                         <dx-button
+                            if:true={hasPrimaryAction}
                             class="primary-action"
                             disabled={isJ2sFormInvalid}
-                            href={stepDatum.primaryAction.link}
+                            href={primaryActionLink}
                             icon-sprite={stepDatum.primaryAction.iconSprite}
                             icon-symbol={stepDatum.primaryAction.iconSymbol}
                             loading={isLoading}
@@ -66,7 +71,7 @@
                             target={primaryActionLinkTarget}
                             variant={primaryActionVariant}
                         >
-                            {stepDatum.primaryAction.text}
+                            {primaryActionText}
                         </dx-button>
                     </div>
                 </dx-card-step>

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

@@ -6,7 +6,12 @@ import { toJson } from "dxUtils/normalizers";
 import J2sForm from "dw/j2sForm";
 
 export type StepDatum = {
-    bodyHtml?: string;
+    bodyHtml?:
+        | string
+        | {
+              default: string;
+              [countryCode: string]: string;
+          };
     formData?: {
         countriesWithReferralInput?: string[];
         countriesWithRequiredJobRole?: string[];
@@ -28,9 +33,19 @@ export type StepDatum = {
     primaryAction: {
         iconSprite?: string;
         iconSymbol?: string;
-        link?: string;
+        link?:
+            | string
+            | {
+                  default: string;
+                  [countryCode: string]: string;
+              };
         linkTarget?: string;
-        text: string;
+        text:
+            | string
+            | {
+                  default: string;
+                  [countryCode: string]: string;
+              };
         variant?: string;
     };
     secondaryActionHtml?: string;
@@ -38,6 +53,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;
@@ -77,9 +107,10 @@ export default class J2sCardSequence extends LightningElement {
         });
     }
 
+    private confirmedCountry = "";
     private countries = "[]";
     private currentSequenceStep = 0;
-    private didFormSubmissionFail = false;
+    private formSubmissionFailureState: Partial<DrmFormData> | null = null;
     private recaptchaToken = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
@@ -101,40 +132,59 @@ export default class J2sCardSequence extends LightningElement {
         this._isJ2sFormInvalid = isFormInvalid;
     }
 
+    private get primaryAction() {
+        return this.stepsData[this.currentSequenceStep || 0].primaryAction;
+    }
+
+    private get primaryActionLink() {
+        const { link } = this.primaryAction;
+        return typeof link === "string"
+            ? link
+            : link?.[this.confirmedCountry] || link?.default;
+    }
+
+    private get primaryActionText() {
+        const { text } = this.primaryAction;
+        return typeof text === "string"
+            ? text
+            : text[this.confirmedCountry] || text.default;
+    }
+
     private get primaryActionVariant() {
         if (this.currentSequenceStep === 1 && this.isJ2sFormInvalid) {
             return "custom"; // override for disabled button styling
         }
-        return this.stepsData[this.currentSequenceStep || 0].primaryAction
-            .variant;
+        return this.primaryAction.variant;
     }
 
     private get primaryActionLinkTarget() {
-        return (
-            this.stepsData[this.currentSequenceStep || 0].primaryAction
-                .linkTarget || "_blank"
-        );
+        return this.primaryAction.linkTarget || "_blank";
+    }
+
+    private get hasPrimaryAction() {
+        // new requirement: don't show primary action on final step if country isn't India
+        return this.currentSequenceStep !== 2 || this.confirmedCountry === "IN";
     }
 
     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 +242,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,19 +295,20 @@ 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;
+        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: {
@@ -275,6 +326,7 @@ export default class J2sCardSequence extends LightningElement {
                 const resData = await res.json();
                 const resOutput = resData.handlePostRequestOutput || resData;
                 if (resOutput?.status === "success") {
+                    this.confirmedCountry = formData.MailingCountry as string;
                     this.jumpToStepIndex(2, false);
                     this.initialStepIndex = 0; // don't save final step in storage; rather, reset the starting step
                 } else {
@@ -288,7 +340,7 @@ export default class J2sCardSequence extends LightningElement {
                 );
             }
         } catch (ex) {
-            this.didFormSubmissionFail = true;
+            this.formSubmissionFailureState = formData;
             console.error(ex);
         }
 
@@ -370,20 +422,32 @@ export default class J2sCardSequence extends LightningElement {
                 secondaryActionMarkupContainers[stepIndex];
 
             if (bodyMarkupContainer) {
-                let markup = bodyHtml;
+                let markup =
+                    typeof bodyHtml === "string"
+                        ? bodyHtml
+                        : bodyHtml?.[this.confirmedCountry] ||
+                          bodyHtml?.default;
+
                 if (stepIndex === 2) {
                     // User's email is supposed to show on final step
-                    markup = `${bodyHtml}${
-                        !this.formIncomingUserInfo.email
+                    markup = `${markup}${
+                        !this.formIncomingUserInfo.Email
                             ? ""
-                            : `<span class="final-email-address">${this.formIncomingUserInfo.email}</span>`
+                            : `<span class="final-email-address">${this.formIncomingUserInfo.Email}</span>`
                     }`;
                 }
+
                 bodyMarkupContainer.innerHTML = markup || "";
             }
+
             if (secondaryActionMarkupContainer) {
-                secondaryActionMarkupContainer.innerHTML =
-                    secondaryActionHtml || "";
+                const secondaryActionInnerHtml =
+                    !secondaryActionHtml ||
+                    // ugh, new special exception on step 2 to only show secondary action for IN
+                    (stepIndex === 2 && this.confirmedCountry !== "IN")
+                        ? ""
+                        : secondaryActionHtml;
+                secondaryActionMarkupContainer.innerHTML = secondaryActionInnerHtml;
             }
         });
     }

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
@@ -60,7 +60,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     }
 
     @api
-    get formDataForDrm() {
+    get formDataForDrm(): Partial<DrmFormData> {
         // 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
@@ -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: Partial<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