@salesforcedevs/dw-components 1.3.148-canary.2 → 1.3.148-canary.21

package/package.json

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

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

@@ -40,7 +40,13 @@ dx-step-sequence-step:last-child dx-card-step::part(footer-container) {
 
 .body-markup {
     display: block;
-    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.final-email-address {
+    display: block;
+    margin-top: 20px;
+    line-height: 24px;
+    color: var(--dx-g-blue-vibrant-50);
 }
 
 .referral-email-field {

package/src/modules/dw/j2sCardSequence/j2sCardSequence.html

@@ -35,11 +35,15 @@
                                 <dw-j2s-form
                                     id={stepDatum.formData.formId}
                                     countries={countries}
-                                    drm-recaptcha-site-key={drmRecaptchaSiteKey}
-                                    form-metadata={stepDatum.formMetadata}
+                                    form-metadata={stepDatum.formData}
                                     incoming-user-info={formIncomingUserInfo}
                                     onformvaliditychange={handleFormValidityChange}
-                                ></dw-j2s-form>
+                                    recaptcha-token={recaptchaToken}
+                                >
+                                    <div slot="form-captcha-slot">
+                                        <slot name="captcha-slot"></slot>
+                                    </div>
+                                </dw-j2s-form>
                             </template>
                         </template>
                     </div>
@@ -59,6 +63,7 @@
                             loading={isLoading}
                             onclick={primaryActionHandler}
                             size="large"
+                            target={primaryActionLinkTarget}
                             variant={primaryActionVariant}
                         >
                             {stepDatum.primaryAction.text}

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

@@ -3,6 +3,7 @@ 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";
 
 export type StepDatum = {
     bodyHtml?: string;
@@ -28,6 +29,7 @@ export type StepDatum = {
         iconSprite?: string;
         iconSymbol?: string;
         link?: string;
+        linkTarget?: string;
         text: string;
         variant?: string;
     };
@@ -36,22 +38,16 @@ export type StepDatum = {
     stepTitle: string;
 };
 
-function isNoAnimationCookieSet() {
-    return document.cookie
-        .split(";")
-        .some((ck) => ck.trim() === "no_j2s_animation=true");
-}
-
 export default class J2sCardSequence extends LightningElement {
     _didRenderStaticInnerHtml = false;
     _isDrmLoading = false;
     _isFormSubmitting = false;
     _isJ2sFormInvalid = false;
     _isTbidLoading = false;
+    _recaptchaResetTimeoutId: number | null = null;
     _stepsData: StepDatum[] = [];
     @api animateTransitions = false;
     @api drmDomain: string = "https://drm.my.salesforce-sites.com";
-    @api drmRecaptchaSiteKey: string = "";
     @api formHandler: string =
         "https://formhandlermule-1s9xrb.5sc6y6-4.usa-e2.cloudhub.io/form_handler";
     @api tbidApiBaseUrl: string | undefined;
@@ -63,34 +59,28 @@ export default class J2sCardSequence extends LightningElement {
     }
     set stepsData(value) {
         // normalize incoming value with uuid keys and non-required props (for cleaner HTML template), etc.
-        this._stepsData = getListWithUuids<StepDatum>(toJson(value)).map(
-            (stepDatum) => {
-                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
-                    );
+        const valueWithUuids = getListWithUuids<StepDatum>(toJson(value));
+        this._stepsData = valueWithUuids.map((stepDatum) => {
+            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"
                 }
+            };
 
-                return normalizedStepDatum;
-            }
-        );
+            return normalizedStepDatum;
+        });
     }
 
     private countries = "[]";
     private currentSequenceStep = 0;
+    private didFormSubmissionFail = false;
+    private recaptchaToken = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
 
@@ -119,19 +109,32 @@ export default class J2sCardSequence extends LightningElement {
             .variant;
     }
 
+    private get primaryActionLinkTarget() {
+        return (
+            this.stepsData[this.currentSequenceStep || 0].primaryAction
+                .linkTarget || "_blank"
+        );
+    }
+
     private get formIncomingUserInfo() {
         if (!this.tbidUserInfo) {
-            return "{}";
+            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
-        });
+        return {
+            firstName: decodeURIComponent(this.tbidUserInfo.given_name),
+            lastName: decodeURIComponent(this.tbidUserInfo.family_name),
+            email: decodeURIComponent(this.tbidUserInfo.email),
+            jobRole: decodeURIComponent(
+                this.tbidUserInfo.custom_attributes?.Role
+            ),
+            companyName: decodeURIComponent(
+                this.tbidUserInfo.custom_attributes?.CompanyName
+            ),
+            country: decodeURIComponent(
+                this.tbidUserInfo.custom_attributes?.Country
+            )
+        };
     }
 
     private get initialStepIndex() {
@@ -158,20 +161,29 @@ export default class J2sCardSequence extends LightningElement {
         );
     }
 
+    @api
+    recaptchaCallback(responseToken: string) {
+        this.recaptchaToken = responseToken;
+        clearTimeout(this._recaptchaResetTimeoutId as number);
+    }
+
+    @api
+    recaptchaExpiredCallback() {
+        this.recaptchaToken = "";
+        clearTimeout(this._recaptchaResetTimeoutId as number);
+    }
+
     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();
-        if (isNoAnimationCookieSet()) {
-            /* eslint-disable-next-line @lwc/lwc/no-api-reassignments */
-            this.animateTransitions = false;
-        }
     }
 
     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;
         }
 
