@envive-ai/react-toolkit 0.1.5 → 0.1.7

package/dist/index-DLbdcczl.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/types.d.ts
+type SearchFilterItem$1 = {
+  id: string;
+  displayName: string;
+  value: string;
+  isSelected: boolean;
+};
+type SearchFilter$1 = {
+  id: string;
+  displayName: string;
+  items: SearchFilterItem$1[];
+};
+type SelectFilterItem = (filterItem: SearchFilterItem$1) => void;
+interface SearchFilterItemProps {
+  filterItem: SearchFilterItem$1;
+  onSelectFilterItem: SelectFilterItem;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+}
+interface SearchFilterHeaderProps {
+  closeModal: () => void;
+  productCount: number;
+  headerClassName: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+}
+interface SearchFilterProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  filters: SearchFilter$1[];
+  productCount: number;
+  selectFilterItem: SelectFilterItem;
+  clearAllFilters: () => void;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  filterButtonText: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+  headerContent: ReactNode;
+}
+//#endregion
+//#region src/components/SearchFilter/SearchFilter.d.ts
+declare const SearchFilter: ({
+  isOpen,
+  setIsOpen,
+  filters,
+  selectFilterItem,
+  clearAllFilters,
+  filterButtonText,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor,
+  headerContent
+}: SearchFilterProps) => react_jsx_runtime9.JSX.Element;
+//#endregion
+//#region src/components/SearchFilter/SearchFilterHeader.d.ts
+declare const SearchFilterHeader: ({
+  closeModal,
+  productCount,
+  headerClassName,
+  filterCloseIconVariant
+}: SearchFilterHeaderProps) => react_jsx_runtime9.JSX.Element;
+//#endregion
+//#region src/components/SearchFilter/SearchFilterItem.d.ts
+declare const SearchFilterItem: ({
+  filterItem,
+  onSelectFilterItem,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor
+}: SearchFilterItemProps) => react_jsx_runtime9.JSX.Element;
+//#endregion
+export { SearchFilter, SearchFilterHeader, SearchFilterHeaderProps, SearchFilterItem, SearchFilterItemProps, SearchFilterProps, SelectFilterItem };

package/dist/index-DlvTcfAg.d.cts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime15 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/SearchFilter/types.d.ts
+type SearchFilterItem$1 = {
+  id: string;
+  displayName: string;
+  value: string;
+  isSelected: boolean;
+};
+type SearchFilter$1 = {
+  id: string;
+  displayName: string;
+  items: SearchFilterItem$1[];
+};
+type SelectFilterItem = (filterItem: SearchFilterItem$1) => void;
+interface SearchFilterItemProps {
+  filterItem: SearchFilterItem$1;
+  onSelectFilterItem: SelectFilterItem;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+}
+interface SearchFilterHeaderProps {
+  closeModal: () => void;
+  productCount: number;
+  headerClassName: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+}
+interface SearchFilterProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  filters: SearchFilter$1[];
+  productCount: number;
+  selectFilterItem: SelectFilterItem;
+  clearAllFilters: () => void;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  filterButtonText: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+  headerContent: ReactNode;
+}
+//#endregion
+//#region src/components/SearchFilter/SearchFilter.d.ts
+declare const SearchFilter: ({
+  isOpen,
+  setIsOpen,
+  filters,
+  selectFilterItem,
+  clearAllFilters,
+  filterButtonText,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor,
+  headerContent
+}: SearchFilterProps) => react_jsx_runtime15.JSX.Element;
+//#endregion
+//#region src/components/SearchFilter/SearchFilterHeader.d.ts
+declare const SearchFilterHeader: ({
+  closeModal,
+  productCount,
+  headerClassName,
+  filterCloseIconVariant
+}: SearchFilterHeaderProps) => react_jsx_runtime15.JSX.Element;
+//#endregion
+//#region src/components/SearchFilter/SearchFilterItem.d.ts
+declare const SearchFilterItem: ({
+  filterItem,
+  onSelectFilterItem,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor
+}: SearchFilterItemProps) => react_jsx_runtime15.JSX.Element;
+//#endregion
+export { SearchFilter, SearchFilterHeader, SearchFilterHeaderProps, SearchFilterItem, SearchFilterItemProps, SearchFilterProps, SelectFilterItem };

