bitsnap-react 1.0.0 → 1.2.1

package/dist/index.js

@@ -102,7 +102,6 @@ var PublicApiClient;
 // src/components/checkout/CartProvider.tsx
 var import_protobuf = require("@bufbuild/protobuf");
 var import_react = require("react");
-var import_react_query = require("react-query");
 var import_zod = __toESM(require("zod"));
 
 // src/components/checkout/constants.ts
@@ -143,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 }))
@@ -360,6 +359,7 @@ function mapGooglePayDisplayItems(items, methods, deliveryMethod, couponCode, co
 }
 
 // src/components/checkout/CartProvider.tsx
+var import_react_query = require("@tanstack/react-query");
 var import_jsx_runtime = require("react/jsx-runtime");
 var MARKETING_AGREEMENT_ID = "__m_a";
 var CartProviderContext = (0, import_react.createContext)(void 0);
@@ -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,9 +1089,20 @@ 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("react-query");
+var import_react_query2 = require("@tanstack/react-query");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick }) {
   const {
@@ -1098,7 +1116,10 @@ function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick
     setPostalCode,
     clearCart
   } = useCartProvider();
-  const { data: isApplePayAvailable } = (0, import_react_query2.useQuery)("is-apple-pay-available", checkIfApplePayIsAvailable);
+  const { data: isApplePayAvailable } = (0, import_react_query2.useQuery)({
+    queryKey: ["is-apple-pay-available"],
+    queryFn: checkIfApplePayIsAvailable
+  });
   if (isApplePayAvailable != true) {
     return null;
   }
@@ -1271,8 +1292,34 @@ var ApplePay_default = Wrapper;
 
 // src/components/checkout/GooglePay.tsx
 var import_button_react = __toESM(require("@google-pay/button-react"));
-var import_react_query3 = require("react-query");
+
+// src/ui/spinner.tsx
+var import_lucide_react = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/ui/spinner.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_lucide_react.Loader2Icon,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+
+// src/components/checkout/GooglePay.tsx
+var import_react_query3 = require("@tanstack/react-query");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, test }) {
   const {
     getGooglePayConfiguration,
@@ -1284,20 +1331,25 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
     setPostalCode,
     clearCart
   } = useCartProvider();
-  const { data: googlePayConfiguration } = (0, import_react_query3.useQuery)(["get-google-pay-configuration", items.map((el) => el.id).join(",")], () => getGooglePayConfiguration({
-    items: items.map((el) => ({
-      ...el,
-      id: void 0,
-      productID: el.id
-    }))
-  }));
-  const { mutateAsync: completeGooglePayPaymentAsync, isLoading } = (0, import_react_query3.useMutation)(completeGooglePayPayment);
+  const { data: googlePayConfiguration } = (0, import_react_query3.useQuery)({
+    queryKey: ["get-google-pay-configuration", items.map((el) => el.id).join(",")],
+    queryFn: () => getGooglePayConfiguration({
+      items: items.map((el) => ({
+        ...el,
+        id: void 0,
+        productID: el.id
+      }))
+    })
+  });
+  const { mutateAsync: completeGooglePayPaymentAsync, isPending } = (0, import_react_query3.useMutation)({
+    mutationFn: completeGooglePayPayment
+  });
   if (googlePayConfiguration == null || googlePayConfiguration.isAvailable != true) {
     console.log("google pay configuration is not available", googlePayConfiguration);
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_button_react.default,
       {
         buttonSizeMode,
@@ -1350,11 +1402,11 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
         }
       }
     ),
-    isLoading ? "\u0141adowanie..." : null
+    isPending ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, {}) : null
   ] });
 }
 function Wrapper2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CartProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GooglePayButtonComponent, { ...props }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CartProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GooglePayButtonComponent, { ...props }) }) });
 }
 var GooglePay_default = Wrapper2;
 
@@ -1369,12 +1421,11 @@ var import_react_dom = require("react-dom");
 // src/components/checkout/CartComponentContent.tsx
 var import_react4 = require("@formkit/auto-animate/react");
 var import_react5 = __toESM(require("react"));
