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

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.153",
     "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": "d7535afec7c9bd14eba65ebb6108a59e9dd6c948"
 }

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;
-    }
-}

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

@@ -1,61 +0,0 @@
-export const stepSequenceData = {
-    animateTransitions: "true",
-    stepsData: [
-        {
-            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>',
-            primaryAction: {
-                text: "Get Started"
-            },
-            showStepNumber: "true",
-            stepTitle: "Get started now."
-        },
-        {
-            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>',
-            formData: {
-                countriesWithReferralInput: ["IN"],
-                countriesWithRequiredJobRole: ["CA"],
-                formId: "j2s-form",
-                j2sTerms:
-                    'I agree to the Journey to Salesforce Program Terms, subject to the <a href="http://www.google.com">Salesforce Program Agreement</a>.',
-                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"]
-            },
-            primaryAction: {
-                text: "Complete Registration"
-            },
-            secondaryActionHtml:
-                '<span class="required-notice">* Required to participate in Journey to Salesforce</span>',
-            showStepNumber: "true",
-            stepTitle: "Complete your registration."
-        },
-        {
-            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></div>',
-            headerData: {
-                backgroundColor: "green-vibrant-95",
-                iconSymbol: "check-circle",
-                iconSprite: "general",
-                iconColor: "green-vibrant-65",
-                textColor: "indigo-vibrant-20"
-            },
-            primaryAction: {
-                iconSprite: "utility",
-                iconSymbol: "new_window",
-                link:
-                    "https://salesforce-external.slack.com/archives/C05HJK4PGJV",
-                text: "Join Slack",
-                variant: "custom"
-            },
-            secondaryActionHtml:
-                '<span class="dx-text-display-7">Ready to jump in?</span>',
-            showStepNumber: "true",
-            stepTitle: "Your Registration is Confirmed"
-        }
-    ]
-};

package/src/modules/dw/j2sCardSequenceStep/j2sCardSequenceStep.css

@@ -1,47 +0,0 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-@import "dxHelpers/card";
-
-/* Special styling for the final step's actions if they are shown */
-dx-card-step.final-card-with-action::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;
-}
-
-.final-email-address {
-    display: block;
-    margin-top: 20px;
-    line-height: 24px;
-    color: var(--dx-g-blue-vibrant-50);
-}
-
-.referral-email-field {
-    --dx-c-input-width: 100%;
-}
-
-.spinner-container {
-    min-height: 200px;
-    position: relative;
-}

package/src/modules/dw/j2sCardSequenceStep/j2sCardSequenceStep.html

@@ -1,59 +0,0 @@
-<template>
-    <dx-card-step
-        class={stepClassName}
-        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={stepTotalCount}
-        step-index={stepIndex}
-        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={countryOptions}
-                        form-metadata={stepDatum.formData}
-                        incoming-user-info={userInfo}
-                        onformvaliditychange={handleFormValidityChange}
-                        recaptcha-token={recaptchaToken}
-                    >
-                        <div slot="form-captcha-slot">
-                            <slot name="card-step-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
-                if:true={showPrimaryAction}
-                class="primary-action"
-                disabled={isJ2sFormInvalid}
-                href={primaryActionLink}
-                icon-sprite={stepDatum.primaryAction.iconSprite}
-                icon-symbol={stepDatum.primaryAction.iconSymbol}
-                loading={isLoading}
-                onclick={handlePrimaryAction}
-                size="large"
-                target={primaryActionLinkTarget}
-                variant={primaryActionVariant}
-            >
-                {primaryActionText}
-            </dx-button>
-        </div>
-    </dx-card-step>
-</template>