@moonbase.sh/vue 0.4.26 → 0.4.31

package/dist/index.cjs

@@ -136,6 +136,65 @@ function mountCheckout(endpoint) {
   };
 }
 
+// src/utils/iframe-subscription.ts
+var import_zod2 = require("zod");
+var closeEventSchema2 = import_zod2.z.object({
+  source: import_zod2.z.literal("moonbase-subscription"),
+  event: import_zod2.z.literal("close"),
+  completed: import_zod2.z.boolean()
+});
+var updatedPaymentMethodSchema = import_zod2.z.object({
+  source: import_zod2.z.literal("moonbase-subscription"),
+  event: import_zod2.z.literal("updated-payment-method")
+});
+var eventSchema2 = import_zod2.z.discriminatedUnion("event", [closeEventSchema2, updatedPaymentMethodSchema]);
+function mountSubscription(endpoint) {
+  if (typeof window === "undefined") {
+    console.warn("Can not mount subscription server side");
+    return;
+  }
+  if (document.getElementById("moonbase-subscription"))
+    return;
+  const iframe = document.createElement("iframe");
+  iframe.id = "moonbase-subscription";
+  iframe.src = endpoint;
+  iframe.style.position = "fixed";
+  iframe.style.top = "0px";
+  iframe.style.left = "0px";
+  iframe.style.right = "0px";
+  iframe.style.border = "none";
+  iframe.style.colorScheme = "normal";
+  iframe.style.backgroundColor = "transparent";
+  iframe.style.zIndex = Number.MAX_SAFE_INTEGER.toString();
+  iframe.setAttribute("background", "transparent");
+  iframe.setAttribute("frameborder", "0");
+  iframe.setAttribute("allowtransparency", "true");
+  iframe.setAttribute("allow", "payment");
+  iframe.height = "100%";
+  iframe.width = "100%";
+  document.body.append(iframe);
+  document.documentElement.style.overflow = "hidden";
+  window.onmessage = function(e) {
+    var _a;
+    try {
+      const evnt = eventSchema2.parse(e.data);
+      if (evnt.event === "close") {
+        if (document.body.contains(iframe)) {
+          document.documentElement.style.removeProperty("overflow");
+          document.body.removeChild(iframe);
+        }
+        window.dispatchEvent(new CustomEvent("moonbase-subscription-closed", {
+          detail: evnt
+        }));
+      }
+    } catch (err) {
+      if (((_a = e.data) == null ? void 0 : _a.source) === "moonbase-subscription") {
+        console.error("Could not parse event:", e.data, err);
+      }
+    }
+  };
+}
+
 // src/context.ts
 var _StorefrontContextImpl = class _StorefrontContextImpl {
   constructor(configuration, client, stateFactory) {
@@ -157,6 +216,7 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
       });
       this.storefront = stateFactory(_StorefrontContextImpl.storefrontKey, {
         suggestedCurrency: "",
+        enabledCurrencies: [],
         bundles: [],
         products: [],
         offers: []
@@ -211,6 +271,7 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     } else {
       this.storefront = stateFactory(_StorefrontContextImpl.storefrontKey, {
         suggestedCurrency: "",
+        enabledCurrencies: [],
         bundles: [],
         products: [],
         offers: []
@@ -235,6 +296,15 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
         mountCheckout(finalEndpoint.toString());
         window.history.replaceState(null, "", window.location.href.split("?")[0]);
       }
+      if (intent === "update_subscription" && urlParams2.get("mb_complete") && endpoint) {
+        const parameters = Object.fromEntries([...urlParams2.entries()].filter(([key]) => !key.startsWith("mb_")));
+        const finalEndpoint = new URL(decodeURIComponent(endpoint));
+        for (const prop of Object.keys(parameters)) {
+          finalEndpoint.searchParams.append(prop, parameters[prop]);
+        }
+        mountSubscription(finalEndpoint.toString());
+        window.history.replaceState(null, "", window.location.href.split("?")[0]);
+      }
     }
     window.addEventListener("moonbase-checkout-completed", (e) => {
       const order = e.detail.order;
@@ -295,13 +365,14 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     return this.currentUser.value;
   }
   async updateStorefront() {
+    var _a;
     const latestStorefront = await this.client.storefront.get(this.hasUtm ? this.utm.value : void 0);
     if (latestStorefront) {
       if (typeof window !== "undefined")
         localStorage.setItem(_StorefrontContextImpl.storefrontKey, JSON.stringify(latestStorefront));
       this.storefront.value = latestStorefront;
       this.loadedStorefront.value = true;
-      if (!this.currentOrder.value.currency) {
+      if (!this.currentOrder.value.currency || !((_a = latestStorefront.enabledCurrencies) == null ? void 0 : _a.includes(this.currentOrder.value.currency))) {
         this.currentOrder.value.currency = latestStorefront.suggestedCurrency;
       }
       this.currentOrder.value.items = this.enrichLineItems(this.currentOrder.value.items);
@@ -343,6 +414,7 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     }
   }
   async refreshOrder() {
+    var _a;
     try {
       const latestOrder = await this.client.orders.get(this.currentOrder.value.id, { abort: this.refreshOrderAbortController.signal });
       if (latestOrder) {
@@ -352,6 +424,9 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
           latestOrder.items = this.enrichLineItems(latestOrder.items);
           if (typeof window !== "undefined")
             localStorage.setItem(_StorefrontContextImpl.sessionKey, JSON.stringify(latestOrder));
+          if (this.storefront.value && !((_a = this.storefront.value.enabledCurrencies) == null ? void 0 : _a.includes(latestOrder.currency))) {
+            latestOrder.currency = this.storefront.value.suggestedCurrency;
+          }
           this.currentOrder.value = latestOrder;
         }
       }
@@ -638,7 +713,7 @@ function useCart(context) {
         const pickedVariation = variations.find((v) => v.id === item.variationId);
         price = (_i = (_h = pickedVariation == null ? void 0 : pickedVariation.price[currency]) != null ? _h : (_g = bundle == null ? void 0 : bundle.defaultVariation) == null ? void 0 : _g.price[currency]) != null ? _i : 0;
       }
-      const offer = (_j = storefront.storefront.value.offers) == null ? void 0 : _j.find((o) => o.id === item.offerId);
+      const offer = item.offerId ? (_j = storefront.storefront.value.offers) == null ? void 0 : _j.find((o) => o.id === item.offerId) : null;
       if (offer && import_storefront_api4.OfferUtils.eligible(offer, storefront.currentOrder.value)) {
         const offerDiscount = import_storefront_api4.DiscountUtils.apply(offer.discount, { [currency]: price });
         price -= offerDiscount[currency];
@@ -933,6 +1008,30 @@ function useInventory(context) {
           }, { once: true });
         });
       }
+    },
+    updateSubscriptionPaymentMethod: async (subscription, options) => {
+      var _a;
+      const fallbackPath = typeof window !== "undefined" ? window.location.pathname : "";
+      const absoluteReturnUrl = new URL((_a = options.returnUrl) != null ? _a : fallbackPath, document.baseURI).href;
+      const response = await storefront.client.inventory.subscriptions.getById(subscription.id, {
+        toUpdatePaymentMethod: true,
+        returnUrl: absoluteReturnUrl
+      });
+      window.dispatchEvent(new CustomEvent("moonbase-subscription-payment-method-update-initiated", {
+        detail: { subscription: (0, import_vue8.toRaw)(subscription) }
+      }));
+      if (response.embeddedUpdatePaymentUrl && typeof window !== "undefined") {
+        const embeddedUrl = response.embeddedUpdatePaymentUrl;
+        return new Promise((resolve) => {
+          mountSubscription(embeddedUrl.replace("acme-co.beta.moonbase.sh", "localhost:3002"));
+          window.addEventListener("moonbase-subscription-closed", (e) => {
+            const evnt = e;
+            resolve({ completed: evnt.detail.completed });
+          }, { once: true });
+        });
+      } else {
+        throw new Error("No update URL found");
+      }
     }
   };
 }

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as _moonbase_sh_storefront_api from '@moonbase.sh/storefront-api';
-import { MoonbaseConfiguration, Storefront, Order, User, UrchinTrackingModule, MoonbaseClient, LineItem, OpenOrder, Money, CompletedOrder, ActivationRequest, Address, CommunicationPreferences, StorefrontBundle, StorefrontProduct, PricingVariation, StorefrontOffer, ActivationMethod, Activation, Download, Vendor } from '@moonbase.sh/storefront-api';
+import { MoonbaseConfiguration, Storefront, Order, User, UrchinTrackingModule, MoonbaseClient, LineItem, OpenOrder, Money, CompletedOrder, ActivationRequest, Address, CommunicationPreferences, StorefrontBundle, StorefrontProduct, PricingVariation, StorefrontOffer, ActivationMethod, Activation, Download, Subscription, Vendor } from '@moonbase.sh/storefront-api';
 export * from '@moonbase.sh/storefront-api';
 import * as vue from 'vue';
 import { Ref, UnwrapRef, Plugin, App, MaybeRef, InjectionKey } from 'vue';
