@dotted-labs/ngx-supabase-stripe 0.2.3 → 0.3.0

package/README.md

@@ -1,19 +1,18 @@
-# ngx-supabase-stripe: Angular library for integrating Supabase and Stripe
+# ngx-supabase-stripe
 
-[![npm version](https://badge.fury.io/js/%40dotted-labs%2Fngx-supabase-auth.svg)](https://badge.fury.io/js/%40dotted-labs%2Fngx-supabase-auth)
+[![npm version](https://badge.fury.io/js/%40dotted-labs%2Fngx-supabase-stripe.svg)](https://badge.fury.io/js/%40dotted-labs%2Fngx-supabase-stripe)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-An Angular proyect for integrating Supabase and Stripe into your applications, providing ready-to-use components that simplify the implementation of payments and subscriptions.
+An Angular library for integrating Supabase and Stripe into your applications, providing ready-to-use components and Supabase Edge Functions that simplify the implementation of payments and subscriptions.
 
-## Proyects
+## Projects
 
-- [supabase-stripe-core](./projects/supabase-stripe-core)
-- [supabase-stripe-angular](./projects/supabase-stripe-angular) 
+| Project | Description |
+|---|---|
+| [`projects/ngx-supabase-stripe`](./projects/ngx-supabase-stripe) | Angular library with components, stores and services |
+| [`projects/supabase`](./projects/supabase) | Supabase project with Edge Functions and configuration |
 
-## Supabase-stripe-core
 
-A library for integrating Supabase and Stripe into your applications, providing ready-to-use components that simplify the implementation of payments and subscriptions.
+## Quick Start
 
-## Supabase-stripe-angular
-
-A library for integrating Supabase and Stripe into your Angular applications, providing ready-to-use components that simplify the implementation of payments and subscriptions.
+See the full setup guide in [`projects/ngx-supabase-stripe/README.md`](./projects/ngx-supabase-stripe/README.md).

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

@@ -1473,6 +1473,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             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 {
     subscriptionsStore = inject(SubscriptionsStore);
     customerStore = inject(CustomerStore);
@@ -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