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

package/package.json

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

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

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

@@ -0,0 +1,337 @@
+body {
+    padding-top: 0;
+}
+
+liqpay-component {
+    display: block;
+
+    .liqpay-component {
+        position: relative;
+        min-height: 100vh;
+        padding: 48px 20px 80px;
+        background:
+            radial-gradient(ellipse 80% 60% at 15% 50%, rgba(29, 78, 216, 0.18) 0%, transparent 70%),
+            radial-gradient(ellipse 60% 50% at 85% 50%, rgba(109, 40, 217, 0.14) 0%, transparent 70%),
+            linear-gradient(135deg, #0a1628 0%, #0d1f3c 40%, #0e1a35 60%, #0c1525 100%);
+        background-attachment: fixed;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        // &__logo {
+        //     display: flex;
+        //     align-items: center;
+        //     gap: 8px;
+        //     margin-bottom: 28px;
+        // }
+
+        // &__logo-badge {
+        //     background: #1e3a5f;
+        //     border: 1px solid #2a4f7c;
+        //     border-radius: 8px;
+        //     padding: 6px 10px;
+        //     display: flex;
+        //     align-items: center;
+        // }
+
+        // &__logo-badge-text {
+        //     display: flex;
+        //     flex-direction: column;
+        //     line-height: 1;
+        // }
+
+        // &__logo-gud {
+        //     font-size: 17px;
+        //     font-weight: 700;
+        //     color: #4a9eff;
+        //     letter-spacing: 0.02em;
+        // }
+
+        // &__logo-hub {
+        //     font-size: 17px;
+        //     font-weight: 700;
+        //     color: #4a9eff;
+        //     letter-spacing: 0.04em;
+        // }
+
+        // &__logo-crm {
+        //     font-size: 46px;
+        //     font-weight: 700;
+        //     color: #ffffff;
+        //     letter-spacing: -0.3px;
+        // }
+
+        &__title {
+            margin: 0;
+            color: #ffffff;
+            font-size: 32px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            line-height: 1.2;
+            text-align: center;
+        }
+
+        &__subtitle {
+            margin: 10px 0 32px;
+            color: #8599b5;
+            font-size: 15px;
+            font-weight: 400;
+            text-align: center;
+            line-height: 1.5;
+        }
+
+        &__card {
+            width: 100%;
+            max-width: 420px;
+            background: #eef0f4;
+            border-radius: 20px;
+            padding: 28px 28px 24px;
+            border: none;
+            box-shadow: none;
+        }
+
+        &__amount-row {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 12px;
+        }
+
+        &__amount-label {
+            margin: 0 0 4px;
+            font-size: 13px;
+            font-weight: 500;
+            color: #6b7280;
+        }
+
+        &__amount {
+            margin: 0;
+            font-size: 38px;
+            font-weight: 700;
+            color: #111827;
+            letter-spacing: -1px;
+            line-height: 1;
+        }
+
+        &__secured-badge {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            flex-shrink: 0;
+            margin-top: 6px;
+            background: #ffffff;
+            border: 1.5px solid #16a34a;
+            border-radius: 100px;
+            padding: 5px 12px 5px 7px;
+        }
+
+        &__secured-icon {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #16a34a;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            svg {
+                width: 10px;
+                height: 10px;
+                display: block;
+            }
+        }
+
+        &__secured-text {
+            font-size: 12px;
+            font-weight: 600;
+            color: #16a34a;
+            line-height: 1;
+        }
+
+        &__divider {
+            height: 1px;
+            background: #d4d7de;
+            margin: 20px 0;
+        }
+
+        &__summary {
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+            margin: 0;
+            padding: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        &__summary-row {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 16px;
+        }
+
+        &__summary-label {
+            font-size: 14px;
+            font-weight: 500;
+            color: #6b7280;
+            flex-shrink: 0;
+        }
+
+        &__summary-value {
+            font-size: 14px;
+            font-weight: 600;
+            color: #111827;
+            text-align: right;
+            max-width: 60%;
+            word-break: break-word;
+        }
+
+        &__text {
+            margin: 16px 0 0;
+            color: #6b7280;
+            font-size: 13px;
+            line-height: 1.6;
+
+            &:empty {
+                display: none;
+            }
+        }
+
+        &__form {
+            margin: 0;
+        }
+
+        &__button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 100%;
+            min-height: 52px;
+            margin-top: 22px;
+            padding: 0 24px;
+            border: none;
+            border-radius: 12px;
+            background: #2563eb;
+            color: #ffffff;
+            font-size: 16px;
+            font-weight: 700;
+            letter-spacing: -0.2px;
+            cursor: pointer;
+            transition:
+                background 0.18s ease,
+                transform 0.1s ease;
+
+            &:hover {
+                background: #1d4ed8;
+            }
+
+            &:active {
+                background: #1e40af;
+                transform: scale(0.98);
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                opacity: 0.6;
+                transform: none;
+            }
+        }
+
+        &__button-icon {
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+        }
+
+        &__error {
+            margin: 14px 0 0;
+            color: #dc2626;
+            font-size: 13px;
+            line-height: 1.5;
+        }
+
+        &__powered {
+            margin: 16px 0 0;
+            text-align: center;
+            font-size: 13px;
+            color: #9ca3af;
+            font-weight: 400;
+        }
+
+        &__powered-brand {
+            color: #16a34a;
+            font-weight: 700;
+        }
+
+        &__security {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+            margin-top: 24px;
+        }
+
+        &__security-item {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            font-size: 13px;
+            color: #8599b5;
+            font-weight: 500;
+        }
+
+        &__security-icon {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            border: 1.5px solid #16a34a;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            svg {
+                width: 10px;
+                height: 10px;
+                display: block;
+            }
+        }
+    }
+
+    @media (max-width: 480px) {
+        .liqpay-component {
+            padding: 40px 16px 72px;
+
+            &__title {
+                font-size: 26px;
+            }
+
+            &__card {
+                padding: 22px 18px 20px;
+            }
+
+            &__amount {
+                font-size: 30px;
+            }
+
+            &__summary-row {
+                flex-direction: column;
+                gap: 4px;
+            }
+
+            &__summary-value {
+                max-width: 100%;
+                text-align: left;
+            }
+
+            &__security {
+                flex-direction: column;
+                gap: 10px;
+                align-items: flex-start;
+            }
+        }
+    }
+}

