@dotted-labs/ngx-supabase-stripe 0.1.7 → 0.1.8

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, computed, Component, input, output, effect, signal } from '@angular/core';
+import { InjectionToken, inject, Injectable, computed, Component, input, output, signal } from '@angular/core';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { loadStripe } from '@stripe/stripe-js';
 import { createClient } from '@supabase/supabase-js';
@@ -310,6 +310,7 @@ class StripeClientService {
     config = inject(STRIPE_CONFIG);
     supabase = inject(SupabaseClientService);
     stripe;
+    embeddedCheckout = null;
     constructor() {
         this.stripe = loadStripe(this.config.publishableKey);
         console.log('🔌 [StripeClientService]: Loaded Stripe Client from @stripe/stripe-js');
@@ -320,6 +321,32 @@ class StripeClientService {
     async getStripe() {
         return this.stripe;
     }
+    /**
+     * Initialize the embedded checkout
+     * @param clientSecret The client secret for the checkout session
+     */
+    async initEmbeddedCheckout(clientSecret) {
+        const stripe = await this.getStripe();
+        this.embeddedCheckout = await stripe?.initEmbeddedCheckout({
+            clientSecret
+        }) ?? null;
+    }
+    /**
+     * Mount the embedded checkout
+     * @param elementId The ID of the element to mount the checkout on
+     */
+    mountEmbeddedCheckout(elementId = '#embedded-checkout') {
+        this.embeddedCheckout?.mount(elementId);
+    }
+    /**
+     * Destroy the embedded checkout
+     */
+    destroyEmbeddedCheckout() {
+        console.log('🧹 [StripeClientService] destroying embedded checkout');
+        this.embeddedCheckout?.destroy();
+        this.embeddedCheckout = null;
+        console.log('🧹 [StripeClientService] destroyed embedded checkout');
+    }
     /**
      * Create a checkout session
      * @param priceId The price ID for the subscription
@@ -646,7 +673,6 @@ function parseProduct(product, prices = []) {
 
 const initialSubscriptionState = {
     subscriptions: null,
-    embeddedSubscription: null,
     currentSubscription: null,
     status: 'idle',
     error: null,
@@ -687,13 +713,10 @@ const SubscriptionsStore = signalStore({ providedIn: 'root' }, withState(initial
                     });
                 }
                 else {
-                    const embeddedCheckout = await stripe.initEmbeddedCheckout({
-                        clientSecret: clientSecret
-                    });
-                    //embeddedCheckout?.mount('#embedded-checkout');
+                    await stripeService.initEmbeddedCheckout(clientSecret);
+                    stripeService.mountEmbeddedCheckout();
                     patchState(store, {
                         status: 'success',
-                        embeddedSubscription: embeddedCheckout
                     });
                 }
             }
@@ -807,9 +830,7 @@ const SubscriptionsStore = signalStore({ providedIn: 'root' }, withState(initial
      * Destroy the embedded subscription
      */
     destroyEmbeddedSubscription() {
-        console.log('🧹 [SubscriptionsStore] destroying embedded subscription', store.embeddedSubscription());
-        store.embeddedSubscription()?.destroy();
-        console.log('🧹 [SubscriptionsStore] destroyed embedded subscription', store.embeddedSubscription());
+        stripeService.destroyEmbeddedCheckout();
     },
     /**
      * Reset the store to initial state
@@ -979,7 +1000,6 @@ function parsePaymentIntent(paymentIntent) {
 }
 
 const initialCheckoutState = {
-    embeddedCheckout: null,
     status: 'idle',
     sessionId: null,
     returnPagePath: '/return',
@@ -1023,13 +1043,10 @@ const CheckoutStore = signalStore({ providedIn: 'root' }, withState(initialCheck
                     });
                 }
                 else {
-                    const embeddedCheckout = await stripe.initEmbeddedCheckout({
-                        clientSecret: clientSecret
-                    });
-                    embeddedCheckout?.mount('#embedded-checkout');
+                    await stripeService.initEmbeddedCheckout(clientSecret);
+                    stripeService.mountEmbeddedCheckout();
                     patchState(store, {
                         status: 'success',
-                        embeddedCheckout
                     });
                 }
             }
@@ -1064,9 +1081,7 @@ const CheckoutStore = signalStore({ providedIn: 'root' }, withState(initialCheck
      * Destroy the embedded checkout
      */
     destroyEmbeddedCheckout() {
-        console.log('🧹 [CheckoutStore] destroying embedded checkout', store.embeddedCheckout());
-        store.embeddedCheckout()?.destroy();
-        console.log('🧹 [CheckoutStore] destroyed embedded checkout', store.embeddedCheckout());
+        stripeService.destroyEmbeddedCheckout();
     },
     /**
      * Reset the store to initial state
@@ -1078,8 +1093,7 @@ const CheckoutStore = signalStore({ providedIn: 'root' }, withState(initialCheck
     onInit() {
         console.log('🔍 [CheckoutStore] initialized');
     },
-    onDestroy(store) {
-        store.embeddedCheckout()?.destroy();
+    onDestroy() {
         console.log('🧹 [CheckoutStore] destroyed');
     }
 }));
@@ -1255,15 +1269,6 @@ class EmbeddedSubscriptionComponent {
     priceId = input.required();
     returnPagePath = input('/subscription-return');
     customer = computed(() => this.customerStore.customer().data);
-    constructor() {
-        effect(() => {
-            const embeddedSubscription = this.subscriptionsStore.embeddedSubscription();
-            if (embeddedSubscription) {
-                console.log('🎯 [EmbeddedSubscriptionComponent] Mounting embedded subscription');
-                embeddedSubscription.mount('#embedded-checkout');
-            }
-        }, { allowSignalWrites: false });
-    }
     async ngOnInit() {
         this.createSubscription();
     }
@@ -1281,7 +1286,7 @@ class EmbeddedSubscriptionComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmbeddedSubscriptionComponent, decorators: [{
             type: Component,
             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> " }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class SubscriptionReturnPageComponent {
     route = inject(ActivatedRoute);