@salesforcedevs/dw-components 1.3.148-canary.27 → 1.3.148-canary.28

package/lwc.config.json

@@ -15,6 +15,7 @@
         "dw/eventsList",
         "dw/instrumentation",
         "dw/j2sCardSequence",
+        "dw/j2sCardSequenceStep",
         "dw/j2sForm",
         "dw/newsletterForm",
         "dw/podcastSubscription",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.148-canary.27",
+    "version": "1.3.148-canary.28",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {

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

@@ -1,6 +1,4 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/text";
-@import "dxHelpers/card";
 
 :host {
     --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
@@ -14,47 +12,3 @@
 dx-step-sequence {
     scroll-margin-top: var(--dx-g-global-header-height);
 }
-
-dx-step-sequence-step:last-child[data-has-primary-action="true"]
-    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;
-}
-
-.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/j2sCardSequence/j2sCardSequence.html

@@ -8,73 +8,20 @@
         use-history={useHistory}
     >
         <template for:each={stepsData} for:item="stepDatum" for:index="index">
-            <dx-step-sequence-step
-                key={stepDatum.id}
-                class={stepClassName}
-                data-has-primary-action={hasPrimaryAction}
-            >
-                <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}
+            <dx-step-sequence-step key={stepDatum.id}>
+                <dw-j2s-card-sequence-step
+                    country-options={countries}
+                    is-loading={isLoading}
+                    oncountrychange={handleCountryChange}
+                    ongetstarted={handleGetStarted}
+                    onformsubmit={handleFormSubmit}
+                    recaptcha-token={recaptchaToken}
+                    selected-country={selectedCountry}
+                    step-datum={stepDatum}
                     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.formData}
-                                    incoming-user-info={formIncomingUserInfo}
-                                    onformvaliditychange={handleFormValidityChange}
-                                    recaptcha-token={recaptchaToken}
-                                >
-                                    <div slot="form-captcha-slot">
-                                        <slot name="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={hasPrimaryAction}
-                            class="primary-action"
-                            disabled={isJ2sFormInvalid}
-                            href={primaryActionLink}
-                            icon-sprite={stepDatum.primaryAction.iconSprite}
-                            icon-symbol={stepDatum.primaryAction.iconSymbol}
-                            loading={isLoading}
-                            onclick={primaryActionHandler}
-                            size="large"
-                            target={primaryActionLinkTarget}
-                            variant={primaryActionVariant}
-                        >
-                            {primaryActionText}
-                        </dx-button>
-                    </div>
-                </dx-card-step>
+                    step-total-count={stepsData.length}
+                    user-info={formIncomingUserInfo}
+                ></dw-j2s-card-sequence-step>
             </dx-step-sequence-step>
         </template>
     </dx-step-sequence>

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

@@ -1,9 +1,8 @@
 import { api, LightningElement } from "lwc";
 import StepSequence from "dx/stepSequence";
 import { getListWithUuids } from "dxUtils/list";
-import { track } from "dxUtils/analytics";
 import { toJson } from "dxUtils/normalizers";
-import J2sForm from "dw/j2sForm";
+import J2sCardSequenceStep from "dw/j2sCardSequenceStep";
 
 export type StepDatum = {
     bodyHtml?:
@@ -69,10 +68,8 @@ export type DrmFormData = {
 };
 
 export default class J2sCardSequence extends LightningElement {
-    _didRenderStaticInnerHtml = false;
     _isDrmLoading = false;
     _isFormSubmitting = false;
-    _isJ2sFormInvalid = false;
     _isTbidLoading = false;
     _recaptchaResetTimeoutId: number | null = null;
     _stepsData: StepDatum[] = [];
@@ -107,11 +104,11 @@ export default class J2sCardSequence extends LightningElement {
         });
     }
 
-    private confirmedCountry = "";
-    private countries = "[]";
+    private countries: any[] = [];
     private currentSequenceStep = 0;
     private formSubmissionFailureState: Partial<DrmFormData> | null = null;
     private recaptchaToken = "";
+    private selectedCountry = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
 
@@ -125,47 +122,6 @@ export default class J2sCardSequence extends LightningElement {
         return Boolean(this.tbidUserInfo);
     }
 
