@apolopay-sdk/ui 1.0.0 → 1.2.0

package/dist/components/payment-timer.js

@@ -1,84 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { I18n } from '@apolopay-sdk/core';
-let PaymentTimer = class PaymentTimer extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.expiresAt = 0;
-        this.timerString = '-- : --';
-        this._interval = null;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.startTimer();
-    }
-    disconnectedCallback() {
-        this.stopTimer();
-        super.disconnectedCallback();
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('expiresAt')) {
-            this.startTimer();
-        }
-    }
-    startTimer() {
-        this.stopTimer();
-        if (!this.expiresAt || isNaN(this.expiresAt))
-            return;
-        const tick = () => {
-            const now = Date.now();
-            const distance = this.expiresAt - now;
-            if (distance <= 0) {
-                this.stopTimer();
-                const minLabel = I18n.t.modal.labels.minutes;
-                const secLabel = I18n.t.modal.labels.seconds;
-                this.timerString = `00 ${minLabel} : 00 ${secLabel}`;
-                this.dispatchEvent(new CustomEvent('expired'));
-                return;
-            }
-            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
-            const m = minutes.toString().padStart(2, '0');
-            const s = seconds.toString().padStart(2, '0');
-            const minLabel = I18n.t.modal.labels.minutes;
-            const secLabel = I18n.t.modal.labels.seconds;
-            this.timerString = `${m} ${minLabel} : ${s} ${secLabel}`;
-        };
-        tick();
-        this._interval = window.setInterval(tick, 1000);
-    }
-    stopTimer() {
-        if (this._interval) {
-            clearInterval(this._interval);
-            this._interval = null;
-        }
-    }
-    render() {
-        return html `${this.timerString}`;
-    }
-};
-PaymentTimer.styles = css `
-    :host {
-      display: block;
-      color: var(--apolo-accent, #ea580c);
-      font-weight: 600;
-      font-size: 0.9rem;
-      margin-bottom: 1rem;
-    }
-  `;
-__decorate([
-    property({ type: Number })
-], PaymentTimer.prototype, "expiresAt", void 0);
-__decorate([
-    state()
-], PaymentTimer.prototype, "timerString", void 0);
-PaymentTimer = __decorate([
-    customElement('payment-timer')
-], PaymentTimer);
-export { PaymentTimer };

package/dist/components/trigger-button.js