package/src/components/liqpay-payment-button/config.js

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

package/src/components/liqpay-payment-button/liqpay-payment-button.html

@@ -0,0 +1,5 @@
+<section class="liqpay-payment-button">
+    <div class="container">
+        
+    </div>
+</section>

package/src/components/liqpay-payment-button/liqpay-payment-button.js

@@ -0,0 +1,23 @@
+import html from './liqpay-payment-button.html';
+import './liqpay-payment-button.scss';
+import jsonTemplate from './liqpay-payment-button.json';
+
+class liqpayPaymentButton extends window.GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        this.json = await super.getGhData(this.ghId, 'areas');
+
+        console.log("AAAAAAAAAAAAAAAAAAAAAAAA", this.json);
+
+        if (this.json) {
+            super.render(html);
+        }
+    }
+}
+
+window.customElements.define('liqpay-payment-button', liqpayPaymentButton);

package/src/components/liqpay-payment-button/liqpay-payment-button.json

@@ -0,0 +1,4 @@
+{
+    "title": "Lorem Ipsum Pricing",
+    "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+}

package/src/components/liqpay-payment-button/liqpay-payment-button.scss

@@ -0,0 +1,7 @@
+liqpay-payment-button {
+    section { 
+        padding: 0 375px 80px 375px;
+    }
+
+    
+}

package/src/components/masonry-gallery/masonry-gallery.js

@@ -19,6 +19,9 @@ class MasonryGallery extends GHComponent {
         this.fitWidthValue = !!this.columnWidthValue;
         this.contactUsButton = this.hasAttribute('data-modal-button') ? this.getAttribute('data-modal-button') : null;
         this.contactUsButtonId = this.hasAttribute('data-modal-button-id') ? this.getAttribute('data-modal-button-id') : null;
+        this.showCount = this.hasAttribute('data-show-count')
+            ? +this.getAttribute('data-show-count')
+            : 10;
     }
 
     async onServerRender() {
@@ -28,6 +31,20 @@ class MasonryGallery extends GHComponent {
         this.ghId = this.getAttribute('data-gh-id') || null;
         this.json = await super.getGhData(this.ghId, this.application);
 
+        if (
+            typeof this.json.items === 'object' &&
+            this.json.items !== null &&
+            this.json.items.url
+        ) {
+            const response = await fetch(this.json.items.url);
+            const data = await response.json();
+
+            this.setCacheGhData(
+                'masonry-images',
+                data.images
+            );
+        }
+
         if (Array.isArray(this.json.items)) {
             const isMoreItems = this.json.moreItems ? this.json.moreItems : null;
 
@@ -55,32 +72,25 @@ class MasonryGallery extends GHComponent {
         const modal = document.getElementById('modal');
 
         if (this.hasAttribute('images-url')) {
-            try {
-                const url = this.getAttribute('images-url');
+            const images = await this.getCacheGhData(
+                'masonry-images'
+            );
 
-                const response = await fetch(url);
-                const data = await response.json();
+            const isInitImagesEqualNull =
+                this.getAttribute('init-count') === 'null';
 
-                const { images } = data;
+            const initCountImages = this.contactUsButton
+                ? this.showCount
+                : images.length;
 
-                const isInitImagesEqualNull = this.getAttribute('init-count') === 'null';
-                
-                const initCountImages = this.hasAttribute('init-count') && !isInitImagesEqualNull ? this.getAttribute('init-count') : images.length;
+            const initImages = images.slice(0, initCountImages);
+            const initMoreImages = images.slice(initCountImages);
 
-                const initImages = images.slice(0, initCountImages);
-                const initMoreImages = images.slice(initCountImages);
+            this.allImagesArrayLength = images.length;
+            this.initCountImages = initCountImages;
 
-                this.allImagesArrayLength = images.length;
-                this.initCountImages = initCountImages;
-
-                this.initImages = initImages;
-                this.moreImages = initMoreImages;
-            } catch (error) {
-                console.error(error);
-            }
-        } else {
-            this.initImages = JSON.parse(this.getAttribute('init-images'));
-            this.moreImages = JSON.parse(this.getAttribute('add-array'));
+            this.initImages = initImages;
+            this.moreImages = initMoreImages;
         }
 
         const grid = this.imagesContainer;
@@ -200,9 +210,35 @@ class MasonryGallery extends GHComponent {
         const promise = new Promise(async (res, rej) => {
             const img = document.createElement('img');
 
-            const tempoImageSrc = await this.temporaryImage(imageSrc);
+            const fileName = imageSrc.split('/').pop();
+
+            const pathToJpg = `/assets/images/masonry/${fileName}`;
+            const pathToWebp = `${pathToJpg}.webp`;
+
+            const response = await fetch(pathToWebp, {
+                method: 'HEAD'
+            });
+
+            if (!response.ok) {
+                await fetch('/upload-image-path', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        imageSrc: pathToJpg,
+                        imageUrl: imageSrc,
+                        isCrop: true
+                    })
+                });
+            }
+
+            img.src = `/assets/images/masonry/${fileName}`;
 
-            img.setAttribute('src', tempoImageSrc);
+            img.setAttribute(
+                'src',
+                `/assets/images/masonry/${fileName}`
+            );
             img.setAttribute('alt', imageAlt);
             img.setAttribute('title', imageTitle);
 
@@ -252,6 +288,14 @@ class MasonryGallery extends GHComponent {
         const button = buttonWrapper.querySelector('#grid-add-items');
         const addImages = this.addImages;
 
+        if (!this.contactUsButton) {
+            if (button) {
+                button.remove();
+            }
+
+            return;
+        }
+
         const isInitCountEqualAllLength = this.initCountImages === this.allImagesArrayLength;
         
         if (!masonryGrid || !button || !buttonWrapper || !this.moreImages || isInitCountEqualAllLength) {
@@ -263,7 +307,7 @@ class MasonryGallery extends GHComponent {
         let images = [...this.moreImages];
 
         // Get more-count attribute value
-        const moreCountImages = parseInt(this.getAttribute('more-count')) || images.length;
+        const moreCountImages = this.showCount;
 
         button.addEventListener('click', async () => {
             // If we set max-height for block, this code removes styles which hide content, when we click show more

package/src/config.js

@@ -67,6 +67,8 @@ export { GoogleAnalytics } from './components/google-analytics/config.js';
 export { GoogleTag } from './components/google-tag/config.js';
 export { cookiesPopup } from './components/cookies-popup/config.js';
 export { infoTable } from './components/info-table/config.js';
+export { liqpayPaymentButton } from './components/liqpay-payment-button/config.js';
+export { liqpayComponent } from './components/liqpay-component/config.js';
 export { faqComponent } from './components/faq-component/config.js';
 
 // export { liqPayComponent } from './components/liqpay-component/config.js';