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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.121-alpha.0",
+    "version": "1.3.124-alpha.0",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {

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://staging.developer.salesforce.com/blogs/wp-json/wp/v2";
+const ARCHIVE_BASE_URL = "https://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,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

@@ -51,8 +51,8 @@
             options={countries}
             placeholder="Select Country/Region"
             required
-            value=""
-            onchange={handleCountryChange}
+            value={country}
+            onchange={handleConsent}
         ></dx-select>
         <dx-input
             label="Postal Code"
@@ -77,27 +77,36 @@
             onchange={handleUsernameChange}
         ></dx-input>
 
-        <dx-checkbox required name="eula" value="accepted">
+        <dx-checkbox required name="eula" value="accepted" if:true={legalText}>
             <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 & {
@@ -16,15 +17,6 @@ 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;
@@ -33,17 +25,27 @@ export default class DeSignupForm extends LightningElement {
     set roles(value) {
         this._roles = toJson(value);
     }
-
-    @api marketingText: string = "";
-    @api privacyText: string = "";
+    @api
+    get countries() {
+        return this._countries;
+    }
+    set countries(value) {
+        this._countries = value;
+    }
+    @api drmDomain: string = "";
     @api legalText: string = "";
 
     private country: Country = null;
+    private _countries: string = "";
     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 {
@@ -56,34 +58,18 @@ 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;
-    }
-
     get buttonLabel(): string {
         return this.disableSubmit ? "Beep boop processing" : SIGN_UP_LABEL;
     }
 
-    renderedCallback(): void {
-        if (!this.updateCheckboxLabels) {
-            return;
-        }
+    connectedCallback(): void {
+        this.getCountryList();
+    }
 
-        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
-            );
+    renderedCallback(): void {
+        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 +127,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 +138,14 @@ export default class DeSignupForm extends LightningElement {
             value: element.value
         }));
 
-        const checkboxes = this.getCheckboxesResult();
+        let validCheckboxes = true;
+        Array.from(
+            this.template.querySelectorAll<HTMLInputElement>("dx-checkbox")
+        ).forEach((checkbox) => {
+            validCheckboxes = validCheckboxes && checkbox.reportValidity();
+        });
 
-        if (fields.some((field) => !field.valid) || !checkboxes.valid) {
+        if (fields.some((field) => !field.valid) || !validCheckboxes) {
             return null;
         }
 
@@ -170,17 +154,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 +170,74 @@ 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) {
+        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;
+    }
 
-        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;
+    }
+
+    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;
+    }
 
-        return { valid, values };
+    async getCountryList() {
+        if (!this.drmDomain) {
+            return;
+        }
+        const errorMsg = "Error while getting country list";
+        try {
+            const res = await fetch(
+                `${this.drmDomain}/utilities/services/apexrest/countries`
+            );
+
+            if (!res.ok) {
+                throw new Error(errorMsg);
+            }
+
+            const data = await res.json();
+            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";
 };

package/src/modules/dw/eventsList/eventsList.css

@@ -23,7 +23,7 @@ dx-section.events-action-bar::part(container) {
 
 dx-section.upcoming-events::part(container)::before {
     content: "";
-    background-image: url(/assets/images/events-cloud1.svg);
+    background-image: url(https://a.sfdcstatic.com/developer-website/images/events-cloud1.svg);
     width: 146px;
     height: 106px;
     position: absolute;
@@ -34,7 +34,7 @@ dx-section.upcoming-events::part(container)::before {
 
 dx-section.upcoming-events::part(container)::after {
     content: "";
-    background-image: url(/assets/images/events-cloud2.svg);
+    background-image: url(https://a.sfdcstatic.com/developer-website/images/events-cloud2.svg);
     width: 152px;
     height: 111px;
     position: absolute;
@@ -45,7 +45,7 @@ dx-section.upcoming-events::part(container)::after {
 
 dx-section.past-events::part(container)::before {
     content: "";
-    background-image: url(/assets/images/events-gradient-elipse.svg);
+    background-image: url(https://a.sfdcstatic.com/developer-website/images/events-gradient-elipse.svg);
     width: 2991px;
     height: 839px;
     position: absolute;
@@ -56,7 +56,7 @@ dx-section.past-events::part(container)::before {
 
 dx-section:not(:nth-child(2)).past-events::part(container)::after {
     content: "";
-    background-image: url(/assets/images/events-cloud3.svg);
+    background-image: url(https://a.sfdcstatic.com/developer-website/images/events-cloud3.svg);
     width: 655px;
     height: 270px;
     position: absolute;

package/src/modules/dw/podcastsPromo/podcastsPromo.html

@@ -14,7 +14,7 @@
                 <div class="info-container">
                     <a href="/podcast" class="info-link">
                         <img
-                            src="/assets/images/dsc-home-podcast-art.svg"
+                            src="https://a.sfdcstatic.com/developer-website/images/dsc-home-podcast-art.svg"
                             loading="lazy"
                             alt="Developer Podcast"
                             style="width: 100%"

package/src/modules/dw/slackSuccess/slackSuccess.html

@@ -24,7 +24,7 @@
             </dx-button>
             <img
                 class="slack-success_cody"
-                src="/assets/images/cody-cloud-slack.svg"
+                src="https://a.sfdcstatic.com/developer-website/images/cody-cloud-slack.svg"
                 alt="Cody the Bear on a laptop below a Slack icon"
             />
         </div>