@@ -1,151 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { sharedStyles } from '../styles/shared-styles.js';
-import { logoApolo } from '../assets/logo_apolo.js';
-import { I18n } from '@apolopay-sdk/core';
-let TriggerButton = class TriggerButton extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.lang = 'es';
-        this.loading = false;
-        this.disabled = false;
-        this.label = undefined;
-        this.hasError = false;
-    }
-    render() {
-        const t = I18n.t;
-        const defaultLabel = this.hasError
-            ? (t.errors.config || 'Config Error')
-            : (this.loading ? t.trigger.loading : (this.label || 'Apolo Pay'));
-        return html `
-      <div class="button-wrapper">
-        ${this.hasError ? '' : html `
-          <img class="logo-apolo" src="${logoApolo}" alt="Icon" />
-        `}
-        <button 
-          ?disabled=${this.disabled || this.loading || this.hasError} 
-          class="${this.hasError ? 'error' : ''}"
-          type="button"
-        >
-          ${defaultLabel}
-        </button>
-      </div>
-    `;
-    }
-};
-TriggerButton.styles = [
-    sharedStyles,
-    css `
-      :host { display: inline-block; }
-
-      .button-wrapper {
-        --img-size: 24px;
-        --gap: 8px;
-      }
-      
-      button {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        padding: 12px 32px;
-        
-        font-size: 0.9rem;
-        letter-spacing: 0.5px;
-        color: var(--apolo-on-primary);
-        
-        background: #74727225;
-        border: none;
-        border-radius: 9999px;
-        cursor: pointer;
-        transition: transform 0.2s, background-color 0.2s;
-
-        text-indent: var(--img-size);
-        mix-blend-mode: difference;
-        z-index: 1; 
-      }
-
-      button::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: 9999px;
-        padding: 2px;
-        background: linear-gradient(90deg, var(--apolo-primary), #ffffff);
-        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-        -webkit-mask-composite: xor;
-        mask-composite: exclude;
-        z-index: -1;
-      }
-
-      button:hover {
-        transform: translateY(-1px);
-        background-color: rgba(255, 255, 255, 0.1);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      }
-
-      .button-wrapper:hover img {
-        transform: translateY(calc(-50% - 1px));
-      }
-
-      button:active {
-        transform: translateY(0);
-      }
-
-      button:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        filter: grayscale(1);
-        transform: none;
-      }
-
-      button.error {
-        background-color: rgba(239, 68, 68, 0.1);
-        color: #ef4444;
-        text-indent: 0;
-      }
-
-      button.error::before {
-        background: linear-gradient(90deg, #ef4444, #fca5a5);
-      }
-
-      .logo-apolo {
-        position: absolute;
-        top: 50%;
-        left: calc((var(--img-size) / 2) + var(--gap));
-        transform: translateY(-50%);
-        width: var(--img-size);
-        height: var(--img-size);
-        margin-right: var(--gap);
-        transition: transform 0.2s;
-      }
-    `
-];
-__decorate([
-    property({ type: String })
-], TriggerButton.prototype, "lang", void 0);
-__decorate([
-    property({ type: Boolean })
-], TriggerButton.prototype, "loading", void 0);
-__decorate([
-    property({ type: Boolean })
-], TriggerButton.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], TriggerButton.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean })
-], TriggerButton.prototype, "hasError", void 0);
-TriggerButton = __decorate([
-    customElement('trigger-button')
-], TriggerButton);
-export { TriggerButton };

package/dist/index.js

@@ -1,2 +0,0 @@
-export * from './payment-button.js';
-export * from '@apolopay-sdk/core';

package/dist/payment-button.js

