bitsnap-react 1.0.0 → 1.2.1

package/dist/index.mjs

@@ -58,8 +58,7 @@ var PublicApiClient;
 
 // src/components/checkout/CartProvider.tsx
 import { create as create2 } from "@bufbuild/protobuf";
-import { createContext, useContext } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { createContext, useContext, useEffect } from "react";
 import zod from "zod";
 
 // src/components/checkout/constants.ts
@@ -100,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 }))
@@ -317,6 +316,7 @@ function mapGooglePayDisplayItems(items, methods, deliveryMethod, couponCode, co
 }
 
 // src/components/checkout/CartProvider.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Fragment, jsx } from "react/jsx-runtime";
 var MARKETING_AGREEMENT_ID = "__m_a";
 var CartProviderContext = createContext(void 0);
@@ -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,9 +1046,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
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
 function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick }) {
   const {
@@ -1055,7 +1073,10 @@ function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick
     setPostalCode,
     clearCart
   } = useCartProvider();
-  const { data: isApplePayAvailable } = useQuery("is-apple-pay-available", checkIfApplePayIsAvailable);
+  const { data: isApplePayAvailable } = useQuery({
+    queryKey: ["is-apple-pay-available"],
+    queryFn: checkIfApplePayIsAvailable
+  });
   if (isApplePayAvailable != true) {
     return null;
   }
@@ -1228,8 +1249,34 @@ var ApplePay_default = Wrapper;
 
 // src/components/checkout/GooglePay.tsx
 import GooglePayButton from "@google-pay/button-react";
-import { useMutation, useQuery as useQuery2 } from "react-query";
-import { Fragment as Fragment3, jsx as jsx3, jsxs } from "react/jsx-runtime";
+
+// src/ui/spinner.tsx
+import { Loader2Icon } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/spinner.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    Loader2Icon,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+
+// src/components/checkout/GooglePay.tsx
+import { useQuery as useQuery2, useMutation } from "@tanstack/react-query";
+import { Fragment as Fragment3, jsx as jsx4, jsxs } from "react/jsx-runtime";
 function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, test }) {
   const {
     getGooglePayConfiguration,
@@ -1241,20 +1288,25 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
     setPostalCode,
     clearCart
   } = useCartProvider();
-  const { data: googlePayConfiguration } = useQuery2(["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 } = useMutation(completeGooglePayPayment);
+  const { data: googlePayConfiguration } = useQuery2({
+    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 } = useMutation({
+    mutationFn: completeGooglePayPayment
+  });
   if (googlePayConfiguration == null || googlePayConfiguration.isAvailable != true) {
     console.log("google pay configuration is not available", googlePayConfiguration);
     return null;
   }
   return /* @__PURE__ */ jsxs(Fragment3, { children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       GooglePayButton,
       {
         buttonSizeMode,
@@ -1307,16 +1359,16 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
         }
       }
     ),
-    isLoading ? "\u0141adowanie..." : null
+    isPending ? /* @__PURE__ */ jsx4(Spinner, {}) : null
   ] });
 }
 function Wrapper2(props) {
-  return /* @__PURE__ */ jsx3(Fragment3, { children: /* @__PURE__ */ jsx3(CartProvider_default, { children: /* @__PURE__ */ jsx3(GooglePayButtonComponent, { ...props }) }) });
+  return /* @__PURE__ */ jsx4(Fragment3, { children: /* @__PURE__ */ jsx4(CartProvider_default, { children: /* @__PURE__ */ jsx4(GooglePayButtonComponent, { ...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
@@ -1326,12 +1378,11 @@ import { createPortal } from "react-dom";
 // src/components/checkout/CartComponentContent.tsx
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import React from "react";
-import { useMutation as useMutation2, useQuery as useQuery3 } from "react-query";
 
 // src/components/checkout/CountrySelector.tsx
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useRef, useState } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function CountrySelector({
   id,
   open: open2,
@@ -1343,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
@@ -1358,13 +1409,13 @@ function CountrySelector({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [ref]);
-  useEffect(() => {
+  useEffect2(() => {
     if (selectedValue == null && countries.length > 0) {
       onChange(countries[0].code);
     }
   }, []);
   const [query, setQuery] = useState("");
-  return /* @__PURE__ */ jsx4("div", { ref, children: /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsx5("div", { ref, children: /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
     /* @__PURE__ */ jsxs2(
       "button",
       {
@@ -1377,7 +1428,7 @@ function CountrySelector({
         disabled,
         children: [
           /* @__PURE__ */ jsxs2("span", { className: "truncate flex items-center", children: [
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "img",
               {
                 alt: `${selectedValue}`,
@@ -1387,11 +1438,11 @@ function CountrySelector({
             ),
             (_a = countries.find((el) => el.code === selectedValue)) == null ? void 0 : _a.name
           ] }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "span",
             {
               className: `absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none ${disabled ? "hidden" : ""}`,
-              children: /* @__PURE__ */ jsx4(
+              children: /* @__PURE__ */ jsx5(
                 "svg",
                 {
                   className: "h-5 w-5 text-light-purple",
@@ -1399,7 +1450,7 @@ function CountrySelector({
                   viewBox: "0 0 20 20",
                   fill: "currentColor",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx4(
+                  children: /* @__PURE__ */ jsx5(
                     "path",
                     {
                       fillRule: "evenodd",
@@ -1414,7 +1465,7 @@ function CountrySelector({
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(AnimatePresence, { children: open2 && /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx5(AnimatePresence, { children: open2 && /* @__PURE__ */ jsxs2(
       motion.ul,
       {
         initial: { opacity: 0 },
@@ -1428,7 +1479,7 @@ function CountrySelector({
         "aria-activedescendant": "listbox-option-3",
         children: [
           /* @__PURE__ */ jsxs2("div", { className: "sticky top-0 z-10 bg-white dark:bg-neutral-800", children: [
-            /* @__PURE__ */ jsx4("li", { className: "dark:text-neutral-200 text-neutral-900 cursor-default select-none relative py-2 px-3", children: /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5("li", { className: "dark:text-neutral-200 text-neutral-900 cursor-default select-none relative py-2 px-3", children: /* @__PURE__ */ jsx5(
               "input",
               {
                 type: "search",
@@ -1439,15 +1490,15 @@ function CountrySelector({
                 onChange: (e) => setQuery(e.target.value)
               }
             ) }),
-            /* @__PURE__ */ jsx4("hr", {})
+            /* @__PURE__ */ jsx5("hr", {})
           ] }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "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__ */ jsx4("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__ */ jsx5("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__ */ jsxs2(
@@ -1462,7 +1513,7 @@ function CountrySelector({
                       onToggle();
                     },
                     children: [
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx5(
                         "img",
                         {
                           alt: `${value.code}`,
@@ -1470,12 +1521,12 @@ function CountrySelector({
                           className: "inline mr-2 h-4 rounded-sm"
                         }
                       ),
-                      /* @__PURE__ */ jsx4("span", { className: "font-normal truncate", children: value.name }),
-                      value.code === selectedValue ? /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx5("span", { className: "font-normal truncate", children: value.name }),
+                      value.code === selectedValue ? /* @__PURE__ */ jsx5(
                         "span",
                         {
                           className: "text-blue-600 absolute inset-y-0 right-0 flex items-center pr-8",
-                          children: /* @__PURE__ */ jsx4(
+                          children: /* @__PURE__ */ jsx5(
                             "svg",
                             {
                               className: "h-5 w-5",
@@ -1483,7 +1534,7 @@ function CountrySelector({
                               viewBox: "0 0 20 20",
                               fill: "currentColor",
                               "aria-hidden": "true",
-                              children: /* @__PURE__ */ jsx4(
+                              children: /* @__PURE__ */ jsx5(
                                 "path",
                                 {
                                   fillRule: "evenodd",
@@ -1510,18 +1561,18 @@ function CountrySelector({
 var CountrySelector_default = CountrySelector;
 
 // src/components/checkout/SingleProduct.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+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;
   return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ jsx5("img", { className: "aspect-auto max-w-[30%] max-w-32 max-h-32", src: (_a = details.image_url) != null ? _a : "", alt: details.name }),
+    /* @__PURE__ */ jsx6("img", { className: "aspect-auto max-w-[30%] max-w-32 max-h-32", src: (_a = details.image_url) != null ? _a : "", alt: details.name }),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx5("p", { className: "font-medium", children: details.name }),
-      /* @__PURE__ */ jsx5("p", { className: "text-sm", children: formatCurrency(details.price, details.currency) }),
+      /* @__PURE__ */ jsx6("p", { className: "font-medium", children: details.name }),
+      /* @__PURE__ */ jsx6("p", { className: "text-sm", children: formatCurrency(details.price, details.currency) }),
       /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsx5(QuantityComponent, { className: "", quantity, shouldUpdate }),
-        /* @__PURE__ */ jsx5("button", { className: "text-sm font-medium", onClick: () => shouldUpdate(0), children: "Usu\u0144" })
+        /* @__PURE__ */ jsx6(QuantityComponent, { className: "", quantity, shouldUpdate }),
+        /* @__PURE__ */ jsx6("button", { className: "text-sm font-medium", onClick: () => shouldUpdate(0), children: "Usu\u0144" })
       ] })
     ] })
   ] });
@@ -1534,7 +1585,7 @@ var QuantityComponent = ({
 }) => {
   const [quantityString, setQuantityString] = useState2(quantity.toString());
   const [quantityValue, setQuantityValue] = useState2(quantity);
-  useEffect2(() => {
+  useEffect3(() => {
     shouldUpdate(quantityValue);
   }, [quantityValue]);
   function setNewQuantity(newQuantity) {
@@ -1570,8 +1621,8 @@ var QuantityComponent = ({
     setQuantityValue(quantity);
   }
   return /* @__PURE__ */ jsxs3("div", { className: `flex ${className} items-center border dark:border-neutral-400 border-neutral-700 rounded-md my-1`, children: [
-    /* @__PURE__ */ jsx5("button", { onClick: decreaseQuantity, className: "px-2 py-1", children: "-" }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6("button", { onClick: decreaseQuantity, className: "px-2 py-1", children: "-" }),
+    /* @__PURE__ */ jsx6(
       "input",
       {
         className: "w-8 bg-transparent text-center",
@@ -1582,14 +1633,14 @@ var QuantityComponent = ({
         type: "text"
       }
     ),
-    /* @__PURE__ */ jsx5("button", { onClick: increaseQuantity, className: "px-2 py-1", children: "+" })
+    /* @__PURE__ */ jsx6("button", { onClick: increaseQuantity, className: "px-2 py-1", children: "+" })
   ] });
 };
 
 // src/components/checkout/Skeleton.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-slot": "skeleton",
@@ -1600,32 +1651,47 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/components/checkout/CartComponentContent.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useMutation as useMutation2, useQuery as useQuery3 } from "@tanstack/react-query";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var CartComponentContent = ({ className }) => {
   var _a, _b, _c, _d, _e;
   const provider = useCartProvider();
-  const { mutateAsync: removeProduct } = useMutation2(
-    provider.removeProductFromCart
-  );
-  const { mutateAsync: updateQuantity } = useMutation2(provider.updateQuantity);
-  const { mutateAsync: setCountryAsync } = useMutation2(provider.setCountry);
-  const { mutateAsync: clearCart } = useMutation2(provider.clearCart);
+  const { mutateAsync: removeProduct } = useMutation2({
+    mutationFn: provider.removeProductFromCart
+  });
+  const { mutateAsync: updateQuantity } = useMutation2({
+    mutationFn: provider.updateQuantity
+  });
+  const { mutateAsync: setCountryAsync } = useMutation2({
+    mutationFn: provider.setCountry
+  });
+  const { mutateAsync: clearCart } = useMutation2({
+    mutationFn: provider.clearCart
+  });
   const [errMsg, setErrMsg] = React.useState("");
   const [isCountryOpen, setIsCountryOpen] = React.useState(false);
   const {
     mutateAsync: continueToCheckoutAsync,
-    isLoading: isContinueToCheckoutLoading
-  } = useMutation2(provider.redirectToNextStep);
-  const { data: availableCountries } = useQuery3(
-    "cart-available-countries",
-    provider.getAvailableCountries
-  );
-  const { data: isApplePayAvailable } = useQuery3("cart-one-click-payment", provider.checkIfApplePayIsAvailable);
-  const { data, isLoading, refetch } = useQuery3("cart", provider.getProducts);
-  const { data: countryData, refetch: refetchCountry } = useQuery3(
-    "cart-country",
-    provider.getCountry
-  );
+    isPending: isContinueToCheckoutLoading
+  } = useMutation2({
+    mutationFn: provider.redirectToNextStep
+  });
+  const { data: availableCountries } = useQuery3({
+    queryKey: ["cart-available-countries"],
+    queryFn: provider.getAvailableCountries
+  });
+  const { data: isApplePayAvailable } = useQuery3({
+    queryKey: ["cart-one-click-payment"],
+    queryFn: provider.checkIfApplePayIsAvailable
+  });
+  const { data, isLoading, refetch } = useQuery3({
+    queryKey: ["cart"],
+    queryFn: provider.getProducts
+  });
+  const { data: countryData, refetch: refetchCountry } = useQuery3({
+    queryKey: ["cart-country"],
+    queryFn: provider.getCountry
+  });
   const [productsParent] = useAutoAnimate(
     /* optional config */
   );
@@ -1674,16 +1740,16 @@ var CartComponentContent = ({ className }) => {
   }
   return /* @__PURE__ */ jsxs4("div", { className: `${className} flex flex-col`, ref: productsParent, children: [
     isLoading && /* @__PURE__ */ jsxs4("div", { className: "relative flex w-full justify-center flex-col gap-4", children: [
-      /* @__PURE__ */ jsx7(Skeleton, { className: "w-full h-32" }),
-      /* @__PURE__ */ jsx7(Skeleton, { className: "w-full h-32" })
+      /* @__PURE__ */ jsx8(Skeleton, { className: "w-full h-32" }),
+      /* @__PURE__ */ jsx8(Skeleton, { className: "w-full h-32" })
     ] }),
-    !isLoading && (products == null || products.length == 0) && /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-4 p-4", children: /* @__PURE__ */ jsx7("p", { className: "dark:text-neutral-400 text-neutral-700", children: "Brak produkt\xF3w w koszyku." }) }),
-    /* @__PURE__ */ jsx7(
+    !isLoading && (products == null || products.length == 0) && /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4 p-4", children: /* @__PURE__ */ jsx8("p", { className: "dark:text-neutral-400 text-neutral-700", children: "Brak produkt\xF3w w koszyku." }) }),
+    /* @__PURE__ */ jsx8(
       "div",
       {
         className: "max-h-[70vh] overflow-clip overflow-y-scroll",
-        children: products != null && products.length > 0 && /* @__PURE__ */ jsx7("ul", { className: "mt-5", children: products.map((product) => /* @__PURE__ */ jsx7(React.Fragment, { children: product.details != null && /* @__PURE__ */ jsxs4("li", { className: "mb-3", children: [
-          /* @__PURE__ */ jsx7(
+        children: products != null && products.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "mt-5", children: products.map((product) => /* @__PURE__ */ jsx8(React.Fragment, { children: product.details != null && /* @__PURE__ */ jsxs4("li", { className: "mb-3", children: [
+          /* @__PURE__ */ jsx8(
             SingleProduct_default,
             {
               quantity: product.quantity,
@@ -1693,18 +1759,18 @@ var CartComponentContent = ({ className }) => {
               }
             }
           ),
-          /* @__PURE__ */ jsx7("hr", { className: "h-1 dark:border-neutral-700 border-neutral-400" })
+          /* @__PURE__ */ jsx8("hr", { className: "h-1 dark:border-neutral-700 border-neutral-400" })
         ] }) }, product.id)) })
       }
     ),
-    /* @__PURE__ */ jsx7("div", { className: "grow" }),
+    /* @__PURE__ */ jsx8("div", { className: "grow" }),
     sumOfProducts > 0 && currency != null && /* @__PURE__ */ jsxs4(Fragment4, { children: [
-      /* @__PURE__ */ jsx7("div", { className: "mx-3 flex flex-col", children: /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsx8("div", { className: "mx-3 flex flex-col", children: /* @__PURE__ */ jsxs4(
         "div",
         {
           className: "flex flex-row justify-between text-lg",
           children: [
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "p",
               {
                 className: "dark:text-neutral-200 text-neutral-800 text-xl",
@@ -1712,27 +1778,27 @@ var CartComponentContent = ({ className }) => {
               }
             ),
             /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-end", children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 "p",
                 {
                   className: "dark:text-neutral-200 text-neutral-800 font-medium",
                   children: formatCurrency(sumOfProducts, currency)
                 }
               ),
-              isSomeProductDeliverable && /* @__PURE__ */ jsx7("p", { className: "opacity-70 text-right text-base", children: "+ dostawa" })
+              isSomeProductDeliverable && /* @__PURE__ */ jsx8("p", { className: "opacity-70 text-right text-base", children: "+ dostawa" })
             ] })
           ]
         }
       ) }),
       countries && (countries == null ? void 0 : countries.length) > 1 && /* @__PURE__ */ jsxs4("div", { children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "h4",
           {
             className: "ml-3 text-sm dark:text-neutral-400 text-neutral-700",
             children: "Wybierz kraj"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           CountrySelector_default,
           {
             id: Math.random().toString(),
@@ -1751,7 +1817,7 @@ var CartComponentContent = ({ className }) => {
         )
       ] }),
       /* @__PURE__ */ jsxs4("div", { className: "mb-3 flex flex-col", children: [
-        isApplePayAvailable && products != null && products.length > 0 && /* @__PURE__ */ jsx7("div", { className: "w-full px-2", children: /* @__PURE__ */ jsx7(ApplePay_default, { colorType: "white", style: { width: "100%" }, items: products == null ? void 0 : products.map((el) => {
+        isApplePayAvailable && products != null && products.length > 0 && /* @__PURE__ */ jsx8("div", { className: "w-full px-2", children: /* @__PURE__ */ jsx8(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 : "",
@@ -1762,7 +1828,7 @@ var CartComponentContent = ({ className }) => {
             metadata: el.metadata
           };
         }) }) }),
-        products != null && products.length > 0 && /* @__PURE__ */ jsx7("div", { className: "w-full px-2", children: /* @__PURE__ */ jsx7(GooglePay_default, { buttonSizeMode: "fill", buttonColor: "white", style: { width: "100%" }, items: products == null ? void 0 : products.map((el) => {
+        products != null && products.length > 0 && /* @__PURE__ */ jsx8("div", { className: "w-full px-2", children: /* @__PURE__ */ jsx8(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 : "",
@@ -1773,16 +1839,16 @@ var CartComponentContent = ({ className }) => {
             metadata: el.metadata
           };
         }) }) }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "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__ */ jsx8(Spinner, {}) : "Nast\u0119pny krok"
           }
         ),
-        errMsg.length > 0 && /* @__PURE__ */ jsx7("p", { className: "text-red-500 text-sm text-center", children: errMsg })
+        errMsg.length > 0 && /* @__PURE__ */ jsx8("p", { className: "text-red-500 text-sm text-center", children: errMsg })
       ] })
     ] })
   ] });
@@ -1790,31 +1856,31 @@ var CartComponentContent = ({ className }) => {
 var CartComponentContent_default = CartComponentContent;
 
 // src/components/checkout/CartComponent.tsx
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function CartComponent({ isVisible, shouldHide }) {
   const [parent] = useAutoAnimate2(
     /* optional config */
   );
-  return /* @__PURE__ */ jsx8("div", { ref: parent, className: "z-[999999]", children: isVisible && /* @__PURE__ */ jsxs5(Fragment5, { children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { ref: parent, className: "bitsnap-checkout dark", style: { zIndex: 999999 }, children: isVisible && /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    /* @__PURE__ */ jsx9(
       "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__ */ jsxs5(
       "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__ */ jsxs5(
             "div",
             {
               className: "mx-3 mt-7 flex justify-between items-center",
               children: [
-                /* @__PURE__ */ jsx8("h1", { className: "text-2xl font-medium", children: "Koszyk" }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9("h1", { className: "text-2xl font-medium", children: "Koszyk" }),
+                /* @__PURE__ */ jsx9(
                   "button",
                   {
                     className: "rounded-full dark:hover:bg-neutral-700 hover:bg-neutral-400 p-2 transition",
@@ -1833,8 +1899,8 @@ function CartComponent({ isVisible, shouldHide }) {
                         strokeLinejoin: "round",
                         className: "lucide lucide-x",
                         children: [
-                          /* @__PURE__ */ jsx8("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                          /* @__PURE__ */ jsx8("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                          /* @__PURE__ */ jsx9("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                          /* @__PURE__ */ jsx9("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                         ]
                       }
                     )
@@ -1843,7 +1909,7 @@ function CartComponent({ isVisible, shouldHide }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx8(CartComponentContent_default, { className: "grow" })
+          /* @__PURE__ */ jsx9(CartComponentContent_default, { className: "grow" })
         ]
       }
     )
@@ -1854,14 +1920,14 @@ var WrapperCartComponent = (props) => {
     return null;
   }
   return createPortal(
-    /* @__PURE__ */ jsx8(CartProvider_default, { children: /* @__PURE__ */ jsx8(CartComponent, { ...props }) }),
+    /* @__PURE__ */ jsx9(CartProvider_default, { children: /* @__PURE__ */ jsx9(CartComponent, { ...props }) }),
     document.body
   );
 };
 var CartComponent_default = WrapperCartComponent;
 
 // src/components/checkout/BitsnapCart.tsx
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var cartAddToCartSchema = zod2.object({
   id: zod2.string(),
   isSubscription: zod2.boolean().default(false),
@@ -1872,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) => {
@@ -1882,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) {
@@ -1973,7 +2040,7 @@ function BitsnapCart({
       }
     });
   }
-  useEffect3(() => {
+  useEffect4(() => {
     var _a;
     setupEventListener();
     if (typeof window !== "undefined") {
@@ -1988,35 +2055,61 @@ function BitsnapCart({
       }
     }
   }, []);
-  return /* @__PURE__ */ jsxs6("span", { className: "bitsnap-checkout", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         onClick: () => isCartVisible ? hideCart() : showCart(),
-        className: className != null ? className : "relative rounded-full hover:bg-neutral-300 transition p-1",
-        children: children ? /* @__PURE__ */ jsx9(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__ */ jsx9("circle", { cx: "8", cy: "21", r: "1" }),
-              /* @__PURE__ */ jsx9("circle", { cx: "19", cy: "21", r: "1" }),
-              /* @__PURE__ */ jsx9("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__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       CartComponent_default,
       {
         isVisible: isCartVisible,