@salesforcedevs/dw-components 1.3.88 → 1.3.93

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.88",
+    "version": "1.3.93",
     "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": "0fd9edba15fb1e8120046a70384598e805388237"
+    "gitHead": "407d14fa2e92a0c1dadf1cf109df999537f4475d"
 }

package/src/modules/dw/newsletterForm/newsletterForm.html

@@ -51,16 +51,30 @@
             value={country}
             required="true"
         ></dx-select>
-        <template if:true={checkboxTextSet}>
+
+        <template if:false={showMarketingText}>
             <p class="marketing-text">{marketingText}</p>
-            <p class="legal-text" lwc:dom="manual"></p>
-            <template if:true={showLegalCheckbox}>
-                <dx-checkbox
-                    class="legal-checkbox"
-                    value={legalText}
-                    required="true"
-                ></dx-checkbox>
-            </template>
+        </template>
+        <template if:true={showMarketingText}>
+            <dx-checkbox
+                name="marketingCheckbox"
+                class="marketing-checkbox"
+                value="false"
+                onchange={handleChange}
+            >
+                <span>{marketingText}</span>
+            </dx-checkbox>
+        </template>
+
+        <template if:false={showLegalCheckbox}>
+            <p lwc:dom="manual" class="legal-checkbox legal-text"></p>
+        </template>
+        <template if:true={showLegalCheckbox}>
+            <dx-checkbox
+                class="legal-checkbox"
+                value={legalCheckbox}
+                required="true"
+            ></dx-checkbox>
         </template>
         <button class="form-submit" type="submit">Subscribe Now</button>
     </form>

package/src/modules/dw/newsletterForm/newsletterForm.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { track } from "dxUtils/analytics";
-import { CountryOptions, CheckboxTextSet } from "typings/custom";
+import { CountryOptions } from "typings/custom";
 
 const LOCAL_STORAGE_KEY = "subscriberEmail";
 
@@ -12,30 +12,32 @@ export default class Form extends LightningElement {
     private lastName: string = "";
     private email: string = "";
     private country: string = "";
+    private marketingCheckbox: string = "";
 
-    private showLegalText: boolean = false;
+    private showLegalText: boolean = false; // This should be always true
+    private showMarketingText: boolean = false;
     private showLegalCheckbox: boolean = false;
     private legalText: string = "";
     private marketingText: string | null = null;
     private hasRendered: boolean = false;
 
+    connectedCallback() {
+        this.getCountryList();
+    }
+
     renderedCallback() {
         if (!this.hasRendered) {
             // Focus the first input in the form
             this.template.querySelector("dx-input")?.focus();
-
             this.setInitialEmail();
             this.hasRendered = true;
-        } else if (this.hasRendered && this.showLegalCheckbox) {
+        } else if (this.hasRendered) {
             // Grab the legal checkbox and append the legal text as innerHTML (text has anchor links in it)
-            const legalCheckboxElement = this.template.querySelector(
-                "dx-checkbox.legal-checkbox"
-            );
-            const legalCheckboxSpan = document.createElement("span");
-            this.setInnerHtml(legalCheckboxSpan, this.legalText);
+            const legalCheckboxElement =
+                this.template.querySelector(".legal-checkbox");
 
             if (legalCheckboxElement) {
-                legalCheckboxElement.appendChild(legalCheckboxSpan);
+                this.setInnerHtml(legalCheckboxElement, this.legalText);
             }
         }
     }
@@ -61,6 +63,9 @@ export default class Form extends LightningElement {
                 this.country = e.target.value;
                 this.handleConsent(e.target);
                 break;
+            case "marketingCheckbox":
+                this.marketingCheckbox = e.target.checked;
+                break;
             default:
                 break;
         }
@@ -92,6 +97,31 @@ export default class Form extends LightningElement {
             this.sendFormData();
         }
     }
