@dotted-labs/ngx-supabase-stripe 0.1.13 → 0.2.0

package/fesm2022/dotted-labs-ngx-supabase-stripe.mjs

@@ -1,11 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, computed, Component, input, output, signal } from '@angular/core';
+import { InjectionToken, inject, Injectable, computed, Component, input, output, effect, Directive, signal } from '@angular/core';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { loadStripe } from '@stripe/stripe-js';
 import { createClient } from '@supabase/supabase-js';
+import { withEntities, upsertEntity, setAllEntities } from '@ngrx/signals/entities';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
 
 const STRIPE_CONFIG = new InjectionToken('STRIPE_CONFIG');
 /**
@@ -575,6 +577,36 @@ class StripeClientService {
             return { customer: null, error: error };
         }
     }
+    async getCustomerPaymentMethods(customerId) {
+        try {
+            const { data, error } = await this.supabase.getClient()
+                .functions.invoke('customer_payment_methods', {
+                body: { customerId }
+            });
+            if (error) {
+                throw error;
+            }
+            return { paymentMethods: data, error: null };
+        }
+        catch (error) {
+            return { paymentMethods: null, error: error };
+        }
+    }
+    async getCustomerPaymentMethod(customerId, paymentMethodId) {
+        try {
+            const { data, error } = await this.supabase.getClient()
+                .functions.invoke('customer_payment_method', {
+                body: { customerId, paymentMethodId }
+            });
+            if (error) {
+                throw error;
+            }
+            return { paymentMethod: data, error: null };
+        }
+        catch (error) {
+            return { paymentMethod: null, error: error };
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: StripeClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: StripeClientService, providedIn: 'root' });
 }
@@ -585,19 +617,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+var Currency;
+(function (Currency) {
+    Currency["EUR"] = "eur";
+    Currency["USD"] = "usd";
+    Currency["GBP"] = "gbp";
+    Currency["JPY"] = "jpy";
+    Currency["KRW"] = "krw";
+    Currency["CNY"] = "cny";
+    Currency["INR"] = "inr";
+})(Currency || (Currency = {}));
+
 const initialProductsState = {
-    products: null,
-    prices: null,
+    products: [],
+    prices: [],
     status: 'idle',
     error: null,
+    currency: Currency.EUR,
 };
 const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProductsState), withComputed((state) => ({
     isStatusLoading: computed(() => state.status() === 'loading'),
     isStatusSuccess: computed(() => state.status() === 'success'),
     isStatusError: computed(() => state.status() === 'error'),
-    recurringProducts: computed(() => state.products()?.filter(product => product.prices?.some(price => price.details.type === 'recurring')) || []),
-    oneTimeProducts: computed(() => state.products()?.filter(product => product.prices?.some(price => price.details.type === 'one_time')) || []),
-    hasProducts: computed(() => state.products() !== null && state.products().length > 0),
+    oneTimeproductsByCurrency: computed(() => state.products().filter(product => product.prices.some(price => (price.details.type === 'one_time' && price.details.currency === state.currency()))) || []),
+    recurringProductsByCurrency: computed(() => state.products().filter(product => product.prices.some(price => (price.details.type === 'recurring' && price.details.currency === state.currency()))) || []),
+    productsByCurrency: computed(() => state.products().filter(product => product.prices.some(price => (price.details.currency === state.currency()))) || []),
+    hasProducts: computed(() => state.products().length > 0),
     isError: computed(() => state.error())
 })), withMethods((store, supabaseService = inject(SupabaseClientService)) => ({
     /**
@@ -607,6 +652,12 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
         console.log('🎮 [ProductsStore] Loading products by ids: ', ids);
         return store.products()?.filter(product => product.id && ids.includes(product.id)) || [];
     },
+    /**
+     * Set the currency filter for products
+     */
+    setCurrency(currency) {
+        patchState(store, { currency });
+    },
     /**
      * Load product by id
      */