@@ -1,371 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { I18n, ModalStep, PaymentService, } from '@apolopay-sdk/core';
-// Import child components
-import './components/trigger-button.js';
-import './components/payment-modal.js';
-let ApoloPayButton = class ApoloPayButton extends LitElement {
-    constructor() {
-        super(...arguments);
-        // --- Component Properties ---
-        this.client = undefined;
-        this.processId = undefined;
-        this.productTitle = undefined;
-        this.lang = 'es';
-        this.label = undefined;
-        this.loading = false;
-        this.disabled = false;
-        this.barrierDismissible = false;
-        // --- Internal State ---
-        this.isOpen = false; // Controls modal visibility
-        this.status = 'idle'; // General status, used for QR generation and final result
-        this.currentStep = ModalStep.SELECT_ASSET; // Current step in the modal flow
-        this.selectedAsset = null; // ID of the chosen asset
-        this.selectedNetwork = null; // ID of the chosen blockchain
-        this.qrCodeUrl = null; // URL for the QR code image
-        this.qrCodeExpiresAt = null; // Expiration time for the QR code
-        this.paymentAddress = null; // Wallet address for payment
-        this.paymentUrl = null; // Direct link for single-device payment
-        this.assets = []; // List fetched from API
-        this.error = null; // Stores error details if something fails
-        this.isLoadingData = true; // Tracks initial loading of assets/networks
-        this.amount = 0; // Fetched from processId
-        this.hasConfigError = false; // Invalid publicKey or missing client
-        this.email = null; // TODO set email from socket response
-        this._service = null; // Internal business logic manager
-    }
-    // Detectar cambios en propiedades
-    willUpdate(changedProperties) {
-        if (changedProperties.has('lang'))
-            I18n.setLocale(this.lang);
-        if (changedProperties.has('client') ||
-            changedProperties.has('processId')) {
-            this.validateConfig();
-            if (this.client && this._service === null) {
-                this.initService();
-            }
-            if (this.client && this.processId) {
-                this.loadInitialData();
-            }
-        }
-        super.willUpdate(changedProperties);
-    }
-    // --- API Client Instance ---
-    // If the 'client' property is not provided, the component might fail.
-    // We no longer manage the client instance internally.
-    // --- Lifecycle Methods ---
-    // Called when the component is added to the DOM
-    connectedCallback() {
-        super.connectedCallback();
-        this.validateConfig();
-        if (this.client) {
-            this.initService();
-            if (this.processId) {
-                this.loadInitialData(); // Fetch assets and blockchains immediately
-            }
-        }
-    }
-    initService() {
-        if (!this.client || this.hasConfigError)
-            return;
-        this._service = new PaymentService(this.client);
-    }
-    get isValidProcessId() {
-        if (!this.processId)
-            return false;
-        const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
-        return uuidRegex.test(this.processId);
-    }
-    validateConfig() {
-        const key = this.client?.getPublicKey();
-        const isKeyValid = !!(key && key.startsWith('pk_') && key.length === 35);
-        if (this.client && !isKeyValid) {
-            console.error(`PaymentButton Error: Invalid publicKey "${key}". Must start with "pk_" and be 35 characters long.`);
-        }
-        this.hasConfigError = !this.client || !isKeyValid;
-    }
-    // Called when the component is removed from the DOM
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Ensure WebSocket is disconnected if the component is removed
-        this._service?.disconnectWebSocket();
-    }
-    // Replaced by external client initialization
-    // --- Data Loading ---
-    async loadInitialData() {
-        if (!this._service)
-            return;
-        this.isLoadingData = true;
-        this.error = null;
-        if (!this.processId)
-            return;
-        try {
-            this.assets = await this._service.getAssets();
-        }
-        catch (e) {
-            console.error('Error loading initial payment options:', e);
-            this.error = { code: 'DATA_LOAD_ERROR', message: 'Could not load payment options.' };
-        }
-        finally {
-            this.isLoadingData = false;
-        }
-    }
-    resetState() {
-        this.currentStep = ModalStep.SELECT_ASSET;
-        this.status = 'idle';
-        this.error = null;
-        this.selectedAsset = null;
-        this.selectedNetwork = null;
-        this.qrCodeUrl = null;
-        this.paymentAddress = null;
-        this.paymentUrl = null;
-        this.qrCodeExpiresAt = null;
-    }
-    // --- Event Handlers (Triggered by Child Components) ---
-    // Triggered by <trigger-button> when clicked
-    handleOpen() {
-        this.resetState();
-        if (this.hasConfigError || !this.client || !this.processId) {
-            console.error('PaymentButton Error: client and process-id are required and must be valid');
-            return;
-        }
-        if (this.loading)
-            return;
-        this.isOpen = true;
-    }
-    // Triggered by <payment-modal> requesting to close (X, backdrop, Escape)
-    handleCloseRequest() {
-        this.isOpen = false;
-        // Disconnect WebSocket if the user cancels before payment completion
-        if (this.currentStep === ModalStep.SHOW_QR && this.status !== 'success' && this.status !== 'error') {
-            this._service?.disconnectWebSocket();
-        }
-        setTimeout(() => this.resetState(), 300);
-    }
-    // Triggered by <payment-modal> when an asset is selected
-    handleAssetSelect(event) {
-        this.selectedAsset = event.detail.assetId;
-        this.currentStep = ModalStep.SELECT_NETWORK;
-        this.error = null;
-    }
-    handleExpired(event) {
-        this.dispatchEvent(new CustomEvent('error', { detail: event.detail.error }));
-    }
-    // Triggered by <payment-modal> when a network is selected
-    async handleInitiatePayment(event) {
-        if (!this.client || !this.processId)
-            return;
-        this.selectedNetwork = event.detail.networkId;
-        if (!this.selectedAsset || !this.selectedNetwork)
-            return;
-        const detail = {
-            assetId: this.selectedAsset,
-            networkId: this.selectedNetwork
-        };
-        this.dispatchEvent(new CustomEvent('generateQr', { detail }));
-        this.status = 'loading';
-        this.currentStep = ModalStep.SHOW_QR;
-        this.qrCodeUrl = null;
-        this.paymentAddress = null;
-        this.error = null;
-        try {
-            const qrData = await this._service.fetchQrCodeDetails(detail, {
-                processId: this.processId,
-                onSuccess: (response) => {
-                    if (!this.isOpen)
-                        return;
-                    this.status = 'success';
-                    this.currentStep = ModalStep.RESULT;
-                    this.dispatchEvent(new CustomEvent('success', { detail: response }));
-                },
-                onError: (error) => {
-                    if (!this.isOpen)
-                        return;
-                    this.status = 'error';
-                    this.error = error;
-                    this.currentStep = ModalStep.RESULT;
-                    this.dispatchEvent(new CustomEvent('error', { detail: error }));
-                }
-            });
-            this.qrCodeUrl = qrData.qrCodeUrl;
-            this.paymentAddress = qrData.address;
-            this.paymentUrl = qrData.paymentUrl || null;
-            this.qrCodeExpiresAt = qrData.expiresAtMs;
-            this.amount = typeof qrData.amount === 'string' ? parseFloat(qrData.amount) : qrData.amount;
-            this.status = 'idle';
-        }
-        catch (e) {
-            console.error("Error fetching QR code details:", e);
-            this.error = { code: 'QR_FETCH_ERROR', message: (e instanceof Error ? e.message : 'Failed to get payment details.') };
-            this.status = 'error';
-            this.currentStep = ModalStep.SELECT_NETWORK;
-        }
-    }
-    // Triggered by <payment-modal> "Back" buttons
-    handleChangeStep(event) {
-        // Disconnect WebSocket if going back from QR step before completion
-        if (this.currentStep === ModalStep.SHOW_QR && event.detail !== ModalStep.RESULT) {
-            this._service?.disconnectWebSocket();
-        }
-        this.currentStep = event.detail;
-        this.status = 'idle'; // Reset status when moving back
-        this.error = null;
-        // Clear QR data if moving back from the QR step
-        if (this.currentStep !== ModalStep.SHOW_QR) {
-            this.qrCodeUrl = null;
-            this.paymentAddress = null;
-            this.paymentUrl = null;
-        }
-    }
-    // --- Render Method ---
-    render() {
-        // Renders the trigger button and the modal, passing down all necessary state
-        return html `
-      <div id="trigger-wrapper" @click=${this.handleOpen}>
-        <slot>
-          <trigger-button 
-            .lang=${this.lang}
-            .label=${this.label}
-            .loading=${this.loading ||
-            (this.isLoadingData && !this.hasConfigError) ||
-            !this.isValidProcessId}
-            .hasError=${this.hasConfigError}
-            ?disabled=${this.disabled ||
-            this.hasConfigError ||
-            !this.isValidProcessId}
-          ></trigger-button>
-        </slot>
-      </div>
-
-      <payment-modal
-        ?isOpen=${this.isOpen}
-        .barrierDismissible=${this.barrierDismissible}
-        .lang=${this.lang}
-        .currentStep=${this.currentStep}
-        .status=${this.status}
-        .productTitle=${this.productTitle}
-        .error=${this.error}
-        .isLoadingData=${this.isLoadingData}
-        .assets=${this.assets}
-        .selectedAsset=${this.selectedAsset}
-        .selectedNetwork=${this.selectedNetwork}
-        .qrCodeUrl=${this.qrCodeUrl}
-        .paymentAddress=${this.paymentAddress}
-        .amount=${this.amount}
-        .email=${this.email}
-        .qrCodeExpiresAt=${this.qrCodeExpiresAt}
-        .paymentUrl=${this.paymentUrl}
-        @closeRequest=${this.handleCloseRequest}
-        @assetSelect=${this.handleAssetSelect}
-        @networkSelect=${this.handleInitiatePayment}
-        @changeStep=${this.handleChangeStep}
-        @expired=${this.handleExpired}
-      ></payment-modal>
-    `;
-    }
-};
-// --- Styles ---
-ApoloPayButton.styles = css `
-    :host {
-      display: inline-block;
-    }
-
-    #trigger-wrapper {
-      position: relative;
-      display: inline-block;
-      cursor: pointer;
-    }
-  `;
-__decorate([
-    property({ type: Object })
-], ApoloPayButton.prototype, "client", void 0);
-__decorate([
-    property({ type: String, attribute: 'process-id' })
-], ApoloPayButton.prototype, "processId", void 0);
-__decorate([
-    property({ type: String, attribute: 'product-title' })
-], ApoloPayButton.prototype, "productTitle", void 0);
-__decorate([
-    property({ type: String })
-], ApoloPayButton.prototype, "lang", void 0);
-__decorate([
-    property({ type: String })
-], ApoloPayButton.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean })
-], ApoloPayButton.prototype, "loading", void 0);
-__decorate([
-    property({ type: Boolean })
-], ApoloPayButton.prototype, "disabled", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        attribute: 'barrier-dismissible',
-        converter: {
-            fromAttribute: (value) => {
-                if (value === null)
-                    return false;
-                return value !== 'false';
-            },
-            toAttribute: (value) => value ? '' : null
-        }
-    })
-], ApoloPayButton.prototype, "barrierDismissible", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "isOpen", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "status", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "currentStep", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "selectedAsset", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "selectedNetwork", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "qrCodeUrl", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "qrCodeExpiresAt", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "paymentAddress", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "paymentUrl", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "assets", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "error", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "isLoadingData", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "amount", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "hasConfigError", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "email", void 0);
-__decorate([
-    state()
-], ApoloPayButton.prototype, "_service", void 0);
-ApoloPayButton = __decorate([
-    customElement('apolopay-button')
-], ApoloPayButton);
-export { ApoloPayButton };