@@ -901,6 +901,8 @@ declare function useInventory(context?: StorefrontContext): {
                 }[] | undefined;
             };
         };
+        paymentMethod?: string | undefined;
+        embeddedUpdatePaymentUrl?: string | undefined;
     }>>;
     getSubscription: (subscriptionId: string) => Promise<{
         id: string;
@@ -1207,6 +1209,8 @@ declare function useInventory(context?: StorefrontContext): {
                 }[] | undefined;
             };
         };
+        paymentMethod?: string | undefined;
+        embeddedUpdatePaymentUrl?: string | undefined;
     }>;
     cancelSubscription: (subscriptionId: string) => Promise<{
         id: string;
@@ -1513,6 +1517,8 @@ declare function useInventory(context?: StorefrontContext): {
                 }[] | undefined;
             };
         };
+        paymentMethod?: string | undefined;
+        embeddedUpdatePaymentUrl?: string | undefined;
     }>;
     renewSubscription: (subscriptionId: string, options: {
         redirect: boolean;
@@ -1521,6 +1527,11 @@ declare function useInventory(context?: StorefrontContext): {
         next: string | undefined;
         completed: boolean;
     }>;
+    updateSubscriptionPaymentMethod: (subscription: Subscription, options: {
+        returnUrl?: string;
+    }) => Promise<{
+        completed: boolean;
+    } | undefined>;
 };
 
 declare function useOffer(offerId: string, context?: StorefrontContext): Ref<StorefrontOffer | null>;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _moonbase_sh_storefront_api from '@moonbase.sh/storefront-api';
-import { MoonbaseConfiguration, Storefront, Order, User, UrchinTrackingModule, MoonbaseClient, LineItem, OpenOrder, Money, CompletedOrder, ActivationRequest, Address, CommunicationPreferences, StorefrontBundle, StorefrontProduct, PricingVariation, StorefrontOffer, ActivationMethod, Activation, Download, Vendor } from '@moonbase.sh/storefront-api';
+import { MoonbaseConfiguration, Storefront, Order, User, UrchinTrackingModule, MoonbaseClient, LineItem, OpenOrder, Money, CompletedOrder, ActivationRequest, Address, CommunicationPreferences, StorefrontBundle, StorefrontProduct, PricingVariation, StorefrontOffer, ActivationMethod, Activation, Download, Subscription, Vendor } from '@moonbase.sh/storefront-api';
 export * from '@moonbase.sh/storefront-api';
 import * as vue from 'vue';
 import { Ref, UnwrapRef, Plugin, App, MaybeRef, InjectionKey } from 'vue';
@@ -901,6 +901,8 @@ declare function useInventory(context?: StorefrontContext): {
                 }[] | undefined;
             };
         };
