@dotted-labs/ngx-supabase-stripe 0.3.2 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dotted-labs-ngx-supabase-stripe.mjs +174 -165
- package/fesm2022/dotted-labs-ngx-supabase-stripe.mjs.map +1 -1
- package/package.json +6 -6
- package/types/dotted-labs-ngx-supabase-stripe.d.ts +2709 -0
- package/database.types.d.ts +0 -535
- package/index.d.ts +0 -5
- package/lib/components/customer/payment-intents/payment-intents-dialog/payment-intents-dialog.component.d.ts +0 -10
- package/lib/components/customer/payment-intents/payment-intents-list/payment-intents-item/payment-intent-item.component.d.ts +0 -11
- package/lib/components/customer/payment-intents/payment-intents-list/payment-intents-item-skeleton/payment-intent-item-skeleton.component.d.ts +0 -5
- package/lib/components/customer/payment-intents/payment-intents-list/payment-intents-list.component.d.ts +0 -13
- package/lib/components/customer/payment-intents/payment-intents-table/payment-intents-table.component.d.ts +0 -37
- package/lib/components/customer/payment-method/payment-method.component.d.ts +0 -18
- package/lib/components/customer/subscriptions/subscription-card/subscription-card-skeleton/subscription-card-skeleton.component.d.ts +0 -5
- package/lib/components/customer/subscriptions/subscription-card/subscription-card.component.d.ts +0 -19
- package/lib/components/customer/subscriptions/subscriptions-list/subscription-item/subscription-item.component.d.ts +0 -59
- package/lib/components/customer/subscriptions/subscriptions-list/subscription-item-skeleton/subscription-item-skeleton.component.d.ts +0 -5
- package/lib/components/customer/subscriptions/subscriptions-list/subscriptions-list.component.d.ts +0 -12
- package/lib/components/customer/subscriptions/subscriptions.component.d.ts +0 -87
- package/lib/components/embedded-checkout/embedded-checkout.component.d.ts +0 -106
- package/lib/components/embedded-checkout/return-page/return-page.component.d.ts +0 -42
- package/lib/components/embedded-skeleton/embedded-skeleton.component.d.ts +0 -5
- package/lib/components/embedded-subscription/embedded-subscription.component.d.ts +0 -102
- package/lib/components/embedded-subscription/return-page/subscription-return-page.component.d.ts +0 -69
- package/lib/components/product-item-button/product-item-button.component.d.ts +0 -24
- package/lib/components/product-list/product-item/product-item.component.d.ts +0 -20
- package/lib/components/product-list/product-item-skeleton/product-item-skeleton.component.d.ts +0 -5
- package/lib/components/product-list/product-list.component.d.ts +0 -39
- package/lib/config/ngx-supabase-stripe.config.d.ts +0 -13
- package/lib/config/stripe.config.d.ts +0 -17
- package/lib/config/supabase.config.d.ts +0 -25
- package/lib/directives/brand-icon.directive.d.ts +0 -11
- package/lib/directives/brand-name.directive.d.ts +0 -11
- package/lib/directives/payment-method-type.directive.d.ts +0 -11
- package/lib/models/currency.model.d.ts +0 -9
- package/lib/models/database.model.d.ts +0 -20
- package/lib/pages/customer/customer.component.d.ts +0 -76
- package/lib/services/stripe-client.service.d.ts +0 -123
- package/lib/services/supabase-client.service.d.ts +0 -1250
- package/lib/services/utils.service.d.ts +0 -8
- package/lib/store/checkout.store.d.ts +0 -33
- package/lib/store/customer.store.d.ts +0 -98
- package/lib/store/portal-account.store.d.ts +0 -24
- package/lib/store/products.store.d.ts +0 -38
- package/lib/store/subscriptions.store.d.ts +0 -60
- package/public-api.d.ts +0 -24
|
@@ -305,10 +305,10 @@ class SupabaseClientService {
|
|
|
305
305
|
return { data: null, error: error };
|
|
306
306
|
}
|
|
307
307
|
}
|
|
308
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
309
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
308
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SupabaseClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
309
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SupabaseClientService, providedIn: 'root' });
|
|
310
310
|
}
|
|
311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SupabaseClientService, decorators: [{
|
|
312
312
|
type: Injectable,
|
|
313
313
|
args: [{
|
|
314
314
|
providedIn: 'root'
|
|
@@ -333,6 +333,7 @@ class StripeClientService {
|
|
|
333
333
|
/**
|
|
334
334
|
* Initialize the embedded checkout
|
|
335
335
|
* @param clientSecret The client secret for the checkout session
|
|
336
|
+
* @see https://docs.stripe.com/js/embedded_checkout/init - v8 supports optional appearance, defaultValues, etc.
|
|
336
337
|
*/
|
|
337
338
|
async initEmbeddedCheckout(clientSecret) {
|
|
338
339
|
const stripe = await this.getStripe();
|
|
@@ -349,12 +350,20 @@ class StripeClientService {
|
|
|
349
350
|
}
|
|
350
351
|
/**
|
|
351
352
|
* Destroy the embedded checkout
|
|
353
|
+
* Wrapped in try/catch to handle multiple destroy() calls (stripe-js throws IntegrationError when instance already destroyed)
|
|
352
354
|
*/
|
|
353
355
|
destroyEmbeddedCheckout() {
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
356
|
+
if (!this.embeddedCheckout)
|
|
357
|
+
return;
|
|
358
|
+
try {
|
|
359
|
+
this.embeddedCheckout.destroy();
|
|
360
|
+
}
|
|
361
|
+
catch {
|
|
362
|
+
// Already destroyed or error - ignore silently
|
|
363
|
+
}
|
|
364
|
+
finally {
|
|
365
|
+
this.embeddedCheckout = null;
|
|
366
|
+
}
|
|
358
367
|
}
|
|
359
368
|
/**
|
|
360
369
|
* Create a checkout session
|
|
@@ -607,10 +616,10 @@ class StripeClientService {
|
|
|
607
616
|
return { paymentMethod: null, error: error };
|
|
608
617
|
}
|
|
609
618
|
}
|
|
610
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
611
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
619
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
620
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, providedIn: 'root' });
|
|
612
621
|
}
|
|
613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
622
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, decorators: [{
|
|
614
623
|
type: Injectable,
|
|
615
624
|
args: [{
|
|
616
625
|
providedIn: 'root',
|
|
@@ -1300,10 +1309,10 @@ const PortalAccountStore = signalStore({ providedIn: 'root' }, withState(initial
|
|
|
1300
1309
|
})));
|
|
1301
1310
|
|
|
1302
1311
|
class EmbeddedSkeletonComponent {
|
|
1303
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1304
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1312
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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> " });
|
|
1305
1314
|
}
|
|
1306
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSkeletonComponent, decorators: [{
|
|
1307
1316
|
type: Component,
|
|
1308
1317
|
args: [{ selector: 'lib-embedded-skeleton', standalone: true, 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> " }]
|
|
1309
1318
|
}] });
|
|
@@ -1311,9 +1320,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1311
1320
|
class EmbeddedCheckoutComponent {
|
|
1312
1321
|
checkoutStore = inject(CheckoutStore);
|
|
1313
1322
|
customerStore = inject(CustomerStore);
|
|
1314
|
-
priceId = input.required();
|
|
1315
|
-
returnPagePath = input('/return');
|
|
1316
|
-
customer = computed(() => this.customerStore.customer().data);
|
|
1323
|
+
priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : []));
|
|
1324
|
+
returnPagePath = input('/return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : []));
|
|
1325
|
+
customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
|
|
1317
1326
|
async ngOnInit() {
|
|
1318
1327
|
this.createCheckoutSession();
|
|
1319
1328
|
}
|
|
@@ -1330,19 +1339,19 @@ class EmbeddedCheckoutComponent {
|
|
|
1330
1339
|
ngOnDestroy() {
|
|
1331
1340
|
this.checkoutStore.destroyEmbeddedCheckout();
|
|
1332
1341
|
}
|
|
1333
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1334
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1342
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedCheckoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1343
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EmbeddedCheckoutComponent, isStandalone: true, selector: "lib-embedded-checkout", inputs: { priceId: { classPropertyName: "priceId", publicName: "priceId", isSignal: true, isRequired: true, transformFunction: null }, returnPagePath: { classPropertyName: "returnPagePath", publicName: "returnPagePath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"checkout-container\">\n @if (checkoutStore.isStatusLoading()) {\n <lib-embedded-skeleton />\n }\n \n @if (checkoutStore.isStatusError()) {\n <div class=\"error\">\n <p>Error: {{ checkoutStore.error() }}</p>\n </div>\n }\n <div id=\"embedded-checkout\"></div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmbeddedSkeletonComponent, selector: "lib-embedded-skeleton" }] });
|
|
1335
1344
|
}
|
|
1336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedCheckoutComponent, decorators: [{
|
|
1337
1346
|
type: Component,
|
|
1338
1347
|
args: [{ selector: 'lib-embedded-checkout', standalone: true, imports: [CommonModule, EmbeddedSkeletonComponent], template: "<div class=\"checkout-container\">\n @if (checkoutStore.isStatusLoading()) {\n <lib-embedded-skeleton />\n }\n \n @if (checkoutStore.isStatusError()) {\n <div class=\"error\">\n <p>Error: {{ checkoutStore.error() }}</p>\n </div>\n }\n <div id=\"embedded-checkout\"></div>\n</div> " }]
|
|
1339
|
-
}] });
|
|
1348
|
+
}], propDecorators: { priceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceId", required: true }] }], returnPagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnPagePath", required: false }] }] } });
|
|
1340
1349
|
|
|
1341
1350
|
class ReturnPageComponent {
|
|
1342
1351
|
route = inject(ActivatedRoute);
|
|
1343
1352
|
router = inject(Router);
|
|
1344
1353
|
checkoutStore = inject(CheckoutStore);
|
|
1345
|
-
returnUrl = input('/');
|
|
1354
|
+
returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
|
|
1346
1355
|
async ngOnInit() {
|
|
1347
1356
|
this.route.queryParams.subscribe(async (params) => {
|
|
1348
1357
|
const sessionId = params['session_id'];
|
|
@@ -1360,19 +1369,19 @@ class ReturnPageComponent {
|
|
|
1360
1369
|
navigate() {
|
|
1361
1370
|
this.router.navigateByUrl(this.returnUrl());
|
|
1362
1371
|
}
|
|
1363
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1364
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1372
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ReturnPageComponent, isStandalone: true, selector: "lib-checkout-return-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"return-page-container\">\n @if (checkoutStore.isStatusLoading()) {\n <div class=\"loading-state\">\n <div class=\"spinner\"></div>\n <p>Verifying your payment status...</p>\n </div>\n }\n\n @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentComplete()) {\n <div class=\"alert alert-success alert-soft flex flex-col items-center gap-4\">\n <div class=\"flex items-center gap-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <h2 class=\"status-title\">\u00A1Payment completed successfully!</h2>\n </div>\n </div>\n }\n\n @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentProcessing()) {\n <div class=\"alert alert-info alert-soft flex flex-col items-center gap-4\">\n <div class=\"flex items-center gap-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <h2 class=\"status-title\">Payment in processing</h2>\n </div>\n <p class=\"status-message\">Your payment is being processed. You will receive an email confirmation when it is complete.</p>\n </div>\n }\n\n @if (checkoutStore.isStatusError()) {\n <div class=\"alert alert-error alert-soft flex flex-col items-center gap-4\">\n <div class=\"flex items-center gap-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\" />\n </svg>\n <h2 class=\"status-title\">An error occurred</h2>\n </div>\n @if (checkoutStore.error()) {\n <p class=\"status-message\">{{ checkoutStore.error() }}</p>\n } @else {\n <p class=\"status-message\">The payment could not be processed. Please try again or contact support.</p>\n }\n </div>\n }\n\n <div class=\"flex justify-end w-full pt-4\">\n <button class=\"btn btn-outline\" (click)=\"navigate()\">Back</button>\n </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1365
1374
|
}
|
|
1366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReturnPageComponent, decorators: [{
|
|
1367
1376
|
type: Component,
|
|
1368
1377
|
args: [{ selector: 'lib-checkout-return-page', standalone: true, imports: [CommonModule], template: "<div class=\"return-page-container\">\n @if (checkoutStore.isStatusLoading()) {\n <div class=\"loading-state\">\n <div class=\"spinner\"></div>\n <p>Verifying your payment status...</p>\n </div>\n }\n\n @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentComplete()) {\n <div class=\"alert alert-success alert-soft flex flex-col items-center gap-4\">\n <div class=\"flex items-center gap-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <h2 class=\"status-title\">\u00A1Payment completed successfully!</h2>\n </div>\n </div>\n }\n\n @if (checkoutStore.isStatusSuccess() && checkoutStore.isPaymentProcessing()) {\n <div class=\"alert alert-info alert-soft flex flex-col items-center gap-4\">\n <div class=\"flex items-center gap-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <h2 class=\"status-title\">Payment in processing</h2>\n </div>\n <p class=\"status-message\">Your payment is being processed. You will receive an email confirmation when it is complete.</p>\n </div>\n }\n\n @if (checkoutStore.isStatusError()) {\n <div class=\"alert alert-error alert-soft flex flex-col items-center gap-4\">\n <div class=\"flex items-center gap-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-12 h-12\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\" />\n </svg>\n <h2 class=\"status-title\">An error occurred</h2>\n </div>\n @if (checkoutStore.error()) {\n <p class=\"status-message\">{{ checkoutStore.error() }}</p>\n } @else {\n <p class=\"status-message\">The payment could not be processed. Please try again or contact support.</p>\n }\n </div>\n }\n\n <div class=\"flex justify-end w-full pt-4\">\n <button class=\"btn btn-outline\" (click)=\"navigate()\">Back</button>\n </div>\n</div> " }]
|
|
1369
|
-
}] });
|
|
1378
|
+
}], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
|
|
1370
1379
|
|
|
1371
1380
|
class ProductItemSkeletonComponent {
|
|
1372
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1373
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1381
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ProductItemSkeletonComponent, isStandalone: true, selector: "lib-product-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl w-[350px]\">\n <figure>\n <div class=\"skeleton h-48 w-full\"></div>\n </figure>\n <div class=\"card-body\">\n <div class=\"skeleton h-8 w-32\"></div>\n <div class=\"skeleton h-6 w-48\"></div>\n <div class=\"skeleton h-4 w-full\"></div>\n <div class=\"skeleton h-4 w-3/4\"></div>\n <div class=\"card-actions justify-end mt-4\">\n <div class=\"skeleton h-10 w-24\"></div>\n </div>\n </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1374
1383
|
}
|
|
1375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemSkeletonComponent, decorators: [{
|
|
1376
1385
|
type: Component,
|
|
1377
1386
|
args: [{ selector: 'lib-product-item-skeleton', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-xl w-[350px]\">\n <figure>\n <div class=\"skeleton h-48 w-full\"></div>\n </figure>\n <div class=\"card-body\">\n <div class=\"skeleton h-8 w-32\"></div>\n <div class=\"skeleton h-6 w-48\"></div>\n <div class=\"skeleton h-4 w-full\"></div>\n <div class=\"skeleton h-4 w-3/4\"></div>\n <div class=\"card-actions justify-end mt-4\">\n <div class=\"skeleton h-10 w-24\"></div>\n </div>\n </div>\n</div> " }]
|
|
1378
1387
|
}] });
|
|
@@ -1417,10 +1426,10 @@ class UtilsService {
|
|
|
1417
1426
|
return 'badge-ghost';
|
|
1418
1427
|
}
|
|
1419
1428
|
}
|
|
1420
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1421
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1429
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1430
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, providedIn: 'root' });
|
|
1422
1431
|
}
|
|
1423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, decorators: [{
|
|
1424
1433
|
type: Injectable,
|
|
1425
1434
|
args: [{
|
|
1426
1435
|
providedIn: 'root',
|
|
@@ -1428,33 +1437,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1428
1437
|
}] });
|
|
1429
1438
|
|
|
1430
1439
|
class ProductItemComponent {
|
|
1431
|
-
product = input.required();
|
|
1432
|
-
currency = input(Currency.EUR);
|
|
1440
|
+
product = input.required(...(ngDevMode ? [{ debugName: "product" }] : []));
|
|
1441
|
+
currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
|
|
1433
1442
|
productSelected = output();
|
|
1434
1443
|
priceSelected = output();
|
|
1435
1444
|
utils = inject(UtilsService);
|
|
1436
1445
|
sanitizer = inject(DomSanitizer);
|
|
1437
|
-
price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()));
|
|
1446
|
+
price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : []));
|
|
1438
1447
|
sanitizedImage = computed(() => {
|
|
1439
1448
|
const imageUrl = this.product().images?.[0];
|
|
1440
1449
|
return imageUrl ? this.sanitizer.bypassSecurityTrustUrl(imageUrl) : null;
|
|
1441
|
-
});
|
|
1450
|
+
}, ...(ngDevMode ? [{ debugName: "sanitizedImage" }] : []));
|
|
1442
1451
|
onSelect() {
|
|
1443
1452
|
this.productSelected.emit(this.product());
|
|
1444
1453
|
this.priceSelected.emit(this.price()?.details);
|
|
1445
1454
|
}
|
|
1446
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1447
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1455
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1456
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 w-[350px]\">\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 }] });
|
|
1448
1457
|
}
|
|
1449
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemComponent, decorators: [{
|
|
1450
1459
|
type: Component,
|
|
1451
1460
|
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 w-[350px]\">\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> " }]
|
|
1452
|
-
}] });
|
|
1461
|
+
}], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: true }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], productSelected: [{ type: i0.Output, args: ["productSelected"] }], priceSelected: [{ type: i0.Output, args: ["priceSelected"] }] } });
|
|
1453
1462
|
|
|
1454
1463
|
class ProductListComponent {
|
|
1455
1464
|
productsStore = inject(ProductsStore);
|
|
1456
|
-
products = input([]);
|
|
1457
|
-
currency = input(Currency.EUR);
|
|
1465
|
+
products = input([], ...(ngDevMode ? [{ debugName: "products" }] : []));
|
|
1466
|
+
currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
|
|
1458
1467
|
productSelected = output();
|
|
1459
1468
|
priceSelected = output();
|
|
1460
1469
|
onProductSelect(product) {
|
|
@@ -1463,26 +1472,26 @@ class ProductListComponent {
|
|
|
1463
1472
|
onPriceSelect(price) {
|
|
1464
1473
|
this.priceSelected.emit(price);
|
|
1465
1474
|
}
|
|
1466
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1467
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1475
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1476
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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=\"flex justify-start gap-8\">\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() && !productsStore.isStatusLoading()) {\n <div class=\"alert alert-info\">\n <span>No products available</span>\n </div>\n}\n\n@if (productsStore.hasProducts()) {\n <div class=\"flex justify-start gap-8\">\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" }] });
|
|
1468
1477
|
}
|
|
1469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
1470
1479
|
type: Component,
|
|
1471
1480
|
args: [{ selector: 'stripe-product-list', standalone: true, imports: [CommonModule, ProductItemComponent, ProductItemSkeletonComponent], template: "@if (productsStore.isStatusLoading()) {\n <div class=\"flex justify-start gap-8\">\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() && !productsStore.isStatusLoading()) {\n <div class=\"alert alert-info\">\n <span>No products available</span>\n </div>\n}\n\n@if (productsStore.hasProducts()) {\n <div class=\"flex justify-start gap-8\">\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" }]
|
|
1472
|
-
}] });
|
|
1481
|
+
}], propDecorators: { products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], productSelected: [{ type: i0.Output, args: ["productSelected"] }], priceSelected: [{ type: i0.Output, args: ["priceSelected"] }] } });
|
|
1473
1482
|
|
|
1474
1483
|
class ProductItemButtonComponent {
|
|
1475
|
-
product = input.required();
|
|
1476
|
-
currency = input(Currency.EUR);
|
|
1477
|
-
buttonText = input('Buy now');
|
|
1478
|
-
buttonClass = input('btn btn-primary');
|
|
1479
|
-
showPrice = input(true);
|
|
1480
|
-
disabled = input(false);
|
|
1484
|
+
product = input.required(...(ngDevMode ? [{ debugName: "product" }] : []));
|
|
1485
|
+
currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
|
|
1486
|
+
buttonText = input('Buy now', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
|
|
1487
|
+
buttonClass = input('btn btn-primary', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
|
|
1488
|
+
showPrice = input(true, ...(ngDevMode ? [{ debugName: "showPrice" }] : []));
|
|
1489
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1481
1490
|
productSelected = output();
|
|
1482
1491
|
priceSelected = output();
|
|
1483
1492
|
utils = inject(UtilsService);
|
|
1484
|
-
price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()));
|
|
1485
|
-
isDisabled = computed(() => this.disabled() || !this.product().active);
|
|
1493
|
+
price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : []));
|
|
1494
|
+
isDisabled = computed(() => this.disabled() || !this.product().active, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
1486
1495
|
displayText = computed(() => {
|
|
1487
1496
|
if (!this.product().active) {
|
|
1488
1497
|
return 'Inactive';
|
|
@@ -1499,7 +1508,7 @@ class ProductItemButtonComponent {
|
|
|
1499
1508
|
? `/${priceInfo.recurringInterval === 'month' ? 'mo' : 'yr'}`
|
|
1500
1509
|
: '';
|
|
1501
1510
|
return `${this.buttonText()} - ${formattedPrice}${suffix}`;
|
|
1502
|
-
});
|
|
1511
|
+
}, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
|
|
1503
1512
|
onSelect() {
|
|
1504
1513
|
if (this.isDisabled()) {
|
|
1505
1514
|
return;
|
|
@@ -1507,20 +1516,20 @@ class ProductItemButtonComponent {
|
|
|
1507
1516
|
this.productSelected.emit(this.product());
|
|
1508
1517
|
this.priceSelected.emit(this.price()?.details);
|
|
1509
1518
|
}
|
|
1510
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1511
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1519
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1520
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ProductItemButtonComponent, isStandalone: true, selector: "lib-product-item-button", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, buttonText: { classPropertyName: "buttonText", publicName: "buttonText", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, showPrice: { classPropertyName: "showPrice", publicName: "showPrice", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<button \n [class]=\"buttonClass()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onSelect()\">\n {{ displayText() }}\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1512
1521
|
}
|
|
1513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemButtonComponent, decorators: [{
|
|
1514
1523
|
type: Component,
|
|
1515
1524
|
args: [{ selector: 'lib-product-item-button', standalone: true, imports: [CommonModule], template: "<button \n [class]=\"buttonClass()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onSelect()\">\n {{ displayText() }}\n</button>\n" }]
|
|
1516
|
-
}] });
|
|
1525
|
+
}], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: true }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], showPrice: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrice", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], productSelected: [{ type: i0.Output, args: ["productSelected"] }], priceSelected: [{ type: i0.Output, args: ["priceSelected"] }] } });
|
|
1517
1526
|
|
|
1518
1527
|
class EmbeddedSubscriptionComponent {
|
|
1519
1528
|
subscriptionsStore = inject(SubscriptionsStore);
|
|
1520
1529
|
customerStore = inject(CustomerStore);
|
|
1521
|
-
priceId = input.required();
|
|
1522
|
-
returnPagePath = input('/subscription-return');
|
|
1523
|
-
customer = computed(() => this.customerStore.customer().data);
|
|
1530
|
+
priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : []));
|
|
1531
|
+
returnPagePath = input('/subscription-return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : []));
|
|
1532
|
+
customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
|
|
1524
1533
|
async ngOnInit() {
|
|
1525
1534
|
this.createSubscription();
|
|
1526
1535
|
}
|
|
@@ -1532,21 +1541,21 @@ class EmbeddedSubscriptionComponent {
|
|
|
1532
1541
|
ngOnDestroy() {
|
|
1533
1542
|
this.subscriptionsStore.destroyEmbeddedSubscription();
|
|
1534
1543
|
}
|
|
1535
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1536
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1544
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1545
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EmbeddedSubscriptionComponent, isStandalone: true, selector: "lib-embedded-subscription", inputs: { priceId: { classPropertyName: "priceId", publicName: "priceId", isSignal: true, isRequired: true, transformFunction: null }, returnPagePath: { classPropertyName: "returnPagePath", publicName: "returnPagePath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"subscription-container\">\n <div class=\"info-panel p-4 bg-primary-100 rounded-lg mb-4\">\n <div class=\"flex items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-primary mr-2\" 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 <p class=\"text-primary-700\">Plan de suscripci\u00F3n: <span class=\"font-semibold\">{{ priceId() }}</span></p>\n </div>\n </div>\n \n @if (subscriptionsStore.isStatusLoading()) {\n <lib-embedded-skeleton />\n }\n \n @if (subscriptionsStore.isStatusError()) {\n <div class=\"error\">\n <p>Error: {{ subscriptionsStore.error() }}</p>\n </div>\n }\n \n <div id=\"embedded-checkout\" class=\"mt-4\"></div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmbeddedSkeletonComponent, selector: "lib-embedded-skeleton" }] });
|
|
1537
1546
|
}
|
|
1538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSubscriptionComponent, decorators: [{
|
|
1539
1548
|
type: Component,
|
|
1540
1549
|
args: [{ selector: 'lib-embedded-subscription', standalone: true, imports: [CommonModule, EmbeddedSkeletonComponent], template: "<div class=\"subscription-container\">\n <div class=\"info-panel p-4 bg-primary-100 rounded-lg mb-4\">\n <div class=\"flex items-center\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-primary mr-2\" 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 <p class=\"text-primary-700\">Plan de suscripci\u00F3n: <span class=\"font-semibold\">{{ priceId() }}</span></p>\n </div>\n </div>\n \n @if (subscriptionsStore.isStatusLoading()) {\n <lib-embedded-skeleton />\n }\n \n @if (subscriptionsStore.isStatusError()) {\n <div class=\"error\">\n <p>Error: {{ subscriptionsStore.error() }}</p>\n </div>\n }\n \n <div id=\"embedded-checkout\" class=\"mt-4\"></div>\n</div> " }]
|
|
1541
|
-
}] });
|
|
1550
|
+
}], propDecorators: { priceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceId", required: true }] }], returnPagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnPagePath", required: false }] }] } });
|
|
1542
1551
|
|
|
1543
1552
|
class SubscriptionReturnPageComponent {
|
|
1544
1553
|
route = inject(ActivatedRoute);
|
|
1545
1554
|
router = inject(Router);
|
|
1546
1555
|
checkoutStore = inject(CheckoutStore);
|
|
1547
1556
|
subscriptionsStore = inject(SubscriptionsStore);
|
|
1548
|
-
sessionStatus = computed(() => this.checkoutStore.sessionStatus());
|
|
1549
|
-
returnUrl = input('/');
|
|
1557
|
+
sessionStatus = computed(() => this.checkoutStore.sessionStatus(), ...(ngDevMode ? [{ debugName: "sessionStatus" }] : []));
|
|
1558
|
+
returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
|
|
1550
1559
|
async ngOnInit() {
|
|
1551
1560
|
this.route.queryParams.subscribe(async (params) => {
|
|
1552
1561
|
const sessionId = params['session_id'];
|
|
@@ -1564,17 +1573,17 @@ class SubscriptionReturnPageComponent {
|
|
|
1564
1573
|
navigate() {
|
|
1565
1574
|
this.router.navigateByUrl(this.returnUrl());
|
|
1566
1575
|
}
|
|
1567
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1568
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1576
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1577
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionReturnPageComponent, isStandalone: true, selector: "lib-subscription-return-page", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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>", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1569
1578
|
}
|
|
1570
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionReturnPageComponent, decorators: [{
|
|
1571
1580
|
type: Component,
|
|
1572
1581
|
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>" }]
|
|
1573
|
-
}] });
|
|
1582
|
+
}], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
|
|
1574
1583
|
|
|
1575
1584
|
class BrandIconDirective {
|
|
1576
1585
|
el;
|
|
1577
|
-
paymentMethod = input.required({ alias: 'ngxBrandIcon' });
|
|
1586
|
+
paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxBrandIcon' });
|
|
1578
1587
|
constructor(el) {
|
|
1579
1588
|
this.el = el;
|
|
1580
1589
|
effect(() => {
|
|
@@ -1596,20 +1605,20 @@ class BrandIconDirective {
|
|
|
1596
1605
|
};
|
|
1597
1606
|
return brandIcons[brand || 'unknown'] || '💳';
|
|
1598
1607
|
}
|
|
1599
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1600
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1608
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandIconDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1609
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: BrandIconDirective, isStandalone: true, selector: "[ngxBrandIcon]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxBrandIcon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
1601
1610
|
}
|
|
1602
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandIconDirective, decorators: [{
|
|
1603
1612
|
type: Directive,
|
|
1604
1613
|
args: [{
|
|
1605
1614
|
selector: '[ngxBrandIcon]',
|
|
1606
1615
|
standalone: true
|
|
1607
1616
|
}]
|
|
1608
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
1617
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxBrandIcon", required: true }] }] } });
|
|
1609
1618
|
|
|
1610
1619
|
class BrandNameDirective {
|
|
1611
1620
|
el;
|
|
1612
|
-
paymentMethod = input.required({ alias: 'ngxBrandName' });
|
|
1621
|
+
paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxBrandName' });
|
|
1613
1622
|
constructor(el) {
|
|
1614
1623
|
this.el = el;
|
|
1615
1624
|
effect(() => {
|
|
@@ -1631,20 +1640,20 @@ class BrandNameDirective {
|
|
|
1631
1640
|
};
|
|
1632
1641
|
return brandNames[brand || 'unknown'] || 'Tarjeta';
|
|
1633
1642
|
}
|
|
1634
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1635
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1643
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1644
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: BrandNameDirective, isStandalone: true, selector: "[ngxBrandName]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxBrandName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
1636
1645
|
}
|
|
1637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandNameDirective, decorators: [{
|
|
1638
1647
|
type: Directive,
|
|
1639
1648
|
args: [{
|
|
1640
1649
|
selector: '[ngxBrandName]',
|
|
1641
1650
|
standalone: true
|
|
1642
1651
|
}]
|
|
1643
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
1652
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxBrandName", required: true }] }] } });
|
|
1644
1653
|
|
|
1645
1654
|
class PaymentMethodTypeDirective {
|
|
1646
1655
|
el;
|
|
1647
|
-
paymentMethod = input.required({ alias: 'ngxPaymentMethodType' });
|
|
1656
|
+
paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxPaymentMethodType' });
|
|
1648
1657
|
constructor(el) {
|
|
1649
1658
|
this.el = el;
|
|
1650
1659
|
effect(() => {
|
|
@@ -1670,20 +1679,20 @@ class PaymentMethodTypeDirective {
|
|
|
1670
1679
|
};
|
|
1671
1680
|
return typeNames[this.paymentMethod().type] || 'Método de pago';
|
|
1672
1681
|
}
|
|
1673
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1674
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1682
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodTypeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1683
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: PaymentMethodTypeDirective, isStandalone: true, selector: "[ngxPaymentMethodType]", inputs: { paymentMethod: { classPropertyName: "paymentMethod", publicName: "ngxPaymentMethodType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
1675
1684
|
}
|
|
1676
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodTypeDirective, decorators: [{
|
|
1677
1686
|
type: Directive,
|
|
1678
1687
|
args: [{
|
|
1679
1688
|
selector: '[ngxPaymentMethodType]',
|
|
1680
1689
|
standalone: true
|
|
1681
1690
|
}]
|
|
1682
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
1691
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxPaymentMethodType", required: true }] }] } });
|
|
1683
1692
|
|
|
1684
1693
|
class PaymentMethodComponent {
|
|
1685
|
-
paymentMethod = input.required();
|
|
1686
|
-
mode = input('detailed');
|
|
1694
|
+
paymentMethod = input.required(...(ngDevMode ? [{ debugName: "paymentMethod" }] : []));
|
|
1695
|
+
mode = input('detailed', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
1687
1696
|
get last4() {
|
|
1688
1697
|
return this.paymentMethod().card?.last4 || '****';
|
|
1689
1698
|
}
|
|
@@ -1719,41 +1728,41 @@ class PaymentMethodComponent {
|
|
|
1719
1728
|
get billingAddress() {
|
|
1720
1729
|
return this.paymentMethod().billing_details?.address;
|
|
1721
1730
|
}
|
|
1722
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1723
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1731
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1732
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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: "directive", type: BrandNameDirective, selector: "[ngxBrandName]", inputs: ["ngxBrandName"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
1724
1733
|
}
|
|
1725
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1734
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodComponent, decorators: [{
|
|
1726
1735
|
type: Component,
|
|
1727
1736
|
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" }]
|
|
1728
|
-
}] });
|
|
1737
|
+
}], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentMethod", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
1729
1738
|
|
|
1730
1739
|
class PaymentIntentsDialogComponent {
|
|
1731
|
-
paymentIntent = input.required();
|
|
1732
|
-
dialogId = input.required();
|
|
1740
|
+
paymentIntent = input.required(...(ngDevMode ? [{ debugName: "paymentIntent" }] : []));
|
|
1741
|
+
dialogId = input.required(...(ngDevMode ? [{ debugName: "dialogId" }] : []));
|
|
1733
1742
|
utils = new UtilsService();
|
|
1734
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1735
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1743
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1744
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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"] }] });
|
|
1736
1745
|
}
|
|
1737
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsDialogComponent, decorators: [{
|
|
1738
1747
|
type: Component,
|
|
1739
1748
|
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" }]
|
|
1740
|
-
}] });
|
|
1749
|
+
}], propDecorators: { paymentIntent: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntent", required: true }] }], dialogId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogId", required: true }] }] } });
|
|
1741
1750
|
|
|
1742
1751
|
class PaymentIntentsTableComponent {
|
|
1743
|
-
paymentIntents = input.required();
|
|
1752
|
+
paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : []));
|
|
1744
1753
|
paymentIntentsTable = computed(() => {
|
|
1745
1754
|
return this.paymentIntents().map(paymentIntent => ({
|
|
1746
1755
|
...paymentIntent,
|
|
1747
1756
|
selected: false
|
|
1748
1757
|
}));
|
|
1749
|
-
});
|
|
1750
|
-
loading = input(false);
|
|
1751
|
-
error = input(null);
|
|
1752
|
-
withControls = input(true);
|
|
1758
|
+
}, ...(ngDevMode ? [{ debugName: "paymentIntentsTable" }] : []));
|
|
1759
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1760
|
+
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1761
|
+
withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : []));
|
|
1753
1762
|
exportSelected = output();
|
|
1754
1763
|
onRefresh = output();
|
|
1755
1764
|
utils = inject(UtilsService);
|
|
1756
|
-
hasPaymentIntents = computed(() => this.paymentIntents() && this.paymentIntents().length > 0);
|
|
1765
|
+
hasPaymentIntents = computed(() => this.paymentIntents() && this.paymentIntents().length > 0, ...(ngDevMode ? [{ debugName: "hasPaymentIntents" }] : []));
|
|
1757
1766
|
trackByPaymentIntentId = (index, item) => item.id;
|
|
1758
1767
|
refreshPaymentIntents() {
|
|
1759
1768
|
this.onRefresh.emit();
|
|
@@ -1788,23 +1797,23 @@ class PaymentIntentsTableComponent {
|
|
|
1788
1797
|
exportSelectedPaymentIntents() {
|
|
1789
1798
|
this.exportSelected.emit(this.paymentIntentsTable().filter(paymentIntent => paymentIntent.selected));
|
|
1790
1799
|
}
|
|
1791
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1792
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1800
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1801
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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"] }] });
|
|
1793
1802
|
}
|
|
1794
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1803
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsTableComponent, decorators: [{
|
|
1795
1804
|
type: Component,
|
|
1796
1805
|
args: [{ selector: 'lib-payment-intents-table', standalone: true, imports: [
|
|
1797
1806
|
CommonModule,
|
|
1798
1807
|
PaymentMethodComponent,
|
|
1799
1808
|
PaymentIntentsDialogComponent
|
|
1800
1809
|
], 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> " }]
|
|
1801
|
-
}] });
|
|
1810
|
+
}], propDecorators: { paymentIntents: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntents", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], withControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "withControls", required: false }] }], exportSelected: [{ type: i0.Output, args: ["exportSelected"] }], onRefresh: [{ type: i0.Output, args: ["onRefresh"] }] } });
|
|
1802
1811
|
|
|
1803
1812
|
class SubscriptionItemSkeletonComponent {
|
|
1804
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1805
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1813
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SubscriptionItemSkeletonComponent, isStandalone: true, selector: "lib-subscription-item-skeleton", ngImport: i0, 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>", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1806
1815
|
}
|
|
1807
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemSkeletonComponent, decorators: [{
|
|
1808
1817
|
type: Component,
|
|
1809
1818
|
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>" }]
|
|
1810
1819
|
}] });
|
|
@@ -1814,12 +1823,12 @@ class SubscriptionItemComponent {
|
|
|
1814
1823
|
portalAccountStore = inject(PortalAccountStore);
|
|
1815
1824
|
utils = inject(UtilsService);
|
|
1816
1825
|
sanitizer = inject(DomSanitizer);
|
|
1817
|
-
subscription = input.required();
|
|
1826
|
+
subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : []));
|
|
1818
1827
|
onManageSubscription = output();
|
|
1819
|
-
isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading());
|
|
1828
|
+
isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading(), ...(ngDevMode ? [{ debugName: "isStatusLoading" }] : []));
|
|
1820
1829
|
productImage = computed(() => {
|
|
1821
1830
|
return this.subscription().product?.images?.[0] || 'https://img.daisyui.com/images/profile/demo/yellingcat@192.webp';
|
|
1822
|
-
});
|
|
1831
|
+
}, ...(ngDevMode ? [{ debugName: "productImage" }] : []));
|
|
1823
1832
|
isExpanded = false;
|
|
1824
1833
|
toggleExpand() {
|
|
1825
1834
|
this.isExpanded = !this.isExpanded;
|
|
@@ -1830,44 +1839,44 @@ class SubscriptionItemComponent {
|
|
|
1830
1839
|
sanitizeImageUrl(imageUrl) {
|
|
1831
1840
|
return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
|
|
1832
1841
|
}
|
|
1833
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1834
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1842
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1843
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }] });
|
|
1835
1844
|
}
|
|
1836
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemComponent, decorators: [{
|
|
1837
1846
|
type: Component,
|
|
1838
1847
|
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> " }]
|
|
1839
|
-
}] });
|
|
1848
|
+
}], propDecorators: { subscription: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscription", required: true }] }], onManageSubscription: [{ type: i0.Output, args: ["onManageSubscription"] }] } });
|
|
1840
1849
|
|
|
1841
1850
|
class SubscriptionsListComponent {
|
|
1842
|
-
subscriptions = input.required();
|
|
1843
|
-
loading = input(false);
|
|
1844
|
-
error = input(null);
|
|
1845
|
-
withEmptyState = input(true);
|
|
1851
|
+
subscriptions = input.required(...(ngDevMode ? [{ debugName: "subscriptions" }] : []));
|
|
1852
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1853
|
+
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1854
|
+
withEmptyState = input(true, ...(ngDevMode ? [{ debugName: "withEmptyState" }] : []));
|
|
1846
1855
|
onManageSubscription = output();
|
|
1847
1856
|
manageSubscription(customerId) {
|
|
1848
1857
|
this.onManageSubscription.emit(customerId);
|
|
1849
1858
|
}
|
|
1850
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1851
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1859
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1860
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionsListComponent, isStandalone: true, selector: "lib-subscriptions-list", inputs: { subscriptions: { classPropertyName: "subscriptions", publicName: "subscriptions", 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 }, withEmptyState: { classPropertyName: "withEmptyState", publicName: "withEmptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "<div class=\"subscriptions-container\">\n @if (loading()) {\n <div class=\"flex flex-col gap-4\">\n @for (item of [1,2,3]; track item) {\n <lib-subscription-item-skeleton></lib-subscription-item-skeleton>\n }\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 (subscriptions().length > 0) {\n <div class=\"subscriptions-list flex flex-col gap-4\">\n @for (subscription of subscriptions(); track subscription.id) {\n <lib-subscription-item \n [subscription]=\"subscription\"\n (onManageSubscription)=\"manageSubscription($event)\">\n </lib-subscription-item>\n }\n </div>\n } @else if (withEmptyState() && subscriptions().length === 0 && !loading()) {\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=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <h2 class=\"card-title text-xl\">No tienes suscripciones activas</h2>\n <p class=\"text-gray-600\">Consulta nuestros planes para comenzar una suscripci\u00F3n.</p>\n </div>\n </div>\n </div>\n }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionItemComponent, selector: "lib-subscription-item", inputs: ["subscription"], outputs: ["onManageSubscription"] }, { kind: "component", type: SubscriptionItemSkeletonComponent, selector: "lib-subscription-item-skeleton" }] });
|
|
1852
1861
|
}
|
|
1853
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
|
|
1854
1863
|
type: Component,
|
|
1855
1864
|
args: [{ selector: 'lib-subscriptions-list', standalone: true, imports: [CommonModule, SubscriptionItemComponent, SubscriptionItemSkeletonComponent], template: "<div class=\"subscriptions-container\">\n @if (loading()) {\n <div class=\"flex flex-col gap-4\">\n @for (item of [1,2,3]; track item) {\n <lib-subscription-item-skeleton></lib-subscription-item-skeleton>\n }\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 (subscriptions().length > 0) {\n <div class=\"subscriptions-list flex flex-col gap-4\">\n @for (subscription of subscriptions(); track subscription.id) {\n <lib-subscription-item \n [subscription]=\"subscription\"\n (onManageSubscription)=\"manageSubscription($event)\">\n </lib-subscription-item>\n }\n </div>\n } @else if (withEmptyState() && subscriptions().length === 0 && !loading()) {\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=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n </svg>\n <h2 class=\"card-title text-xl\">No tienes suscripciones activas</h2>\n <p class=\"text-gray-600\">Consulta nuestros planes para comenzar una suscripci\u00F3n.</p>\n </div>\n </div>\n </div>\n }\n</div> " }]
|
|
1856
|
-
}] });
|
|
1865
|
+
}], propDecorators: { subscriptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscriptions", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], withEmptyState: [{ type: i0.Input, args: [{ isSignal: true, alias: "withEmptyState", required: false }] }], onManageSubscription: [{ type: i0.Output, args: ["onManageSubscription"] }] } });
|
|
1857
1866
|
|
|
1858
1867
|
class SubscriptionCardSkeletonComponent {
|
|
1859
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1860
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1868
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1869
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SubscriptionCardSkeletonComponent, isStandalone: true, selector: "lib-subscription-card-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 w-96 shadow-sm\">\n <figure class=\"flex items-center justify-center\">\n <div class=\"skeleton h-48 w-full\"></div>\n </figure>\n <div class=\"card-body\">\n <div class=\"flex justify-between items-center\">\n <div class=\"skeleton h-8 w-2/3\"></div>\n <div class=\"skeleton h-6 w-24 rounded-full\"></div>\n </div>\n \n <div class=\"mt-3\">\n <div class=\"skeleton h-4 w-full\"></div>\n <div class=\"skeleton h-4 w-5/6 mt-2\"></div>\n </div>\n \n <div class=\"card-actions justify-end mt-4\">\n <div class=\"skeleton h-10 w-40 rounded-lg\"></div>\n </div>\n </div>\n</div> " });
|
|
1861
1870
|
}
|
|
1862
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1871
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardSkeletonComponent, decorators: [{
|
|
1863
1872
|
type: Component,
|
|
1864
1873
|
args: [{ selector: 'lib-subscription-card-skeleton', standalone: true, template: "<div class=\"card bg-base-100 w-96 shadow-sm\">\n <figure class=\"flex items-center justify-center\">\n <div class=\"skeleton h-48 w-full\"></div>\n </figure>\n <div class=\"card-body\">\n <div class=\"flex justify-between items-center\">\n <div class=\"skeleton h-8 w-2/3\"></div>\n <div class=\"skeleton h-6 w-24 rounded-full\"></div>\n </div>\n \n <div class=\"mt-3\">\n <div class=\"skeleton h-4 w-full\"></div>\n <div class=\"skeleton h-4 w-5/6 mt-2\"></div>\n </div>\n \n <div class=\"card-actions justify-end mt-4\">\n <div class=\"skeleton h-10 w-40 rounded-lg\"></div>\n </div>\n </div>\n</div> " }]
|
|
1865
1874
|
}] });
|
|
1866
1875
|
|
|
1867
1876
|
class SubscriptionCardComponent {
|
|
1868
|
-
subscription = input.required();
|
|
1869
|
-
loading = input(false);
|
|
1870
|
-
error = input(null);
|
|
1877
|
+
subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : []));
|
|
1878
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1879
|
+
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1871
1880
|
utils = inject(UtilsService);
|
|
1872
1881
|
onManageSubscription = output();
|
|
1873
1882
|
hasValidProductImages() {
|
|
@@ -1886,64 +1895,64 @@ class SubscriptionCardComponent {
|
|
|
1886
1895
|
manageSubscription() {
|
|
1887
1896
|
this.onManageSubscription.emit(this.subscription().customer);
|
|
1888
1897
|
}
|
|
1889
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1890
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1898
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1899
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionCardComponent, isStandalone: true, selector: "lib-subscription-card", inputs: { subscription: { classPropertyName: "subscription", publicName: "subscription", 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 } }, outputs: { onManageSubscription: "onManageSubscription" }, ngImport: i0, template: "@if (loading()) {\n <lib-subscription-card-skeleton></lib-subscription-card-skeleton>\n} @else if (error()) {\n <div class=\"alert alert-error\">{{ error() }}</div>\n} @else if (subscription()) {\n <div class=\"card bg-base-100 w-96 shadow-sm \">\n @if (hasValidProductImages()) {\n <figure class=\"flex items-center justify-center\">\n <img [src]=\"getProductImage()\" [alt]=\"getProductName()\" class=\"h-48 w-full object-cover\" />\n </figure>\n }\n <div class=\"card-body\">\n <div class=\"flex justify-between items-center\">\n <h2 class=\"card-title\">{{ getProductName() }}</h2>\n <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(subscription().status) }} subscription-status\">\n {{ subscription().status }}\n </span>\n </div>\n \n <div class=\"mt-3\">\n <p class=\"opacity-75\">{{ subscription().product?.description }}</p>\n </div>\n \n <div class=\"card-actions justify-end\">\n <button class=\"btn btn-primary\" (click)=\"manageSubscription()\">\n Manage Subscription\n </button>\n </div>\n </div>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionCardSkeletonComponent, selector: "lib-subscription-card-skeleton" }] });
|
|
1891
1900
|
}
|
|
1892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardComponent, decorators: [{
|
|
1893
1902
|
type: Component,
|
|
1894
1903
|
args: [{ selector: 'lib-subscription-card', standalone: true, imports: [CommonModule, SubscriptionCardSkeletonComponent], template: "@if (loading()) {\n <lib-subscription-card-skeleton></lib-subscription-card-skeleton>\n} @else if (error()) {\n <div class=\"alert alert-error\">{{ error() }}</div>\n} @else if (subscription()) {\n <div class=\"card bg-base-100 w-96 shadow-sm \">\n @if (hasValidProductImages()) {\n <figure class=\"flex items-center justify-center\">\n <img [src]=\"getProductImage()\" [alt]=\"getProductName()\" class=\"h-48 w-full object-cover\" />\n </figure>\n }\n <div class=\"card-body\">\n <div class=\"flex justify-between items-center\">\n <h2 class=\"card-title\">{{ getProductName() }}</h2>\n <span class=\"badge badge-soft {{ utils.getStatusBadgeClass(subscription().status) }} subscription-status\">\n {{ subscription().status }}\n </span>\n </div>\n \n <div class=\"mt-3\">\n <p class=\"opacity-75\">{{ subscription().product?.description }}</p>\n </div>\n \n <div class=\"card-actions justify-end\">\n <button class=\"btn btn-primary\" (click)=\"manageSubscription()\">\n Manage Subscription\n </button>\n </div>\n </div>\n </div>\n}\n" }]
|
|
1895
|
-
}] });
|
|
1904
|
+
}], propDecorators: { subscription: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscription", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], onManageSubscription: [{ type: i0.Output, args: ["onManageSubscription"] }] } });
|
|
1896
1905
|
|
|
1897
1906
|
class PaymentIntentItemSkeletonComponent {
|
|
1898
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1899
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1907
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1908
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: PaymentIntentItemSkeletonComponent, isStandalone: true, selector: "lib-payment-intent-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-sm card-skeleton\">\n <div class=\"card-body p-4\">\n <!-- Header with status and expand button -->\n <div class=\"flex justify-between\">\n <div class=\"w-full\">\n <div class=\"flex items-center\">\n <!-- Title/Status placeholder -->\n <div class=\"skeleton w-32 h-6 rounded-md\"></div>\n <!-- Badge placeholder -->\n <div class=\"skeleton w-24 h-6 ml-2 rounded-full\"></div>\n </div>\n <!-- Customer ID placeholder -->\n <div class=\"skeleton w-48 h-4 mt-2 rounded-md\"></div>\n </div>\n \n <!-- Details button placeholder -->\n <div class=\"skeleton w-20 h-8 rounded-md\"></div>\n </div>\n\n <!-- Payment details summary -->\n <div class=\"flex justify-between mt-3\">\n <div>\n <!-- Amount placeholder -->\n <div class=\"skeleton w-32 h-8 rounded-md\"></div>\n </div>\n <div>\n <!-- Date placeholder -->\n <div class=\"skeleton w-28 h-6 rounded-md\"></div>\n </div>\n </div>\n \n <!-- Optional expanded details placeholder -->\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 <!-- Details heading placeholder -->\n <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n \n <!-- List items placeholders -->\n <div class=\"space-y-2\">\n <div class=\"skeleton w-full h-4 rounded-md\"></div>\n <div class=\"skeleton w-full h-4 rounded-md\"></div>\n <div class=\"skeleton w-3/4 h-4 rounded-md\"></div>\n </div>\n </div>\n \n <div>\n <!-- Second column heading placeholder -->\n <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n \n <!-- List items placeholders -->\n <div class=\"space-y-2\">\n <div class=\"skeleton w-full h-4 rounded-md\"></div>\n <div class=\"skeleton w-2/3 h-4 rounded-md\"></div>\n </div>\n </div>\n </div>\n \n <!-- Action button placeholder -->\n <div class=\"flex justify-end mt-4\">\n <div class=\"skeleton w-36 h-10 rounded-md\"></div>\n </div>\n </div>\n </div>\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1900
1909
|
}
|
|
1901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1910
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemSkeletonComponent, decorators: [{
|
|
1902
1911
|
type: Component,
|
|
1903
1912
|
args: [{ selector: 'lib-payment-intent-item-skeleton', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-sm card-skeleton\">\n <div class=\"card-body p-4\">\n <!-- Header with status and expand button -->\n <div class=\"flex justify-between\">\n <div class=\"w-full\">\n <div class=\"flex items-center\">\n <!-- Title/Status placeholder -->\n <div class=\"skeleton w-32 h-6 rounded-md\"></div>\n <!-- Badge placeholder -->\n <div class=\"skeleton w-24 h-6 ml-2 rounded-full\"></div>\n </div>\n <!-- Customer ID placeholder -->\n <div class=\"skeleton w-48 h-4 mt-2 rounded-md\"></div>\n </div>\n \n <!-- Details button placeholder -->\n <div class=\"skeleton w-20 h-8 rounded-md\"></div>\n </div>\n\n <!-- Payment details summary -->\n <div class=\"flex justify-between mt-3\">\n <div>\n <!-- Amount placeholder -->\n <div class=\"skeleton w-32 h-8 rounded-md\"></div>\n </div>\n <div>\n <!-- Date placeholder -->\n <div class=\"skeleton w-28 h-6 rounded-md\"></div>\n </div>\n </div>\n \n <!-- Optional expanded details placeholder -->\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 <!-- Details heading placeholder -->\n <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n \n <!-- List items placeholders -->\n <div class=\"space-y-2\">\n <div class=\"skeleton w-full h-4 rounded-md\"></div>\n <div class=\"skeleton w-full h-4 rounded-md\"></div>\n <div class=\"skeleton w-3/4 h-4 rounded-md\"></div>\n </div>\n </div>\n \n <div>\n <!-- Second column heading placeholder -->\n <div class=\"skeleton w-36 h-5 mb-3 rounded-md\"></div>\n \n <!-- List items placeholders -->\n <div class=\"space-y-2\">\n <div class=\"skeleton w-full h-4 rounded-md\"></div>\n <div class=\"skeleton w-2/3 h-4 rounded-md\"></div>\n </div>\n </div>\n </div>\n \n <!-- Action button placeholder -->\n <div class=\"flex justify-end mt-4\">\n <div class=\"skeleton w-36 h-10 rounded-md\"></div>\n </div>\n </div>\n </div>\n</div> " }]
|
|
1904
1913
|
}] });
|
|
1905
1914
|
|
|
1906
1915
|
class PaymentIntentItemComponent {
|
|
1907
|
-
paymentIntent = input.required();
|
|
1916
|
+
paymentIntent = input.required(...(ngDevMode ? [{ debugName: "paymentIntent" }] : []));
|
|
1908
1917
|
utils = inject(UtilsService);
|
|
1909
|
-
isExpanded = signal(false);
|
|
1918
|
+
isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
1910
1919
|
toggleExpand() {
|
|
1911
1920
|
this.isExpanded.update(value => !value);
|
|
1912
1921
|
}
|
|
1913
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1914
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1922
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1923
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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"] }] });
|
|
1915
1924
|
}
|
|
1916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemComponent, decorators: [{
|
|
1917
1926
|
type: Component,
|
|
1918
1927
|
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> " }]
|
|
1919
|
-
}] });
|
|
1928
|
+
}], propDecorators: { paymentIntent: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntent", required: true }] }] } });
|
|
1920
1929
|
|
|
1921
1930
|
class PaymentIntentsListComponent {
|
|
1922
|
-
paymentIntents = input.required();
|
|
1923
|
-
loading = input(false);
|
|
1924
|
-
error = input(null);
|
|
1925
|
-
withControls = input(true);
|
|
1931
|
+
paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : []));
|
|
1932
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1933
|
+
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1934
|
+
withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : []));
|
|
1926
1935
|
onRefresh = output();
|
|
1927
1936
|
trackByPaymentIntentId = (index, item) => item.id;
|
|
1928
1937
|
refreshPaymentIntents() {
|
|
1929
1938
|
this.onRefresh.emit();
|
|
1930
1939
|
}
|
|
1931
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1932
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1940
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1941
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PaymentIntentsListComponent, isStandalone: true, selector: "lib-payment-intents-list", 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: { 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 (paymentIntents().length > 0) {\n <span class=\"badge badge-soft badge-info\">{{ paymentIntents().length }} payment intents</span>\n }\n </div>\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 </div>\n }\n\n @if (loading()) {\n <div class=\"flex flex-col gap-4\">\n @for (item of [1,2,3]; track item) {\n <lib-payment-intent-item-skeleton></lib-payment-intent-item-skeleton>\n }\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 (paymentIntents().length > 0) {\n <div class=\"flex flex-col gap-4\">\n @for (paymentIntent of paymentIntents(); track paymentIntent.id) {\n <lib-payment-intent-item [paymentIntent]=\"paymentIntent\"></lib-payment-intent-item>\n }\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 hay payment intents recientes</h2>\n <p class=\"text-gray-600\">No se encontraron payment intents en tu historial.</p>\n </div>\n </div>\n </div>\n }\n</div> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentIntentItemSkeletonComponent, selector: "lib-payment-intent-item-skeleton" }, { kind: "component", type: PaymentIntentItemComponent, selector: "lib-payment-intent-item", inputs: ["paymentIntent"] }] });
|
|
1933
1942
|
}
|
|
1934
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1943
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsListComponent, decorators: [{
|
|
1935
1944
|
type: Component,
|
|
1936
1945
|
args: [{ selector: 'lib-payment-intents-list', standalone: true, imports: [
|
|
1937
1946
|
CommonModule,
|
|
1938
1947
|
PaymentIntentItemSkeletonComponent,
|
|
1939
1948
|
PaymentIntentItemComponent
|
|
1940
1949
|
], 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 (paymentIntents().length > 0) {\n <span class=\"badge badge-soft badge-info\">{{ paymentIntents().length }} payment intents</span>\n }\n </div>\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 </div>\n }\n\n @if (loading()) {\n <div class=\"flex flex-col gap-4\">\n @for (item of [1,2,3]; track item) {\n <lib-payment-intent-item-skeleton></lib-payment-intent-item-skeleton>\n }\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 (paymentIntents().length > 0) {\n <div class=\"flex flex-col gap-4\">\n @for (paymentIntent of paymentIntents(); track paymentIntent.id) {\n <lib-payment-intent-item [paymentIntent]=\"paymentIntent\"></lib-payment-intent-item>\n }\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 hay payment intents recientes</h2>\n <p class=\"text-gray-600\">No se encontraron payment intents en tu historial.</p>\n </div>\n </div>\n </div>\n }\n</div> " }]
|
|
1941
|
-
}] });
|
|
1950
|
+
}], propDecorators: { paymentIntents: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntents", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], withControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "withControls", required: false }] }], onRefresh: [{ type: i0.Output, args: ["onRefresh"] }] } });
|
|
1942
1951
|
|
|
1943
1952
|
class SubscriptionsComponent {
|
|
1944
1953
|
customerStore = inject(CustomerStore);
|
|
1945
1954
|
portalAccountStore = inject(PortalAccountStore);
|
|
1946
|
-
returnUrl = input(window.location.origin + '/account');
|
|
1955
|
+
returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
|
|
1947
1956
|
manageSubscription(customerId) {
|
|
1948
1957
|
this.portalAccountStore.createPortalSession(customerId, this.returnUrl());
|
|
1949
1958
|
}
|
|
@@ -1952,19 +1961,19 @@ class SubscriptionsComponent {
|
|
|
1952
1961
|
this.customerStore.loadSubscriptions(this.customerStore.customer().data?.id);
|
|
1953
1962
|
}
|
|
1954
1963
|
}
|
|
1955
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1956
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1964
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1965
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SubscriptionsComponent, isStandalone: true, selector: "lib-subscriptions", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mb-4 flex flex-col justify-between items-center\">\n <div class=\"mb-6 w-full\">\n <h2 class=\"text-2xl font-bold text-gray-800\">Subscriptions</h2>\n <p class=\"text-gray-600\">Manage your subscriptions and payments in one place</p>\n </div>\n <div class=\"controls mb-4 flex justify-between items-center w-full\">\n <div class=\"stats\">\n @if (customerStore.subscriptions.data().length > 0) {\n <span class=\"badge badge-soft badge-info\">{{ customerStore.subscriptions.data().length}} subscriptions</span>\n }\n </div>\n <button class=\"btn btn-sm btn-outline\" (click)=\"refreshSubscriptions()\">\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 Updated\n </button>\n </div>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n <lib-subscription-card\n [subscription]=\"customerStore.firstSubscription()\"\n [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n [error]=\"customerStore.subscriptions.error()\"\n (onManageSubscription)=\"manageSubscription($event)\">\n </lib-subscription-card>\n <lib-subscriptions-list\n [subscriptions]=\"customerStore.restSubscriptions()\"\n [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n [error]=\"customerStore.subscriptions.error()\"\n [withEmptyState]=\"false\"\n (onManageSubscription)=\"manageSubscription($event)\">\n </lib-subscriptions-list>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SubscriptionCardComponent, selector: "lib-subscription-card", inputs: ["subscription", "loading", "error"], outputs: ["onManageSubscription"] }, { kind: "component", type: SubscriptionsListComponent, selector: "lib-subscriptions-list", inputs: ["subscriptions", "loading", "error", "withEmptyState"], outputs: ["onManageSubscription"] }] });
|
|
1957
1966
|
}
|
|
1958
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1967
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsComponent, decorators: [{
|
|
1959
1968
|
type: Component,
|
|
1960
1969
|
args: [{ selector: 'lib-subscriptions', standalone: true, imports: [CommonModule, SubscriptionCardComponent, SubscriptionsListComponent], template: "<div class=\"mb-4 flex flex-col justify-between items-center\">\n <div class=\"mb-6 w-full\">\n <h2 class=\"text-2xl font-bold text-gray-800\">Subscriptions</h2>\n <p class=\"text-gray-600\">Manage your subscriptions and payments in one place</p>\n </div>\n <div class=\"controls mb-4 flex justify-between items-center w-full\">\n <div class=\"stats\">\n @if (customerStore.subscriptions.data().length > 0) {\n <span class=\"badge badge-soft badge-info\">{{ customerStore.subscriptions.data().length}} subscriptions</span>\n }\n </div>\n <button class=\"btn btn-sm btn-outline\" (click)=\"refreshSubscriptions()\">\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 Updated\n </button>\n </div>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n <lib-subscription-card\n [subscription]=\"customerStore.firstSubscription()\"\n [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n [error]=\"customerStore.subscriptions.error()\"\n (onManageSubscription)=\"manageSubscription($event)\">\n </lib-subscription-card>\n <lib-subscriptions-list\n [subscriptions]=\"customerStore.restSubscriptions()\"\n [loading]=\"customerStore.isSubscriptionsStatusLoading()\"\n [error]=\"customerStore.subscriptions.error()\"\n [withEmptyState]=\"false\"\n (onManageSubscription)=\"manageSubscription($event)\">\n </lib-subscriptions-list>\n</div>" }]
|
|
1961
|
-
}] });
|
|
1970
|
+
}], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
|
|
1962
1971
|
|
|
1963
1972
|
class CustomerDashboardComponent {
|
|
1964
1973
|
customerStore = inject(CustomerStore);
|
|
1965
|
-
returnUrl = input(window.location.origin + '/account');
|
|
1966
|
-
customer = computed(() => this.customerStore.customer().data);
|
|
1967
|
-
activeTab = signal('list');
|
|
1974
|
+
returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
|
|
1975
|
+
customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
|
|
1976
|
+
activeTab = signal('list', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
|
|
1968
1977
|
refreshPaymentIntents() {
|
|
1969
1978
|
this.customerStore.loadPaymentIntents(this.customerStore.customer().data?.id);
|
|
1970
1979
|
}
|
|
@@ -1974,10 +1983,10 @@ class CustomerDashboardComponent {
|
|
|
1974
1983
|
exportSelectedPaymentIntents(paymentIntents) {
|
|
1975
1984
|
console.log('[💰 CustomerDashboardComponent] exportSelectedPaymentIntents: ', paymentIntents);
|
|
1976
1985
|
}
|
|
1977
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1978
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1986
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CustomerDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1987
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CustomerDashboardComponent, isStandalone: true, selector: "lib-customer-dashboard", inputs: { returnUrl: { classPropertyName: "returnUrl", publicName: "returnUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"container flex flex-col gap-6 mx-auto\">\n <!-- Subscriptions Section -->\n <section class=\"flex flex-col\">\n <lib-subscriptions [returnUrl]=\"returnUrl()\"></lib-subscriptions>\n </section>\n\n <!-- Payment Intents Section with Tabs -->\n <section class=\"flex flex-col\">\n <header class=\"mb-4\">\n <h2 class=\"text-2xl font-bold text-gray-800\">Payment Intents</h2>\n <p class=\"text-gray-600\">Payment intents history. Select a tab to see the list or table view.</p>\n </header>\n\n <div role=\"tablist\" class=\"tabs tabs-box w-fit mb-4\">\n <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'list'\" (click)=\"setActiveTab('list')\">Lista</a>\n <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'table'\" (click)=\"setActiveTab('table')\">Tabla</a>\n </div>\n\n @if (activeTab() === 'list') {\n <lib-payment-intents-list\n [paymentIntents]=\"customerStore.paymentIntents.data()\"\n [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n [error]=\"customerStore.paymentIntents.error()\"\n (onRefresh)=\"refreshPaymentIntents()\">\n </lib-payment-intents-list>\n } @else {\n <lib-payment-intents-table\n [paymentIntents]=\"customerStore.paymentIntents.data()\"\n [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n [error]=\"customerStore.paymentIntents.error()\"\n (exportSelected)=\"exportSelectedPaymentIntents($event)\"\n (onRefresh)=\"refreshPaymentIntents()\">\n </lib-payment-intents-table>\n }\n </section>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaymentIntentsListComponent, selector: "lib-payment-intents-list", inputs: ["paymentIntents", "loading", "error", "withControls"], outputs: ["onRefresh"] }, { kind: "component", type: PaymentIntentsTableComponent, selector: "lib-payment-intents-table", inputs: ["paymentIntents", "loading", "error", "withControls"], outputs: ["exportSelected", "onRefresh"] }, { kind: "component", type: SubscriptionsComponent, selector: "lib-subscriptions", inputs: ["returnUrl"] }] });
|
|
1979
1988
|
}
|
|
1980
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1989
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CustomerDashboardComponent, decorators: [{
|
|
1981
1990
|
type: Component,
|
|
1982
1991
|
args: [{ selector: 'lib-customer-dashboard', standalone: true, imports: [
|
|
1983
1992
|
CommonModule,
|
|
@@ -1985,7 +1994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1985
1994
|
PaymentIntentsTableComponent,
|
|
1986
1995
|
SubscriptionsComponent
|
|
1987
1996
|
], template: "<div class=\"container flex flex-col gap-6 mx-auto\">\n <!-- Subscriptions Section -->\n <section class=\"flex flex-col\">\n <lib-subscriptions [returnUrl]=\"returnUrl()\"></lib-subscriptions>\n </section>\n\n <!-- Payment Intents Section with Tabs -->\n <section class=\"flex flex-col\">\n <header class=\"mb-4\">\n <h2 class=\"text-2xl font-bold text-gray-800\">Payment Intents</h2>\n <p class=\"text-gray-600\">Payment intents history. Select a tab to see the list or table view.</p>\n </header>\n\n <div role=\"tablist\" class=\"tabs tabs-box w-fit mb-4\">\n <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'list'\" (click)=\"setActiveTab('list')\">Lista</a>\n <a role=\"tab\" class=\"tab\" [class.tab-active]=\"activeTab() === 'table'\" (click)=\"setActiveTab('table')\">Tabla</a>\n </div>\n\n @if (activeTab() === 'list') {\n <lib-payment-intents-list\n [paymentIntents]=\"customerStore.paymentIntents.data()\"\n [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n [error]=\"customerStore.paymentIntents.error()\"\n (onRefresh)=\"refreshPaymentIntents()\">\n </lib-payment-intents-list>\n } @else {\n <lib-payment-intents-table\n [paymentIntents]=\"customerStore.paymentIntents.data()\"\n [loading]=\"customerStore.isPaymentIntentsStatusLoading()\"\n [error]=\"customerStore.paymentIntents.error()\"\n (exportSelected)=\"exportSelectedPaymentIntents($event)\"\n (onRefresh)=\"refreshPaymentIntents()\">\n </lib-payment-intents-table>\n }\n </section>\n</div>\n" }]
|
|
1988
|
-
}] });
|
|
1997
|
+
}], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
|
|
1989
1998
|
|
|
1990
1999
|
/*
|
|
1991
2000
|
* Public API Surface of ngx-supabase-stripe
|