@salesforcedevs/dw-components 1.3.148-canary.4 → 1.3.148-canary.6

package/package.json

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

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

@@ -35,12 +35,14 @@
                                 <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}
                                 >
-                                    <slot name="captcha-slot"></slot>
+                                    <div slot="form-captcha-slot">
+                                        <slot name="captcha-slot"></slot>
+                                    </div>
                                 </dw-j2s-form>
                             </template>
                         </template>

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();

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="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
@@ -92,6 +90,15 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
         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 +145,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 +198,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 +249,7 @@ export default class J2sForm extends LightningElementWithState<J2sFormState> {
 
     private checkValidity() {
         return (
+            Boolean(this.recaptchaToken) &&
             this.isParticipatingCountry(this.state.country) &&
             this.requiredFormFields.every(
                 (requiredFormField) =>