package/dist/{searchFilterSidebarVariants-C_UTEIpZ.js → searchFilterSidebarVariants-CZT1frB-.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-CKiMYHO_.js";
+import { ColorNames, colorVar } from "./colorsConfig-BQlaCfxi.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-DcQLi_TT.cjs → searchFilterSidebarVariants-xyhy0PmQ.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-DulwYRIk.cjs');
+const require_colorsConfig = require('./colorsConfig-DCvy_dV4.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -24,6 +24,7 @@
     "prepublish": "npm run build"
   },
   "dependencies": {
+    "@envive-ai/react-hooks": "^0.1.1",
     "@envive-ai/react-icons": "0.1.1",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
@@ -39,10 +40,22 @@
     "typescript": "~5.8.3"
   },
   "exports": {
+    "./Accordion": {
+      "import": "./dist/Accordion/index.js",
+      "require": "./dist/Accordion/index.cjs"
+    },
+    "./AppliedFiltersScrollbar": {
+      "import": "./dist/AppliedFiltersScrollbar/index.js",
+      "require": "./dist/AppliedFiltersScrollbar/index.cjs"
+    },
     "./ButtonBase": {
       "import": "./dist/ButtonBase/index.js",
       "require": "./dist/ButtonBase/index.cjs"
     },
+    "./DynamicFiltersScrollbar": {
+      "import": "./dist/DynamicFiltersScrollbar/index.js",
+      "require": "./dist/DynamicFiltersScrollbar/index.cjs"
+    },
     "./FilterScrollbar": {
       "import": "./dist/FilterScrollbar/index.js",
       "require": "./dist/FilterScrollbar/index.cjs"
@@ -63,6 +76,10 @@
       "import": "./dist/ProductGrid/index.js",
       "require": "./dist/ProductGrid/index.cjs"
     },
+    "./SearchAutocomplete": {
+      "import": "./dist/SearchAutocomplete/index.js",
+      "require": "./dist/SearchAutocomplete/index.cjs"
+    },
     "./SearchFilter": {
       "import": "./dist/SearchFilter/index.js",
       "require": "./dist/SearchFilter/index.cjs"
@@ -71,14 +88,14 @@
       "import": "./dist/SearchInput/index.js",
       "require": "./dist/SearchInput/index.cjs"
     },
-    "./SearchInputAutocomplete": {
-      "import": "./dist/SearchInputAutocomplete/index.js",
-      "require": "./dist/SearchInputAutocomplete/index.cjs"
-    },
     "./SearchInputForm": {
       "import": "./dist/SearchInputForm/index.js",
       "require": "./dist/SearchInputForm/index.cjs"
     },
+    "./SearchResultsContent": {
+      "import": "./dist/SearchResultsContent/index.js",
+      "require": "./dist/SearchResultsContent/index.cjs"
+    },
     "./SearchResultsFilterSidebar": {
       "import": "./dist/SearchResultsFilterSidebar/index.js",
       "require": "./dist/SearchResultsFilterSidebar/index.cjs"

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,90 @@
+import { motion } from 'framer-motion';
+import { useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Text } from '@envive-ai/react-toolkit/Text';
+import ChevronDown from '@envive-ai/react-icons/ChevronDown';
+
+interface AccordionProps {
+  title: string;
+  content: React.ReactNode;
+}
+
+const ANIMATION_DURATION = 0.3;
+
+export const Accordion = ({ title, content }: AccordionProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const titleWrapperClasses = classNames({
+    'spiffy-tw-border-b': true,
+    'spiffy-tw-border-[--spiffy-colors-border-light]': true,
+    'spiffy-tw-pb-2': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-justify-between': true,
+    'spiffy-tw-items-center': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-group': true,
+  });
+
+  const titleClasses = classNames({
+    'spiffy-tw-uppercase': true,
+    'spiffy-tw-text-[--spiffy-colors-text-primary]': true,
+    '!spiffy-tw-font-[400]': true,
+    'group-aria-expanded:!spiffy-tw-font-medium': true,
+  });
+
+  const contentClasses = classNames({
+    'spiffy-tw-overflow-hidden': true,
+  });
+
+  return (
+    <div>
+      <button
+        aria-expanded={isOpen}
+        type="button"
+        className={titleWrapperClasses}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <Text variant="body4" className={titleClasses}>
+          {title}
+        </Text>
+        <motion.div
+          variants={{
+            open: {
+              rotate: 180,
+            },
+            closed: {
+              rotate: 360,
+            },
+          }}
+          animate={isOpen ? 'open' : 'closed'}
+          transition={{ duration: ANIMATION_DURATION, ease: 'easeOut' }}
+        >
+          <ChevronDown />
+        </motion.div>
+      </button>
+      <motion.div
+        variants={{
+          open: {
+            height: 'auto',
+            marginTop: '24px',
+            marginBottom: '24px',
+          },
+          closed: {
+            height: '0px',
+            marginTop: '0px',
+            marginBottom: '0px',
+          },
+        }}
+        className={contentClasses}
+        initial={{ height: 0 }}
+        animate={isOpen ? 'open' : 'closed'}
+        transition={{ duration: ANIMATION_DURATION, ease: 'easeOut' }}
+        ref={contentRef}
+      >
+        {content}
+      </motion.div>
+    </div>
+  );
+};

package/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { SelectedFilterOption } from 'src/atoms/search/types';
+import { Text } from '@envive-ai/react-toolkit/Text';
+
+interface AppliedFiltersScrollbarProps {
+  selectedFilterOptions: SelectedFilterOption[];
+  filterBarClassNames: string;
+  filterDefaultClasses: string;
+  filterHoverClasses: string;
+  appliedFilterBackgroundClasses: string;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+}
+
+export const AppliedFiltersScrollbar = ({
+  selectedFilterOptions,
+  filterBarClassNames,
+  filterDefaultClasses,
+  filterHoverClasses,
+  appliedFilterBackgroundClasses,
+  onRemoveFilter,
+}: AppliedFiltersScrollbarProps) => {
+  if (selectedFilterOptions.length === 0) {
+    return null;
+  }
+
+  // Extract border and text classes from filterDefaultClasses, excluding background because everything is shared between filters except for the applied filters background
+  const filterDefaultWithoutBg = filterDefaultClasses
+    .replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, '')
+    .trim();
+  const buttonClasses = classNames(
+    ' spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap',
+    filterHoverClasses,
+    filterDefaultWithoutBg,
+    appliedFilterBackgroundClasses,
+  );
+  const iconColor = 'currentColor'; // match with text color
+
+  return (
+    <ScrollContainer className={filterBarClassNames} hideScrollbars>
+      {selectedFilterOptions.map((filter) => {
+        return (
+          <button
+            key={filter.id}
+            className={buttonClasses}
+            type="button"
+            onClick={() => onRemoveFilter(filter)}
+            aria-label={`Remove filter: ${filter.displayName}`}
+          >
+            <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
+              <Text variant="body3">{filter.displayName}</Text>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="10"
+                height="10"
+                viewBox="0 0 10 10"
+                fill="none"
+              >
+                <path
+                  d="M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z"
+                  fill={iconColor}
+                />
+              </svg>
+            </div>
+          </button>
+        );
+      })}
+    </ScrollContainer>
+  );
+};

package/src/components/AppliedFiltersScrollbar/index.ts

@@ -0,0 +1 @@
+export * from './AppliedFiltersScrollbar';

package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { Text } from '@envive-ai/react-toolkit/Text';
+
+interface DynamicFiltersScrollbarProps {
+  availableDynamicFilters: { name: string; displayName: string }[];
+  filterBarClassNames: string;
+  filterDefaultClasses: string;
+  filterHoverClasses: string;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName,
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+
+export const DynamicFiltersScrollbar = ({
+  availableDynamicFilters,
+  filterBarClassNames,
+  filterDefaultClasses,
+  filterHoverClasses,
+  onToggleDynamicFilter,
+}: DynamicFiltersScrollbarProps) => {
+  return (
+    <ScrollContainer className={filterBarClassNames} hideScrollbars>
+      {availableDynamicFilters.map(({ name, displayName }) => {
+        const buttonClasses = classNames(
+          'spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ',
+          filterHoverClasses,
+          filterDefaultClasses,
+        );
+        return (
+          <button
+            key={name}
+            type="button"
+            className={buttonClasses}
+            onClick={() => {
+              onToggleDynamicFilter({
+                filter: name,
+                dynamicFilterDisplayName: displayName,
+              });
+            }}
+          >
+            <Text variant="body3">{displayName}</Text>
+          </button>
+        );
+      })}
+    </ScrollContainer>
+  );
+};

package/src/components/DynamicFiltersScrollbar/index.ts

@@ -0,0 +1 @@
+export * from './DynamicFiltersScrollbar';

package/src/components/ProductCard/ProductCard.tsx

@@ -1,25 +1,26 @@
 import classNames from 'classnames';
 import { MdStar } from 'react-icons/md';
-import { Text } from 'src/components/Text/Text';
 import {
   variantClassMap,
   variantHoverClassMap,
   productCardLayoutVariantClasses,
   variantTitleColorMap,
 } from './productCardVariants';
-import { Headline } from '../Headline/Headline';
-import { ImageWithFallback } from 'src/components/ImageWithFallback/ImageWithFallback';
-import type {
+import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
+import Logger from 'src/logging/logger';
+import { TestProps } from 'src/test/types';
+import { Headline } from '../Headline';
+import { ImageWithFallback } from '../ImageWithFallback';
+import { Spinner } from '../Spinner';
+import {
   ProductCardConfig,
+  ProductCardVariant,
   ProductCardHoverVariant,
   ProductCardLayoutVariant,
-  ProductCardVariant,
 } from './types';
-import type { TestProps } from 'src/test/types';
-import type { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
-import Logger from 'src/logging/logger';
-import { Spinner } from '../Spinner/Spinner';
+import { Text } from 'src/components/Text/Text';
 import { formatPrice } from 'src/util/formatPrice';
+import { useImageResolver } from '@envive-ai/react-hooks/hooks';
 
 const formatReviews = (stars: number) =>
   String(
@@ -95,11 +96,26 @@ export const PriceSection = ({ originalPrice, salePrice, pricePrefix }: PriceSec
   );
 };
 
+// export const formatPrice = (price?: number, currency: string = '$'): string => {
+//   if (price == null) {
+//     return '';
+//   }
+
+//   const options: Intl.NumberFormatOptions = {};
+
+//   if (!Number.isInteger(price)) {
+//     options.minimumFractionDigits = 2;
+//     options.maximumFractionDigits = 2;
+//   }
+
+//   return `${currency}${price.toLocaleString('en-US', options)}`;
+// };
+
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
   title: string;
-  url?: string;
+  url: string;
   searchResponseId?: string;
   productResponseId?: string;
   cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
@@ -115,7 +131,7 @@ interface ProductCardProps extends TestProps {
   aspectRatio?: '3:4' | 'square' | 'none';
   clickPosition?: number | null;
   growWithContainer?: boolean;
-  handleClick: (clickedUrl: string) => void;
+  handleClick?: (clickedUrl: string) => void;
 }
 
 export const ProductCard = ({
@@ -124,6 +140,8 @@ export const ProductCard = ({
   imageUrl,
   title,
   url,
+  // searchResponseId,
+  // productResponseId,
   originalPrice,
   averageRating,
   numberReviews,
@@ -132,13 +150,14 @@ export const ProductCard = ({
   hoverVariant,
   dataTestId,
   layoutVariant = 'normal',
+  // cardDisplayLocation,
   zoomOnHover = false,
   aspectRatio = 'none',
+  // clickPosition = null,
   growWithContainer = false,
   handleClick,
 }: ProductCardProps) => {
-  // const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  // const { productCardConfig } = orgUIConfig;
+  const { resolve } = useImageResolver();
 
   const finalVariant = variant ?? productCardConfig?.variant ?? 'filled';
   const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? 'backgroundDark';
@@ -265,15 +284,13 @@ export const ProductCard = ({
 
   return (
     <div className={containerClassnames} data-testid={dataTestId}>
-      <a href={url} onClick={() => handleClick(url || '')} target="_self" draggable={false}>
+      <a href={url} onClick={() => handleClick(url)} target="_self" draggable={false}>
         <div className={verticalContainerClassnames}>
           <div className={imageClipContainerClassnames}>
             <div className={imageContainerClassnames}>
               {imageUrl && (
                 <ImageWithFallback
-                  // TODO: Fix once
-                  // src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
-                  src={imageUrl}
+                  src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
                   alt={title}
                   fallback={<Spinner className="spiffy-tw-w-6 spiffy-tw-h-6" />}
                   imageClassnames={imageClassnames}

package/src/components/ProductCard/types.ts

@@ -1,4 +1,4 @@
-import type { ResponseCategory, SearchResponseProduct } from 'src/types/external';
+import { ResponseCategory, SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import type { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
 
 export enum ProductCardSkeletonOverrides {

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,9 +1,9 @@
-import type { ProductCardConfig, ProductGridVariant } from '../ProductCard/types';
-import { ProductCard } from '../ProductCard/ProductCard';
+import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
+import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
 import { productGridVariantClasses } from './productGridVariants';
 import classNames from 'classnames';
-import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
-import { SearchResponseProduct } from 'src/types/external';
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
 
 interface ProductGridProps {
   productList: SearchResponseProduct[];
@@ -13,7 +13,6 @@ interface ProductGridProps {
   merchantShortName: string;
   searchResponseId: string;
   cardsGrowWithContainer?: boolean;
-  handleClick: (clickedUrl: string) => void;
 }
 
 export const ProductGrid = ({
@@ -24,7 +23,6 @@ export const ProductGrid = ({
   merchantShortName,
   searchResponseId,
   cardsGrowWithContainer = true,
-  handleClick,
 }: ProductGridProps) => {
   const {
     productCardVariant,
@@ -41,33 +39,35 @@ export const ProductGrid = ({
 
   return (
     <div className={productGridClasses}>
-      {productList.map((product: (typeof productList)[0], index: number) => (
-        <div key={product.id} className={cardContainerClasses}>
-          <ProductCard
-            productCardConfig={productCardConfig}
-            merchantShortName={merchantShortName}
-            key={product.id}
-            imageUrl={product.imageUrl}
-            searchResponseId={searchResponseId}
-            productResponseId={product.responseId}
-            title={product.title}
-            url={product.url}
-            originalPrice={product.originalPrice}
-            salePrice={product.salePrice}
-            averageRating={product.averageRating}
-            numberReviews={product.numberReviews}
-            cardDisplayLocation={ChatElementDisplayLocation.PRODUCT_GRID}
-            layoutVariant={productCardLayoutVariant}
-            variant={productCardVariant}
-            hoverVariant={productCardHoverVariant}
-            zoomOnHover={zoomOnHover}
-            aspectRatio={productCardImageAspectRatio}
-            clickPosition={index}
-            growWithContainer={cardsGrowWithContainer}
-            handleClick={handleClick}
-          />
-        </div>
-      ))}
+      {productList.map((product: SearchResponseProduct, index: number) => {
+        const camelCasedProduct: CamelCasedPropertiesDeep<SearchResponseProduct> = product;
+        return (
+          <div key={camelCasedProduct.id} className={cardContainerClasses}>
+            <ProductCard
+              productCardConfig={productCardConfig}
+              merchantShortName={merchantShortName}
+              key={camelCasedProduct.id}
+              imageUrl={camelCasedProduct.imageUrl}
+              searchResponseId={searchResponseId}
+              productResponseId={camelCasedProduct.responseId}
+              title={camelCasedProduct.title}
+              url={camelCasedProduct.url}
+              originalPrice={camelCasedProduct.originalPrice}
+              salePrice={camelCasedProduct.salePrice}
+              averageRating={camelCasedProduct.averageRating}
+              numberReviews={camelCasedProduct.numberReviews}
+              cardDisplayLocation={ChatElementDisplayLocation.PRODUCT_GRID}
+              layoutVariant={productCardLayoutVariant}
+              variant={productCardVariant}
+              hoverVariant={productCardHoverVariant}
+              zoomOnHover={zoomOnHover}
+              aspectRatio={productCardImageAspectRatio}
+              clickPosition={index}
+              growWithContainer={cardsGrowWithContainer}
+            />
+          </div>
+        );
+      })}
     </div>
   );
 };