@rebuy/rebuy-hydrogen 3.0.0-beta.15 → 3.0.0-beta.16

package/dist/index.mjs

@@ -3612,7 +3612,7 @@ var RebuyHydrogenReactContextProvider = ({
 
 // src/smart-cart/components/SmartCartContainer/SmartCartContainer.tsx
 import clsx13 from "clsx";
-import React11, { useMemo as useMemo20 } from "react";
+import React11, { useCallback as useCallback14, useEffect as useEffect21, useMemo as useMemo20, useRef as useRef13 } from "react";
 
 // src/smart-cart/components/_Layouts/AnchorSlot.tsx
 import { useMemo as useMemo19 } from "react";
@@ -8659,10 +8659,25 @@ var SmartCartContainer_default = result22;
 // src/smart-cart/components/SmartCartContainer/SmartCartContainer.tsx
 import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
 var SmartCartContainer = ({ containerId }) => {
-  const { checkout, config, getItemCount, hideCart, isVisible } = useSmartCart();
+  const { config, getItemCount, hideCart, isVisible } = useSmartCart();
+  const containerRef = useRef13(null);
+  const previousFocusRef = useRef13(null);
   const components = useMemo20(() => config && Array.isArray(config.components) ? config.components : [], [config]);
-  const handleCheckout = () => checkout();
-  const handleClose = () => hideCart();
+  const handleClose = useCallback14(() => {
+    hideCart();
+    if (previousFocusRef.current) {
+      previousFocusRef.current.focus();
+    }
+  }, [hideCart]);
+  useEffect21(() => {
+    if (isVisible) {
+      previousFocusRef.current = document.activeElement;
+      const closeButton = containerRef.current?.querySelector("#rebuy-cart-close");
+      if (closeButton instanceof HTMLElement) {
+        closeButton.focus();
+      }
+    }
+  }, [isVisible]);
   const backgroundClassName = clsx13(SmartCartContainer_default["rebuy-smart-cart__overlay-background"], {
     [SmartCartContainer_default["rebuy-smart-cart__overlay-background--visible"]]: isVisible
   });
@@ -8688,17 +8703,18 @@ var SmartCartContainer = ({ containerId }) => {
   const titleBarComponent = components.find((c) => c.type === "title_bar");
   const ariaLabelledBy = titleBarComponent ? `rebuy-title-${titleBarComponent.component_id}` : defaultTitleId;
   return /* @__PURE__ */ jsxs24(React11.Fragment, { children: [
-    /* @__PURE__ */ jsx40("div", { "aria-hidden": !isVisible, className: backgroundClassName, onClick: handleClose }),
+    /* @__PURE__ */ jsx40("div", { className: backgroundClassName, onClick: handleClose }),
     /* @__PURE__ */ jsxs24(
       "div",
       {
-        "aria-hidden": !isVisible,
         "aria-labelledby": ariaLabelledBy,
         "aria-modal": "true",
         className: flyoutContainerClasses,
         "data-rebuy-cart-layout": config?.layout || "single",
         id: containerId || "rebuy-cart-react",
+        ref: containerRef,
         role: "dialog",
+        tabIndex: -1,
         children: [
           /* @__PURE__ */ jsxs24("header", { className: SmartCartContainer_default["rebuy-smart-cart__header"], "data-rebuy-cart-anchor": "header", children: [
             /* @__PURE__ */ jsxs24("div", { className: SmartCartContainer_default["rebuy-smart-cart__header-top-bar"], "data-rebuy-cart-header-top-bar": "", children: [
@@ -8743,21 +8759,10 @@ var RebuySmartCart = () => {
 import { RebuyClient as RebuyClient3 } from "@rebuy/rebuy";
 import * as Utilities5 from "@rebuy/rebuy/utilities";
 import { flattenConnection as flattenConnection4 } from "@shopify/hydrogen";
-import React12, { useContext as useContext4, useEffect as useEffect21, useMemo as useMemo21, useState as useState21 } from "react";
+import React12, { useContext as useContext4, useEffect as useEffect22, useMemo as useMemo21, useState as useState21 } from "react";
 var RebuyWidgetContainerBase = ({ children, ...props }) => {
-  const {
-    apiKey: apiKeyFromProps,
-    collection,
-    collectionId,
-    dataSource,
-    limit,
-    options,
-    product,
-    productId,
-    variant,
-    variantId
-  } = props;
-  const { apiKey: apiKeyFromContext, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
+  const { collection, collectionId, dataSource, limit, options, product, productId, variant, variantId } = props;
+  const { apiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
   const rebuyContext = useContext4(RebuyContext);
   const [rebuyApiClient, setRebuyApiClient] = useState21(null);
   const [initialized, setInitialized] = useState21(false);
@@ -8766,10 +8771,9 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
   const shopifyCollectionId = collection?.id ?? collectionId ?? null;
   const [products, setProducts] = useState21([]);
   const [metadata, setMetadata] = useState21();
-  const finalApiKey = apiKeyFromProps || apiKeyFromContext;
-  useEffect21(() => {
-    if (!rebuyApiClient && finalApiKey && configLoadingStatus === "success") {
-      const client = new RebuyClient3(finalApiKey);
+  useEffect22(() => {
+    if (!rebuyApiClient && apiKey && configLoadingStatus === "success") {
+      const client = new RebuyClient3(apiKey);
       const currentEndpoint = dataSource || "/api/v1/products/recommended";
       if (rebuyContext?.contextParameters) {
         const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, currentEndpoint);
@@ -8781,8 +8785,8 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
       setRebuyApiClient(client);
       setInitialized(true);
     }
-  }, [finalApiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, dataSource]);
-  useEffect21(() => {
+  }, [apiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, dataSource]);
+  useEffect22(() => {
     if (rebuyApiClient && rebuyContext?.contextParameters) {
       const currentEndpoint = dataSource || "/api/v1/products/recommended";
       const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, currentEndpoint);
@@ -8809,7 +8813,7 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
     }
     return req;
   }, [dataSource, shopifyProductId, shopifyVariantId, shopifyCollectionId, limit]);
-  useEffect21(() => {
+  useEffect22(() => {
     let isMounted = true;
     if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
     const fetchData = async () => {
@@ -8848,7 +8852,7 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
   );
   const childProps = {
     ...props,
-    apiKey: finalApiKey,
+    apiKey,
     cacheKey: rebuyConfig?.shop?.cache_key,
     key: product?.id,
     metadata,
@@ -8896,7 +8900,7 @@ var RebuyCompleteTheLook = (props) => {
 };
 
 // src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.tsx
-import { useCallback as useCallback14, useEffect as useEffect22, useState as useState22 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect23, useState as useState22 } from "react";
 
 // src/utils/convertToRebuyProduct.tsx
 var convertToRebuyProduct = (isHydrogenReact, product) => {
@@ -9290,7 +9294,7 @@ var RebuyDynamicBundleProducts = (props) => {
     products = []
   } = props;
   const [bundleProducts, setBundleProducts] = useState22([]);
-  useEffect22(() => {
+  useEffect23(() => {
     const mainProduct = convertToRebuyProduct(isHydrogenReact || false, product);
     const formattedProducts = products.map((product2) => {
       return {
@@ -9301,14 +9305,14 @@ var RebuyDynamicBundleProducts = (props) => {
     });
     setBundleProducts([mainProduct, ...formattedProducts]);
   }, [product, products, isHydrogenReact]);
-  const onToggleBundleItem = useCallback14(
+  const onToggleBundleItem = useCallback15(
     (product2) => {
       product2.selected = !product2.selected;
       setBundleProducts([...bundleProducts]);
     },
     [bundleProducts]
   );
-  const onSelectVariant = useCallback14(
+  const onSelectVariant = useCallback15(
     (product2, variant_id) => {
       const variant = product2.variants.nodes.find(({ id }) => id === variant_id);
       if (variant) {
@@ -9354,7 +9358,7 @@ var RebuyDynamicBundleProducts = (props) => {
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOns.tsx
 import { Money as Money5 } from "@shopify/hydrogen-react";
-import { useCallback as useCallback15, useEffect as useEffect23, useState as useState23 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect24, useState as useState23 } from "react";
 
 // src/widgets/RebuyProductAddOns/RebuyProductAddOnCard.tsx
 import { Image as Image3 } from "@shopify/hydrogen";
@@ -9427,7 +9431,7 @@ var RebuyProductAddOns = (props) => {
   const [addedItems, setAddedItems] = useState23(products);
   const [subtotalWithProduct, setSubtotalWithProduct] = useState23();
   const [subtotalWithOutProduct, setSubtotalWithOutProduct] = useState23();
-  useEffect23(() => {
+  useEffect24(() => {
     let initialTotal = 0;
     let currencyCode = "USD";
     products.map((product2) => {
@@ -9457,7 +9461,7 @@ var RebuyProductAddOns = (props) => {
       setAddedItems(products);
     }
   }, [products, product, isHydrogenReact, includeMainProduct]);
-  const handleChange = useCallback15(
+  const handleChange = useCallback16(
     (event, product2) => {
       const newProducts = [...products];
       const productIndex = newProducts.findIndex((p) => p.id === product2.id);
@@ -9476,7 +9480,7 @@ var RebuyProductAddOns = (props) => {
     },
     [products]
   );
-  useEffect23(() => {
+  useEffect24(() => {
     let total = 0;
     let currencyCode = "USD";
     addedItems.forEach((item) => {
@@ -9549,7 +9553,7 @@ var RebuyProductAddOns = (props) => {
 };
 
 // src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.module.css
-var result26 = { "container": "RebuyProductRecommendations_container", "productGrid": "RebuyProductRecommendations_productGrid", "productItem": "RebuyProductRecommendations_productItem" };
+var result26 = { "container": "RebuyProductRecommendations_container", "productGrid": "RebuyProductRecommendations_productGrid" };
 var RebuyProductRecommendations_default = result26;
 
 // src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.tsx
@@ -9569,7 +9573,7 @@ var RebuyProductRecommendations = (props) => {
   }
   return /* @__PURE__ */ jsxs32("section", { className: RebuyProductRecommendations_default.container, children: [
     /* @__PURE__ */ jsx50(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ jsx50("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx50("li", { className: RebuyProductRecommendations_default.productItem, children: /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx50("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ jsx50("li", { children: /* @__PURE__ */ jsx50(
       ProductCard,
       {
         addToCartBtnText,
@@ -9582,6 +9586,190 @@ var RebuyProductRecommendations = (props) => {
   ] });
 };
 
+// src/widgets/RebuyProductViewed/RebuyProductViewed.tsx
+import { RebuyClient as RebuyClient4 } from "@rebuy/rebuy";
+import * as Utilities6 from "@rebuy/rebuy/utilities";
+import { useEffect as useEffect25, useMemo as useMemo22, useState as useState24 } from "react";
+
+// src/zustandStores/productViewed.ts
+import { create as create2 } from "zustand";
+var useProductViewedStore = create2((set) => ({
+  customerId: null,
+  setCustomerId: (customerId) => set({ customerId }),
+  setUuid: (uuid) => set({ uuid }),
+  uuid: null
+}));
+
+// src/widgets/RebuyProductViewed/RebuyProductViewed.tsx
+var RebuyProductViewed = ({ ...props }) => {
+  const { apiKey: apiKeyFromContext } = useRebuyConfig();
+  const { customerId, product, productHandle, productId } = props;
+  const [event, setEvent] = useState24(null);
+  const [Rebuy, setRebuy] = useState24(null);
+  const shopifyProductId = product?.id ?? productId ?? null;
+  const [initialized, setInitialized] = useState24(false);
+  const { setCustomerId, setUuid } = useProductViewedStore();
+  const request = useMemo22(() => {
+    const request2 = {
+      parameters: {}
+    };
+    if (shopifyProductId) {
+      const productNumericId = Utilities6.getIdFromGraphUrl(shopifyProductId, "Product");
+      if (productNumericId !== null) {
+        request2.parameters.shopify_product_id = productNumericId.toString();
+      }
+    } else if (productHandle) {
+      request2.parameters.shopify_product_handle = productHandle;
+    }
+    return request2;
+  }, [productHandle, shopifyProductId]);
+  useEffect25(() => {
+    const recordView = async () => {
+      if (!Rebuy) {
+        return;
+      }
+      try {
+        const response = await Rebuy.trackProductViewed(request.parameters);
+        setEvent(response.data);
+        if (response.data === "Received" && request.parameters.uuid) {
+          setUuid(request.parameters.uuid);
+          if (customerId && customerId !== "") {
+            setCustomerId(customerId);
+          }
+        }
+      } catch (error) {
+        console.error("Error tracking product view:", error);
+      }
+    };
+    if (!initialized && apiKeyFromContext) {
+      const client = new RebuyClient4(apiKeyFromContext);
+      setRebuy(client);
+      setInitialized(true);
+      return;
+    }
+    recordView();
+  }, [request.parameters, initialized, apiKeyFromContext, Rebuy]);
+  if (Object.keys(request.parameters).length === 0) {
+    console.warn("No parameters!");
+    return;
+  }
+  return null;
+};
+
+// src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.tsx
+import { RebuyClient as RebuyClient5 } from "@rebuy/rebuy";
+import { flattenConnection as flattenConnection5 } from "@shopify/hydrogen";
+import { useContext as useContext5, useEffect as useEffect26, useMemo as useMemo23, useState as useState25 } from "react";
+
+// src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.module.css
+var result27 = { "rebuy-recently-viewed-products-container": "RebuyRecentlyViewedProducts_rebuy-recently-viewed-products-container", "product-grid": "RebuyRecentlyViewedProducts_product-grid" };
+var RebuyRecentlyViewedProducts_default = result27;
+
+// src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.tsx
+import { jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
+var RebuyRecentlyViewedProducts = (props) => {
+  const {
+    addToCartBtnText = "Add to cart",
+    addToCartCallback,
+    customTitle = `Your recently viewed products`,
+    customTitleLevel = "h2",
+    customTitleStyle,
+    limit,
+    options,
+    productId
+  } = props;
+  const { customerId, uuid } = useProductViewedStore();
+  const { apiKey, loadingStatus: configLoadingStatus, rebuyConfig } = useRebuyConfig();
+  const rebuyContext = useContext5(RebuyContext);
+  const [rebuyApiClient, setRebuyApiClient] = useState25(null);
+  const [initialized, setInitialized] = useState25(false);
+  const [products, setProducts] = useState25([]);
+  const [metadata, setMetadata] = useState25();
+  const rebuyConfigKey = rebuyConfig?.shop?.cache_key;
+  const endpoint = customerId && customerId !== "" ? `/api/v1/products/viewed?key=${rebuyConfigKey}&customer_id=${customerId}` : `/api/v1/products/viewed?key=${rebuyConfigKey}&uuid=${uuid}`;
+  useEffect26(() => {
+    if (!rebuyApiClient && apiKey && configLoadingStatus === "success") {
+      const client = new RebuyClient5(apiKey);
+      if (rebuyContext?.contextParameters) {
+        const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, endpoint);
+        client.setContextParameters(filteredParams);
+      }
+      if (options) {
+        client.setDefaultParameters(options);
+      }
+      setRebuyApiClient(client);
+      setInitialized(true);
+    }
+  }, [apiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, uuid, endpoint]);
+  useEffect26(() => {
+    if (rebuyApiClient && rebuyContext?.contextParameters) {
+      const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, endpoint);
+      rebuyApiClient.setContextParameters(filteredParams);
+    }
+  }, [rebuyApiClient, rebuyContext, uuid, endpoint]);
+  const request = useMemo23(() => {
+    const req = {
+      endpoint,
+      params: {}
+      // Keeping this object generic to allow for custom endpoints
+    };
+    if (limit) {
+      req.params.limit = limit;
+    }
+    return req;
+  }, [limit, uuid, endpoint]);
+  useEffect26(() => {
+    let isMounted = true;
+    if (!rebuyApiClient || !initialized || configLoadingStatus !== "success") return;
+    const fetchData = async () => {
+      try {
+        const { data, metadata: metadata2 } = await rebuyApiClient.getStorefrontData(
+          request.endpoint,
+          request.params
+        );
+        if (isMounted) {
+          setProducts(
+            Array.isArray(data) ? data.filter((p) => p.id !== productId).map((p) => ({
+              ...p,
+              variants: {
+                nodes: p.variants ? flattenConnection5(p.variants) : []
+              }
+            })) : []
+          );
+          setMetadata(metadata2);
+        }
+      } catch (error) {
+        console.error("[RebuyWidgetContainer] Error fetching widget data:", error);
+        if (isMounted) {
+          setProducts([]);
+          setMetadata(void 0);
+        }
+      }
+    };
+    fetchData();
+    return () => {
+      isMounted = false;
+    };
+  }, [rebuyApiClient, initialized, request, configLoadingStatus, productId]);
+  if (products.length === 0) {
+    rebuyDebugLog.log("widget-recently-viewed-products" /* WIDGET_RECENTLY_VIEWED_PRODUCTS */, "RebuyRecentlyViewedProducts: No products found");
+    return null;
+  }
+  return /* @__PURE__ */ jsxs33("div", { className: RebuyRecentlyViewedProducts_default["rebuy-recently-viewed-products-container"], children: [
+    /* @__PURE__ */ jsx51(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ jsx51("ul", { className: RebuyRecentlyViewedProducts_default["product-grid"], children: products?.map((product) => /* @__PURE__ */ jsx51("li", { children: /* @__PURE__ */ jsx51(
+      ProductCard,
+      {
+        addToCartBtnText,
+        addToCartCallback,
+        product,
+        productCardTitleLevel: getTitleLevel("h2")
+      },
+      product.id
+    ) }, product.id)) })
+  ] });
+};
+
 // src/constants/api.ts
 var REBUY_THEME_STYLES_BASE_URL = "https://rebuyengine.com/api/v1/theme-styles";
 
@@ -9603,6 +9791,8 @@ export {
   RebuyHydrogenReactContextProvider,
   RebuyProductAddOns,
   RebuyProductRecommendations,
+  RebuyProductViewed,
+  RebuyRecentlyViewedProducts,
   RebuySmartCart,
   RebuyWidget,
   RebuyWidgetContainer,