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

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
-            )
-        );
-    }
-}