+        paymentMethod?: string | undefined;
+        embeddedUpdatePaymentUrl?: string | undefined;
     }>>;
     getSubscription: (subscriptionId: string) => Promise<{
         id: string;
@@ -1207,6 +1209,8 @@ declare function useInventory(context?: StorefrontContext): {
                 }[] | undefined;
             };
         };
+        paymentMethod?: string | undefined;
+        embeddedUpdatePaymentUrl?: string | undefined;
     }>;
     cancelSubscription: (subscriptionId: string) => Promise<{
         id: string;
@@ -1513,6 +1517,8 @@ declare function useInventory(context?: StorefrontContext): {
                 }[] | undefined;
             };
         };
+        paymentMethod?: string | undefined;
+        embeddedUpdatePaymentUrl?: string | undefined;
     }>;
     renewSubscription: (subscriptionId: string, options: {
         redirect: boolean;
@@ -1521,6 +1527,11 @@ declare function useInventory(context?: StorefrontContext): {
         next: string | undefined;
         completed: boolean;
     }>;
+    updateSubscriptionPaymentMethod: (subscription: Subscription, options: {
+        returnUrl?: string;
+    }) => Promise<{
+        completed: boolean;
+    } | undefined>;
 };
 
 declare function useOffer(offerId: string, context?: StorefrontContext): Ref<StorefrontOffer | null>;

package/dist/index.js

@@ -104,6 +104,65 @@ function mountCheckout(endpoint) {
   };
 }
 
