@salesforcedevs/dw-components 1.3.155 → 1.3.157-canary.1

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

@@ -0,0 +1,344 @@
+import { toJson } from "dxUtils/normalizers";
+import { stateMap } from "dwUtils/forms";
+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;
+};
+
+const debounceCallback = (callback: Function) =>
+    debounce(callback, 1000 / 15 /* 15fps roughly */);
+
+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 isSalesforceEmployee() {
+        return this.state.RelationshipToSalesforce === "Salesforce Employee";
+    }
+
+    get notAvailableAlertInfo() {
+        return this.formMetadata.notAvailableAlertInfo;
+    }
+
+    get formSubmitFailureAlertInfo() {
+        return this.formMetadata.formSubmitFailureAlertInfo;
+    }
+
+    get jobRoles() {
+        return tbidValidRoles.map((role) => ({
+            label: role,
+            value: role
+        }));
+    }
+
+    get showStateProvince(): boolean {
+        return this.state.MailingCountry in stateMap;
+    }
+
+    get states(): { id: string; label: string; value: string }[] {
+        return (
+            stateMap[this.state.MailingCountry as keyof typeof stateMap] || []
+        );
+    }
+
+    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");
+    }
+
+    debouncedFormFieldChangeHandler = debounceCallback(
+        (targetName: string, value: any, isRequiredField = false) => {
+            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();
+        }
+    );
+
+    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.debouncedFormFieldChangeHandler(
+            targetName,
+            value,
+            isRequiredField
+        );
+    };
+
+    @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,
+            MailingState,
+            Company__c,
+            DRM_Role__c,
+            Referral_Email__c
+        } = formSubmissionFailureState;
+        this.setState({
+            FirstName,
+            LastName,
+            Email,
+            MailingCountry,
+            MailingState,
+            Company__c,
+            DRM_Role__c,
+            Referral_Email__c
+        });
+    }
+
+    private unsetSubmitFailure() {
+        if (this.showSubmitFailureAlert) {
+            this.showSubmitFailureAlert = false;
+        }
+    }
+
+    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.isSalesforceEmployee &&
+            this.isParticipatingCountry(this.state.MailingCountry) &&
+            this.requiredFormFields.every(
+                (requiredFormField) =>
+                    // @ts-ignore
+                    requiredFormField.checkValidity?.() === true
+            )
+        );
+    }
+}