@salesforcedevs/dw-components 1.3.148-canary.9 → 1.3.150

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,8 +14,6 @@
         "dw/docsGrid",
         "dw/eventsList",
         "dw/instrumentation",
-        "dw/j2sCardSequence",
-        "dw/j2sForm",
         "dw/newsletterForm",
         "dw/podcastSubscription",
         "dw/podcastsGrid",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.148-canary.9",
+    "version": "1.3.150",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -14,7 +14,7 @@
         "lodash.clonedeep": "^4.5.0",
         "lodash.orderby": "^4.6.0",
         "lodash.uniqby": "^4.7.0",
-        "query-string": "^7.1.1"
+        "query-string": "^7.1.3"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
@@ -23,5 +23,6 @@
         "@types/lodash.uniqby": "^4.7.7",
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
-    }
+    },
+    "gitHead": "ca1041e6f13585f85b24a5ca48804f20e040d405"
 }

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

@@ -1,53 +0,0 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-@import "dxHelpers/card";
-
-: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);
-}
-
-dx-step-sequence-step:last-child dx-card-step::part(footer-container) {
-    background-color: var(--dx-g-indigo-vibrant-95);
-    border-radius: 8px;
-    margin: 0 30px 30px 30px;
-}
-
-[slot="secondary-action-section"] {
-    color: var(--dx-g-red-vibrant-50);
-    position: relative;
-    font-size: var(--dx-g-text-xs, 12px);
-    font-family: var(--dx-g-font-sans);
-    line-height: 18px;
-    text-align: left;
-}
-
-.body-container li {
-    line-height: var(--dx-g-text-2xl);
-}
-
-.body-container p:not(:last-child) {
-    padding-bottom: 20px;
-}
-
-.body-markup {
-    display: block;
-    padding-bottom: var(--dx-g-spacing-md);
-}
-
-.referral-email-field {
-    --dx-c-input-width: 100%;
-}
-
-.spinner-container {
-    min-height: 200px;
-    position: relative;
-}

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

@@ -1,75 +0,0 @@
-<template>
-    <dx-step-sequence
-        animate-transitions={animateTransitions}
-        communicate-step-changes="true"
-        initial-step-index={initialStepIndex}
-        onstepsequencechange={handleStepSequenceChange}
-        session-storage-id={sessionStorageId}
-        use-history={useHistory}
-    >
-        <template for:each={stepsData} for:item="stepDatum" for:index="index">
-            <dx-step-sequence-step key={stepDatum.id}>
-                <dx-card-step
-                    header-icon-symbol={stepDatum.headerData.iconSymbol}
-                    header-icon-sprite={stepDatum.headerData.iconSprite}
-                    header-icon-color={stepDatum.headerData.iconColor}
-                    header-background-color={stepDatum.headerData.backgroundColor}
-                    header-text-color={stepDatum.headerData.textColor}
-                    show-step-number={stepDatum.showStepNumber}
-                    step-count={stepsData.length}
-                    step-index={index}
-                    step-title={stepDatum.stepTitle}
-                >
-                    <div slot="card-body" class="body-container">
-                        <template if:true={isLoading}>
-                            <div class="spinner-container">
-                                <dx-spinner
-                                    size="large"
-                                    variant="brand"
-                                ></dx-spinner>
-                            </div>
-                        </template>
-                        <template if:false={isLoading}>
-                            <span lwc:dom="manual" class="body-markup"></span>
-                            <template if:true={stepDatum.formData}>
-                                <dw-j2s-form
-                                    id={stepDatum.formData.formId}
-                                    countries={countries}
-                                    form-metadata={stepDatum.formMetadata}
-                                    incoming-user-info={formIncomingUserInfo}
-                                    onformvaliditychange={handleFormValidityChange}
-                                    recaptcha-token={recaptchaToken}
-                                >
-                                    <div slot="form-captcha-slot">
-                                        <slot name="captcha-slot"></slot>
-                                    </div>
-                                </dw-j2s-form>
-                            </template>
-                        </template>
-                    </div>
-                    <div slot="secondary-action-section">
-                        <span
-                            lwc:dom="manual"
-                            class="secondary-action-markup"
-                        ></span>
-                    </div>
-                    <div slot="primary-action-section">
-                        <dx-button
-                            class="primary-action"
-                            disabled={isJ2sFormInvalid}
-                            href={stepDatum.primaryAction.link}
-                            icon-sprite={stepDatum.primaryAction.iconSprite}
-                            icon-symbol={stepDatum.primaryAction.iconSymbol}
-                            loading={isLoading}
-                            onclick={primaryActionHandler}
-                            size="large"
-                            variant={primaryActionVariant}
-                        >
-                            {stepDatum.primaryAction.text}
-                        </dx-button>
-                    </div>
-                </dx-card-step>
-            </dx-step-sequence-step>
-        </template>
-    </dx-step-sequence>
-</template>

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

