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

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,69 +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;
-}
-
-/* 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

@@ -1,208 +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>
-        <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="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>
-        </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="true"
-                    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>