@salesforcedevs/dw-components 1.3.150 → 1.3.151-canary.1

package/src/modules/dw/j2sCardSequenceStep/j2sCardSequenceStep.ts

@@ -0,0 +1,152 @@
+import { api, LightningElement } from "lwc";
+import { DrmFormData, StepDatum } from "dw/j2sCardSequence";
+import { track } from "dxUtils/analytics";
+import J2sForm from "dw/j2sForm";
+
+export default class J2sCardSequenceStep extends LightningElement {
+    @api countryOptions: any[] = [];
+    @api isLoading = false;
+    @api recaptchaToken = "";
+    @api selectedCountry = "";
+    @api stepDatum!: StepDatum;
+    @api stepIndex = 0;
+    @api stepTotalCount = 0;
+    @api userInfo: any = {};
+
+    @api
+    public notifyFormSubmitFailure(formFailureData: Partial<DrmFormData>) {
+        (
+            this.template.querySelector("dw-j2s-form") as unknown as J2sForm
+        )?.notifySubmitFailure(formFailureData);
+    }
+
+    private _isJ2sFormInvalid = false;
+
+    private get stepClassName() {
+        return this.stepIndex === 2 && this.selectedCountry === "IN"
+            ? "final-card-with-action"
+            : "";
+    }
+
+    private get isJ2sFormInvalid() {
+        return this.stepIndex === 1 && this._isJ2sFormInvalid;
+    }
+    private set isJ2sFormInvalid(value: boolean) {
+        this._isJ2sFormInvalid = value;
+    }
+
+    private get primaryActionLink() {
+        const { link } = this.stepDatum.primaryAction;
+        return typeof link === "string"
+            ? link
+            : link?.[this.selectedCountry] || link?.default;
+    }
+
+    private get primaryActionText() {
+        const { text } = this.stepDatum.primaryAction;
+        return typeof text === "string"
+            ? text
+            : text[this.selectedCountry] || text.default;
+    }
+
+    private get primaryActionVariant() {
+        if (this.stepIndex === 1 && this.isJ2sFormInvalid) {
+            return "custom"; // override for disabled button styling
+        }
+        return this.stepDatum.primaryAction.variant;
+    }
+
+    private get primaryActionLinkTarget() {
+        return this.stepDatum.primaryAction.linkTarget || "_blank";
+    }
+
+    private get showPrimaryAction() {
+        return this.stepIndex !== 2 || this.selectedCountry === "IN";
+    }
+
+    private get showSecondaryAction() {
+        return this.showPrimaryAction; // same requirement as above for now
+    }
+
+    renderedCallback() {
+        this.updateStaticInnerHtml();
+    }
+
+    handleFormValidityChange({ detail }: CustomEvent) {
+        this.isJ2sFormInvalid = !detail.isValid;
+    }
+
+    handlePrimaryAction(evt: Event) {
+        this.track(evt);
+
+        if (this.stepIndex === 0) {
+            this.dispatchEvent(new CustomEvent("getstarted"));
+        } else if (this.stepIndex === 1 && !this.isJ2sFormInvalid) {
+            const j2sFormEl = this.template.querySelector(
+                "dw-j2s-form"
+            ) 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;
+            }
+            if (typeof formData.Privacy_Statement__c !== "boolean") {
+                formData.Privacy_Statement__c = true;
+            }
+
+            this.dispatchEvent(
+                new CustomEvent("formsubmit", {
+                    detail: formData
+                })
+            );
+        }
+    }
+
+    private updateStaticInnerHtml() {
+        const { bodyHtml, secondaryActionHtml } = this.stepDatum;
+        const bodyMarkupContainer =
+            this.template.querySelector("span.body-markup");
+        const secondaryActionMarkupContainer = this.template.querySelector(
+            "span.secondary-action-markup"
+        );
+
+        if (bodyMarkupContainer) {
+            let markup =
+                typeof bodyHtml === "string"
+                    ? bodyHtml
+                    : bodyHtml?.[this.selectedCountry] || bodyHtml?.default;
+
+            if (this.stepIndex === 2) {
+                // User's email is supposed to show on final step
+                markup = `${markup}${
+                    !this.userInfo.Email
+                        ? ""
+                        : `<span class="final-email-address">${this.userInfo.Email}</span>`
+                }`;
+            }
+
+            bodyMarkupContainer.innerHTML = markup || "";
+        }
+
+        if (secondaryActionMarkupContainer) {
+            // new special exception on step 2 to only show secondary action for IN
+            secondaryActionMarkupContainer.innerHTML =
+                secondaryActionHtml && this.showSecondaryAction
+                    ? secondaryActionHtml
+                    : "";
+        }
+    }
+
+    private track(evt: Event) {
+        const target = evt.target as HTMLButtonElement;
+
+        track(target, "custEv_ctaButtonClick", {
+            click_text: target.textContent,
+            element_title: this.stepDatum.stepTitle,
+            click_url: this.stepDatum.primaryAction.link || "",
+            element_type: "button",
+            content_category: "cta"
+        });
+    }
+}

