@salesforcedevs/dw-components 1.3.175 → 1.3.176-canary.0

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

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

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

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

@@ -0,0 +1,65 @@
+.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;
+}
+
+/* Small Devices */
+@media screen and (max-width: 480px) {
+    .form-row {
+        flex-wrap: wrap;
+        padding-bottom: unset;
+    }
+
+    .form-row > * {
+        padding-bottom: var(--dx-g-spacing-md);
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,208 @@
+<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>
+        <template if:false={showStateProvince}>
+            <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
+                    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>
+        </template>
+        <template if:true={showStateProvince}>
+            <div class="form-row">
+                <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>
+                <dx-select
+                    label="State/Province"
+                    message-when-value-missing="Select your state/province"
+                    name="MailingState"
+                    options={states}
+                    placeholder="Select State/Province"
+                    required
+                    value={state.MailingState}
+                    onchange={handleFormFieldChange}
+                ></dx-select>
+            </div>
+            <div class="form-row">
+                <dx-input
+                    name="Email"
+                    class="full-width-input-field"
+                    type="email"
+                    placeholder="Your email address"
+                    label="Email"
+                    missing-error-message="Enter your email address"
+                    validity-on-blur="true"
+                    disabled
+                    readonly
+                    required
+                    value={state.Email}
+                ></dx-input>
+            </div>
+        </template>
+        <div class="form-row" if:true={isCountryWithReferralInput}>
+            <dx-input
+                name="Referral_Email__c"
+                class="full-width-input-field"
+                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}
+                type="danger"
+                variant="accented"
+            ></dx-alert>
+        </div>
+        <div class="form-row" if:true={isSalesforceEmployee}>
+            <dx-alert
+                alert-info={salesforceEmployeeAlertInfo}
+                type="danger"
+                variant="accented"
+            ></dx-alert>
+        </div>
+        <div class="form-row" if:true={showSubmitFailureAlert}>
+            <dx-alert
+                alert-info={formSubmitFailureAlertInfo}
+                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={disableCheckboxes}
+                >
+                    <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={disableCheckboxes}
+                >
+                    <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={disableCheckboxes}
+                >
+                    <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>