@salesforcedevs/dw-components 1.3.148-canary.9 → 1.3.151-canary.1

package/lwc.config.json

@@ -15,6 +15,7 @@
         "dw/eventsList",
         "dw/instrumentation",
         "dw/j2sCardSequence",
+        "dw/j2sCardSequenceStep",
         "dw/j2sForm",
         "dw/newsletterForm",
         "dw/podcastSubscription",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.148-canary.9",
+    "version": "1.3.151-canary.1",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -14,7 +14,7 @@
         "lodash.clonedeep": "^4.5.0",
         "lodash.orderby": "^4.6.0",
         "lodash.uniqby": "^4.7.0",
-        "query-string": "^7.1.1"
+        "query-string": "^7.1.3"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",

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

@@ -1,6 +1,4 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/text";
-@import "dxHelpers/card";
 
 :host {
     --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
@@ -14,40 +12,3 @@
 dx-step-sequence {
     scroll-margin-top: var(--dx-g-global-header-height);
 }
-
-dx-step-sequence-step:last-child dx-card-step::part(footer-container) {
-    background-color: var(--dx-g-indigo-vibrant-95);
-    border-radius: 8px;
-    margin: 0 30px 30px 30px;
-}
-
-[slot="secondary-action-section"] {
-    color: var(--dx-g-red-vibrant-50);
-    position: relative;
-    font-size: var(--dx-g-text-xs, 12px);
-    font-family: var(--dx-g-font-sans);
-    line-height: 18px;
-    text-align: left;
-}
-
-.body-container li {
-    line-height: var(--dx-g-text-2xl);
-}
-
-.body-container p:not(:last-child) {
-    padding-bottom: 20px;
-}
-
-.body-markup {
-    display: block;
-    padding-bottom: var(--dx-g-spacing-md);
-}
-
-.referral-email-field {
-    --dx-c-input-width: 100%;
-}
-
-.spinner-container {
-    min-height: 200px;
-    position: relative;
-}

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

@@ -2,73 +2,35 @@
     <dx-step-sequence
         animate-transitions={animateTransitions}
         communicate-step-changes="true"
+        force-initially-visible={forceInitiallyVisible}
         initial-step-index={initialStepIndex}
         onstepsequencechange={handleStepSequenceChange}
+        optimize-position-after-animation="true"
         session-storage-id={sessionStorageId}
         use-history={useHistory}
     >
         <template for:each={stepsData} for:item="stepDatum" for:index="index">
             <dx-step-sequence-step key={stepDatum.id}>
-                <dx-card-step
-                    header-icon-symbol={stepDatum.headerData.iconSymbol}
-                    header-icon-sprite={stepDatum.headerData.iconSprite}
-                    header-icon-color={stepDatum.headerData.iconColor}
-                    header-background-color={stepDatum.headerData.backgroundColor}
-                    header-text-color={stepDatum.headerData.textColor}
-                    show-step-number={stepDatum.showStepNumber}
-                    step-count={stepsData.length}
+                <dw-j2s-card-sequence-step
+                    country-options={countries}
+                    is-loading={isLoading}
+                    oncountrychange={handleCountryChange}
+                    ongetstarted={handleGetStarted}
+                    onformsubmit={handleFormSubmit}
+                    recaptcha-token={recaptchaToken}
+                    selected-country={selectedCountry}
+                    step-datum={stepDatum}
                     step-index={index}
-                    step-title={stepDatum.stepTitle}
+                    step-total-count={stepsData.length}
+                    user-info={formIncomingUserInfo}
                 >
-                    <div slot="card-body" class="body-container">
-                        <template if:true={isLoading}>
-                            <div class="spinner-container">
-                                <dx-spinner
-                                    size="large"
-                                    variant="brand"
-                                ></dx-spinner>
-                            </div>
-                        </template>
-                        <template if:false={isLoading}>
-                            <span lwc:dom="manual" class="body-markup"></span>
-                            <template if:true={stepDatum.formData}>
-                                <dw-j2s-form
-                                    id={stepDatum.formData.formId}
-                                    countries={countries}
-                                    form-metadata={stepDatum.formMetadata}
-                                    incoming-user-info={formIncomingUserInfo}
-                                    onformvaliditychange={handleFormValidityChange}
-                                    recaptcha-token={recaptchaToken}
-                                >
-                                    <div slot="form-captcha-slot">
-                                        <slot name="captcha-slot"></slot>
-                                    </div>
-                                </dw-j2s-form>
-                            </template>
-                        </template>
+                    <div
+                        if:true={stepDatum.formData}
+                        slot="card-step-captcha-slot"
+                    >
+                        <slot name="captcha-slot"></slot>
                     </div>
-                    <div slot="secondary-action-section">
-                        <span
-                            lwc:dom="manual"
-                            class="secondary-action-markup"
-                        ></span>
-                    </div>
-                    <div slot="primary-action-section">
-                        <dx-button
-                            class="primary-action"
-                            disabled={isJ2sFormInvalid}
-                            href={stepDatum.primaryAction.link}
-                            icon-sprite={stepDatum.primaryAction.iconSprite}
-                            icon-symbol={stepDatum.primaryAction.iconSymbol}
-                            loading={isLoading}
-                            onclick={primaryActionHandler}
-                            size="large"
-                            variant={primaryActionVariant}
-                        >
-                            {stepDatum.primaryAction.text}
-                        </dx-button>
-                    </div>
-                </dx-card-step>
+                </dw-j2s-card-sequence-step>
             </dx-step-sequence-step>
         </template>
     </dx-step-sequence>

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

@@ -1,11 +1,16 @@
 import { api, LightningElement } from "lwc";
 import StepSequence from "dx/stepSequence";
 import { getListWithUuids } from "dxUtils/list";
-import { track } from "dxUtils/analytics";
 import { toJson } from "dxUtils/normalizers";
+import J2sCardSequenceStep from "dw/j2sCardSequenceStep";
 
 export type StepDatum = {
-    bodyHtml?: string;
+    bodyHtml?:
+        | string
+        | {
+              default: string;
+              [countryCode: string]: string;
+          };
     formData?: {
         countriesWithReferralInput?: string[];
         countriesWithRequiredJobRole?: string[];
@@ -27,8 +32,19 @@ export type StepDatum = {
     primaryAction: {
         iconSprite?: string;
         iconSymbol?: string;
-        link?: string;
-        text: string;
+        link?:
+            | string
+            | {
+                  default: string;
+                  [countryCode: string]: string;
+              };
+        linkTarget?: string;
+        text:
+            | string
+            | {
+                  default: string;
+                  [countryCode: string]: string;
+              };
         variant?: string;
     };
     secondaryActionHtml?: string;
@@ -36,18 +52,26 @@ export type StepDatum = {
     stepTitle: string;
 };
 
-function isNoAnimationCookieSet() {
-    return document.cookie
-        .split(";")
-        .some((ck) => ck.trim() === "no_j2s_animation=true");
-}
+// 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;
     _isFormSubmitting = false;
-    _isJ2sFormInvalid = false;
     _isTbidLoading = false;
+    _recaptchaResetTimeoutId: number | null = null;
     _stepsData: StepDatum[] = [];
     @api animateTransitions = false;
     @api drmDomain: string = "https://drm.my.salesforce-sites.com";
@@ -62,35 +86,30 @@ export default class J2sCardSequence extends LightningElement {
     }
     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) => {
-                const normalizedStepDatum = {
-                    ...stepDatum,
-                    headerData: stepDatum.headerData || {},
-                    primaryAction: {
-                        ...stepDatum.primaryAction,
-                        variant: stepDatum.primaryAction.variant || "primary",
-                        iconSprite:
-                            stepDatum.primaryAction.iconSprite || "general",
-                        iconSymbol:
-                            stepDatum.primaryAction.iconSymbol || "arrow-right"
-                    }
-                };
-
-                if (normalizedStepDatum.formData) {
-                    (normalizedStepDatum as any).formMetadata = JSON.stringify(
-                        normalizedStepDatum.formData
-                    );
+        const valueWithUuids = getListWithUuids<StepDatum>(toJson(value));
+        this._stepsData = valueWithUuids.map((stepDatum) => {
+            const normalizedStepDatum = {
+                ...stepDatum,
+                headerData: stepDatum.headerData || {},
+                primaryAction: {
+                    ...stepDatum.primaryAction,
+                    variant: stepDatum.primaryAction.variant || "primary",
+                    iconSprite: stepDatum.primaryAction.iconSprite || "general",
+                    iconSymbol:
+                        stepDatum.primaryAction.iconSymbol || "arrow-right"
                 }
+            };
 
-                return normalizedStepDatum;
-            }
-        );
+            return normalizedStepDatum;
+        });
     }
 
-    private countries = "[]";
+    private countries: any[] = [];
     private currentSequenceStep = 0;
+    private forceInitiallyVisible = false;
+    private formSubmissionFailureState: Partial<DrmFormData> | null = null;
     private recaptchaToken = "";
+    private selectedCountry = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
 
@@ -104,34 +123,25 @@ export default class J2sCardSequence extends LightningElement {
         return Boolean(this.tbidUserInfo);
     }
 
-    private get isJ2sFormInvalid() {
-        return this.currentSequenceStep === 1 ? this._isJ2sFormInvalid : false;
-    }
-    private set isJ2sFormInvalid(isFormInvalid: boolean) {
-        this._isJ2sFormInvalid = isFormInvalid;
-    }
-
-    private get primaryActionVariant() {
-        if (this.currentSequenceStep === 1 && this.isJ2sFormInvalid) {
-            return "custom"; // override for disabled button styling
-        }
-        return this.stepsData[this.currentSequenceStep || 0].primaryAction
-            .variant;
-    }
-
     private get formIncomingUserInfo() {
         if (!this.tbidUserInfo) {
-            return "{}";
+            return {} as DrmFormData;
         }
 
-        return JSON.stringify({
-            firstName: this.tbidUserInfo.given_name,
-            lastName: this.tbidUserInfo.family_name,
-            email: this.tbidUserInfo.email,
-            jobRole: this.tbidUserInfo.custom_attributes?.Role,
-            companyName: this.tbidUserInfo.custom_attributes?.CompanyName,
-            country: this.tbidUserInfo.custom_attributes?.Country
-        });
+        return {
+            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
+            ),
+            Company__c: decodeURIComponent(
+                this.tbidUserInfo.custom_attributes?.CompanyName
+            ),
+            MailingCountry: decodeURIComponent(
+                this.tbidUserInfo.custom_attributes?.Country
+            )
+        } as DrmFormData;
     }
 
     private get initialStepIndex() {
@@ -161,11 +171,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,74 +186,101 @@ 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;
+
+        try {
+            const isLoggingIn = sessionStorage.getItem(
+                `${this.sessionStorageId}__isLoginRedirect`
+            );
+            if (isLoggingIn) {
+                this.forceInitiallyVisible = true;
+                sessionStorage.removeItem(
+                    `${this.sessionStorageId}__isLoginRedirect`
+                );
+            }
+        } catch (ex) {
+            // noop
         }
     }
 
     renderedCallback() {
-        if (this.isLoading) {
-            return;
+        if (!this.isLoading) {
+            (
+                this.template.querySelector(
+                    "dx-step-sequence"
+                ) as unknown as StepSequence
+            )?.remeasureSteps();
         }
 
-        if (!this._didRenderStaticInnerHtml) {
-            this.updateStaticInnerHtml();
-            this._didRenderStaticInnerHtml = true;
+        if (
+            this.formSubmissionFailureState &&
+            this.stepsData[this.currentSequenceStep].formData
+        ) {
+            const j2sCardStep = this.template.querySelectorAll(
+                "dw-j2s-card-sequence-step"
+            ) as unknown as J2sCardSequenceStep[];
+            j2sCardStep[this.currentSequenceStep]?.notifyFormSubmitFailure(
+                this.formSubmissionFailureState
+            );
+            this.formSubmissionFailureState = null;
         }
     }
 
-    handleFormValidityChange({ detail }: CustomEvent) {
-        this.isJ2sFormInvalid = !detail.isValid;
+    handleCountryChange({ detail }: CustomEvent) {
+        this.selectedCountry = detail;
     }
 
     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.resetRecaptcha(),
+                1000 * 30 /* 30 seconds */
+            );
+        }
     }
 
-    handleGetStarted(evt: Event) {
+    handleGetStarted() {
         // If the user is not yet logged in, we need to prevent moving immediately to the next
         // step, but set storage up so that they are on the second step when they return to the
         // site in a logged-in state; then, we need to get them to log in.
         if (!this.isLoggedIn) {
-            evt.preventDefault();
             this.initialStepIndex = 1;
             this._isTbidLoading = true;
-            // @ts-ignore: call out to the tbid-controller on DSC
-            window.__startTbidLogin();
+            sessionStorage.setItem(
+                `${this.sessionStorageId}__isLoginRedirect`,
+                "1" /* value doesn't matter */
+            );
+            (window as any).__startTbidLogin?.(); // call out to DSC tbid controller
+        } else {
+            this.jumpToStepIndex(1);
         }
     }
 
-    async handleFormSubmit(evt: Event) {
-        if (!this.formHandler || this.isJ2sFormInvalid || !this.isLoggedIn) {
+    async handleFormSubmit({ detail: formData }: CustomEvent<DrmFormData>) {
+        if (!this.formHandler || !this.isLoggedIn) {
             return;
         }
 
-        evt.preventDefault(); // don't proceed automatically to next step
         this._isFormSubmitting = true;
 
         try {
-            const formData = (this.template.querySelector("dw-j2s-form") as any)
-                ?.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;
-            }
-
-            console.log("submitting", JSON.stringify(formData, null, 2));
             const res = await fetch(this.formHandler, {
                 method: "POST",
                 headers: {
-                    "Captcha-Response": this.recaptchaToken,
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
+                    "Captcha-Response": this.recaptchaToken
                 },
                 body: JSON.stringify({
                     ...formData,
-                    "Content-Type": "application/json",
                     handlerName: "J2S Registration Page",
                     TBID__c: this.tbidUserInfo.user_id
                 })
@@ -249,46 +288,29 @@ export default class J2sCardSequence extends LightningElement {
 
             if (res.ok) {
                 const resData = await res.json();
-                if (resData.status === "success") {
-                    this.jumpToStepIndex(2);
+                const resOutput = resData.handlePostRequestOutput || resData;
+                if (resOutput?.status === "success") {
+                    this.jumpToStepIndex(2, false);
+                    this.initialStepIndex = 0; // don't save final step in storage; rather, reset the starting step
+                    this.resetRecaptcha();
                 } else {
                     throw new Error(
-                        `Form submission failed. (status: ${resData.status}, message: ${resData.errorMessage})`
+                        `Form submission failed. (status: ${resOutput.status}, message: ${resOutput.errorMessage})`
                     );
                 }
+            } else {
+                throw new Error(
+                    `Form submission failed. Non-ok response received from DRM.`
+                );
             }
         } catch (ex) {
-            console.error(ex); // TODO
+            this.formSubmissionFailureState = formData;
+            console.error(ex);
         }
 
         this._isFormSubmitting = false;
     }
 
-    primaryActionHandler(evt: Event) {
-        const target = evt.target as HTMLButtonElement;
-
-        if (!target || target.disabled) {
-            evt.preventDefault();
-            return;
-        }
-
-        track(target, "custEv_ctaButtonClick", {
-            click_text: target.textContent,
-            element_title: this.stepsData[this.currentSequenceStep].stepTitle,
-            click_url:
-                this.stepsData[this.currentSequenceStep].primaryAction.link ||
-                "",
-            element_type: "button",
-            content_category: "cta"
-        });
-
-        if (!this.currentSequenceStep) {
-            this.handleGetStarted(evt);
-        } else if (this.currentSequenceStep === 1) {
-            this.handleFormSubmit(evt);
-        }
-    }
-
     private resetCustomButtonColors() {
         let bgColor;
         let textColor;
@@ -315,42 +337,28 @@ export default class J2sCardSequence extends LightningElement {
         );
     }
 
-    private jumpToStepIndex(stepIndex: number) {
-        this.initialStepIndex = stepIndex; // update sessionStorage value
-        ((this.template.querySelector(
-            "dx-step-sequence"
-        ) as unknown) as StepSequence)?.jumpToStep(stepIndex);
+    private resetRecaptcha() {
+        clearTimeout(this._recaptchaResetTimeoutId as number);
+        this._recaptchaResetTimeoutId = null;
+        this.recaptchaToken = "";
+        (window as any).grecaptcha.reset();
     }
 
-    // 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 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);
     }
 
     private async getCountryList() {
         this._isDrmLoading = true;
 
-        const errorMsg = "Error while getting county list";
+        const errorMsg = "Error while getting country list";
         try {
             const res = await fetch(
                 `${this.drmDomain}/utilities/services/apexrest/countries`
@@ -358,8 +366,7 @@ export default class J2sCardSequence extends LightningElement {
             if (!res.ok) {
                 throw new Error(errorMsg);
             }
-            const data = await res.json();
-            this.countries = JSON.stringify(data);
+            this.countries = await res.json();
         } catch (error) {
             console.error(error);
             if (this.initialStepIndex > 0) {
@@ -379,6 +386,7 @@ export default class J2sCardSequence extends LightningElement {
             const res = await fetch(`${this.tbidApiBaseUrl}/userinfo`);
             if (res.ok) {
                 this.tbidUserInfo = await res.json();
+                this.selectedCountry = this.formIncomingUserInfo.MailingCountry;
             }
         } catch (ex) {
             // noop; nothing to do here