package/src/modules/dw/j2sForm/j2sForm.css

@@ -0,0 +1,56 @@
+.hidden {
+    display: none;
+}
+
+.form-row {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.form-row > * {
+    --dx-c-input-width: 100%;
+
+    font-family: var(--dx-g-font-sans);
+    width: calc(50% - 20px);
+}
+
+.form-row > :only-child {
+    max-width: 100%;
+    width: 100%;
+}
+
+.form-row .terms {
+    --dx-c-checkbox-text-line-height: var(--dx-g-text-lg);
+    --dx-c-checkbox-font-size: var(--dx-g-text-sm);
+
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-c-checkbox-font-size);
+    font-weight: var(--dx-g-font-normal);
+}
+
+.form-row .legal-terms-learn-more:not(.hidden) {
+    display: block;
+    padding-top: var(--dx-g-spacing-md);
+}
+
+.form-row .legal-terms.no-checkbox {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    font-weight: var(--dx-g-font-normal);
+    margin-left: 28px;
+}
+
+.form-terms-container {
+    padding-top: var(--dx-g-spacing-sm);
+}
+
+.form-captcha-slot {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+dx-input[disabled] {
+    --dx-c-input-background: revert;
+}

package/src/modules/dw/j2sForm/j2sForm.html

@@ -0,0 +1,162 @@
+<template>
+    <!-- For the names of the form fields, see: https://salesforce.quip.com/daInAFETbPGm -->
+    <form class="j2s-form">
+        <div class="form-row">
+            <dx-input
+                class="first-name-field"
+                label="First Name"
+                missing-error-message="Enter your first name"
+                name="FirstName"
+                placeholder="Your first name"
+                required
+                validity-on-blur
+                onchange={handleFormFieldChange}
+                value={state.FirstName}
+            ></dx-input>
+            <dx-input
+                class="last-name-field"
+                label="Last Name"
+                missing-error-message="Enter your last name"
+                name="LastName"
+                placeholder="Your last name"
+                required
+                validity-on-blur
+                onchange={handleFormFieldChange}
+                value={state.LastName}
+            ></dx-input>
+        </div>
+        <div class="form-row">
+            <dx-input
+                class="company-name-field"
+                label="Company Name"
+                missing-error-message="Enter your company name"
+                name="Company__c"
+                placeholder="Your company name"
+                required
+                validity-on-blur
+                value={state.Company__c}
+                onchange={handleFormFieldChange}
+            ></dx-input>
+            <dx-select
+                class="job-role-field"
+                label="Job Role"
+                message-when-value-missing="Select your job role"
+                name="DRM_Role__c"
+                options={jobRoles}
+                placeholder="Select Job Role"
+                required
+                value={state.DRM_Role__c}
+                onchange={handleFormFieldChange}
+            ></dx-select>
+        </div>
+        <div class="form-row">
+            <dx-input
+                name="Email"
+                type="email"
+                placeholder="Your email address"
+                label="Email"
+                missing-error-message="Enter your email address"
+                validity-on-blur="true"
+                disabled
+                readonly="true"
+                required
+                value={state.Email}
+            ></dx-input>
+            <dx-select
+                label="Country/Region"
+                message-when-value-missing="Select your country/region"
+                name="MailingCountry"
+                options={countries}
+                placeholder="Select Country/Region"
+                required
+                value={state.MailingCountry}
+                onchange={handleFormFieldChange}
+            ></dx-select>
+        </div>
+        <div class="form-row" if:true={isCountryWithReferralInput}>
+            <dx-input
+                name="Referral_Email__c"
+                class="referral-email-field full-width"
+                label="If anyone has referred you, please share their Email ID below, with their consent."
+                validity-on-blur="true"
+                type="email"
+                value={state.Referral_Email__c}
+                onchange={handleFormFieldChange}
+            ></dx-input>
+        </div>
+        <div class="form-row" if:true={isNotParticipatingCountry}>
+            <dx-alert
+                alert-info={notAvailableAlertInfo}
+                class="full-width"
+                type="danger"
+                variant="accented"
+            ></dx-alert>
+        </div>
+        <div class="form-row" if:true={showSubmitFailureAlert}>
+            <dx-alert
+                alert-info={formSubmitFailureAlertInfo}
+                class="full-width"
+                type="danger"
+                variant="accented"
+            ></dx-alert>
+        </div>
+        <div class="form-terms-container">
+            <div class="form-row" if:true={state.showMarketingText}>
+                <dx-checkbox
+                    value="marketing-terms"
+                    name="Opt_In__c"
+                    required
+                    class="terms"
+                    onchange={handleFormFieldChange}
+                    disabled={isNotParticipatingCountry}
+                >
+                    <span lwc:dom="manual" class="marketing-terms"></span>
+                </dx-checkbox>
+            </div>
+            <div class="form-row">
+                <dx-checkbox
+                    value="j2s-terms"
+                    name="j2s_terms"
+                    required
+                    class="terms"
+                    onchange={handleFormFieldChange}
+                    disabled={isNotParticipatingCountry}
+                >
+                    <span lwc:dom="manual" class="j2s-terms"></span>
+                </dx-checkbox>
+            </div>
+            <div class="form-row">
+                <dx-checkbox
+                    if:true={state.showLegalCheckbox}
+                    value="legal-terms"
+                    name="Privacy_Statement__c"
+                    required
+                    class="terms"
+                    onchange={handleFormFieldChange}
+                    disabled={isNotParticipatingCountry}
+                >
+                    <span lwc:dom="manual" class="legal-terms"></span>
+                    <template if:true={state.learnMore}>
+                        &nbsp;
+                        <dx-button
+                            variant="inline-inherit"
+                            onclick={handleLearnMore}
+                        >
+                            Learn more.
+                        </dx-button>
+                        <span
+                            lwc:dom="manual"
+                            class="legal-terms-learn-more hidden"
+                        ></span>
+                    </template>
+                </dx-checkbox>
+                <span
+                    if:false={state.showLegalCheckbox}
+                    lwc:dom="manual"
+                    class="legal-terms no-checkbox"
+                ></span>
+            </div>
+            <slot class="form-captcha-slot" name="form-captcha-slot"></slot>
+        </div>
+    </form>
+</template>

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

@@ -0,0 +1,319 @@
+import { toJson } from "dxUtils/normalizers";
+import { api } from "lwc";
+import debounce from "debounce";
+import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
+import { DrmFormData } from "dw/j2sCardSequence";
+
+// Hard-coding for now because we can't get information about an endpoint for this
+const tbidValidRoles = [
+    "Developer",
+    "Administrator",
+    "Architect",
+    "Sales Representative / Manager",
+    "Marketer",
+    "Service Agent / Supervisor",
+    "Data Analyst",
+    "Consultant",
+    "Business Operations Manager",
+    "Designer",
+    "Educator",
+    "Student",
+    "Executive",
+    "Product Manager"
+];
+
+export type J2sFormState = DrmFormData & {
+    legalText: string;
+    marketingText: string;
+    learnMore: string;
+    showLegalCheckbox: boolean;
+    showMarketingText: boolean;
+    isFormValid: boolean;
+};
+
+export default class J2sForm extends LightningElementWithState<J2sFormState> {
+    private _countriesJson = "";
+    private _countriesLookup: any = {}; // TODO typings
+    private _didSetFormId = false;
+    private _isInitialRender = true;
+    private _recaptchaToken = "";
+
+    @api formMetadata: any = {};
+    @api id = "";
+    @api incomingUserInfo = {} as DrmFormData;
+    @api referralText = "";
+
+    @api
+    get countries() {
+        return this._countriesJson || "[]";
+    }
+    set countries(value: string) {
+        this._countriesJson = value;
+
+        // Store a lookup table of country data by value so that we don't have to loop all the time
+        const countries = toJson(value);
+        const countriesLookup: any = {};
+        countries.forEach((country: any) => {
+            countriesLookup[country.value] = country;
+        });
+        this._countriesLookup = countriesLookup;
+    }
+
+    @api
+    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
+        const formData: any = {};
+        this.template
+            .querySelectorAll("form [name]")
+            .forEach((namedElement) => {
+                const typedElement = namedElement as HTMLInputElement;
+                formData[typedElement.name] =
+                    typeof typedElement.checked === "boolean"
+                        ? typedElement.checked
+                        : typedElement.value;
+            });
+        return formData;
+    }
+
+    @api
+    get recaptchaToken() {
+        return this._recaptchaToken;
+    }
+    set recaptchaToken(value: string) {
+        this._recaptchaToken = value;
+        if (!this._isInitialRender) {
+            // Treat recaptcha checkbox as a required form field even though not technically marked as such:
+            this.setState({
+                isFormValid: this.checkValidity()
+            });
+        }
+    }
+
+    private participatingCountryCodes = ["US", "CA", "IN"];
+    private countriesWithReferralInput = ["IN"];
+    private requiredFormFields: HTMLElement[] = [];
+    private showSubmitFailureAlert = false;
+
+    get isNotParticipatingCountry() {
+        return !this.isParticipatingCountry(this.state.MailingCountry);
+    }
+
+    get isCountryWithReferralInput() {
+        return this.countriesWithReferralInput.includes(
+            this.state.MailingCountry
+        );
+    }
+
+    get notAvailableAlertInfo() {
+        return this.formMetadata.notAvailableAlertInfo;
+    }
+
+    get formSubmitFailureAlertInfo() {
+        return this.formMetadata.formSubmitFailureAlertInfo;
+    }
+
+    get jobRoles() {
+        return tbidValidRoles.map((role) => ({
+            label: role,
+            value: role
+        }));
+    }
+
+    connectedCallback() {
+        const initialState: Partial<J2sFormState> = {
+            ...this.incomingUserInfo,
+            isFormValid: false,
+            showMarketingText: true
+        };
+        const initialCountry = initialState.MailingCountry;
+        const initialCountryData =
+            initialCountry && this._countriesLookup[initialCountry];
+        if (initialCountryData) {
+            initialState.showLegalCheckbox =
+                initialCountryData.showLegalCheckbox;
+            initialState.showMarketingText =
+                initialCountryData.showMarketingText;
+            initialState.legalText = initialCountryData.legalText;
+            initialState.marketingText = initialCountryData.marketingText;
+            initialState.learnMore = initialCountryData.learnMore;
+        }
+
+        this.state = initialState as J2sFormState;
+    }
+
+    renderedCallback(): void {
+        if (this._isInitialRender) {
+            this.updateInnerHtml("span.j2s-terms", this.formMetadata.j2sTerms);
+            this._isInitialRender = false;
+        }
+
+        if (
+            this.state.MailingCountry &&
+            this.state.MailingCountry !== this.prevState.MailingCountry
+        ) {
+            // Re-render new country's terms
+            this.updateInnerHtml(
+                "span.marketing-terms",
+                this.state.marketingText
+            );
+            this.updateInnerHtml("span.legal-terms", this.state.legalText);
+            if (this.state.learnMore) {
+                this.updateInnerHtml(
+                    "span.legal-terms-learn-more",
+                    this.state.learnMore
+                );
+            } else {
+                this.updateInnerHtml("span.legal-terms-learn-more", "");
+                this.template
+                    .querySelector(".legal-terms-learn-more")
+                    ?.classList.add("hidden");
+            }
+        }
+
+        if (this.state.isFormValid !== this.prevState.isFormValid) {
+            this.dispatchEvent(
+                new CustomEvent("formvaliditychange", {
+                    detail: {
+                        isValid: this.state.isFormValid
+                    },
+                    bubbles: true,
+                    composed: true
+                })
+            );
+        }
+
+        this.requiredFormFields = Array.from(
+            this.template.querySelectorAll("[required]")
+        );
+
+        if (this.id && !this._didSetFormId) {
+            this._didSetFormId = true;
+            this.template.querySelector("form")?.setAttribute("id", this.id);
+        }
+    }
+
+    handleLearnMore() {
+        this.template
+            .querySelector(".legal-terms-learn-more")
+            ?.classList.toggle("hidden");
+    }
+
+    handleFormFieldChange = (evt: CustomEvent) => {
+        // Event target information must be read prior to debouncing; the target is gone after the debounce.
+        const { target = {}, detail } = evt;
+        const { name: targetName, required: isRequiredField } =
+            target as HTMLInputElement;
+        const value =
+            typeof detail === "string"
+                ? detail
+                : typeof detail.checked === "boolean"
+                ? detail.checked
+                : detail.value;
+
+        // Perform the real work after a debounce, in order to prevent unnecessary work on rapid form value changes:
+        this.callbackWithDebounce(() => {
+            if (targetName === "MailingCountry") {
+                this.handleCountryChange(value);
+            } else {
+                const nextState: Partial<J2sFormState> = {};
+                if (targetName) {
+                    nextState[targetName as keyof J2sFormState] = value;
+                }
+                if (isRequiredField) {
+                    nextState.isFormValid = this.checkValidity();
+                }
+                this.setState(nextState);
+            }
+
+            this.unsetSubmitFailure();
+        });
+    };
+
+    @api
+    notifySubmitFailure(formSubmissionFailureState: Partial<DrmFormData>) {
+        this.showSubmitFailureAlert = true;
+        // After form submission failure, restore at most the following values to the form:
+        const {
+            FirstName,
+            LastName,
+            Email,
+            MailingCountry,
+            Company__c,
+            DRM_Role__c,
+            Referral_Email__c
+        } = formSubmissionFailureState;
+        this.setState({
+            FirstName,
+            LastName,
+            Email,
+            MailingCountry,
+            Company__c,
+            DRM_Role__c,
+            Referral_Email__c
+        });
+    }
+
+    private unsetSubmitFailure() {
+        if (this.showSubmitFailureAlert) {
+            this.showSubmitFailureAlert = false;
+        }
+    }
+
+    private callbackWithDebounce = debounce((callback: Function) => {
+        callback();
+    }, 1000 / 15 /* 15fps seems reasonable */);
+
+    private handleCountryChange(countryCode: string) {
+        const countryData = this._countriesLookup[countryCode];
+
+        this.setState({
+            MailingCountry: countryCode,
+            learnMore: countryData.learnMore,
+            legalText: countryData.legalText,
+            marketingText: countryData.marketingText,
+            showLegalCheckbox: countryData.showLegalCheckbox,
+            showMarketingText: countryData.showMarketingText
+        });
+
+        this.dispatchEvent(
+            new CustomEvent("countrychange", {
+                bubbles: true,
+                composed: true,
+                detail: countryCode
+            })
+        );
+
+        // Because updating the country can update the required fields, we need to re-set form
+        // validity _after_ render
+        requestAnimationFrame(() =>
+            this.setState({
+                isFormValid: this.checkValidity()
+            })
+        );
+    }
+
+    private updateInnerHtml(selector: string, html: string): void {
+        const element = this.template.querySelector(selector);
+        if (element) {
+            element.innerHTML = html;
+        }
+    }
+
+    private isParticipatingCountry(country: string) {
+        return this.participatingCountryCodes.includes(country);
+    }
+
+    private checkValidity() {
+        return (
+            Boolean(this.recaptchaToken) &&
+            this.isParticipatingCountry(this.state.MailingCountry) &&
+            this.requiredFormFields.every(
+                (requiredFormField) =>
+                    // @ts-ignore
+                    requiredFormField.checkValidity?.() === true
+            )
+        );
+    }
+}