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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.148-canary.26",
+    "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;
@@ -92,9 +107,10 @@ export default class J2sCardSequence extends LightningElement {
         });
     }
 
+    private confirmedCountry = "";
     private countries = "[]";
     private currentSequenceStep = 0;
-    private formSubmissionFailureState = null;
+    private formSubmissionFailureState: Partial<DrmFormData> | null = null;
     private recaptchaToken = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
@@ -116,19 +132,38 @@ 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() {
@@ -262,8 +297,9 @@ export default class J2sCardSequence extends LightningElement {
 
         const j2sFormEl = (this.template.querySelector(
             "dw-j2s-form"
-        ) as unknown) as J2sForm | null;
-        const formData = j2sFormEl?.formDataForDrm;
+        ) 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;
@@ -290,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 {
@@ -385,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}${
+                    markup = `${markup}${
                         !this.formIncomingUserInfo.Email
                             ? ""
                             : `<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.ts

@@ -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
@@ -234,7 +234,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     };
 
     @api
-    notifySubmitFailure(formSubmissionFailureState: DrmFormData) {
+    notifySubmitFailure(formSubmissionFailureState: Partial<DrmFormData>) {
         this.showSubmitFailureAlert = true;
         // After form submission failure, restore at most the following values to the form:
         const {