-    private get isJ2sFormInvalid() {
-        return this.currentSequenceStep === 1 ? this._isJ2sFormInvalid : false;
-    }
-    private set isJ2sFormInvalid(isFormInvalid: boolean) {
-        this._isJ2sFormInvalid = isFormInvalid;
-    }
-
-    private get primaryAction() {
-        return this.stepsData[this.currentSequenceStep || 0].primaryAction;
-    }
-
-    private get primaryActionLink() {
-        const { link } = this.primaryAction;
-        return typeof link === "string"
-            ? link
-            : link?.[this.confirmedCountry] || link?.default;
-    }
-
-    private get primaryActionText() {
-        const { text } = this.primaryAction;
-        return typeof text === "string"
-            ? text
-            : text[this.confirmedCountry] || text.default;
-    }
-
-    private get primaryActionVariant() {
-        if (this.currentSequenceStep === 1 && this.isJ2sFormInvalid) {
-            return "custom"; // override for disabled button styling
-        }
-        return this.primaryAction.variant;
-    }
-
-    private get primaryActionLinkTarget() {
-        return this.primaryAction.linkTarget || "_blank";
-    }
-
-    private get hasPrimaryAction() {
-        // new requirement: don't show primary action on final step if country isn't India
-        return this.currentSequenceStep !== 2 || this.confirmedCountry === "IN";
-    }
-
     private get formIncomingUserInfo() {
         if (!this.tbidUserInfo) {
             return {} as DrmFormData;
@@ -232,27 +188,30 @@ export default class J2sCardSequence extends LightningElement {
     }
 
     renderedCallback() {
-        if (this.isLoading) {
-            this._didRenderStaticInnerHtml = false; // only when `this.isLoading` is true will static HTML need to be re-rendered, since the content will have been replaced by the spinner
-            return;
-        }
-
-        if (!this._didRenderStaticInnerHtml) {
-            this.updateStaticInnerHtml();
-            this._didRenderStaticInnerHtml = true;
+        if (!this.isLoading) {
+            (
+                this.template.querySelector(
+                    "dx-step-sequence"
+                ) as unknown as StepSequence
+            )?.remeasureSteps();
         }
 
-        if (this.formSubmissionFailureState) {
-            const j2sFormEl = (this.template.querySelector(
-                "dw-j2s-form"
-            ) as unknown) as J2sForm | null;
-            j2sFormEl?.notifySubmitFailure(this.formSubmissionFailureState);
+        if (
+            this.formSubmissionFailureState &&
+            this.stepsData[this.currentSequenceStep].formData
+        ) {
+            const j2sCardStep = this.template.querySelectorAll(
+                "dw-j2s-card-sequence-step"
+            ) as unknown as J2sCardSequenceStep[];
+            j2sCardStep[this.currentSequenceStep]?.notifyFormSubmitFailure(
+                this.formSubmissionFailureState
+            );
             this.formSubmissionFailureState = null;
         }
     }
 
-    handleFormValidityChange({ detail }: CustomEvent) {
-        this.isJ2sFormInvalid = !detail.isValid;
+    handleCountryChange({ detail }: CustomEvent) {
+        this.selectedCountry = detail;
     }
 
     handleStepSequenceChange({ detail }: CustomEvent) {
@@ -275,39 +234,26 @@ export default class J2sCardSequence extends LightningElement {
         }
     }
 
-    handleGetStarted(evt: Event) {
+    handleGetStarted() {
         // 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;
             (window as any).__startTbidLogin?.(); // call out to DSC tbid controller
+        } else {
+            this.jumpToStepIndex(1);
         }
     }
 
-    async handleFormSubmit(evt: Event) {
-        if (!this.formHandler || this.isJ2sFormInvalid || !this.isLoggedIn) {
+    async handleFormSubmit({ detail: formData }: CustomEvent<DrmFormData>) {
+        if (!this.formHandler || !this.isLoggedIn) {
             return;
         }
 
-        evt.preventDefault(); // don't proceed automatically to next step
         this._isFormSubmitting = true;
 
-        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;
-        }
-
         try {
             const res = await fetch(this.formHandler, {
                 method: "POST",
@@ -326,7 +272,6 @@ export default class J2sCardSequence extends LightningElement {
                 const resData = await res.json();
                 const resOutput = resData.handlePostRequestOutput || resData;
                 if (resOutput?.status === "success") {
-                    this.confirmedCountry = formData.MailingCountry as string;
                     this.jumpToStepIndex(2, false);
                     this.initialStepIndex = 0; // don't save final step in storage; rather, reset the starting step
                 } else {
@@ -347,31 +292,6 @@ export default class J2sCardSequence extends LightningElement {
         this._isFormSubmitting = false;
     }
 
-    primaryActionHandler(evt: Event) {
-        const target = evt.target as HTMLButtonElement;
-
-        if (!target || target.disabled) {
-            evt.preventDefault();
-            return;
-        }
-
-        track(target, "custEv_ctaButtonClick", {
-            click_text: target.textContent,
-            element_title: this.stepsData[this.currentSequenceStep].stepTitle,
-            click_url:
-                this.stepsData[this.currentSequenceStep].primaryAction.link ||
-                "",
-            element_type: "button",
-            content_category: "cta"
-        });
-
-        if (!this.currentSequenceStep) {
-            this.handleGetStarted(evt);
-        } else if (this.currentSequenceStep === 1) {
-            this.handleFormSubmit(evt);
-        }
-    }
-
     private resetCustomButtonColors() {
         let bgColor;
         let textColor;
@@ -402,54 +322,11 @@ export default class J2sCardSequence extends LightningElement {
         if (andStoreIndex) {
             this.initialStepIndex = stepIndex; // update sessionStorage value
         }
-        ((this.template.querySelector(
-            "dx-step-sequence"
-        ) as unknown) as StepSequence)?.jumpToStep(stepIndex);
-    }
-
-    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) {
-                let markup =
-                    typeof bodyHtml === "string"
-                        ? bodyHtml
-                        : bodyHtml?.[this.confirmedCountry] ||
-                          bodyHtml?.default;
-
-                if (stepIndex === 2) {
-                    // User's email is supposed to show on final step
-                    markup = `${markup}${
-                        !this.formIncomingUserInfo.Email
-                            ? ""
-                            : `<span class="final-email-address">${this.formIncomingUserInfo.Email}</span>`
-                    }`;
-                }
-
-                bodyMarkupContainer.innerHTML = markup || "";
-            }
-
-            if (secondaryActionMarkupContainer) {
-                const secondaryActionInnerHtml =
-                    !secondaryActionHtml ||
-                    // ugh, new special exception on step 2 to only show secondary action for IN
-                    (stepIndex === 2 && this.confirmedCountry !== "IN")
-                        ? ""
-                        : secondaryActionHtml;
-                secondaryActionMarkupContainer.innerHTML = secondaryActionInnerHtml;
-            }
-        });
+        (
+            this.template.querySelector(
+                "dx-step-sequence"
+            ) as unknown as StepSequence
+        )?.jumpToStep(stepIndex);
     }
 
     private async getCountryList() {
@@ -463,8 +340,7 @@ export default class J2sCardSequence extends LightningElement {
             if (!res.ok) {
                 throw new Error(errorMsg);
             }
-            const data = await res.json();
-            this.countries = JSON.stringify(data);
+            this.countries = await res.json();
         } catch (error) {
             console.error(error);
             if (this.initialStepIndex > 0) {
@@ -484,6 +360,7 @@ export default class J2sCardSequence extends LightningElement {
             const res = await fetch(`${this.tbidApiBaseUrl}/userinfo`);
             if (res.ok) {
                 this.tbidUserInfo = await res.json();
+                this.selectedCountry = this.formIncomingUserInfo.MailingCountry;
             }
         } catch (ex) {
             // noop; nothing to do here

package/src/modules/dw/j2sCardSequenceStep/j2sCardSequenceStep.css

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

@@ -0,0 +1,59 @@
+<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="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

@@ -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.ts

@@ -203,10 +203,8 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
     handleFormFieldChange = (evt: CustomEvent) => {
         // Event target information must be read prior to debouncing; the target is gone after the debounce.
         const { target = {}, detail } = evt;
-        const {
-            name: targetName,
-            required: isRequiredField
-        } = target as HTMLInputElement;
+        const { name: targetName, required: isRequiredField } =
+            target as HTMLInputElement;
         const value =
             typeof detail === "string"
                 ? detail
@@ -279,6 +277,14 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
             showMarketingText: countryData.showMarketingText
         });
 
+        this.dispatchEvent(
+            new CustomEvent("countrychange", {
+                bubbles: true,
+                composed: true,
+                detail: countryCode
+            })
+        );
+
         // Because updating the country can update the required fields, we need to re-set form
         // validity _after_ render
         requestAnimationFrame(() =>
@@ -301,7 +307,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
 
     private checkValidity() {
         return (
-            // Boolean(this.recaptchaToken) &&
+            Boolean(this.recaptchaToken) &&
             this.isParticipatingCountry(this.state.MailingCountry) &&
             this.requiredFormFields.every(
                 (requiredFormField) =>