@gudhub/ssg-web-components-library 1.0.103 → 1.0.104

package/package.json

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

package/src/components/breadcrumbs/breadcrumbs-component.js

@@ -26,6 +26,8 @@ class BreadcrumbsComponent extends GHComponent {
 
         this.items === null ? console.error(`Didn't find current route in config, current URL: ${currentUrl}`) : null;
 
+        console.log("this.items:", this.items);
+
         if (this.items) {
             super.render(html);
         }

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

@@ -26,6 +26,7 @@ class GetInTouchBlock extends GHComponent {
         this.subtitleName = this.hasAttribute('data-form-subtitle') ? this.getAttribute('data-form-subtitle') : null;
         this.placement = this.hasAttribute('data-form-placement') ? this.getAttribute('data-form-placement') : "main";
         this.buttonText = this.hasAttribute('data-form-button-text') ? this.getAttribute('data-form-button-text') : null;
+        this.recaptchaSiteKey = this.hasAttribute('data-recaptcha-site-key') ? this.getAttribute('data-recaptcha-site-key') : null;
         
         const attributes = [{
             'data-form-id': this.formId,
@@ -33,6 +34,7 @@ class GetInTouchBlock extends GHComponent {
             'data-form-subtitle': this.subtitleName,
             'data-form-placement': this.placement,
             'data-form-button-text': this.buttonText,
+            'data-recaptcha-site-key': this.recaptchaSiteKey,
         }];
         
         const attributesString = attributes.reduce((acc, obj) => {
@@ -47,4 +49,5 @@ class GetInTouchBlock extends GHComponent {
         return attributesString;
     }
 }
-window.customElements.define('get-in-touch-block', GetInTouchBlock);
+
+window.customElements.define('get-in-touch-block', GetInTouchBlock);

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

@@ -1,12 +1,39 @@
 import html from './get-in-touch-form.html';
 import './get-in-touch-form.scss';
+
 import defaultConfigs from './get-in-touch-form-data.json';
 import { checkInputsValidations } from './inputsValidation.js';
 
-class GetInTouchForm extends GHComponent {
+let recaptchaPromise = null;
+
+function loadRecaptcha(siteKey) {
+    if (window.grecaptcha) return Promise.resolve(window.grecaptcha);
+
+    if (recaptchaPromise) return recaptchaPromise;
+
+    recaptchaPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+        script.async = true;
+        script.defer = true;
+
+        script.onload = () => {
+            if (window.grecaptcha) resolve(window.grecaptcha);
+            else reject('grecaptcha not available');
+        };
+
+        script.onerror = reject;
+
+        document.head.appendChild(script);
+    });
+
+    return recaptchaPromise;
+}
 
+class GetInTouchForm extends GHComponent {
     constructor() {
         super();
+
         this.formId = this.getAttribute("data-form-id");
         this.defaultConfigs = defaultConfigs;
 
@@ -15,12 +42,14 @@ class GetInTouchForm extends GHComponent {
         
         this.placement = 'main';
         this.config = window.getConfig()?.componentsConfigs?.formConfig || window.getConfig()?.formConfig;
+
+        this.recaptcha_site_key = this.hasAttribute('data-recaptcha-site-key')
+            ? this.getAttribute('data-recaptcha-site-key')
+            : null;
     }
 
     onServerRender() {
-        if (this.hasAttribute('data-in-popup')) {
-            return;
-        }
+        if (this.hasAttribute('data-in-popup')) return;
 
         this.initConfig(this.config);
         super.render(html);
@@ -30,6 +59,8 @@ class GetInTouchForm extends GHComponent {
         if (!this.hasAttribute('data-in-popup')) {
             this.initConfig(this.config);
             this.attachEventListeners();
+
+            loadRecaptcha(this.recaptcha_site_key).catch(console.error);
         }
     }
 
@@ -40,8 +71,11 @@ class GetInTouchForm extends GHComponent {
     }
 
     attachEventListeners() {
-        this.getElementsByTagName('form')[0].addEventListener('submit', (e) => this.handleSubmit(e));
-        this.getElementsByClassName('restart_button')[0].addEventListener('click', (e) => this.hideFail());
+        this.getElementsByTagName('form')[0]
+            .addEventListener('submit', (e) => this.handleSubmit(e));
+
+        this.getElementsByClassName('restart_button')[0]
+            .addEventListener('click', () => this.hideFail());
     }
 
     onParentPopupClose() {
@@ -56,53 +90,70 @@ class GetInTouchForm extends GHComponent {
     initConfig(formConfigs) {
         try {
             this.config = formConfigs.find(({ id }) => id === this.formId);
-            if (!this.config) {
-                throw new Error("Config not found");
-            }
-        } catch (error) {
+            if (!this.config) throw new Error("Config not found");
+        } catch {
             const defaultId = this.isInPopup ? 'default popup' : 'default';
             this.config = defaultConfigs.find(({ id }) => id === defaultId);
         }
 
-        this.titleName = this.hasAttribute('data-form-title') ? this.getAttribute('data-form-title') : this.config.title;
-        this.subtitleName = this.hasAttribute('data-form-subtitle') ? this.getAttribute('data-form-subtitle') : this.config.subtitle;
-        this.placement = this.hasAttribute('data-form-placement') ? this.getAttribute('data-form-placement') : "main";
-        this.buttonText = this.hasAttribute('data-form-button-text') ? this.getAttribute('data-form-button-text') : this.config.button_text;
-    };
+        this.titleName = this.getAttribute('data-form-title') || this.config.title;
+        this.subtitleName = this.getAttribute('data-form-subtitle') || this.config.subtitle;
+        this.placement = this.getAttribute('data-form-placement') || "main";
+        this.buttonText = this.getAttribute('data-form-button-text') || this.config.button_text;
+    }
+
+    async getRecaptchaToken(action = 'submit') {
+        const grecaptcha = await loadRecaptcha(this.recaptcha_site_key);
+
+        return new Promise((resolve, reject) => {
+            grecaptcha.ready(() => {
+                grecaptcha.execute(this.recaptcha_site_key, { action })
+                    .then(resolve)
+                    .catch(reject);
+            });
+        });
+    }
 
     async handleSubmit(event) {
         event.preventDefault();
         const form = event.target;
-    
-        const validationResults = await this.inputsValidation(form);  //await because we can make async check (for example: email verify for send opportunity)
+
+        const validationResults = await this.inputsValidation(form);
 
         if (validationResults.every(({ isValid }) => isValid)) {
             this.addLoader();
+
             try {
-                await this.fetchExample();
+                const token = await this.getRecaptchaToken();
+
+                await this.fetchExample(token);
+
+                this.handleSuccessFormValidation(form, token);
 
-                this.handleSuccessFormValidation(form);
             } catch (error) {
                 console.error(error);
                 this.showFail();
             }
 
-            this.removeLoader(form);
+            this.removeLoader();
 
         } else {
-            //show error on correspond input
-            const validationResultsForErrors = validationResults.filter(item => typeof item === 'object')
-            validationResultsForErrors.forEach(({ input, isValid }) => this.toggleError(input, isValid));
+            validationResults
+                .filter(item => typeof item === 'object')
+                .forEach(({ input, isValid }) => this.toggleError(input, isValid));
         }
     }
 
-    handleSuccessFormValidation = (form) => {
+    handleSuccessFormValidation = (form, token) => {
         const emailInput = form.querySelector('[name="email"]');
         const phoneInput = form.querySelector('[name="phone"]');
 
-        this.showSuccess({ email: emailInput ? emailInput.value : '', phone: phoneInput ? phoneInput.value : '' });
+        this.showSuccess({
+            email: emailInput?.value || '',
+            phone: phoneInput?.value || ''
+        });
 
-        const formDataObj = this.createDataObject(form, this.placement)
+        const formDataObj = this.createDataObject(form, this.placement, token);
 
         window.dispatchEvent(new CustomEvent('submitForm', { detail: { formDataObj } }));
 
@@ -112,38 +163,31 @@ class GetInTouchForm extends GHComponent {
 
     inputsValidation = async (form) => {
         const inputs = Array.from(form.querySelectorAll('input'));
-
-        const validationResults = checkInputsValidations(inputs);
-
-        return validationResults;
+        return checkInputsValidations(inputs);
     }
 
-    fetchExample = () => {
+    fetchExample = (recaptchaToken) => {
         const isSuccess = true;
 
         return new Promise((resolve, reject) => {
-            const TIMEOUT_DURATION = 2000;
+            console.log('reCAPTCHA token:', recaptchaToken);
 
             setTimeout(() => {
-                if (isSuccess) {
-                    resolve();
-                } else {
-                    reject();
-                }
-            }, TIMEOUT_DURATION);
+                isSuccess ? resolve() : reject();
+            }, 2000);
         });
     }
-    
-    createDataObject(form, placement) {
+
+    createDataObject(form, placement, recaptchaToken) {
         const inputs = {};
 
-        for (const [name, value] of (new FormData(form)).entries()) {
+        for (const [name, value] of new FormData(form).entries()) {
             inputs[name] = value;
         }
 
         const { id, mailConfig } = this.config;
 
-        const formDataObj = {
+        return {
             inputs,
             mailConfig,
             website: window.location.hostname,
@@ -151,9 +195,8 @@ class GetInTouchForm extends GHComponent {
             formId: id,
             formPlacement: placement,
             referrer: localStorage.getItem('referrer'),
+            recaptchaToken
         };
-
-        return formDataObj;
     }
 
     toggleError(input, isValid) {
@@ -161,49 +204,49 @@ class GetInTouchForm extends GHComponent {
         input.parentElement.classList[isValid ? 'remove' : 'add']('error-input');
     }
 
-    async addLoader() {
+    addLoader() {
         this.classList.add('loading');
         this.querySelector('button[type="submit"]').disabled = true;
     }
 
-    async removeLoader() {
+    removeLoader() {
         this.classList.remove('loading');
-        const submitButton = this.querySelector('button[type="submit"]');
-        setTimeout(() => {
-            submitButton.disabled = false;
-        }, 500);
+        const btn = this.querySelector('button[type="submit"]');
+        setTimeout(() => btn.disabled = false, 500);
     }
 
-    async showSuccess({email, phone}) {
+    showSuccess({email, phone}) {
         if (email) {
             this.querySelector('.check_entity').classList.add('provided');
             this.getElementsByClassName('email')[0].innerText = email;
         }
-        this.classList.add('success');
+
         if (phone) {
-            this.querySelector('.check_entity.phone_entity').classList.add('provided');
+            this.querySelector('.phone_entity').classList.add('provided');
             this.getElementsByClassName('phone')[0].innerText = phone;
         }
+
         this.classList.add('success');
     }
 
-    async showFail() {
+    showFail() {
         this.classList.add('fail');
     }
 
-    async hideSuccess() {
+    hideSuccess() {
         this.getElementsByClassName('email')[0].innerText = '';
         this.getElementsByClassName('phone')[0].innerText = '';
-        this.querySelector('.check_entity.phone_entity').classList.remove('provided');
+        this.querySelector('.phone_entity').classList.remove('provided');
         this.classList.remove('success');
     }
 
-    async hideFail() {
-        const overflowFail = this.querySelector('.overflow.fail');
-        overflowFail.style.opacity = 0;
+    hideFail() {
+        const el = this.querySelector('.overflow.fail');
+        el.style.opacity = 0;
+
         setTimeout(() => {
             this.classList.remove('fail');
-            overflowFail.style.opacity = '';
+            el.style.opacity = '';
         }, 500);
     }
 
@@ -218,10 +261,15 @@ class GetInTouchForm extends GHComponent {
 
             const tag = input.type === 'textarea' ? 'textarea' : 'input';
             const maxLength = tag === 'textarea' ? maxSymbols.long : maxSymbols[input.type];
+
             return acc + `
                 <div class="input-wrap col-${input.width}">
                     ${input.title ? `<label for="${input.name}">${input.title}</label>` : ''}
-                    <${tag} type="text" name=${input.name} ${input.placeholder ? `placeholder="${input.placeholder}"` : ''} ${JSON.parse(input.required) ? 'required' : ''} ${maxLength ? `maxlength=${maxLength}` : ''}></${tag}>
+                    <${tag} name="${input.name}"
+                        ${input.placeholder ? `placeholder="${input.placeholder}"` : ''}
+                        ${JSON.parse(input.required) ? 'required' : ''}
+                        ${maxLength ? `maxlength="${maxLength}"` : ''}>
+                    </${tag}>
                     ${input.type === 'email' || input.type === 'phone' ? `<span class="${input.type}-error">${input.errorText}</span>` : ''}
                 </div>
             `;
@@ -231,4 +279,4 @@ class GetInTouchForm extends GHComponent {
 
 if (!customElements.get('get-in-touch-form')) {
     customElements.define('get-in-touch-form', GetInTouchForm);
-}
+}