@betterstore/react 0.1.8 → 0.1.9

package/dist/index.mjs

@@ -0,0 +1,393 @@
+import { create } from 'zustand';
+import React, { memo, useState, useEffect } from 'react';
+import { useStripe, useElements, PaymentElement as PaymentElement$1, Elements } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+
+function createJSONStorage(getStorage, options) {
+  let storage;
+  try {
+    storage = getStorage();
+  } catch (e) {
+    return;
+  }
+  const persistStorage = {
+    getItem: (name) => {
+      var _a;
+      const parse = (str2) => {
+        if (str2 === null) {
+          return null;
+        }
+        return JSON.parse(str2, undefined );
+      };
+      const str = (_a = storage.getItem(name)) != null ? _a : null;
+      if (str instanceof Promise) {
+        return str.then(parse);
+      }
+      return parse(str);
+    },
+    setItem: (name, newValue) => storage.setItem(
+      name,
+      JSON.stringify(newValue, undefined )
+    ),
+    removeItem: (name) => storage.removeItem(name)
+  };
+  return persistStorage;
+}
+const toThenable = (fn) => (input) => {
+  try {
+    const result = fn(input);
+    if (result instanceof Promise) {
+      return result;
+    }
+    return {
+      then(onFulfilled) {
+        return toThenable(onFulfilled)(result);
+      },
+      catch(_onRejected) {
+        return this;
+      }
+    };
+  } catch (e) {
+    return {
+      then(_onFulfilled) {
+        return this;
+      },
+      catch(onRejected) {
+        return toThenable(onRejected)(e);
+      }
+    };
+  }
+};
+const persistImpl = (config, baseOptions) => (set, get, api) => {
+  let options = {
+    storage: createJSONStorage(() => localStorage),
+    partialize: (state) => state,
+    version: 0,
+    merge: (persistedState, currentState) => ({
+      ...currentState,
+      ...persistedState
+    }),
+    ...baseOptions
+  };
+  let hasHydrated = false;
+  const hydrationListeners = /* @__PURE__ */ new Set();
+  const finishHydrationListeners = /* @__PURE__ */ new Set();
+  let storage = options.storage;
+  if (!storage) {
+    return config(
+      (...args) => {
+        console.warn(
+          `[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`
+        );
+        set(...args);
+      },
+      get,
+      api
+    );
+  }
+  const setItem = () => {
+    const state = options.partialize({ ...get() });
+    return storage.setItem(options.name, {
+      state,
+      version: options.version
+    });
+  };
+  const savedSetState = api.setState;
+  api.setState = (state, replace) => {
+    savedSetState(state, replace);
+    void setItem();
+  };
+  const configResult = config(
+    (...args) => {
+      set(...args);
+      void setItem();
+    },
+    get,
+    api
+  );
+  api.getInitialState = () => configResult;
+  let stateFromStorage;
+  const hydrate = () => {
+    var _a, _b;
+    if (!storage) return;
+    hasHydrated = false;
+    hydrationListeners.forEach((cb) => {
+      var _a2;
+      return cb((_a2 = get()) != null ? _a2 : configResult);
+    });
+    const postRehydrationCallback = ((_b = options.onRehydrateStorage) == null ? undefined : _b.call(options, (_a = get()) != null ? _a : configResult)) || undefined;
+    return toThenable(storage.getItem.bind(storage))(options.name).then((deserializedStorageValue) => {
+      if (deserializedStorageValue) {
+        if (typeof deserializedStorageValue.version === "number" && deserializedStorageValue.version !== options.version) {
+          if (options.migrate) {
+            const migration = options.migrate(
+              deserializedStorageValue.state,
+              deserializedStorageValue.version
+            );
+            if (migration instanceof Promise) {
+              return migration.then((result) => [true, result]);
+            }
+            return [true, migration];
+          }
+          console.error(
+            `State loaded from storage couldn't be migrated since no migrate function was provided`
+          );
+        } else {
+          return [false, deserializedStorageValue.state];
+        }
+      }
+      return [false, undefined];
+    }).then((migrationResult) => {
+      var _a2;
+      const [migrated, migratedState] = migrationResult;
+      stateFromStorage = options.merge(
+        migratedState,
+        (_a2 = get()) != null ? _a2 : configResult
+      );
+      set(stateFromStorage, true);
+      if (migrated) {
+        return setItem();
+      }
+    }).then(() => {
+      postRehydrationCallback == null ? undefined : postRehydrationCallback(stateFromStorage, undefined);
+      stateFromStorage = get();
+      hasHydrated = true;
+      finishHydrationListeners.forEach((cb) => cb(stateFromStorage));
+    }).catch((e) => {
+      postRehydrationCallback == null ? undefined : postRehydrationCallback(undefined, e);
+    });
+  };
+  api.persist = {
+    setOptions: (newOptions) => {
+      options = {
+        ...options,
+        ...newOptions
+      };
+      if (newOptions.storage) {
+        storage = newOptions.storage;
+      }
+    },
+    clearStorage: () => {
+      storage == null ? undefined : storage.removeItem(options.name);
+    },
+    getOptions: () => options,
+    rehydrate: () => hydrate(),
+    hasHydrated: () => hasHydrated,
+    onHydrate: (cb) => {
+      hydrationListeners.add(cb);
+      return () => {
+        hydrationListeners.delete(cb);
+      };
+    },
+    onFinishHydration: (cb) => {
+      finishHydrationListeners.add(cb);
+      return () => {
+        finishHydrationListeners.delete(cb);
+      };
+    }
+  };
+  if (!options.skipHydration) {
+    hydrate();
+  }
+  return stateFromStorage || configResult;
+};
+const persist = persistImpl;
+
+const generateLineItemId = (item) => {
+    return btoa(JSON.stringify({
+        productId: item.productId,
+        variantOptions: item.variantOptions,
+        metadata: item.metadata,
+    }));
+};
+const useCart = create()(persist((set, get) => ({
+    lineItems: [],
+    addItem: (product, additionalParams) => set((state) => {
+        var _a, _b;
+        const productId = typeof product === "string" ? product : product === null || product === void 0 ? void 0 : product.id;
+        const formattedNewItem = Object.assign(Object.assign({ productId: productId }, (typeof product !== "string" && Object.assign({}, product))), { quantity: (_a = additionalParams === null || additionalParams === void 0 ? void 0 : additionalParams.quantity) !== null && _a !== void 0 ? _a : 1, variantOptions: (_b = additionalParams === null || additionalParams === void 0 ? void 0 : additionalParams.variantOptions) !== null && _b !== void 0 ? _b : [], metadata: additionalParams === null || additionalParams === void 0 ? void 0 : additionalParams.metadata });
+        const id = generateLineItemId(formattedNewItem);
+        const existingItemIndex = state.lineItems.findIndex((item) => item.id === id);
+        if (existingItemIndex !== -1) {
+            const updatedItems = [...state.lineItems];
+            updatedItems[existingItemIndex] = Object.assign(Object.assign({}, updatedItems[existingItemIndex]), { quantity: updatedItems[existingItemIndex].quantity +
+                    formattedNewItem.quantity });
+            return { lineItems: updatedItems };
+        }
+        return {
+            lineItems: [...state.lineItems, Object.assign(Object.assign({}, formattedNewItem), { id })],
+        };
+    }),
+    removeItem: (id) => set((state) => ({
+        lineItems: state.lineItems.filter((i) => i.id !== id),
+    })),
+    updateQuantity: (id, quantity) => set((state) => ({
+        lineItems: state.lineItems.map((i) => i.id === id ? Object.assign(Object.assign({}, i), { quantity }) : i),
+    })),
+    getProductQuantity: (productId) => {
+        const items = get().lineItems.filter((item) => item.productId === productId);
+        return items.reduce((acc, item) => acc + item.quantity, 0);
+    },
+    clearCart: () => set({ lineItems: [] }),
+}), {
+    name: "cart",
+}));
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
+    const subtotal = lineItems.reduce((acc, item) => {
+        var _a, _b;
+        return acc + ((_b = (_a = item.product) === null || _a === void 0 ? void 0 : _a.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
+    }, 0);
+    const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shipping !== null && shipping !== void 0 ? shipping : 0);
+    const formatPrice = (cents) => {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    };
+    return (React.createElement("div", { className: "bg-black text-white p-6 rounded-lg" },
+        lineItems.map((item, index) => {
+            var _a, _b, _c, _d, _e;
+            return (React.createElement("div", { key: index, className: "flex items-center mb-6" },
+                React.createElement("div", { className: "relative" },
+                    React.createElement("div", { className: "w-16 h-16 bg-zinc-900 rounded-lg overflow-hidden relative" }, ((_a = item.product) === null || _a === void 0 ? void 0 : _a.images[0]) ? (React.createElement("img", { src: item.product.images[0] || "/placeholder.svg", alt: ((_b = item.product) === null || _b === void 0 ? void 0 : _b.title) || "Product image", className: "object-cover" })) : (React.createElement("div", { className: "w-full h-full flex items-center justify-center bg-zinc-800" },
+                        React.createElement("span", { className: "text-zinc-500" }, "No image")))),
+                    React.createElement("div", { className: "absolute -top-2 -right-2 w-6 h-6 bg-zinc-700 rounded-full flex items-center justify-center text-sm" }, item.quantity)),
+                React.createElement("div", { className: "ml-4 flex-1" },
+                    React.createElement("h3", { className: "text-lg font-medium" }, ((_c = item.product) === null || _c === void 0 ? void 0 : _c.title) || "Product"),
+                    React.createElement("p", { className: "text-zinc-400 text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
+                React.createElement("div", { className: "text-right" },
+                    React.createElement("p", { className: "text-lg font-medium" }, formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0)))));
+        }),
+        React.createElement("div", { className: "border-t border-zinc-800 pt-4 mt-2" },
+            React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Subtotal"),
+                React.createElement("span", { className: "text-lg" }, formatPrice(subtotal))),
+            React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Shipping"),
+                React.createElement("span", { className: "text-zinc-400" }, shipping !== undefined
+                    ? formatPrice(shipping)
+                    : "Calculated at next step")),
+            tax !== undefined && (React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Tax"),
+                React.createElement("span", { className: "text-lg" }, formatPrice(tax)))),
+            React.createElement("div", { className: "flex justify-between py-4 mt-2 border-t border-zinc-800 items-center" },
+                React.createElement("span", { className: "text-2xl font-bold" }, "Total"),
+                React.createElement("div", { className: "text-right" },
+                    React.createElement("span", { className: "text-zinc-400 text-sm mr-2" }, currency),
+                    React.createElement("span", { className: "text-2xl font-bold" }, formatPrice(total)))))));
+}
+
+function CheckoutEmbed({ betterStore, checkoutId, }) {
+    const [checkout, setCheckout] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        function fetchCheckout() {
+            return __awaiter(this, void 0, void 0, function* () {
+                try {
+                    const data = yield betterStore.checkout.retrieve(checkoutId);
+                    setCheckout(data);
+                }
+                catch (error) {
+                    console.error("Failed to fetch checkout:", error);
+                }
+                finally {
+                    setLoading(false);
+                }
+            });
+        }
+        fetchCheckout();
+    }, [betterStore, checkoutId]);
+    if (loading) {
+        return React.createElement("div", null, "Loading...");
+    }
+    if (!checkout) {
+        return React.createElement("div", null, "Checkout not found");
+    }
+    return (React.createElement("div", { className: "grid md:grid-cols-2 gap-4" },
+        React.createElement("div", null, "forms here"),
+        React.createElement("div", null,
+            React.createElement(CheckoutSummary, { currency: checkout.currency, lineItems: checkout.lineItems, shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax }))));
+}
+var index$1 = memo(CheckoutEmbed);
+
+const useCheckout = create((set) => ({
+    isSubmitting: false,
+    setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
+}));
+
+const CheckoutForm = ({ onSuccess, onError, children, }) => {
+    const stripe = useStripe();
+    const elements = useElements();
+    const { setIsSubmitting } = useCheckout();
+    const [errorMessage, setErrorMessage] = useState(undefined);
+    const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        event.preventDefault();
+        if (!stripe || !elements) {
+            return;
+        }
+        setIsSubmitting(true);
+        const response = yield stripe.confirmPayment({
+            elements,
+            redirect: "if_required",
+        });
+        if (response.error) {
+            setErrorMessage(response.error.message || "Something went wrong.");
+            setIsSubmitting(false);
+            onError === null || onError === void 0 ? void 0 : onError();
+        }
+        else {
+            setErrorMessage(undefined);
+            setIsSubmitting(false);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+        }
+        setErrorMessage(undefined);
+        setIsSubmitting(false);
+    });
+    return (React.createElement("form", { onSubmit: handleSubmit },
+        React.createElement("div", null,
+            React.createElement(PaymentElement$1, null),
+            React.createElement("p", { className: "text-red-500" }, errorMessage)),
+        children));
+};
+var CheckoutForm$1 = memo(CheckoutForm);
+
+const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
+const stripePromise = loadStripe(publicStripeKey);
+function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }) {
+    const options = Object.assign(Object.assign({ locale: "en" }, (checkoutAppearance ? checkoutAppearance : {})), { clientSecret: paymentSecret });
+    return (React.createElement(Elements, { stripe: stripePromise, options: options },
+        React.createElement(CheckoutForm$1, { onSuccess: onSuccess, onError: onError, children: children })));
+}
+var index = memo(PaymentElement);
+
+export { index$1 as CheckoutEmbed, index as PaymentElement, useCart, useCheckout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {

package/rollup.config.mjs

@@ -13,8 +13,8 @@ export default {
       format: "cjs",
     },
     {
-      file: "dist/index.esm.js",
-      format: "esm",
+      file: "dist/index.mjs",
+      format: "es",
     },
   ],
   plugins: [
@@ -26,5 +26,12 @@ export default {
       plugins: [tailwindcss("./tailwind.config.js"), autoprefixer()],
     }),
   ],
-  external: ["react", "react-dom"],
+  external: [
+    "react",
+    "react-dom",
+    "@betterstore/sdk",
+    "@stripe/react-stripe-js",
+    "@stripe/stripe-js",
+    "zustand",
+  ],
 };