bitsnap-react 1.3.2 → 1.3.3

package/dist/index.mjs

@@ -61,7 +61,7 @@ var PublicApiClient;
 // src/components/checkout/CartProvider.tsx
 import { create as create2 } from "@bufbuild/protobuf";
 import { createContext, useContext, useEffect } from "react";
-import zod from "zod";
+import zod2 from "zod";
 
 // src/components/checkout/constants.ts
 var HOST = "https://bitsnap.pl";
@@ -320,6 +320,115 @@ function mapGooglePayDisplayItems(items, methods, deliveryMethod, couponCode, co
 
 // src/components/checkout/CartProvider.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// src/components/checkout/frontent.analytics.ts
+import zod from "zod";
+var eventPayload = zod.object({
+  event: zod.enum([
+    "purchase",
+    "addToCart",
+    "customizeProduct",
+    "viewCart",
+    "removeFromCart",
+    "initiateCheckout"
+  ]),
+  step: zod.string().optional(),
+  value: zod.number().optional(),
+  currency: zod.string().optional(),
+  content_name: zod.string().optional(),
+  items: zod.array(
+    zod.object({
+      id: zod.string(),
+      name: zod.string(),
+      price: zod.number().default(0),
+      currency: zod.string().default("PLN"),
+      quantity: zod.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
 import { Fragment, jsx } from "react/jsx-runtime";
 var MARKETING_AGREEMENT_ID = "__m_a";
 var CartProviderContext = createContext(void 0);
@@ -405,25 +514,25 @@ var useCartProvider = () => {
   return context;
 };
 var CartProvider_default = CartProvider;
-var googlePayConfigSchema = zod.object({
-  isAvailable: zod.boolean(),
-  merchantId: zod.string(),
-  merchantName: zod.string(),
-  gateway: zod.string(),
-  gatewayId: zod.string()
+var googlePayConfigSchema = zod2.object({
+  isAvailable: zod2.boolean(),
+  merchantId: zod2.string(),
+  merchantName: zod2.string(),
+  gateway: zod2.string(),
+  gatewayId: zod2.string()
 });
-var checkoutSchema = zod.object({
-  country: zod.string().optional(),
-  couponCode: zod.string().optional(),
-  selectedDeliveryMethod: zod.string().optional(),
-  postalCode: zod.string().optional(),
-  email: zod.string().optional(),
-  products: zod.array(
-    zod.object({
-      id: zod.string(),
-      productID: zod.string(),
-      quantity: zod.number(),
-      metadata: zod.record(zod.string(), zod.string().optional()).optional()
+var checkoutSchema = zod2.object({
+  country: zod2.string().optional(),
+  couponCode: zod2.string().optional(),
+  selectedDeliveryMethod: zod2.string().optional(),
+  postalCode: zod2.string().optional(),
+  email: zod2.string().optional(),
+  products: zod2.array(
+    zod2.object({
+      id: zod2.string(),
+      productID: zod2.string(),
+      quantity: zod2.number(),
+      metadata: zod2.record(zod2.string(), zod2.string().optional()).optional()
     })
   ).optional(),
   googlePayConfig: googlePayConfigSchema.optional()
@@ -454,12 +563,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();
 }
@@ -472,6 +594,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();
 }
@@ -492,7 +624,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;
@@ -523,7 +657,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);
         }
@@ -535,7 +671,10 @@ var getCheckoutMethods = (projectID) => {
         }
         const result = await PublicApiClient.get(HOST).getPreOrderDetails({
           items: products.map(
-            (el) => create2(PreOrderItemSchema, { id: el.productID, quantity: el.quantity })
+            (el) => create2(PreOrderItemSchema, {
+              id: el.productID,
+              quantity: el.quantity
+            })
           ),
           projectId: projectID,
           // we can detect 5 the closest inpost pickup point based on shipping address.
@@ -591,10 +730,10 @@ var getCheckoutMethods = (projectID) => {
         return [];
       }
       try {
-        return zod.array(
-          zod.object({
-            name: zod.string(),
-            code: zod.string()
+        return zod2.array(
+          zod2.object({
+            name: zod2.string(),
+            code: zod2.string()
           })
         ).parse(await result.json());
       } catch (e) {
@@ -670,21 +809,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 {
@@ -901,7 +1037,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);
       }
@@ -911,7 +1049,10 @@ var getCheckoutMethods = (projectID) => {
       }
       const result = await PublicApiClient.get(HOST).getPreOrderDetails({
         items: products.map(
-          (el) => create2(PreOrderItemSchema, { id: el.productID, quantity: el.quantity })
+          (el) => create2(PreOrderItemSchema, {
+            id: el.productID,
+            quantity: el.quantity
+          })
         ),
         projectId: projectID,
         // we can detect 5 the closest inpost pickup point based on shipping address.
@@ -929,7 +1070,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)}`,
@@ -1054,7 +1197,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;
@@ -1064,7 +1210,13 @@ function updateNumberOfProductsInCart() {
 // src/components/checkout/ApplePay.tsx
 import { useQuery } from "@tanstack/react-query";
 import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
-function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick }) {
+function ApplePayButtonComponent({
+  style,
+  buttonType,
+  colorType,
+  items,
+  onClick
+}) {
   const {
     checkIfApplePayIsAvailable,
     getApplePayPaymentRequest,
@@ -1089,6 +1241,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",
@@ -1096,16 +1251,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",
@@ -1115,8 +1275,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());
@@ -1243,7 +1413,15 @@ function ApplePayButtonComponent({ style, buttonType, colorType, items, onClick
     };
     session.begin();
   }
-  return /* @__PURE__ */ jsx2(ApplePayButton, { style, buttonStyle: colorType, type: buttonType, onClick: beginSession });
+  return /* @__PURE__ */ jsx2(
+    ApplePayButton,
+    {
+      style,
+      buttonStyle: colorType,
+      type: buttonType,
+      onClick: beginSession
+    }
+  );
 }
 function Wrapper(props) {
   return /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2(CartProvider_default, { children: /* @__PURE__ */ jsx2(ApplePayButtonComponent, { ...props }) }) });
@@ -1280,7 +1458,13 @@ function Spinner({ 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 }) {
+function GooglePayButtonComponent({
+  items,
+  style,
+  buttonColor,
+  buttonSizeMode,
+  test
+}) {
   const {
     getGooglePayConfiguration,
     completeGooglePayPayment,
@@ -1292,7 +1476,10 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
     clearCart
   } = useCartProvider();
   const { data: googlePayConfiguration } = useQuery2({
-    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,
@@ -1301,11 +1488,16 @@ function GooglePayButtonComponent({ items, style, buttonColor, buttonSizeMode, t
       }))
     })
   });
-  const { mutateAsync: completeGooglePayPaymentAsync, isPending } = useMutation({
-    mutationFn: completeGooglePayPayment
-  });
+  const { mutateAsync: completeGooglePayPaymentAsync, isPending } = 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__ */ jsxs(Fragment3, { children: [
@@ -1319,6 +1511,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);
@@ -1372,7 +1567,7 @@ var GooglePay_default = Wrapper2;
 
 // src/components/checkout/BitsnapCart.tsx
 import { useEffect as useEffect4 } from "react";
-import zod2 from "zod";
+import zod3 from "zod";
 
 // src/components/checkout/CartComponent.tsx
 import { useAutoAnimate as useAutoAnimate2 } from "@formkit/auto-animate/react";
@@ -1931,11 +2126,11 @@ var CartComponent_default = WrapperCartComponent;
 
 // src/components/checkout/BitsnapCart.tsx
 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),
-  quantity: zod2.number(),
-  metadata: zod2.record(zod2.string(), zod2.string().optional()).optional()
+var cartAddToCartSchema = zod3.object({
+  id: zod3.string(),
+  isSubscription: zod3.boolean().default(false),
+  quantity: zod3.number(),
+  metadata: zod3.record(zod3.string(), zod3.string().optional()).optional()
 });
 function BitsnapCart({
   projectID,
@@ -1954,6 +2149,11 @@ function BitsnapCart({
   }
   useEffect4(() => {
     onVisibleChange == null ? void 0 : onVisibleChange(isCartVisible);
+    if (isCartVisible) {
+      sendAnalyticEvent({
+        event: "viewCart"
+      });
+    }
   }, [isCartVisible]);
   useEffect4(() => {
     setProjectID(projectID);
@@ -1968,13 +2168,16 @@ function BitsnapCart({
       window["cart"] = {
         buyProduct: async (args) => {
           try {
-            const payload = zod2.object({
-              productID: zod2.string(),
-              email: zod2.string().optional(),
-              name: zod2.string().optional(),
-              country: zod2.string().optional(),
-              marketingAgreement: zod2.boolean().optional()
+            const payload = zod3.object({
+              productID: zod3.string(),
+              email: zod3.string().optional(),
+              name: zod3.string().optional(),
+              country: zod3.string().optional(),
+              marketingAgreement: zod3.boolean().optional()
             }).parse(args);
+            sendAnalyticEvent({
+              event: "initiateCheckout"
+            });
             const methods = getCheckoutMethods(projectID2);
             const result = await methods.justRedirectToPayment(payload);
             console.log("result", result);
@@ -2064,7 +2267,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__ */ jsx10(Fragment6, { children }) : /* @__PURE__ */ jsxs6(
             "svg",