@gudhub/ssg-web-components-library 1.0.105 → 1.0.107

package/package.json

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

package/src/components/blog/category-banner/category-banner.js

@@ -32,7 +32,7 @@ class CategoryBanner extends GHComponent {
         const items = await gudhub.getItems(ids.appId);
         const item = items.find(item => item.item_id == ids.itemId);
 
-        let description = await fetch(`https://gudhub.com/userdata/${ids.appId}/${item.fields.find(field => field.field_id == window.getConfig().chapters.blog.description_field_id).field_value}.html?t=${new Date().getTime()}`);
+        let description = await fetch(`https://app.gudhub.com/userdata/${ids.appId}/${item.fields.find(field => field.field_id == window.getConfig().chapters.blog.description_field_id).field_value}.html?t=${new Date().getTime()}`);
         description = await description.text();
 
         let div = document.createElement('div');

package/src/components/blog/comments/comments.js

@@ -111,7 +111,7 @@ class CommentsComponent extends GHComponent {
 
         if (comment.name && comment.text) {
             const { api_app_id } = window.getConfig().chapters.blog;
-            const response = await fetch(`https://gudhub.com/api/services/prod/api/${api_app_id}/add-comment`, {
+            const response = await fetch(`https://app.gudhub.com/api/services/api/${api_app_id}/add-comment`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'

package/src/components/blog/posts-template/posts-template.js

@@ -309,7 +309,7 @@ class PostsTemplate extends GHComponent {
 
         const { api_app_id } = window.getConfig().chapters.blog;
 
-        const response = await fetch(`https://gudhub.com/api/services/prod/api/${api_app_id}/articles`);
+        const response = await fetch(`https://app.gudhub.com/api/services/api/${api_app_id}/articles`);
         const data = await response.json();
         let articles = data.articlesAndComments.articles;
         let comments = data.articlesAndComments.comments;
@@ -334,7 +334,7 @@ class PostsTemplate extends GHComponent {
         }
 
         if (this.type === 'category') {
-            const categoriesResponse = await fetch(`https://gudhub.com/api/services/prod/api/${api_app_id}/categories`)
+            const categoriesResponse = await fetch(`https://app.gudhub.com/api/services/api/${api_app_id}/categories`)
             let categories = await categoriesResponse.json();
             categories = categories.categories;
             let category = window.location.pathname;
@@ -364,7 +364,7 @@ class PostsTemplate extends GHComponent {
             return articles;
         }
         if (this.type === 'author') {
-            const authorsResponse = await fetch(`https://gudhub.com/api/services/prod/api/${api_app_id}/authors`)
+            const authorsResponse = await fetch(`https://app.gudhub.com/api/services/api/${api_app_id}/authors`)
             let authors = await authorsResponse.json();
             authors = authors.authors;
             const author = window.location.pathname;
@@ -409,7 +409,7 @@ class PostsTemplate extends GHComponent {
     async fetchIntro(posts) {
         const { api_app_id, intro_field_id, app_id } = window.getConfig().chapters.blog;
         const fetchData = async (index, item_id) => {
-            const responseIntro = await fetch(`https://gudhub.com/api/services/prod/api/${api_app_id}/get-intro?app_id=${app_id}&item_id=${item_id}&element_id=${intro_field_id}`);
+            const responseIntro = await fetch(`https://app.gudhub.com/api/services/api/${api_app_id}/get-intro?app_id=${app_id}&item_id=${item_id}&element_id=${intro_field_id}`);
             const dataIntro = await responseIntro.json();
             let introItems = JSON.parse(dataIntro.data).blocks[0].data;
             posts[index].intro = introItems;
@@ -473,7 +473,7 @@ class PostsTemplate extends GHComponent {
             if (!articles[0].author_slug) {
                 
                 const { api_app_id } = window.getConfig().chapters.blog;
-                const authorsResponse = await fetch(`https://gudhub.com/api/services/prod/api/${api_app_id}/authors`)
+                const authorsResponse = await fetch(`https://app.gudhub.com/api/services/api/${api_app_id}/authors`)
                 authors = await authorsResponse.json();
                 authors = authors.authors;
             }

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

@@ -7,6 +7,10 @@ import { checkInputsValidations } from './inputsValidation.js';
 let recaptchaPromise = null;
 
 function loadRecaptcha(siteKey) {
+    if (!siteKey) {
+        return Promise.reject(new Error('reCAPTCHA site key is missing'));
+    }
+
     if (window.grecaptcha) return Promise.resolve(window.grecaptcha);
 
     if (recaptchaPromise) return recaptchaPromise;
@@ -19,10 +23,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);
     });
@@ -68,6 +72,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 +109,10 @@ class GetInTouchForm extends GHComponent {
     }
 
     async getRecaptchaToken(action = 'submit') {
+        if (!this.recaptcha_site_key) {
+            throw new Error('reCAPTCHA site key is missing');
+        }
+
         const grecaptcha = await loadRecaptcha(this.recaptcha_site_key);
 
         return new Promise((resolve, reject) => {
@@ -126,7 +136,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 +168,6 @@ class GetInTouchForm extends GHComponent {
         window.dispatchEvent(new CustomEvent('submitForm', { detail: { formDataObj } }));
 
         this.isFormSubmitted = true;
-        this.removeLoader();
     };
 
     inputsValidation = async (form) => {
@@ -166,16 +175,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 +233,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 +257,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');
     }
 

package/src/components/image-component/image-component.readme.md

@@ -42,7 +42,7 @@ We have two different ways to use this component:
 | `alt`            | Alternative text for the image                                         | `string`<br>`"Description of image"`                        |
 | `title`          | Image title (shown as tooltip)                                         | `string`<br>`"My Image Title"`                              |
 | `lazyload`       | Enables native browser lazy loading (`loading="lazy"`)                 | `boolean` (just include the attribute)                      |
-| `data-url`       | Remote image URL                                                       | `string`<br>`https://gudhub.com/userdata/29883/1083204.jpg` |
+| `data-url`       | Remote image URL                                                       | `string`<br>`https://app.gudhub.com/userdata/29883/1083204.jpg` |
 | `data-rerender`  | Enables client-side rerendering after SSR *(currently not working❗❗❗)* | `boolean` (just include the attribute)                      |
 | `width`          | Image width                                                            | `string`<br>`"300"`                                         |
 | `height`         | Image height                                                           | `string`<br>`"200"`                                         |

package/src/components/meta/meta-tag.js

@@ -104,7 +104,7 @@ class MetaTag extends GHComponent {
         let slugValue = item.fields.find(findedField => findedField.field_id == slugId).field_value;
         let imageValue = (!slugValue.includes('/blog/') && !slugValue.includes('/service-areas/') && !slugValue.includes('/courses/')) ? item.fields.find(findedField => findedField.field_id == imageUrl).field_value : false;
 
-        // value = isNaN(value) ? value : await this.getContent(`https://gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${value}.html`);
+        // value = isNaN(value) ? value : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${value}.html`);
         titleValue = isNaN(titleValue) ? titleValue : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${titleValue}.html`);
         descriptionValue = isNaN(descriptionValue) ? descriptionValue : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${descriptionValue}.html`);
         slugValue = isNaN(slugValue) ? slugValue : await this.getContent(`https://app.gudhub.com/userdata/${window.getConfig().chapters[chapter].app_id}/${slugValue}.html`);