@moonbase.sh/vue 0.2.15 → 0.2.18

package/dist/index.cjs

@@ -57,6 +57,63 @@ function debounce(func, waitMs = 100) {
   return debounced;
 }
 
+// src/utils/iframe-checkout.ts
+var import_zod = require("zod");
+var closeEventSchema = import_zod.z.object({
+  source: import_zod.z.literal("moonbase-checkout"),
+  event: import_zod.z.literal("close"),
+  next: import_zod.z.string().optional()
+});
+var completedEventSchema = import_zod.z.object({
+  source: import_zod.z.literal("moonbase-checkout"),
+  event: import_zod.z.literal("completed")
+});
+var eventSchema = import_zod.z.discriminatedUnion("event", [closeEventSchema, completedEventSchema]);
+function mountCheckout(endpoint) {
+  if (typeof window === "undefined") {
+    console.warn("Can not mount checkout server side");
+    return;
+  }
+  const iframe = document.createElement("iframe");
+  iframe.id = "moonbase-checkout";
+  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.backgroundColor = "transparent";
+  iframe.style.zIndex = Number.MAX_SAFE_INTEGER.toString();
+  iframe.setAttribute("background", "transparent");
+  iframe.setAttribute("frameborder", "0");
+  iframe.setAttribute("allowtransparency", "true");
+  iframe.height = "100%";
+  iframe.width = "100%";
+  document.body.append(iframe);
+  window.onmessage = function(e) {
+    var _a;
+    try {
+      const evnt = eventSchema.parse(e.data);
+      if (evnt.event === "close") {
+        if (document.body.contains(iframe))
+          document.body.removeChild(iframe);
+        window.dispatchEvent(new CustomEvent("moonbase-checkout-closed", {
+          detail: evnt
+        }));
+      }
+      if (evnt.event === "completed") {
+        window.dispatchEvent(new CustomEvent("moonbase-checkout-completed", {
+          detail: evnt
+        }));
+      }
+    } catch (err) {
+      if (((_a = e.data) == null ? void 0 : _a.source) === "moonbase-checkout") {
+        console.error("Could not parse event:", e.data, err);
+      }
+    }
+  };
+}
+
 // src/context.ts
 var _StorefrontContextImpl = class _StorefrontContextImpl {
   constructor(configuration, client, stateFactory) {
@@ -125,6 +182,21 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     }
     const _2 = this.updateStorefront();
     const _3 = this.updateUser();
+    if (window.location) {
+      const urlParams2 = new URLSearchParams(window.location.search);
+      const intent = urlParams2.get("mb_intent");
+      const endpoint = urlParams2.get("mb_endpoint");
+      if (intent === "checkout" && 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]);
+        }
+        mountCheckout(finalEndpoint.toString());
+        window.history.replaceState(null, "", window.location.href.split("?")[0]);
+      }
+    }
+    window.addEventListener("moonbase-checkout-completed", () => this.resetOrder());
   }
   get loadedStorefrontPromise() {
     return new Promise((resolve) => {
@@ -142,6 +214,12 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
       }, { immediate: true });
     });
   }
+  onCheckoutCompleted(callback) {
+    window.addEventListener("moonbase-checkout-completed", () => callback());
+  }
+  onCheckoutClosed(callback) {
+    window.addEventListener("moonbase-checkout-closed", (e) => callback(e.detail.next));
+  }
   install(app) {
     app.provide(storefrontKey, this);
     console.log("Moonbase.sh storefront installed, learn more at https://moonbase.sh/docs");
@@ -529,11 +607,20 @@ function useCart(context) {
       const updatedOrder = await storefront.client.orders.pushContent(storefront.currentOrder.value, {
         returnUrl: absoluteReturnUrl
       });
-      storefront.currentOrder.value = updatedOrder;
-      if (updatedOrder.checkoutUrl && typeof window !== "undefined")
+      if (updatedOrder.embeddedCheckoutUrl && typeof window !== "undefined") {
+        const embeddedUrl = updatedOrder.embeddedCheckoutUrl;
+        return new Promise((resolve) => {
+          mountCheckout(embeddedUrl.replace("acme-co.beta.moonbase.sh", "localhost:3002"));
+          window.addEventListener("moonbase-checkout-closed", (e) => {
+            resolve({ next: e.detail.next });
+          });
+        });
+      } else if (updatedOrder.checkoutUrl && typeof window !== "undefined") {
         window.location.href = updatedOrder.checkoutUrl;
-      else
+        return { next: void 0 };
+      } else {
         throw new Error("No checkout URL found");
+      }
     }
   };
 }

