@salesforcedevs/dw-components 1.3.148-canary.9 → 1.3.150

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

@@ -1,160 +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
-                onblur={handleRequiredFieldUpdate}
-                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
-                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__c"
-                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="DRM_Role__c"
-                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="DRM_Role__c"
-                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="MailingCountry"
-                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__c"
-                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="Opt_In__c"
-                    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="Privacy_Statement__c"
-                    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>
-            <slot class="form-captcha-slot" name="form-captcha-slot"></slot>
-        </div>
-    </form>
-</template>

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

@@ -1,263 +0,0 @@
-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 _countriesJson = "";
-    private _countriesLookup: any = {}; // TODO typings
-    private _didSetFormId = false;
-    private _formMetadata: any = {}; // TODO typings
-    private _incomingUserInfo: any = {}; // TODO typings
-    private _isInitialRender = true;
-    private _recaptchaToken = "";
-
-    @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);
-    }
-
-    @api
-    get formDataForDrm() {
-        // 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;
-        this.handleRequiredFieldUpdate();
-    }
-
-    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",
-                    `&nbsp;${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);
-        }
-    }
-
-    handleRequiredFieldUpdate() {
-        const isFormNowValid = this.checkValidity();
-        if (this.state.isFormValid !== isFormNowValid) {
-            this.setState({
-                isFormValid: isFormNowValid
-            });
-        }
-    }
-
-    handleCountryChange({ detail }: CustomEvent) {
-        const { value } = detail;
-        const countryData = this._countriesLookup[value];
-
-        this.setState({
-            country: value,
-            learnMore: countryData.learnMore,
-            legalText: countryData.legalText,
-            marketingText: countryData.marketingText,
-            showLegalCheckbox: countryData.showLegalCheckbox
-        });
-
-        // Because updating the country can update the required fields, we need to re-set form
-        // validity after render
-        requestAnimationFrame(() =>
-            this.setState({
-                isFormValid: this.checkValidity()
-            })
-        );
-    }
-
-    handleLearnMore() {
-        this.template
-            .querySelector(".legal-terms-learn-more")
-            ?.classList.toggle("hidden");
-    }
-
-    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.country) &&
-            this.requiredFormFields.every(
-                (requiredFormField) =>
-                    // @ts-ignore
-                    requiredFormField.checkValidity?.() === true
-            )
-        );
-    }
-}