@apolopay-sdk/ui 1.0.0

package/dist/components/payment-timer.js

@@ -0,0 +1,84 @@
+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.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { type Locale } from '@apolopay-sdk/core';
+export declare class TriggerButton extends LitElement {
+    lang: Locale;
+    loading: boolean;
+    disabled: boolean;
+    label?: string;
+    hasError: boolean;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'trigger-button': TriggerButton;
+    }
+}

package/dist/components/trigger-button.js

@@ -0,0 +1,151 @@
+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.d.ts

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

package/dist/index.js

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

package/dist/payment-button.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import { ApoloPayClient, type Locale } from '@apolopay-sdk/core';
+import './components/trigger-button.js';
+import './components/payment-modal.js';
+export declare class ApoloPayButton extends LitElement {
+    client: ApoloPayClient | undefined;
+    processId: string | undefined;
+    productTitle?: undefined;
+    lang: Locale;
+    label?: string;
+    loading: boolean;
+    disabled: boolean;
+    barrierDismissible: boolean;
+    willUpdate(changedProperties: Map<string, any>): void;
+    private isOpen;
+    private status;
+    private currentStep;
+    private selectedAsset;
+    private selectedNetwork;
+    private qrCodeUrl;
+    private qrCodeExpiresAt;
+    private paymentAddress;
+    private paymentUrl;
+    private assets;
+    private error;
+    private isLoadingData;
+    private amount;
+    private hasConfigError;
+    private email;
+    private _service;
+    connectedCallback(): void;
+    private initService;
+    get isValidProcessId(): boolean;
+    private validateConfig;
+    disconnectedCallback(): void;
+    loadInitialData(): Promise<void>;
+    private resetState;
+    private handleOpen;
+    private handleCloseRequest;
+    private handleAssetSelect;
+    private handleExpired;
+    private handleInitiatePayment;
+    private handleChangeStep;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'apolopay-button': ApoloPayButton;
+    }
+}

package/dist/payment-button.js

@@ -0,0 +1,371 @@
+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.d.ts

@@ -0,0 +1 @@
+export declare const modalBaseStyles: import("lit").CSSResult;