@dotted-labs/ngx-supabase-stripe 0.3.0 → 0.4.0
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 +161 -163
- package/fesm2022/dotted-labs-ngx-supabase-stripe.mjs.map +1 -1
- package/package.json +5 -5
- package/types/dotted-labs-ngx-supabase-stripe.d.ts +2707 -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'
|
|
@@ -607,10 +607,10 @@ class StripeClientService {
|
|
|
607
607
|
return { paymentMethod: null, error: error };
|
|
608
608
|
}
|
|
609
609
|
}
|
|
610
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
611
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
610
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
611
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, providedIn: 'root' });
|
|
612
612
|
}
|
|
613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
613
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StripeClientService, decorators: [{
|
|
614
614
|
type: Injectable,
|
|
615
615
|
args: [{
|
|
616
616
|
providedIn: 'root',
|
|
@@ -1108,8 +1108,6 @@ const CustomerStore = signalStore({ providedIn: 'root' }, withState(initialCusto
|
|
|
1108
1108
|
paymentMethodsError: error.message
|
|
1109
1109
|
});
|
|
1110
1110
|
}
|
|
1111
|
-
else if (paymentMethod) {
|
|
1112
|
-
}
|
|
1113
1111
|
if (paymentMethod) {
|
|
1114
1112
|
patchState(state, upsertEntity(paymentMethod), {
|
|
1115
1113
|
paymentMethodsStatus: 'success',
|
|
@@ -1302,10 +1300,10 @@ const PortalAccountStore = signalStore({ providedIn: 'root' }, withState(initial
|
|
|
1302
1300
|
})));
|
|
1303
1301
|
|
|
1304
1302
|
class EmbeddedSkeletonComponent {
|
|
1305
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1303
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1304
|
+
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> " });
|
|
1307
1305
|
}
|
|
1308
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1306
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSkeletonComponent, decorators: [{
|
|
1309
1307
|
type: Component,
|
|
1310
1308
|
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> " }]
|
|
1311
1309
|
}] });
|
|
@@ -1313,9 +1311,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1313
1311
|
class EmbeddedCheckoutComponent {
|
|
1314
1312
|
checkoutStore = inject(CheckoutStore);
|
|
1315
1313
|
customerStore = inject(CustomerStore);
|
|
1316
|
-
priceId = input.required();
|
|
1317
|
-
returnPagePath = input('/return');
|
|
1318
|
-
customer = computed(() => this.customerStore.customer().data);
|
|
1314
|
+
priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : []));
|
|
1315
|
+
returnPagePath = input('/return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : []));
|
|
1316
|
+
customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
|
|
1319
1317
|
async ngOnInit() {
|
|
1320
1318
|
this.createCheckoutSession();
|
|
1321
1319
|
}
|
|
@@ -1332,19 +1330,19 @@ class EmbeddedCheckoutComponent {
|
|
|
1332
1330
|
ngOnDestroy() {
|
|
1333
1331
|
this.checkoutStore.destroyEmbeddedCheckout();
|
|
1334
1332
|
}
|
|
1335
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1336
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1333
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedCheckoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1334
|
+
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" }] });
|
|
1337
1335
|
}
|
|
1338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedCheckoutComponent, decorators: [{
|
|
1339
1337
|
type: Component,
|
|
1340
1338
|
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> " }]
|
|
1341
|
-
}] });
|
|
1339
|
+
}], propDecorators: { priceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceId", required: true }] }], returnPagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnPagePath", required: false }] }] } });
|
|
1342
1340
|
|
|
1343
1341
|
class ReturnPageComponent {
|
|
1344
1342
|
route = inject(ActivatedRoute);
|
|
1345
1343
|
router = inject(Router);
|
|
1346
1344
|
checkoutStore = inject(CheckoutStore);
|
|
1347
|
-
returnUrl = input('/');
|
|
1345
|
+
returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
|
|
1348
1346
|
async ngOnInit() {
|
|
1349
1347
|
this.route.queryParams.subscribe(async (params) => {
|
|
1350
1348
|
const sessionId = params['session_id'];
|
|
@@ -1362,19 +1360,19 @@ class ReturnPageComponent {
|
|
|
1362
1360
|
navigate() {
|
|
1363
1361
|
this.router.navigateByUrl(this.returnUrl());
|
|
1364
1362
|
}
|
|
1365
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1366
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1363
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1364
|
+
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 }] });
|
|
1367
1365
|
}
|
|
1368
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ReturnPageComponent, decorators: [{
|
|
1369
1367
|
type: Component,
|
|
1370
1368
|
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> " }]
|
|
1371
|
-
}] });
|
|
1369
|
+
}], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
|
|
1372
1370
|
|
|
1373
1371
|
class ProductItemSkeletonComponent {
|
|
1374
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1375
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1372
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1373
|
+
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 }] });
|
|
1376
1374
|
}
|
|
1377
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemSkeletonComponent, decorators: [{
|
|
1378
1376
|
type: Component,
|
|
1379
1377
|
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> " }]
|
|
1380
1378
|
}] });
|
|
@@ -1419,10 +1417,10 @@ class UtilsService {
|
|
|
1419
1417
|
return 'badge-ghost';
|
|
1420
1418
|
}
|
|
1421
1419
|
}
|
|
1422
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1423
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1420
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1421
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, providedIn: 'root' });
|
|
1424
1422
|
}
|
|
1425
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UtilsService, decorators: [{
|
|
1426
1424
|
type: Injectable,
|
|
1427
1425
|
args: [{
|
|
1428
1426
|
providedIn: 'root',
|
|
@@ -1430,33 +1428,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1430
1428
|
}] });
|
|
1431
1429
|
|
|
1432
1430
|
class ProductItemComponent {
|
|
1433
|
-
product = input.required();
|
|
1434
|
-
currency = input(Currency.EUR);
|
|
1431
|
+
product = input.required(...(ngDevMode ? [{ debugName: "product" }] : []));
|
|
1432
|
+
currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
|
|
1435
1433
|
productSelected = output();
|
|
1436
1434
|
priceSelected = output();
|
|
1437
1435
|
utils = inject(UtilsService);
|
|
1438
1436
|
sanitizer = inject(DomSanitizer);
|
|
1439
|
-
price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()));
|
|
1437
|
+
price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : []));
|
|
1440
1438
|
sanitizedImage = computed(() => {
|
|
1441
1439
|
const imageUrl = this.product().images?.[0];
|
|
1442
1440
|
return imageUrl ? this.sanitizer.bypassSecurityTrustUrl(imageUrl) : null;
|
|
1443
|
-
});
|
|
1441
|
+
}, ...(ngDevMode ? [{ debugName: "sanitizedImage" }] : []));
|
|
1444
1442
|
onSelect() {
|
|
1445
1443
|
this.productSelected.emit(this.product());
|
|
1446
1444
|
this.priceSelected.emit(this.price()?.details);
|
|
1447
1445
|
}
|
|
1448
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1449
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1446
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1447
|
+
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 }] });
|
|
1450
1448
|
}
|
|
1451
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1449
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemComponent, decorators: [{
|
|
1452
1450
|
type: Component,
|
|
1453
1451
|
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> " }]
|
|
1454
|
-
}] });
|
|
1452
|
+
}], 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"] }] } });
|
|
1455
1453
|
|
|
1456
1454
|
class ProductListComponent {
|
|
1457
1455
|
productsStore = inject(ProductsStore);
|
|
1458
|
-
products = input([]);
|
|
1459
|
-
currency = input(Currency.EUR);
|
|
1456
|
+
products = input([], ...(ngDevMode ? [{ debugName: "products" }] : []));
|
|
1457
|
+
currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
|
|
1460
1458
|
productSelected = output();
|
|
1461
1459
|
priceSelected = output();
|
|
1462
1460
|
onProductSelect(product) {
|
|
@@ -1465,26 +1463,26 @@ class ProductListComponent {
|
|
|
1465
1463
|
onPriceSelect(price) {
|
|
1466
1464
|
this.priceSelected.emit(price);
|
|
1467
1465
|
}
|
|
1468
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1469
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1466
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1467
|
+
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" }] });
|
|
1470
1468
|
}
|
|
1471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1469
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
1472
1470
|
type: Component,
|
|
1473
1471
|
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" }]
|
|
1474
|
-
}] });
|
|
1472
|
+
}], 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"] }] } });
|
|
1475
1473
|
|
|
1476
1474
|
class ProductItemButtonComponent {
|
|
1477
|
-
product = input.required();
|
|
1478
|
-
currency = input(Currency.EUR);
|
|
1479
|
-
buttonText = input('Buy now');
|
|
1480
|
-
buttonClass = input('btn btn-primary');
|
|
1481
|
-
showPrice = input(true);
|
|
1482
|
-
disabled = input(false);
|
|
1475
|
+
product = input.required(...(ngDevMode ? [{ debugName: "product" }] : []));
|
|
1476
|
+
currency = input(Currency.EUR, ...(ngDevMode ? [{ debugName: "currency" }] : []));
|
|
1477
|
+
buttonText = input('Buy now', ...(ngDevMode ? [{ debugName: "buttonText" }] : []));
|
|
1478
|
+
buttonClass = input('btn btn-primary', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
|
|
1479
|
+
showPrice = input(true, ...(ngDevMode ? [{ debugName: "showPrice" }] : []));
|
|
1480
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1483
1481
|
productSelected = output();
|
|
1484
1482
|
priceSelected = output();
|
|
1485
1483
|
utils = inject(UtilsService);
|
|
1486
|
-
price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()));
|
|
1487
|
-
isDisabled = computed(() => this.disabled() || !this.product().active);
|
|
1484
|
+
price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()), ...(ngDevMode ? [{ debugName: "price" }] : []));
|
|
1485
|
+
isDisabled = computed(() => this.disabled() || !this.product().active, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
1488
1486
|
displayText = computed(() => {
|
|
1489
1487
|
if (!this.product().active) {
|
|
1490
1488
|
return 'Inactive';
|
|
@@ -1501,7 +1499,7 @@ class ProductItemButtonComponent {
|
|
|
1501
1499
|
? `/${priceInfo.recurringInterval === 'month' ? 'mo' : 'yr'}`
|
|
1502
1500
|
: '';
|
|
1503
1501
|
return `${this.buttonText()} - ${formattedPrice}${suffix}`;
|
|
1504
|
-
});
|
|
1502
|
+
}, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
|
|
1505
1503
|
onSelect() {
|
|
1506
1504
|
if (this.isDisabled()) {
|
|
1507
1505
|
return;
|
|
@@ -1509,20 +1507,20 @@ class ProductItemButtonComponent {
|
|
|
1509
1507
|
this.productSelected.emit(this.product());
|
|
1510
1508
|
this.priceSelected.emit(this.price()?.details);
|
|
1511
1509
|
}
|
|
1512
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1513
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1510
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1511
|
+
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 }] });
|
|
1514
1512
|
}
|
|
1515
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProductItemButtonComponent, decorators: [{
|
|
1516
1514
|
type: Component,
|
|
1517
1515
|
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" }]
|
|
1518
|
-
}] });
|
|
1516
|
+
}], 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"] }] } });
|
|
1519
1517
|
|
|
1520
1518
|
class EmbeddedSubscriptionComponent {
|
|
1521
1519
|
subscriptionsStore = inject(SubscriptionsStore);
|
|
1522
1520
|
customerStore = inject(CustomerStore);
|
|
1523
|
-
priceId = input.required();
|
|
1524
|
-
returnPagePath = input('/subscription-return');
|
|
1525
|
-
customer = computed(() => this.customerStore.customer().data);
|
|
1521
|
+
priceId = input.required(...(ngDevMode ? [{ debugName: "priceId" }] : []));
|
|
1522
|
+
returnPagePath = input('/subscription-return', ...(ngDevMode ? [{ debugName: "returnPagePath" }] : []));
|
|
1523
|
+
customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
|
|
1526
1524
|
async ngOnInit() {
|
|
1527
1525
|
this.createSubscription();
|
|
1528
1526
|
}
|
|
@@ -1534,21 +1532,21 @@ class EmbeddedSubscriptionComponent {
|
|
|
1534
1532
|
ngOnDestroy() {
|
|
1535
1533
|
this.subscriptionsStore.destroyEmbeddedSubscription();
|
|
1536
1534
|
}
|
|
1537
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1538
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1535
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSubscriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1536
|
+
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" }] });
|
|
1539
1537
|
}
|
|
1540
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EmbeddedSubscriptionComponent, decorators: [{
|
|
1541
1539
|
type: Component,
|
|
1542
1540
|
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> " }]
|
|
1543
|
-
}] });
|
|
1541
|
+
}], propDecorators: { priceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceId", required: true }] }], returnPagePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnPagePath", required: false }] }] } });
|
|
1544
1542
|
|
|
1545
1543
|
class SubscriptionReturnPageComponent {
|
|
1546
1544
|
route = inject(ActivatedRoute);
|
|
1547
1545
|
router = inject(Router);
|
|
1548
1546
|
checkoutStore = inject(CheckoutStore);
|
|
1549
1547
|
subscriptionsStore = inject(SubscriptionsStore);
|
|
1550
|
-
sessionStatus = computed(() => this.checkoutStore.sessionStatus());
|
|
1551
|
-
returnUrl = input('/');
|
|
1548
|
+
sessionStatus = computed(() => this.checkoutStore.sessionStatus(), ...(ngDevMode ? [{ debugName: "sessionStatus" }] : []));
|
|
1549
|
+
returnUrl = input('/', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
|
|
1552
1550
|
async ngOnInit() {
|
|
1553
1551
|
this.route.queryParams.subscribe(async (params) => {
|
|
1554
1552
|
const sessionId = params['session_id'];
|
|
@@ -1566,17 +1564,17 @@ class SubscriptionReturnPageComponent {
|
|
|
1566
1564
|
navigate() {
|
|
1567
1565
|
this.router.navigateByUrl(this.returnUrl());
|
|
1568
1566
|
}
|
|
1569
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1567
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionReturnPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1568
|
+
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 }] });
|
|
1571
1569
|
}
|
|
1572
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionReturnPageComponent, decorators: [{
|
|
1573
1571
|
type: Component,
|
|
1574
1572
|
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>" }]
|
|
1575
|
-
}] });
|
|
1573
|
+
}], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
|
|
1576
1574
|
|
|
1577
1575
|
class BrandIconDirective {
|
|
1578
1576
|
el;
|
|
1579
|
-
paymentMethod = input.required({ alias: 'ngxBrandIcon' });
|
|
1577
|
+
paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxBrandIcon' });
|
|
1580
1578
|
constructor(el) {
|
|
1581
1579
|
this.el = el;
|
|
1582
1580
|
effect(() => {
|
|
@@ -1598,20 +1596,20 @@ class BrandIconDirective {
|
|
|
1598
1596
|
};
|
|
1599
1597
|
return brandIcons[brand || 'unknown'] || '💳';
|
|
1600
1598
|
}
|
|
1601
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1602
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1599
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandIconDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1600
|
+
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 });
|
|
1603
1601
|
}
|
|
1604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandIconDirective, decorators: [{
|
|
1605
1603
|
type: Directive,
|
|
1606
1604
|
args: [{
|
|
1607
1605
|
selector: '[ngxBrandIcon]',
|
|
1608
1606
|
standalone: true
|
|
1609
1607
|
}]
|
|
1610
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
1608
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxBrandIcon", required: true }] }] } });
|
|
1611
1609
|
|
|
1612
1610
|
class BrandNameDirective {
|
|
1613
1611
|
el;
|
|
1614
|
-
paymentMethod = input.required({ alias: 'ngxBrandName' });
|
|
1612
|
+
paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxBrandName' });
|
|
1615
1613
|
constructor(el) {
|
|
1616
1614
|
this.el = el;
|
|
1617
1615
|
effect(() => {
|
|
@@ -1633,20 +1631,20 @@ class BrandNameDirective {
|
|
|
1633
1631
|
};
|
|
1634
1632
|
return brandNames[brand || 'unknown'] || 'Tarjeta';
|
|
1635
1633
|
}
|
|
1636
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1637
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1634
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandNameDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1635
|
+
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 });
|
|
1638
1636
|
}
|
|
1639
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BrandNameDirective, decorators: [{
|
|
1640
1638
|
type: Directive,
|
|
1641
1639
|
args: [{
|
|
1642
1640
|
selector: '[ngxBrandName]',
|
|
1643
1641
|
standalone: true
|
|
1644
1642
|
}]
|
|
1645
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
1643
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxBrandName", required: true }] }] } });
|
|
1646
1644
|
|
|
1647
1645
|
class PaymentMethodTypeDirective {
|
|
1648
1646
|
el;
|
|
1649
|
-
paymentMethod = input.required({ alias: 'ngxPaymentMethodType' });
|
|
1647
|
+
paymentMethod = input.required({ ...(ngDevMode ? { debugName: "paymentMethod" } : {}), alias: 'ngxPaymentMethodType' });
|
|
1650
1648
|
constructor(el) {
|
|
1651
1649
|
this.el = el;
|
|
1652
1650
|
effect(() => {
|
|
@@ -1672,20 +1670,20 @@ class PaymentMethodTypeDirective {
|
|
|
1672
1670
|
};
|
|
1673
1671
|
return typeNames[this.paymentMethod().type] || 'Método de pago';
|
|
1674
1672
|
}
|
|
1675
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1676
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1673
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodTypeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1674
|
+
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 });
|
|
1677
1675
|
}
|
|
1678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodTypeDirective, decorators: [{
|
|
1679
1677
|
type: Directive,
|
|
1680
1678
|
args: [{
|
|
1681
1679
|
selector: '[ngxPaymentMethodType]',
|
|
1682
1680
|
standalone: true
|
|
1683
1681
|
}]
|
|
1684
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
1682
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxPaymentMethodType", required: true }] }] } });
|
|
1685
1683
|
|
|
1686
1684
|
class PaymentMethodComponent {
|
|
1687
|
-
paymentMethod = input.required();
|
|
1688
|
-
mode = input('detailed');
|
|
1685
|
+
paymentMethod = input.required(...(ngDevMode ? [{ debugName: "paymentMethod" }] : []));
|
|
1686
|
+
mode = input('detailed', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
1689
1687
|
get last4() {
|
|
1690
1688
|
return this.paymentMethod().card?.last4 || '****';
|
|
1691
1689
|
}
|
|
@@ -1721,41 +1719,41 @@ class PaymentMethodComponent {
|
|
|
1721
1719
|
get billingAddress() {
|
|
1722
1720
|
return this.paymentMethod().billing_details?.address;
|
|
1723
1721
|
}
|
|
1724
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1725
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1722
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1723
|
+
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" }] });
|
|
1726
1724
|
}
|
|
1727
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentMethodComponent, decorators: [{
|
|
1728
1726
|
type: Component,
|
|
1729
1727
|
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" }]
|
|
1730
|
-
}] });
|
|
1728
|
+
}], propDecorators: { paymentMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentMethod", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
1731
1729
|
|
|
1732
1730
|
class PaymentIntentsDialogComponent {
|
|
1733
|
-
paymentIntent = input.required();
|
|
1734
|
-
dialogId = input.required();
|
|
1731
|
+
paymentIntent = input.required(...(ngDevMode ? [{ debugName: "paymentIntent" }] : []));
|
|
1732
|
+
dialogId = input.required(...(ngDevMode ? [{ debugName: "dialogId" }] : []));
|
|
1735
1733
|
utils = new UtilsService();
|
|
1736
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1737
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1734
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1735
|
+
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"] }] });
|
|
1738
1736
|
}
|
|
1739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsDialogComponent, decorators: [{
|
|
1740
1738
|
type: Component,
|
|
1741
1739
|
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" }]
|
|
1742
|
-
}] });
|
|
1740
|
+
}], propDecorators: { paymentIntent: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntent", required: true }] }], dialogId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogId", required: true }] }] } });
|
|
1743
1741
|
|
|
1744
1742
|
class PaymentIntentsTableComponent {
|
|
1745
|
-
paymentIntents = input.required();
|
|
1743
|
+
paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : []));
|
|
1746
1744
|
paymentIntentsTable = computed(() => {
|
|
1747
1745
|
return this.paymentIntents().map(paymentIntent => ({
|
|
1748
1746
|
...paymentIntent,
|
|
1749
1747
|
selected: false
|
|
1750
1748
|
}));
|
|
1751
|
-
});
|
|
1752
|
-
loading = input(false);
|
|
1753
|
-
error = input(null);
|
|
1754
|
-
withControls = input(true);
|
|
1749
|
+
}, ...(ngDevMode ? [{ debugName: "paymentIntentsTable" }] : []));
|
|
1750
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1751
|
+
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1752
|
+
withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : []));
|
|
1755
1753
|
exportSelected = output();
|
|
1756
1754
|
onRefresh = output();
|
|
1757
1755
|
utils = inject(UtilsService);
|
|
1758
|
-
hasPaymentIntents = computed(() => this.paymentIntents() && this.paymentIntents().length > 0);
|
|
1756
|
+
hasPaymentIntents = computed(() => this.paymentIntents() && this.paymentIntents().length > 0, ...(ngDevMode ? [{ debugName: "hasPaymentIntents" }] : []));
|
|
1759
1757
|
trackByPaymentIntentId = (index, item) => item.id;
|
|
1760
1758
|
refreshPaymentIntents() {
|
|
1761
1759
|
this.onRefresh.emit();
|
|
@@ -1790,23 +1788,23 @@ class PaymentIntentsTableComponent {
|
|
|
1790
1788
|
exportSelectedPaymentIntents() {
|
|
1791
1789
|
this.exportSelected.emit(this.paymentIntentsTable().filter(paymentIntent => paymentIntent.selected));
|
|
1792
1790
|
}
|
|
1793
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1794
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1791
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1792
|
+
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"] }] });
|
|
1795
1793
|
}
|
|
1796
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsTableComponent, decorators: [{
|
|
1797
1795
|
type: Component,
|
|
1798
1796
|
args: [{ selector: 'lib-payment-intents-table', standalone: true, imports: [
|
|
1799
1797
|
CommonModule,
|
|
1800
1798
|
PaymentMethodComponent,
|
|
1801
1799
|
PaymentIntentsDialogComponent
|
|
1802
1800
|
], 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> " }]
|
|
1803
|
-
}] });
|
|
1801
|
+
}], 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"] }] } });
|
|
1804
1802
|
|
|
1805
1803
|
class SubscriptionItemSkeletonComponent {
|
|
1806
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1807
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1804
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1805
|
+
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 }] });
|
|
1808
1806
|
}
|
|
1809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1807
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemSkeletonComponent, decorators: [{
|
|
1810
1808
|
type: Component,
|
|
1811
1809
|
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>" }]
|
|
1812
1810
|
}] });
|
|
@@ -1816,12 +1814,12 @@ class SubscriptionItemComponent {
|
|
|
1816
1814
|
portalAccountStore = inject(PortalAccountStore);
|
|
1817
1815
|
utils = inject(UtilsService);
|
|
1818
1816
|
sanitizer = inject(DomSanitizer);
|
|
1819
|
-
subscription = input.required();
|
|
1817
|
+
subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : []));
|
|
1820
1818
|
onManageSubscription = output();
|
|
1821
|
-
isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading());
|
|
1819
|
+
isStatusLoading = computed(() => this.portalAccountStore.isStatusLoading(), ...(ngDevMode ? [{ debugName: "isStatusLoading" }] : []));
|
|
1822
1820
|
productImage = computed(() => {
|
|
1823
1821
|
return this.subscription().product?.images?.[0] || 'https://img.daisyui.com/images/profile/demo/yellingcat@192.webp';
|
|
1824
|
-
});
|
|
1822
|
+
}, ...(ngDevMode ? [{ debugName: "productImage" }] : []));
|
|
1825
1823
|
isExpanded = false;
|
|
1826
1824
|
toggleExpand() {
|
|
1827
1825
|
this.isExpanded = !this.isExpanded;
|
|
@@ -1832,44 +1830,44 @@ class SubscriptionItemComponent {
|
|
|
1832
1830
|
sanitizeImageUrl(imageUrl) {
|
|
1833
1831
|
return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
|
|
1834
1832
|
}
|
|
1835
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1836
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1833
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1834
|
+
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 }] });
|
|
1837
1835
|
}
|
|
1838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1836
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionItemComponent, decorators: [{
|
|
1839
1837
|
type: Component,
|
|
1840
1838
|
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> " }]
|
|
1841
|
-
}] });
|
|
1839
|
+
}], propDecorators: { subscription: [{ type: i0.Input, args: [{ isSignal: true, alias: "subscription", required: true }] }], onManageSubscription: [{ type: i0.Output, args: ["onManageSubscription"] }] } });
|
|
1842
1840
|
|
|
1843
1841
|
class SubscriptionsListComponent {
|
|
1844
|
-
subscriptions = input.required();
|
|
1845
|
-
loading = input(false);
|
|
1846
|
-
error = input(null);
|
|
1847
|
-
withEmptyState = input(true);
|
|
1842
|
+
subscriptions = input.required(...(ngDevMode ? [{ debugName: "subscriptions" }] : []));
|
|
1843
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1844
|
+
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1845
|
+
withEmptyState = input(true, ...(ngDevMode ? [{ debugName: "withEmptyState" }] : []));
|
|
1848
1846
|
onManageSubscription = output();
|
|
1849
1847
|
manageSubscription(customerId) {
|
|
1850
1848
|
this.onManageSubscription.emit(customerId);
|
|
1851
1849
|
}
|
|
1852
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1853
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1850
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1851
|
+
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" }] });
|
|
1854
1852
|
}
|
|
1855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
|
|
1856
1854
|
type: Component,
|
|
1857
1855
|
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> " }]
|
|
1858
|
-
}] });
|
|
1856
|
+
}], 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"] }] } });
|
|
1859
1857
|
|
|
1860
1858
|
class SubscriptionCardSkeletonComponent {
|
|
1861
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1862
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1859
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1860
|
+
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> " });
|
|
1863
1861
|
}
|
|
1864
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1862
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardSkeletonComponent, decorators: [{
|
|
1865
1863
|
type: Component,
|
|
1866
1864
|
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> " }]
|
|
1867
1865
|
}] });
|
|
1868
1866
|
|
|
1869
1867
|
class SubscriptionCardComponent {
|
|
1870
|
-
subscription = input.required();
|
|
1871
|
-
loading = input(false);
|
|
1872
|
-
error = input(null);
|
|
1868
|
+
subscription = input.required(...(ngDevMode ? [{ debugName: "subscription" }] : []));
|
|
1869
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1870
|
+
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1873
1871
|
utils = inject(UtilsService);
|
|
1874
1872
|
onManageSubscription = output();
|
|
1875
1873
|
hasValidProductImages() {
|
|
@@ -1888,64 +1886,64 @@ class SubscriptionCardComponent {
|
|
|
1888
1886
|
manageSubscription() {
|
|
1889
1887
|
this.onManageSubscription.emit(this.subscription().customer);
|
|
1890
1888
|
}
|
|
1891
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1892
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1889
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1890
|
+
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" }] });
|
|
1893
1891
|
}
|
|
1894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1892
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionCardComponent, decorators: [{
|
|
1895
1893
|
type: Component,
|
|
1896
1894
|
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" }]
|
|
1897
|
-
}] });
|
|
1895
|
+
}], 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"] }] } });
|
|
1898
1896
|
|
|
1899
1897
|
class PaymentIntentItemSkeletonComponent {
|
|
1900
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1901
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1898
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1899
|
+
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 }] });
|
|
1902
1900
|
}
|
|
1903
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemSkeletonComponent, decorators: [{
|
|
1904
1902
|
type: Component,
|
|
1905
1903
|
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> " }]
|
|
1906
1904
|
}] });
|
|
1907
1905
|
|
|
1908
1906
|
class PaymentIntentItemComponent {
|
|
1909
|
-
paymentIntent = input.required();
|
|
1907
|
+
paymentIntent = input.required(...(ngDevMode ? [{ debugName: "paymentIntent" }] : []));
|
|
1910
1908
|
utils = inject(UtilsService);
|
|
1911
|
-
isExpanded = signal(false);
|
|
1909
|
+
isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
1912
1910
|
toggleExpand() {
|
|
1913
1911
|
this.isExpanded.update(value => !value);
|
|
1914
1912
|
}
|
|
1915
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1916
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1913
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1914
|
+
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"] }] });
|
|
1917
1915
|
}
|
|
1918
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentItemComponent, decorators: [{
|
|
1919
1917
|
type: Component,
|
|
1920
1918
|
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> " }]
|
|
1921
|
-
}] });
|
|
1919
|
+
}], propDecorators: { paymentIntent: [{ type: i0.Input, args: [{ isSignal: true, alias: "paymentIntent", required: true }] }] } });
|
|
1922
1920
|
|
|
1923
1921
|
class PaymentIntentsListComponent {
|
|
1924
|
-
paymentIntents = input.required();
|
|
1925
|
-
loading = input(false);
|
|
1926
|
-
error = input(null);
|
|
1927
|
-
withControls = input(true);
|
|
1922
|
+
paymentIntents = input.required(...(ngDevMode ? [{ debugName: "paymentIntents" }] : []));
|
|
1923
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
1924
|
+
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
1925
|
+
withControls = input(true, ...(ngDevMode ? [{ debugName: "withControls" }] : []));
|
|
1928
1926
|
onRefresh = output();
|
|
1929
1927
|
trackByPaymentIntentId = (index, item) => item.id;
|
|
1930
1928
|
refreshPaymentIntents() {
|
|
1931
1929
|
this.onRefresh.emit();
|
|
1932
1930
|
}
|
|
1933
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1934
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1931
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1932
|
+
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"] }] });
|
|
1935
1933
|
}
|
|
1936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1934
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PaymentIntentsListComponent, decorators: [{
|
|
1937
1935
|
type: Component,
|
|
1938
1936
|
args: [{ selector: 'lib-payment-intents-list', standalone: true, imports: [
|
|
1939
1937
|
CommonModule,
|
|
1940
1938
|
PaymentIntentItemSkeletonComponent,
|
|
1941
1939
|
PaymentIntentItemComponent
|
|
1942
1940
|
], 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> " }]
|
|
1943
|
-
}] });
|
|
1941
|
+
}], 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"] }] } });
|
|
1944
1942
|
|
|
1945
1943
|
class SubscriptionsComponent {
|
|
1946
1944
|
customerStore = inject(CustomerStore);
|
|
1947
1945
|
portalAccountStore = inject(PortalAccountStore);
|
|
1948
|
-
returnUrl = input(window.location.origin + '/account');
|
|
1946
|
+
returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
|
|
1949
1947
|
manageSubscription(customerId) {
|
|
1950
1948
|
this.portalAccountStore.createPortalSession(customerId, this.returnUrl());
|
|
1951
1949
|
}
|
|
@@ -1954,19 +1952,19 @@ class SubscriptionsComponent {
|
|
|
1954
1952
|
this.customerStore.loadSubscriptions(this.customerStore.customer().data?.id);
|
|
1955
1953
|
}
|
|
1956
1954
|
}
|
|
1957
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1958
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1955
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1956
|
+
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"] }] });
|
|
1959
1957
|
}
|
|
1960
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SubscriptionsComponent, decorators: [{
|
|
1961
1959
|
type: Component,
|
|
1962
1960
|
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>" }]
|
|
1963
|
-
}] });
|
|
1961
|
+
}], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
|
|
1964
1962
|
|
|
1965
1963
|
class CustomerDashboardComponent {
|
|
1966
1964
|
customerStore = inject(CustomerStore);
|
|
1967
|
-
returnUrl = input(window.location.origin + '/account');
|
|
1968
|
-
customer = computed(() => this.customerStore.customer().data);
|
|
1969
|
-
activeTab = signal('list');
|
|
1965
|
+
returnUrl = input(window.location.origin + '/account', ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
|
|
1966
|
+
customer = computed(() => this.customerStore.customer().data, ...(ngDevMode ? [{ debugName: "customer" }] : []));
|
|
1967
|
+
activeTab = signal('list', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
|
|
1970
1968
|
refreshPaymentIntents() {
|
|
1971
1969
|
this.customerStore.loadPaymentIntents(this.customerStore.customer().data?.id);
|
|
1972
1970
|
}
|
|
@@ -1976,10 +1974,10 @@ class CustomerDashboardComponent {
|
|
|
1976
1974
|
exportSelectedPaymentIntents(paymentIntents) {
|
|
1977
1975
|
console.log('[💰 CustomerDashboardComponent] exportSelectedPaymentIntents: ', paymentIntents);
|
|
1978
1976
|
}
|
|
1979
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1980
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1977
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CustomerDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1978
|
+
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"] }] });
|
|
1981
1979
|
}
|
|
1982
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1980
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CustomerDashboardComponent, decorators: [{
|
|
1983
1981
|
type: Component,
|
|
1984
1982
|
args: [{ selector: 'lib-customer-dashboard', standalone: true, imports: [
|
|
1985
1983
|
CommonModule,
|
|
@@ -1987,7 +1985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1987
1985
|
PaymentIntentsTableComponent,
|
|
1988
1986
|
SubscriptionsComponent
|
|
1989
1987
|
], 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" }]
|
|
1990
|
-
}] });
|
|
1988
|
+
}], propDecorators: { returnUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUrl", required: false }] }] } });
|
|
1991
1989
|
|
|
1992
1990
|
/*
|
|
1993
1991
|
* Public API Surface of ngx-supabase-stripe
|