bitsnap-react 1.2.0 → 1.2.1

package/dist/index.mjs

@@ -58,7 +58,7 @@ var PublicApiClient;
 
 // src/components/checkout/CartProvider.tsx
 import { create as create2 } from "@bufbuild/protobuf";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect } from "react";
 import zod from "zod";
 
 // src/components/checkout/constants.ts
@@ -99,7 +99,7 @@ function formatCurrency(amount, currency) {
 import { create } from "zustand";
 var useCheckoutStore = 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 }))
@@ -343,6 +343,9 @@ function getNewHostIfExist() {
 }
 var CartProvider = ({ children }) => {
   const queryClient = new QueryClient();
+  useEffect(() => {
+    updateNumberOfProductsInCart();
+  }, []);
   const projectID = getProjectID();
   if (projectID == null) {
     return /* @__PURE__ */ jsx(Fragment, {});
@@ -455,6 +458,7 @@ function addProducts(products) {
     metadata: el.metadata
   })));
   saveCheckout(checkout);
+  updateNumberOfProductsInCart();
 }
 function removeProductFromCheckout(ids) {
   var _a;
@@ -466,6 +470,7 @@ function removeProductFromCheckout(ids) {
     )
   };
   saveCheckout(newCheckout);
+  updateNumberOfProductsInCart();
 }
 function saveCheckout(model) {
   localStorage.setItem(checkoutKey, JSON.stringify(model));
@@ -573,6 +578,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"), {
@@ -654,6 +660,7 @@ var getCheckoutMethods = (projectID) => {
         return product;
       });
       saveCheckout(checkout);
+      updateNumberOfProductsInCart();
     },
     async redirectToNextStep() {
       const checkout = getCheckout();
@@ -1039,6 +1046,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
 import { useQuery } from "@tanstack/react-query";
@@ -1350,7 +1368,7 @@ function Wrapper2(props) {
 var GooglePay_default = Wrapper2;
 
 // src/components/checkout/BitsnapCart.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 import zod2 from "zod";
 
 // src/components/checkout/CartComponent.tsx
@@ -1363,7 +1381,7 @@ import React from "react";
 
 // src/components/checkout/CountrySelector.tsx
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
+import { useEffect as useEffect2, useRef, useState } from "react";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function CountrySelector({
   id,
@@ -1376,7 +1394,7 @@ function CountrySelector({
 }) {
   var _a;
   const ref = useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     const mutableRef = ref;
     const handleClickOutside = (event) => {
       if (mutableRef.current && // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -1391,7 +1409,7 @@ function CountrySelector({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [ref]);
-  useEffect(() => {
+  useEffect2(() => {
     if (selectedValue == null && countries.length > 0) {
       onChange(countries[0].code);
     }
@@ -1543,7 +1561,7 @@ function CountrySelector({
 var CountrySelector_default = CountrySelector;
 
 // src/components/checkout/SingleProduct.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var SingleProduct = ({ quantity, details, shouldUpdate }) => {
   var _a;
@@ -1567,7 +1585,7 @@ var QuantityComponent = ({
 }) => {
   const [quantityString, setQuantityString] = useState2(quantity.toString());
   const [quantityValue, setQuantityValue] = useState2(quantity);
-  useEffect2(() => {
+  useEffect3(() => {
     shouldUpdate(quantityValue);
   }, [quantityValue]);
   function setNewQuantity(newQuantity) {
@@ -1920,9 +1938,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) => {
@@ -1930,13 +1949,13 @@ function BitsnapCart({
       (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage(msg, "*");
     });
   }
-  useEffect3(() => {
+  useEffect4(() => {
     onVisibleChange == null ? void 0 : onVisibleChange(isCartVisible);
   }, [isCartVisible]);
-  useEffect3(() => {
+  useEffect4(() => {
     setProjectID(projectID);
   }, [projectID]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!("cart" in window)) {
       const projectID2 = getProjectID();
       if (projectID2 == null) {
@@ -2021,7 +2040,7 @@ function BitsnapCart({
       }
     });
   }
-  useEffect3(() => {
+  useEffect4(() => {
     var _a;
     setupEventListener();
     if (typeof window !== "undefined") {
@@ -2037,31 +2056,57 @@ function BitsnapCart({
     }
   }, []);
   return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs6(
       "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__ */ jsx10(Fragment6, { children }) : /* @__PURE__ */ jsxs6(
-          "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__ */ jsx10("circle", { cx: "8", cy: "21", r: "1" }),
-              /* @__PURE__ */ jsx10("circle", { cx: "19", cy: "21", r: "1" }),
-              /* @__PURE__ */ jsx10("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__ */ jsx10(Fragment6, { children }) : /* @__PURE__ */ jsxs6(
+            "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__ */ jsx10("circle", { cx: "8", cy: "21", r: "1" }),
+                /* @__PURE__ */ jsx10("circle", { cx: "19", cy: "21", r: "1" }),
+                /* @__PURE__ */ jsx10("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__ */ jsx10(
+            "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__ */ jsx10(