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

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export * from './widgets/RebuyCompleteTheLook';
 export * from './widgets/RebuyDynamicBundleProducts';
 export * from './widgets/RebuyProductAddOns';
 export * from './widgets/RebuyProductRecommendations';
+export * from './widgets/RebuyProductViewed';
+export * from './widgets/RebuyRecentlyViewedProducts';
 export * from './widgets/RebuyWidget';
 export { RebuyConfigProvider, useRebuyConfig } from './context/RebuyConfigContext';
 export type { RebuyConfigContextType, RebuyConfigLoadingStatus, RebuyConfigProviderProps, } from './context/RebuyConfigContext';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAG9D,cAAc,6BAA6B,CAAC;AAG5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnF,YAAY,EACR,sBAAsB,EACtB,wBAAwB,EACxB,wBAAwB,GAC3B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAGrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAG9D,cAAc,6BAA6B,CAAC;AAG5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC;AACrD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnF,YAAY,EACR,sBAAsB,EACtB,wBAAwB,EACxB,wBAAwB,GAC3B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAGrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -37,6 +37,8 @@ __export(index_exports, {
   RebuyHydrogenReactContextProvider: () => RebuyHydrogenReactContextProvider,
   RebuyProductAddOns: () => RebuyProductAddOns,
   RebuyProductRecommendations: () => RebuyProductRecommendations,
+  RebuyProductViewed: () => RebuyProductViewed,
+  RebuyRecentlyViewedProducts: () => RebuyRecentlyViewedProducts,
   RebuySmartCart: () => RebuySmartCart,
   RebuyWidget: () => RebuyWidget,
   RebuyWidgetContainer: () => RebuyWidgetContainer,
@@ -8707,10 +8709,25 @@ var SmartCartContainer_default = result22;
 // src/smart-cart/components/SmartCartContainer/SmartCartContainer.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var SmartCartContainer = ({ containerId }) => {
-  const { checkout, config, getItemCount, hideCart, isVisible } = useSmartCart();
+  const { config, getItemCount, hideCart, isVisible } = useSmartCart();
+  const containerRef = (0, import_react32.useRef)(null);
+  const previousFocusRef = (0, import_react32.useRef)(null);
   const components = (0, import_react32.useMemo)(() => config && Array.isArray(config.components) ? config.components : [], [config]);
-  const handleCheckout = () => checkout();
-  const handleClose = () => hideCart();
+  const handleClose = (0, import_react32.useCallback)(() => {
+    hideCart();
+    if (previousFocusRef.current) {
+      previousFocusRef.current.focus();
+    }
+  }, [hideCart]);
+  (0, import_react32.useEffect)(() => {
+    if (isVisible) {
+      previousFocusRef.current = document.activeElement;
+      const closeButton = containerRef.current?.querySelector("#rebuy-cart-close");
+      if (closeButton instanceof HTMLElement) {
+        closeButton.focus();
+      }
+    }
+  }, [isVisible]);
   const backgroundClassName = (0, import_clsx13.default)(SmartCartContainer_default["rebuy-smart-cart__overlay-background"], {
     [SmartCartContainer_default["rebuy-smart-cart__overlay-background--visible"]]: isVisible
   });
@@ -8736,17 +8753,18 @@ var SmartCartContainer = ({ containerId }) => {
   const titleBarComponent = components.find((c) => c.type === "title_bar");
   const ariaLabelledBy = titleBarComponent ? `rebuy-title-${titleBarComponent.component_id}` : defaultTitleId;
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react32.default.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { "aria-hidden": !isVisible, className: backgroundClassName, onClick: handleClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: backgroundClassName, onClick: handleClose }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "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__ */ (0, import_jsx_runtime40.jsxs)("header", { className: SmartCartContainer_default["rebuy-smart-cart__header"], "data-rebuy-cart-anchor": "header", children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: SmartCartContainer_default["rebuy-smart-cart__header-top-bar"], "data-rebuy-cart-header-top-bar": "", children: [
@@ -8793,19 +8811,8 @@ var Utilities5 = __toESM(require("@rebuy/rebuy/utilities"), 1);
 var import_hydrogen7 = require("@shopify/hydrogen");
 var import_react33 = __toESM(require("react"), 1);
 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 = (0, import_react33.useContext)(RebuyContext);
   const [rebuyApiClient, setRebuyApiClient] = (0, import_react33.useState)(null);
   const [initialized, setInitialized] = (0, import_react33.useState)(false);
@@ -8814,10 +8821,9 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
   const shopifyCollectionId = collection?.id ?? collectionId ?? null;
   const [products, setProducts] = (0, import_react33.useState)([]);
   const [metadata, setMetadata] = (0, import_react33.useState)();
-  const finalApiKey = apiKeyFromProps || apiKeyFromContext;
   (0, import_react33.useEffect)(() => {
-    if (!rebuyApiClient && finalApiKey && configLoadingStatus === "success") {
-      const client = new import_rebuy3.RebuyClient(finalApiKey);
+    if (!rebuyApiClient && apiKey && configLoadingStatus === "success") {
+      const client = new import_rebuy3.RebuyClient(apiKey);
       const currentEndpoint = dataSource || "/api/v1/products/recommended";
       if (rebuyContext?.contextParameters) {
         const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, currentEndpoint);
@@ -8829,7 +8835,7 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
       setRebuyApiClient(client);
       setInitialized(true);
     }
-  }, [finalApiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, dataSource]);
+  }, [apiKey, rebuyApiClient, configLoadingStatus, options, rebuyContext, dataSource]);
   (0, import_react33.useEffect)(() => {
     if (rebuyApiClient && rebuyContext?.contextParameters) {
       const currentEndpoint = dataSource || "/api/v1/products/recommended";
@@ -8896,7 +8902,7 @@ var RebuyWidgetContainerBase = ({ children, ...props }) => {
   );
   const childProps = {
     ...props,
-    apiKey: finalApiKey,
+    apiKey,
     cacheKey: rebuyConfig?.shop?.cache_key,
     key: product?.id,
     metadata,
@@ -9597,7 +9603,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
@@ -9617,7 +9623,7 @@ var RebuyProductRecommendations = (props) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("section", { className: RebuyProductRecommendations_default.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { className: RebuyProductRecommendations_default.productItem, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { className: RebuyProductRecommendations_default.productGrid, children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ProductCard,
       {
         addToCartBtnText,
@@ -9630,6 +9636,190 @@ var RebuyProductRecommendations = (props) => {
   ] });
 };
 
+// src/widgets/RebuyProductViewed/RebuyProductViewed.tsx
+var import_rebuy4 = require("@rebuy/rebuy");
+var Utilities6 = __toESM(require("@rebuy/rebuy/utilities"), 1);
+var import_react37 = require("react");
+
+// src/zustandStores/productViewed.ts
+var import_zustand2 = require("zustand");
+var useProductViewedStore = (0, import_zustand2.create)((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] = (0, import_react37.useState)(null);
+  const [Rebuy, setRebuy] = (0, import_react37.useState)(null);
+  const shopifyProductId = product?.id ?? productId ?? null;
+  const [initialized, setInitialized] = (0, import_react37.useState)(false);
+  const { setCustomerId, setUuid } = useProductViewedStore();
+  const request = (0, import_react37.useMemo)(() => {
+    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]);
+  (0, import_react37.useEffect)(() => {
+    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 import_rebuy4.RebuyClient(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
+var import_rebuy5 = require("@rebuy/rebuy");
+var import_hydrogen11 = require("@shopify/hydrogen");
+var import_react38 = require("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
+var import_jsx_runtime51 = require("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 = (0, import_react38.useContext)(RebuyContext);
+  const [rebuyApiClient, setRebuyApiClient] = (0, import_react38.useState)(null);
+  const [initialized, setInitialized] = (0, import_react38.useState)(false);
+  const [products, setProducts] = (0, import_react38.useState)([]);
+  const [metadata, setMetadata] = (0, import_react38.useState)();
+  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}`;
+  (0, import_react38.useEffect)(() => {
+    if (!rebuyApiClient && apiKey && configLoadingStatus === "success") {
+      const client = new import_rebuy5.RebuyClient(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]);
+  (0, import_react38.useEffect)(() => {
+    if (rebuyApiClient && rebuyContext?.contextParameters) {
+      const filteredParams = filterContextForWidgetEndpoints(rebuyContext.contextParameters, endpoint);
+      rebuyApiClient.setContextParameters(filteredParams);
+    }
+  }, [rebuyApiClient, rebuyContext, uuid, endpoint]);
+  const request = (0, import_react38.useMemo)(() => {
+    const req = {
+      endpoint,
+      params: {}
+      // Keeping this object generic to allow for custom endpoints
+    };
+    if (limit) {
+      req.params.limit = limit;
+    }
+    return req;
+  }, [limit, uuid, endpoint]);
+  (0, import_react38.useEffect)(() => {
+    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 ? (0, import_hydrogen11.flattenConnection)(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__ */ (0, import_jsx_runtime51.jsxs)("div", { className: RebuyRecentlyViewedProducts_default["rebuy-recently-viewed-products-container"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Title, { level: getTitleLevel(customTitleLevel), style: customTitleStyle, text: customTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { className: RebuyRecentlyViewedProducts_default["product-grid"], children: products?.map((product) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      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";