@salesforcedevs/dw-components 1.3.397-canary.0 → 1.3.397-canary.2

package/package.json

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

package/src/modules/dw/deSignupForm/deSignupForm.css

@@ -32,9 +32,9 @@ span {
 }
 
 dx-checkbox,
-.privacy-notice,
-span.privacy-terms,
-span.marketing-terms {
+.privacy-notice:not(:empty),
+span.privacy-terms:not(:empty),
+span.marketing-terms:not(:empty) {
     width: 100%;
     margin-bottom: var(--dx-g-spacing-lg);
 }
@@ -52,6 +52,7 @@ span a:hover {
 dx-input.username-field {
     height: initial;
     min-height: 105px;
+    margin-bottom: var(--dx-g-spacing-lg);
 }
 
 form > .full-name-field {

package/src/modules/dw/deSignupForm/deSignupForm.html

@@ -117,6 +117,8 @@
             <span lwc:dom="manual" class="legal-checkbox privacy-terms"></span>
         </dx-checkbox>
 
+        <slot class="form-captcha-slot" name="form-captcha-slot"></slot>
+
         <dx-button
             class="submit-button"
             variant="custom"

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

@@ -47,6 +47,7 @@ export default class DeSignupForm extends LightningElement {
     private marketingText: string = "";
     private showLegalCheckbox: boolean = false;
     private privacyText: string = "";
+    private recaptchaToken = "";
 
     @track knownDuplicateUsers: string[] = [];
 
@@ -73,6 +74,26 @@ export default class DeSignupForm extends LightningElement {
         return stateMap[this.country] || [];
     }
 
+    @api
+    recaptchaCallback(responseToken: string) {
+        this.recaptchaToken = responseToken;
+    }
+
+    @api
+    recaptchaExpiredCallback() {
+        this.recaptchaToken = "";
+    }
+
+    @api
+    recaptchaErrorCallback() {
+        this.resetRecaptcha();
+    }
+
+    private resetRecaptcha() {
+        this.recaptchaToken = "";
+        (window as any).grecaptcha?.reset();
+    }
+
     connectedCallback(): void {
         this.getCountryList();
     }
@@ -126,7 +147,7 @@ export default class DeSignupForm extends LightningElement {
     ) {
         trackGtm(target!, "custEv_formCompletion", {
             converting_page: `SFDC:us:signup:${convertingPage}`,
-            converting_page_url: `https://developer.salesforce.com/developer-legacy/signup/${convertingPage}`,
+            converting_page_url: `https://developer.salesforce.com/signup/${convertingPage}`,
             form_country: formData.user.country,
             form_name: "Dev Edition Signup",
             form_primary_product_interest: "Developer Edition",
@@ -148,7 +169,7 @@ export default class DeSignupForm extends LightningElement {
         }
 
         const formData = this.prepareUserData();
-        if (!formData) {
+        if (!formData || !this.recaptchaToken) {
             return;
         }
 
@@ -167,7 +188,7 @@ export default class DeSignupForm extends LightningElement {
         );
 
         this.setSubmitButtonDisabled(true);
-        submitForm(formData)
+        submitForm(formData, this.recaptchaToken)
             .then(() => {
                 trackGtm(event.target!, "custEv_signUp", {
                     authentication_method: "email",
@@ -175,7 +196,7 @@ export default class DeSignupForm extends LightningElement {
                     new_registration: true
                 });
                 this.trackFormCompletion(event.target!, formData, "success");
-                window.location.href = "/developer-legacy/signup/success";
+                window.location.href = "/signup/success";
             })
             .catch((error) => {
                 if (error.message === ErrorCode.GENERIC && didSubmitTimeout) {
@@ -187,10 +208,10 @@ export default class DeSignupForm extends LightningElement {
                     // If the timeout time has passed at the point of error, and the error code is simply "GENERIC",
                     // we do not know whether the org will ultimately be created (and we have no current way of confirming),
                     // so we navigate the user to an interim page that tells them to watch their email.
-                    window.location.href =
-                        "/developer-legacy/signup/account-verification";
+                    window.location.href = "/signup/account-verification";
                 } else {
                     this.setSubmitButtonDisabled(false);
+                    this.resetRecaptcha();
                     if (error.message === ErrorCode.DUPLICATE) {
                         this.knownDuplicateUsers.push(formData.user.username);
                     } else {

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

@@ -79,13 +79,19 @@ const checkOrgStatus = (id: string, retries = 0): Promise<void> => {
     });
 };
 
-export const submitForm = async (formData: SignupForm): Promise<void> => {
+export const submitForm = async (
+    formData: SignupForm,
+    recaptchaToken: string
+): Promise<void> => {
     const response = await fetch(CREATE_PATH, {
         method: "POST",
         headers: {
             "Content-Type": "application/json"
         },
-        body: JSON.stringify(formData)
+        body: JSON.stringify({
+            ...formData,
+            "g-recaptcha-response": recaptchaToken
+        })
     });
 
     if (!response.ok) {