@salesforcedevs/dx-components 0.53.11 → 0.54.0-alpha03

package/src/modules/dx/newsletterForm/newsletterForm.html

@@ -1,73 +0,0 @@
-<template>
-    <form
-        onsubmit={handleSubmit}
-        onchange={handleChange}
-        onkeydown={handleKeyDown}
-    >
-        <slot name="form-heading">
-            <h4 class="newsletter-form-heading dx-text-heading-8">
-                Sign up now to receive the newsletter.
-            </h4>
-        </slot>
-        <dx-input
-            name="fname"
-            value={firstName}
-            placeholder="Your first name"
-            label="First Name"
-            onchange={handleChange}
-            missing-error-message="Enter your first name"
-            validity-on-blur="true"
-            required="true"
-        ></dx-input>
-        <dx-input
-            name="lname"
-            value={lastName}
-            placeholder="Your last name"
-            label="Last Name"
-            onchange={handleChange}
-            missing-error-message="Enter your last name"
-            validity-on-blur="true"
-            required="true"
-        ></dx-input>
-        <dx-input
-            name="email"
-            type="email"
-            value={email}
-            placeholder="Your email address"
-            label="Email"
-            onchange={handleChange}
-            missing-error-message="Enter your email address"
-            validity-on-blur="true"
-            required="true"
-        ></dx-input>
-        <dx-select
-            name="country"
-            class="country-select"
-            label="Country/Region"
-            onchange={handleChange}
-            placeholder="Select your Country/Region"
-            message-when-value-missing="Select your country/region"
-            json-options={countries}
-            value={country}
-            required="true"
-        ></dx-select>
-        <template if:true={checkboxTextSet}>
-            <template if:true={showMarketingCheckbox}>
-                <dx-checkbox
-                    class="marketing-checkbox"
-                    value={marketingText}
-                    label={marketingText}
-                ></dx-checkbox>
-            </template>
-            <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>
-        <button class="form-submit" type="submit">Subscribe Now</button>
-    </form>
-</template>

package/src/modules/dx/newsletterForm/newsletterForm.ts

