@salesforcedevs/dw-components 1.3.147 → 1.3.148-canary.0

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

@@ -0,0 +1,225 @@
+import { toJson } from "dxUtils/normalizers";
+import { api } from "lwc";
+import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
+
+// 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 = {
+    country: string;
+    legalText: string;
+    marketingText: string;
+    learnMore: string;
+    showLegalCheckbox: boolean;
+    showMarketingText: boolean;
+    isFormValid: boolean;
+};
+
+export default class J2sForm extends LightningElementWithState<J2sFormState> {
+    private _didSetFormId = false;
+    private _isInitialRender = true;
+    private _incomingUserInfo: any = {}; // TODO typings
+    private _formMetadata: any = {}; // TODO typings
+    private _countriesJson = "";
+    private _countriesLookup: any = {}; // TODO typings
+    @api id = "";
+    @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 incomingUserInfo() {
+        return this._incomingUserInfo;
+    }
+    set incomingUserInfo(value: string) {
+        this._incomingUserInfo = toJson(value);
+    }
+
+    @api
+    get formMetadata() {
+        return this._formMetadata;
+    }
+    set formMetadata(value: string) {
+        this._formMetadata = toJson(value);
+    }
+
+    private participatingCountryCodes = ["US", "CA", "IN"];
+    private countriesWithReferralInput = ["IN"];
+    private countriesWithRequiredJobRole = ["CA"];
+    private requiredFormFields: HTMLElement[] = [];
+
+    get isNotParticipatingCountry() {
+        return !this.isParticipatingCountry(this.state.country);
+    }
+
+    get isCountryWithReferralInput() {
+        return this.countriesWithReferralInput.includes(this.state.country);
+    }
+
+    get isJobRoleRequired() {
+        return this.countriesWithRequiredJobRole.includes(this.state.country);
+    }
+
+    get notAvailableAlertInfo() {
+        return (this.formMetadata as any).notAvailableAlertInfo;
+    }
+
+    get jobRoles() {
+        return tbidValidRoles.map((role) => ({
+            label: role,
+            value: role
+        }));
+    }
+
+    connectedCallback() {
+        const initialState: Partial<J2sFormState> = {
+            ...this._incomingUserInfo,
+            isFormValid: false,
+            showMarketingText: true
+        };
+        const initialCountry = initialState.country;
+        const initialCountryData =
+            initialCountry && this._countriesLookup[initialCountry];
+        if (initialCountryData) {
+            initialState.showLegalCheckbox =
+                initialCountryData.showLegalCheckbox;
+            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 as any).j2sTerms
+            );
+        }
+
+        if (
+            this.state.country &&
+            this.state.country !== this.prevState.country
+        ) {
+            // 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);
+        }
+    }
+
+    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);
+    }
+
+    handleRequiredFieldUpdate() {
+        const isFormNowValid = this.checkValidity(this.state.country);
+        if (this.state.isFormValid !== isFormNowValid) {
+            this.setState({
+                isFormValid: isFormNowValid
+            });
+        }
+    }
+
+    handleCountryChange({ detail }: CustomEvent) {
+        const { value } = detail;
+        const countryData = this._countriesLookup[value];
+        this.setState({
+            country: value,
+            isFormValid: this.checkValidity(value),
+            learnMore: countryData.learnMore,
+            legalText: countryData.legalText,
+            marketingText: countryData.marketingText,
+            showLegalCheckbox: countryData.showLegalCheckbox
+        });
+    }
+
+    handleLearnMore() {
+        this.template
+            .querySelector(".legal-terms-learn-more")
+            ?.classList.toggle("hidden");
+    }
+
+    private checkValidity(country: string) {
+        return (
+            this.isParticipatingCountry(country) &&
+            this.requiredFormFields.every(
+                (requiredFormField) =>
+                    // @ts-ignore
+                    requiredFormField.checkValidity?.() === true
+            )
+        );
+    }
+}