@@ -1,395 +0,0 @@
-import { api, LightningElement } from "lwc";
-import StepSequence from "dx/stepSequence";
-import { getListWithUuids } from "dxUtils/list";
-import { track } from "dxUtils/analytics";
-import { toJson } from "dxUtils/normalizers";
-
-export type StepDatum = {
-    bodyHtml?: 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;
-        text: string;
-        variant?: string;
-    };
-    secondaryActionHtml?: string;
-    showStepNumber?: boolean;
-    stepTitle: string;
-};
-
-function isNoAnimationCookieSet() {
-    return document.cookie
-        .split(";")
-        .some((ck) => ck.trim() === "no_j2s_animation=true");
-}
-
-export default class J2sCardSequence extends LightningElement {
-    _didRenderStaticInnerHtml = false;
-    _isDrmLoading = false;
-    _isFormSubmitting = false;
-    _isJ2sFormInvalid = false;
-    _isTbidLoading = false;
-    _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.
-        this._stepsData = getListWithUuids<StepDatum>(toJson(value)).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"
-                    }
-                };
-
-                if (normalizedStepDatum.formData) {
-                    (normalizedStepDatum as any).formMetadata = JSON.stringify(
-                        normalizedStepDatum.formData
-                    );
-                }
-
-                return normalizedStepDatum;
-            }
-        );
-    }
-
-    private countries = "[]";
-    private currentSequenceStep = 0;
-    private recaptchaToken = "";
-    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 isJ2sFormInvalid() {
-        return this.currentSequenceStep === 1 ? this._isJ2sFormInvalid : false;
-    }
-    private set isJ2sFormInvalid(isFormInvalid: boolean) {
-        this._isJ2sFormInvalid = isFormInvalid;
-    }
-
-    private get primaryActionVariant() {
-        if (this.currentSequenceStep === 1 && this.isJ2sFormInvalid) {
-            return "custom"; // override for disabled button styling
-        }
-        return this.stepsData[this.currentSequenceStep || 0].primaryAction
-            .variant;
-    }
-
-    private get formIncomingUserInfo() {
-        if (!this.tbidUserInfo) {
-            return "{}";
-        }
-
-        return JSON.stringify({
-            firstName: this.tbidUserInfo.given_name,
-            lastName: this.tbidUserInfo.family_name,
-            email: this.tbidUserInfo.email,
-            jobRole: this.tbidUserInfo.custom_attributes?.Role,
-            companyName: this.tbidUserInfo.custom_attributes?.CompanyName,
-            country: this.tbidUserInfo.custom_attributes?.Country
-        });
-    }
-
-    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;
-    }
-
-    @api
-    recaptchaExpiredCallback() {
-        this.recaptchaToken = "";
-    }
-
-    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();
-        if (isNoAnimationCookieSet()) {
-            /* eslint-disable-next-line @lwc/lwc/no-api-reassignments */
-            this.animateTransitions = false;
-        }
-    }
-
-    renderedCallback() {
-        if (this.isLoading) {
-            return;
-        }
-
-        if (!this._didRenderStaticInnerHtml) {
-            this.updateStaticInnerHtml();
-            this._didRenderStaticInnerHtml = true;
-        }
-    }
-
-    handleFormValidityChange({ detail }: CustomEvent) {
-        this.isJ2sFormInvalid = !detail.isValid;
-    }
-
-    handleStepSequenceChange({ detail }: CustomEvent) {
-        this.currentSequenceStep = detail.stepIndex;
-        this.resetCustomButtonColors();
-    }
-
-    handleGetStarted(evt: Event) {
-        // 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) {
-            evt.preventDefault();
-            this.initialStepIndex = 1;
-            this._isTbidLoading = true;
-            // @ts-ignore: call out to the tbid-controller on DSC
-            window.__startTbidLogin();
-        }
-    }
-
-    async handleFormSubmit(evt: Event) {
-        if (!this.formHandler || this.isJ2sFormInvalid || !this.isLoggedIn) {
-            return;
-        }
-
-        evt.preventDefault(); // don't proceed automatically to next step
-        this._isFormSubmitting = true;
-
-        try {
-            const formData = (this.template.querySelector("dw-j2s-form") as any)
-                ?.formDataForDrm;
-            // For some countries, explicit approvals will be present; for others, it is implicitly assumed
-            if (typeof formData.Opt_In__c !== "boolean") {
-                formData.Opt_In__c = true;
-            }
-            if (typeof formData.Privacy_Statement__c !== "boolean") {
-                formData.Privacy_Statement__c = true;
-            }
-
-            console.log("submitting", JSON.stringify(formData, null, 2));
-            const res = await fetch(this.formHandler, {
-                method: "POST",
-                headers: {
-                    "Captcha-Response": this.recaptchaToken,
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify({
-                    ...formData,
-                    "Content-Type": "application/json",
-                    handlerName: "J2S Registration Page",
-                    TBID__c: this.tbidUserInfo.user_id
-                })
-            });
-
-            if (res.ok) {
-                const resData = await res.json();
-                if (resData.status === "success") {
-                    this.jumpToStepIndex(2);
-                } else {
-                    throw new Error(
-                        `Form submission failed. (status: ${resData.status}, message: ${resData.errorMessage})`
-                    );
-                }
-            }
-        } catch (ex) {
-            console.error(ex); // TODO
-        }
-
-        this._isFormSubmitting = false;
-    }
-
-    primaryActionHandler(evt: Event) {
-        const target = evt.target as HTMLButtonElement;
-
-        if (!target || target.disabled) {
-            evt.preventDefault();
-            return;
-        }
-
-        track(target, "custEv_ctaButtonClick", {
-            click_text: target.textContent,
-            element_title: this.stepsData[this.currentSequenceStep].stepTitle,
-            click_url:
-                this.stepsData[this.currentSequenceStep].primaryAction.link ||
-                "",
-            element_type: "button",
-            content_category: "cta"
-        });
-
-        if (!this.currentSequenceStep) {
-            this.handleGetStarted(evt);
-        } else if (this.currentSequenceStep === 1) {
-            this.handleFormSubmit(evt);
-        }
-    }
-
-    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 jumpToStepIndex(stepIndex: number) {
-        this.initialStepIndex = stepIndex; // update sessionStorage value
-        ((this.template.querySelector(
-            "dx-step-sequence"
-        ) as unknown) as StepSequence)?.jumpToStep(stepIndex);
-    }
-
-    // HTML is received via config from DSC and should be static after initial render.
-    private updateStaticInnerHtml() {
-        const bodyMarkupContainers = this.template.querySelectorAll(
-            "span.body-markup"
-        );
-        const secondaryActionMarkupContainers = this.template.querySelectorAll(
-            "span.secondary-action-markup"
-        );
-
-        this.stepsData.forEach((step, stepIndex) => {
-            const { bodyHtml, secondaryActionHtml } = step;
-            const bodyMarkupContainer = bodyMarkupContainers[stepIndex];
-            const secondaryActionMarkupContainer =
-                secondaryActionMarkupContainers[stepIndex];
-
-            if (bodyMarkupContainer) {
-                bodyMarkupContainer.innerHTML = bodyHtml || "";
-            }
-            if (secondaryActionMarkupContainer) {
-                secondaryActionMarkupContainer.innerHTML =
-                    secondaryActionHtml || "";
-            }
-        });
-    }
-
-    private async getCountryList() {
-        this._isDrmLoading = true;
-
-        const errorMsg = "Error while getting county 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);
-            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();
-            }
-        } 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;
-    }
-}

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