@@ -635,6 +686,12 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
     async loadProducts() {
         patchState(store, { status: 'loading', error: null });
         try {
+            const { data: prices, error: pricesError } = await supabaseService.selectStripePrices();
+            if (pricesError) {
+                console.error('🎮 [ProductsStore]: Error loading prices', pricesError);
+                patchState(store, { status: 'error', error: pricesError.message });
+            }
+            patchState(store, { prices: prices || [] });
             const { data: stripeProducts, error: productsError } = await supabaseService.selectStripeProducts();
             if (productsError) {
                 console.error('🎮 [ProductsStore]: Error loading products', productsError);
@@ -670,15 +727,9 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
     reset() {
         patchState(store, initialProductsState);
     }
-})), withHooks((store, supabaseService = inject(SupabaseClientService)) => ({
+})), withHooks((store) => ({
     async onInit() {
         console.log('🎮 [ProductsStore] onInit');
-        const { data: prices, error: pricesError } = await supabaseService.selectStripePrices();
-        if (pricesError) {
-            console.error('🎮 [ProductsStore]: Error loading prices', pricesError);
-            patchState(store, { status: 'error', error: pricesError.message });
-        }
-        patchState(store, { prices });
         const products = store.products();
         console.log('🎮 [ProductsStore] products: ', products);
         if (!products) {
@@ -918,8 +969,10 @@ const initialCustomerState = {
         status: 'idle',
         error: null,
     },
+    paymentMethodsStatus: 'idle',
+    paymentMethodsError: null,
 };
-const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCustomerState), withComputed((state) => ({
+const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCustomerState), withEntities(), withComputed((state) => ({
     isPaymentIntentsStatusLoading: computed(() => state.paymentIntents.status() === 'loading'),
     isPaymentIntentsStatusSuccess: computed(() => state.paymentIntents.status() === 'success'),
     isPaymentIntentsStatusError: computed(() => state.paymentIntents.status() === 'error'),
@@ -931,6 +984,11 @@ const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCusto
     firstSubscription: computed(() => state.subscriptions.data()?.[0]),
     restSubscriptions: computed(() => state.subscriptions.data()?.slice(1)),
     isError: computed(() => state.paymentIntents.error()),
+    isPaymentMethodsStatusLoading: computed(() => state.paymentMethodsStatus() === 'loading'),
+    isPaymentMethodsStatusSuccess: computed(() => state.paymentMethodsStatus() === 'success'),
+    isPaymentMethodsStatusError: computed(() => state.paymentMethodsStatus() === 'error'),
+    hasPaymentMethods: computed(() => state.entities().length > 0),
+    paymentMethods: computed(() => state.entities()),
 })), withMethods((state, supabaseService = inject(SupabaseClientService), stripeService = inject(StripeClientService), productsStore = inject(ProductsStore)) => ({
     /**
      * Load customer
@@ -947,6 +1005,7 @@ const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCusto
             if (customer) {
                 this.loadPaymentIntents(customer.id);
                 this.loadSubscriptions(customer.id);
+                this.loadPaymentMethods(customer.id);
                 patchState(state, { customer: { data: customer, status: 'success', error: null } });
             }
             else {
@@ -974,7 +1033,7 @@ const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCusto
     async loadPaymentIntents(customerId) {
         patchState(state, { paymentIntents: { status: 'loading', data: [], error: null } });
         const { data, error } = await supabaseService.getCustomerPaymentIntents(customerId);
-        const paymentIntents = data?.map((paymentIntent) => parsePaymentIntent(paymentIntent));
+        const paymentIntents = data?.map((paymentIntent) => parsePaymentIntent(paymentIntent, state.entityMap()));
         if (error) {
             patchState(state, { paymentIntents: { error: error.message, status: 'error', data: [] } });
         }
@@ -1009,6 +1068,61 @@ const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCusto
             patchState(state, { subscriptions: { data: subscriptions ?? [], status: 'success', error: null } });
         }
     },
+    /**
+     * Load payment methods for a customer
+     * @param customerId The customer ID
+     */
+    async loadPaymentMethods(customerId) {
+        patchState(state, {
+            paymentMethodsStatus: 'loading',
+            paymentMethodsError: null
+        });
+        const { paymentMethods, error } = await stripeService.getCustomerPaymentMethods(customerId);
+        if (error) {
+            patchState(state, {
+                paymentMethodsStatus: 'error',
+                paymentMethodsError: error.message
+            });
+        }
+        else {
+            patchState(state, setAllEntities(paymentMethods ?? []), {
+                paymentMethodsStatus: 'success',
+                paymentMethodsError: null
+            });
+        }
+    },
+    /**
+     * Load a single payment method and add/update it in the entity collection
+     * @param customerId The customer ID
+     * @param paymentMethodId The payment method ID
+     */
+    async loadPaymentMethod(customerId, paymentMethodId) {
+        patchState(state, {
+            paymentMethodsStatus: 'loading',
+            paymentMethodsError: null
+        });
+        const { paymentMethod, error } = await stripeService.getCustomerPaymentMethod(customerId, paymentMethodId);
+        if (error) {
+            patchState(state, {
+                paymentMethodsStatus: 'error',
+                paymentMethodsError: error.message
+            });
+        }
+        else if (paymentMethod) {
+        }
+        if (paymentMethod) {
+            patchState(state, upsertEntity(paymentMethod), {
+                paymentMethodsStatus: 'success',
+                paymentMethodsError: null
+            });
+        }
+        else {
+            patchState(state, {
+                paymentMethodsStatus: 'error',
+                paymentMethodsError: 'Payment method not found'
+            });
+        }
+    },
 })), withHooks(() => {
     return {
         onInit() {
@@ -1024,15 +1138,18 @@ const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCusto
         }
     };
 }));
-function parsePaymentIntent(paymentIntent) {
+function parsePaymentIntent(paymentIntent, paymentMethodsMap = {}) {
+    console.log('🔍 [CustomerStore] paymentIntent: ', paymentIntent);
     const paymentIntentAttrs = paymentIntent.attrs;
+    const paymentMethodId = paymentIntentAttrs.payment_method;
     return {
         ...paymentIntent,
         status: paymentIntentAttrs.status,
         invoiceId: paymentIntentAttrs.invoice,
         liveMode: paymentIntentAttrs.livemode,
         confirmationMethod: paymentIntentAttrs.confirmation_method,
-        paymentMethodId: paymentIntentAttrs.payment_method,
+        paymentMethodId,
+        paymentMethod: paymentMethodId ? paymentMethodsMap[paymentMethodId] : undefined,
     };
 }
 
@@ -1135,6 +1252,55 @@ const CheckoutStore = signalStore({ providedIn: 'root' }, withState(initialCheck
     }
 }));
 
+const initialPortalState = {
+    status: 'idle',
+    error: null,
+    portalUrl: null
+};
+const PortalAccountStore = signalStore({ providedIn: 'root' }, withState(initialPortalState), withComputed((state) => ({
+    isStatusIdle: computed(() => state.status() === 'idle'),
+    isStatusLoading: computed(() => state.status() === 'loading'),
+    isStatusSuccess: computed(() => state.status() === 'success'),
+    isStatusError: computed(() => state.status() === 'error'),
+})), withMethods((store, stripeService = inject(StripeClientService)) => ({
+    /**
+     * Creates a customer portal session and redirects to the URL
+     * @param customerId Stripe customer ID
+     * @param returnUrl URL to redirect to after the portal session
+     */
+    async createPortalSession(customerId, returnUrl) {
+        patchState(store, { status: 'loading', error: null, portalUrl: null });
+        try {
+            const { url, error } = await stripeService.createPortalSession(customerId, returnUrl);
+            if (error) {
+                throw new Error(error.message);
+            }
+            if (!url) {
+                throw new Error('No se pudo crear la sesión del portal');
+            }
+            patchState(store, {
+                status: 'success',
+                portalUrl: url
+            });
+            window.location.href = url;
+        }
+        catch (error) {
+            console.error('🚨 [PortalAccountStore]', error);
+            const errorMessage = error instanceof Error ? error.message : 'Error desconocido';
+            patchState(store, {
+                status: 'error',
+                error: errorMessage
+            });
+        }
+    },
+    /**
+     * Resets the store to initial state
+     */
+    reset() {
+        patchState(store, initialPortalState);
+    }
+})));
+
 class EmbeddedSkeletonComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmbeddedSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: EmbeddedSkeletonComponent, isStandalone: true, selector: "lib-embedded-skeleton", ngImport: i0, template: "<div class=\"w-full max-w-md mx-auto p-4\">\n  <!-- Header skeleton -->\n  <div class=\"flex items-center gap-4 mb-6\">\n    <div class=\"skeleton w-16 h-16 rounded-lg\"></div>\n    <div class=\"skeleton h-6 w-48\"></div>\n  </div>\n\n  <!-- Price skeleton -->\n  <div class=\"mb-8\">\n    <div class=\"skeleton h-10 w-32 mb-2\"></div>\n    <div class=\"skeleton h-4 w-24\"></div>\n  </div>\n\n  <!-- Payment form skeleton -->\n  <div class=\"space-y-4\">\n    <!-- Email field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Card info field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Name field -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Country selector -->\n    <div class=\"skeleton h-12 w-full\"></div>\n    \n    <!-- Submit button -->\n    <div class=\"skeleton h-12 w-full mt-6\"></div>\n  </div>\n</div> " });
@@ -1217,7 +1383,6 @@ class UtilsService {
     formatAmount(amount, currency = 'EUR') {
         if (!amount)
             return 'N/A';
-        console.log('[🛠️ UtilsService - formatAmount] currency: ', currency.toLocaleUpperCase());
         const formatter = new Intl.NumberFormat(currency.toLocaleUpperCase() === 'EUR' ? 'es-ES' : 'en-US', {
             style: 'currency',
             currency: currency || 'USD',
@@ -1266,24 +1431,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 
 class ProductItemComponent {
     product = input.required();
+    currency = input(Currency.EUR);
     productSelected = output();
     priceSelected = output();
     utils = inject(UtilsService);
-    onSelect(price) {
+    sanitizer = inject(DomSanitizer);
+    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()));
+    sanitizedImage = computed(() => {
+        const imageUrl = this.product().images?.[0];
+        return imageUrl ? this.sanitizer.bypassSecurityTrustUrl(imageUrl) : null;
+    });
+    onSelect() {
         this.productSelected.emit(this.product());
-        this.priceSelected.emit(price);
+        this.priceSelected.emit(this.price()?.details);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductItemComponent, isStandalone: true, selector: "lib-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl\">\n  @if (product().images && product().images.length) {\n    <figure>\n      <img src=\"{{ product().images[0] }}\" alt=\"{{ product().name }}\" class=\"h-48 w-full object-cover\" />\n    </figure>\n  }\n  <div class=\"card-body\">\n    @if (product().active) {\n      <div class=\"badge badge-soft badge-success\">Active</div>\n    } @else {\n      <div class=\"badge badge-soft badge-warning\">Inactive</div>\n    }\n\n    <h2 class=\"card-title\">{{ product().name }}</h2>\n    @if (product().description) {\n      <p>{{ product().description }}</p>\n    }\n  \n    @if (product().prices) {\n      <div class=\"grid grid-cols-2 gap-4\">\n        @for (price of product().prices; track price.details.id) {\n          <div class=\"card bg-primary hover:brightness-90 cursor-pointer transition-colors p-6 rounded-2xl\" \n               [class.bg-secondary]=\"price.recurringInterval === 'year'\"\n               (click)=\"onSelect(price.details)\">\n            <div class=\"flex flex-col gap-1\">\n              @if (price.recurringInterval !== 'no-recurring') {\n                <div class=\"text-xs font-medium text-primary-content\">Pay {{ price.recurringInterval === 'month' ? 'Monthly' : 'Yearly' }}</div>\n              } @else {\n                <div class=\"text-[11px] font-medium text-primary-content\">One time payment</div>\n              }\n              <div class=\"flex flex-col items-baseline\">\n                <span class=\"text-2xl font-bold text-primary-content\">{{ utils.formatAmount(price.details.unit_amount ?? 0, price.details.currency ?? 'USD') }}</span>\n              </div>\n              @if (price.recurringInterval === 'year') {\n                <div class=\"badge badge-sm badge-neutral text-primary-content\">Save 15%</div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductItemComponent, isStandalone: true, selector: "lib-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl max-w-sm mx-auto rounded-3xl overflow-hidden\">\n  <!-- Header with image and favorite icon -->\n  <div class=\"relative\">\n    @if (sanitizedImage()) {\n      <figure class=\"bg-gradient-to-br from-base-200 to-base-300\">\n        <img \n          [src]=\"sanitizedImage()\" \n          alt=\"{{ product().name }}\" \n          class=\"h-64 w-full object-cover p-8 rounded-t-3xl\" />\n      </figure>\n    } @else {\n      <div class=\"h-64 bg-gradient-to-br from-base-200 to-base-300 flex items-center justify-center\">\n        <div class=\"text-base-content/50 text-6xl\">\uD83D\uDCE6</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"card-body p-6 flex flex-col h-full\">\n    <!-- Product title -->\n    <h2 class=\"card-title text-xl font-bold text-base-content\">\n      {{ product().name }}\n    </h2>\n\n    <!-- Description (moved under title) -->\n    @if (product().description) {\n      <p class=\"text-base-content/70 text-sm mb-4 line-clamp-3\">\n        {{ product().description }}\n      </p>\n    }\n\n         <!-- Price options as text -->\n    <div class=\"flex justify-between gap-2\">\n      <span class=\"text-xl font-bold text-base-content\">\n        @if (price()?.details?.type === 'recurring') {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}/{{ price()?.recurringInterval === 'month' ? 'mo' : 'yr' }}\n        } @else {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}\n        }\n      </span>\n\n      <!-- Status badge (only show if inactive) -->\n      @if (!product().active) {\n        <div class=\"mt-4\">\n          <div class=\"badge badge-warning badge-sm\">Inactive</div>\n        </div>\n      } @else {\n        <button \n          class=\"btn btn-primary\"\n          (click)=\"onSelect()\">\n          Buy now\n        </button>\n      }\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-product-item', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-xl\">\n  @if (product().images && product().images.length) {\n    <figure>\n      <img src=\"{{ product().images[0] }}\" alt=\"{{ product().name }}\" class=\"h-48 w-full object-cover\" />\n    </figure>\n  }\n  <div class=\"card-body\">\n    @if (product().active) {\n      <div class=\"badge badge-soft badge-success\">Active</div>\n    } @else {\n      <div class=\"badge badge-soft badge-warning\">Inactive</div>\n    }\n\n    <h2 class=\"card-title\">{{ product().name }}</h2>\n    @if (product().description) {\n      <p>{{ product().description }}</p>\n    }\n  \n    @if (product().prices) {\n      <div class=\"grid grid-cols-2 gap-4\">\n        @for (price of product().prices; track price.details.id) {\n          <div class=\"card bg-primary hover:brightness-90 cursor-pointer transition-colors p-6 rounded-2xl\" \n               [class.bg-secondary]=\"price.recurringInterval === 'year'\"\n               (click)=\"onSelect(price.details)\">\n            <div class=\"flex flex-col gap-1\">\n              @if (price.recurringInterval !== 'no-recurring') {\n                <div class=\"text-xs font-medium text-primary-content\">Pay {{ price.recurringInterval === 'month' ? 'Monthly' : 'Yearly' }}</div>\n              } @else {\n                <div class=\"text-[11px] font-medium text-primary-content\">One time payment</div>\n              }\n              <div class=\"flex flex-col items-baseline\">\n                <span class=\"text-2xl font-bold text-primary-content\">{{ utils.formatAmount(price.details.unit_amount ?? 0, price.details.currency ?? 'USD') }}</span>\n              </div>\n              @if (price.recurringInterval === 'year') {\n                <div class=\"badge badge-sm badge-neutral text-primary-content\">Save 15%</div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div> " }]
+            args: [{ selector: 'lib-product-item', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-xl max-w-sm mx-auto rounded-3xl overflow-hidden\">\n  <!-- Header with image and favorite icon -->\n  <div class=\"relative\">\n    @if (sanitizedImage()) {\n      <figure class=\"bg-gradient-to-br from-base-200 to-base-300\">\n        <img \n          [src]=\"sanitizedImage()\" \n          alt=\"{{ product().name }}\" \n          class=\"h-64 w-full object-cover p-8 rounded-t-3xl\" />\n      </figure>\n    } @else {\n      <div class=\"h-64 bg-gradient-to-br from-base-200 to-base-300 flex items-center justify-center\">\n        <div class=\"text-base-content/50 text-6xl\">\uD83D\uDCE6</div>\n      </div>\n    }\n  </div>\n\n  <div class=\"card-body p-6 flex flex-col h-full\">\n    <!-- Product title -->\n    <h2 class=\"card-title text-xl font-bold text-base-content\">\n      {{ product().name }}\n    </h2>\n\n    <!-- Description (moved under title) -->\n    @if (product().description) {\n      <p class=\"text-base-content/70 text-sm mb-4 line-clamp-3\">\n        {{ product().description }}\n      </p>\n    }\n\n         <!-- Price options as text -->\n    <div class=\"flex justify-between gap-2\">\n      <span class=\"text-xl font-bold text-base-content\">\n        @if (price()?.details?.type === 'recurring') {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}/{{ price()?.recurringInterval === 'month' ? 'mo' : 'yr' }}\n        } @else {\n          {{ utils.formatAmount(price()?.details?.unit_amount ?? 0, price()?.details?.currency ?? 'EUR') }}\n        }\n      </span>\n\n      <!-- Status badge (only show if inactive) -->\n      @if (!product().active) {\n        <div class=\"mt-4\">\n          <div class=\"badge badge-warning badge-sm\">Inactive</div>\n        </div>\n      } @else {\n        <button \n          class=\"btn btn-primary\"\n          (click)=\"onSelect()\">\n          Buy now\n        </button>\n      }\n    </div>\n  </div>\n</div> " }]
         }] });
 
 class ProductListComponent {
     productsStore = inject(ProductsStore);
     products = input([]);
+    currency = input(Currency.EUR);
     productSelected = output();
     priceSelected = output();
     onProductSelect(product) {
@@ -1293,11 +1466,11 @@ class ProductListComponent {
         this.priceSelected.emit(price);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductListComponent, isStandalone: true, selector: "stripe-product-list", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "@if (productsStore.isStatusLoading()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    @for (item of [1,2,3]; track item) {\n      <lib-product-item-skeleton></lib-product-item-skeleton>\n    }\n  </div>\n} @else if (productsStore.isStatusError()) {\n  <div class=\"alert alert-error\">\n    <span>{{ productsStore.error() }}</span>\n  </div>\n} @else if (!productsStore.hasProducts()) {\n  <div class=\"alert alert-info\">\n    <span>No products available</span>\n  </div>\n} @else {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    @for (product of products(); track product.id) {\n      <lib-product-item\n        [product]=\"product\"\n        (productSelected)=\"onProductSelect($event)\"\n        (priceSelected)=\"onPriceSelect($event)\">\n      </lib-product-item>\n    }\n  </div>\n} \n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ProductItemComponent, selector: "lib-product-item", inputs: ["product"], outputs: ["productSelected", "priceSelected"] }, { kind: "component", type: ProductItemSkeletonComponent, selector: "lib-product-item-skeleton" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductListComponent, isStandalone: true, selector: "stripe-product-list", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "@if (productsStore.isStatusLoading()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    @for (item of [1,2,3]; track item) {\n      <lib-product-item-skeleton></lib-product-item-skeleton>\n    }\n  </div>\n}\n\n@if (productsStore.isStatusError() && !productsStore.isStatusLoading()) {\n  <div class=\"alert alert-error\">\n    <span>{{ productsStore.error() }}</span>\n  </div>\n}\n\n@if (!productsStore.hasProducts()) {\n  <div class=\"alert alert-info\">\n    <span>No products available</span>\n  </div>\n}\n\n@if (productsStore.hasProducts()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    @for (product of products(); track product.id) {\n      <lib-product-item\n        [product]=\"product\"\n        [currency]=\"currency()\"\n        (productSelected)=\"onProductSelect($event)\"\n        (priceSelected)=\"onPriceSelect($event)\">\n      </lib-product-item>\n    }\n  </div>\n} \n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ProductItemComponent, selector: "lib-product-item", inputs: ["product", "currency"], outputs: ["productSelected", "priceSelected"] }, { kind: "component", type: ProductItemSkeletonComponent, selector: "lib-product-item-skeleton" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stripe-product-list', standalone: true, imports: [CommonModule, ProductItemComponent, ProductItemSkeletonComponent], template: "@if (productsStore.isStatusLoading()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    @for (item of [1,2,3]; track item) {\n      <lib-product-item-skeleton></lib-product-item-skeleton>\n    }\n  </div>\n} @else if (productsStore.isStatusError()) {\n  <div class=\"alert alert-error\">\n    <span>{{ productsStore.error() }}</span>\n  </div>\n} @else if (!productsStore.hasProducts()) {\n  <div class=\"alert alert-info\">\n    <span>No products available</span>\n  </div>\n} @else {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    @for (product of products(); track product.id) {\n      <lib-product-item\n        [product]=\"product\"\n        (productSelected)=\"onProductSelect($event)\"\n        (priceSelected)=\"onPriceSelect($event)\">\n      </lib-product-item>\n    }\n  </div>\n} \n\n\n" }]
+            args: [{ selector: 'stripe-product-list', standalone: true, imports: [CommonModule, ProductItemComponent, ProductItemSkeletonComponent], template: "@if (productsStore.isStatusLoading()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    @for (item of [1,2,3]; track item) {\n      <lib-product-item-skeleton></lib-product-item-skeleton>\n    }\n  </div>\n}\n\n@if (productsStore.isStatusError() && !productsStore.isStatusLoading()) {\n  <div class=\"alert alert-error\">\n    <span>{{ productsStore.error() }}</span>\n  </div>\n}\n\n@if (!productsStore.hasProducts()) {\n  <div class=\"alert alert-info\">\n    <span>No products available</span>\n  </div>\n}\n\n@if (productsStore.hasProducts()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    @for (product of products(); track product.id) {\n      <lib-product-item\n        [product]=\"product\"\n        [currency]=\"currency()\"\n        (productSelected)=\"onProductSelect($event)\"\n        (priceSelected)=\"onPriceSelect($event)\">\n      </lib-product-item>\n    }\n  </div>\n} \n\n\n" }]
         }] });
 
 class EmbeddedSubscriptionComponent {
@@ -1357,6 +1530,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             args: [{ selector: 'lib-subscription-return-page', standalone: true, imports: [CommonModule], template: "<div class=\"flex justify-center min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4\">\n  <div class=\"hero-content text-center max-w-md\">\n    <div class=\"card w-full bg-base-100 shadow-2xl\">\n      <div class=\"card-body items-center text-center\">\n        <!-- Success Icon -->\n        <div class=\"mb-6\">\n          <div class=\"avatar\">\n            <div class=\"w-24 h-24 rounded-full bg-success/10 flex items-center justify-center\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"h-full w-full text-success\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n\n        <!-- Status Content -->\n        @if (checkoutStore.isStatusLoading()) {\n          <div class=\"flex flex-col items-center gap-4 mb-6\">\n            <span class=\"loading loading-spinner loading-lg text-primary\"></span>\n            <div class=\"alert alert-info\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"stroke-current shrink-0 w-6 h-6\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path>\n              </svg>\n              <span>Cargando detalles de la suscripci\u00F3n...</span>\n            </div>\n          </div>\n        } @else if (checkoutStore.isStatusError()) {\n          <div class=\"alert alert-error mb-6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span>{{ subscriptionsStore.error() }}</span>\n          </div>\n        } @else if (checkoutStore.isPaymentComplete()) {\n\n          <!-- Title and Description -->\n          <h2 class=\"card-title text-3xl font-bold text-base-content mb-2\">{{ sessionStatus()?.amount_total }}</h2>\n\n          <div class=\"alert alert-success mb-6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            <span class=\"font-medium\">Tu suscripci\u00F3n est\u00E1 activa y lista para usar.</span>\n          </div>\n\n          <div class=\"bg-base-200 rounded-lg p-4 mb-6 w-full\">\n            <h3 class=\"font-semibold text-sm text-base-content/80 mb-3\">Beneficios incluidos:</h3>\n            <ul class=\"space-y-2\">\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Acceso completo a todas las funciones\n              </li>\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Soporte prioritario 24/7\n              </li>\n              <li class=\"flex items-center text-sm\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-success mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" />\n                </svg>\n                Actualizaciones autom\u00E1ticas\n              </li>\n            </ul>\n          </div>\n        }\n\n        <!-- Action Buttons -->\n        <div class=\"card-actions justify-center w-full\">\n          <button class=\"btn btn-primary btn-wide\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\n              />\n            </svg>\n            Ir al Panel Principal\n          </button>\n        </div>\n\n        <!-- Additional Help -->\n        <div class=\"text-center mt-4\">\n          <p class=\"text-xs text-base-content/50\">\n            \u00BFNecesitas ayuda?\n            <a href=\"#\" class=\"link link-primary\">Contacta soporte</a>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>" }]
         }] });
 