package/dist/index.d.cts

@@ -19,6 +19,9 @@ interface StorefrontContext extends Pick<Plugin, keyof Plugin> {
     updateUser: () => Promise<void>;
     updateStorefront: () => Promise<void>;
     pushOrderContent: () => Promise<void>;
+    resetOrder: () => void;
+    onCheckoutCompleted: (callback: () => void) => void;
+    onCheckoutClosed: (callback: (next: string | undefined) => void) => void;
     /**
      * Called automatically by `app.use(storefront)`. Should not be called manually by
      * the user.
@@ -807,7 +810,9 @@ declare function useCart(context?: StorefrontContext): {
     addToCart: (item: StorefrontProduct | StorefrontBundle | Ref<StorefrontProduct> | Ref<StorefrontBundle>, variation?: PricingVariation) => void;
     setQuantity: (cartItem: CartItem, quantity: number) => void;
     removeFromCart: (cartItem: CartItem) => void;
-    checkout: (returnUrl: string) => Promise<void>;
+    checkout: (returnUrl: string) => Promise<{
+        next: string | undefined;
+    } | undefined>;
 };
 
 declare function useAuth(context?: StorefrontContext): {

package/dist/index.d.ts

@@ -19,6 +19,9 @@ interface StorefrontContext extends Pick<Plugin, keyof Plugin> {
     updateUser: () => Promise<void>;
     updateStorefront: () => Promise<void>;
     pushOrderContent: () => Promise<void>;
+    resetOrder: () => void;
+    onCheckoutCompleted: (callback: () => void) => void;
+    onCheckoutClosed: (callback: (next: string | undefined) => void) => void;
     /**
      * Called automatically by `app.use(storefront)`. Should not be called manually by
      * the user.
@@ -807,7 +810,9 @@ declare function useCart(context?: StorefrontContext): {
     addToCart: (item: StorefrontProduct | StorefrontBundle | Ref<StorefrontProduct> | Ref<StorefrontBundle>, variation?: PricingVariation) => void;
     setQuantity: (cartItem: CartItem, quantity: number) => void;
     removeFromCart: (cartItem: CartItem) => void;
-    checkout: (returnUrl: string) => Promise<void>;
+    checkout: (returnUrl: string) => Promise<{
+        next: string | undefined;
+    } | undefined>;
 };
 
 declare function useAuth(context?: StorefrontContext): {

package/dist/index.js

@@ -22,6 +22,63 @@ function debounce(func, waitMs = 100) {
   return debounced;
 }
 
+// src/utils/iframe-checkout.ts
+import { z } from "zod";
+var closeEventSchema = z.object({
+  source: z.literal("moonbase-checkout"),
+  event: z.literal("close"),
+  next: z.string().optional()
+});
+var completedEventSchema = z.object({
+  source: z.literal("moonbase-checkout"),
+  event: z.literal("completed")
+});
+var eventSchema = z.discriminatedUnion("event", [closeEventSchema, completedEventSchema]);
+function mountCheckout(endpoint) {
+  if (typeof window === "undefined") {
+    console.warn("Can not mount checkout server side");
+    return;
+  }
+  const iframe = document.createElement("iframe");
+  iframe.id = "moonbase-checkout";
+  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.backgroundColor = "transparent";
+  iframe.style.zIndex = Number.MAX_SAFE_INTEGER.toString();
+  iframe.setAttribute("background", "transparent");
+  iframe.setAttribute("frameborder", "0");
+  iframe.setAttribute("allowtransparency", "true");
+  iframe.height = "100%";
+  iframe.width = "100%";
+  document.body.append(iframe);
+  window.onmessage = function(e) {
+    var _a;
+    try {
+      const evnt = eventSchema.parse(e.data);
+      if (evnt.event === "close") {
+        if (document.body.contains(iframe))
+          document.body.removeChild(iframe);
+        window.dispatchEvent(new CustomEvent("moonbase-checkout-closed", {
+          detail: evnt
+        }));
+      }
+      if (evnt.event === "completed") {
+        window.dispatchEvent(new CustomEvent("moonbase-checkout-completed", {
+          detail: evnt
+        }));
+      }
+    } catch (err) {
+      if (((_a = e.data) == null ? void 0 : _a.source) === "moonbase-checkout") {
+        console.error("Could not parse event:", e.data, err);
+      }
+    }
+  };
+}
+
 // src/context.ts
 var _StorefrontContextImpl = class _StorefrontContextImpl {
   constructor(configuration, client, stateFactory) {
@@ -90,6 +147,21 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
     }
     const _2 = this.updateStorefront();
     const _3 = this.updateUser();
+    if (window.location) {
+      const urlParams2 = new URLSearchParams(window.location.search);
+      const intent = urlParams2.get("mb_intent");
+      const endpoint = urlParams2.get("mb_endpoint");
+      if (intent === "checkout" && 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]);
+        }
+        mountCheckout(finalEndpoint.toString());
+        window.history.replaceState(null, "", window.location.href.split("?")[0]);
+      }
+    }
+    window.addEventListener("moonbase-checkout-completed", () => this.resetOrder());
   }
   get loadedStorefrontPromise() {
     return new Promise((resolve) => {
@@ -107,6 +179,12 @@ var _StorefrontContextImpl = class _StorefrontContextImpl {
       }, { immediate: true });
     });
   }
+  onCheckoutCompleted(callback) {
+    window.addEventListener("moonbase-checkout-completed", () => callback());
+  }
+  onCheckoutClosed(callback) {
+    window.addEventListener("moonbase-checkout-closed", (e) => callback(e.detail.next));
+  }
   install(app) {
     app.provide(storefrontKey, this);
     console.log("Moonbase.sh storefront installed, learn more at https://moonbase.sh/docs");
@@ -494,11 +572,20 @@ function useCart(context) {
       const updatedOrder = await storefront.client.orders.pushContent(storefront.currentOrder.value, {
         returnUrl: absoluteReturnUrl
       });
-      storefront.currentOrder.value = updatedOrder;
-      if (updatedOrder.checkoutUrl && typeof window !== "undefined")
+      if (updatedOrder.embeddedCheckoutUrl && typeof window !== "undefined") {
+        const embeddedUrl = updatedOrder.embeddedCheckoutUrl;
+        return new Promise((resolve) => {
+          mountCheckout(embeddedUrl.replace("acme-co.beta.moonbase.sh", "localhost:3002"));
+          window.addEventListener("moonbase-checkout-closed", (e) => {
+            resolve({ next: e.detail.next });
+          });
+        });
+      } else if (updatedOrder.checkoutUrl && typeof window !== "undefined") {
         window.location.href = updatedOrder.checkoutUrl;
-      else
+        return { next: void 0 };
+      } else {
         throw new Error("No checkout URL found");
+      }
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@moonbase.sh/vue",
   "type": "module",
-  "version": "0.2.15",
+  "version": "0.2.18",
   "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",
@@ -18,7 +18,8 @@
   "dependencies": {
     "@vue/devtools-api": "^6.5.1",
     "uuid": "^9.0.1",
-    "@moonbase.sh/storefront-api": "0.2.15"
+    "zod": "^3.21.4",
+    "@moonbase.sh/storefront-api": "0.2.18"
   },
   "devDependencies": {
     "@types/uuid": "^9.0.7",