@@ -1,238 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
-import { CountryOptions, CheckboxTextSet } from "typings/custom";
-
-const ANALYTICS_INFO = {
-    itemTitle: "newsletter sign up submit",
-    formName: "newsletter",
-    formType: "newsletter",
-    method: "email",
-    destinationType: "internal",
-    clickText: "Subscribe Now",
-    clickUrl: "/newsletter/success",
-    elementType: "button",
-    ctaClick: true
-};
-
-export default class Form extends LightningElement {
-    @api checkboxTextSet: string = "";
-    @api countries: string = "";
-
-    private firstName: string = "";
-    private lastName: string = "";
-    private email: string = "";
-    private country: string = "";
-
-    private showLegalText: boolean = false;
-    private showLegalCheckbox: boolean = false;
-    private showMarketingCheckbox: boolean = false;
-    private legalText: string = "";
-    private marketingText: string | null = null;
-    private hasRendered: boolean = false;
-
-    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) {
-            // 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);
-
-            if (legalCheckboxElement) {
-                legalCheckboxElement.appendChild(legalCheckboxSpan);
-            }
-        }
-    }
-
-    handleKeyDown(e: KeyboardEvent) {
-        if (e.key === "Enter") {
-            this.handleSubmit(e);
-        }
-    }
-
-    handleChange(e: any) {
-        switch (e.target.name) {
-            case "fname":
-                this.firstName = e.target.value;
-                break;
-            case "lname":
-                this.lastName = e.target.value;
-                break;
-            case "email":
-                this.email = e.target.value;
-                break;
-            case "country":
-                this.country = e.target.value;
-                this.handleConsent(e.target);
-                break;
-            default:
-                break;
-        }
-    }
-
-    handleSubmit(e: Event) {
-        e.preventDefault();
-
-        const allFormElements = Array.from(
-            this.template.querySelectorAll("dx-input, dx-select, dx-checkbox")
-        );
-
-        const legalCheckboxElement = this.template.querySelector(
-            "dx-checkbox.legal-checkbox"
-        );
-
-        if (legalCheckboxElement) {
-            allFormElements.push(legalCheckboxElement);
-        }
-
-        const passed = !allFormElements
-            .map((formElement) => formElement.reportValidity())
-            .includes(false);
-
-        // All fields passed validation
-        if (passed) {
-            this.sendFormData();
-        }
-    }
-
-    setInitialEmail() {
-        // Set email if provided in the query param
-        const queryString = window.location.search;
-        const urlParams = new URLSearchParams(queryString);
-
-        const subscriberEmail = urlParams.get("subscriberEmail");
-
-        if (subscriberEmail) {
-            this.email = subscriberEmail;
-        }
-    }
-
-    getFormData() {
-        const marketingConsented = this.template.querySelector(
-            "dx-checkbox.marketing-checkbox"
-        )?.checked;
-        const date = new Date().toISOString();
-
-        return {
-            InfoEmail: marketingConsented ? true : false,
-            "First Name": this.firstName,
-            "Last Name": this.lastName,
-            Consent: marketingConsented
-                ? "Explicit"
-                : this.showMarketingCheckbox
-                ? ""
-                : "Implied",
-            "Email Status Update": date,
-            email: this.email,
-            Country: this.country,
-            "Privacy Policy": true,
-            referrer: "footer"
-        };
-    }
-
-    async sendFormData() {
-        const formData = this.getFormData();
-        const errorMsg = "Error while subscribing to newsletter";
-        const submitButtonEl = this.template.querySelector(".form-submit");
-
-        submitButtonEl.setAttribute("disabled", "true");
-        submitButtonEl.textContent = "...Processing request";
-
-        try {
-            const res = await fetch("/pages/pardot/footer_optin", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify(formData)
-            });
-
-            if (!res.ok) {
-                throw new Error(errorMsg);
-            }
-
-            const data = await res.json();
-
-            if (!data.success) {
-                throw new Error(errorMsg);
-            }
-
-            // GTM event
-            track(submitButtonEl, "custEv_formCompletion", ANALYTICS_INFO);
-
-            window.location.assign("/newsletter/success");
-        } catch (error) {
-            submitButtonEl.setAttribute("disabled", "false");
-            submitButtonEl.textContent = "Subscribe Now";
-            console.error(error);
-        }
-    }
-
-    handleConsent(countrySelectElement: any) {
-        if (this.checkboxTextSet) {
-            const countryOptions = countrySelectElement.jsonOptions.find(
-                (jsonOption) => jsonOption.value === countrySelectElement.value
-            );
-
-            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);
-
-        // Toggle visibility of legal/marketing data
-        this.toggleLegalAndMarketingVisibility(
-            countryOptions.showLegalText,
-            countryOptions.showLegalCheckbox,
-            countryOptions.showMarketingCheckbox
-        );
-
-        // 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;
-    }
-
-    toggleLegalAndMarketingVisibility(
-        showLegalText: boolean,
-        showLegalCheckbox: boolean,
-        showMarketingCheckbox: boolean
-    ) {
-        this.showLegalText = showLegalText;
-        this.showLegalCheckbox = showLegalCheckbox;
-        this.showMarketingCheckbox = showMarketingCheckbox;
-    }
-
-    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;
-    }
-}

package/src/modules/dx/podcastSubscription/podcastSubscription.css

