@dotted-labs/ngx-supabase-stripe 0.2.1 → 0.2.3
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.
|
@@ -629,8 +629,8 @@ var Currency;
|
|
|
629
629
|
})(Currency || (Currency = {}));
|
|
630
630
|
|
|
631
631
|
const initialProductsState = {
|
|
632
|
-
products:
|
|
633
|
-
prices:
|
|
632
|
+
products: null,
|
|
633
|
+
prices: null,
|
|
634
634
|
status: 'idle',
|
|
635
635
|
error: null,
|
|
636
636
|
currency: Currency.EUR,
|
|
@@ -639,10 +639,10 @@ const ProductsStore = signalStore({ providedIn: 'root' }, withState(initialProdu
|
|
|
639
639
|
isStatusLoading: computed(() => state.status() === 'loading'),
|
|
640
640
|
isStatusSuccess: computed(() => state.status() === 'success'),
|
|
641
641
|
isStatusError: computed(() => state.status() === 'error'),
|
|
642
|
-
oneTimeproductsByCurrency: computed(() => state.products()
|
|
643
|
-
recurringProductsByCurrency: computed(() => state.products()
|
|
644
|
-
productsByCurrency: computed(() => state.products()
|
|
645
|
-
hasProducts: computed(() => state.products().length > 0),
|
|
642
|
+
oneTimeproductsByCurrency: computed(() => state.products()?.filter(product => product.prices.some(price => (price.details.type === 'one_time' && price.details.currency === state.currency()))) || []),
|
|
643
|
+
recurringProductsByCurrency: computed(() => state.products()?.filter(product => product.prices.some(price => (price.details.type === 'recurring' && price.details.currency === state.currency()))) || []),
|
|
644
|
+
productsByCurrency: computed(() => state.products()?.filter(product => product.prices.some(price => (price.details.currency === state.currency()))) || []),
|
|
645
|
+
hasProducts: computed(() => state.products() !== null && state.products().length > 0),
|
|
646
646
|
isError: computed(() => state.error())
|
|
647
647
|
})), withMethods((store, supabaseService = inject(SupabaseClientService)) => ({
|
|
648
648
|
/**
|
|
@@ -1372,11 +1372,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1372
1372
|
|
|
1373
1373
|
class ProductItemSkeletonComponent {
|
|
1374
1374
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1375
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ProductItemSkeletonComponent, isStandalone: true, selector: "lib-product-item-skeleton", ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl\">\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 }] });
|
|
1375
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", 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
1376
|
}
|
|
1377
1377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemSkeletonComponent, decorators: [{
|
|
1378
1378
|
type: Component,
|
|
1379
|
-
args: [{ selector: 'lib-product-item-skeleton', standalone: true, imports: [CommonModule], template: "<div class=\"card bg-base-100 shadow-xl\">\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> " }]
|
|
1379
|
+
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
1380
|
}] });
|
|
1381
1381
|
|
|
1382
1382
|
class UtilsService {
|
|
@@ -1446,11 +1446,11 @@ class ProductItemComponent {
|
|
|
1446
1446
|
this.priceSelected.emit(this.price()?.details);
|
|
1447
1447
|
}
|
|
1448
1448
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1449
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductItemComponent, isStandalone: true, selector: "lib-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl max-w-sm mx-auto rounded-3xl
|
|
1449
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductItemComponent, isStandalone: true, selector: "lib-product-item", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: true, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"card bg-base-100 shadow-xl max-w-sm mx-auto rounded-3xl 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
1450
|
}
|
|
1451
1451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemComponent, decorators: [{
|
|
1452
1452
|
type: Component,
|
|
1453
|
-
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
|
|
1453
|
+
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
1454
|
}] });
|
|
1455
1455
|
|
|
1456
1456
|
class ProductListComponent {
|
|
@@ -1466,11 +1466,11 @@ class ProductListComponent {
|
|
|
1466
1466
|
this.priceSelected.emit(price);
|
|
1467
1467
|
}
|
|
1468
1468
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1469
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductListComponent, isStandalone: true, selector: "stripe-product-list", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "@if (productsStore.isStatusLoading()) {\n <div class=\"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()) {\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" }] });
|
|
1469
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductListComponent, isStandalone: true, selector: "stripe-product-list", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelected: "productSelected", priceSelected: "priceSelected" }, ngImport: i0, template: "@if (productsStore.isStatusLoading()) {\n <div class=\"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
1470
|
}
|
|
1471
1471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
1472
1472
|
type: Component,
|
|
1473
|
-
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()) {\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" }]
|
|
1473
|
+
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
1474
|
}] });
|
|
1475
1475
|
|
|
1476
1476
|
class EmbeddedSubscriptionComponent {
|