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

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>

package/src/modules/dw/j2sCardSequenceStep/j2sCardSequenceStep.ts

@@ -1,152 +0,0 @@
-import { api, LightningElement } from "lwc";
-import { DrmFormData, StepDatum } from "dw/j2sCardSequence";
-import { track } from "dxUtils/analytics";
-import J2sForm from "dw/j2sForm";
-
-export default class J2sCardSequenceStep extends LightningElement {
-    @api countryOptions: any[] = [];
-    @api isLoading = false;
-    @api recaptchaToken = "";
-    @api selectedCountry = "";
-    @api stepDatum!: StepDatum;
-    @api stepIndex = 0;
-    @api stepTotalCount = 0;
-    @api userInfo: any = {};
-
-    @api
-    public notifyFormSubmitFailure(formFailureData: Partial<DrmFormData>) {
-        (
-            this.template.querySelector("dw-j2s-form") as unknown as J2sForm
-        )?.notifySubmitFailure(formFailureData);
-    }
-
-    private _isJ2sFormInvalid = false;
-
-    private get stepClassName() {
-        return this.stepIndex === 2 && this.selectedCountry === "IN"
-            ? "final-card-with-action"
-            : "";
-    }
-
-    private get isJ2sFormInvalid() {
-        return this.stepIndex === 1 && this._isJ2sFormInvalid;
-    }
-    private set isJ2sFormInvalid(value: boolean) {
-        this._isJ2sFormInvalid = value;
-    }
-
-    private get primaryActionLink() {
-        const { link } = this.stepDatum.primaryAction;
-        return typeof link === "string"
-            ? link
-            : link?.[this.selectedCountry] || link?.default;
-    }
-
-    private get primaryActionText() {
-        const { text } = this.stepDatum.primaryAction;
-        return typeof text === "string"
-            ? text
-            : text[this.selectedCountry] || text.default;
-    }
-
-    private get primaryActionVariant() {
-        if (this.stepIndex === 1 && this.isJ2sFormInvalid) {
-            return "custom"; // override for disabled button styling
-        }
-        return this.stepDatum.primaryAction.variant;
-    }
-
-    private get primaryActionLinkTarget() {
-        return this.stepDatum.primaryAction.linkTarget || "_blank";
-    }
-
-    private get showPrimaryAction() {
-        return this.stepIndex !== 2 || this.selectedCountry === "IN";
-    }
-
-    private get showSecondaryAction() {
-        return this.showPrimaryAction; // same requirement as above for now
-    }
-
-    renderedCallback() {
-        this.updateStaticInnerHtml();
-    }
-
-    handleFormValidityChange({ detail }: CustomEvent) {
-        this.isJ2sFormInvalid = !detail.isValid;
-    }
-
-    handlePrimaryAction(evt: Event) {
-        this.track(evt);
-
-        if (this.stepIndex === 0) {
-            this.dispatchEvent(new CustomEvent("getstarted"));
-        } else if (this.stepIndex === 1 && !this.isJ2sFormInvalid) {
-            const j2sFormEl = this.template.querySelector(
-                "dw-j2s-form"
-            ) as unknown as J2sForm;
-            const formData = j2sFormEl.formDataForDrm;
-
-            // For some countries, explicit approvals will be present; for others, it is implicitly assumed
-            if (typeof formData.Opt_In__c !== "boolean") {
-                formData.Opt_In__c = true;
-            }
-            if (typeof formData.Privacy_Statement__c !== "boolean") {
-                formData.Privacy_Statement__c = true;
-            }
-
-            this.dispatchEvent(
-                new CustomEvent("formsubmit", {
-                    detail: formData
-                })
-            );
-        }
-    }
-
-    private updateStaticInnerHtml() {
-        const { bodyHtml, secondaryActionHtml } = this.stepDatum;
-        const bodyMarkupContainer =
-            this.template.querySelector("span.body-markup");
-        const secondaryActionMarkupContainer = this.template.querySelector(
-            "span.secondary-action-markup"
-        );
-
-        if (bodyMarkupContainer) {
-            let markup =
-                typeof bodyHtml === "string"
-                    ? bodyHtml
-                    : bodyHtml?.[this.selectedCountry] || bodyHtml?.default;
-
-            if (this.stepIndex === 2) {
-                // User's email is supposed to show on final step
-                markup = `${markup}${
-                    !this.userInfo.Email
-                        ? ""
-                        : `<span class="final-email-address">${this.userInfo.Email}</span>`
-                }`;
-            }
-
-            bodyMarkupContainer.innerHTML = markup || "";
-        }
-
-        if (secondaryActionMarkupContainer) {
-            // new special exception on step 2 to only show secondary action for IN
-            secondaryActionMarkupContainer.innerHTML =
-                secondaryActionHtml && this.showSecondaryAction
-                    ? secondaryActionHtml
-                    : "";
-        }
-    }
-
-    private track(evt: Event) {
-        const target = evt.target as HTMLButtonElement;
-
-        track(target, "custEv_ctaButtonClick", {
-            click_text: target.textContent,
-            element_title: this.stepDatum.stepTitle,
-            click_url: this.stepDatum.primaryAction.link || "",
-            element_type: "button",
-            content_category: "cta"
-        });
-    }
-}

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

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

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

