@salesforcedevs/dw-components 1.3.148-canary.19 → 1.3.148-canary.20

package/package.json

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

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

@@ -40,7 +40,13 @@ dx-step-sequence-step:last-child dx-card-step::part(footer-container) {
 
 .body-markup {
     display: block;
-    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.final-email-address {
+    display: block;
+    margin-top: 20px;
+    line-height: 24px;
+    color: var(--dx-g-blue-vibrant-50);
 }
 
 .referral-email-field {

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

@@ -63,6 +63,7 @@
                             loading={isLoading}
                             onclick={primaryActionHandler}
                             size="large"
+                            target={primaryActionLinkTarget}
                             variant={primaryActionVariant}
                         >
                             {stepDatum.primaryAction.text}

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

@@ -29,6 +29,7 @@ export type StepDatum = {
         iconSprite?: string;
         iconSymbol?: string;
         link?: string;
+        linkTarget?: string;
         text: string;
         variant?: string;
     };
@@ -78,6 +79,7 @@ export default class J2sCardSequence extends LightningElement {
 
     private countries = "[]";
     private currentSequenceStep = 0;
+    private didFormSubmissionFail = false;
     private recaptchaToken = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
@@ -107,6 +109,13 @@ export default class J2sCardSequence extends LightningElement {
             .variant;
     }
 
+    private get primaryActionLinkTarget() {
+        return (
+            this.stepsData[this.currentSequenceStep || 0].primaryAction
+                .linkTarget || "_blank"
+        );
+    }
+
     private get formIncomingUserInfo() {
         if (!this.tbidUserInfo) {
             return {};
@@ -182,6 +191,14 @@ export default class J2sCardSequence extends LightningElement {
             this.updateStaticInnerHtml();
             this._didRenderStaticInnerHtml = true;
         }
+
+        if (this.didFormSubmissionFail) {
+            const j2sFormEl = (this.template.querySelector(
+                "dw-j2s-form"
+            ) as unknown) as J2sForm | null;
+            j2sFormEl?.notifySubmitFailure();
+            this.didFormSubmissionFail = false;
+        }
     }
 
     handleFormValidityChange({ detail }: CustomEvent) {
@@ -228,11 +245,10 @@ 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 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") {
@@ -271,8 +287,8 @@ export default class J2sCardSequence extends LightningElement {
                 );
             }
         } catch (ex) {
-            j2sFormEl?.notifySubmitFailure();
-            console.error(ex); // TODO
+            this.didFormSubmissionFail = true;
+            console.error(ex);
         }
 
         this._isFormSubmitting = false;
@@ -353,7 +369,16 @@ export default class J2sCardSequence extends LightningElement {
                 secondaryActionMarkupContainers[stepIndex];
 
             if (bodyMarkupContainer) {
-                bodyMarkupContainer.innerHTML = bodyHtml || "";
+                let markup = bodyHtml;
+                if (stepIndex === 2) {
+                    // User's email is supposed to show on final step
+                    markup = `${bodyHtml}${
+                        !this.formIncomingUserInfo.email
+                            ? ""
+                            : `<span class="final-email-address">${this.formIncomingUserInfo.email}</span>`
+                    }`;
+                }
+                bodyMarkupContainer.innerHTML = markup || "";
             }
             if (secondaryActionMarkupContainer) {
                 secondaryActionMarkupContainer.innerHTML =

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

@@ -83,8 +83,10 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     }
     set recaptchaToken(value: string) {
         this._recaptchaToken = value;
-        // Treat recaptcha checkbox as a required form field even though not technically marked as such:
-        this.handleFormFieldChange({ target: { required: true } } as any);
+        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);
+        }
     }
 
     private participatingCountryCodes = ["US", "CA", "IN"];
@@ -141,6 +143,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     renderedCallback(): void {
         if (this._isInitialRender) {
             this.updateInnerHtml("span.j2s-terms", this.formMetadata.j2sTerms);
+            this._isInitialRender = false;
         }
 
         if (
@@ -271,7 +274,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
 
     private checkValidity() {
         return (
-            Boolean(this.recaptchaToken) &&
+            // Boolean(this.recaptchaToken) &&
             this.isParticipatingCountry(this.state.country) &&
             this.requiredFormFields.every(
                 (requiredFormField) =>