+// src/utils/iframe-subscription.ts
+import { z as z2 } from "zod";
+var closeEventSchema2 = z2.object({
+  source: z2.literal("moonbase-subscription"),
+  event: z2.literal("close"),
+  completed: z2.boolean()
+});
+var updatedPaymentMethodSchema = z2.object({
+  source: z2.literal("moonbase-subscription"),
+  event: z2.literal("updated-payment-method")
+});
+var eventSchema2 = z2.discriminatedUnion("event", [closeEventSchema2, updatedPaymentMethodSchema]);
+function mountSubscription(endpoint) {
+  if (typeof window === "undefined") {
+    console.warn("Can not mount subscription server side");
+    return;
+  }
+  if (document.getElementById("moonbase-subscription"))
+    return;
+  const iframe = document.createElement("iframe");
+  iframe.id = "moonbase-subscription";
+  iframe.src = endpoint;
+  iframe.style.position = "fixed";
+  iframe.style.top = "0px";
+  iframe.style.left = "0px";
+  iframe.style.right = "0px";
+  iframe.style.border = "none";
+  iframe.style.colorScheme = "normal";
+  iframe.style.backgroundColor = "transparent";
+  iframe.style.zIndex = Number.MAX_SAFE_INTEGER.toString();
+  iframe.setAttribute("background", "transparent");
+  iframe.setAttribute("frameborder", "0");
+  iframe.setAttribute("allowtransparency", "true");
+  iframe.setAttribute("allow", "payment");
+  iframe.height = "100%";
+  iframe.width = "100%";
+  document.body.append(iframe);
+  document.documentElement.style.overflow = "hidden";
+  window.onmessage = function(e) {
+    var _a;
+    try {
+      const evnt = eventSchema2.parse(e.data);
+      if (evnt.event === "close") {
+        if (document.body.contains(iframe)) {
+          document.documentElement.style.removeProperty("overflow");
+          document.body.removeChild(iframe);
+        }
+        window.dispatchEvent(new CustomEvent("moonbase-subscription-closed", {
+          detail: evnt
+        }));
+      }
+    } catch (err) {
+      if (((_a = e.data) == null ? void 0 : _a.source) === "moonbase-subscription") {
+        console.error("Could not parse event:", e.data, err);
+      }
+    }
+  };
+}
+
 // src/context.ts
 var _StorefrontContextImpl = class _StorefrontContextImpl {
   constructor(configuration, client, stateFactory) {
@@ -125,6 +184,7 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
       });
       this.storefront = stateFactory(_StorefrontContextImpl.storefrontKey, {
         suggestedCurrency: "",
+        enabledCurrencies: [],
         bundles: [],
         products: [],
         offers: []
@@ -179,6 +239,7 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     } else {
       this.storefront = stateFactory(_StorefrontContextImpl.storefrontKey, {
         suggestedCurrency: "",
+        enabledCurrencies: [],
         bundles: [],
         products: [],
         offers: []
@@ -203,6 +264,15 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
         mountCheckout(finalEndpoint.toString());
         window.history.replaceState(null, "", window.location.href.split("?")[0]);
       }
+      if (intent === "update_subscription" && urlParams2.get("mb_complete") && endpoint) {
+        const parameters = Object.fromEntries([...urlParams2.entries()].filter(([key]) => !key.startsWith("mb_")));
+        const finalEndpoint = new URL(decodeURIComponent(endpoint));
+        for (const prop of Object.keys(parameters)) {
+          finalEndpoint.searchParams.append(prop, parameters[prop]);
+        }
+        mountSubscription(finalEndpoint.toString());
+        window.history.replaceState(null, "", window.location.href.split("?")[0]);
+      }
     }
     window.addEventListener("moonbase-checkout-completed", (e) => {
       const order = e.detail.order;
@@ -263,13 +333,14 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     return this.currentUser.value;
   }
   async updateStorefront() {
+    var _a;
     const latestStorefront = await this.client.storefront.get(this.hasUtm ? this.utm.value : void 0);
     if (latestStorefront) {
       if (typeof window !== "undefined")
         localStorage.setItem(_StorefrontContextImpl.storefrontKey, JSON.stringify(latestStorefront));
       this.storefront.value = latestStorefront;
       this.loadedStorefront.value = true;
-      if (!this.currentOrder.value.currency) {
+      if (!this.currentOrder.value.currency || !((_a = latestStorefront.enabledCurrencies) == null ? void 0 : _a.includes(this.currentOrder.value.currency))) {
         this.currentOrder.value.currency = latestStorefront.suggestedCurrency;
       }
       this.currentOrder.value.items = this.enrichLineItems(this.currentOrder.value.items);
@@ -311,6 +382,7 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     }
   }
   async refreshOrder() {
+    var _a;
     try {
       const latestOrder = await this.client.orders.get(this.currentOrder.value.id, { abort: this.refreshOrderAbortController.signal });
       if (latestOrder) {
@@ -320,6 +392,9 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
           latestOrder.items = this.enrichLineItems(latestOrder.items);
           if (typeof window !== "undefined")
             localStorage.setItem(_StorefrontContextImpl.sessionKey, JSON.stringify(latestOrder));
+          if (this.storefront.value && !((_a = this.storefront.value.enabledCurrencies) == null ? void 0 : _a.includes(latestOrder.currency))) {
+            latestOrder.currency = this.storefront.value.suggestedCurrency;
+          }
           this.currentOrder.value = latestOrder;
         }
       }
@@ -606,7 +681,7 @@ function useCart(context) {
         const pickedVariation = variations.find((v) => v.id === item.variationId);
         price = (_i = (_h = pickedVariation == null ? void 0 : pickedVariation.price[currency]) != null ? _h : (_g = bundle == null ? void 0 : bundle.defaultVariation) == null ? void 0 : _g.price[currency]) != null ? _i : 0;
       }
-      const offer = (_j = storefront.storefront.value.offers) == null ? void 0 : _j.find((o) => o.id === item.offerId);
+      const offer = item.offerId ? (_j = storefront.storefront.value.offers) == null ? void 0 : _j.find((o) => o.id === item.offerId) : null;
       if (offer && OfferUtils2.eligible(offer, storefront.currentOrder.value)) {
         const offerDiscount = DiscountUtils.apply(offer.discount, { [currency]: price });
         price -= offerDiscount[currency];
@@ -840,7 +915,7 @@ async function useCheckout(items, options, context) {
 }
 
 // src/composables/useInventory.ts
-import { inject as inject7 } from "vue";
+import { inject as inject7, toRaw } from "vue";
 function useInventory(context) {
   const storefront = context != null ? context : inject7(storefrontKey);
   if (!storefront)
@@ -901,6 +976,30 @@ function useInventory(context) {
           }, { once: true });
         });
       }
+    },
+    updateSubscriptionPaymentMethod: async (subscription, options) => {
+      var _a;
+      const fallbackPath = typeof window !== "undefined" ? window.location.pathname : "";
+      const absoluteReturnUrl = new URL((_a = options.returnUrl) != null ? _a : fallbackPath, document.baseURI).href;
+      const response = await storefront.client.inventory.subscriptions.getById(subscription.id, {
+        toUpdatePaymentMethod: true,
+        returnUrl: absoluteReturnUrl
+      });
+      window.dispatchEvent(new CustomEvent("moonbase-subscription-payment-method-update-initiated", {
+        detail: { subscription: toRaw(subscription) }
+      }));
+      if (response.embeddedUpdatePaymentUrl && typeof window !== "undefined") {
+        const embeddedUrl = response.embeddedUpdatePaymentUrl;
+        return new Promise((resolve) => {
+          mountSubscription(embeddedUrl.replace("acme-co.beta.moonbase.sh", "localhost:3002"));
+          window.addEventListener("moonbase-subscription-closed", (e) => {
+            const evnt = e;
+            resolve({ completed: evnt.detail.completed });
+          }, { once: true });
+        });
+      } else {
+        throw new Error("No update URL found");
+      }
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@moonbase.sh/vue",
   "type": "module",
-  "version": "0.4.26",
+  "version": "0.4.31",
   "description": "Package to let you build vue.js storefronts with Moonbase.sh as payment and delivery provider",
   "author": "Tobias Lønnerød Madsen <m@dsen.tv>",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "@vue/devtools-api": "^6.6.3",
     "uuid": "^9.0.1",
     "zod": "^3.23.8",
-    "@moonbase.sh/storefront-api": "0.4.26"
+    "@moonbase.sh/storefront-api": "0.4.31"
   },
   "devDependencies": {
     "@types/uuid": "^9.0.8",