package/dist/styles/modal-base.js

@@ -1,75 +0,0 @@
-import { css } from 'lit';
-export const modalBaseStyles = css `
-/* 1. Definimos las Animaciones */
-  @keyframes modal-enter {
-    from { opacity: 0; transform: scale(0.95) translateY(10px); }
-    to { opacity: 1; transform: scale(1) translateY(0); }
-  }
-
-  @keyframes modal-exit {
-    from { opacity: 1; transform: scale(1) translateY(0); }
-    to { opacity: 0; transform: scale(0.95) translateY(10px); }
-  }
-
-  @keyframes backdrop-enter {
-    from { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
-    to { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
-  }
-
-  @keyframes backdrop-exit {
-    from { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
-    to { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); }
-  }
-
-  /* 2. Estilos Base */
-  dialog {
-    border: none;
-    padding: 0;
-    margin: auto;
-    
-    /* Geometría */
-    min-width: 320px;
-    max-width: 420px;
-    width: 90vw;
-    border-radius: var(--apolo-radius);
-    
-    background-color: var(--apolo-bg);
-    color: var(--apolo-text);
-    box-shadow: var(--apolo-shadow);
-    font-family: var(--apolo-font);
-
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  /* 3. Estado: ABIERTO (Animación de Entrada) */
-  dialog[open] {
-    opacity: 1;
-    animation: modal-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    pointer-events: auto;
-  }
-
-  /* 4. Estado: CERRANDO (Animación de Salida) */
-  dialog.closing {
-    /* Sobrescribimos la animación de entrada */
-    animation: modal-exit 0.15s ease-in forwards;
-  }
-
-  /* 5. Backdrop (Fondo Oscuro) */
-  dialog::backdrop {
-    background-color: rgba(0,0,0,0); /* Invisible por defecto */
-  }
-
-  dialog[open]::backdrop {
-    animation: backdrop-enter 0.2s ease-out forwards;
-  }
-
-  dialog.closing::backdrop {
-    animation: backdrop-exit 0.15s ease-in forwards;
-  }
-
-  dialog:not([open])::backdrop {
-    display: none;
-    pointer-events: none;
-  }
-`;