@salesforcedevs/dw-components 1.3.151-canary.1 → 1.3.155

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lwc.config.json

@@ -14,9 +14,6 @@
         "dw/docsGrid",
         "dw/eventsList",
         "dw/instrumentation",
-        "dw/j2sCardSequence",
-        "dw/j2sCardSequenceStep",
-        "dw/j2sForm",
         "dw/newsletterForm",
         "dw/podcastSubscription",
         "dw/podcastsGrid",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.151-canary.1",
+    "version": "1.3.155",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -23,5 +23,6 @@
         "@types/lodash.uniqby": "^4.7.7",
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
-    }
+    },
+    "gitHead": "49e14e97f56c7c2978f7dc7e8609ec921344e939"
 }

package/src/modules/dw/blogsGrid/blogsGrid.css

@@ -73,8 +73,8 @@ dx-section.section-reduced-padding {
 }
 
 .box {
-    background-image: url("/assets/svg/subscribe-background-left.svg"),
-        url("/assets/svg/subscribe-background-right.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-left.svg"),
+        url("https://a.sfdcstatic.com/developer-website/images/subscribe-background-right.svg");
     background-position: 4% 25%, 90% 60%;
     background-repeat: no-repeat;
     width: 100%;

package/src/modules/dw/contentArchive/contentArchive.css

@@ -101,7 +101,7 @@ button:active {
 }
 
 .empty-state-container {
-    background-image: url(/assets/svg/no-results-combined.svg);
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/no-results-combined.svg");
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;

package/src/modules/dw/contentArchive/contentArchive.html

@@ -11,7 +11,7 @@
             <dx-modal-drawer open={modalOpen} onclickclose={toggleModal}>
                 <img
                     if:true={filtersLoading}
-                    src="/assets/svg/sidebar-loading.svg"
+                    src="https://a.sfdcstatic.com/developer-website/images/sidebar-loading.svg"
                     alt="loading"
                     class="modal-loading"
                 />
@@ -60,7 +60,7 @@
             <template if:false={isMobile}>
                 <img
                     if:true={filtersLoading}
-                    src="/assets/svg/sidebar-loading.svg"
+                    src="https://a.sfdcstatic.com/developer-website/images/sidebar-loading.svg"
                     alt="loading"
                 />
                 <template if:false={filtersLoading}>

package/src/modules/dw/podcastSubscription/podcastSubscription.css

@@ -14,7 +14,7 @@
 
 @media screen and (max-width: 768px) {
     .container {
-        background-image: url("/assets/svg/podcast-subscription-clouds-small.svg");
+        background-image: url("https://a.sfdcstatic.com/developer-website/images/podcast-subscription-clouds-small.svg");
         background-size: auto 200px;
     }
 
@@ -48,7 +48,7 @@
 
 @media screen and (min-width: 768px) {
     .container {
-        background-image: url("/assets/svg/podcast-subscription-clouds.svg");
+        background-image: url("https://a.sfdcstatic.com/developer-website/images/podcast-subscription-clouds.svg");
         min-height: 230px;
     }
 

package/src/modules/dw/podcastSubscription/podcastSubscription.ts

@@ -3,19 +3,17 @@ import { LightningElement } from "lwc";
 export default class PodcastSubscription extends LightningElement {
     badgeLinks = [
         {
-            href:
-                "https://podcasts.apple.com/us/podcast/salesforce-developer-podcast/id1482325260",
+            href: "https://podcasts.apple.com/us/podcast/salesforce-developer-podcast/id1482325260",
             imgAlt: "Listen on Apple Podcasts",
-            imgSrc: "/assets/svg/podcasts-subscription-apple.svg"
+            imgSrc: "https://a.sfdcstatic.com/developer-website/images/podcasts-subscription-apple.svg"
         },
         {
-            href:
-                "https://www.google.com/podcasts?feed=aHR0cHM6Ly9zYWxlc2ZvcmNlZGV2cG9kY2FzdC5saWJzeW4uY29tL3Jzcw%3D%3D",
+            href: "https://www.google.com/podcasts?feed=aHR0cHM6Ly9zYWxlc2ZvcmNlZGV2cG9kY2FzdC5saWJzeW4uY29tL3Jzcw%3D%3D",
             imgAlt: "Listen on Google Podcasts",
-            imgSrc: "/assets/svg/podcasts-subscription-google.svg"
+            imgSrc: "https://a.sfdcstatic.com/developer-website/images/podcasts-subscription-google.svg"
         },
         {
-            imgSrc: "/assets/svg/podcasts-subscription-spotify.svg",
+            imgSrc: "https://a.sfdcstatic.com/developer-website/images/podcasts-subscription-spotify.svg",
             imgAlt: "Listen on Spotify",
             href: "https://open.spotify.com/show/75y378cB3FM6RQ8MGUDJ5M"
         }
@@ -27,23 +25,19 @@ export default class PodcastSubscription extends LightningElement {
             text: "Stitcher"
         },
         {
-            href:
-                "https://www.amazon.com/Emerald-City-Productions-Salesforce-Developer/dp/B082PPXMLN/",
+            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",
+            href: "https://www.pandora.com/podcast/salesforce-developer-podcast/PC:34746",
             text: "Pandora"
         },
         {
-            href:
-                "https://www.iheart.com/podcast/263-salesforce-developer-podca-56252827",
+            href: "https://www.iheart.com/podcast/263-salesforce-developer-podca-56252827",
             text: "iHeartRadio"
         },
         {
-            href:
-                "https://tunein.com/podcasts/Technology-Podcasts/Salesforce-Developer-Podcast-p1255006/",
+            href: "https://tunein.com/podcasts/Technology-Podcasts/Salesforce-Developer-Podcast-p1255006/",
             text: "Tune-in"
         },
         {

package/src/modules/dw/slackCta/slackCta.css

@@ -16,8 +16,8 @@
 }
 
 .podcast {
-    background-image: url("/assets/svg/slack-cta-podcast-background-left.svg"),
-        url("/assets/svg/slack-cta-podcast-background-right.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/slack-cta-podcast-background-left.svg"),
+        url("https://a.sfdcstatic.com/developer-website/images/slack-cta-podcast-background-right.svg");
     background-position: 20% 0%, 80% 100%;
     padding-top: 20px;
     margin-top: -20px;

package/src/modules/dw/tbidLoginMenu/tbidLoginMenu.html

@@ -10,7 +10,7 @@
             <div if:true={isLoggedIn}>
                 <div class="login-container logged-in">
                     <img
-                        src="/assets/svg/login-widget-bg.png"
+                        src="https://a.sfdcstatic.com/developer-website/images/login-widget-bg.png"
                         class="header-img"
                         alt="Light blue background image showing line-drawn hills and trees"
                     />
@@ -114,7 +114,7 @@
                                     </span>
                                     <img
                                         class="login-link-img"
-                                        src="/assets/svg/salesforce-cloud.svg"
+                                        src="https://a.sfdcstatic.com/developer-website/images/salesforce-cloud.svg"
                                         alt="Salesforce logo"
                                     />
                                     <dx-icon

package/src/modules/dw/j2sCardSequence/j2sCardSequence.css

@@ -1,14 +0,0 @@
-@import "dxHelpers/reset";
-
-:host {
-    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-button-custom-background: white;
-    --dx-c-button-custom-border: var(--dx-g-blue-vibrant-50);
-    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
-    --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-50);
-}
-
-dx-step-sequence {
-    scroll-margin-top: var(--dx-g-global-header-height);
-}

package/src/modules/dw/j2sCardSequence/j2sCardSequence.html

@@ -1,37 +0,0 @@
-<template>
-    <dx-step-sequence
-        animate-transitions={animateTransitions}
-        communicate-step-changes="true"
-        force-initially-visible={forceInitiallyVisible}
-        initial-step-index={initialStepIndex}
-        onstepsequencechange={handleStepSequenceChange}
-        optimize-position-after-animation="true"
-        session-storage-id={sessionStorageId}
-        use-history={useHistory}
-    >
-        <template for:each={stepsData} for:item="stepDatum" for:index="index">
-            <dx-step-sequence-step key={stepDatum.id}>
-                <dw-j2s-card-sequence-step
-                    country-options={countries}
-                    is-loading={isLoading}
-                    oncountrychange={handleCountryChange}
-                    ongetstarted={handleGetStarted}
-                    onformsubmit={handleFormSubmit}
-                    recaptcha-token={recaptchaToken}
-                    selected-country={selectedCountry}
-                    step-datum={stepDatum}
-                    step-index={index}
-                    step-total-count={stepsData.length}
-                    user-info={formIncomingUserInfo}
-                >
-                    <div
-                        if:true={stepDatum.formData}
-                        slot="card-step-captcha-slot"
-                    >
-                        <slot name="captcha-slot"></slot>
-                    </div>
-                </dw-j2s-card-sequence-step>
-            </dx-step-sequence-step>
-        </template>
-    </dx-step-sequence>
-</template>

package/src/modules/dw/j2sCardSequence/j2sCardSequence.ts

@@ -1,403 +0,0 @@
-import { api, LightningElement } from "lwc";
-import StepSequence from "dx/stepSequence";
-import { getListWithUuids } from "dxUtils/list";
-import { toJson } from "dxUtils/normalizers";
-import J2sCardSequenceStep from "dw/j2sCardSequenceStep";
-
-export type StepDatum = {
-    bodyHtml?:
-        | string
-        | {
-              default: string;
-              [countryCode: string]: string;
-          };
-    formData?: {
-        countriesWithReferralInput?: string[];
-        countriesWithRequiredJobRole?: string[];
-        formId?: string;
-        j2sTerms?: string;
-        notAvailableAlertInfo?: {
-            title: string;
-            body: string;
-        };
-        participatingCountryCodes?: string[];
-    };
-    headerData?: {
-        backgroundColor?: string;
-        iconColor?: string;
-        iconSprite?: string;
-        iconSymbol?: string;
-        textColor?: string;
-    };
-    primaryAction: {
-        iconSprite?: string;
-        iconSymbol?: string;
-        link?:
-            | string
-            | {
-                  default: string;
-                  [countryCode: string]: string;
-              };
-        linkTarget?: string;
-        text:
-            | string
-            | {
-                  default: string;
-                  [countryCode: string]: string;
-              };
-        variant?: string;
-    };
-    secondaryActionHtml?: string;
-    showStepNumber?: boolean;
-    stepTitle: string;
-};
-
-// Field names expected by DRM; see: https://salesforce.quip.com/daInAFETbPGm
-export type DrmFormData = {
-    Email: string;
-    FirstName: string;
-    LastName: string;
-    MailingCountry: string;
-    Company__c: string;
-    DRM_Role__c: string;
-    TBID__c: string;
-    Opt_In__c?: boolean;
-    Privacy_Statement__c?: boolean;
-    j2s_terms?: boolean;
-    Referral_Email__c?: string;
-};
-
-export default class J2sCardSequence extends LightningElement {
-    _isDrmLoading = false;
-    _isFormSubmitting = false;
-    _isTbidLoading = false;
-    _recaptchaResetTimeoutId: number | null = null;
-    _stepsData: StepDatum[] = [];
-    @api animateTransitions = false;
-    @api drmDomain: string = "https://drm.my.salesforce-sites.com";
-    @api formHandler: string =
-        "https://formhandlermule-1s9xrb.5sc6y6-4.usa-e2.cloudhub.io/form_handler";
-    @api tbidApiBaseUrl: string | undefined;
-    @api useHistory: boolean = false;
-
-    @api
-    get stepsData() {
-        return this._stepsData;
-    }
-    set stepsData(value) {
-        // normalize incoming value with uuid keys and non-required props (for cleaner HTML template), etc.
-        const valueWithUuids = getListWithUuids<StepDatum>(toJson(value));
-        this._stepsData = valueWithUuids.map((stepDatum) => {
-            const normalizedStepDatum = {
-                ...stepDatum,
-                headerData: stepDatum.headerData || {},
-                primaryAction: {
-                    ...stepDatum.primaryAction,
-                    variant: stepDatum.primaryAction.variant || "primary",
-                    iconSprite: stepDatum.primaryAction.iconSprite || "general",
-                    iconSymbol:
-                        stepDatum.primaryAction.iconSymbol || "arrow-right"
-                }
-            };
-
-            return normalizedStepDatum;
-        });
-    }
-
-    private countries: any[] = [];
-    private currentSequenceStep = 0;
-    private forceInitiallyVisible = false;
-    private formSubmissionFailureState: Partial<DrmFormData> | null = null;
-    private recaptchaToken = "";
-    private selectedCountry = "";
-    private sessionStorageId = "j2s-card-sequence";
-    private tbidUserInfo: any; // TODO typings?
-
-    private get isLoading() {
-        return (
-            this._isDrmLoading || this._isTbidLoading || this._isFormSubmitting
-        );
-    }
-
-    private get isLoggedIn() {
-        return Boolean(this.tbidUserInfo);
-    }
-
-    private get formIncomingUserInfo() {
-        if (!this.tbidUserInfo) {
-            return {} as DrmFormData;
-        }
-
-        return {
-            FirstName: decodeURIComponent(this.tbidUserInfo.given_name),
-            LastName: decodeURIComponent(this.tbidUserInfo.family_name),
-            Email: decodeURIComponent(this.tbidUserInfo.email),
-            DRM_Role__c: decodeURIComponent(
-                this.tbidUserInfo.custom_attributes?.Role
-            ),
-            Company__c: decodeURIComponent(
-                this.tbidUserInfo.custom_attributes?.CompanyName
-            ),
-            MailingCountry: decodeURIComponent(
-                this.tbidUserInfo.custom_attributes?.Country
-            )
-        } as DrmFormData;
-    }
-
-    private get initialStepIndex() {
-        let initialStepIndex = 0;
-
-        const storedSessionData = sessionStorage.getItem(this.sessionStorageId);
-        if (storedSessionData) {
-            try {
-                const { currentStepIndex } = JSON.parse(storedSessionData);
-                initialStepIndex = currentStepIndex;
-            } catch (ex) {
-                // noop
-            }
-        }
-
-        return initialStepIndex;
-    }
-    private set initialStepIndex(value: number) {
-        sessionStorage.setItem(
-            this.sessionStorageId,
-            JSON.stringify({
-                currentStepIndex: value
-            })
-        );
-    }
-
-    @api
-    recaptchaCallback(responseToken: string) {
-        this.recaptchaToken = responseToken;
-        clearTimeout(this._recaptchaResetTimeoutId as number);
-    }
-
-    @api
-    recaptchaExpiredCallback() {
-        this.recaptchaToken = "";
-        clearTimeout(this._recaptchaResetTimeoutId as number);
-    }
-
-    connectedCallback() {
-        this.getCountryList();
-        this.getTbidUserInfo();
-        // This has to be defined here since it depends on a variable that depends on sessionStorage.
-        this.currentSequenceStep = this.initialStepIndex;
-        this.resetCustomButtonColors();
-
-        try {
-            const isLoggingIn = sessionStorage.getItem(
-                `${this.sessionStorageId}__isLoginRedirect`
-            );
-            if (isLoggingIn) {
-                this.forceInitiallyVisible = true;
-                sessionStorage.removeItem(
-                    `${this.sessionStorageId}__isLoginRedirect`
-                );
-            }
-        } catch (ex) {
-            // noop
-        }
-    }
-
-    renderedCallback() {
-        if (!this.isLoading) {
-            (
-                this.template.querySelector(
-                    "dx-step-sequence"
-                ) as unknown as StepSequence
-            )?.remeasureSteps();
-        }
-
-        if (
-            this.formSubmissionFailureState &&
-            this.stepsData[this.currentSequenceStep].formData
-        ) {
-            const j2sCardStep = this.template.querySelectorAll(
-                "dw-j2s-card-sequence-step"
-            ) as unknown as J2sCardSequenceStep[];
-            j2sCardStep[this.currentSequenceStep]?.notifyFormSubmitFailure(
-                this.formSubmissionFailureState
-            );
-            this.formSubmissionFailureState = null;
-        }
-    }
-
-    handleCountryChange({ detail }: CustomEvent) {
-        this.selectedCountry = detail;
-    }
-
-    handleStepSequenceChange({ detail }: CustomEvent) {
-        this.currentSequenceStep = detail.stepIndex;
-        this.resetCustomButtonColors();
-
-        if (
-            this.currentSequenceStep !== 1 &&
-            this.recaptchaToken &&
-            this._recaptchaResetTimeoutId === null
-        ) {
-            // If the recaptcha element expires on its own while you are not on the 2nd (form) step, it messes with the
-            // page's layout (basically breaks it). So, we need to reset it _before_ expiration if you leave that step.
-            // We do it with a timeout so that the token is not immediately wiped if the user goes back and forth a bit.
-            this._recaptchaResetTimeoutId = window.setTimeout(
-                () => this.resetRecaptcha(),
-                1000 * 30 /* 30 seconds */
-            );
-        }
-    }
-
-    handleGetStarted() {
-        // If the user is not yet logged in, we need to prevent moving immediately to the next
-        // step, but set storage up so that they are on the second step when they return to the
-        // site in a logged-in state; then, we need to get them to log in.
-        if (!this.isLoggedIn) {
-            this.initialStepIndex = 1;
-            this._isTbidLoading = true;
-            sessionStorage.setItem(
-                `${this.sessionStorageId}__isLoginRedirect`,
-                "1" /* value doesn't matter */
-            );
-            (window as any).__startTbidLogin?.(); // call out to DSC tbid controller
-        } else {
-            this.jumpToStepIndex(1);
-        }
-    }
-
-    async handleFormSubmit({ detail: formData }: CustomEvent<DrmFormData>) {
-        if (!this.formHandler || !this.isLoggedIn) {
-            return;
-        }
-
-        this._isFormSubmitting = true;
-
-        try {
-            const res = await fetch(this.formHandler, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    "Captcha-Response": this.recaptchaToken
-                },
-                body: JSON.stringify({
-                    ...formData,
-                    handlerName: "J2S Registration Page",
-                    TBID__c: this.tbidUserInfo.user_id
-                })
-            });
-
-            if (res.ok) {
-                const resData = await res.json();
-                const resOutput = resData.handlePostRequestOutput || resData;
-                if (resOutput?.status === "success") {
-                    this.jumpToStepIndex(2, false);
-                    this.initialStepIndex = 0; // don't save final step in storage; rather, reset the starting step
-                    this.resetRecaptcha();
-                } else {
-                    throw new Error(
-                        `Form submission failed. (status: ${resOutput.status}, message: ${resOutput.errorMessage})`
-                    );
-                }
-            } else {
-                throw new Error(
-                    `Form submission failed. Non-ok response received from DRM.`
-                );
-            }
-        } catch (ex) {
-            this.formSubmissionFailureState = formData;
-            console.error(ex);
-        }
-
-        this._isFormSubmitting = false;
-    }
-
-    private resetCustomButtonColors() {
-        let bgColor;
-        let textColor;
-
-        if (this.currentSequenceStep === 1) {
-            bgColor = "var(--dx-g-gray-80)";
-            textColor = "white";
-        } else {
-            bgColor = "white";
-            textColor = "var(--dx-g-blue-vibrant-50)";
-        }
-
-        this.template.host.style.setProperty(
-            "--dx-c-button-custom-color",
-            textColor
-        );
-        this.template.host.style.setProperty(
-            "--dx-c-button-custom-background",
-            bgColor
-        );
-        this.template.host.style.setProperty(
-            "--dx-c-button-custom-border",
-            bgColor
-        );
-    }
-
-    private resetRecaptcha() {
-        clearTimeout(this._recaptchaResetTimeoutId as number);
-        this._recaptchaResetTimeoutId = null;
-        this.recaptchaToken = "";
-        (window as any).grecaptcha.reset();
-    }
-
-    private jumpToStepIndex(stepIndex: number, andStoreIndex = true) {
-        if (andStoreIndex) {
-            this.initialStepIndex = stepIndex; // update sessionStorage value
-        }
-        (
-            this.template.querySelector(
-                "dx-step-sequence"
-            ) as unknown as StepSequence
-        )?.jumpToStep(stepIndex);
-    }
-
-    private async getCountryList() {
-        this._isDrmLoading = true;
-
-        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);
-            }
-            this.countries = await res.json();
-        } catch (error) {
-            console.error(error);
-            if (this.initialStepIndex > 0) {
-                // Page loaded on a step higher than the first, but we can't get data for the form;
-                // send user back to the start for now.
-                this.jumpToStepIndex(0);
-            }
-        }
-
-        this._isDrmLoading = false;
-    }
-
-    private async getTbidUserInfo() {
-        this._isTbidLoading = true;
-
-        try {
-            const res = await fetch(`${this.tbidApiBaseUrl}/userinfo`);
-            if (res.ok) {
-                this.tbidUserInfo = await res.json();
-                this.selectedCountry = this.formIncomingUserInfo.MailingCountry;
-            }
-        } catch (ex) {
-            // noop; nothing to do here
-        }
-
-        if (!this.tbidUserInfo && this.initialStepIndex > 0) {
-            // login failed and the user was previously beyond the start step; need to send them
-            // back to the start:
-            this.jumpToStepIndex(0);
-        }
-
-        this._isTbidLoading = false;
-    }
-}