@envive-ai/react-toolkit 0.1.4 → 0.1.6

package/src/components/{common/ProductCard → ProductCard}/ProductCard.tsx

@@ -1,25 +1,26 @@
 import classNames from 'classnames';
 import { MdStar } from 'react-icons/md';
-import { Text } from 'src/components/common/Text/Text';
 import {
   variantClassMap,
   variantHoverClassMap,
   productCardLayoutVariantClasses,
   variantTitleColorMap,
 } from './productCardVariants';
-import { Headline } from '../Headline/Headline';
-import { ImageWithFallback } from 'src/components/common/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/components/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/index.ts

@@ -0,0 +1,4 @@
+export * from './ProductCard';
+export * from './ProductCardSkeleton';
+export * from './productCardVariants';
+export * from './types';

package/src/components/{common/ProductCard → 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

@@ -0,0 +1,73 @@
+import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
+import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
+import { productGridVariantClasses } from './productGridVariants';
+import classNames from 'classnames';
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
+
+interface ProductGridProps {
+  productList: SearchResponseProduct[];
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  searchResponseId: string;
+  cardsGrowWithContainer?: boolean;
+}
+
+export const ProductGrid = ({
+  productList,
+  productGridVariant,
+  productGridClasses,
+  productCardConfig,
+  merchantShortName,
+  searchResponseId,
+  cardsGrowWithContainer = true,
+}: ProductGridProps) => {
+  const {
+    productCardVariant,
+    productCardHoverVariant,
+    productCardLayoutVariant,
+    productCardImageAspectRatio,
+    zoomOnHover,
+  } = productGridVariantClasses[productGridVariant];
+
+  const cardContainerClasses = classNames({
+    'spiffy-tw-w-full': cardsGrowWithContainer,
+    'spiffy-tw-h-full': cardsGrowWithContainer,
+  });
+
+  return (
+    <div className={productGridClasses}>
+      {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>
+  );
+};

package/src/components/ProductGrid/index.ts

@@ -0,0 +1,2 @@
+export * from './ProductGrid';
+export * from './productGridVariants';

package/src/components/{search/SearchInputAutocomplete → SearchAutocomplete}/SearchAutocomplete.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import classNames from 'classnames';
-import OutlinedStar from '@envive-ai/react-icons/src/OutlinedStar';
+import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
 
 interface GlobalSearchAutocompleteProps {
   id: string;

package/src/components/SearchAutocomplete/index.ts

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

package/src/components/{search/SearchFilter → SearchFilter}/SearchFilter.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { SearchFilterItem } from './SearchFilterItem';
 import type { SearchFilterProps } from './types';
-import { Text } from 'src/components/common/Text/Text';
-import { ButtonBase } from 'src/components/common/ButtonBase/ButtonBase';
+import { Text } from 'src/components/Text/Text';
+import { ButtonBase } from 'src/components/ButtonBase/ButtonBase';
 
 export const SearchFilter = ({
   isOpen,

package/src/components/{search/SearchFilter → SearchFilter}/SearchFilterHeader.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Text } from 'src/components/common/Text/Text';
+import { Text } from 'src/components/Text/Text';
 import type { SearchFilterHeaderProps } from './types';
 
 export const SearchFilterHeader = ({

package/src/components/{search/SearchFilter → SearchFilter}/SearchFilterItem.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Text } from 'src/components/common/Text/Text';
+import { Text } from 'src/components/Text/Text';
 import type { SearchFilterItemProps } from './types';
 
 export const SearchFilterItem = ({

package/src/components/SearchFilter/index.ts

@@ -0,0 +1,4 @@
+export { SearchFilter } from './SearchFilter';
+export * from './SearchFilterHeader';
+export { SearchFilterItem } from './SearchFilterItem';
+export * from './types';

package/src/components/{search/SearchInput → SearchInput}/SearchInput.tsx

@@ -1,12 +1,12 @@
 import React, { useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
-import MagnifyingGlassStarVariant from '@envive-ai/react-icons/src/MagnifyingGlassStarVariant';
-import CloseIcon from '@envive-ai/react-icons/src/IconClose';
-import { TextInput } from 'src/components/common/TextInput/TextInput';
+import MagnifyingGlassStarVariant from '@envive-ai/react-icons/MagnifyingGlassStarVariant';
+import { SearchInputVariant } from '../SearchInputForm';
+import { TextInput } from '../TextInput';
 import { searchInputVariantClasses } from './searchInputVariants';
-import type { SearchInputVariant } from '../SearchInputForm/types';
+import { IconClose } from '@envive-ai/react-icons/src/index.js';
 
-export interface SearchInputProps {
+interface SearchInputProps {
   searchInputVariant?: SearchInputVariant;
   value: string;
   placeholder?: string;
@@ -126,7 +126,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
             aria-label="Clear search input"
             type="button"
           >
-            <CloseIcon className={closeButtonIconClassName} />
+            <IconClose className={closeButtonIconClassName} />
           </button>
         )}
       </div>

package/src/components/SearchInput/index.ts

@@ -0,0 +1,2 @@
+export * from './SearchInput';
+export * from './searchInputVariants';

package/src/components/{search/SearchInput → SearchInput}/searchInputVariants.ts

@@ -1,8 +1,8 @@
-import type { TextStyleVariantMap } from 'src/components/common/Text/textVariantClasses';
-import type { SearchInputVariant } from '../SearchInputForm/types';
-import { ColorNames, colorVar } from 'src/components/models/colorsConfig';
+import { colorVar, ColorNames } from 'src/models/colorsConfig';
+import { SearchInputVariant } from '../SearchInputForm';
+import { TextStyleVariantMap } from '../Text/textVariantClasses';
 
-interface SearchInputVariantClasses {
+type SearchInputVariantClasses = {
   searchInputIconColor: string;
   searchInputBorderColor: string;
   searchInputCloseIconClasses: string;
@@ -10,7 +10,7 @@ interface SearchInputVariantClasses {
   autocompleteIconColor: string;
   searchInputClasses: string;
   placeholderVariant: keyof typeof TextStyleVariantMap;
-}
+};
 
 export const searchInputVariantClasses: Record<SearchInputVariant, SearchInputVariantClasses> = {
   standard: {

package/src/components/{search/SearchInputForm → SearchInputForm}/SearchInputForm.tsx

@@ -1,7 +1,7 @@
-import type { SearchInputVariant } from './types';
-import { SearchAutocomplete } from '../SearchInputAutocomplete/SearchAutocomplete';
-import { searchInputVariantClasses } from '../SearchInput/searchInputVariants';
+import { SearchAutocomplete } from '../SearchAutocomplete';
 import { SearchInput } from '../SearchInput/SearchInput';
+import { searchInputVariantClasses } from '../SearchInput/searchInputVariants';
+import { SearchInputVariant } from './types';
 
 interface SearchInputFormProps {
   searchInputVariant: SearchInputVariant;
@@ -15,6 +15,7 @@ interface SearchInputFormProps {
   onAutocompleteSelect: (suggestion: string) => void;
   onSearchInputChange: (value: string) => void;
   onSearchSubmit: () => void;
+  searchInputDataTestId?: string;
 }
 
 export const SearchInputForm = ({
@@ -29,6 +30,7 @@ export const SearchInputForm = ({
   onAutocompleteSelect,
   onSearchInputChange,
   onSearchSubmit,
+  searchInputDataTestId,
 }: SearchInputFormProps) => {
   const { searchInputIconColor } = searchInputVariantClasses[searchInputVariant];
 
@@ -47,7 +49,7 @@ export const SearchInputForm = ({
           suggestions={autocompleteResults}
           ariaActivedescendant={focusedOptionId}
           searchInputVariant={searchInputVariant}
-          // dataTestId={SEARCH_INPUT_TESTID}
+          dataTestId={searchInputDataTestId}
           onKeyDown={onKeyDown}
           onChange={onSearchInputChange}
         />

package/src/components/SearchInputForm/index.ts

@@ -0,0 +1,2 @@
+export * from './SearchInputForm';
+export * from './types';

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -0,0 +1,87 @@
+import { SelectedFilterOption } from 'src/atoms/search/types';
+import {
+  ProductCardConfig,
+  ProductGridVariant,
+  SearchResponseProductAttributes,
+} from '../ProductCard';
+import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
+import {
+  NoSearchResultsFound,
+  SearchResultsGrid,
+  SearchResultsLoadingGrid,
+} from '../SearchResultsStates';
+import { SearchResultsState } from './utils';
+
+interface SearchResultsContentProps {
+  searchResultsState: SearchResultsState;
+  productList: SearchResponseProductAttributes['attributes'][];
+  productCardConfig: ProductCardConfig;
+  merchantShortName: string;
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  containerXPaddingClasses: string;
+  selectedFilterOptions: SelectedFilterOption[];
+  availableDynamicFilters: { name: string; displayName: string }[];
+  searchResponseId: string;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName,
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+  noResultsFoundText?: string;
+}
+
+export const SearchResultsContent = ({
+  searchResultsState,
+  productList,
+  productCardConfig,
+  merchantShortName,
+  searchFilterSidebarVariant,
+  productGridVariant,
+  productGridClasses,
+  containerXPaddingClasses,
+  selectedFilterOptions,
+  availableDynamicFilters,
+  searchResponseId,
+  onRemoveFilter,
+  onToggleDynamicFilter,
+  noResultsFoundText,
+}: SearchResultsContentProps) => {
+  return (
+    <div>
+      {searchResultsState === SearchResultsState.NoResults && (
+        <NoSearchResultsFound
+          containerPaddingClasses={containerXPaddingClasses}
+          includeBottomMargin
+          noResultsFoundText={noResultsFoundText}
+        />
+      )}
+      {searchResultsState === SearchResultsState.Results && (
+        <SearchResultsGrid
+          searchFilterSidebarVariant={searchFilterSidebarVariant}
+          productCardConfig={productCardConfig}
+          merchantShortName={merchantShortName}
+          productList={productList}
+          productGridVariant={productGridVariant}
+          productGridClasses={productGridClasses}
+          containerXPaddingClasses={containerXPaddingClasses}
+          selectedFilterOptions={selectedFilterOptions}
+          availableDynamicFilters={availableDynamicFilters}
+          searchResponseId={searchResponseId}
+          onRemoveFilter={onRemoveFilter}
+          onToggleDynamicFilter={onToggleDynamicFilter}
+        />
+      )}
+      {searchResultsState === SearchResultsState.Loading && (
+        <SearchResultsLoadingGrid
+          productGridVariant={productGridVariant}
+          productGridClasses={productGridClasses}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/SearchResultsContent/utils.ts

@@ -0,0 +1,28 @@
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+
+export interface SearchResult {
+  products: SearchResponseProduct[]; // Flattened from all responses
+  filters: string[]; // Combined from all responses
+  generatedQuery?: string;
+  totalProductCount: number;
+  searchResponseId: string;
+}
+
+export const enum SearchResultsState {
+  Loading,
+  Results,
+  NoResults,
+}
+
+export const getSearchResultsState = (
+  isLoadingSearch: boolean,
+  searchData: SearchResult | null,
+): SearchResultsState => {
+  if (isLoadingSearch) {
+    return SearchResultsState.Loading;
+  }
+  if (searchData) {
+    return SearchResultsState.Results;
+  }
+  return SearchResultsState.NoResults;
+};

package/src/components/{search/SearchResultsFilterSidebar → SearchResultsFilterSidebar}/SearchResultsFilter.tsx

@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
 
-import { SearchFilter } from '../SearchFilter/SearchFilter';
-import { SearchFilterHeader } from '../SearchFilter/SearchFilterHeader';
-import type { SearchFilter as SearchFilterType, SelectFilterItem } from '../SearchFilter/types';
-import type { SearchFilterSidebarVariant } from './types';
 import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
-import { ButtonBase } from 'src/components/common/ButtonBase/ButtonBase';
+import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
+import { ButtonBase } from '../ButtonBase';
+import { SelectFilterItem, SearchFilter, SearchFilterHeader } from '../SearchFilter';
+import { SearchFilterSidebarVariant, type SearchFilter as SearchFilterType } from './types';
 
 export type SearchResultsFilterProps = {
   productCount: number;
@@ -70,7 +69,7 @@ export const SearchResultsFilter = ({
       />
       <ButtonBase
         onClick={openFilter}
-        // icon={SettingsVariant} // Icon is handled by user
+        icon={SettingsVariant}
         iconClass="spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center"
         text={filterButtonText}
         textClass="spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block"

package/src/components/SearchResultsFilterSidebar/index.ts

@@ -0,0 +1,3 @@
+export * from './searchFilterSidebarVariants';
+export * from './SearchResultsFilter';
+export * from './types';

package/src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts

@@ -0,0 +1,58 @@
+import type { SearchFilterSidebarVariant, CloseIconVariant } from './types';
+import { ColorNames, colorVar } from 'src/models/colorsConfig';
+
+interface SearchFilterSidebarVariantClasses {
+  searchFilterHeaderClasses: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+  filterDefaultClasses: string;
+  filterActiveClasses: string;
+  filterHoverClasses: string;
+  appliedFilterBackgroundClasses: string;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  filterCloseIconVariant: CloseIconVariant;
+}
+
+export const searchFilterSidebarVariantClasses: Record<
+  SearchFilterSidebarVariant,
+  SearchFilterSidebarVariantClasses
+> = {
+  darkButton: {
+    radioButtonFillColor: colorVar(ColorNames.BackgroundDark),
+    radioButtonHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+    radioButtonUncheckedBorderColor: colorVar(ColorNames.BorderMedium),
+    searchFilterHeaderClasses: 'spiffy-tw-text-[--spiffy-colors-text-light]',
+    filterDefaultClasses:
+      'spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+    filterHoverClasses:
+      'hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterActiveClasses:
+      'spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+    appliedFilterBackgroundClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light]',
+    applyFiltersUnchangedClasses:
+      'spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+    applyFiltersChangedClasses:
+      'spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+    filterCloseIconVariant: 'light',
+  },
+  lightButton: {
+    radioButtonFillColor: colorVar(ColorNames.BackgroundDark),
+    radioButtonHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+    radioButtonUncheckedBorderColor: colorVar(ColorNames.BorderMedium),
+    searchFilterHeaderClasses: 'spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterDefaultClasses:
+      'spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+    filterHoverClasses:
+      'hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]',
+    filterActiveClasses:
+      'spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]',
+    appliedFilterBackgroundClasses: 'spiffy-tw-bg-[--spiffy-colors-border-light]',
+    applyFiltersUnchangedClasses:
+      'spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]',
+    applyFiltersChangedClasses:
+      'spiffy-tw-bg-[--spiffy-colors-background-primary] spiffy-tw-text-[--spiffy-colors-text-link]',
+    filterCloseIconVariant: 'dark',
+  },
+};

package/src/components/SearchResultsFilterSidebar/types.ts

@@ -0,0 +1,15 @@
+export type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
+export type CloseIconVariant = 'light' | 'tertiary' | 'dark';
+
+export type SearchFilter = {
+  id: string;
+  displayName: string;
+  items: SearchFilterItem[];
+};
+
+export type SearchFilterItem = {
+  id: string;
+  displayName: string;
+  value: string;
+  isSelected: boolean;
+};

package/src/components/{search/SearchResultsStates → SearchResultsStates}/NoSearchResultsFound.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import Sparkles from '@envive-ai/react-icons/src/Sparkles';
-import { Text } from 'src/components/common/Text/Text';
+import Sparkles from '@envive-ai/react-icons/Sparkles';
+import { Text } from 'src/components/Text';
 
 interface NoSearchResultsFoundProps {
   containerPaddingClasses: string;

package/src/components/{search/SearchResultsStates → SearchResultsStates}/SearchResultsGrid.tsx

@@ -1,16 +1,19 @@
-import { motion } from 'framer-motion';
-import type { SelectedFilterOption } from 'src/atoms/search/types';
-import classNames from 'classnames';
-import type { SearchResponseProduct } from 'src/types/external';
-import { ProductGrid } from 'src/components/common/ProductGrid/ProductGrid';
 import { AppliedFiltersScrollbar } from '../FilterScrollbar/AppliedFiltersScrollbar';
 import { DynamicFiltersScrollbar } from '../FilterScrollbar/DynamicFiltersScrollbar';
+import { motion } from 'framer-motion';
+
 import { searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar/searchFilterSidebarVariants';
-import type { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar/types';
-import { ProductGridVariant } from 'src/components/common/ProductCard/types';
+import classNames from 'classnames';
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import { SelectedFilterOption } from 'src/atoms/search/types';
+import { ProductCardConfig, ProductGridVariant } from '../ProductCard';
+import { ProductGrid } from '../ProductGrid';
+import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
 
 interface SearchResultsGridProps {
   productList: SearchResponseProduct[];
+  productCardConfig: ProductCardConfig;
+  merchantShortName: string;
   availableDynamicFilters: { name: string; displayName: string }[];
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
   productGridVariant: ProductGridVariant;
@@ -30,6 +33,8 @@ interface SearchResultsGridProps {
 
 export const SearchResultsGrid = ({
   productList,
+  productCardConfig,
+  merchantShortName,
   availableDynamicFilters,
   searchFilterSidebarVariant,
   productGridVariant,
@@ -93,12 +98,9 @@ export const SearchResultsGrid = ({
         productList={productList}
         productGridVariant={productGridVariant}
         productGridClasses={productGridClasses}
+        productCardConfig={productCardConfig}
+        merchantShortName={merchantShortName}
         searchResponseId={searchResponseId}
-        merchantShortName={''}
-        handleClick={function (clickedUrl: string): void {
-          console.log(clickedUrl);
-          throw new Error('Function not implemented.');
-        }}
       />
     </motion.div>
   );

package/src/components/{search/SearchResultsStates → SearchResultsStates}/SearchResultsLoadingGrid.tsx

@@ -1,9 +1,8 @@
-import { Text } from 'src/components/common/Text/Text';
-import { SparkleAnimation } from 'src/components/common/SparkleAnimation/SparkleAnimation';
 import { motion } from 'framer-motion';
-import { ProductGridVariant } from 'src/components/common/ProductCard/types';
-import { ProductCardSkeleton } from 'src/components/common/ProductCard/ProductCardSkeleton';
-import { productGridVariantClasses } from 'src/components/common/ProductGrid/productGridVariants';
+import { ProductGridVariant, ProductCardSkeleton } from '../ProductCard';
+import { productGridVariantClasses } from '../ProductGrid';
+import { SparkleAnimation } from '../SparkleAnimation';
+import { Text } from '@envive-ai/react-toolkit/Text';
 
 export const SearchResultsLoadingGrid = ({
   productGridVariant,

package/src/components/SearchResultsStates/index.ts

@@ -0,0 +1,3 @@
+export * from './NoSearchResultsFound';
+export * from './SearchResultsGrid';
+export * from './SearchResultsLoadingGrid';

package/src/components/SparkleAnimation/index.ts

@@ -0,0 +1,2 @@
+export * from './SparkleAnimation';
+export * from './types';