@@ -179,6 +191,14 @@ export default class J2sCardSequence extends LightningElement {
             this.updateStaticInnerHtml();
             this._didRenderStaticInnerHtml = true;
         }
+
+        if (this.didFormSubmissionFail) {
+            const j2sFormEl = (this.template.querySelector(
+                "dw-j2s-form"
+            ) as unknown) as J2sForm | null;
+            j2sFormEl?.notifySubmitFailure();
+            this.didFormSubmissionFail = false;
+        }
     }
 
     handleFormValidityChange({ detail }: CustomEvent) {
@@ -188,6 +208,21 @@ export default class J2sCardSequence extends LightningElement {
     handleStepSequenceChange({ detail }: CustomEvent) {
         this.currentSequenceStep = detail.stepIndex;
         this.resetCustomButtonColors();
+
+        if (
+            this.currentSequenceStep !== 1 &&
+            this.recaptchaToken &&
+            this._recaptchaResetTimeoutId === null
+        ) {
+            // If the recaptcha element expires on its own while you are not on the 2nd (form) step, it messes with the
+            // page's layout (basically breaks it). So, we need to reset it _before_ expiration if you leave that step.
+            // We do it with a timeout so that the token is not immediately wiped if the user goes back and forth a bit.
+            this._recaptchaResetTimeoutId = window.setTimeout(() => {
+                this._recaptchaResetTimeoutId = null;
+                this.recaptchaToken = "";
+                (window as any).grecaptcha.reset();
+            }, 1000 * 30 /* 30 seconds */);
+        }
     }
 
     handleGetStarted(evt: Event) {
@@ -198,13 +233,12 @@ export default class J2sCardSequence extends LightningElement {
             evt.preventDefault();
             this.initialStepIndex = 1;
             this._isTbidLoading = true;
-            // @ts-ignore: call out to the tbid-controller on DSC
-            window.__startTbidLogin();
+            (window as any).__startTbidLogin?.(); // call out to DSC tbid controller
         }
     }
 
-    handleFormSubmit(evt: Event) {
-        if (!this.formHandler || this.isJ2sFormInvalid) {
+    async handleFormSubmit(evt: Event) {
+        if (!this.formHandler || this.isJ2sFormInvalid || !this.isLoggedIn) {
             return;
         }
 
@@ -212,8 +246,10 @@ export default class J2sCardSequence extends LightningElement {
         this._isFormSubmitting = true;
 
         try {
-            const formData = (this.template.querySelector("dw-j2s-form") as any)
-                ?.formDataForDrm;
+            const j2sFormEl = (this.template.querySelector(
+                "dw-j2s-form"
+            ) as unknown) as J2sForm | null;
+            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;
@@ -221,10 +257,38 @@ export default class J2sCardSequence extends LightningElement {
             if (typeof formData.Privacy_Statement__c !== "boolean") {
                 formData.Privacy_Statement__c = true;
             }
-            console.log("would submit", JSON.stringify(formData, null, 2));
-            this.jumpToStepIndex(2);
+
+            const res = await fetch(this.formHandler, {
+                method: "POST",
+                headers: {
+                    "Captcha-Response": this.recaptchaToken
+                },
+                body: JSON.stringify({
+                    ...formData,
+                    handlerName: "J2S Registration Page",
+                    TBID__c: this.tbidUserInfo.user_id
+                })
+            });
+
+            if (res.ok) {
+                const resData = await res.json();
+                const resOutput = resData.handlePostRequestOutput || resData;
+                if (resOutput?.status === "success") {
+                    this.jumpToStepIndex(2, false);
+                    this.initialStepIndex = 0; // don't save final step in storage; rather, reset the starting step
+                } else {
+                    throw new Error(
+                        `Form submission failed. (status: ${resOutput.status}, message: ${resOutput.errorMessage})`
+                    );
+                }
+            } else {
+                throw new Error(
+                    `Form submission failed. Non-ok response received from DRM.`
+                );
+            }
         } catch (ex) {
-            console.log(ex); // TODO
+            this.didFormSubmissionFail = true;
+            console.error(ex);
         }
 
         this._isFormSubmitting = false;
@@ -281,14 +345,15 @@ export default class J2sCardSequence extends LightningElement {
         );
     }
 
-    private jumpToStepIndex(stepIndex: number) {
-        this.initialStepIndex = stepIndex; // update sessionStorage value
+    private jumpToStepIndex(stepIndex: number, andStoreIndex = true) {
+        if (andStoreIndex) {
+            this.initialStepIndex = stepIndex; // update sessionStorage value
+        }
         ((this.template.querySelector(
             "dx-step-sequence"
         ) as unknown) as StepSequence)?.jumpToStep(stepIndex);
     }
 
-    // HTML is received via config from DSC and should be static after initial render.
     private updateStaticInnerHtml() {
         const bodyMarkupContainers = this.template.querySelectorAll(
             "span.body-markup"
@@ -304,7 +369,16 @@ export default class J2sCardSequence extends LightningElement {
                 secondaryActionMarkupContainers[stepIndex];
 
             if (bodyMarkupContainer) {
-                bodyMarkupContainer.innerHTML = bodyHtml || "";
+                let markup = bodyHtml;
+                if (stepIndex === 2) {
+                    // User's email is supposed to show on final step
+                    markup = `${bodyHtml}${
+                        !this.formIncomingUserInfo.email
+                            ? ""
+                            : `<span class="final-email-address">${this.formIncomingUserInfo.email}</span>`
+                    }`;
+                }
+                bodyMarkupContainer.innerHTML = markup || "";
             }
             if (secondaryActionMarkupContainer) {
                 secondaryActionMarkupContainer.innerHTML =
@@ -316,7 +390,7 @@ export default class J2sCardSequence extends LightningElement {
     private async getCountryList() {
         this._isDrmLoading = true;
 
-        const errorMsg = "Error while getting county list";
+        const errorMsg = "Error while getting country list";
         try {
             const res = await fetch(
                 `${this.drmDomain}/utilities/services/apexrest/countries`

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

@@ -1,46 +1,61 @@
-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.'
+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"
             },
-            participatingCountryCodes: ["US", "CA", "IN"]
+            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>',
-        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:
+                '<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>',
-        secondaryActionHtml:
-            '<span class="dx-text-display-7">Ready to jump in?</span>',
-        primaryActionText: "Join Slack",
-        primaryActionVariant: "custom",
-        primaryActionIconSprite: "utility",
-        primaryActionIconSymbol: "new_window"
-    }
-];
+        {
+            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/j2sForm/j2sForm.css

@@ -21,8 +21,8 @@
 }
 
 .form-row .terms {
-    --dx-c-checkbox-text-line-height: 20px;
-    --dx-c-checkbox-font-size: 14px;
+    --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);
@@ -44,3 +44,13 @@
 .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

@@ -10,7 +10,7 @@
                 placeholder="Your first name"
                 required
                 validity-on-blur
-                onblur={handleRequiredFieldUpdate}
+                onchange={handleFormFieldChange}
                 value={state.firstName}
             ></dx-input>
             <dx-input
@@ -21,7 +21,7 @@
                 placeholder="Your last name"
                 required
                 validity-on-blur
-                onblur={handleRequiredFieldUpdate}
+                onchange={handleFormFieldChange}
                 value={state.lastName}
             ></dx-input>
         </div>
@@ -34,21 +34,10 @@
                 placeholder="Your company name"
                 required
                 validity-on-blur
-                onblur={handleRequiredFieldUpdate}
                 value={state.companyName}
+                onchange={handleFormFieldChange}
             ></dx-input>
             <dx-select
-                if:false={isJobRoleRequired}
-                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"
-                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"
@@ -57,7 +46,7 @@
                 placeholder="Select Job Role"
                 required
                 value={state.jobRole}
-                onchange={handleRequiredFieldUpdate}
+                onchange={handleFormFieldChange}
             ></dx-select>
         </div>
         <div class="form-row">
@@ -68,8 +57,9 @@
                 label="Email"
                 missing-error-message="Enter your email address"
                 validity-on-blur="true"
+                disabled
+                readonly="true"
                 required
-                onblur={handleRequiredFieldUpdate}
                 value={state.email}
             ></dx-input>
             <dx-select
@@ -80,7 +70,7 @@
                 placeholder="Select Country/Region"
                 required
                 value={state.country}
-                onchange={handleCountryChange}
+                onchange={handleFormFieldChange}
             ></dx-select>
         </div>
         <div class="form-row" if:true={isCountryWithReferralInput}>
@@ -88,7 +78,9 @@
                 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"
+                onchange={handleFormFieldChange}
             ></dx-input>
         </div>
         <div class="form-row" if:true={isNotParticipatingCountry}>
@@ -99,6 +91,14 @@
                 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
@@ -106,7 +106,7 @@
                     name="Opt_In__c"
                     required
                     class="terms"
-                    onchange={handleRequiredFieldUpdate}
+                    onchange={handleFormFieldChange}
                     disabled={isNotParticipatingCountry}
                 >
                     <span lwc:dom="manual" class="marketing-terms"></span>
@@ -118,7 +118,7 @@
                     name="j2s_terms"
                     required
                     class="terms"
-                    onchange={handleRequiredFieldUpdate}
+                    onchange={handleFormFieldChange}
                     disabled={isNotParticipatingCountry}
                 >
                     <span lwc:dom="manual" class="j2s-terms"></span>
@@ -131,7 +131,7 @@
                     name="Privacy_Statement__c"
                     required
                     class="terms"
-                    onchange={handleRequiredFieldUpdate}
+                    onchange={handleFormFieldChange}
                     disabled={isNotParticipatingCountry}
                 >
                     <span lwc:dom="manual" class="legal-terms"></span>
@@ -154,7 +154,7 @@
                     class="legal-terms no-checkbox"
                 ></span>
             </div>
-            <div if:true={recaptcha} class="captcha" lwc:dom="manual"></div>
+            <slot class="form-captcha-slot" name="form-captcha-slot"></slot>
         </div>
     </form>
 </template>

package/src/modules/dw/j2sForm/j2sForm.ts

@@ -1,5 +1,6 @@
 import { toJson } from "dxUtils/normalizers";
 import { api } from "lwc";
+import debounce from "debounce";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
 
 // Hard-coding for now because we can't get information about an endpoint for this
@@ -33,15 +34,13 @@ export type J2sFormState = {
 export default class J2sForm extends LightningElementWithState<J2sFormState> {
     private _countriesJson = "";
     private _countriesLookup: any = {}; // TODO typings
-    private _didRenderRecaptcha = false;
     private _didSetFormId = false;
-    private _formMetadata: any = {}; // TODO typings
-    private _incomingUserInfo: any = {}; // TODO typings
     private _isInitialRender = true;
+    private _recaptchaToken = "";
 
-    @api drmRecaptchaSiteKey = "";
+    @api formMetadata: any = {};
     @api id = "";
-    private recaptcha: any = null;
+    @api incomingUserInfo: any = {};
     @api referralText = "";
 
     @api
@@ -60,42 +59,41 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         this._countriesLookup = countriesLookup;
     }
 
-    @api
-    get incomingUserInfo() {
-        return this._incomingUserInfo;
-    }
-    set incomingUserInfo(value: string) {
-        this._incomingUserInfo = toJson(value);
-    }
-
-    @api
-    get formMetadata() {
-        return this._formMetadata;
-    }
-    set formMetadata(value: string) {
-        this._formMetadata = toJson(value);
-    }
-
     @api
     get formDataForDrm() {
         // We should be able to just get the formData from the form automatically using `new FormData(theForm)`,
         // but our custom form elements don't seem to implement what it is required for that currently. See:
         // https://web.dev/more-capable-form-controls/#defining-a-form-associated-custom-element
         const formData: any = {};
-        this.template.querySelectorAll("[name]").forEach((namedElement) => {
-            const typedElement = namedElement as HTMLInputElement;
-            formData[typedElement.name] =
-                typeof typedElement.checked === "boolean"
-                    ? typedElement.checked
-                    : typedElement.value;
-        });
+        this.template
+            .querySelectorAll("form [name]")
+            .forEach((namedElement) => {
+                const typedElement = namedElement as HTMLInputElement;
+                formData[typedElement.name] =
+                    typeof typedElement.checked === "boolean"
+                        ? typedElement.checked
+                        : typedElement.value;
+            });
         return formData;
     }
 
+    @api
+    get recaptchaToken() {
+        return this._recaptchaToken;
+    }
+    set recaptchaToken(value: string) {
+        this._recaptchaToken = value;
+        if (!this._isInitialRender) {
+            // Treat recaptcha checkbox as a required form field even though not technically marked as such:
+            this.handleFormFieldChange({ target: { required: true } } as any);
+        }
+    }
+
     private participatingCountryCodes = ["US", "CA", "IN"];
     private countriesWithReferralInput = ["IN"];
     private countriesWithRequiredJobRole = ["CA"];
     private requiredFormFields: HTMLElement[] = [];
+    private showSubmitFailureAlert = false;
 
     get isNotParticipatingCountry() {
         return !this.isParticipatingCountry(this.state.country);
@@ -105,12 +103,12 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         return this.countriesWithReferralInput.includes(this.state.country);
     }
 
-    get isJobRoleRequired() {
-        return this.countriesWithRequiredJobRole.includes(this.state.country);
+    get notAvailableAlertInfo() {
+        return this.formMetadata.notAvailableAlertInfo;
     }
 
-    get notAvailableAlertInfo() {
-        return (this.formMetadata as any).notAvailableAlertInfo;
+    get formSubmitFailureAlertInfo() {
+        return this.formMetadata.formSubmitFailureAlertInfo;
     }
 
     get jobRoles() {
@@ -122,7 +120,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
 
     connectedCallback() {
         const initialState: Partial<J2sFormState> = {
-            ...this._incomingUserInfo,
+            ...this.incomingUserInfo,
             isFormValid: false,
             showMarketingText: true
         };
@@ -132,26 +130,20 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         if (initialCountryData) {
             initialState.showLegalCheckbox =
                 initialCountryData.showLegalCheckbox;
+            initialState.showMarketingText =
+                initialCountryData.showMarketingText;
             initialState.legalText = initialCountryData.legalText;
             initialState.marketingText = initialCountryData.marketingText;
             initialState.learnMore = initialCountryData.learnMore;
         }
 
         this.state = initialState as J2sFormState;
-
-        if ((window as any).grecaptcha) {
-            this.setRecaptcha();
-        } else {
-            window.addEventListener("recaptchaloaded", this.setRecaptcha);
-        }
     }
 
     renderedCallback(): void {
         if (this._isInitialRender) {
-            this.updateInnerHtml(
-                "span.j2s-terms",
-                (this.formMetadata as any).j2sTerms
-            );
+            this.updateInnerHtml("span.j2s-terms", this.formMetadata.j2sTerms);
+            this._isInitialRender = false;
         }
 
         if (
@@ -197,32 +189,49 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
             this._didSetFormId = true;
             this.template.querySelector("form")?.setAttribute("id", this.id);
         }
-
-        if (!this._didRenderRecaptcha && this.recaptcha) {
-            this._didRenderRecaptcha = true;
-            this.recaptcha.render(this.template.querySelector(".captcha"), {
-                sitekey: this.drmRecaptchaSiteKey,
-                callback: (recaptchaToken: string) => {
-                    console.log("got captcha", recaptchaToken);
-                },
-                "expired-callback": () => {},
-                "error-callback": (...args: any[]) => {
-                    console.log("RECAPTCHA ERROR");
-                    console.log(...args);
-                }
-            });
-        }
     }
 
-    disconnectedCallback() {
-        window.removeEventListener("recaptchaloaded", this.setRecaptcha);
+    handleLearnMore() {
+        this.template
+            .querySelector(".legal-terms-learn-more")
+            ?.classList.toggle("hidden");
     }
 
-    setRecaptcha = () => {
-        this.recaptcha = (window as any).grecaptcha;
+    handleFormFieldChange = (evt: CustomEvent) => {
+        const callbacks: Function[] = [];
+
+        // Event target information must be read prior to debouncing; otherwise, the target is gone after the debounce.
+        if ((evt.target as HTMLInputElement)?.name === "MailingCountry") {
+            const { value } = evt.detail;
+            callbacks.push(() => this.handleCountryChange(value));
+        } else if ((evt.target as HTMLInputElement)?.required) {
+            callbacks.push(() => this.handleRequiredFieldUpdate());
+        }
+
+        callbacks.push(() => {
+            // Remove submit failure message once any change is made to the form.
+            if (this.showSubmitFailureAlert) {
+                this.showSubmitFailureAlert = false;
+            }
+        });
+
+        // Don't do unnecessary work too often if form fields are rapidly being changed
+        this.debouncedFormFieldChangeHandler(callbacks);
     };
 
-    handleRequiredFieldUpdate() {
+    @api
+    notifySubmitFailure() {
+        this.showSubmitFailureAlert = true;
+    }
+
+    private debouncedFormFieldChangeHandler = debounce(
+        (callbacks: Function[]) => {
+            callbacks.forEach((callback) => callback());
+        },
+        1000 / 15 /* 15fps seems reasonable */
+    );
+
+    private handleRequiredFieldUpdate() {
         const isFormNowValid = this.checkValidity();
         if (this.state.isFormValid !== isFormNowValid) {
             this.setState({
@@ -231,16 +240,16 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         }
     }
 
-    handleCountryChange({ detail }: CustomEvent) {
-        const { value } = detail;
-        const countryData = this._countriesLookup[value];
+    private handleCountryChange(countryCode: string) {
+        const countryData = this._countriesLookup[countryCode];
 
         this.setState({
-            country: value,
+            country: countryCode,
             learnMore: countryData.learnMore,
             legalText: countryData.legalText,
             marketingText: countryData.marketingText,
-            showLegalCheckbox: countryData.showLegalCheckbox
+            showLegalCheckbox: countryData.showLegalCheckbox,
+            showMarketingText: countryData.showMarketingText
         });
 
         // Because updating the country can update the required fields, we need to re-set form
@@ -252,12 +261,6 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         );
     }
 
-    handleLearnMore() {
-        this.template
-            .querySelector(".legal-terms-learn-more")
-            ?.classList.toggle("hidden");
-    }
-
     private updateInnerHtml(selector: string, html: string): void {
         const element = this.template.querySelector(selector);
         if (element) {
@@ -271,6 +274,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
 
     private checkValidity() {
         return (
+            // Boolean(this.recaptchaToken) &&
             this.isParticipatingCountry(this.state.country) &&
             this.requiredFormFields.every(
                 (requiredFormField) =>