@salesforcedevs/dw-components 1.3.148-canary.0 → 1.3.148-canary.1

package/package.json

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

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

@@ -52,6 +52,7 @@
                         <dx-button
                             class="primary-action"
                             disabled={isJ2sFormInvalid}
+                            href={stepDatum.primaryAction.link}
                             icon-sprite={stepDatum.primaryAction.iconSprite}
                             icon-symbol={stepDatum.primaryAction.iconSymbol}
                             loading={isLoading}

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

@@ -4,6 +4,12 @@ import { getListWithUuids } from "dxUtils/list";
 import { toJson } from "dxUtils/normalizers";
 import Button from "dx/button";
 
+function isNoAnimationCookieSet() {
+    return document.cookie
+        .split(";")
+        .some((ck) => ck.trim() === "no_j2s_animation=true");
+}
+
 export type StepDatum = {
     bodyHtml?: string;
     formData?: {
@@ -25,10 +31,11 @@ export type StepDatum = {
         textColor?: string;
     };
     primaryAction: {
-        text: string;
-        variant?: string;
         iconSprite?: string;
         iconSymbol?: string;
+        link?: string;
+        text: string;
+        variant?: string;
     };
     secondaryActionHtml?: string;
     showStepNumber?: boolean;
@@ -36,6 +43,7 @@ export type StepDatum = {
 };
 
 export default class J2sCardSequence extends LightningElement {
+    _didRenderStaticInnerHtml = false;
     _isDrmLoading = false;
     _isJ2sFormInvalid = false;
     _isTbidLoading = false;
@@ -50,9 +58,9 @@ export default class J2sCardSequence extends LightningElement {
         return this._stepsData;
     }
     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) => {
-                // small bit of normalization for cleaner HTML templates with non-required props, etc.
                 const normalizedStepDatum = {
                     ...stepDatum,
                     headerData: stepDatum.headerData || {},
@@ -150,6 +158,10 @@ export default class J2sCardSequence extends LightningElement {
         // This has to be defined here since it depends on a variable that depends on sessionStorage.
         this.currentSequenceStep = this.initialStepIndex;
         this.resetCustomButtonColors();
+        if (isNoAnimationCookieSet()) {
+            /* eslint-disable-next-line @lwc/lwc/no-api-reassignments */
+            this.animateTransitions = false;
+        }
     }
 
     renderedCallback() {
@@ -157,21 +169,9 @@ export default class J2sCardSequence extends LightningElement {
             return;
         }
 
-        const { bodyHtml, secondaryActionHtml } =
-            this.stepsData[this.currentSequenceStep];
-        const bodyMarkupContainer =
-            this.template.querySelectorAll("span.body-markup")[
-                this.currentSequenceStep
-            ];
-        const secondaryActionMarkupContainer = this.template.querySelectorAll(
-            "span.secondary-action-markup"
-        )[this.currentSequenceStep];
-        if (bodyMarkupContainer) {
-            bodyMarkupContainer.innerHTML = bodyHtml || "";
-        }
-        if (secondaryActionMarkupContainer) {
-            secondaryActionMarkupContainer.innerHTML =
-                secondaryActionHtml || "";
+        if (!this._didRenderStaticInnerHtml) {
+            this.updateStaticInnerHtml();
+            this._didRenderStaticInnerHtml = true;
         }
     }
 
@@ -182,6 +182,7 @@ export default class J2sCardSequence extends LightningElement {
         if (!this.isLoggedIn) {
             evt.preventDefault();
             this.initialStepIndex = 1;
+            this._isTbidLoading = true;
             // @ts-ignore: call out to the tbid-controller on DSC
             window.__startTbidLogin();
         }
@@ -206,8 +207,6 @@ export default class J2sCardSequence extends LightningElement {
             this.handleGetStarted(evt);
         } else if (this.currentSequenceStep === 2) {
             // TODO: send data to DRM
-        } else if (this.currentSequenceStep === 3) {
-            // TODO: Join Slack
         }
     }
 
@@ -237,6 +236,39 @@ export default class J2sCardSequence extends LightningElement {
         );
     }
 
+    private jumpToStepOne() {
+        this.initialStepIndex = 0; // update sessionStorage value
+        (
+            this.template.querySelector(
+                "dx-step-sequence"
+            ) as unknown as StepSequence
+        )?.jumpToStep(0);
+    }
+
+    // HTML is received via config from DSC and should be static after initial render.
+    private updateStaticInnerHtml() {
+        const bodyMarkupContainers =
+            this.template.querySelectorAll("span.body-markup");
+        const secondaryActionMarkupContainers = this.template.querySelectorAll(
+            "span.secondary-action-markup"
+        );
+
+        this.stepsData.forEach((step, stepIndex) => {
+            const { bodyHtml, secondaryActionHtml } = step;
+            const bodyMarkupContainer = bodyMarkupContainers[stepIndex];
+            const secondaryActionMarkupContainer =
+                secondaryActionMarkupContainers[stepIndex];
+
+            if (bodyMarkupContainer) {
+                bodyMarkupContainer.innerHTML = bodyHtml || "";
+            }
+            if (secondaryActionMarkupContainer) {
+                secondaryActionMarkupContainer.innerHTML =
+                    secondaryActionHtml || "";
+            }
+        });
+    }
+
     private async getCountryList() {
         this._isDrmLoading = true;
 
@@ -252,6 +284,11 @@ export default class J2sCardSequence extends LightningElement {
             this.countries = JSON.stringify(data);
         } catch (error) {
             console.error(error);
+            if (this.initialStepIndex > 0) {
+                // Page loaded on a step higher than the first, but we can't get data for the form;
+                // send user back to the start for now.
+                this.jumpToStepOne();
+            }
         }
 
         this._isDrmLoading = false;
@@ -272,12 +309,7 @@ export default class J2sCardSequence extends LightningElement {
         if (!this.tbidUserInfo && this.initialStepIndex > 0) {
             // login failed and the user was previously beyond the start step; need to send them
             // back to the start:
-            this.initialStepIndex = 0;
-            (
-                this.template.querySelector(
-                    "dx-step-sequence"
-                ) as unknown as StepSequence
-            )?.jumpToStep(0);
+            this.jumpToStepOne();
         }
 
         this._isTbidLoading = false;

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

@@ -141,7 +141,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
             if (this.state.learnMore) {
                 this.updateInnerHtml(
                     "span.legal-terms-learn-more",
-                    this.state.learnMore
+                    `&nbsp;${this.state.learnMore}`
                 );
             } else {
                 this.updateInnerHtml("span.legal-terms-learn-more", "");
@@ -185,7 +185,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     }
 
     handleRequiredFieldUpdate() {
-        const isFormNowValid = this.checkValidity(this.state.country);
+        const isFormNowValid = this.checkValidity();
         if (this.state.isFormValid !== isFormNowValid) {
             this.setState({
                 isFormValid: isFormNowValid
@@ -196,14 +196,22 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     handleCountryChange({ detail }: CustomEvent) {
         const { value } = detail;
         const countryData = this._countriesLookup[value];
+
         this.setState({
             country: value,
-            isFormValid: this.checkValidity(value),
             learnMore: countryData.learnMore,
             legalText: countryData.legalText,
             marketingText: countryData.marketingText,
             showLegalCheckbox: countryData.showLegalCheckbox
         });
+
+        // Because updating the country can update the required fields, we need to re-set form
+        // validity after render
+        requestAnimationFrame(() =>
+            this.setState({
+                isFormValid: this.checkValidity()
+            })
+        );
     }
 
     handleLearnMore() {
@@ -212,9 +220,9 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
             ?.classList.toggle("hidden");
     }
 
-    private checkValidity(country: string) {
+    private checkValidity() {
         return (
-            this.isParticipatingCountry(country) &&
+            this.isParticipatingCountry(this.state.country) &&
             this.requiredFormFields.every(
                 (requiredFormField) =>
                     // @ts-ignore