bitsnap-react 1.2.0 → 1.2.1

package/dist/index.js

@@ -142,7 +142,7 @@ function formatCurrency(amount, currency) {
 var import_zustand = require("zustand");
 var useCheckoutStore = (0, import_zustand.create)((set) => ({
   isCartVisible: false,
-  numberOfProductsInCart: 2,
+  numberOfProductsInCart: 0,
   showCart: () => set((state) => ({ ...state, isCartVisible: true })),
   hideCart: () => set((state) => ({ ...state, isCartVisible: false })),
   setNumberOfProductsInCart: (numberOfProductsInCart) => set((state) => ({ ...state, numberOfProductsInCart }))
@@ -386,6 +386,9 @@ function getNewHostIfExist() {
 }
 var CartProvider = ({ children }) => {
   const queryClient = new import_react_query.QueryClient();
+  (0, import_react.useEffect)(() => {
+    updateNumberOfProductsInCart();
+  }, []);
   const projectID = getProjectID();
   if (projectID == null) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
@@ -498,6 +501,7 @@ function addProducts(products) {
     metadata: el.metadata
   })));
   saveCheckout(checkout);
+  updateNumberOfProductsInCart();
 }
 function removeProductFromCheckout(ids) {
   var _a;
@@ -509,6 +513,7 @@ function removeProductFromCheckout(ids) {
     )
   };
   saveCheckout(newCheckout);
+  updateNumberOfProductsInCart();
 }
 function saveCheckout(model) {
   localStorage.setItem(checkoutKey, JSON.stringify(model));
@@ -616,6 +621,7 @@ var getCheckoutMethods = (projectID) => {
       const empty = structuredClone(emptyCheckout);
       empty.country = (_a = getCheckout()) == null ? void 0 : _a.country;
       saveCheckout(empty);
+      updateNumberOfProductsInCart();
     },
     async getAvailableCountries() {
       const result = await fetch(buildURL(projectID, "/countries"), {
@@ -697,6 +703,7 @@ var getCheckoutMethods = (projectID) => {
         return product;
       });
       saveCheckout(checkout);
+      updateNumberOfProductsInCart();
     },
     async redirectToNextStep() {
       const checkout = getCheckout();
@@ -1082,6 +1089,17 @@ function resolveProductDetailsFromSingleProduct(id, product) {
     images: (_d = variant.images) != null ? _d : product.images
   };
 }
+function updateNumberOfProductsInCart() {
+  var _a, _b;
+  const checkout = getCheckout();
+  let numberOfProductsInCart = 0;
+  if (checkout == null) {
+    useCheckoutStore.setState((state) => ({ ...state, numberOfProductsInCart }));
+    return;
+  }
+  numberOfProductsInCart = (_b = (_a = checkout.products) == null ? void 0 : _a.reduce((acc, product) => acc + product.quantity, 0)) != null ? _b : 0;
+  useCheckoutStore.setState((state) => ({ ...state, numberOfProductsInCart }));
+}
 
 // src/components/checkout/ApplePay.tsx
 var import_react_query2 = require("@tanstack/react-query");
@@ -1963,9 +1981,10 @@ function BitsnapCart({
   projectID,
   children,
   onVisibleChange,
-  className
+  className,
+  numberOfProductsInCartOptions
 }) {
-  const { isCartVisible, showCart, hideCart } = useCheckoutStore();
+  const { isCartVisible, showCart, hideCart, numberOfProductsInCart } = useCheckoutStore();
   function sentPostMessageToIframe(msg) {
     const iframes = document.querySelectorAll("iframe");
     iframes.forEach((iframe) => {
@@ -2080,31 +2099,57 @@ function BitsnapCart({
     }
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
         onClick: () => isCartVisible ? hideCart() : showCart(),
-        className: ["bitsnap-checkout", className != null ? className : "relative rounded-full hover:bg-neutral-300 transition p-1"].join(" "),
-        children: children ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            className: "lucide lucide-shopping-cart",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "8", cy: "21", r: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "19", cy: "21", r: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" })
-            ]
-          }
-        )
+        style: { position: "relative" },
+        className: ["bitsnap-checkout", className != null ? className : "rounded-full hover:bg-neutral-300 transition p-1"].join(" "),
+        children: [
+          children ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "lucide lucide-shopping-cart",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "8", cy: "21", r: "1" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "19", cy: "21", r: "1" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" })
+              ]
+            }
+          ),
+          (numberOfProductsInCartOptions == null ? void 0 : numberOfProductsInCartOptions.isVisible) != false && numberOfProductsInCart > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: -5,
+                right: -5,
+                background: "black",
+                color: "white",
+                borderRadius: "50%",
+                width: "22px",
+                height: "22px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "13px",
+                fontWeight: 600,
+                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.25)",
+                ...numberOfProductsInCartOptions == null ? void 0 : numberOfProductsInCartOptions.style
+              },
+              children: numberOfProductsInCart
+            }
+          )
+        ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(