@gudhub/ssg-web-components-library 1.0.106 → 1.0.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudhub/ssg-web-components-library",
-  "version": "1.0.106",
+  "version": "1.0.108",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/components/get-in-touch-form/get-in-touch-form.js

@@ -7,6 +7,11 @@ import { checkInputsValidations } from './inputsValidation.js';
 let recaptchaPromise = null;
 
 function loadRecaptcha(siteKey) {
+    if (!siteKey) {
+        console.warn('reCAPTCHA site key is missing');
+        return Promise.resolve(null);
+    }
+
     if (window.grecaptcha) return Promise.resolve(window.grecaptcha);
 
     if (recaptchaPromise) return recaptchaPromise;
@@ -19,10 +24,10 @@ function loadRecaptcha(siteKey) {
 
         script.onload = () => {
             if (window.grecaptcha) resolve(window.grecaptcha);
-            else reject('grecaptcha not available');
+            else reject(new Error('grecaptcha not available'));
         };
 
-        script.onerror = reject;
+        script.onerror = () => reject(new Error('Failed to load reCAPTCHA script'));
 
         document.head.appendChild(script);
     });
@@ -60,7 +65,9 @@ class GetInTouchForm extends GHComponent {
             this.initConfig(this.config);
             this.attachEventListeners();
 
-            loadRecaptcha(this.recaptcha_site_key).catch(console.error);
+            if (this.recaptcha_site_key) {
+                loadRecaptcha(this.recaptcha_site_key).catch(console.error);
+            }
         }
     }
 
@@ -68,6 +75,8 @@ class GetInTouchForm extends GHComponent {
         this.initConfig(this.config);
         super.render(html);
         this.attachEventListeners();
+
+        loadRecaptcha(this.recaptcha_site_key).catch(console.error);
     }
 
     attachEventListeners() {
@@ -103,6 +112,11 @@ class GetInTouchForm extends GHComponent {
     }
 
     async getRecaptchaToken(action = 'submit') {
+        if (!this.recaptcha_site_key) {
+            console.warn('reCAPTCHA site key is missing');
+            return null;
+        }
+
         const grecaptcha = await loadRecaptcha(this.recaptcha_site_key);
 
         return new Promise((resolve, reject) => {
@@ -126,7 +140,7 @@ class GetInTouchForm extends GHComponent {
             try {
                 const token = await this.getRecaptchaToken();
 
-                await this.fetchExample(token);
+                await this.verifyRecaptcha(token);
 
                 this.handleSuccessFormValidation(form, token);
 
@@ -158,7 +172,6 @@ class GetInTouchForm extends GHComponent {
         window.dispatchEvent(new CustomEvent('submitForm', { detail: { formDataObj } }));
 
         this.isFormSubmitted = true;
-        this.removeLoader();
     };
 
     inputsValidation = async (form) => {
@@ -166,16 +179,25 @@ class GetInTouchForm extends GHComponent {
         return checkInputsValidations(inputs);
     }
 
-    fetchExample = (recaptchaToken) => {
-        const isSuccess = true;
+    verifyRecaptcha = async (recaptchaToken) => {
+        const response = await fetch('/api/verify-recaptcha', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                token: recaptchaToken,
+                action: 'submit'
+            })
+        });
 
-        return new Promise((resolve, reject) => {
-            console.log('reCAPTCHA token:', recaptchaToken);
+        const data = await response.json();
 
-            setTimeout(() => {
-                isSuccess ? resolve() : reject();
-            }, 2000);
-        });
+        if (!response.ok || !data.success) {
+            throw new Error(data?.error || 'reCAPTCHA verification failed');
+        }
+
+        return data;
     }
 
     createDataObject(form, placement, recaptchaToken) {
@@ -215,15 +237,20 @@ class GetInTouchForm extends GHComponent {
         setTimeout(() => btn.disabled = false, 500);
     }
 
-    showSuccess({email, phone}) {
-        if (email) {
-            this.querySelector('.check_entity').classList.add('provided');
-            this.getElementsByClassName('email')[0].innerText = email;
+    showSuccess({ email, phone }) {
+        const emailEntity = this.querySelector('.check_entity');
+        const phoneEntity = this.querySelector('.phone_entity');
+        const emailEl = this.getElementsByClassName('email')[0];
+        const phoneEl = this.getElementsByClassName('phone')[0];
+
+        if (email && emailEntity && emailEl) {
+            emailEntity.classList.add('provided');
+            emailEl.innerText = email;
         }
 
-        if (phone) {
-            this.querySelector('.phone_entity').classList.add('provided');
-            this.getElementsByClassName('phone')[0].innerText = phone;
+        if (phone && phoneEntity && phoneEl) {
+            phoneEntity.classList.add('provided');
+            phoneEl.innerText = phone;
         }
 
         this.classList.add('success');
@@ -234,9 +261,16 @@ class GetInTouchForm extends GHComponent {
     }
 
     hideSuccess() {
-        this.getElementsByClassName('email')[0].innerText = '';
-        this.getElementsByClassName('phone')[0].innerText = '';
-        this.querySelector('.phone_entity').classList.remove('provided');
+        const emailEl = this.getElementsByClassName('email')[0];
+        const phoneEl = this.getElementsByClassName('phone')[0];
+        const phoneEntity = this.querySelector('.phone_entity');
+        const emailEntity = this.querySelector('.check_entity');
+
+        if (emailEl) emailEl.innerText = '';
+        if (phoneEl) phoneEl.innerText = '';
+        if (phoneEntity) phoneEntity.classList.remove('provided');
+        if (emailEntity) emailEntity.classList.remove('provided');
+
         this.classList.remove('success');
     }