@gudhub/ssg-web-components-library 1.0.115 → 1.0.117

package/src/components/info-table/info-table.scss

@@ -4,53 +4,90 @@ info-table {
     }
 
     .top-wrapper {
-        display: flex;
-        align-items: center;
+        margin-bottom: 30px;
 
-        h2 {
-            width: 50%;
-            font-size: 18px;
+        .title {
+            color: #05183A;
             font-weight: 700;
-            color: black;
-            line-height: 120%;
+            font-size: 30px;
+            line-height: 136%;
+            letter-spacing: 0%;
+            text-align: center;
+            text-transform: uppercase;
+            margin-bottom: 12px;
         }
 
-        p {
-            width: 50%;
+        .subtitle {
+            font-weight: 400;
             font-size: 18px;
-            font-weight: 700 !important;
-            color: black !important;
-            line-height: 120%;
+            line-height: 136%;
+            letter-spacing: 0%;
+            text-align: justify;
+            color: #63636F;
             text-align: center;
         }
-
-        .title {
-            margin-bottom: 30px;
-        }
     }
+
     .block {
+        width: 100%;
         margin-bottom: 25px;
         border: 1px solid #C8C8C8;
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+
+    .table-head {
+        th {
+            width: 50%;
+            height: 52px;
+            padding: 0 15px;
+            border-bottom: 1px solid #C8C8C8;
+            vertical-align: middle;
+            text-align: center;
+            font-size: 18px;
+            font-weight: 700;
+            color: black;
+            line-height: 120%;
+        }
+
+        th:not(:last-child) {
+            border-right: 1px solid #C8C8C8;
+        }
     }
-    .item {
-        display: flex;
 
+    .item {
         &:nth-child(even) {
             background-color: #F6F6F6;
         }
-        &:not(:last-child) {
+
+        td {
+            width: 50%;
+            height: 48px;
+            padding: 0 15px;
             border-bottom: 1px solid #C8C8C8;
+            vertical-align: middle;
+            text-align: center;
+        }
+
+        td:not(:last-child) {
+            border-right: 1px solid #C8C8C8;
+        }
+
+        &:last-child {
+            td {
+                border-bottom: none;
+            }
         }
 
         &-title,
         &-price {
-            line-height: 48px;
+            width: 100%;
+            margin: 0;
+            font-size: 16px;
+            font-weight: 400;
+            color: black;
+            line-height: 140%;
             text-align: center;
-            width: 50%;
-            height: 48px;
-        }
-        &-price {
-            border-left: 1px solid #C8C8C8;
         }
     }
 
@@ -70,6 +107,38 @@ info-table {
     @media (max-width: 700px) {
         section {
             padding-bottom: 40px;
-        } 
+        }
+
+        .top-wrapper {
+            margin-bottom: 24px;
+
+            .title {
+                font-size: 26px;
+            }
+
+            .subtitle {
+                font-size: 16px;
+            }
+        }
+
+        .table-head {
+            th {
+                height: 48px;
+                padding: 0 10px;
+                font-size: 16px;
+            }
+        }
+
+        .item {
+            td {
+                height: 46px;
+                padding: 0 10px;
+            }
+
+            &-title,
+            &-price {
+                font-size: 15px;
+            }
+        }
     }
-}
+}

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"
+}