@salesforcedevs/dw-components 1.3.120-alpha.0 → 1.3.121-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.120-alpha.0",
+    "version": "1.3.121-alpha.0",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -23,6 +23,5 @@
         "@types/lodash.uniqby": "^4.7.7",
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
-    },
-    "gitHead": "e10d764cbe3b3e9956eb47572b4dd3b4bed760e3"
+    }
 }

package/src/modules/dw/contentArchive/utils.ts

@@ -10,7 +10,7 @@ import altData from "./altData.js";
 let postsController: AbortController | null = null;
 let filtersController: AbortController | null = null;
 
-const ARCHIVE_BASE_URL = "https://developer.salesforce.com/blogs/wp-json/wp/v2";
+const ARCHIVE_BASE_URL = "https://staging.developer.salesforce.com/blogs/wp-json/wp/v2";
 const ARCHIVE_CONTENT_URL = `${ARCHIVE_BASE_URL}/latest-post-per-site`;
 const ARCHIVE_FILTER_LIST_URL = `${ARCHIVE_BASE_URL}/archives-filters?order=DESC`;
 export const PER_PAGE_COUNT = 10;

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

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

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

@@ -51,8 +51,8 @@
             options={countries}
             placeholder="Select Country/Region"
             required
-            value={country}
-            onchange={handleConsent}
+            value=""
+            onchange={handleCountryChange}
         ></dx-select>
         <dx-input
             label="Postal Code"
@@ -77,36 +77,27 @@
             onchange={handleUsernameChange}
         ></dx-input>
 
-        <dx-checkbox required name="eula" value="accepted" if:true={legalText}>
+        <dx-checkbox required name="eula" value="accepted">
             <span lwc:dom="manual" class="legal-terms"></span>
         </dx-checkbox>
-
-        <template if:false={showMarketingCheckbox}>
+        <dx-checkbox
+            if:true={showMarketingCheckbox}
+            name="opt_in"
+            value="False"
+        >
             <span lwc:dom="manual" class="marketing-terms"></span>
-        </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>
         <dx-checkbox
-            if:true={showLegalCheckbox}
-            class="privacy-terms"
-            value={legalCheckbox}
-            required="true"
+            if:true={showPrivacyCheckbox}
+            required
+            name="privacy"
+            value="privacy_accepted"
         >