+class BrandIconDirective {
+    el;
+    paymentMethod = input.required({ alias: 'ngxBrandIcon' });
+    constructor(el) {
+        this.el = el;
+        effect(() => {
+            const icon = this.getBrandIcon();
+            this.el.nativeElement.textContent = icon;
+        });
+    }
+    getBrandIcon() {
+        const brand = this.paymentMethod().card?.brand;
+        const brandIcons = {
+            'visa': '💳',
+            'mastercard': '💳',
+            'amex': '💳',
+            'discover': '💳',
+            'diners': '💳',
+            'jcb': '💳',
+            'unionpay': '💳',
+            'unknown': '💳'
+        };
+        return brandIcons[brand || 'unknown'] || '💳';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrandIconDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.5", type: BrandIconDirective, isStandalone: true, selector: "[ngxBrandIcon]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxBrandIcon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrandIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxBrandIcon]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class BrandNameDirective {
+    el;
+    paymentMethod = input.required({ alias: 'ngxBrandName' });
+    constructor(el) {
+        this.el = el;
+        effect(() => {
+            const name = this.getBrandName();
+            this.el.nativeElement.textContent = name;
+        });
+    }
+    getBrandName() {
+        const brand = this.paymentMethod().card?.brand;
+        const brandNames = {
+            'visa': 'Visa',
+            'mastercard': 'Mastercard',
+            'amex': 'American Express',
+            'discover': 'Discover',
+            'diners': 'Diners Club',
+            'jcb': 'JCB',
+            'unionpay': 'UnionPay',
+            'unknown': 'Tarjeta'
+        };
+        return brandNames[brand || 'unknown'] || 'Tarjeta';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrandNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.5", type: BrandNameDirective, isStandalone: true, selector: "[ngxBrandName]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxBrandName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BrandNameDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxBrandName]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class PaymentMethodTypeDirective {
+    el;
+    paymentMethod = input.required({ alias: 'ngxPaymentMethodType' });
+    constructor(el) {
+        this.el = el;
+        effect(() => {
+            const type = this.getPaymentMethodType();
+            this.el.nativeElement.textContent = type;
+        });
+    }
+    getPaymentMethodType() {
+        const typeNames = {
+            'card': 'Tarjeta',
+            'paypal': 'PayPal',
+            'klarna': 'Klarna',
+            'afterpay_clearpay': 'Afterpay',
+            'alipay': 'Alipay',
+            'bancontact': 'Bancontact',
+            'eps': 'EPS',
+            'giropay': 'Giropay',
+            'ideal': 'iDEAL',
+            'p24': 'Przelewy24',
+            'sepa_debit': 'SEPA Direct Debit',
+            'sofort': 'Sofort',
+            'wechat_pay': 'WeChat Pay'
+        };
+        return typeNames[this.paymentMethod().type] || 'Método de pago';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentMethodTypeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.5", type: PaymentMethodTypeDirective, isStandalone: true, selector: "[ngxPaymentMethodType]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxPaymentMethodType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentMethodTypeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxPaymentMethodType]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class PaymentMethodComponent {
+    paymentMethod = input.required();
+    mode = input('detailed');
+    get last4() {
+        return this.paymentMethod().card?.last4 || '****';
+    }
+    get expirationDate() {
+        const card = this.paymentMethod().card;
+        if (!card?.exp_month || !card?.exp_year)
+            return '';
+        return `${card.exp_month.toString().padStart(2, '0')}/${card.exp_year.toString().slice(-2)}`;
+    }
+    get holderName() {
+        return this.paymentMethod().billing_details?.name || 'N/A';
+    }
+    get isExpired() {
+        const card = this.paymentMethod().card;
+        if (!card?.exp_month || !card?.exp_year)
+            return false;
+        const now = new Date();
+        const expDate = new Date(card.exp_year, card.exp_month - 1);
+        return expDate < now;
+    }
+    get cardFunding() {
+        return this.paymentMethod().card?.funding;
+    }
+    get cardCountry() {
+        return this.paymentMethod().card?.country || undefined;
+    }
+    get billingEmail() {
+        return this.paymentMethod().billing_details?.email || undefined;
+    }
+    get billingPhone() {
+        return this.paymentMethod().billing_details?.phone || undefined;
+    }
+    get billingAddress() {
+        return this.paymentMethod().billing_details?.address;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentMethodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentMethodComponent, isStandalone: true, selector: "ngx-payment-method", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "paymentMethod", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Detailed Version -->\n@if (mode() === 'detailed') {\n  <div class=\"w-full max-w-md mx-auto\">\n    <!-- Stack of Credit Cards -->\n    <div class=\"stack w-full h-56\">\n      <div class=\"bg-gradient-to-br from-primary to-accent text-neutral-content relative place-content-center rounded-box\">\n        <div class=\"card-body p-6 relative z-10\">\n          <!-- Card Header -->\n          <div class=\"flex justify-between items-start mb-6\">\n            <div class=\"flex items-center gap-2\">\n              <!--<span class=\"text-3xl filter drop-shadow-lg\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n              <div class=\"font-bold text-lg text-primary-content\" [ngxBrandName]=\"paymentMethod()\"></div>\n              @if (cardCountry) {\n                <div class=\"text-xs text-primary-content/60 uppercase\">{{ cardCountry }}</div>\n              }\n              @if (isExpired) {\n                <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n              }\n            </div>\n          </div>\n\n          <!-- Card Number -->\n          <div class=\"mb-6\">\n            <div class=\"font-mono text-xl tracking-wider text-primary-content\">\n              **** **** **** {{ last4 }}\n            </div>\n          </div>\n\n          <!-- Card Bottom Info -->\n          <div class=\"flex justify-start items-end\">\n            <div class=\"flex-1\">\n              <div class=\"text-xs text-primary-content/60 mb-1\">TITULAR</div>\n              <div class=\"font-medium text-sm text-primary-content truncate max-w-32\">{{ holderName }}</div>\n            </div>\n            \n            @if (expirationDate) {\n              <div class=\"flex-1\">\n                <div class=\"text-xs text-primary-content/60 mb-1\">V\u00C1LIDA HASTA</div>\n                <div class=\"font-mono text-sm text-primary-content\">{{ expirationDate }}</div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Card Background Pattern -->\n        <div class=\"absolute inset-0 opacity-20\">\n          <div class=\"absolute top-4 right-4 w-20 h-20 rounded-full bg-primary-content/30\"></div>\n          <div class=\"absolute bottom-4 left-4 w-16 h-16 rounded-full bg-primary-content/20\"></div>\n          <div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 rounded-full bg-primary-content/10\"></div>\n        </div>\n      </div>\n      <div class=\"bg-secondary grid place-content-center rounded-box\"></div>\n      <div class=\"bg-accent grid place-content-center rounded-box\"></div>\n    </div>\n\n    <!-- Additional Information Below Cards -->\n    <div class=\"mt-6 space-y-4\">\n      <!-- Billing Information -->\n      @if (billingEmail || billingPhone) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n              </svg>\n              Informaci\u00F3n de Contacto\n            </h4>\n            \n            <div class=\"space-y-2\">\n              @if (billingEmail) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingEmail }}</span>\n                </div>\n              }\n              \n              @if (billingPhone) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingPhone }}</span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Billing Address -->\n      @if (billingAddress && (billingAddress.line1 || billingAddress.city)) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n              </svg>\n              Direcci\u00F3n de Facturaci\u00F3n\n            </h4>\n            \n            <div class=\"text-sm text-base-content/70 space-y-1\">\n              @if (billingAddress.line1) {\n                <div>{{ billingAddress.line1 }}</div>\n                @if (billingAddress.line2) {\n                  <div>{{ billingAddress.line2 }}</div>\n                }\n              }\n              \n              <div class=\"flex gap-2 flex-wrap\">\n                @if (billingAddress.city) {\n                  <span>{{ billingAddress.city }}</span>\n                }\n                @if (billingAddress.postal_code) {\n                  <span>{{ billingAddress.postal_code }}</span>\n                }\n                @if (billingAddress.country) {\n                  <span class=\"uppercase\">{{ billingAddress.country }}</span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Card Creation Date -->\n      <div class=\"flex items-center justify-between text-sm text-base-content/60 px-2\">\n        <span>M\u00E9todo agregado:</span>\n        <span>{{ paymentMethod().created * 1000 | date:'short' }}</span>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Compact Version -->\n@if (mode() === 'compact') {\n  <div class=\"flex items-center gap-2\">\n    <!--<span class=\"text-xl filter drop-shadow-sm\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n    \n    <div class=\"flex-1 min-w-0\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"font-medium\" [ngxBrandName]=\"paymentMethod()\"></span>\n        <span class=\"text-base-content/70\">\u2022\u2022\u2022\u2022 {{ last4 }}</span>\n        @if (paymentMethod().type === 'card' && expirationDate) {\n          <span class=\"text-base-content/70 text-sm\">{{ expirationDate }}</span>\n        }\n      </div>\n    </div>\n\n    @if (isExpired) {\n      <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n    } @else {\n      <div class=\"badge badge-success badge-sm\">Activa</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "directive", type: BrandNameDirective, selector: "[ngxBrandName]", inputs: ["ngxBrandName"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentMethodComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-payment-method', standalone: true, imports: [CommonModule, BrandIconDirective, BrandNameDirective, PaymentMethodTypeDirective], template: "<!-- Detailed Version -->\n@if (mode() === 'detailed') {\n  <div class=\"w-full max-w-md mx-auto\">\n    <!-- Stack of Credit Cards -->\n    <div class=\"stack w-full h-56\">\n      <div class=\"bg-gradient-to-br from-primary to-accent text-neutral-content relative place-content-center rounded-box\">\n        <div class=\"card-body p-6 relative z-10\">\n          <!-- Card Header -->\n          <div class=\"flex justify-between items-start mb-6\">\n            <div class=\"flex items-center gap-2\">\n              <!--<span class=\"text-3xl filter drop-shadow-lg\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n              <div class=\"font-bold text-lg text-primary-content\" [ngxBrandName]=\"paymentMethod()\"></div>\n              @if (cardCountry) {\n                <div class=\"text-xs text-primary-content/60 uppercase\">{{ cardCountry }}</div>\n              }\n              @if (isExpired) {\n                <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n              }\n            </div>\n          </div>\n\n          <!-- Card Number -->\n          <div class=\"mb-6\">\n            <div class=\"font-mono text-xl tracking-wider text-primary-content\">\n              **** **** **** {{ last4 }}\n            </div>\n          </div>\n\n          <!-- Card Bottom Info -->\n          <div class=\"flex justify-start items-end\">\n            <div class=\"flex-1\">\n              <div class=\"text-xs text-primary-content/60 mb-1\">TITULAR</div>\n              <div class=\"font-medium text-sm text-primary-content truncate max-w-32\">{{ holderName }}</div>\n            </div>\n            \n            @if (expirationDate) {\n              <div class=\"flex-1\">\n                <div class=\"text-xs text-primary-content/60 mb-1\">V\u00C1LIDA HASTA</div>\n                <div class=\"font-mono text-sm text-primary-content\">{{ expirationDate }}</div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Card Background Pattern -->\n        <div class=\"absolute inset-0 opacity-20\">\n          <div class=\"absolute top-4 right-4 w-20 h-20 rounded-full bg-primary-content/30\"></div>\n          <div class=\"absolute bottom-4 left-4 w-16 h-16 rounded-full bg-primary-content/20\"></div>\n          <div class=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 rounded-full bg-primary-content/10\"></div>\n        </div>\n      </div>\n      <div class=\"bg-secondary grid place-content-center rounded-box\"></div>\n      <div class=\"bg-accent grid place-content-center rounded-box\"></div>\n    </div>\n\n    <!-- Additional Information Below Cards -->\n    <div class=\"mt-6 space-y-4\">\n      <!-- Billing Information -->\n      @if (billingEmail || billingPhone) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n              </svg>\n              Informaci\u00F3n de Contacto\n            </h4>\n            \n            <div class=\"space-y-2\">\n              @if (billingEmail) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingEmail }}</span>\n                </div>\n              }\n              \n              @if (billingPhone) {\n                <div class=\"flex items-center gap-2 text-sm\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 text-base-content/60\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\" />\n                  </svg>\n                  <span class=\"text-base-content/70\">{{ billingPhone }}</span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Billing Address -->\n      @if (billingAddress && (billingAddress.line1 || billingAddress.city)) {\n        <div class=\"card bg-base-100 shadow-sm border border-base-200\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title text-sm mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" />\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" />\n              </svg>\n              Direcci\u00F3n de Facturaci\u00F3n\n            </h4>\n            \n            <div class=\"text-sm text-base-content/70 space-y-1\">\n              @if (billingAddress.line1) {\n                <div>{{ billingAddress.line1 }}</div>\n                @if (billingAddress.line2) {\n                  <div>{{ billingAddress.line2 }}</div>\n                }\n              }\n              \n              <div class=\"flex gap-2 flex-wrap\">\n                @if (billingAddress.city) {\n                  <span>{{ billingAddress.city }}</span>\n                }\n                @if (billingAddress.postal_code) {\n                  <span>{{ billingAddress.postal_code }}</span>\n                }\n                @if (billingAddress.country) {\n                  <span class=\"uppercase\">{{ billingAddress.country }}</span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Card Creation Date -->\n      <div class=\"flex items-center justify-between text-sm text-base-content/60 px-2\">\n        <span>M\u00E9todo agregado:</span>\n        <span>{{ paymentMethod().created * 1000 | date:'short' }}</span>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Compact Version -->\n@if (mode() === 'compact') {\n  <div class=\"flex items-center gap-2\">\n    <!--<span class=\"text-xl filter drop-shadow-sm\" [ngxBrandIcon]=\"paymentMethod()\"></span>-->\n    \n    <div class=\"flex-1 min-w-0\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"font-medium\" [ngxBrandName]=\"paymentMethod()\"></span>\n        <span class=\"text-base-content/70\">\u2022\u2022\u2022\u2022 {{ last4 }}</span>\n        @if (paymentMethod().type === 'card' && expirationDate) {\n          <span class=\"text-base-content/70 text-sm\">{{ expirationDate }}</span>\n        }\n      </div>\n    </div>\n\n    @if (isExpired) {\n      <div class=\"badge badge-error badge-sm animate-pulse\">Expirada</div>\n    } @else {\n      <div class=\"badge badge-success badge-sm\">Activa</div>\n    }\n  </div>\n}\n" }]
+        }] });
+
+class PaymentIntentsDialogComponent {
+    paymentIntent = input.required();
+    dialogId = input.required();
+    utils = new UtilsService();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentsDialogComponent, isStandalone: true, selector: "lib-payment-intents-dialog", inputs: { paymentIntent: { classPropertyName: "paymentIntent", publicName: "paymentIntent", isSignal: true, isRequired: true, transformFunction: null }, dialogId: { classPropertyName: "dialogId", publicName: "dialogId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<dialog [id]=\"dialogId()\" class=\"modal\">\n  <div class=\"modal-box max-w-2xl\">\n    <h3 class=\"font-bold text-lg mb-4\">Detalles del Payment Intent</h3>\n    \n    <!-- Header with Amount and Status -->\n    <div class=\"flex items-center gap-3 mb-6 p-4 bg-base-200 rounded-lg\">\n      <div class=\"flex-1\">\n        <div class=\"text-3xl font-bold text-primary\">\n          {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-sm text-base-content/70\">\n          {{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}\n        </div>\n      </div>\n      <div class=\"flex gap-2\">\n        <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }}\">\n          {{ paymentIntent().status }}\n        </div>\n        @if (!paymentIntent().liveMode) {\n          <div class=\"badge badge-warning\">TEST</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"space-y-6\">\n      <!-- Transaction Details -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n          </svg>\n          Detalles de la Transacci\u00F3n\n        </h4>\n        \n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Estado</div>\n            <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n            <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n          </div>\n          \n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Monto</div>\n            <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n            <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n          </div>\n        </div>\n\n        <!-- Confirmation Method -->\n        <div class=\"mt-3 flex items-center gap-2 text-sm p-2 bg-base-200 rounded\">\n          <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n          <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n          <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n        </div>\n      </div>\n\n      <!-- Payment Information -->\n      @if (paymentIntent().paymentMethod) {\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n            Informaci\u00F3n del Pago\n          </h4>\n          \n          <ngx-payment-method \n            [paymentMethod]=\"paymentIntent().paymentMethod!\" \n            mode=\"detailed\">\n          </ngx-payment-method>\n        </div>\n      }\n\n      <!-- Additional Information -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n          </svg>\n          Informaci\u00F3n Adicional\n        </h4>\n        \n        <div class=\"space-y-2\">\n          @if (paymentIntent().invoiceId) {\n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Factura</span>\n              <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n            </div>\n          }\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Entorno</span>\n            <span class=\"text-sm\">\n              @if (paymentIntent().liveMode) {\n                <span class=\"text-success\">Producci\u00F3n</span>\n              } @else {\n                <span class=\"text-warning\">Pruebas</span>\n              }\n            </span>\n          </div>\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Referencia</span>\n            <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-action\">\n      <form method=\"dialog\">\n        <button class=\"btn btn-primary\">Cerrar</button>\n      </form>\n    </div>\n  </div>\n</dialog>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-payment-intents-dialog', standalone: true, imports: [CommonModule, PaymentMethodComponent], template: "<dialog [id]=\"dialogId()\" class=\"modal\">\n  <div class=\"modal-box max-w-2xl\">\n    <h3 class=\"font-bold text-lg mb-4\">Detalles del Payment Intent</h3>\n    \n    <!-- Header with Amount and Status -->\n    <div class=\"flex items-center gap-3 mb-6 p-4 bg-base-200 rounded-lg\">\n      <div class=\"flex-1\">\n        <div class=\"text-3xl font-bold text-primary\">\n          {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-sm text-base-content/70\">\n          {{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}\n        </div>\n      </div>\n      <div class=\"flex gap-2\">\n        <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }}\">\n          {{ paymentIntent().status }}\n        </div>\n        @if (!paymentIntent().liveMode) {\n          <div class=\"badge badge-warning\">TEST</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"space-y-6\">\n      <!-- Transaction Details -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n          </svg>\n          Detalles de la Transacci\u00F3n\n        </h4>\n        \n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Estado</div>\n            <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n            <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n          </div>\n          \n          <div class=\"stat bg-base-200 rounded-lg p-3\">\n            <div class=\"stat-title text-xs\">Monto</div>\n            <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n            <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n          </div>\n        </div>\n\n        <!-- Confirmation Method -->\n        <div class=\"mt-3 flex items-center gap-2 text-sm p-2 bg-base-200 rounded\">\n          <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n          <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n          <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n        </div>\n      </div>\n\n      <!-- Payment Information -->\n      @if (paymentIntent().paymentMethod) {\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n            Informaci\u00F3n del Pago\n          </h4>\n          \n          <ngx-payment-method \n            [paymentMethod]=\"paymentIntent().paymentMethod!\" \n            mode=\"detailed\">\n          </ngx-payment-method>\n        </div>\n      }\n\n      <!-- Additional Information -->\n      <div>\n        <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n          </svg>\n          Informaci\u00F3n Adicional\n        </h4>\n        \n        <div class=\"space-y-2\">\n          @if (paymentIntent().invoiceId) {\n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Factura</span>\n              <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n            </div>\n          }\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Entorno</span>\n            <span class=\"text-sm\">\n              @if (paymentIntent().liveMode) {\n                <span class=\"text-success\">Producci\u00F3n</span>\n              } @else {\n                <span class=\"text-warning\">Pruebas</span>\n              }\n            </span>\n          </div>\n          \n          <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n            <span class=\"text-sm text-base-content/70\">Referencia</span>\n            <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-action\">\n      <form method=\"dialog\">\n        <button class=\"btn btn-primary\">Cerrar</button>\n      </form>\n    </div>\n  </div>\n</dialog>\n" }]
+        }] });
+
 class PaymentIntentsTableComponent {
     paymentIntents = input.required();
     paymentIntentsTable = computed(() => {
@@ -1407,13 +1747,15 @@ class PaymentIntentsTableComponent {
         this.exportSelected.emit(this.paymentIntentsTable().filter(paymentIntent => paymentIntent.selected));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentsTableComponent, isStandalone: true, selector: "lib-payment-intents-table", inputs: { paymentIntents: { classPropertyName: "paymentIntents", publicName: "paymentIntents", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, withControls: { classPropertyName: "withControls", publicName: "withControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportSelected: "exportSelected", onRefresh: "onRefresh" }, ngImport: i0, template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n        @if (hasPaymentIntents()) {\n          <span class=\"badge badge-soft badge-info\">{{ paymentIntentsTable().length }} payment intents</span>\n        }\n      </div>\n      <div class=\"flex justify-end items-center gap-2\">\n        <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n          </svg>\n        Actualizar\n        </button>\n        <button class=\"btn btn-sm btn-primary\" [disabled]=\"!somePaymentIntentsSelected()\" (click)=\"exportSelectedPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M8.71 7.71L11 5.41V15a1 1 0 0 0 2 0V5.41l2.29 2.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4-4a1 1 0 0 0-.33-.21a1 1 0 0 0-.76 0a1 1 0 0 0-.33.21l-4 4a1 1 0 1 0 1.42 1.42M21 14a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1\"/></svg>\n          Export Selected\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overflow-x-auto\">\n      <div class=\"skeleton h-32 w-full\"></div>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (hasPaymentIntents()) {\n    <div class=\"overflow-x-auto rounded-box bg-base-100\">\n      <table class=\"table table-zebra\">\n        <!-- head -->\n        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th>Amount</th>\n            <th>Payment Method</th>\n            <th>Status</th>\n            <th>Mode</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (paymentIntent of paymentIntentsTable(); track trackByPaymentIntentId(0, paymentIntent)) {\n            <tr>\n              <th>\n                <label>\n                  <input type=\"checkbox\" class=\"checkbox\" (change)=\"togglePaymentIntent($event, paymentIntent.id ?? '')\" [checked]=\"paymentIntent.selected\" />\n                </label>\n              </th>\n              <td>{{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</td>\n              <td>\n                <span class=\"badge badge-outline\">\n                  {{ paymentIntent.paymentMethodId }}\n                </span>\n              </td>\n              <td>\n                <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                  {{ paymentIntent.status}}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? 'Live' : 'Test' }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\">\n                  Details\n                </button>\n                <dialog id=\"modal-{{ paymentIntent.id }}\" class=\"modal\">\n                  <div class=\"modal-box\">\n                    <h3 class=\"font-bold text-lg\">Payment Intent Details</h3>\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-4\">\n                      <div>\n                        <h4 class=\"text-md font-semibold mb-2\">Payment Details</h4>\n                        <ul class=\"space-y-1 text-sm\">\n                          <li><span class=\"font-medium\">Full ID:</span> {{ paymentIntent.id }}</li>\n                          <li><span class=\"font-medium\">Payment Method:</span> {{ paymentIntent.paymentMethodId }}</li>\n                          <li><span class=\"font-medium\">Confirmation Method:</span> {{ paymentIntent.confirmationMethod }}</li>\n                          @if (paymentIntent.invoiceId) {\n                            <li><span class=\"font-medium\">Invoice ID:</span> {{ paymentIntent.invoiceId }}</li>\n                          }\n                        </ul>\n                      </div>\n                      <div>\n                        <h4 class=\"text-md font-semibold mb-2\">Status Information</h4>\n                        <ul class=\"space-y-1 text-sm\">\n                          <li>\n                            <span class=\"font-medium\">Status: </span> \n                            <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                              {{ paymentIntent.status }}\n                            </span>\n                          </li>\n                          <li><span class=\"font-medium\">Mode: </span> {{ paymentIntent.liveMode ? 'Production' : 'Test' }}</li>\n                          <li><span class=\"font-medium\">Amount: </span> {{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</li>\n                        </ul>\n                      </div>\n                    </div>\n                    <div class=\"modal-action\">\n                      <form method=\"dialog\">\n                        <button class=\"btn\">Close</button>\n                      </form>\n                    </div>\n                  </div>\n                </dialog>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No recent payment intents</h2>\n          <p class=\"text-gray-600\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentsTableComponent, isStandalone: true, selector: "lib-payment-intents-table", inputs: { paymentIntents: { classPropertyName: "paymentIntents", publicName: "paymentIntents", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, withControls: { classPropertyName: "withControls", publicName: "withControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportSelected: "exportSelected", onRefresh: "onRefresh" }, ngImport: i0, template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n        @if (hasPaymentIntents()) {\n          <span class=\"badge badge-soft badge-info\">{{ paymentIntentsTable().length }} payment intents</span>\n        }\n      </div>\n      <div class=\"flex justify-end items-center gap-2\">\n        <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n          </svg>\n        Actualizar\n        </button>\n        <button class=\"btn btn-sm btn-primary\" [disabled]=\"!somePaymentIntentsSelected()\" (click)=\"exportSelectedPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M8.71 7.71L11 5.41V15a1 1 0 0 0 2 0V5.41l2.29 2.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4-4a1 1 0 0 0-.33-.21a1 1 0 0 0-.76 0a1 1 0 0 0-.33.21l-4 4a1 1 0 1 0 1.42 1.42M21 14a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1\"/></svg>\n          Export Selected\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overflow-x-auto\">\n      <div class=\"skeleton h-32 w-full\"></div>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (hasPaymentIntents()) {\n    <div class=\"overflow-x-auto rounded-box bg-base-100\">\n      <table class=\"table table-zebra\">\n        <!-- head -->\n        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th>Amount</th>\n            <th>Payment Method</th>\n            <th>Status</th>\n            <th>Mode</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (paymentIntent of paymentIntentsTable(); track trackByPaymentIntentId(0, paymentIntent)) {\n            <tr>\n              <th>\n                <label>\n                  <input type=\"checkbox\" class=\"checkbox\" (change)=\"togglePaymentIntent($event, paymentIntent.id ?? '')\" [checked]=\"paymentIntent.selected\" />\n                </label>\n              </th>\n              <td>{{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</td>\n              <td>\n                @if (paymentIntent.paymentMethod) {\n                  <ngx-payment-method \n                    [paymentMethod]=\"paymentIntent.paymentMethod!\" \n                    mode=\"compact\">\n                  </ngx-payment-method>\n                } @else {\n                  <span class=\"badge badge-outline\">\n                    {{ paymentIntent.paymentMethodId }}\n                  </span>\n                }\n              </td>\n              <td>\n                <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                  {{ paymentIntent.status}}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? 'Live' : 'Test' }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\">\n                  Details\n                </button>\n                <lib-payment-intents-dialog \n                  [paymentIntent]=\"paymentIntent\" \n                  [dialogId]=\"'modal-' + paymentIntent.id\">\n                </lib-payment-intents-dialog>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No recent payment intents</h2>\n          <p class=\"text-gray-600\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }, { kind: "component", type: PaymentIntentsDialogComponent, selector: "lib-payment-intents-dialog", inputs: ["paymentIntent", "dialogId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-payment-intents-table', standalone: true, imports: [
-                        CommonModule
-                    ], template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n        @if (hasPaymentIntents()) {\n          <span class=\"badge badge-soft badge-info\">{{ paymentIntentsTable().length }} payment intents</span>\n        }\n      </div>\n      <div class=\"flex justify-end items-center gap-2\">\n        <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n          </svg>\n        Actualizar\n        </button>\n        <button class=\"btn btn-sm btn-primary\" [disabled]=\"!somePaymentIntentsSelected()\" (click)=\"exportSelectedPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M8.71 7.71L11 5.41V15a1 1 0 0 0 2 0V5.41l2.29 2.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4-4a1 1 0 0 0-.33-.21a1 1 0 0 0-.76 0a1 1 0 0 0-.33.21l-4 4a1 1 0 1 0 1.42 1.42M21 14a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1\"/></svg>\n          Export Selected\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overflow-x-auto\">\n      <div class=\"skeleton h-32 w-full\"></div>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (hasPaymentIntents()) {\n    <div class=\"overflow-x-auto rounded-box bg-base-100\">\n      <table class=\"table table-zebra\">\n        <!-- head -->\n        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th>Amount</th>\n            <th>Payment Method</th>\n            <th>Status</th>\n            <th>Mode</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (paymentIntent of paymentIntentsTable(); track trackByPaymentIntentId(0, paymentIntent)) {\n            <tr>\n              <th>\n                <label>\n                  <input type=\"checkbox\" class=\"checkbox\" (change)=\"togglePaymentIntent($event, paymentIntent.id ?? '')\" [checked]=\"paymentIntent.selected\" />\n                </label>\n              </th>\n              <td>{{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</td>\n              <td>\n                <span class=\"badge badge-outline\">\n                  {{ paymentIntent.paymentMethodId }}\n                </span>\n              </td>\n              <td>\n                <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                  {{ paymentIntent.status}}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? 'Live' : 'Test' }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\">\n                  Details\n                </button>\n                <dialog id=\"modal-{{ paymentIntent.id }}\" class=\"modal\">\n                  <div class=\"modal-box\">\n                    <h3 class=\"font-bold text-lg\">Payment Intent Details</h3>\n                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-4\">\n                      <div>\n                        <h4 class=\"text-md font-semibold mb-2\">Payment Details</h4>\n                        <ul class=\"space-y-1 text-sm\">\n                          <li><span class=\"font-medium\">Full ID:</span> {{ paymentIntent.id }}</li>\n                          <li><span class=\"font-medium\">Payment Method:</span> {{ paymentIntent.paymentMethodId }}</li>\n                          <li><span class=\"font-medium\">Confirmation Method:</span> {{ paymentIntent.confirmationMethod }}</li>\n                          @if (paymentIntent.invoiceId) {\n                            <li><span class=\"font-medium\">Invoice ID:</span> {{ paymentIntent.invoiceId }}</li>\n                          }\n                        </ul>\n                      </div>\n                      <div>\n                        <h4 class=\"text-md font-semibold mb-2\">Status Information</h4>\n                        <ul class=\"space-y-1 text-sm\">\n                          <li>\n                            <span class=\"font-medium\">Status: </span> \n                            <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                              {{ paymentIntent.status }}\n                            </span>\n                          </li>\n                          <li><span class=\"font-medium\">Mode: </span> {{ paymentIntent.liveMode ? 'Production' : 'Test' }}</li>\n                          <li><span class=\"font-medium\">Amount: </span> {{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</li>\n                        </ul>\n                      </div>\n                    </div>\n                    <div class=\"modal-action\">\n                      <form method=\"dialog\">\n                        <button class=\"btn\">Close</button>\n                      </form>\n                    </div>\n                  </div>\n                </dialog>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No recent payment intents</h2>\n          <p class=\"text-gray-600\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> " }]
+                        CommonModule,
+                        PaymentMethodComponent,
+                        PaymentIntentsDialogComponent
+                    ], template: "<div class=\"payment-intents-container\">\n  @if (withControls()) {\n    <div class=\"controls mb-4 flex justify-between items-center\">\n      <div class=\"stats\">\n        @if (hasPaymentIntents()) {\n          <span class=\"badge badge-soft badge-info\">{{ paymentIntentsTable().length }} payment intents</span>\n        }\n      </div>\n      <div class=\"flex justify-end items-center gap-2\">\n        <button class=\"btn btn-sm btn-outline\" (click)=\"refreshPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 mr-1\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" />\n          </svg>\n        Actualizar\n        </button>\n        <button class=\"btn btn-sm btn-primary\" [disabled]=\"!somePaymentIntentsSelected()\" (click)=\"exportSelectedPaymentIntents()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M8.71 7.71L11 5.41V15a1 1 0 0 0 2 0V5.41l2.29 2.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4-4a1 1 0 0 0-.33-.21a1 1 0 0 0-.76 0a1 1 0 0 0-.33.21l-4 4a1 1 0 1 0 1.42 1.42M21 14a1 1 0 0 0-1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-4a1 1 0 0 0-1-1\"/></svg>\n          Export Selected\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (loading()) {\n    <div class=\"overflow-x-auto\">\n      <div class=\"skeleton h-32 w-full\"></div>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-container\">\n      <div class=\"alert alert-error\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" /></svg>\n        <span>{{ error() }}</span>\n      </div>\n    </div>\n  } @else if (hasPaymentIntents()) {\n    <div class=\"overflow-x-auto rounded-box bg-base-100\">\n      <table class=\"table table-zebra\">\n        <!-- head -->\n        <thead>\n          <tr>\n            <th>\n              <label>\n                <input type=\"checkbox\" class=\"checkbox\" (change)=\"toggleAllPaymentIntents($event)\" [checked]=\"allPaymentIntentsSelected()\" />\n              </label>\n            </th>\n            <th>Amount</th>\n            <th>Payment Method</th>\n            <th>Status</th>\n            <th>Mode</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (paymentIntent of paymentIntentsTable(); track trackByPaymentIntentId(0, paymentIntent)) {\n            <tr>\n              <th>\n                <label>\n                  <input type=\"checkbox\" class=\"checkbox\" (change)=\"togglePaymentIntent($event, paymentIntent.id ?? '')\" [checked]=\"paymentIntent.selected\" />\n                </label>\n              </th>\n              <td>{{ utils.formatAmount(paymentIntent.amount ?? 0, paymentIntent.currency ?? 'EUR') }}</td>\n              <td>\n                @if (paymentIntent.paymentMethod) {\n                  <ngx-payment-method \n                    [paymentMethod]=\"paymentIntent.paymentMethod!\" \n                    mode=\"compact\">\n                  </ngx-payment-method>\n                } @else {\n                  <span class=\"badge badge-outline\">\n                    {{ paymentIntent.paymentMethodId }}\n                  </span>\n                }\n              </td>\n              <td>\n                <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(paymentIntent.status) }}\">\n                  {{ paymentIntent.status}}\n                </span>\n              </td>\n              <td>{{ paymentIntent.liveMode ? 'Live' : 'Test' }}</td>\n              <td>\n                <button class=\"btn btn-xs btn-ghost\" (click)=\"showDetails(paymentIntent.id ?? '')\">\n                  Details\n                </button>\n                <lib-payment-intents-dialog \n                  [paymentIntent]=\"paymentIntent\" \n                  [dialogId]=\"'modal-' + paymentIntent.id\">\n                </lib-payment-intents-dialog>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"empty-state\">\n      <div class=\"card bg-base-100 shadow-sm\">\n        <div class=\"card-body items-center text-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-12 w-12 text-gray-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n          </svg>\n          <h2 class=\"card-title text-xl\">No recent payment intents</h2>\n          <p class=\"text-gray-600\">No payment intents found in your history.</p>\n        </div>\n      </div>\n    </div>\n  }\n</div> " }]
         }] });
 
 class SubscriptionItemSkeletonComponent {
@@ -1425,75 +1767,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             args: [{ selector: 'lib-subscription-item-skeleton', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-sm\">\n  <div class=\"card-body p-4\">\n    <div class=\"flex justify-between\">\n      <div>\n        <div class=\"flex items-center gap-2\">\n          <div class=\"skeleton h-6 w-32\"></div>\n          <div class=\"skeleton h-5 w-20\"></div>\n        </div>\n        <div class=\"skeleton h-4 w-48 mt-2\"></div>\n      </div>\n      \n      <div class=\"flex gap-2\">\n        <div class=\"skeleton h-8 w-20\"></div>\n      </div>\n    </div>\n\n    <div class=\"mt-2\">\n      <div class=\"flex justify-between text-sm\">\n        <div class=\"skeleton h-4 w-32\"></div>\n        <div class=\"skeleton h-4 w-32\"></div>\n      </div>\n    </div>\n\n    <!--<div class=\"mt-4 border-t pt-4\">\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div>\n          <div class=\"skeleton h-5 w-24 mb-2\"></div>\n          <div class=\"space-y-1\">\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-3/4\"></div>\n          </div>\n        </div>\n        \n        <div>\n          <div class=\"skeleton h-5 w-24 mb-2\"></div>\n          <div class=\"space-y-1\">\n            <div class=\"skeleton h-4 w-full\"></div>\n            <div class=\"skeleton h-4 w-3/4\"></div>\n          </div>\n        </div>\n      </div>\n      \n      <div class=\"card-actions mt-4 justify-end\">\n        <div class=\"skeleton h-8 w-32\"></div>\n      </div>\n    </div>-->\n  </div>\n</div>" }]
         }] });
 
