bitsnap-react 1.3.2 → 1.3.3

package/dist/index.d.mts

@@ -2,8 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import z__default from 'zod';
 
-type AppleButtonType = 'plain' | 'add-money' | 'book' | 'buy' | 'check-out' | 'continue' | 'contribute' | 'donate' | 'order' | 'pay' | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up';
-type ColorType = 'black' | 'white' | 'white-outline';
+type AppleButtonType = "plain" | "add-money" | "book" | "buy" | "check-out" | "continue" | "contribute" | "donate" | "order" | "pay" | "reload" | "rent" | "set-up" | "subscribe" | "support" | "tip" | "top-up";
+type ColorType = "black" | "white" | "white-outline";
 type Props$1 = {
     style?: {
         width?: string;
@@ -30,8 +30,8 @@ declare function Wrapper$2(props: Props$1): react_jsx_runtime.JSX.Element;
 
 type Props = {
     test?: boolean;
-    buttonSizeMode?: 'static' | 'fill';
-    buttonColor?: 'white' | 'black';
+    buttonSizeMode?: "static" | "fill";
+    buttonColor?: "white" | "black";
     style?: {
         width?: string;
     };

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import z__default from 'zod';
 
-type AppleButtonType = 'plain' | 'add-money' | 'book' | 'buy' | 'check-out' | 'continue' | 'contribute' | 'donate' | 'order' | 'pay' | 'reload' | 'rent' | 'set-up' | 'subscribe' | 'support' | 'tip' | 'top-up';
-type ColorType = 'black' | 'white' | 'white-outline';
+type AppleButtonType = "plain" | "add-money" | "book" | "buy" | "check-out" | "continue" | "contribute" | "donate" | "order" | "pay" | "reload" | "rent" | "set-up" | "subscribe" | "support" | "tip" | "top-up";
+type ColorType = "black" | "white" | "white-outline";
 type Props$1 = {
     style?: {
         width?: string;
@@ -30,8 +30,8 @@ declare function Wrapper$2(props: Props$1): react_jsx_runtime.JSX.Element;
 
 type Props = {
     test?: boolean;
-    buttonSizeMode?: 'static' | 'fill';
-    buttonColor?: 'white' | 'black';
+    buttonSizeMode?: "static" | "fill";
+    buttonColor?: "white" | "black";
     style?: {
         width?: string;
     };

package/dist/index.js

@@ -103,7 +103,7 @@ var PublicApiClient;
 // src/components/checkout/CartProvider.tsx
 var import_protobuf = require("@bufbuild/protobuf");
 var import_react = require("react");
-var import_zod = __toESM(require("zod"));
+var import_zod2 = __toESM(require("zod"));
 
 // src/components/checkout/constants.ts
 var HOST = "https://bitsnap.pl";
@@ -362,6 +362,115 @@ function mapGooglePayDisplayItems(items, methods, deliveryMethod, couponCode, co
 
 // src/components/checkout/CartProvider.tsx
 var import_react_query = require("@tanstack/react-query");
+
+// src/components/checkout/frontent.analytics.ts
+var import_zod = __toESM(require("zod"));
+var eventPayload = import_zod.default.object({
+  event: import_zod.default.enum([
+    "purchase",
+    "addToCart",
+    "customizeProduct",
+    "viewCart",
+    "removeFromCart",
+    "initiateCheckout"
+  ]),
+  step: import_zod.default.string().optional(),
+  value: import_zod.default.number().optional(),
+  currency: import_zod.default.string().optional(),
+  content_name: import_zod.default.string().optional(),
+  items: import_zod.default.array(
+    import_zod.default.object({
+      id: import_zod.default.string(),
+      name: import_zod.default.string(),
+      price: import_zod.default.number().default(0),
+      currency: import_zod.default.string().default("PLN"),
+      quantity: import_zod.default.number().default(1)
+    })
+  ).optional()
+});
+function sendAnalyticEvent(payload) {
+  if (typeof window == "undefined") {
+    return;
+  }
+  sendGoogleAnalyticsEvent(payload);
+  sendPixelAnalyticsEvent(payload);
+}
+function sendGoogleAnalyticsEvent(payload) {
+  try {
+    if (typeof window.dataLayer == "undefined") {
+      window.dataLayer = [];
+    }
+    window.dataLayer.push(payload);
+  } catch (e) {
+    console.warn("cannot send google analytics event", e);
+  }
+}
+function sendPixelAnalyticsEvent(payload) {
+  if (typeof window.fbq == "undefined") {
+    return;
+  }
+  let eventType = "";
+  let eventName = "";
+  let eventPayload2 = {};
+  switch (payload.event) {
+    case "purchase":
+      eventType = "track";
+      eventName = "Purchase";
+      eventPayload2 = {
+        category_name: payload.step,
+        ...payload
+      };
+      break;
+    case "addToCart":
+      eventType = "track";
+      eventName = "Add to Cart";
+      eventPayload2 = {
+        category_name: payload.step,
+        ...payload
+      };
+      break;
+    case "customizeProduct":
+      eventType = "track";
+      eventName = "Customize Product";
+      eventPayload2 = {
+        category_name: payload.step,
+        ...payload
+      };
+      break;
+    case "viewCart":
+      eventType = "track";
+      eventName = "View Cart";
+      eventPayload2 = {
+        category_name: payload.step,
+        ...payload
+      };
+      break;
+    case "removeFromCart":
+      eventType = "track";
+      eventName = "Remove from Cart";
+      eventPayload2 = {
+        category_name: payload.step,
+        ...payload
+      };
+      break;
+    case "initiateCheckout":
+      eventType = "track";
+      eventName = "Initiate Checkout";
+      eventPayload2 = {
+        category_name: payload.step,
+        ...payload
+      };
+      break;
+    default:
+      break;
+  }
+  if (window.location.search.includes("analytics")) {
+    console.log("Pushing FB event", eventType, eventName, eventPayload2);
+  }
+  window.fbq(eventType, eventName, eventPayload2);
+}
+
+// src/components/checkout/CartProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var MARKETING_AGREEMENT_ID = "__m_a";
 var CartProviderContext = (0, import_react.createContext)(void 0);
@@ -447,25 +556,25 @@ var useCartProvider = () => {
   return context;
 };
 var CartProvider_default = CartProvider;
-var googlePayConfigSchema = import_zod.default.object({
-  isAvailable: import_zod.default.boolean(),
-  merchantId: import_zod.default.string(),
-  merchantName: import_zod.default.string(),
-  gateway: import_zod.default.string(),
-  gatewayId: import_zod.default.string()
+var googlePayConfigSchema = import_zod2.default.object({
+  isAvailable: import_zod2.default.boolean(),
+  merchantId: import_zod2.default.string(),
+  merchantName: import_zod2.default.string(),
+  gateway: import_zod2.default.string(),
+  gatewayId: import_zod2.default.string()
 });
-var checkoutSchema = import_zod.default.object({
-  country: import_zod.default.string().optional(),
-  couponCode: import_zod.default.string().optional(),
-  selectedDeliveryMethod: import_zod.default.string().optional(),
-  postalCode: import_zod.default.string().optional(),
-  email: import_zod.default.string().optional(),
-  products: import_zod.default.array(
-    import_zod.default.object({
-      id: import_zod.default.string(),
-      productID: import_zod.default.string(),
-      quantity: import_zod.default.number(),
-      metadata: import_zod.default.record(import_zod.default.string(), import_zod.default.string().optional()).optional()
+var checkoutSchema = import_zod2.default.object({
+  country: import_zod2.default.string().optional(),
+  couponCode: import_zod2.default.string().optional(),
+  selectedDeliveryMethod: import_zod2.default.string().optional(),
+  postalCode: import_zod2.default.string().optional(),
+  email: import_zod2.default.string().optional(),
+  products: import_zod2.default.array(
+    import_zod2.default.object({
+      id: import_zod2.default.string(),
+      productID: import_zod2.default.string(),
+      quantity: import_zod2.default.number(),
+      metadata: import_zod2.default.record(import_zod2.default.string(), import_zod2.default.string().optional()).optional()
     })
   ).optional(),
   googlePayConfig: googlePayConfigSchema.optional()
@@ -496,12 +605,25 @@ function addProducts(products) {
   if (checkout.products == null) {
     checkout.products = [];
   }
-  checkout.products.push(...products.map((el) => ({
-    id: Math.random().toString(36).substring(7),
-    productID: el.productID,
-    quantity: el.quantity,
-    metadata: el.metadata
-  })));
+  checkout.products.push(
+    ...products.map((el) => ({
+      id: Math.random().toString(36).substring(7),
+      productID: el.productID,
+      quantity: el.quantity,
+      metadata: el.metadata
+    }))
+  );
+  sendAnalyticEvent({
+    event: "addToCart",
+    currency: "PLN",
+    items: products.map((el) => ({
+      id: el.productID,
+      name: "",
+      price: 0,
+      quantity: el.quantity,
+      currency: "PLN"
+    }))
+  });
   saveCheckout(checkout);
   updateNumberOfProductsInCart();
 }
@@ -514,6 +636,16 @@ function removeProductFromCheckout(ids) {
       (product) => !ids.includes(product.productID) && !ids.includes(product.id)
     )
   };
+  sendAnalyticEvent({
+    event: "removeFromCart",
+    items: ids.map((id) => ({
+      id,
+      name: "",
+      price: 0,
+      quantity: 1,
+      currency: "PLN"
+    }))
+  });
   saveCheckout(newCheckout);
   updateNumberOfProductsInCart();
 }
@@ -534,7 +666,9 @@ var getCheckoutMethods = (projectID) => {
         return false;
       }
       try {
-        const result = await PublicApiClient.get(HOST).isOneClickPaymentAvailable({
+        const result = await PublicApiClient.get(
+          HOST
+        ).isOneClickPaymentAvailable({
           projectId: projectID
         });
         return result.applePay;
@@ -565,7 +699,9 @@ var getCheckoutMethods = (projectID) => {
         }
         if (args && args.items != null && args.items.length > 0) {
           if (checkout.products) {
-            removeProductFromCheckout(checkout.products.map((el) => el.productID));
+            removeProductFromCheckout(
+              checkout.products.map((el) => el.productID)
+            );
           }
           addProducts(args.items);
         }
@@ -577,7 +713,10 @@ var getCheckoutMethods = (projectID) => {
         }
         const result = await PublicApiClient.get(HOST).getPreOrderDetails({
           items: products.map(
-            (el) => (0, import_protobuf.create)(PreOrderItemSchema, { id: el.productID, quantity: el.quantity })
+            (el) => (0, import_protobuf.create)(PreOrderItemSchema, {
+              id: el.productID,
+              quantity: el.quantity
+            })
           ),
           projectId: projectID,
           // we can detect 5 the closest inpost pickup point based on shipping address.
@@ -633,10 +772,10 @@ var getCheckoutMethods = (projectID) => {
         return [];
       }
       try {
-        return import_zod.default.array(
-          import_zod.default.object({
-            name: import_zod.default.string(),
-            code: import_zod.default.string()
+        return import_zod2.default.array(
+          import_zod2.default.object({
+            name: import_zod2.default.string(),
+            code: import_zod2.default.string()
           })
         ).parse(await result.json());
       } catch (e) {
@@ -712,21 +851,18 @@ var getCheckoutMethods = (projectID) => {
       if (checkout.products == null || checkout.products.length == 0) {
         return Err("cart-is-empty", "badInput");
       }
-      const mergedMetadata = checkout.products.reduce(
-        (acc, product) => {
-          if (product.metadata != null) {
-            Object.keys(product.metadata).forEach((key) => {
-              var _a;
-              const value = (_a = product.metadata) == null ? void 0 : _a[key];
-              if (value != null) {
-                acc[key] = value;
-              }
-            });
-          }
-          return acc;
-        },
-        {}
-      );
+      const mergedMetadata = checkout.products.reduce((acc, product) => {
+        if (product.metadata != null) {
+          Object.keys(product.metadata).forEach((key) => {
+            var _a;
+            const value = (_a = product.metadata) == null ? void 0 : _a[key];
+            if (value != null) {
+              acc[key] = value;
+            }
+          });
+        }
+        return acc;
+      }, {});
       const payload = {
         items: checkout.products.map((el) => {
           return {
@@ -943,7 +1079,9 @@ var getCheckoutMethods = (projectID) => {
       }
       if (args && args.expectedItems != null && args.expectedItems.length > 0) {
         if (checkout.products) {
-          removeProductFromCheckout(checkout.products.map((el) => el.productID));
+          removeProductFromCheckout(
+            checkout.products.map((el) => el.productID)
+          );
         }
         addProducts(args.expectedItems);
       }
@@ -953,7 +1091,10 @@ var getCheckoutMethods = (projectID) => {
       }
       const result = await PublicApiClient.get(HOST).getPreOrderDetails({
         items: products.map(
-          (el) => (0, import_protobuf.create)(PreOrderItemSchema, { id: el.productID, quantity: el.quantity })
+          (el) => (0, import_protobuf.create)(PreOrderItemSchema, {
+            id: el.productID,
+            quantity: el.quantity
+          })
         ),
         projectId: projectID,
         // we can detect 5 the closest inpost pickup point based on shipping address.
@@ -971,7 +1112,9 @@ var getCheckoutMethods = (projectID) => {
         };
       });
       if (result.selectedDeliveryMethod != null) {
-        const deliveryMethod = result.methods.find((el) => el.id == result.selectedDeliveryMethod);
+        const deliveryMethod = result.methods.find(
+          (el) => el.id == result.selectedDeliveryMethod
+        );
         if (deliveryMethod != null) {
           items.push({
             amount: `${round(deliveryMethod.amount / 100, 2)}`,
@@ -1096,7 +1239,10 @@ function updateNumberOfProductsInCart() {
   const checkout = getCheckout();
   let numberOfProductsInCart = 0;
   if (checkout == null) {
-    useCheckoutStore.setState((state) => ({ ...state, numberOfProductsInCart }));
+    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;
@@ -1106,7 +1252,13 @@ function updateNumberOfProductsInCart() {
 // src/components/checkout/ApplePay.tsx
 var import_react_query2 = require("@tanstack/react-query");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick }) {
+function ApplePayButtonComponent({
+  style,
+  buttonType,
+  colorType,
+  items,
+  onClick
+}) {
   const {
     checkIfApplePayIsAvailable,
     getApplePayPaymentRequest,
@@ -1131,6 +1283,9 @@ function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick
     metadata: el.metadata
   }));
   async function beginSession() {
+    sendAnalyticEvent({
+      event: "initiateCheckout"
+    });
     const requiresShipping = items.find((el) => el.isDeliverable === true) != null;
     const session = new ApplePaySession(14, {
       countryCode: "PL",
@@ -1138,16 +1293,21 @@ function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick
       supportedNetworks: ["visa", "masterCard"],
       currencyCode: "PLN",
       total: {
-        amount: `${round(items.reduce((acc, item) => acc + item.price * item.quantity, 0) / 100, 2)}`,
+        amount: `${round(
+          items.reduce((acc, item) => acc + item.price * item.quantity, 0) / 100,
+          2
+        )}`,
         label: "P\u0142atno\u015B\u0107 za koszyk",
         type: "pending"
       },
       lineItems: [
-        ...items.map((item) => ({
-          amount: `${round(item.price * item.quantity / 100, 2)}`,
-          label: item.name,
-          type: "final"
-        })),
+        ...items.map(
+          (item) => ({
+            amount: `${round(item.price * item.quantity / 100, 2)}`,
+            label: item.name,
+            type: "final"
+          })
+        ),
         requiresShipping ? {
           amount: `16.99`,
           type: "pending",
@@ -1157,8 +1317,18 @@ function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick
       ...requiresShipping ? {
         shippingMethods: [],
         supportsCouponCode: true,
-        requiredBillingContactFields: ["name", "email", "postalAddress", "phone"],
-        requiredShippingContactFields: ["name", "email", "postalAddress", "phone"]
+        requiredBillingContactFields: [
+          "name",
+          "email",
+          "postalAddress",
+          "phone"
+        ],
+        requiredShippingContactFields: [
+          "name",
+          "email",
+          "postalAddress",
+          "phone"
+        ]
       } : {}
     });
     await (onClick == null ? void 0 : onClick());
@@ -1285,7 +1455,15 @@ function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick
     };
     session.begin();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_apple_pay_button.default, { style, buttonStyle: colorType, type: buttonType, onClick: beginSession });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_apple_pay_button.default,
+    {
+      style,
+      buttonStyle: colorType,
+      type: buttonType,
+      onClick: beginSession
+    }
+  );
 }
 function Wrapper(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CartProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ApplePayButtonComponent, { ...props }) }) });
@@ -1322,7 +1500,13 @@ function Spinner({ 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 }) {
+function GooglePayButtonComponent({
+  items,
+  style,
+  buttonColor,
+  buttonSizeMode,
+  test
+}) {
   const {
     getGooglePayConfiguration,
     completeGooglePayPayment,
@@ -1334,7 +1518,10 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
     clearCart
   } = useCartProvider();
   const { data: googlePayConfiguration } = (0, import_react_query3.useQuery)({
-    queryKey: ["get-google-pay-configuration", items.map((el) => el.id).join(",")],
+    queryKey: [
+      "get-google-pay-configuration",
+      items.map((el) => el.id).join(",")
+    ],
     queryFn: () => getGooglePayConfiguration({
       items: items.map((el) => ({
         ...el,
@@ -1343,11 +1530,16 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
       }))
     })
   });
-  const { mutateAsync: completeGooglePayPaymentAsync, isPending } = (0, import_react_query3.useMutation)({
-    mutationFn: completeGooglePayPayment
-  });
+  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);
+    console.log(
+      "google pay configuration is not available",
+      googlePayConfiguration
+    );
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
@@ -1361,6 +1553,9 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
         environment: test === true ? "TEST" : "PRODUCTION",
         onPaymentDataChanged: async (paymentData) => {
           var _a, _b, _c, _d, _e;
+          sendAnalyticEvent({
+            event: "initiateCheckout"
+          });
           console.log("payment data changed", paymentData);
           if (((_a = paymentData.shippingAddress) == null ? void 0 : _a.postalCode) != null) {
             await setPostalCode((_b = paymentData.shippingAddress) == null ? void 0 : _b.postalCode);
@@ -1414,7 +1609,7 @@ var GooglePay_default = Wrapper2;
 
 // src/components/checkout/BitsnapCart.tsx
 var import_react8 = require("react");
-var import_zod2 = __toESM(require("zod"));
+var import_zod3 = __toESM(require("zod"));
 
 // src/components/checkout/CartComponent.tsx
 var import_react7 = require("@formkit/auto-animate/react");
@@ -1973,11 +2168,11 @@ var CartComponent_default = WrapperCartComponent;
 
 // src/components/checkout/BitsnapCart.tsx
 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),
-  quantity: import_zod2.default.number(),
-  metadata: import_zod2.default.record(import_zod2.default.string(), import_zod2.default.string().optional()).optional()
+var cartAddToCartSchema = import_zod3.default.object({
+  id: import_zod3.default.string(),
+  isSubscription: import_zod3.default.boolean().default(false),
+  quantity: import_zod3.default.number(),
+  metadata: import_zod3.default.record(import_zod3.default.string(), import_zod3.default.string().optional()).optional()
 });
 function BitsnapCart({
   projectID,
@@ -1996,6 +2191,11 @@ function BitsnapCart({
   }
   (0, import_react8.useEffect)(() => {
     onVisibleChange == null ? void 0 : onVisibleChange(isCartVisible);
+    if (isCartVisible) {
+      sendAnalyticEvent({
+        event: "viewCart"
+      });
+    }
   }, [isCartVisible]);
   (0, import_react8.useEffect)(() => {
     setProjectID(projectID);
@@ -2010,13 +2210,16 @@ function BitsnapCart({
       window["cart"] = {
         buyProduct: async (args) => {
           try {
-            const payload = import_zod2.default.object({
-              productID: import_zod2.default.string(),
-              email: import_zod2.default.string().optional(),
-              name: import_zod2.default.string().optional(),
-              country: import_zod2.default.string().optional(),
-              marketingAgreement: import_zod2.default.boolean().optional()
+            const payload = import_zod3.default.object({
+              productID: import_zod3.default.string(),
+              email: import_zod3.default.string().optional(),
+              name: import_zod3.default.string().optional(),
+              country: import_zod3.default.string().optional(),
+              marketingAgreement: import_zod3.default.boolean().optional()
             }).parse(args);
+            sendAnalyticEvent({
+              event: "initiateCheckout"
+            });
             const methods = getCheckoutMethods(projectID2);
             const result = await methods.justRedirectToPayment(payload);
             console.log("result", result);
@@ -2106,7 +2309,10 @@ function BitsnapCart({
       {
         onClick: () => isCartVisible ? hideCart() : showCart(),
         style: { position: "relative" },
-        className: ["bitsnap-checkout", className != null ? className : "rounded-full hover:bg-neutral-300 transition p-1"].join(" "),
+        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",