+    async getCountryList() {
+        const errorMsg = "Error while getting county list";
+
+        try {
+            const res = await fetch(
+                "https://drm.my.salesforce-sites.com/utilities/services/apexrest/countries",
+                {
+                    method: "GET",
+                    headers: {
+                        "Content-Type": "application/json"
+                    }
+                }
+            );
+
+            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);
+        }
+    }
 
     setInitialEmail() {
         // Set email if provided in the local storage
@@ -104,17 +134,19 @@ export default class Form extends LightningElement {
 
     getFormData() {
         const date = new Date().toISOString();
-
         return {
-            InfoEmail: true,
-            "First Name": this.firstName,
-            "Last Name": this.lastName,
-            Consent: "Implied",
-            "Email Status Update": date,
-            email: this.email,
-            Country: this.country,
-            "Privacy Policy": true,
-            referrer: "footer"
+            InfoEmail__c:
+                (this.showMarketingText && this.marketingCheckbox) ||
+                !this.showMarketingText
+                    ? "True"
+                    : "False", // True if the user checks the checkbox or the country is opted-out
+            FirstName: this.firstName,
+            LastName: this.lastName,
+            Consent__c: this.showMarketingText ? "Explicit" : "Implied", //Implied if the country is opted-out, Explicit if the country is opted-in
+            Email_Status_Update__c: date,
+            Email: this.email,
+            MailingCountry: this.country,
+            handlerName: "news_letter_form_handler"
         };
     }
 
@@ -129,13 +161,16 @@ export default class Form extends LightningElement {
         submitButtonEl.textContent = "...Processing request";
 
         try {
-            const res = await fetch("/pages/pardot/footer_optin", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify(formData)
-            });
+            const res = await fetch(
+                "https://drm.my.salesforce-sites.com/handler/services/apexrest/handler",
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify(formData)
+                }
+            );
 
             if (!res.ok) {
                 throw new Error(errorMsg);
@@ -143,7 +178,7 @@ export default class Form extends LightningElement {
 
             const data = await res.json();
 
-            if (!data.success) {
+            if (data.status !== "success") {
                 throw new Error(errorMsg);
             }
 
@@ -178,54 +213,37 @@ export default class Form extends LightningElement {
     }
 
     handleConsent(countrySelectElement: any) {
-        if (this.checkboxTextSet) {
-            const countryOptions = countrySelectElement.options.find(
-                (option: any) => option.value === countrySelectElement.value
-            );
+        const countryOptions = countrySelectElement.options.find(
+            (option: any) => option.value === countrySelectElement.value
+        );
 
-            this.setLegalAndMarketingData(countryOptions);
-        }
+        this.setLegalAndMarketingData(countryOptions);
     }
 
     setLegalAndMarketingData(countryOptions: CountryOptions) {
-        // Parse the text sets for the checkbox info
-        const parsedCheckboxTextSet = JSON.parse(this.checkboxTextSet);
-
-        // Check for alternate text set or set to default
-        const checkboxTextSet = countryOptions.checkboxTextSet
-            ? parsedCheckboxTextSet[countryOptions.checkboxTextSet]
-            : parsedCheckboxTextSet.default;
-
         // Set the checkbox text
-        this.setCheckboxTextSet(checkboxTextSet);
+        this.setCheckboxTextSet(
+            countryOptions.marketingText,
+            countryOptions.legalText
+        );
 
         // Toggle visibility of legal/marketing data
         this.toggleLegalAndMarketingVisibility(
-            countryOptions.showLegalText,
+            countryOptions.showMarketingText,
             countryOptions.showLegalCheckbox
         );
-
-        // Grab the legal text paragraph element and set inner html (this is due to text having html elements in the string)
-        const legalTextElement = this.template.querySelector(".legal-text");
-
-        if (legalTextElement && this.showLegalText) {
-            this.setInnerHtml(legalTextElement, this.legalText);
-        } else if (legalTextElement && !this.showLegalText) {
-            // Clear legal text
-            this.setInnerHtml(legalTextElement, "");
-        }
     }
 
-    setCheckboxTextSet(checkboxTextSet: CheckboxTextSet) {
-        this.legalText = checkboxTextSet.legalText;
-        this.marketingText = checkboxTextSet.marketingText;
+    setCheckboxTextSet(marketingText: string, legalText: string) {
+        this.legalText = legalText;
+        this.marketingText = marketingText;
     }
 
     toggleLegalAndMarketingVisibility(
-        showLegalText: boolean,
+        showMarketingText: boolean,
         showLegalCheckbox: boolean
     ) {
-        this.showLegalText = showLegalText;
+        this.showMarketingText = showMarketingText;
         this.showLegalCheckbox = showLegalCheckbox;
     }