@@ -1,162 +0,0 @@
-<template>
-    <!-- For the names of the form fields, see: https://salesforce.quip.com/daInAFETbPGm -->
-    <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="FirstName"
-                placeholder="Your first name"
-                required
-                validity-on-blur
-                onchange={handleFormFieldChange}
-                value={state.FirstName}
-            ></dx-input>
-            <dx-input
-                class="last-name-field"
-                label="Last Name"
-                missing-error-message="Enter your last name"
-                name="LastName"
-                placeholder="Your last name"
-                required
-                validity-on-blur
-                onchange={handleFormFieldChange}
-                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__c"
-                placeholder="Your company name"
-                required
-                validity-on-blur
-                value={state.Company__c}
-                onchange={handleFormFieldChange}
-            ></dx-input>
-            <dx-select
-                class="job-role-field"
-                label="Job Role"
-                message-when-value-missing="Select your job role"
-                name="DRM_Role__c"
-                options={jobRoles}
-                placeholder="Select Job Role"
-                required
-                value={state.DRM_Role__c}
-                onchange={handleFormFieldChange}
-            ></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"
-                disabled
-                readonly="true"
-                required
-                value={state.Email}
-            ></dx-input>
-            <dx-select
-                label="Country/Region"
-                message-when-value-missing="Select your country/region"
-                name="MailingCountry"
-                options={countries}
-                placeholder="Select Country/Region"
-                required
-                value={state.MailingCountry}
-                onchange={handleFormFieldChange}
-            ></dx-select>
-        </div>
-        <div class="form-row" if:true={isCountryWithReferralInput}>
-            <dx-input
-                name="Referral_Email__c"
-                class="referral-email-field full-width"
-                label="If anyone has referred you, please share their Email ID below, with their consent."
-                validity-on-blur="true"
-                type="email"
-                value={state.Referral_Email__c}
-                onchange={handleFormFieldChange}
-            ></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-row" if:true={showSubmitFailureAlert}>
-            <dx-alert
-                alert-info={formSubmitFailureAlertInfo}
-                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="Opt_In__c"
-                    required
-                    class="terms"
-                    onchange={handleFormFieldChange}
-                    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={handleFormFieldChange}
-                    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="Privacy_Statement__c"
-                    required
-                    class="terms"
-                    onchange={handleFormFieldChange}
-                    disabled={isNotParticipatingCountry}
-                >
-                    <span lwc:dom="manual" class="legal-terms"></span>
-                    <template if:true={state.learnMore}>
-                        &nbsp;
-                        <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>
-            <slot class="form-captcha-slot" name="form-captcha-slot"></slot>
-        </div>
-    </form>
-</template>