-const initialPortalState = {
-    status: 'idle',
-    error: null,
-    portalUrl: null
-};
-const PortalAccountStore = signalStore({ providedIn: 'root' }, withState(initialPortalState), withComputed((state) => ({
-    isStatusIdle: computed(() => state.status() === 'idle'),
-    isStatusLoading: computed(() => state.status() === 'loading'),
-    isStatusSuccess: computed(() => state.status() === 'success'),
-    isStatusError: computed(() => state.status() === 'error'),
-})), withMethods((store, stripeService = inject(StripeClientService)) => ({
-    /**
-     * Creates a customer portal session and redirects to the URL
-     * @param customerId Stripe customer ID
-     * @param returnUrl URL to redirect to after the portal session
-     */
-    async createPortalSession(customerId, returnUrl) {
-        patchState(store, { status: 'loading', error: null, portalUrl: null });
-        try {
-            const { url, error } = await stripeService.createPortalSession(customerId, returnUrl);
-            if (error) {
-                throw new Error(error.message);
-            }
-            if (!url) {
-                throw new Error('No se pudo crear la sesión del portal');
-            }
-            patchState(store, {
-                status: 'success',
-                portalUrl: url
-            });
-            window.location.href = url;
-        }
-        catch (error) {
-            console.error('🚨 [PortalAccountStore]', error);
-            const errorMessage = error instanceof Error ? error.message : 'Error desconocido';
-            patchState(store, {
-                status: 'error',
-                error: errorMessage
-            });
-        }
-    },
-    /**
-     * Resets the store to initial state
-     */
-    reset() {
-        patchState(store, initialPortalState);
-    }
-})));
-
 class SubscriptionItemComponent {
     subscriptionsStore = inject(SubscriptionsStore);
     portalAccountStore = inject(PortalAccountStore);
     utils = inject(UtilsService);
+    sanitizer = inject(DomSanitizer);
     subscription = input.required();
     onManageSubscription = output();
     isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading());
