@salesforcedevs/dw-components 1.3.147 → 1.3.148-canary.1

package/lwc.config.json

@@ -14,6 +14,8 @@
         "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.147",
+    "version": "1.3.148-canary.1",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -23,6 +23,5 @@
         "@types/lodash.uniqby": "^4.7.7",
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
-    },
-    "gitHead": "c046874452685c28208a52392b494ad791c3f305"
+    }
 }

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

@@ -0,0 +1,53 @@
+@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

@@ -0,0 +1,70 @@
+<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}
+                                ></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

@@ -0,0 +1,317 @@
+import { api, LightningElement } from "lwc";
+import StepSequence from "dx/stepSequence";
+import { getListWithUuids } from "dxUtils/list";
+import { toJson } from "dxUtils/normalizers";
+import Button from "dx/button";
+
+function isNoAnimationCookieSet() {
+    return document.cookie
+        .split(";")
+        .some((ck) => ck.trim() === "no_j2s_animation=true");
+}
+
+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;
+};
+
+export default class J2sCardSequence extends LightningElement {
+    _didRenderStaticInnerHtml = false;
+    _isDrmLoading = false;
+    _isJ2sFormInvalid = false;
+    _isTbidLoading = false;
+    _stepsData: StepDatum[] = [];
+    @api animateTransitions = false;
+    @api drmDomain: string = "https://drm.my.salesforce-sites.com";
+    @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 sessionStorageId = "j2s-card-sequence";
+    private tbidUserInfo: any; // TODO typings?
+
+    private get isLoading() {
+        return this._isDrmLoading || this._isTbidLoading;
+    }
+
+    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
+            })
+        );
+    }
+
+    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;
+        }
+    }
+
+    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();
+        }
+    }
+
+    handleFormValidityChange({ detail }: CustomEvent) {
+        this.isJ2sFormInvalid = !detail.isValid;
+    }
+
+    handleStepSequenceChange({ detail }: CustomEvent) {
+        this.currentSequenceStep = detail.stepIndex;
+        this.resetCustomButtonColors();
+    }
+
+    primaryActionHandler(evt: Event) {
+        if ((evt.target as Button)?.disabled) {
+            evt.preventDefault();
+            return;
+        }
+
+        if (!this.currentSequenceStep) {
+            this.handleGetStarted(evt);
+        } else if (this.currentSequenceStep === 2) {
+            // TODO: send data to DRM
+        }
+    }
+
+    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 jumpToStepOne() {
+        this.initialStepIndex = 0; // update sessionStorage value
+        (
+            this.template.querySelector(
+                "dx-step-sequence"
+            ) as unknown as StepSequence
+        )?.jumpToStep(0);
+    }
+
+    // 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.jumpToStepOne();
+            }
+        }
+
+        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.jumpToStepOne();
+        }
+
+        this._isTbidLoading = false;
+    }
+}

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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,46 @@
+.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);
+}