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

package/package.json

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

package/src/modules/dw/deSignupForm/deSignupForm.ts

@@ -4,7 +4,7 @@ import { track as trackGtm } from "dxUtils/analytics";
 import { submitForm, ErrorCode, SignupForm, UserData } from "./submitForm";
 import { CountryOptions } from "typings/custom";
 import { stateMap } from "dwUtils/forms";
-import Recaptcha from "packages/@salesforcedevs/dw-components/src/modules/dw/recaptcha/recaptcha";
+import Recaptcha from "dw/recaptcha";
 
 type SelectOption = { value: string; label: string };
 type Country = SelectOption & {
@@ -86,7 +86,9 @@ export default class DeSignupForm extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this.recaptchaComponent = e.target as Recaptcha;
+        this.recaptchaComponent = (
+            e.target as HTMLSlotElement
+        )?.assignedElements()[0] as unknown as Recaptcha;
     }
 
     createUUID() {

package/src/modules/dw/recaptcha/recaptcha.css

@@ -1,13 +1,6 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
-.container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin-bottom: var(--dx-g-spacing-lg);
-}
-
 .error-message-box {
     margin-top: var(--dx-g-spacing-xs);
     display: block;

package/src/modules/dw/recaptcha/recaptcha.ts

@@ -1,25 +1,37 @@
 import { api, LightningElement } from "lwc";
 
-declare module globalThis {
-    let grecaptcha: {
-        render(element: HTMLElement | null, recaptchaConfig: any): void;
-        reset(): void;
-    };
-}
+// NOTE: This component assumes it is the only Recaptcha widget on a page.
+type RecaptchaApi = {
+    render(element: HTMLElement | null, recaptchaConfig: any): void;
+    reset(): void;
+};
 
 export default class Recaptcha extends LightningElement {
-    private _recaptchaToken = "";
+    private didRenderRecaptcha = false;
     private errorMessage = "";
-    private slottedRecaptchaDiv: HTMLDivElement | null = null;
+    private recaptchaDiv?: HTMLDivElement;
+    private recaptchaApi?: RecaptchaApi;
+    private recaptchaToken = "";
 
     @api missingErrorMessage = "Complete the captcha";
     @api recaptchaSiteKey = "";
 
     @api // read only
     get value() {
-        return this._recaptchaToken;
+        return this.recaptchaToken;
     }
 
+    @api
+    recaptchaScriptOnLoad = (recaptchaApi: RecaptchaApi) => {
+        // store callbacks to be used with recaptcha
+        this.recaptchaApi = recaptchaApi;
+
+        // and if we have everything needed to render, render
+        if (this.recaptchaDiv) {
+            this.renderRecaptcha();
+        }
+    };
+
     @api
     reset = () => this.resetRecaptcha();
 
@@ -36,38 +48,48 @@ export default class Recaptcha extends LightningElement {
 
     @api
     checkValidity = () => {
-        return Boolean(
-            (
-                this.slottedRecaptchaDiv?.querySelector(
-                    "#g-recaptcha-response"
-                ) as HTMLTextAreaElement
-            )?.value
-        );
+        return Boolean(this.recaptchaToken);
     };
 
-    private onSlotChange(e: Event) {
-        this.slottedRecaptchaDiv = e.target as HTMLDivElement;
+    private onSlotChange = (e: Event) => {
+        this.recaptchaDiv = (
+            e.target as HTMLSlotElement
+        )?.assignedElements?.()[0] as HTMLDivElement;
+
+        // if we have everything needed to render, render
+        if (this.recaptchaApi) {
+            this.renderRecaptcha();
+        }
+    };
+
+    private renderRecaptcha = () => {
+        if (this.didRenderRecaptcha) {
+            return;
+        }
+
         const smallMatchMedia = window.matchMedia(
             "screen and (max-width: 768px)"
         );
 
         // render recaptcha, referencing this component's callbacks for handling events
-        globalThis.grecaptcha?.render(this.slottedRecaptchaDiv, {
+        this.recaptchaApi?.render(this.recaptchaDiv as HTMLDivElement, {
             sitekey: this.recaptchaSiteKey,
             callback: this.recaptchaCallback,
             "expired-callback": this.recaptchaExpiredCallback,
             "error-callback": this.recaptchaErrorCallback,
             size: smallMatchMedia.matches ? "compact" : "normal"
         });
-    }
+
+        this.didRenderRecaptcha = true;
+    };
 
     private recaptchaCallback = (token: string) => {
-        this._recaptchaToken = token;
+        this.recaptchaToken = token;
         this.errorMessage = "";
     };
 
     private recaptchaExpiredCallback = () => {
-        this._recaptchaToken = ""; // note: recaptcha element itself handles showing an "expired" message
+        this.recaptchaToken = ""; // note: recaptcha element itself handles showing an "expired" message
     };
 
     private recaptchaErrorCallback = () => {
@@ -76,7 +98,7 @@ export default class Recaptcha extends LightningElement {
     };
 
     private resetRecaptcha = () => {
-        this._recaptchaToken = "";
-        globalThis.grecaptcha?.reset();
+        this.recaptchaToken = "";
+        this.recaptchaApi?.reset();
     };
 }