@constructor-io/constructorio-ui-plp 1.4.7 → 1.5.0

package/lib/cjs/components/ProductCard/ProductCard.css

@@ -8,6 +8,7 @@
 .cio-image-container {
   width: 100%;
   height: auto;
+  position: relative;
 }
 
 .cio-image {
@@ -16,6 +17,18 @@
   object-fit: cover;
 }
 
+.cio-rollover-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+
+.cio-rollover-image.is-active {
+  opacity: 1;
+}
+
 .cio-content {
   width: 100%;
 }
@@ -56,4 +69,4 @@
   height: 40px;
   font-size: 16px;
   cursor: pointer;
-}
+}

package/lib/cjs/components/ProductCard/ProductCard.js

@@ -1,20 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const useCioPlpContext_1 = require("../../hooks/useCioPlpContext");
 const callbacks_1 = require("../../hooks/callbacks");
 const ProductSwatch_1 = tslib_1.__importDefault(require("../ProductSwatch"));
 const useProduct_1 = tslib_1.__importDefault(require("../../hooks/useProduct"));
 const utils_1 = require("../../utils");
+const constants_1 = require("../../constants");
 /**
  * ProductCard component that has Constructor tracking built-in.
  */
 function ProductCard(props) {
+    const [isRolloverImageShown, setIsRolloverImageShown] = (0, react_1.useState)(false);
+    const cardRef = (0, react_1.useRef)(null);
     const { item, children } = props;
     const state = (0, useCioPlpContext_1.useCioPlpContext)();
     const productInfo = (0, useProduct_1.default)({ item });
-    const { productSwatch, itemName, itemPrice, itemImageUrl, itemUrl, salePrice, hasSalePrice } = productInfo;
+    const { productSwatch, itemName, itemPrice, itemImageUrl, itemUrl, salePrice, hasSalePrice, rolloverImage, } = productInfo;
     if (!state) {
         throw new Error('This component is meant to be used within the CioPlp provider.');
     }
@@ -26,16 +29,43 @@ function ProductCard(props) {
     const { formatPrice } = state.formatters;
     const onClick = (0, callbacks_1.useOnProductCardClick)(client, state.callbacks.onProductCardClick);
     const cnstrcData = (0, utils_1.getProductCardCnstrcDataAttributes)(productInfo);
+    const handleRolloverImageState = (isShown) => {
+        var _a;
+        setIsRolloverImageShown(isShown);
+        if (isShown && rolloverImage) {
+            const event = new CustomEvent(constants_1.EMITTED_EVENTS.PRODUCT_CARD_IMAGE_ROLLOVER, {
+                detail: { item },
+                bubbles: true,
+            });
+            (_a = cardRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+        }
+    };
+    const onMouseEnter = (event) => {
+        if (state.callbacks.onProductCardMouseEnter) {
+            state.callbacks.onProductCardMouseEnter(event, item);
+        }
+        handleRolloverImageState(true);
+    };
+    const onMouseLeave = (event) => {
+        if (state.callbacks.onProductCardMouseLeave) {
+            state.callbacks.onProductCardMouseLeave(event, item);
+        }
+        handleRolloverImageState(false);
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null, typeof children === 'function' ? (children({
         item,
         productInfo,
         formatPrice,
         onAddToCart,
         onClick,
+        onMouseEnter,
+        onMouseLeave,
+        isRolloverImageShown,
         productCardCnstrcDataAttributes: cnstrcData,
-    })) : (react_1.default.createElement("a", Object.assign({}, cnstrcData, { className: 'cio-product-card', href: itemUrl, onClick: (e) => { var _a; return onClick(e, item, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }),
-        react_1.default.createElement("div", { className: 'cio-image-container' },
-            react_1.default.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' })),
+    })) : (react_1.default.createElement("a", Object.assign({}, cnstrcData, { className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => { var _a; return onClick(e, item, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }),
+        react_1.default.createElement("div", { className: 'cio-image-container', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+            react_1.default.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' }),
+            rolloverImage && (react_1.default.createElement("img", { alt: `${itemName} rollover`, src: rolloverImage, loading: 'lazy', className: (0, utils_1.concatStyles)('cio-image cio-rollover-image', isRolloverImageShown && 'is-active') }))),
         react_1.default.createElement("div", { className: 'cio-content' },
             react_1.default.createElement("div", { className: 'cio-item-prices-container' },
                 hasSalePrice && (react_1.default.createElement("div", { className: 'cio-item-price', id: 'cio-sale-price' }, formatPrice(salePrice))),

package/lib/cjs/constants.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEMO_API_KEY = void 0;
+exports.EMITTED_EVENTS = exports.DEMO_API_KEY = void 0;
 // eslint-disable-next-line import/prefer-default-export
 exports.DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
+exports.EMITTED_EVENTS = {
+    PRODUCT_CARD_IMAGE_ROLLOVER: 'cio.ui-plp.productCardImageRollover',
+};

package/lib/cjs/hooks/useProduct.js

@@ -6,7 +6,7 @@ const useCioPlpContext_1 = require("./useCioPlpContext");
 const utils_1 = require("../utils");
 const itemFieldGetters_1 = require("../utils/itemFieldGetters");
 const useProductInfo = ({ item }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const state = (0, useCioPlpContext_1.useCioPlpContext)();
     const productSwatch = (0, useProductSwatch_1.default)({ item });
     if (!item.data || !item.itemId || !item.itemName) {
@@ -14,13 +14,19 @@ const useProductInfo = ({ item }) => {
     }
     const getPrice = (0, utils_1.tryCatchify)(((_a = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _a === void 0 ? void 0 : _a.getPrice) || itemFieldGetters_1.getPrice);
     const getSalePrice = (0, utils_1.tryCatchify)(((_b = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _b === void 0 ? void 0 : _b.getSalePrice) || itemFieldGetters_1.getSalePrice);
-    const itemName = ((_c = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _c === void 0 ? void 0 : _c.itemName) || item.itemName;
-    const itemPrice = ((_d = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _d === void 0 ? void 0 : _d.price) || getPrice(item);
-    const itemImageUrl = ((_e = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _e === void 0 ? void 0 : _e.imageUrl) || item.imageUrl;
-    const itemUrl = ((_f = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _f === void 0 ? void 0 : _f.url) || item.url;
-    const variationId = (_g = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _g === void 0 ? void 0 : _g.variationId;
+    const getRolloverImage = (0, utils_1.tryCatchify)(((_c = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _c === void 0 ? void 0 : _c.getRolloverImage) || itemFieldGetters_1.getRolloverImage);
+    const itemName = ((_d = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _d === void 0 ? void 0 : _d.itemName) || item.itemName;
+    const itemPrice = ((_e = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _e === void 0 ? void 0 : _e.price) || getPrice(item);
+    const itemImageUrl = ((_f = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _f === void 0 ? void 0 : _f.imageUrl) || item.imageUrl;
+    const itemUrl = ((_g = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _g === void 0 ? void 0 : _g.url) || item.url;
+    const variationId = (_h = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _h === void 0 ? void 0 : _h.variationId;
+    let rolloverImage = (_j = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _j === void 0 ? void 0 : _j.rolloverImage;
+    // Fallback to item's rollover image if all variations don't have a rollover image
+    if (!rolloverImage && ((_k = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.swatchList) === null || _k === void 0 ? void 0 : _k.every((swatch) => !swatch.rolloverImage))) {
+        rolloverImage = getRolloverImage(item);
+    }
     const { itemId } = item;
-    let salePrice = ((_h = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _h === void 0 ? void 0 : _h.salePrice) || getSalePrice(item);
+    let salePrice = ((_l = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _l === void 0 ? void 0 : _l.salePrice) || getSalePrice(item);
     let hasSalePrice = true;
     if (!(0, utils_1.isValidSalePrice)(salePrice, itemPrice)) {
         salePrice = undefined;
@@ -35,6 +41,7 @@ const useProductInfo = ({ item }) => {
         variationId,
         itemId,
         salePrice,
+        rolloverImage,
         hasSalePrice,
     };
 };

package/lib/cjs/hooks/useProductSwatch.js

@@ -4,7 +4,7 @@ const react_1 = require("react");
 const useCioPlpContext_1 = require("./useCioPlpContext");
 const itemFieldGetters_1 = require("../utils/itemFieldGetters");
 const useProductSwatch = ({ item }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const [selectedVariation, setSelectedVariation] = (0, react_1.useState)();
     const [swatchList, setSwatchList] = (0, react_1.useState)([]);
     const state = (0, useCioPlpContext_1.useCioPlpContext)();
@@ -12,16 +12,17 @@ const useProductSwatch = ({ item }) => {
     const getPrice = ((_b = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _b === void 0 ? void 0 : _b.getPrice) || itemFieldGetters_1.getPrice;
     const getSalePrice = ((_c = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _c === void 0 ? void 0 : _c.getSalePrice) || itemFieldGetters_1.getSalePrice;
     const getSwatchPreview = ((_d = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _d === void 0 ? void 0 : _d.getSwatchPreview) || itemFieldGetters_1.getSwatchPreview;
+    const getRolloverImage = ((_e = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _e === void 0 ? void 0 : _e.getRolloverImage) || itemFieldGetters_1.getRolloverImage;
     (0, react_1.useEffect)(() => {
         if (item === null || item === void 0 ? void 0 : item.variations) {
             try {
-                setSwatchList(getSwatches(item, getPrice, getSwatchPreview, getSalePrice) || []);
+                setSwatchList(getSwatches(item, getPrice, getSwatchPreview, getSalePrice, getRolloverImage) || []);
             }
             catch (e) {
                 // do nothing
             }
         }
-    }, [item, getSwatches, getPrice, getSwatchPreview, getSalePrice]);
+    }, [item, getSwatches, getPrice, getSwatchPreview, getSalePrice, getRolloverImage]);
     (0, react_1.useEffect)(() => {
         if (item === null || item === void 0 ? void 0 : item.variations) {
             const initialSwatch = swatchList === null || swatchList === void 0 ? void 0 : swatchList.find((swatch) => (swatch === null || swatch === void 0 ? void 0 : swatch.variationId) === (item === null || item === void 0 ? void 0 : item.variationId));

package/lib/cjs/utils/itemFieldGetters.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSwatchPreview = exports.getSwatches = exports.getSalePrice = exports.getPrice = void 0;
+exports.getSwatchPreview = exports.getSwatches = exports.getRolloverImage = exports.getSalePrice = exports.getPrice = void 0;
 // eslint-disable-next-line import/prefer-default-export
 function getPrice(item) {
     return item.data.price;
@@ -10,7 +10,12 @@ function getSalePrice(item) {
     return item.data.sale_price;
 }
 exports.getSalePrice = getSalePrice;
-function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePrice) {
+function getRolloverImage(item) {
+    return item.data.rolloverImage;
+}
+exports.getRolloverImage = getRolloverImage;
+/* eslint-disable-next-line max-params */
+function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePrice, retrieveRolloverImage) {
     var _a;
     const swatchList = [];
     (_a = item === null || item === void 0 ? void 0 : item.variations) === null || _a === void 0 ? void 0 : _a.forEach((variation) => {
@@ -23,6 +28,7 @@ function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePri
                 price: retrievePrice(variation),
                 salePrice: retrieveSalePrice(variation),
                 swatchPreview: retrieveSwatchPreview(variation),
+                rolloverImage: retrieveRolloverImage(variation),
             });
         }
     });

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.4.7';
+exports.default = '1.5.0';

package/lib/mjs/components/ProductCard/ProductCard.css

@@ -8,6 +8,7 @@
 .cio-image-container {
   width: 100%;
   height: auto;
+  position: relative;
 }
 
 .cio-image {
@@ -16,6 +17,18 @@
   object-fit: cover;
 }
 
+.cio-rollover-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+}
+
+.cio-rollover-image.is-active {
+  opacity: 1;
+}
+
 .cio-content {
   width: 100%;
 }
@@ -56,4 +69,4 @@
   height: 40px;
   font-size: 16px;
   cursor: pointer;
-}
+}

package/lib/mjs/components/ProductCard/ProductCard.js

@@ -1,17 +1,20 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import { useCioPlpContext } from '../../hooks/useCioPlpContext';
 import { useOnAddToCart, useOnProductCardClick } from '../../hooks/callbacks';
 import ProductSwatch from '../ProductSwatch';
 import useProductInfo from '../../hooks/useProduct';
 import { concatStyles, getProductCardCnstrcDataAttributes } from '../../utils';
+import { EMITTED_EVENTS } from '../../constants';
 /**
  * ProductCard component that has Constructor tracking built-in.
  */
 export default function ProductCard(props) {
+    const [isRolloverImageShown, setIsRolloverImageShown] = useState(false);
+    const cardRef = useRef(null);
     const { item, children } = props;
     const state = useCioPlpContext();
     const productInfo = useProductInfo({ item });
-    const { productSwatch, itemName, itemPrice, itemImageUrl, itemUrl, salePrice, hasSalePrice } = productInfo;
+    const { productSwatch, itemName, itemPrice, itemImageUrl, itemUrl, salePrice, hasSalePrice, rolloverImage, } = productInfo;
     if (!state) {
         throw new Error('This component is meant to be used within the CioPlp provider.');
     }
@@ -23,16 +26,42 @@ export default function ProductCard(props) {
     const { formatPrice } = state.formatters;
     const onClick = useOnProductCardClick(client, state.callbacks.onProductCardClick);
     const cnstrcData = getProductCardCnstrcDataAttributes(productInfo);
+    const handleRolloverImageState = (isShown) => {
+        setIsRolloverImageShown(isShown);
+        if (isShown && rolloverImage) {
+            const event = new CustomEvent(EMITTED_EVENTS.PRODUCT_CARD_IMAGE_ROLLOVER, {
+                detail: { item },
+                bubbles: true,
+            });
+            cardRef.current?.dispatchEvent(event);
+        }
+    };
+    const onMouseEnter = (event) => {
+        if (state.callbacks.onProductCardMouseEnter) {
+            state.callbacks.onProductCardMouseEnter(event, item);
+        }
+        handleRolloverImageState(true);
+    };
+    const onMouseLeave = (event) => {
+        if (state.callbacks.onProductCardMouseLeave) {
+            state.callbacks.onProductCardMouseLeave(event, item);
+        }
+        handleRolloverImageState(false);
+    };
     return (React.createElement(React.Fragment, null, typeof children === 'function' ? (children({
         item,
         productInfo,
         formatPrice,
         onAddToCart,
         onClick,
+        onMouseEnter,
+        onMouseLeave,
+        isRolloverImageShown,
         productCardCnstrcDataAttributes: cnstrcData,
-    })) : (React.createElement("a", { ...cnstrcData, className: 'cio-product-card', href: itemUrl, onClick: (e) => onClick(e, item, productSwatch?.selectedVariation?.variationId) },
-        React.createElement("div", { className: 'cio-image-container' },
-            React.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' })),
+    })) : (React.createElement("a", { ...cnstrcData, className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => onClick(e, item, productSwatch?.selectedVariation?.variationId) },
+        React.createElement("div", { className: 'cio-image-container', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+            React.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' }),
+            rolloverImage && (React.createElement("img", { alt: `${itemName} rollover`, src: rolloverImage, loading: 'lazy', className: concatStyles('cio-image cio-rollover-image', isRolloverImageShown && 'is-active') }))),
         React.createElement("div", { className: 'cio-content' },
             React.createElement("div", { className: 'cio-item-prices-container' },
                 hasSalePrice && (React.createElement("div", { className: 'cio-item-price', id: 'cio-sale-price' }, formatPrice(salePrice))),

package/lib/mjs/constants.js

@@ -1,2 +1,5 @@
 // eslint-disable-next-line import/prefer-default-export
 export const DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
+export const EMITTED_EVENTS = {
+    PRODUCT_CARD_IMAGE_ROLLOVER: 'cio.ui-plp.productCardImageRollover',
+};

package/lib/mjs/hooks/useProduct.js

@@ -1,7 +1,7 @@
 import useProductSwatch from './useProductSwatch';
 import { useCioPlpContext } from './useCioPlpContext';
 import { tryCatchify, isValidSalePrice } from '../utils';
-import { getPrice as defaultGetPrice, getSalePrice as defaultGetSalePrice, } from '../utils/itemFieldGetters';
+import { getPrice as defaultGetPrice, getSalePrice as defaultGetSalePrice, getRolloverImage as defaultGetRolloverImage, } from '../utils/itemFieldGetters';
 const useProductInfo = ({ item }) => {
     const state = useCioPlpContext();
     const productSwatch = useProductSwatch({ item });
@@ -10,11 +10,17 @@ const useProductInfo = ({ item }) => {
     }
     const getPrice = tryCatchify(state?.itemFieldGetters?.getPrice || defaultGetPrice);
     const getSalePrice = tryCatchify(state?.itemFieldGetters?.getSalePrice || defaultGetSalePrice);
+    const getRolloverImage = tryCatchify(state?.itemFieldGetters?.getRolloverImage || defaultGetRolloverImage);
     const itemName = productSwatch?.selectedVariation?.itemName || item.itemName;
     const itemPrice = productSwatch?.selectedVariation?.price || getPrice(item);
     const itemImageUrl = productSwatch?.selectedVariation?.imageUrl || item.imageUrl;
     const itemUrl = productSwatch?.selectedVariation?.url || item.url;
     const variationId = productSwatch?.selectedVariation?.variationId;
+    let rolloverImage = productSwatch?.selectedVariation?.rolloverImage;
+    // Fallback to item's rollover image if all variations don't have a rollover image
+    if (!rolloverImage && productSwatch?.swatchList?.every((swatch) => !swatch.rolloverImage)) {
+        rolloverImage = getRolloverImage(item);
+    }
     const { itemId } = item;
     let salePrice = productSwatch?.selectedVariation?.salePrice || getSalePrice(item);
     let hasSalePrice = true;
@@ -31,6 +37,7 @@ const useProductInfo = ({ item }) => {
         variationId,
         itemId,
         salePrice,
+        rolloverImage,
         hasSalePrice,
     };
 };

package/lib/mjs/hooks/useProductSwatch.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useCioPlpContext } from './useCioPlpContext';
-import { getSwatches as defaultGetSwatches, getPrice as defaultGetPrice, getSwatchPreview as defaultGetSwatchPreview, getSalePrice as defaultGetSalePrice, } from '../utils/itemFieldGetters';
+import { getSwatches as defaultGetSwatches, getPrice as defaultGetPrice, getSwatchPreview as defaultGetSwatchPreview, getSalePrice as defaultGetSalePrice, getRolloverImage as defaultGetRolloverImage, } from '../utils/itemFieldGetters';
 const useProductSwatch = ({ item }) => {
     const [selectedVariation, setSelectedVariation] = useState();
     const [swatchList, setSwatchList] = useState([]);
@@ -9,16 +9,17 @@ const useProductSwatch = ({ item }) => {
     const getPrice = state?.itemFieldGetters?.getPrice || defaultGetPrice;
     const getSalePrice = state?.itemFieldGetters?.getSalePrice || defaultGetSalePrice;
     const getSwatchPreview = state?.itemFieldGetters?.getSwatchPreview || defaultGetSwatchPreview;
+    const getRolloverImage = state?.itemFieldGetters?.getRolloverImage || defaultGetRolloverImage;
     useEffect(() => {
         if (item?.variations) {
             try {
-                setSwatchList(getSwatches(item, getPrice, getSwatchPreview, getSalePrice) || []);
+                setSwatchList(getSwatches(item, getPrice, getSwatchPreview, getSalePrice, getRolloverImage) || []);
             }
             catch (e) {
                 // do nothing
             }
         }
-    }, [item, getSwatches, getPrice, getSwatchPreview, getSalePrice]);
+    }, [item, getSwatches, getPrice, getSwatchPreview, getSalePrice, getRolloverImage]);
     useEffect(() => {
         if (item?.variations) {
             const initialSwatch = swatchList?.find((swatch) => swatch?.variationId === item?.variationId);

package/lib/mjs/utils/itemFieldGetters.js

@@ -5,7 +5,11 @@ export function getPrice(item) {
 export function getSalePrice(item) {
     return item.data.sale_price;
 }
-export function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePrice) {
+export function getRolloverImage(item) {
+    return item.data.rolloverImage;
+}
+/* eslint-disable-next-line max-params */
+export function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieveSalePrice, retrieveRolloverImage) {
     const swatchList = [];
     item?.variations?.forEach((variation) => {
         if (retrieveSwatchPreview(variation)) {
@@ -17,6 +21,7 @@ export function getSwatches(item, retrievePrice, retrieveSwatchPreview, retrieve
                 price: retrievePrice(variation),
                 salePrice: retrieveSalePrice(variation),
                 swatchPreview: retrieveSwatchPreview(variation),
+                rolloverImage: retrieveRolloverImage(variation),
             });
         }
     });

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.4.7';
+export default '1.5.0';

package/lib/types/components/ProductCard/ProductCard.d.ts

@@ -29,6 +29,20 @@ export interface ProductCardRenderProps extends ProductCardProps {
      * Set globally at the CioPlp provider level.
      */
     onClick: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Callback to run on Product Card Mouse Enter.
+     * Set globally at the CioPlp provider level.
+     */
+    onMouseEnter: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Callback to run on Product Card Mouse Leave.
+     * Set globally at the CioPlp provider level.
+     */
+    onMouseLeave: (event: React.MouseEvent, item: Item) => void;
+    /**
+     * Boolean to show/hide the rollover image.
+     */
+    isRolloverImageShown: boolean;
     /**
      * Data Attributes to surface on parent div of product card.
      */

package/lib/types/constants.d.ts

@@ -1 +1,4 @@
 export declare const DEMO_API_KEY = "key_M57QS8SMPdLdLx4x";
+export declare const EMITTED_EVENTS: {
+    PRODUCT_CARD_IMAGE_ROLLOVER: string;
+};

package/lib/types/types.d.ts

@@ -13,8 +13,9 @@ export type CioClientOptions = Omit<ConstructorClientOptions, 'apiKey' | 'sendTr
 export interface ItemFieldGetters {
     getPrice: (item: Item | Variation) => number;
     getSalePrice: (item: Item | Variation) => number | undefined;
+    getRolloverImage: (item: Item | Variation) => string | undefined;
     getSwatchPreview: (variation: Variation) => string;
-    getSwatches: (item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice']) => SwatchItem[] | undefined;
+    getSwatches: (item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']) => SwatchItem[] | undefined;
 }
 export interface Formatters {
     formatPrice: (price?: number) => string;
@@ -22,6 +23,8 @@ export interface Formatters {
 export interface Callbacks {
     onAddToCart?: (event: React.MouseEvent, item: Item, selectedVariation?: Variation) => void;
     onProductCardClick?: (event: React.MouseEvent, item: Item) => void;
+    onProductCardMouseEnter?: (event: React.MouseEvent, item: Item) => void;
+    onProductCardMouseLeave?: (event: React.MouseEvent, item: Item) => void;
     onSwatchClick?: (event: React.MouseEvent, swatch: SwatchItem) => void;
     onRedirect?: (url: string) => void;
 }
@@ -134,6 +137,7 @@ export interface SwatchItem {
     salePrice?: number;
     swatchPreview: string;
     variationId?: string;
+    rolloverImage?: string;
 }
 export interface PlpBrowseData {
     resultId: string;
@@ -178,6 +182,7 @@ export interface ProductInfoObject {
     itemUrl?: string;
     itemImageUrl?: string;
     variationId?: string;
+    rolloverImage?: string;
     hasSalePrice?: boolean;
 }
 export type UseProductInfoProps = {

package/lib/types/utils/itemFieldGetters.d.ts

@@ -1,5 +1,6 @@
 import { ItemFieldGetters, Item, SwatchItem, Variation } from '../types';
 export declare function getPrice(item: Item | Variation): number;
 export declare function getSalePrice(item: Item | Variation): number | undefined;
-export declare function getSwatches(item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice']): SwatchItem[] | undefined;
+export declare function getRolloverImage(item: Item | Variation): string | undefined;
+export declare function getSwatches(item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']): SwatchItem[] | undefined;
 export declare function getSwatchPreview(variation: Variation): string;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.4.7";
+declare const _default: "1.5.0";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-plp",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "description": "Constructor PLP UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",