@salesforcedevs/dw-components 1.3.148-canary.5 → 1.3.148-canary.7

package/package.json

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

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

@@ -35,10 +35,10 @@
                                 <dw-j2s-form
                                     id={stepDatum.formData.formId}
                                     countries={countries}
-                                    drm-recaptcha-site-key={drmRecaptchaSiteKey}
                                     form-metadata={stepDatum.formMetadata}
                                     incoming-user-info={formIncomingUserInfo}
                                     onformvaliditychange={handleFormValidityChange}
+                                    recaptcha-token={recaptchaToken}
                                 >
                                     <div slot="form-captcha-slot">
                                         <slot name="captcha-slot"></slot>

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

@@ -51,7 +51,6 @@ export default class J2sCardSequence extends LightningElement {
     _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;
@@ -91,6 +90,7 @@ export default class J2sCardSequence extends LightningElement {
 
     private countries = "[]";
     private currentSequenceStep = 0;
+    private recaptchaToken = "";
     private sessionStorageId = "j2s-card-sequence";
     private tbidUserInfo: any; // TODO typings?
 
@@ -158,6 +158,16 @@ export default class J2sCardSequence extends LightningElement {
         );
     }
 
+    @api
+    recaptchaCallback(responseToken: string) {
+        this.recaptchaToken = responseToken;
+    }
+
+    @api
+    recaptchaExpiredCallback() {
+        this.recaptchaToken = "";
+    }
+
     connectedCallback() {
         this.getCountryList();
         this.getTbidUserInfo();
@@ -203,8 +213,8 @@ export default class J2sCardSequence extends LightningElement {
         }
     }
 
-    handleFormSubmit(evt: Event) {
-        if (!this.formHandler || this.isJ2sFormInvalid) {
+    async handleFormSubmit(evt: Event) {
+        if (!this.formHandler || this.isJ2sFormInvalid || !this.isLoggedIn) {
             return;
         }
 
@@ -221,10 +231,32 @@ 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);
+
+            console.log("submitting", JSON.stringify(formData, null, 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();
+                if (resData.status === "success") {
+                    this.jumpToStepIndex(2);
+                } else {
+                    throw new Error(
+                        `Form submission failed. (status: ${resData.status}, message: ${resData.errorMessage})`
+                    );
+                }
+            }
         } catch (ex) {
-            console.log(ex); // TODO
+            console.error(ex); // TODO
         }
 
         this._isFormSubmitting = false;

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

@@ -44,3 +44,9 @@
 .form-terms-container {
     padding-top: var(--dx-g-spacing-sm);
 }
+
+.form-captcha-slot {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}

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

@@ -154,7 +154,7 @@
                     class="legal-terms no-checkbox"
                 ></span>
             </div>
-            <slot name="form-captcha-slot"></slot>
+            <slot class="form-captcha-slot" name="form-captcha-slot"></slot>
         </div>
     </form>
 </template>

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

@@ -33,15 +33,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 id = "";
-    private recaptcha: any = null;
     @api referralText = "";
 
     @api
@@ -82,16 +80,27 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         // 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;
+        this.handleRequiredFieldUpdate();
+    }
+
     private participatingCountryCodes = ["US", "CA", "IN"];
     private countriesWithReferralInput = ["IN"];
     private countriesWithRequiredJobRole = ["CA"];
@@ -138,12 +147,6 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         }
 
         this.state = initialState as J2sFormState;
-
-        if ((window as any).grecaptcha) {
-            this.setRecaptcha();
-        } else {
-            window.addEventListener("recaptchaloaded", this.setRecaptcha);
-        }
     }
 
     renderedCallback(): void {
@@ -197,31 +200,8 @@ 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);
-    }
-
-    setRecaptcha = () => {
-        this.recaptcha = (window as any).grecaptcha;
-    };
-
     handleRequiredFieldUpdate() {
         const isFormNowValid = this.checkValidity();
         if (this.state.isFormValid !== isFormNowValid) {
@@ -271,6 +251,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
 
     private checkValidity() {
         return (
+            Boolean(this.recaptchaToken) &&
             this.isParticipatingCountry(this.state.country) &&
             this.requiredFormFields.every(
                 (requiredFormField) =>