@@ -1,46 +0,0 @@
-export const stepsData = [
-    {
-        showStepNumber: "true",
-        stepTitle: "Get started now.",
-        bodyHtml:
-            '<p class="dx-text-display-7">Register for Journey to Salesforce and you\'ll be on your way to becoming a Salesforce Developer.</p><ul class="dx-text-display-8"><li>Step 1: Log in or sign up for a free Trailblazer.me account</li><li>Step 2: Confirm your program registration</li><li>Step 3: Begin your journey!</li></ul>',
-        primaryActionText: "Get Started"
-    },
-    {
-        showStepNumber: "true",
-        stepTitle: "Complete your registration.",
-        formData: {
-            countriesWithReferralInput: ["IN"],
-            countriewWithRequiredJobRole: ["CA"],
-            notAvailableAlertInfo: {
-                title: "Not Available",
-                body: 'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
-            },
-            participatingCountryCodes: ["US", "CA", "IN"]
-        },
-        bodyHtml:
-            '<p class="dx-text-display-7">You\'re almost done! Please review your information and agree to the Journey to Salesforce program terms and conditions.</p>',
-        secondaryActionHtml:
-            '<span class="required-notice">* Required to participate in Journey to Salesforce</span>',
-        primaryActionText: "Complete Registration"
-    },
-    {
-        showStepNumber: "true",
-        stepTitle: "Your Registration is Confirmed",
-        headerData: {
-            iconSymbol: "check-circle",
-            iconSprite: "general",
-            iconColor: "green-vibrant-65",
-            backgroundColor: "green-vibrant-95",
-            textColor: "indigo-vibrant-20"
-        },
-        bodyHtml:
-            '<div class="dx-text-display-8"><p>Welcome to Journey to Salesforce! Congratulations on taking this step in your journey towards becoming a Salesforce Developer. Through this program you\'ll gain the knowledge, experience, and skills to help you excel in the Salesforce ecosystem.</p><p>To get started, click the button below to join the Journey to Salesforce community, and make sure to check your email for links to bookmark!</p>',
-        secondaryActionHtml:
-            '<span class="dx-text-display-7">Ready to jump in?</span>',
-        primaryActionText: "Join Slack",
-        primaryActionVariant: "custom",
-        primaryActionIconSprite: "utility",
-        primaryActionIconSymbol: "new_window"
-    }
-];

package/src/modules/dw/j2sForm/j2sForm.css

@@ -1,52 +0,0 @@
-.hidden {
-    display: none;
-}
-
-.form-row {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: var(--dx-g-spacing-md);
-}
-
-.form-row > * {
-    --dx-c-input-width: 100%;
-
-    font-family: var(--dx-g-font-sans);
-    width: calc(50% - 20px);
-}
-
-.form-row > :only-child {
-    max-width: 100%;
-    width: 100%;
-}
-
-.form-row .terms {
-    --dx-c-checkbox-text-line-height: 20px;
-    --dx-c-checkbox-font-size: 14px;
-
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-c-checkbox-font-size);
-    font-weight: var(--dx-g-font-normal);
-}
-
-.form-row .legal-terms-learn-more:not(.hidden) {
-    display: block;
-    padding-top: var(--dx-g-spacing-md);
-}
-
-.form-row .legal-terms.no-checkbox {
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-xs);
-    font-weight: var(--dx-g-font-normal);
-    margin-left: 28px;
-}
-
-.form-terms-container {
-    padding-top: var(--dx-g-spacing-sm);
-}
-
-.form-captcha-slot {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}