@salesforcedevs/dw-components 1.3.100 → 1.3.105-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.100",
+    "version": "1.3.105-alpha.0",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -24,5 +24,5 @@
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
     },
-    "gitHead": "4bd7c51cf9da75498e1cc258d6fb4426a0c42889"
+    "gitHead": "22cde8b5972d7ef34581c5c10547c8a25da9bfd4"
 }

package/src/modules/dw/deSignupForm/deSignupForm.css

@@ -25,7 +25,9 @@ span {
 }
 
 dx-checkbox,
-.privacy-notice {
+.privacy-notice,
+span.privacy-terms,
+span.marketing-terms {
     width: 100%;
     margin-bottom: var(--dx-g-spacing-lg);
 }

package/src/modules/dw/deSignupForm/deSignupForm.html

@@ -52,7 +52,7 @@
             placeholder="Select Country/Region"
             required
             value=""
-            onchange={handleCountryChange}
+            onchange={handleConsent}
         ></dx-select>
         <dx-input
             label="Postal Code"
@@ -80,24 +80,33 @@
         <dx-checkbox required name="eula" value="accepted">
             <span lwc:dom="manual" class="legal-terms"></span>
         </dx-checkbox>
-        <dx-checkbox
-            if:true={showMarketingCheckbox}
-            name="opt_in"
-            value="False"
-        >
+
+        <template if:false={showMarketingCheckbox}>
             <span lwc:dom="manual" class="marketing-terms"></span>
-        </dx-checkbox>
+        </template>
+        <template if:true={showMarketingCheckbox}>
+            <dx-checkbox
+                name="marketingCheckbox"
+                class="marketing-terms"
+                value="false"
+                onchange={handleMarketingCheckbox}
+            >
+                <span>{marketingText}</span>
+            </dx-checkbox>
+        </template>
+
+        <template if:false={showLegalCheckbox}>
+            <span lwc:dom="manual" class="legal-checkbox privacy-terms"></span>
+        </template>
         <dx-checkbox
-            if:true={showPrivacyCheckbox}
-            required
-            name="privacy"
-            value="privacy_accepted"
+            if:true={showLegalCheckbox}
+            class="privacy-terms"
+            value={legalCheckbox}
+            required="true"
         >
-            <span lwc:dom="manual" class="privacy-terms"></span>
+            <span lwc:dom="manual" class="legal-checkbox privacy-terms"></span>
         </dx-checkbox>
-        <template if:false={showPrivacyCheckbox}>
-            <span lwc:dom="manual" class="privacy-terms privacy-notice"></span>
-        </template>
+
         <dx-button
             class="submit-button"
             disabled={disableSubmit}

package/src/modules/dw/deSignupForm/deSignupForm.ts

@@ -2,6 +2,7 @@ import { LightningElement, api, track } from "lwc";
 import { toJson } from "dxUtils/normalizers";
 import { track as trackGtm } from "dxUtils/analytics";
 import { submitForm, ErrorCode, SignupForm, UserData } from "./submitForm";
+import { CountryOptions } from "typings/custom";
 
 type SelectOption = { value: string; label: string };
 type Country = SelectOption & {
@@ -34,16 +35,21 @@ export default class DeSignupForm extends LightningElement {
         this._roles = toJson(value);
     }
 
-    @api marketingText: string = "";
-    @api privacyText: string = "";
     @api legalText: string = "";
+    @api drmDomain: string = "https://drm.my.salesforce-sites.com";
 
     private country: Country = null;
     private disableSubmit = false;
     private username = "";
-    private updateCheckboxLabels = true;
-    private _countries: Array<Country>;
+    private _countries: string = "";
     private _roles: Array<SelectOption>;
+    private showMarketingCheckbox: boolean = false;
+    private marketingCheckbox: boolean = false;
+    private marketingText: string = "";
+    private showLegalCheckbox: boolean = false;
+    private privacyText: string = "";
+    private hasRendered = false;
+
     @track knownDuplicateUsers = [];
 
     get usernameError(): string {
@@ -56,10 +62,6 @@ export default class DeSignupForm extends LightningElement {
         return !this.knownDuplicateUsers.includes(this.username);
     }
 
-    get showMarketingCheckbox(): boolean {
-        return this.country && this.country.showMarketingCheckbox;
-    }
-
     get showPrivacyCheckbox(): boolean {
         return this.country && !!this.country.privacyOptIn;
     }
@@ -68,22 +70,18 @@ export default class DeSignupForm extends LightningElement {
         return this.disableSubmit ? "Beep boop processing" : SIGN_UP_LABEL;
     }
 
+    connectedCallback(): void {
+        this.getCountryList();
+    }
+
     renderedCallback(): void {
-        if (!this.updateCheckboxLabels) {
+        if (!this.hasRendered) {
+            this.hasRendered = true;
             return;
         }
-
-        this.updateCheckboxLabels =
-            this.updateInnerHtml("span.legal-terms", this.legalText) ||
-            this.updateInnerHtml(
-                "span.marketing-terms",
-                this.marketingText,
-                this.showMarketingCheckbox
-            ) ||
-            this.updateInnerHtml(
-                "span.privacy-terms",
-                this.country?.privacyText || this.privacyText
-            );
+        this.updateInnerHtml("span.legal-terms", this.legalText);
+        this.updateInnerHtml("span.marketing-terms", this.marketingText);
+        this.updateInnerHtml("span.legal-checkbox", this.privacyText);
     }
 
     handleSubmit(event: Event): void {
@@ -141,13 +139,6 @@ export default class DeSignupForm extends LightningElement {
         this.username = event.detail;
     }
 
-    handleCountryChange(event: CustomEvent<{ value: string }>): void {
-        this.country = this.countries.find(
-            ({ value }) => value === event.detail.value
-        );
-        this.updateCheckboxLabels = true;
-    }
-
     private prepareUserData(): SignupForm | null {
         const fields = Array.from(
             this.template.querySelectorAll<HTMLFormElement>(
@@ -159,9 +150,7 @@ export default class DeSignupForm extends LightningElement {
             value: element.value
         }));
 
-        const checkboxes = this.getCheckboxesResult();
-
-        if (fields.some((field) => !field.valid) || !checkboxes.valid) {
+        if (fields.some((field) => !field.valid)) {
             return null;
         }
 
@@ -170,17 +159,15 @@ export default class DeSignupForm extends LightningElement {
             userData[field.name] = field.value;
         });
 
-        (userData as UserData).consent = this.country.showMarketingCheckbox
+        (userData as UserData).consent = this.showMarketingCheckbox
             ? "Explicit"
-            : "Implied ";
+            : "Implied";
         const InfoEmail =
-            this.country.showMarketingCheckbox && !checkboxes.values.opt_in
+            this.showMarketingCheckbox && !this.marketingCheckbox
                 ? "False"
                 : "True";
-
         const formData: SignupForm = {
             user: userData as UserData,
-            eula: checkboxes.values.eula,
             default_driver: DEFAULT_DRIVER,
             info_email: InfoEmail
         };
@@ -188,24 +175,72 @@ export default class DeSignupForm extends LightningElement {
         return formData;
     }
 
-    private getCheckboxesResult(): {
-        valid: boolean;
-        values: { eula: string; opt_in: "true" | "false" };
-    } {
-        let valid = true;
-        const values: { eula: string; opt_in: "true" | "false" } = {
-            eula: "",
-            opt_in: "false"
-        };
+    handleConsent(countrySelectElement: any) {
+        countrySelectElement = countrySelectElement.target;
+        const countryOptions = countrySelectElement.options.find(
+            (option: any) => option.value === countrySelectElement.value
+        );
+        this.marketingCheckbox = false;
+        this.setLegalAndMarketingData(countryOptions);
+    }
 
-        Array.from(
-            this.template.querySelectorAll<HTMLInputElement>("dx-checkbox")
-        ).forEach((checkbox) => {
-            valid = valid && checkbox.reportValidity();
-            values[checkbox.name] = checkbox.checked;
-        });
+    handleMarketingCheckbox(marketingCheckbox: any) {
+        this.marketingCheckbox = marketingCheckbox.target.checked;
+    }
 
-        return { valid, values };
+    setLegalAndMarketingData(countryOptions: CountryOptions) {
+        // Set the checkbox text
+        this.setCheckboxTextSet(
+            countryOptions.marketingText,
+            countryOptions.learnMore
+                ? `${countryOptions.legalText} </br> ${countryOptions.learnMore}`
+                : countryOptions.legalText
+        );
+
+        // Toggle visibility of legal/marketing data
+        this.toggleLegalAndMarketingVisibility(
+            countryOptions.showMarketingText,
+            countryOptions.showLegalCheckbox
+        );
+    }
+
+    setCheckboxTextSet(marketingText: string, privacyText: string) {
+        this.marketingText = marketingText;
+        this.privacyText = privacyText;
+    }
+
+    toggleLegalAndMarketingVisibility(
+        showMarketingCheckbox: boolean,
+        showLegalCheckbox: boolean
+    ) {
+        this.showMarketingCheckbox = showMarketingCheckbox;
+        this.showLegalCheckbox = showLegalCheckbox;
+    }
+
+    setInnerHtml(element: HTMLElement, value: string) {
+        // disable lwc warning because text received from json has HTML
+        // eslint-disable-next-line @lwc/lwc/no-inner-html
+        element.innerHTML = value;
+    }
+
+    async getCountryList() {
+        const errorMsg = "Error while getting county list";
+
+        try {
+            const res = await fetch(
+                `${this.drmDomain}/utilities/services/apexrest/countries`
+            );
+
+            if (!res.ok) {
+                throw new Error(errorMsg);
+            }
+
+            const data = await res.json();
+            // eslint-disable-next-line @lwc/lwc/no-api-reassignments
+            this._countries = JSON.stringify(data);
+        } catch (error) {
+            console.error(error);
+        }
     }
 
     private updateInnerHtml(

package/src/modules/dw/deSignupForm/submitForm.ts

@@ -20,7 +20,6 @@ export type UserData = {
 
 export type SignupForm = {
     user: UserData;
-    eula: string;
     default_driver: string;
     info_email: "True" | "False";
 };