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

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

@@ -1,152 +0,0 @@
-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

@@ -1,56 +0,0 @@
-.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

@@ -1,162 +0,0 @@
-<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

@@ -1,319 +0,0 @@
-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
-            )
-        );
-    }
-}