@salesforcedevs/dw-components 1.3.157-canary.6 → 1.3.162

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="true"
-        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,418 +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[];
-        salesforceEmployeeAlertInfo?: {
-            title: string;
-            body: 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;
-    MailingState?: 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;
-    RelationshipToSalesforce: string;
-};
-
-export default class J2sCardSequence extends LightningElement {
-    _isDrmLoading = false;
-    _isFormSubmitting = false;
-    _isTbidLoading = false;
-    _recaptchaResetTimeoutId: number | null = null;
-    _stepsData: StepDatum[] = [];
-    @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;
-        }
-
-        const tbidData = {
-            FirstName: this.tbidUserInfo.given_name,
-            LastName: this.tbidUserInfo.family_name,
-            Email: this.tbidUserInfo.email,
-            DRM_Role__c: this.tbidUserInfo.custom_attributes?.Role,
-            Company__c: this.tbidUserInfo.custom_attributes?.CompanyName,
-            MailingCountry: this.tbidUserInfo.custom_attributes?.Country,
-            MailingState: this.tbidUserInfo.address?.region,
-            RelationshipToSalesforce:
-                this.tbidUserInfo.custom_attributes?.RelationshipToSalesforce
-        };
-
-        // Return above object but only with keys that have a truthy value, and with any URI-encoded values decoded
-        return Object.keys(tbidData)
-            .filter((key) => Boolean(tbidData[key as keyof typeof tbidData]))
-            .reduce(
-                (data, keyWithDefinedValue) => ({
-                    ...data,
-                    [keyWithDefinedValue]: decodeURIComponent(
-                        tbidData[keyWithDefinedValue as keyof typeof tbidData]
-                    )
-                }),
-                {}
-            ) 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,76 +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),
-.body-container p:only-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);
-}
-
-.full-width-input-field {
-    --dx-c-input-width: 100%;
-}
-
-.spinner-container {
-    min-height: 200px;
-    position: relative;
-}
-
-@media screen and (max-width: 480px) {
-    .body-container li {
-        line-height: var(--dx-g-text-xl);
-        padding-bottom: 20px;
-    }
-
-    .body-container p[class] {
-        font-size: var(--dx-g-text-md);
-        line-height: 24px;
-    }
-
-    .final-email-address {
-        font-size: var(--dx-g-text-sm);
-    }
-
-    [slot="secondary-action-section"] {
-        text-align: center;
-        padding-bottom: 20px;
-    }
-}
-
-@media screen and (max-width: 320px) {
-    /* Special styling for the final step's actions if they are shown */
-    dx-card-step.final-card-with-action::part(footer-container) {
-        margin: 0 20px 30px 20px;
-    }
-}

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

@@ -1,63 +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
-                if:false={isLoading}
-                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>