-var import_react_query4 = require("react-query");
 
 // src/components/checkout/CountrySelector.tsx
 var import_framer_motion = require("framer-motion");
 var import_react2 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function CountrySelector({
   id,
   open: open2,
@@ -1407,8 +1458,8 @@ function CountrySelector({
     }
   }, []);
   const [query, setQuery] = (0, import_react2.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
         type: "button",
@@ -1419,8 +1470,8 @@ function CountrySelector({
         onClick: onToggle,
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "truncate flex items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "truncate flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "img",
               {
                 alt: `${selectedValue}`,
@@ -1430,11 +1481,11 @@ function CountrySelector({
             ),
             (_a = countries.find((el) => el.code === selectedValue)) == null ? void 0 : _a.name
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "span",
             {
               className: `absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none ${disabled ? "hidden" : ""}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "svg",
                 {
                   className: "h-5 w-5 text-light-purple",
@@ -1442,7 +1493,7 @@ function CountrySelector({
                   viewBox: "0 0 20 20",
                   fill: "currentColor",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "path",
                     {
                       fillRule: "evenodd",
@@ -1457,7 +1508,7 @@ function CountrySelector({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_framer_motion.AnimatePresence, { children: open2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_framer_motion.AnimatePresence, { children: open2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_framer_motion.motion.ul,
       {
         initial: { opacity: 0 },
@@ -1470,8 +1521,8 @@ function CountrySelector({
         "aria-labelledby": "listbox-label",
         "aria-activedescendant": "listbox-option-3",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "sticky top-0 z-10 bg-white dark:bg-neutral-800", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: "dark:text-neutral-200 text-neutral-900 cursor-default select-none relative py-2 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "sticky top-0 z-10 bg-white dark:bg-neutral-800", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "dark:text-neutral-200 text-neutral-900 cursor-default select-none relative py-2 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "input",
               {
                 type: "search",
@@ -1482,18 +1533,18 @@ function CountrySelector({
                 onChange: (e) => setQuery(e.target.value)
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("hr", {})
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               className: "max-h-64 scrollbar scrollbar-track-gray-100 scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-600 scrollbar-thumb-rounded scrollbar-thin overflow-y-scroll",
               children: countries.filter(
                 (country) => country.name.toLowerCase().startsWith(query.toLowerCase())
-              ).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: "text-light-purple cursor-default select-none relative py-2 pl-3 pr-9", children: "No countries found" }) : countries.filter(
+              ).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "text-light-purple cursor-default select-none relative py-2 pl-3 pr-9", children: "No countries found" }) : countries.filter(
                 (country) => country.name.toLowerCase().startsWith(query.toLowerCase())
               ).map((value, index) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "li",
                   {
                     className: "text-dark-blue cursor-default select-none relative py-2 pl-3 pr-9 flex items-center hover:bg-extra-light-white transition",
@@ -1505,7 +1556,7 @@ function CountrySelector({
                       onToggle();
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "img",
                         {
                           alt: `${value.code}`,
@@ -1513,12 +1564,12 @@ function CountrySelector({
                           className: "inline mr-2 h-4 rounded-sm"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-normal truncate", children: value.name }),
-                      value.code === selectedValue ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-normal truncate", children: value.name }),
+                      value.code === selectedValue ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "span",
                         {
                           className: "text-blue-600 absolute inset-y-0 right-0 flex items-center pr-8",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                             "svg",
                             {
                               className: "h-5 w-5",
@@ -1526,7 +1577,7 @@ function CountrySelector({
                               viewBox: "0 0 20 20",
                               fill: "currentColor",
                               "aria-hidden": "true",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                 "path",
                                 {
                                   fillRule: "evenodd",
@@ -1554,17 +1605,17 @@ var CountrySelector_default = CountrySelector;
 
 // src/components/checkout/SingleProduct.tsx
 var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var SingleProduct = ({ quantity, details, shouldUpdate }) => {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { className: "aspect-auto max-w-[30%] max-w-32 max-h-32", src: (_a = details.image_url) != null ? _a : "", alt: details.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-medium", children: details.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm", children: formatCurrency(details.price, details.currency) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuantityComponent, { className: "", quantity, shouldUpdate }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "text-sm font-medium", onClick: () => shouldUpdate(0), children: "Usu\u0144" })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { className: "aspect-auto max-w-[30%] max-w-32 max-h-32", src: (_a = details.image_url) != null ? _a : "", alt: details.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-medium", children: details.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm", children: formatCurrency(details.price, details.currency) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QuantityComponent, { className: "", quantity, shouldUpdate }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "text-sm font-medium", onClick: () => shouldUpdate(0), children: "Usu\u0144" })
       ] })
     ] })
   ] });
@@ -1612,9 +1663,9 @@ var QuantityComponent = ({
     setQuantityString(quantity.toString());
     setQuantityValue(quantity);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex ${className} items-center border dark:border-neutral-400 border-neutral-700 rounded-md my-1`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: decreaseQuantity, className: "px-2 py-1", children: "-" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex ${className} items-center border dark:border-neutral-400 border-neutral-700 rounded-md my-1`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: decreaseQuantity, className: "px-2 py-1", children: "-" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "input",
       {
         className: "w-8 bg-transparent text-center",
@@ -1625,14 +1676,14 @@ var QuantityComponent = ({
         type: "text"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: increaseQuantity, className: "px-2 py-1", children: "+" })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: increaseQuantity, className: "px-2 py-1", children: "+" })
   ] });
 };
 
 // src/components/checkout/Skeleton.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-slot": "skeleton",
@@ -1643,32 +1694,47 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/components/checkout/CartComponentContent.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react_query4 = require("@tanstack/react-query");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CartComponentContent = ({ className }) => {
   var _a, _b, _c, _d, _e;
   const provider = useCartProvider();
-  const { mutateAsync: removeProduct } = (0, import_react_query4.useMutation)(
-    provider.removeProductFromCart
-  );
-  const { mutateAsync: updateQuantity } = (0, import_react_query4.useMutation)(provider.updateQuantity);
-  const { mutateAsync: setCountryAsync } = (0, import_react_query4.useMutation)(provider.setCountry);
-  const { mutateAsync: clearCart } = (0, import_react_query4.useMutation)(provider.clearCart);
+  const { mutateAsync: removeProduct } = (0, import_react_query4.useMutation)({
+    mutationFn: provider.removeProductFromCart
+  });
+  const { mutateAsync: updateQuantity } = (0, import_react_query4.useMutation)({
+    mutationFn: provider.updateQuantity
+  });
+  const { mutateAsync: setCountryAsync } = (0, import_react_query4.useMutation)({
+    mutationFn: provider.setCountry
+  });
+  const { mutateAsync: clearCart } = (0, import_react_query4.useMutation)({
+    mutationFn: provider.clearCart
+  });
   const [errMsg, setErrMsg] = import_react5.default.useState("");
   const [isCountryOpen, setIsCountryOpen] = import_react5.default.useState(false);
   const {
     mutateAsync: continueToCheckoutAsync,
-    isLoading: isContinueToCheckoutLoading
-  } = (0, import_react_query4.useMutation)(provider.redirectToNextStep);
-  const { data: availableCountries } = (0, import_react_query4.useQuery)(
-    "cart-available-countries",
-    provider.getAvailableCountries
-  );
-  const { data: isApplePayAvailable } = (0, import_react_query4.useQuery)("cart-one-click-payment", provider.checkIfApplePayIsAvailable);
-  const { data, isLoading, refetch } = (0, import_react_query4.useQuery)("cart", provider.getProducts);
-  const { data: countryData, refetch: refetchCountry } = (0, import_react_query4.useQuery)(
-    "cart-country",
-    provider.getCountry
-  );
+    isPending: isContinueToCheckoutLoading
+  } = (0, import_react_query4.useMutation)({
+    mutationFn: provider.redirectToNextStep
+  });
+  const { data: availableCountries } = (0, import_react_query4.useQuery)({
+    queryKey: ["cart-available-countries"],
+    queryFn: provider.getAvailableCountries
+  });
+  const { data: isApplePayAvailable } = (0, import_react_query4.useQuery)({
+    queryKey: ["cart-one-click-payment"],
+    queryFn: provider.checkIfApplePayIsAvailable
+  });
+  const { data, isLoading, refetch } = (0, import_react_query4.useQuery)({
+    queryKey: ["cart"],
+    queryFn: provider.getProducts
+  });
+  const { data: countryData, refetch: refetchCountry } = (0, import_react_query4.useQuery)({
+    queryKey: ["cart-country"],
+    queryFn: provider.getCountry
+  });
   const [productsParent] = (0, import_react4.useAutoAnimate)(
     /* optional config */
   );
@@ -1715,18 +1781,18 @@ var CartComponentContent = ({ className }) => {
       setErrMsg(`${e}`);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${className} flex flex-col`, ref: productsParent, children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative flex w-full justify-center flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { className: "w-full h-32" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { className: "w-full h-32" })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${className} flex flex-col`, ref: productsParent, children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex w-full justify-center flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { className: "w-full h-32" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Skeleton, { className: "w-full h-32" })
     ] }),
-    !isLoading && (products == null || products.length == 0) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col gap-4 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "dark:text-neutral-400 text-neutral-700", children: "Brak produkt\xF3w w koszyku." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    !isLoading && (products == null || products.length == 0) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col gap-4 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "dark:text-neutral-400 text-neutral-700", children: "Brak produkt\xF3w w koszyku." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         className: "max-h-[70vh] overflow-clip overflow-y-scroll",
-        children: products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "mt-5", children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.default.Fragment, { children: product.details != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: "mb-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "mt-5", children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.default.Fragment, { children: product.details != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { className: "mb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             SingleProduct_default,
             {
               quantity: product.quantity,
@@ -1736,46 +1802,46 @@ var CartComponentContent = ({ className }) => {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("hr", { className: "h-1 dark:border-neutral-700 border-neutral-400" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("hr", { className: "h-1 dark:border-neutral-700 border-neutral-400" })
         ] }) }, product.id)) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grow" }),
-    sumOfProducts > 0 && currency != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mx-3 flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grow" }),
+    sumOfProducts > 0 && currency != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mx-3 flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           className: "flex flex-row justify-between text-lg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 className: "dark:text-neutral-200 text-neutral-800 text-xl",
                 children: "Suma:"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col items-end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-end", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "p",
                 {
                   className: "dark:text-neutral-200 text-neutral-800 font-medium",
                   children: formatCurrency(sumOfProducts, currency)
                 }
               ),
-              isSomeProductDeliverable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "opacity-70 text-right text-base", children: "+ dostawa" })
+              isSomeProductDeliverable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "opacity-70 text-right text-base", children: "+ dostawa" })
             ] })
           ]
         }
       ) }),
-      countries && (countries == null ? void 0 : countries.length) > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      countries && (countries == null ? void 0 : countries.length) > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "h4",
           {
             className: "ml-3 text-sm dark:text-neutral-400 text-neutral-700",
             children: "Wybierz kraj"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           CountrySelector_default,
           {
             id: Math.random().toString(),
@@ -1793,8 +1859,8 @@ var CartComponentContent = ({ className }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mb-3 flex flex-col", children: [
-        isApplePayAvailable && products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ApplePay_default, { colorType: "white", style: { width: "100%" }, items: products == null ? void 0 : products.map((el) => {
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mb-3 flex flex-col", children: [
+        isApplePayAvailable && products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ApplePay_default, { colorType: "white", style: { width: "100%" }, items: products == null ? void 0 : products.map((el) => {
           var _a2, _b2, _c2, _d2, _e2, _f;
           return {
             name: (_b2 = (_a2 = el.details) == null ? void 0 : _a2.name) != null ? _b2 : "",
@@ -1805,7 +1871,7 @@ var CartComponentContent = ({ className }) => {
             metadata: el.metadata
           };
         }) }) }),
-        products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GooglePay_default, { buttonSizeMode: "fill", buttonColor: "white", style: { width: "100%" }, items: products == null ? void 0 : products.map((el) => {
+        products != null && products.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GooglePay_default, { buttonSizeMode: "fill", buttonColor: "white", style: { width: "100%" }, items: products == null ? void 0 : products.map((el) => {
           var _a2, _b2, _c2, _d2, _e2, _f;
           return {
             name: (_b2 = (_a2 = el.details) == null ? void 0 : _a2.name) != null ? _b2 : "",
@@ -1816,16 +1882,16 @@ var CartComponentContent = ({ className }) => {
             metadata: el.metadata
           };
         }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             onClick: continueToCheckout,
             disabled: isLoading || isContinueToCheckoutLoading || selectedCountry == null,
             className: "px-3 py-2 my-2 mx-2 rounded-md disabled:opacity-40 disabled:cursor-not-allowed dark:bg-neutral-300 dark:hover:bg-neutral-100 dark:text-neutral-800 hover:bg-neutral-900 text-neutral-200 bg-neutral-800 transition font-bold",
-            children: isContinueToCheckoutLoading ? "\u0141adowanie..." : "Nast\u0119pny krok"
+            children: isContinueToCheckoutLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, {}) : "Nast\u0119pny krok"
           }
         ),
-        errMsg.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-red-500 text-sm text-center", children: errMsg })
+        errMsg.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-red-500 text-sm text-center", children: errMsg })
       ] })
     ] })
   ] });
@@ -1833,36 +1899,36 @@ var CartComponentContent = ({ className }) => {
 var CartComponentContent_default = CartComponentContent;
 
 // src/components/checkout/CartComponent.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function CartComponent({ isVisible, shouldHide }) {
   const [parent] = (0, import_react6.useAutoAnimate)(
     /* optional config */
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: parent, className: "z-[999999]", children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: parent, className: "bitsnap-checkout dark", style: { zIndex: 999999 }, children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
-        className: "fixed top-0 right-0 left-0 bottom-0 bg-black/30 cursor-pointer",
+        className: "fixed top-0 right-0 left-0 bottom-0 bg-black/30 cursor-pointer z-10",
         onClick: shouldHide
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
-        className: "fixed top-0 right-0 bottom-0 w-full md:w-[350px] xl:w-[420px] dark:bg-neutral-900 bg-neutral-300 dark:text-neutral-200 text-neutral-900 flex flex-col",
+        className: "fixed z-20 top-0 right-0 bottom-0 w-full md:w-[350px] xl:w-[420px] dark:bg-neutral-900 bg-neutral-300 dark:text-neutral-200 text-neutral-900 flex flex-col",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "div",
             {
               className: "mx-3 mt-7 flex justify-between items-center",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { className: "text-2xl font-medium", children: "Koszyk" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { className: "text-2xl font-medium", children: "Koszyk" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "button",
                   {
                     className: "rounded-full dark:hover:bg-neutral-700 hover:bg-neutral-400 p-2 transition",
                     onClick: shouldHide,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       "svg",
                       {
                         xmlns: "http://www.w3.org/2000/svg",
@@ -1876,8 +1942,8 @@ function CartComponent({ isVisible, shouldHide }) {
                         strokeLinejoin: "round",
                         className: "lucide lucide-x",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                         ]
                       }
                     )
@@ -1886,7 +1952,7 @@ function CartComponent({ isVisible, shouldHide }) {
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CartComponentContent_default, { className: "grow" })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CartComponentContent_default, { className: "grow" })
         ]
       }
     )
@@ -1897,14 +1963,14 @@ var WrapperCartComponent = (props) => {
     return null;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CartProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CartComponent, { ...props }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CartProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CartComponent, { ...props }) }),
     document.body
   );
 };
 var CartComponent_default = WrapperCartComponent;
 
 // src/components/checkout/BitsnapCart.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var cartAddToCartSchema = import_zod2.default.object({
   id: import_zod2.default.string(),
   isSubscription: import_zod2.default.boolean().default(false),
@@ -1915,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) => {
@@ -2031,35 +2098,61 @@ function BitsnapCart({
       }
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "bitsnap-checkout", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
         onClick: () => isCartVisible ? hideCart() : showCart(),
-        className: className != null ? className : "relative rounded-full hover:bg-neutral-300 transition p-1",
-        children: children ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("circle", { cx: "8", cy: "21", r: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "19", cy: "21", r: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       CartComponent_default,
       {
         isVisible: isCartVisible,