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

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.0",
     "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,69 @@
+<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}
+                            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,285 @@
+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";
+
+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: {
+        text: string;
+        variant?: string;
+        iconSprite?: string;
+        iconSymbol?: string;
+    };
+    secondaryActionHtml?: string;
+    showStepNumber?: boolean;
+    stepTitle: string;
+};
+
+export default class J2sCardSequence extends LightningElement {
+    _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) {
+        this._stepsData = getListWithUuids<StepDatum>(toJson(value)).map(
+            (stepDatum) => {
+                // small bit of normalization for cleaner HTML templates with non-required props, etc.
+                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();
+    }
+
+    renderedCallback() {
+        if (this.isLoading) {
+            return;
+        }
+
+        const { bodyHtml, secondaryActionHtml } =
+            this.stepsData[this.currentSequenceStep];
+        const bodyMarkupContainer =
+            this.template.querySelectorAll("span.body-markup")[
+                this.currentSequenceStep
+            ];
+        const secondaryActionMarkupContainer = this.template.querySelectorAll(
+            "span.secondary-action-markup"
+        )[this.currentSequenceStep];
+        if (bodyMarkupContainer) {
+            bodyMarkupContainer.innerHTML = bodyHtml || "";
+        }
+        if (secondaryActionMarkupContainer) {
+            secondaryActionMarkupContainer.innerHTML =
+                secondaryActionHtml || "";
+        }
+    }
+
+    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;
+            // @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
+        } else if (this.currentSequenceStep === 3) {
+            // TODO: Join Slack
+        }
+    }
+
+    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 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);
+        }
+
+        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.initialStepIndex = 0;
+            (
+                this.template.querySelector(
+                    "dx-step-sequence"
+                ) as unknown as StepSequence
+            )?.jumpToStep(0);
+        }
+
+        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);
+}

package/src/modules/dw/j2sForm/j2sForm.html

@@ -0,0 +1,158 @@
+<template>
+    <form class="j2s-form">
+        <div class="form-row">
+            <dx-input
+                class="first-name-field"
+                label="First Name"
+                missing-error-message="Enter your first name"
+                name="first_name"
+                placeholder="Your first name"
+                required
+                validity-on-blur
+                onblur={handleRequiredFieldUpdate}
+                value={state.firstName}
+            ></dx-input>
+            <dx-input
+                class="last-name-field"
+                label="Last Name"
+                missing-error-message="Enter your last name"
+                name="last_name"
+                placeholder="Your last name"
+                required
+                validity-on-blur
+                onblur={handleRequiredFieldUpdate}
+                value={state.lastName}
+            ></dx-input>
+        </div>
+        <div class="form-row">
+            <dx-input
+                class="company-name-field"
+                label="Company Name"
+                missing-error-message="Enter your company name"
+                name="company_name"
+                placeholder="Your company name"
+                required
+                validity-on-blur
+                onblur={handleRequiredFieldUpdate}
+                value={state.companyName}
+            ></dx-input>
+            <dx-select
+                if:false={isJobRoleRequired}
+                class="job-role-field"
+                label="Job Role"
+                message-when-value-missing="Select your job role"
+                name="job_role"
+                options={jobRoles}
+                placeholder="Select Job Role"
+                value={state.jobRole}
+            ></dx-select>
+            <dx-select
+                if:true={isJobRoleRequired}
+                class="job-role-field"
+                label="Job Role"
+                message-when-value-missing="Select your job role"
+                name="job_role"
+                options={jobRoles}
+                placeholder="Select Job Role"
+                required
+                value={state.jobRole}
+                onchange={handleRequiredFieldUpdate}
+            ></dx-select>
+        </div>
+        <div class="form-row">
+            <dx-input
+                name="email"
+                type="email"
+                placeholder="Your email address"
+                label="Email"
+                missing-error-message="Enter your email address"
+                validity-on-blur="true"
+                required
+                onblur={handleRequiredFieldUpdate}
+                value={state.email}
+            ></dx-input>
+            <dx-select
+                label="Country/Region"
+                message-when-value-missing="Select your country/region"
+                name="country"
+                options={countries}
+                placeholder="Select Country/Region"
+                required
+                value={state.country}
+                onchange={handleCountryChange}
+            ></dx-select>
+        </div>
+        <div class="form-row" if:true={isCountryWithReferralInput}>
+            <dx-input
+                name="referral_email"
+                class="referral-email-field full-width"
+                label="If anyone has referred you, please share their Email ID below, with their consent."
+                type="email"
+            ></dx-input>
+        </div>
+        <div class="form-row" if:true={isNotParticipatingCountry}>
+            <dx-alert
+                alert-info={notAvailableAlertInfo}
+                class="full-width"
+                type="danger"
+                variant="accented"
+            ></dx-alert>
+        </div>
+        <div class="form-terms-container">
+            <div class="form-row" if:true={state.showMarketingText}>
+                <dx-checkbox
+                    value="marketing-terms"
+                    name="marketing_terms"
+                    required
+                    class="terms"
+                    onchange={handleRequiredFieldUpdate}
+                    disabled={isNotParticipatingCountry}
+                >
+                    <span lwc:dom="manual" class="marketing-terms"></span>
+                </dx-checkbox>
+            </div>
+            <div class="form-row">
+                <dx-checkbox
+                    value="j2s-terms"
+                    name="j2s_terms"
+                    required
+                    class="terms"
+                    onchange={handleRequiredFieldUpdate}
+                    disabled={isNotParticipatingCountry}
+                >
+                    <span lwc:dom="manual" class="j2s-terms"></span>
+                </dx-checkbox>
+            </div>
+            <div class="form-row">
+                <dx-checkbox
+                    if:true={state.showLegalCheckbox}
+                    value="legal-terms"
+                    name="legal_terms"
+                    required
+                    class="terms"
+                    onchange={handleRequiredFieldUpdate}
+                    disabled={isNotParticipatingCountry}
+                >
+                    <span lwc:dom="manual" class="legal-terms"></span>
+                    <template if:true={state.learnMore}>
+                        <dx-button
+                            variant="inline-inherit"
+                            onclick={handleLearnMore}
+                        >
+                            Learn More
+                        </dx-button>
+                        <span
+                            lwc:dom="manual"
+                            class="legal-terms-learn-more hidden"
+                        ></span>
+                    </template>
+                </dx-checkbox>
+                <span
+                    if:false={state.showLegalCheckbox}
+                    lwc:dom="manual"
+                    class="legal-terms no-checkbox"
+                ></span>
+            </div>
+        </div>
+    </form>
+</template>