@gudhub/ssg-web-components-library 1.0.116 → 1.0.118

package/package.json

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

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

@@ -10,9 +10,6 @@
             <button type="submit" class="btn">${buttonText ? buttonText : 'Get in touch'}</button>
             <div class="loader"></div>
         </div>
-        <div class="recaptcha-notice">
-            This site is protected by reCAPTCHA.
-        </div>
     </form>
     <div class="overflow success">
         <div class="icon_wrapper">

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

@@ -5,7 +5,6 @@ import defaultConfigs from './get-in-touch-form-data.json';
 import { checkInputsValidations } from './inputsValidation.js';
 
 let recaptchaPromise = null;
-let recaptchaBadgeObserver = null;
 
 function loadRecaptcha(siteKey) {
     if (!siteKey) {
@@ -36,41 +35,16 @@ function loadRecaptcha(siteKey) {
     return recaptchaPromise;
 }
 
-function hideRecaptchaBadge() {
-    const badge = document.querySelector('.grecaptcha-badge');
-
-    if (!badge) return;
-
-    badge.style.setProperty('visibility', 'hidden', 'important');
-    badge.style.setProperty('opacity', '0', 'important');
-    badge.style.setProperty('pointer-events', 'none', 'important');
-}
-
-function observeRecaptchaBadge() {
-    hideRecaptchaBadge();
-
-    if (recaptchaBadgeObserver) return;
-
-    recaptchaBadgeObserver = new MutationObserver(() => {
-        hideRecaptchaBadge();
-    });
-
-    recaptchaBadgeObserver.observe(document.body, {
-        childList: true,
-        subtree: true
-    });
-}
-
 class GetInTouchForm extends GHComponent {
     constructor() {
         super();
 
-        this.formId = this.getAttribute('data-form-id');
+        this.formId = this.getAttribute("data-form-id");
         this.defaultConfigs = defaultConfigs;
 
         this.generateInput = this.generateInput;
         this.isFormSubmitted = false;
-
+        
         this.placement = 'main';
         this.config = window.getConfig()?.componentsConfigs?.formConfig || window.getConfig()?.formConfig;
 
@@ -92,11 +66,7 @@ class GetInTouchForm extends GHComponent {
             this.attachEventListeners();
 
             if (this.recaptcha_site_key) {
-                loadRecaptcha(this.recaptcha_site_key)
-                    .then(() => {
-                        observeRecaptchaBadge();
-                    })
-                    .catch(console.error);
+                loadRecaptcha(this.recaptcha_site_key).catch(console.error);
             }
         }
     }
@@ -106,26 +76,15 @@ class GetInTouchForm extends GHComponent {
         super.render(html);
         this.attachEventListeners();
 
-        if (this.recaptcha_site_key) {
-            loadRecaptcha(this.recaptcha_site_key)
-                .then(() => {
-                    observeRecaptchaBadge();
-                })
-                .catch(console.error);
-        }
+        loadRecaptcha(this.recaptcha_site_key).catch(console.error);
     }
 
     attachEventListeners() {
-        const form = this.getElementsByTagName('form')[0];
-        const restartButton = this.getElementsByClassName('restart_button')[0];
+        this.getElementsByTagName('form')[0]
+            .addEventListener('submit', (e) => this.handleSubmit(e));
 
-        if (form) {
-            form.addEventListener('submit', (e) => this.handleSubmit(e));
-        }
-
-        if (restartButton) {
-            restartButton.addEventListener('click', () => this.hideFail());
-        }
+        this.getElementsByClassName('restart_button')[0]
+            .addEventListener('click', () => this.hideFail());
     }
 
     onParentPopupClose() {
@@ -140,7 +99,7 @@ class GetInTouchForm extends GHComponent {
     initConfig(formConfigs) {
         try {
             this.config = formConfigs.find(({ id }) => id === this.formId);
-            if (!this.config) throw new Error('Config not found');
+            if (!this.config) throw new Error("Config not found");
         } catch {
             const defaultId = this.isInPopup ? 'default popup' : 'default';
             this.config = defaultConfigs.find(({ id }) => id === defaultId);
@@ -148,7 +107,7 @@ class GetInTouchForm extends GHComponent {
 
         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.placement = this.getAttribute('data-form-placement') || "main";
         this.buttonText = this.getAttribute('data-form-button-text') || this.config.button_text;
     }
 
@@ -162,8 +121,6 @@ class GetInTouchForm extends GHComponent {
 
         return new Promise((resolve, reject) => {
             grecaptcha.ready(() => {
-                hideRecaptchaBadge();
-
                 grecaptcha.execute(this.recaptcha_site_key, { action })
                     .then(resolve)
                     .catch(reject);
@@ -189,6 +146,7 @@ class GetInTouchForm extends GHComponent {
                 }
 
                 this.handleSuccessFormValidation(form, token);
+
             } catch (error) {
                 console.error(error);
                 this.showFail();
@@ -221,7 +179,7 @@ class GetInTouchForm extends GHComponent {
     inputsValidation = async (form) => {
         const inputs = Array.from(form.querySelectorAll('input'));
         return checkInputsValidations(inputs);
-    };
+    }
 
     verifyRecaptcha = async (recaptchaToken) => {
         const response = await fetch('/api/verify-recaptcha', {
@@ -242,7 +200,7 @@ class GetInTouchForm extends GHComponent {
         }
 
         return data;
-    };
+    }
 
     createDataObject(form, placement, recaptchaToken) {
         const inputs = {};
@@ -272,24 +230,13 @@ class GetInTouchForm extends GHComponent {
 
     addLoader() {
         this.classList.add('loading');
-
-        const btn = this.querySelector('button[type="submit"]');
-
-        if (btn) {
-            btn.disabled = true;
-        }
+        this.querySelector('button[type="submit"]').disabled = true;
     }
 
     removeLoader() {
         this.classList.remove('loading');
-
         const btn = this.querySelector('button[type="submit"]');
-
-        if (btn) {
-            setTimeout(() => {
-                btn.disabled = false;
-            }, 500);
-        }
+        setTimeout(() => btn.disabled = false, 500);
     }
 
     showSuccess({ email, phone }) {
@@ -331,9 +278,6 @@ class GetInTouchForm extends GHComponent {
 
     hideFail() {
         const el = this.querySelector('.overflow.fail');
-
-        if (!el) return;
-
         el.style.opacity = 0;
 
         setTimeout(() => {
@@ -371,4 +315,4 @@ class GetInTouchForm extends GHComponent {
 
 if (!customElements.get('get-in-touch-form')) {
     customElements.define('get-in-touch-form', GetInTouchForm);
-}
+}

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

@@ -271,12 +271,6 @@ get-in-touch-form {
             }
         }
     }
-    .recaptcha-notice {
-        margin-top: 10px;
-        font-size: 12px;
-        line-height: 1.4;
-        opacity: 0.7;
-    }
     &[data-in-popup] {
         .get-in-touch-form {
             padding-top: 0;
@@ -374,10 +368,4 @@ popup-container[data-position="bottom-right"] {
             }
         }
     }
-}
-
-body .grecaptcha-badge {
-    visibility: hidden !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
 }

package/src/components/liqpay-component/config.js

@@ -0,0 +1,6 @@
+export const liqpayComponent = {
+  tag: 'liqpay-component',
+  category: 'Payment',
+  src: '@gudhub/ssg-web-components-library/src/components/liqpay-component/liqpay-component.js',
+  serverOnly: false
+};

package/src/components/liqpay-component/liqpay-component.html

@@ -0,0 +1,91 @@
+<section class="liqpay-component">
+    <!-- <div class="liqpay-component__logo">
+        <div class="liqpay-component__logo-badge">
+            <div class="liqpay-component__logo-badge-text">
+                <span class="liqpay-component__logo-gud">GUD</span>
+                <span class="liqpay-component__logo-hub">HUB</span>
+            </div>
+        </div>
+        <span class="liqpay-component__logo-crm">CRM</span>
+    </div> -->
+
+    <h1 class="liqpay-component__title" data-liqpay-title></h1>
+
+    <p class="liqpay-component__subtitle" data-liqpay-subtitle></p>
+
+    <div class="liqpay-component__card">
+        <div class="liqpay-component__amount-row">
+            <div>
+                <p class="liqpay-component__amount-label">Amount</p>
+                <p class="liqpay-component__amount" data-liqpay-amount></p>
+            </div>
+            <div class="liqpay-component__secured-badge">
+                <div class="liqpay-component__secured-icon" aria-hidden="true">
+                    <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <polyline points="2,5 4,7.5 8,3" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </div>
+                <span class="liqpay-component__secured-text">Secured</span>
+            </div>
+        </div>
+
+        <div class="liqpay-component__divider"></div>
+
+        <div class="liqpay-component__summary">
+            <div class="liqpay-component__summary-row">
+                <span class="liqpay-component__summary-label">Description</span>
+                <strong class="liqpay-component__summary-value" data-liqpay-description></strong>
+            </div>
+
+            <div class="liqpay-component__summary-row" data-liqpay-order-row>
+                <span class="liqpay-component__summary-label">Order ID</span>
+                <strong class="liqpay-component__summary-value" data-liqpay-order-id></strong>
+            </div>
+        </div>
+
+        <p class="liqpay-component__text" data-liqpay-text></p>
+
+        <form
+            class="liqpay-component__form"
+            method="POST"
+            accept-charset="utf-8"
+            data-liqpay-form
+        >
+            <input type="hidden" name="data" data-liqpay-data>
+            <input type="hidden" name="signature" data-liqpay-signature>
+
+            <button class="liqpay-component__button" type="button" data-liqpay-button>
+                <svg class="liqpay-component__button-icon" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <rect x="2" y="7" width="14" height="10" rx="2" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M6 7V5a3 3 0 016 0v2" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span data-liqpay-button-text></span>
+            </button>
+        </form>
+
+        <p class="liqpay-component__error" data-liqpay-error hidden></p>
+
+        <p class="liqpay-component__powered">
+            Powered by <span class="liqpay-component__powered-brand">LiqPay</span>
+        </p>
+    </div>
+
+    <div class="liqpay-component__security">
+        <div class="liqpay-component__security-item">
+            <div class="liqpay-component__security-icon" aria-hidden="true">
+                <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <polyline points="2,5 4,7.5 8,3" stroke="#16a34a" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+            <span>256-bit Encryption</span>
+        </div>
+        <div class="liqpay-component__security-item">
+            <div class="liqpay-component__security-icon" aria-hidden="true">
+                <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <polyline points="2,5 4,7.5 8,3" stroke="#16a34a" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+            <span>PCI DSS Compliant</span>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,197 @@
+import html from './liqpay-component.html';
+import './liqpay-component.scss';
+import jsonTemplate from './liqpay-component.json';
+
+class LiqpayComponent extends window.GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+
+        this.isLoading = false;
+    }
+
+    async onServerRender() {
+        super.render(html);
+    }
+
+    onClientRender() {
+        this.initComponent();
+    }
+
+    initComponent() {
+        this.titleElement = this.querySelector('[data-liqpay-title]');
+        this.subtitleElement = this.querySelector('[data-liqpay-subtitle]');
+        this.amountElement = this.querySelector('[data-liqpay-amount]');
+        this.descriptionElement = this.querySelector('[data-liqpay-description]');
+        this.textElement = this.querySelector('[data-liqpay-text]');
+        this.orderRowElement = this.querySelector('[data-liqpay-order-row]');
+        this.orderIdElement = this.querySelector('[data-liqpay-order-id]');
+        this.formElement = this.querySelector('[data-liqpay-form]');
+        this.dataInput = this.querySelector('[data-liqpay-data]');
+        this.signatureInput = this.querySelector('[data-liqpay-signature]');
+        this.buttonElement = this.querySelector('[data-liqpay-button]');
+        this.buttonTextElement = this.querySelector('[data-liqpay-button-text]');
+        this.errorElement = this.querySelector('[data-liqpay-error]');
+
+        this.renderPaymentInfo();
+        this.bindEvents();
+    }
+
+    getConfig() {
+        return {
+            ...jsonTemplate,
+            ...(this.json || {})
+        };
+    }
+
+    renderPaymentInfo() {
+        const config = this.getConfig();
+
+        console.log("CONFIG:", config);
+
+        const amount = Number(config.amount || 0);
+        const currency = config.currency || 'UAH';
+
+        this.titleElement.textContent = config.title || '';
+        this.subtitleElement.textContent = config.subtitle || '';
+        this.descriptionElement.textContent = config.payment_description || '';
+        this.textElement.textContent = config.description || '';
+        this.amountElement.textContent = this.formatAmount(amount, currency);
+        this.buttonTextElement.textContent = config.button_text || 'Сплатити';
+
+        if (config.order_id) {
+            this.orderIdElement.textContent = config.order_id;
+            this.orderRowElement.hidden = false;
+        } else {
+            this.orderIdElement.textContent = '';
+            this.orderRowElement.hidden = true;
+        }
+
+        this.formElement.action = config.liqpay_checkout_url;
+    }
+
+    bindEvents() {
+        this.buttonElement.addEventListener('click', () => this.handlePayment());
+    }
+
+    async handlePayment() {
+        if (this.isLoading) {
+            return;
+        }
+
+        const config = this.getConfig();
+
+        this.hideError();
+
+        if (!this.validatePaymentConfig(config)) {
+            this.showError('Некоректні дані для оплати.');
+            return;
+        }
+
+        try {
+            this.setLoading(true);
+
+            const payment = await this.createPayment(config);
+
+            this.dataInput.value = payment.data;
+            this.signatureInput.value = payment.signature;
+
+            this.formElement.submit();
+        } catch (error) {
+            console.error('Failed to create LiqPay payment:', error);
+            this.showError(
+                config.error_text || 'Не вдалося підготувати оплату. Спробуйте ще раз.'
+            );
+        } finally {
+            this.setLoading(false);
+        }
+    }
+
+    async createPayment(config) {
+        const response = await fetch(`https://gudhub-nodejs.ngrok.io:443${config.create_payment_url}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                amount: config.amount,
+                currency: config.currency,
+                order_id: config.order_id,
+                description: config.payment_description
+            })
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+
+            throw new Error(`Payment request failed with status ${response.status}: ${errorText}`);
+        }
+
+        const payment = await response.json();
+
+        if (!payment?.data || !payment?.signature) {
+            throw new Error('Invalid payment response');
+        }
+
+        return payment;
+    }
+
+    validatePaymentConfig(config) {
+        const amount = Number(config.amount);
+
+        if (!Number.isFinite(amount) || amount <= 0) {
+            return false;
+        }
+
+        if (!config.currency) {
+            return false;
+        }
+
+        if (!config.order_id) {
+            return false;
+        }
+
+        if (!config.payment_description) {
+            return false;
+        }
+
+        if (!config.create_payment_url) {
+            return false;
+        }
+
+        if (!config.liqpay_checkout_url) {
+            return false;
+        }
+
+        return true;
+    }
+
+    setLoading(isLoading) {
+        const config = this.getConfig();
+
+        this.isLoading = isLoading;
+        this.buttonElement.disabled = isLoading;
+        this.buttonTextElement.textContent = isLoading
+            ? config.loading_text || 'Підготовка оплати...'
+            : config.button_text || 'Сплатити';
+    }
+
+    showError(message) {
+        this.errorElement.textContent = message;
+        this.errorElement.hidden = false;
+    }
+
+    hideError() {
+        this.errorElement.textContent = '';
+        this.errorElement.hidden = true;
+    }
+
+    formatAmount(amount, currency) {
+        return new Intl.NumberFormat('uk-UA', {
+            style: 'currency',
+            currency
+        }).format(amount);
+    }
+}
+
+window.customElements.define('liqpay-component', LiqpayComponent);

package/src/components/liqpay-component/liqpay-component.json

@@ -0,0 +1,14 @@
+{
+    "title": "Test Payment",
+    "subtitle": "Complete your test payment securely with LiqPay.",
+    "description": "After clicking the button you will be redirected to the LiqPay secure payment page.",
+    "amount": 1,
+    "currency": "UAH",
+    "order_id": "test-order-001",
+    "payment_description": "Test LiqPay payment",
+    "button_text": "Сплатити",
+    "loading_text": "Підготовка оплати...",
+    "error_text": "Не вдалося підготувати оплату. Спробуйте ще раз.",
+    "create_payment_url": "/liqpay/create-payment",
+    "liqpay_checkout_url": "https://www.liqpay.ua/api/3/checkout"
+}