+    productImage = computed(() => {
+        return this.subscription().product?.images?.[0] || 'https://img.daisyui.com/images/profile/demo/yellingcat@192.webp';
+    });
     isExpanded = false;
     toggleExpand() {
         this.isExpanded = !this.isExpanded;
     }
-    async manageSubscription() {
+    manageSubscription() {
         this.onManageSubscription.emit(this.subscription().customer ?? '');
     }
+    sanitizeImageUrl(imageUrl) {
+        return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SubscriptionItemComponent, isStandalone: true, selector: "lib-subscription-item", inputs: { subscription: { classPropertyName: "subscription", publicName: "subscription", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-shadow duration-200\">\n  <div class=\"card-body p-4\">\n    <div class=\"flex justify-between\">\n      <div>\n        <h3 class=\"card-title text-lg\">\n          customer: {{ subscription().customer }}\n          \n          <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(subscription().status) }} status-badge\">\n            {{ subscription().status }}\n          </span>\n\n          @if (subscription().cancel.cancel_at_period_end) {\n            <span class=\"badge badge-soft badge-warning ml-2\">Cancelada al final del periodo</span>\n          }\n        </h3>\n        <p class=\"text-gray-600 text-sm\">\n          ID: {{ subscription().id }}\n        </p>\n      </div>\n      \n      <div class=\"flex gap-2\">\n        <button class=\"btn btn-sm btn-ghost\" (click)=\"toggleExpand()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n          {{ isExpanded ? 'Ocultar' : 'Detalles' }}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"subscription-details mt-2\">\n      <div class=\"flex justify-between text-sm\">\n        <div>\n          <span class=\"font-medium\">Precio: </span><span class=\"text-xl font-bold text-secondary-content\">{{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}</span>\n        </div>\n        <div>\n          <span class=\"font-medium\">Per\u00EDodo: </span><span class=\"text-md font-bold\">{{ subscription().plan.interval }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded) {\n      <div class=\"subscription-expanded mt-4 border-t pt-4\">\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div>\n            <h4 class=\"text-md font-semibold mb-2\">Detalles del Plan</h4>\n            <ul class=\"space-y-1 text-sm\">\n              <li><span class=\"font-medium\">Inicio:</span> {{ utils.formatDate(subscription().current_period_start ?? '') }}</li>\n              <li><span class=\"font-medium\">Renovaci\u00F3n:</span> {{ utils.formatDate(subscription().current_period_end ?? '') }}</li>\n            </ul>\n          </div>\n          \n          @if (subscription().cancel.cancel_at_period_end) {\n            <div>\n              <h4 class=\"text-md font-semibold mb-2\">Detalles de la Cancelaci\u00F3n</h4>\n              <ul class=\"space-y-1 text-sm\">\n                <li><span class=\"font-medium\">Cancelado el: </span> {{ subscription().cancel.canceled_at * 1000 | date:'dd/MM/yyyy' }}</li>\n                <li><span class=\"font-medium\">No se renovar\u00E1 el: </span> {{ subscription().cancel.cancel_at * 1000 | date:'dd/MM/yyyy' }}</li>\n                <li><span class=\"font-medium\">Feedback: </span> {{ subscription().cancel.cancellation_details.feedback }}</li>\n                <li><span class=\"font-medium\">Comentario: </span> {{ subscription().cancel.cancellation_details.comment }}</li>\n              </ul>\n            </div>\n          }\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"card-actions mt-4 justify-end\">\n          <button class=\"btn btn-sm btn-secondary\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n            @if (isStatusLoading()) {\n              <span class=\"loading loading-spinner\"></span>\n              loading account\n            } @else {\n              Manage subscription\n            }\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SubscriptionItemComponent, isStandalone: true, selector: "lib-subscription-item", inputs: { subscription: { classPropertyName: "subscription", publicName: "subscription", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "<div class=\"card bg-gradient-to-br from-primary/10 to-secondary/10 shadow-lg hover:shadow-xl transition-all duration-300 border border-base-300\">\n  <div class=\"card-body p-6\">\n    <!-- Header con t\u00EDtulo y precio -->\n    <div class=\"flex justify-between items-start mb-4\">\n      <div class=\"flex items-center gap-3\">\n        <!-- Imagen de la suscripci\u00F3n -->\n        <div class=\"avatar\">\n          <div class=\"w-24 rounded\">\n            <img [src]=\"sanitizeImageUrl(productImage())\" \n              [alt]=\"subscription().product?.name || 'Subscription product'\"\n              class=\"w-full h-full object-cover rounded-lg\" />\n          </div>\n        </div>  \n        \n        <div>\n          <h3 class=\"text-2xl font-bold text-base-content\">\n            {{ subscription().product?.name || 'Subscription Plan' }}\n          </h3>\n          <div class=\"flex items-center gap-2 mt-1\">\n            <span class=\"badge {{ utils.getStatusBadgeClass(subscription().status) }} badge-lg\">\n              {{ subscription().status }}\n            </span>\n            @if (subscription().cancel.cancel_at_period_end) {\n              <span class=\"badge badge-warning badge-lg\">Cancelada</span>\n            }\n          </div>\n        </div>\n      </div>\n      \n      <!-- Precio principal -->\n      <div class=\"text-right\">\n        <div class=\"text-4xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-lg capitalize\">\n          {{ subscription().plan.interval }}ly\n        </div>\n      </div>\n    </div>\n\n    <!-- Fechas de per\u00EDodo -->\n    <div class=\"flex justify-between items-center py-4 border-t border-base-300\">\n      <div class=\"text-left\">\n        <div class=\"text-base-content/70 text-sm font-medium\">Start:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_start ?? '') }}\n        </div>\n      </div>\n      \n      <div class=\"text-right\">\n        <div class=\"text-base-content/70 text-sm font-medium\">End:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_end ?? '') }}\n        </div>\n      </div>\n    </div>\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n        @if (isStatusLoading()) {\n          <span class=\"loading loading-spinner loading-sm\"></span>\n          Cargando...\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" />\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n          </svg>\n          Gestionar Suscripci\u00F3n\n        }\n      </button>\n    </div>\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SubscriptionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-subscription-item', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-shadow duration-200\">\n  <div class=\"card-body p-4\">\n    <div class=\"flex justify-between\">\n      <div>\n        <h3 class=\"card-title text-lg\">\n          customer: {{ subscription().customer }}\n          \n          <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(subscription().status) }} status-badge\">\n            {{ subscription().status }}\n          </span>\n\n          @if (subscription().cancel.cancel_at_period_end) {\n            <span class=\"badge badge-soft badge-warning ml-2\">Cancelada al final del periodo</span>\n          }\n        </h3>\n        <p class=\"text-gray-600 text-sm\">\n          ID: {{ subscription().id }}\n        </p>\n      </div>\n      \n      <div class=\"flex gap-2\">\n        <button class=\"btn btn-sm btn-ghost\" (click)=\"toggleExpand()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n          {{ isExpanded ? 'Ocultar' : 'Detalles' }}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"subscription-details mt-2\">\n      <div class=\"flex justify-between text-sm\">\n        <div>\n          <span class=\"font-medium\">Precio: </span><span class=\"text-xl font-bold text-secondary-content\">{{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}</span>\n        </div>\n        <div>\n          <span class=\"font-medium\">Per\u00EDodo: </span><span class=\"text-md font-bold\">{{ subscription().plan.interval }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded) {\n      <div class=\"subscription-expanded mt-4 border-t pt-4\">\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div>\n            <h4 class=\"text-md font-semibold mb-2\">Detalles del Plan</h4>\n            <ul class=\"space-y-1 text-sm\">\n              <li><span class=\"font-medium\">Inicio:</span> {{ utils.formatDate(subscription().current_period_start ?? '') }}</li>\n              <li><span class=\"font-medium\">Renovaci\u00F3n:</span> {{ utils.formatDate(subscription().current_period_end ?? '') }}</li>\n            </ul>\n          </div>\n          \n          @if (subscription().cancel.cancel_at_period_end) {\n            <div>\n              <h4 class=\"text-md font-semibold mb-2\">Detalles de la Cancelaci\u00F3n</h4>\n              <ul class=\"space-y-1 text-sm\">\n                <li><span class=\"font-medium\">Cancelado el: </span> {{ subscription().cancel.canceled_at * 1000 | date:'dd/MM/yyyy' }}</li>\n                <li><span class=\"font-medium\">No se renovar\u00E1 el: </span> {{ subscription().cancel.cancel_at * 1000 | date:'dd/MM/yyyy' }}</li>\n                <li><span class=\"font-medium\">Feedback: </span> {{ subscription().cancel.cancellation_details.feedback }}</li>\n                <li><span class=\"font-medium\">Comentario: </span> {{ subscription().cancel.cancellation_details.comment }}</li>\n              </ul>\n            </div>\n          }\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"card-actions mt-4 justify-end\">\n          <button class=\"btn btn-sm btn-secondary\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n            @if (isStatusLoading()) {\n              <span class=\"loading loading-spinner\"></span>\n              loading account\n            } @else {\n              Manage subscription\n            }\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div> " }]
+            args: [{ selector: 'lib-subscription-item', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-gradient-to-br from-primary/10 to-secondary/10 shadow-lg hover:shadow-xl transition-all duration-300 border border-base-300\">\n  <div class=\"card-body p-6\">\n    <!-- Header con t\u00EDtulo y precio -->\n    <div class=\"flex justify-between items-start mb-4\">\n      <div class=\"flex items-center gap-3\">\n        <!-- Imagen de la suscripci\u00F3n -->\n        <div class=\"avatar\">\n          <div class=\"w-24 rounded\">\n            <img [src]=\"sanitizeImageUrl(productImage())\" \n              [alt]=\"subscription().product?.name || 'Subscription product'\"\n              class=\"w-full h-full object-cover rounded-lg\" />\n          </div>\n        </div>  \n        \n        <div>\n          <h3 class=\"text-2xl font-bold text-base-content\">\n            {{ subscription().product?.name || 'Subscription Plan' }}\n          </h3>\n          <div class=\"flex items-center gap-2 mt-1\">\n            <span class=\"badge {{ utils.getStatusBadgeClass(subscription().status) }} badge-lg\">\n              {{ subscription().status }}\n            </span>\n            @if (subscription().cancel.cancel_at_period_end) {\n              <span class=\"badge badge-warning badge-lg\">Cancelada</span>\n            }\n          </div>\n        </div>\n      </div>\n      \n      <!-- Precio principal -->\n      <div class=\"text-right\">\n        <div class=\"text-4xl font-bold text-primary\">\n          {{ utils.formatAmount(subscription().plan.amount, subscription().currency ?? 'EUR') }}\n        </div>\n        <div class=\"text-base-content/70 text-lg capitalize\">\n          {{ subscription().plan.interval }}ly\n        </div>\n      </div>\n    </div>\n\n    <!-- Fechas de per\u00EDodo -->\n    <div class=\"flex justify-between items-center py-4 border-t border-base-300\">\n      <div class=\"text-left\">\n        <div class=\"text-base-content/70 text-sm font-medium\">Start:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_start ?? '') }}\n        </div>\n      </div>\n      \n      <div class=\"text-right\">\n        <div class=\"text-base-content/70 text-sm font-medium\">End:</div>\n        <div class=\"text-base-content font-semibold\">\n          {{ utils.formatDate(subscription().current_period_end ?? '') }}\n        </div>\n      </div>\n    </div>\n    <div class=\"flex justify-end w-full\">\n      <button class=\"btn btn-primary\" [disabled]=\"isStatusLoading()\" (click)=\"manageSubscription()\">\n        @if (isStatusLoading()) {\n          <span class=\"loading loading-spinner loading-sm\"></span>\n          Cargando...\n        } @else {\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\" />\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" />\n          </svg>\n          Gestionar Suscripci\u00F3n\n        }\n      </button>\n    </div>\n  </div>\n</div> " }]
         }] });
 
 class SubscriptionsListComponent {
@@ -1569,11 +1869,11 @@ class PaymentIntentItemComponent {
         this.isExpanded.update(value => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentItemComponent, isStandalone: true, selector: "lib-payment-intent-item", inputs: { paymentIntent: { classPropertyName: "paymentIntent", publicName: "paymentIntent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-shadow duration-200 card-hover\">\n  <div class=\"card-body p-4\">\n    <div class=\"flex justify-between\">\n      <div>\n        <h3 class=\"card-title text-lg\">\n          Customer: {{ paymentIntent().customer }}\n        </h3>\n      </div>\n      \n      <div class=\"flex gap-2\">\n        <button class=\"btn btn-sm btn-ghost\" (click)=\"toggleExpand()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n          {{ isExpanded() ? 'Ocultar' : 'Detalles' }}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"payment-intent-details mt-2\">\n      <div class=\"flex justify-start items-center gap-4 text-sm\">\n        <div>\n          <span class=\"font-medium\">Precio: </span><span class=\"text-xl font-bold text-base-content\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</span>\n        </div>\n        <div>\n          <span class=\"badge badge-outline\">\n            {{ paymentIntent().paymentMethodId }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded()) {\n      <div class=\"payment-expanded mt-4 border-t pt-4\">\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div>\n            <h4 class=\"text-md font-semibold mb-2\">Detalles del Pago</h4>\n            <ul class=\"space-y-1 text-sm\">\n              <li><span class=\"font-medium\">ID Completo:</span> {{ paymentIntent().id }}</li>\n              <li><span class=\"font-medium\">M\u00E9todo de pago:</span> {{ paymentIntent().paymentMethodId }}</li>\n              <li><span class=\"font-medium\">M\u00E9todo de confirmaci\u00F3n:</span> {{ paymentIntent().confirmationMethod }}</li>\n              @if (paymentIntent().invoiceId) {\n                <li><span class=\"font-medium\">ID de factura:</span> {{ paymentIntent().invoiceId }}</li>\n              }\n            </ul>\n          </div>\n          \n          <div>\n            <ul class=\"space-y-1 text-sm\">\n              <li>\n                <span class=\"font-medium\">Estado: </span> \n                <span class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }} status-badge\">\n                  {{ paymentIntent().status }}\n                </span>\n              </li>\n              <li><span class=\"font-medium\">Modo: </span> {{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: PaymentIntentItemComponent, isStandalone: true, selector: "lib-payment-intent-item", inputs: { paymentIntent: { classPropertyName: "paymentIntent", publicName: "paymentIntent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-all duration-200 border border-base-200\">\n  <div class=\"card-body p-4\">\n    \n    <!-- Header Section -->\n    <div class=\"flex justify-between items-start mb-3\">\n      <div class=\"flex-1\">\n        <div class=\"flex items-center gap-2 mb-1\">\n          <div class=\"text-2xl font-bold text-primary\">\n            {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n          </div>\n          <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }} badge-sm\">\n            {{ paymentIntent().status }}\n          </div>\n          @if (!paymentIntent().liveMode) {\n            <div class=\"badge badge-warning badge-sm\">TEST</div>\n          }\n        </div>\n      </div>\n      \n      <button \n        class=\"btn btn-sm btn-ghost btn-circle\" \n        (click)=\"toggleExpand()\"\n        [class.rotate-180]=\"isExpanded()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 transition-transform duration-200\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Main Info Section -->\n    <div class=\"space-y-2\">\n      <!-- Payment Method -->\n      @if (paymentIntent().paymentMethod) {\n        <ngx-payment-method \n          [paymentMethod]=\"paymentIntent().paymentMethod!\" \n          mode=\"compact\">\n        </ngx-payment-method>\n      } @else {\n        <div class=\"flex items-center gap-2 p-2 bg-base-200 rounded-lg\">\n          <div class=\"w-8 h-8 bg-base-300 rounded-full flex items-center justify-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n          </div>\n          <div>\n            <div class=\"font-medium text-sm\">M\u00E9todo de pago</div>\n            <div class=\"text-xs text-base-content/70\">\u2022\u2022\u2022\u2022 {{ paymentIntent().paymentMethodId.slice(-4) }}</div>\n          </div>\n        </div>\n      }\n\n      <!-- Confirmation Method -->\n      <div class=\"flex items-center gap-2 text-sm\">\n        <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n        <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n        <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded()) {\n      <div class=\"divider my-4\"></div>\n      \n      <div class=\"space-y-4\">\n        <!-- Transaction Details -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            Detalles de la Transacci\u00F3n\n          </h4>\n          \n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Estado</div>\n              <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n              <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n            </div>\n            \n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Monto</div>\n              <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n              <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Payment Information -->\n        @if (paymentIntent().paymentMethod) {\n          <div>\n            <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n              </svg>\n              Informaci\u00F3n del Pago\n            </h4>\n            \n            <ngx-payment-method \n              [paymentMethod]=\"paymentIntent().paymentMethod!\" \n              mode=\"detailed\">\n            </ngx-payment-method>\n          </div>\n        }\n\n        <!-- Additional Information -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n            </svg>\n            Informaci\u00F3n Adicional\n          </h4>\n          \n          <div class=\"space-y-2\">\n            @if (paymentIntent().invoiceId) {\n              <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n                <span class=\"text-sm text-base-content/70\">Factura</span>\n                <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n              </div>\n            }\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Entorno</span>\n              <span class=\"text-sm\">\n                @if (paymentIntent().liveMode) {\n                  <span class=\"text-success\">Producci\u00F3n</span>\n                } @else {\n                  <span class=\"text-warning\">Pruebas</span>\n                }\n              </span>\n            </div>\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Referencia</span>\n              <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentMethodComponent, selector: "ngx-payment-method", inputs: ["paymentMethod", "mode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PaymentIntentItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-payment-intent-item', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-shadow duration-200 card-hover\">\n  <div class=\"card-body p-4\">\n    <div class=\"flex justify-between\">\n      <div>\n        <h3 class=\"card-title text-lg\">\n          Customer: {{ paymentIntent().customer }}\n        </h3>\n      </div>\n      \n      <div class=\"flex gap-2\">\n        <button class=\"btn btn-sm btn-ghost\" (click)=\"toggleExpand()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n          {{ isExpanded() ? 'Ocultar' : 'Detalles' }}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"payment-intent-details mt-2\">\n      <div class=\"flex justify-start items-center gap-4 text-sm\">\n        <div>\n          <span class=\"font-medium\">Precio: </span><span class=\"text-xl font-bold text-base-content\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</span>\n        </div>\n        <div>\n          <span class=\"badge badge-outline\">\n            {{ paymentIntent().paymentMethodId }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded()) {\n      <div class=\"payment-expanded mt-4 border-t pt-4\">\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div>\n            <h4 class=\"text-md font-semibold mb-2\">Detalles del Pago</h4>\n            <ul class=\"space-y-1 text-sm\">\n              <li><span class=\"font-medium\">ID Completo:</span> {{ paymentIntent().id }}</li>\n              <li><span class=\"font-medium\">M\u00E9todo de pago:</span> {{ paymentIntent().paymentMethodId }}</li>\n              <li><span class=\"font-medium\">M\u00E9todo de confirmaci\u00F3n:</span> {{ paymentIntent().confirmationMethod }}</li>\n              @if (paymentIntent().invoiceId) {\n                <li><span class=\"font-medium\">ID de factura:</span> {{ paymentIntent().invoiceId }}</li>\n              }\n            </ul>\n          </div>\n          \n          <div>\n            <ul class=\"space-y-1 text-sm\">\n              <li>\n                <span class=\"font-medium\">Estado: </span> \n                <span class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }} status-badge\">\n                  {{ paymentIntent().status }}\n                </span>\n              </li>\n              <li><span class=\"font-medium\">Modo: </span> {{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div> " }]
+            args: [{ selector: 'lib-payment-intent-item', standalone: true, imports: [CommonModule, PaymentMethodComponent], template: "<div class=\"card bg-base-100 shadow-sm hover:shadow-md transition-all duration-200 border border-base-200\">\n  <div class=\"card-body p-4\">\n    \n    <!-- Header Section -->\n    <div class=\"flex justify-between items-start mb-3\">\n      <div class=\"flex-1\">\n        <div class=\"flex items-center gap-2 mb-1\">\n          <div class=\"text-2xl font-bold text-primary\">\n            {{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}\n          </div>\n          <div class=\"badge {{ utils.getStatusBadgeClass(paymentIntent().status) }} badge-sm\">\n            {{ paymentIntent().status }}\n          </div>\n          @if (!paymentIntent().liveMode) {\n            <div class=\"badge badge-warning badge-sm\">TEST</div>\n          }\n        </div>\n      </div>\n      \n      <button \n        class=\"btn btn-sm btn-ghost btn-circle\" \n        (click)=\"toggleExpand()\"\n        [class.rotate-180]=\"isExpanded()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4 transition-transform duration-200\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Main Info Section -->\n    <div class=\"space-y-2\">\n      <!-- Payment Method -->\n      @if (paymentIntent().paymentMethod) {\n        <ngx-payment-method \n          [paymentMethod]=\"paymentIntent().paymentMethod!\" \n          mode=\"compact\">\n        </ngx-payment-method>\n      } @else {\n        <div class=\"flex items-center gap-2 p-2 bg-base-200 rounded-lg\">\n          <div class=\"w-8 h-8 bg-base-300 rounded-full flex items-center justify-center\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n            </svg>\n          </div>\n          <div>\n            <div class=\"font-medium text-sm\">M\u00E9todo de pago</div>\n            <div class=\"text-xs text-base-content/70\">\u2022\u2022\u2022\u2022 {{ paymentIntent().paymentMethodId.slice(-4) }}</div>\n          </div>\n        </div>\n      }\n\n      <!-- Confirmation Method -->\n      <div class=\"flex items-center gap-2 text-sm\">\n        <div class=\"w-2 h-2 bg-success rounded-full\"></div>\n        <span class=\"text-base-content/70\">Confirmaci\u00F3n:</span>\n        <span class=\"capitalize font-medium\">{{ paymentIntent().confirmationMethod.replace('_', ' ') }}</span>\n      </div>\n    </div>\n\n    <!-- Expanded Details -->\n    @if (isExpanded()) {\n      <div class=\"divider my-4\"></div>\n      \n      <div class=\"space-y-4\">\n        <!-- Transaction Details -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n            </svg>\n            Detalles de la Transacci\u00F3n\n          </h4>\n          \n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Estado</div>\n              <div class=\"stat-value text-sm capitalize\">{{ paymentIntent().status }}</div>\n              <div class=\"stat-desc\">{{ paymentIntent().liveMode ? 'Producci\u00F3n' : 'Pruebas' }}</div>\n            </div>\n            \n            <div class=\"stat bg-base-200 rounded-lg p-3\">\n              <div class=\"stat-title text-xs\">Monto</div>\n              <div class=\"stat-value text-sm\">{{ utils.formatAmount(paymentIntent().amount ?? 0, paymentIntent().currency ?? 'EUR') }}</div>\n              <div class=\"stat-desc\">{{ (paymentIntent().currency ?? 'EUR').toUpperCase() }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Payment Information -->\n        @if (paymentIntent().paymentMethod) {\n          <div>\n            <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\" />\n              </svg>\n              Informaci\u00F3n del Pago\n            </h4>\n            \n            <ngx-payment-method \n              [paymentMethod]=\"paymentIntent().paymentMethod!\" \n              mode=\"detailed\">\n            </ngx-payment-method>\n          </div>\n        }\n\n        <!-- Additional Information -->\n        <div>\n          <h4 class=\"text-sm font-semibold text-base-content/80 mb-3 flex items-center gap-2\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n            </svg>\n            Informaci\u00F3n Adicional\n          </h4>\n          \n          <div class=\"space-y-2\">\n            @if (paymentIntent().invoiceId) {\n              <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n                <span class=\"text-sm text-base-content/70\">Factura</span>\n                <span class=\"text-sm font-mono\">{{ paymentIntent().invoiceId.slice(-8) }}</span>\n              </div>\n            }\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Entorno</span>\n              <span class=\"text-sm\">\n                @if (paymentIntent().liveMode) {\n                  <span class=\"text-success\">Producci\u00F3n</span>\n                } @else {\n                  <span class=\"text-warning\">Pruebas</span>\n                }\n              </span>\n            </div>\n            \n            <div class=\"flex items-center justify-between p-2 bg-base-200 rounded\">\n              <span class=\"text-sm text-base-content/70\">Referencia</span>\n              <span class=\"text-sm font-mono\">\u2022\u2022\u2022{{ paymentIntent().id?.slice(-6) || 'N/A' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n</div> " }]
         }] });
 
 class PaymentIntentsListComponent {
@@ -1654,5 +1954,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutStore, CustomerDashboardComponent, CustomerStore, EmbeddedCheckoutComponent, EmbeddedSubscriptionComponent, PaymentIntentsListComponent, PaymentIntentsTableComponent, ProductListComponent, ProductsStore, ReturnPageComponent, STRIPE_CONFIG, SUPABASE_CONFIG, StripeClientService, SubscriptionCardComponent, SubscriptionReturnPageComponent, SubscriptionsListComponent, SubscriptionsStore, SupabaseClientService, parsePaymentIntent, parseProduct, parseSubscription, provideNgxSupabaseStripeConfig, provideStripeConfig, provideSupabaseConfig };
+export { CheckoutStore, Currency, CustomerDashboardComponent, CustomerStore, EmbeddedCheckoutComponent, EmbeddedSubscriptionComponent, PaymentIntentsListComponent, PaymentIntentsTableComponent, PortalAccountStore, ProductListComponent, ProductsStore, ReturnPageComponent, STRIPE_CONFIG, SUPABASE_CONFIG, StripeClientService, SubscriptionCardComponent, SubscriptionReturnPageComponent, SubscriptionsListComponent, SubscriptionsStore, SupabaseClientService, parsePaymentIntent, parseProduct, parseSubscription, provideNgxSupabaseStripeConfig, provideStripeConfig, provideSupabaseConfig };
 //# sourceMappingURL=dotted-labs-ngx-supabase-stripe.mjs.map