@salesforcedevs/dw-components 1.3.148-canary.12 → 1.3.148-canary.14

package/package.json

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

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

@@ -36,18 +36,13 @@ export type StepDatum = {
     stepTitle: string;
 };
 
-function isNoAnimationCookieSet() {
-    return document.cookie
-        .split(";")
-        .some((ck) => ck.trim() === "no_j2s_animation=true");
-}
-
 export default class J2sCardSequence extends LightningElement {
     _didRenderStaticInnerHtml = false;
     _isDrmLoading = false;
     _isFormSubmitting = false;
     _isJ2sFormInvalid = false;
     _isTbidLoading = false;
+    _recaptchaResetTimeoutId: number | null = null;
     _stepsData: StepDatum[] = [];
     @api animateTransitions = false;
     @api drmDomain: string = "https://drm.my.salesforce-sites.com";
@@ -161,11 +156,13 @@ export default class J2sCardSequence extends LightningElement {
     @api
     recaptchaCallback(responseToken: string) {
         this.recaptchaToken = responseToken;
+        clearTimeout(this._recaptchaResetTimeoutId as number);
     }
 
     @api
     recaptchaExpiredCallback() {
         this.recaptchaToken = "";
+        clearTimeout(this._recaptchaResetTimeoutId as number);
     }
 
     connectedCallback() {
@@ -174,13 +171,14 @@ 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() {
+        if (this.isLoading) {
+            this._didRenderStaticInnerHtml = false; // only when `this.isLoading` is true will static HTML need to be re-rendered, since the content will have been replaced by the spinner
+            return;
+        }
+
         if (!this._didRenderStaticInnerHtml) {
             this.updateStaticInnerHtml();
             this._didRenderStaticInnerHtml = true;
@@ -194,6 +192,21 @@ export default class J2sCardSequence extends LightningElement {
     handleStepSequenceChange({ detail }: CustomEvent) {
         this.currentSequenceStep = detail.stepIndex;
         this.resetCustomButtonColors();
+
+        if (
+            this.currentSequenceStep !== 1 &&
+            this.recaptchaToken &&
+            this._recaptchaResetTimeoutId === null
+        ) {
+            // If the recaptcha element expires on its own while you are not on the 2nd (form) step, it messes with the
+            // page's layout (basically breaks it). So, we need to reset it _before_ expiration if you leave that step.
+            // We do it with a timeout so that the token is not immediately wiped if the user goes back and forth a bit.
+            this._recaptchaResetTimeoutId = window.setTimeout(() => {
+                this._recaptchaResetTimeoutId = null;
+                this.recaptchaToken = "";
+                (window as any).grecaptcha.reset();
+            }, 1000 * 30 /* 30 seconds */);
+        }
     }
 
     handleGetStarted(evt: Event) {
@@ -204,8 +217,7 @@ export default class J2sCardSequence extends LightningElement {
             evt.preventDefault();
             this.initialStepIndex = 1;
             this._isTbidLoading = true;
-            // @ts-ignore: call out to the tbid-controller on DSC
-            window.__startTbidLogin();
+            (window as any).__startTbidLogin?.(); // call out to DSC tbid controller
         }
     }
 
@@ -244,7 +256,8 @@ export default class J2sCardSequence extends LightningElement {
                 const resData = await res.json();
                 const resOutput = resData.handlePostRequestOutput || resData;
                 if (resOutput?.status === "success") {
-                    this.jumpToStepIndex(2);
+                    this.jumpToStepIndex(2, false);
+                    this.initialStepIndex = 0; // don't save final step in storage; rather, reset the starting step
                 } else {
                     throw new Error(
                         `Form submission failed. (status: ${resOutput.status}, message: ${resOutput.errorMessage})`
@@ -309,14 +322,15 @@ export default class J2sCardSequence extends LightningElement {
         );
     }
 
-    private jumpToStepIndex(stepIndex: number) {
-        this.initialStepIndex = stepIndex; // update sessionStorage value
+    private jumpToStepIndex(stepIndex: number, andStoreIndex = true) {
+        if (andStoreIndex) {
+            this.initialStepIndex = stepIndex; // update sessionStorage value
+        }
         ((this.template.querySelector(
             "dx-step-sequence"
         ) as unknown) as StepSequence)?.jumpToStep(stepIndex);
     }
 
-    // HTML is received via config from DSC and should be static after initial render.
     private updateStaticInnerHtml() {
         const bodyMarkupContainers = this.template.querySelectorAll(
             "span.body-markup"