@salesforcedevs/dw-components 1.3.124-alpha.0 → 1.3.124-canary.0

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

@@ -0,0 +1,158 @@
+<template>
+    <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="first_name"
+                placeholder="Your first name"
+                required
+                validity-on-blur
+                onblur={handleRequiredFieldUpdate}
+                value={state.firstName}
+            ></dx-input>
+            <dx-input
+                class="last-name-field"
+                label="Last Name"
+                missing-error-message="Enter your last name"
+                name="last_name"
+                placeholder="Your last name"
+                required
+                validity-on-blur
+                onblur={handleRequiredFieldUpdate}
+                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_name"
+                placeholder="Your company name"
+                required
+                validity-on-blur
+                onblur={handleRequiredFieldUpdate}
+                value={state.companyName}
+            ></dx-input>
+            <dx-select
+                if:false={isJobRoleRequired}
+                class="job-role-field"
+                label="Job Role"
+                message-when-value-missing="Select your job role"
+                name="job_role"
+                options={jobRoles}
+                placeholder="Select Job Role"
+                value={state.jobRole}
+            ></dx-select>
+            <dx-select
+                if:true={isJobRoleRequired}
+                class="job-role-field"
+                label="Job Role"
+                message-when-value-missing="Select your job role"
+                name="job_role"
+                options={jobRoles}
+                placeholder="Select Job Role"
+                required
+                value={state.jobRole}
+                onchange={handleRequiredFieldUpdate}
+            ></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"
+                required
+                onblur={handleRequiredFieldUpdate}
+                value={state.email}
+            ></dx-input>
+            <dx-select
+                label="Country/Region"
+                message-when-value-missing="Select your country/region"
+                name="country"
+                options={countries}
+                placeholder="Select Country/Region"
+                required
+                value={state.country}
+                onchange={handleCountryChange}
+            ></dx-select>
+        </div>
+        <div class="form-row" if:true={isCountryWithReferralInput}>
+            <dx-input
+                name="referral_email"
+                class="referral-email-field full-width"
+                label="If anyone has referred you, please share their Email ID below, with their consent."
+                type="email"
+            ></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-terms-container">
+            <div class="form-row" if:true={state.showMarketingText}>
+                <dx-checkbox
+                    value="marketing-terms"
+                    name="marketing_terms"
+                    required
+                    class="terms"
+                    onchange={handleRequiredFieldUpdate}
+                    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={handleRequiredFieldUpdate}
+                    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="legal_terms"
+                    required
+                    class="terms"
+                    onchange={handleRequiredFieldUpdate}
+                    disabled={isNotParticipatingCountry}
+                >
+                    <span lwc:dom="manual" class="legal-terms"></span>
+                    <template if:true={state.learnMore}>
+                        <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>
+        </div>
+    </form>
+</template>

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