-            <span lwc:dom="manual" class="legal-checkbox privacy-terms"></span>
+            <span lwc:dom="manual" class="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,7 +2,6 @@ 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 & {
@@ -17,6 +16,15 @@ const DUPLICATE_USERNAME_MESSAGE =
 const SIGN_UP_LABEL = "Sign me Up";
 
 export default class DeSignupForm extends LightningElement {
+    @api
+    get countries() {
+        return this._countries;
+    }
+
+    set countries(value) {
+        this._countries = toJson(value);
+    }
+
     @api
     get roles() {
         return this._roles;
@@ -25,20 +33,17 @@ export default class DeSignupForm extends LightningElement {
     set roles(value) {
         this._roles = toJson(value);
     }
-    @api countries: string = "";
-    @api drmDomain: string = "";
+
+    @api marketingText: string = "";
+    @api privacyText: string = "";
     @api legalText: string = "";
 
     private country: Country = null;
     private disableSubmit = false;
     private username = "";
+    private updateCheckboxLabels = true;
+    private _countries: Array<Country>;
     private _roles: Array<SelectOption>;
-    private showMarketingCheckbox: boolean = false;
-    private marketingCheckbox: boolean = false;
-    private marketingText: string = "";
-    private showLegalCheckbox: boolean = false;
-    private privacyText: string = "";
-
     @track knownDuplicateUsers = [];
 
     get usernameError(): string {
@@ -51,18 +56,34 @@ export default class DeSignupForm extends LightningElement {
         return !this.knownDuplicateUsers.includes(this.username);
     }
 
-    get buttonLabel(): string {
-        return this.disableSubmit ? "Beep boop processing" : SIGN_UP_LABEL;
+    get showMarketingCheckbox(): boolean {
+        return this.country && this.country.showMarketingCheckbox;
+    }
+
+    get showPrivacyCheckbox(): boolean {
+        return this.country && !!this.country.privacyOptIn;
     }
 
-    connectedCallback(): void {
-        this.getCountryList();
+    get buttonLabel(): string {
+        return this.disableSubmit ? "Beep boop processing" : SIGN_UP_LABEL;
     }
 
     renderedCallback(): void {
-        this.updateInnerHtml("span.legal-terms", this.legalText);
-        this.updateInnerHtml("span.marketing-terms", this.marketingText);
-        this.updateInnerHtml("span.legal-checkbox", this.privacyText);
+        if (!this.updateCheckboxLabels) {
+            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
+            );
     }
 
     handleSubmit(event: Event): void {
@@ -120,6 +141,13 @@ 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>(
@@ -131,14 +159,9 @@ export default class DeSignupForm extends LightningElement {
             value: element.value
         }));
 
-        let validCheckboxes = true;
-        Array.from(
-            this.template.querySelectorAll<HTMLInputElement>("dx-checkbox")
-        ).forEach((checkbox) => {
-            validCheckboxes = validCheckboxes && checkbox.reportValidity();
-        });
+        const checkboxes = this.getCheckboxesResult();
 
-        if (fields.some((field) => !field.valid) || !validCheckboxes) {
+        if (fields.some((field) => !field.valid) || !checkboxes.valid) {
             return null;
         }
 
@@ -147,15 +170,17 @@ export default class DeSignupForm extends LightningElement {
             userData[field.name] = field.value;
         });
 
-        (userData as UserData).consent = this.showMarketingCheckbox
+        (userData as UserData).consent = this.country.showMarketingCheckbox
             ? "Explicit"
-            : "Implied";
+            : "Implied ";
         const InfoEmail =
-            this.showMarketingCheckbox && !this.marketingCheckbox
+            this.country.showMarketingCheckbox && !checkboxes.values.opt_in
                 ? "False"
                 : "True";
+
         const formData: SignupForm = {
             user: userData as UserData,
+            eula: checkboxes.values.eula,
             default_driver: DEFAULT_DRIVER,
             info_email: InfoEmail
         };
@@ -163,75 +188,24 @@ export default class DeSignupForm extends LightningElement {
         return formData;
     }
 
-    handleConsent(countrySelectElement: any) {
-        this.country = countrySelectElement.target.value;
-        countrySelectElement = countrySelectElement.target;
-        const countryOptions = countrySelectElement.options.find(
-            (option: any) => option.value === countrySelectElement.value
-        );
-        this.setLegalAndMarketingData(countryOptions);
-        this.marketingCheckbox = false;
-    }
-
-    handleMarketingCheckbox(marketingCheckbox: any) {
-        this.marketingCheckbox = marketingCheckbox.target.checked;
-    }
-
-    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() {
-        if (!this.drmDomain) {
-            return;
-        }
-        const errorMsg = "Error while getting county list";
-        try {
-            const res = await fetch(
-                `${this.drmDomain}/utilities/services/apexrest/countries`
-            );
+    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"
+        };
 
-            if (!res.ok) {
-                throw new Error(errorMsg);
-            }
+        Array.from(
+            this.template.querySelectorAll<HTMLInputElement>("dx-checkbox")
+        ).forEach((checkbox) => {
+            valid = valid && checkbox.reportValidity();
+            values[checkbox.name] = checkbox.checked;
+        });
 
-            const data = await res.json();
-            // eslint-disable-next-line @lwc/lwc/no-api-reassignments
-            this.countries = JSON.stringify(data);
-        } catch (error) {
-            console.error(error);
-        }
+        return { valid, values };
     }
 
     private updateInnerHtml(

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

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