@dotted-labs/ngx-supabase-stripe 0.2.2 → 0.2.4

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

@@ -1466,11 +1466,55 @@ class ProductListComponent {
         this.priceSelected.emit(price);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ProductListComponent, isStandalone: true, selector: "stripe-product-list", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, 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" }] });
+    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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stripe-product-list', standalone: true, imports: [CommonModule, ProductItemComponent, ProductItemSkeletonComponent], template: "@if (productsStore.isStatusLoading()) {\n  <div class=\"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" }]
+            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" }]
+        }] });
+
+class ProductItemButtonComponent {
+    product = input.required();
+    currency = input(Currency.EUR);
+    buttonText = input('Buy now');
+    buttonClass = input('btn btn-primary');
+    showPrice = input(true);
+    disabled = input(false);
+    productSelected = output();
+    priceSelected = output();
+    utils = inject(UtilsService);
+    price = computed(() => this.product().prices.find(price => price.details.currency === this.currency()));
+    isDisabled = computed(() => this.disabled() || !this.product().active);
+    displayText = computed(() => {
+        if (!this.product().active) {
+            return 'Inactive';
+        }
+        if (!this.showPrice()) {
+            return this.buttonText();
+        }
+        const priceInfo = this.price();
+        if (!priceInfo) {
+            return this.buttonText();
+        }
+        const formattedPrice = this.utils.formatAmount(priceInfo.details?.unit_amount ?? 0, priceInfo.details?.currency ?? 'EUR');
+        const suffix = priceInfo.details?.type === 'recurring'
+            ? `/${priceInfo.recurringInterval === 'month' ? 'mo' : 'yr'}`
+            : '';
+        return `${this.buttonText()} - ${formattedPrice}${suffix}`;
+    });
+    onSelect() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.productSelected.emit(this.product());
+        this.priceSelected.emit(this.price()?.details);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.5", 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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ProductItemButtonComponent, decorators: [{
+            type: Component,
+            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" }]
         }] });
 
 class EmbeddedSubscriptionComponent {
@@ -1954,5 +1998,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CheckoutStore, Currency, CustomerDashboardComponent, CustomerStore, EmbeddedCheckoutComponent, EmbeddedSubscriptionComponent, PaymentIntentsListComponent, PaymentIntentsTableComponent, PortalAccountStore, ProductListComponent, ProductsStore, ReturnPageComponent, STRIPE_CONFIG, SUPABASE_CONFIG, StripeClientService, SubscriptionCardComponent, SubscriptionReturnPageComponent, SubscriptionsListComponent, SubscriptionsStore, SupabaseClientService, parsePaymentIntent, parseProduct, parseSubscription, provideNgxSupabaseStripeConfig, provideStripeConfig, provideSupabaseConfig };
+export { CheckoutStore, Currency, CustomerDashboardComponent, CustomerStore, EmbeddedCheckoutComponent, EmbeddedSubscriptionComponent, PaymentIntentsListComponent, PaymentIntentsTableComponent, PortalAccountStore, ProductItemButtonComponent, ProductListComponent, ProductsStore, ReturnPageComponent, STRIPE_CONFIG, SUPABASE_CONFIG, StripeClientService, SubscriptionCardComponent, SubscriptionReturnPageComponent, SubscriptionsListComponent, SubscriptionsStore, SupabaseClientService, parsePaymentIntent, parseProduct, parseSubscription, provideNgxSupabaseStripeConfig, provideStripeConfig, provideSupabaseConfig };
 //# sourceMappingURL=dotted-labs-ngx-supabase-stripe.mjs.map