@@ -1,91 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-.container {
-    background-repeat: no-repeat;
-    background-position: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-@media screen and (max-width: 768px) {
-    .container {
-        background-image: url("/assets/svg/podcast-subscription-clouds-small.svg");
-        background-size: auto 200px;
-    }
-
-    .dx-text-heading-4 {
-        max-width: 28ex;
-        font-size: var(--dx-g-text-lg);
-    }
-
-    .badges {
-        margin: 8px auto 6px auto;
-        text-align: center;
-    }
-
-    .badges a {
-        display: inline-block;
-        margin: 4px auto;
-    }
-
-    .badges img {
-        width: 164px;
-    }
-
-    .secondary-links {
-        display: none;
-    }
-
-    .or-wherever {
-        margin-top: 2px;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .container {
-        background-image: url("/assets/svg/podcast-subscription-clouds.svg");
-        min-height: 230px;
-    }
-
-    .badges {
-        display: flex;
-        flex-direction: row;
-    }
-
-    .badges a {
-        display: inline-block;
-        margin: 22px 13px 8px 13px;
-    }
-
-    .badges img {
-        height: 40px;
-    }
-
-    .or-wherever {
-        display: none;
-    }
-
-    .secondary-links {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    .secondary-links li {
-        margin: 9px 6px;
-    }
-
-    .secondary-links a {
-        color: var(--dx-g-blue-vibrant-50);
-        text-decoration: none;
-    }
-
-    .secondary-links a:hover {
-        text-decoration: underline;
-    }
-}

package/src/modules/dx/podcastSubscription/podcastSubscription.html

@@ -1,24 +0,0 @@
-<template>
-    <div class="container">
-        <h2 class="dx-text-heading-4">
-            Tune in to the Salesforce Developers Podcast
-        </h2>
-        <ul class="badges">
-            <template for:each={badgeLinks} for:item="badgeLink">
-                <li key={badgeLink.href}>
-                    <a href={badgeLink.href}>
-                        <img src={badgeLink.imgSrc} alt={badgeLink.imgAlt} />
-                    </a>
-                </li>
-            </template>
-        </ul>
-        <p class="or-wherever">Or wherever you listen to podcasts!</p>
-        <ul class="secondary-links">
-            <template for:each={secondaryLinks} for:item="secondaryLink">
-                <li key={secondaryLink.href}>
-                    <a href={secondaryLink.href}>{secondaryLink.text}</a>
-                </li>
-            </template>
-        </ul>
-    </div>
-</template>

package/src/modules/dx/podcastSubscription/podcastSubscription.ts

@@ -1,52 +0,0 @@
-import { LightningElement } from "lwc";
-
-export default class PodcastSubscription extends LightningElement {
-    badgeLinks = [
-        {
-            href: "https://podcasts.apple.com/us/podcast/salesforce-developer-podcast/id1482325260",
-            imgAlt: "Listen on Apple Podcasts",
-            imgSrc: "/assets/svg/podcasts-subscription-apple.svg"
-        },
-        {
-            href: "https://www.google.com/podcasts?feed=aHR0cHM6Ly9zYWxlc2ZvcmNlZGV2cG9kY2FzdC5saWJzeW4uY29tL3Jzcw%3D%3D",
-            imgAlt: "Listen on Google Podcasts",
-            imgSrc: "/assets/svg/podcasts-subscription-google.svg"
-        },
-        {
-            imgSrc: "/assets/svg/podcasts-subscription-spotify.svg",
-            imgAlt: "Listen on Spotify",
-            href: "https://open.spotify.com/show/75y378cB3FM6RQ8MGUDJ5M"
-        }
-    ];
-
-    secondaryLinks = [
-        {
-            href: "https://app.stitcher.com/browse/feed/470480/details",
-            text: "Stitcher"
-        },
-        {
-            href: "https://www.amazon.com/Emerald-City-Productions-Salesforce-Developer/dp/B082PPXMLN/",
-            text: "Alexa"
-        },
-        {
-            href: "https://www.pandora.com/podcast/salesforce-developer-podcast/PC:34746",
-            text: "Pandora"
-        },
-        {
-            href: "https://www.iheart.com/podcast/263-salesforce-developer-podca-56252827",
-            text: "iHeartRadio"
-        },
-        {
-            href: "https://tunein.com/podcasts/Technology-Podcasts/Salesforce-Developer-Podcast-p1255006/",
-            text: "Tune-in"
-        },
-        {
-            href: "https://player.fm/series/salesforce-developer-podcast",
-            text: "PlayerFM"
-        },
-        {
-            href: "https://dev.to/salesforce_developers_podcast",
-            text: "dev.to"
-        }
-    ];
-}