@envive-ai/react-toolkit 0.2.10 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -24,11 +24,14 @@
     "build": "tsdown",
     "build:watch": "tsdown --watch",
     "prepublish": "npm run build",
+    "storybook": "tsx ./.storybook/getMerchants.ts && storybook dev -p 6006",
+    "storybook:build": "npm run get-merchants && storybook build",
+    "storybook:get-merchants": "tsx ./.storybook/getMerchants.ts",
     "typecheck": "tsc",
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.5",
+    "@envive-ai/react-hooks": "0.2.7",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",
@@ -40,114 +43,138 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@spiffy-ai/commerce-api-client": "^1.1.0-SNAPSHOT.202510160819",
+    "@storybook/react-vite": "^9.1.4",
     "@types/node": "^24.3.2",
     "@types/react": "^19.1.12",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
+    "tsx": "^4.20.6",
     "typescript": "^5.4.3",
     "vitest": "^3.2.4"
   },
   "exports": {
     "./Accordion": {
-      "import": "./dist/Accordion/index.js",
-      "require": "./dist/Accordion/index.cjs"
+      "import": "./dist/components/Accordion/index.js",
+      "require": "./dist/components/Accordion/index.cjs"
     },
     "./AnimatedChevron": {
-      "import": "./dist/AnimatedChevron/index.js",
-      "require": "./dist/AnimatedChevron/index.cjs"
+      "import": "./dist/components/AnimatedChevron/index.js",
+      "require": "./dist/components/AnimatedChevron/index.cjs"
     },
     "./AppliedFiltersScrollbar": {
-      "import": "./dist/AppliedFiltersScrollbar/index.js",
-      "require": "./dist/AppliedFiltersScrollbar/index.cjs"
+      "import": "./dist/components/AppliedFiltersScrollbar/index.js",
+      "require": "./dist/components/AppliedFiltersScrollbar/index.cjs"
     },
     "./ButtonBase": {
-      "import": "./dist/ButtonBase/index.js",
-      "require": "./dist/ButtonBase/index.cjs"
+      "import": "./dist/components/ButtonBase/index.js",
+      "require": "./dist/components/ButtonBase/index.cjs"
     },
     "./DynamicFiltersScrollbar": {
-      "import": "./dist/DynamicFiltersScrollbar/index.js",
-      "require": "./dist/DynamicFiltersScrollbar/index.cjs"
+      "import": "./dist/components/DynamicFiltersScrollbar/index.js",
+      "require": "./dist/components/DynamicFiltersScrollbar/index.cjs"
     },
     "./FilterScrollbar": {
-      "import": "./dist/FilterScrollbar/index.js",
-      "require": "./dist/FilterScrollbar/index.cjs"
+      "import": "./dist/components/FilterScrollbar/index.js",
+      "require": "./dist/components/FilterScrollbar/index.cjs"
     },
     "./ImageWithFallback": {
-      "import": "./dist/ImageWithFallback/index.js",
-      "require": "./dist/ImageWithFallback/index.cjs"
+      "import": "./dist/components/ImageWithFallback/index.js",
+      "require": "./dist/components/ImageWithFallback/index.cjs"
     },
     "./ModalSheet": {
-      "import": "./dist/ModalSheet/index.js",
-      "require": "./dist/ModalSheet/index.cjs"
+      "import": "./dist/components/ModalSheet/index.js",
+      "require": "./dist/components/ModalSheet/index.cjs"
     },
     "./ProductCard": {
-      "import": "./dist/ProductCard/index.js",
-      "require": "./dist/ProductCard/index.cjs"
+      "import": "./dist/components/ProductCard/index.js",
+      "require": "./dist/components/ProductCard/index.cjs"
     },
     "./ProductGrid": {
-      "import": "./dist/ProductGrid/index.js",
-      "require": "./dist/ProductGrid/index.cjs"
+      "import": "./dist/components/ProductGrid/index.js",
+      "require": "./dist/components/ProductGrid/index.cjs"
     },
     "./RadioButton": {
-      "import": "./dist/RadioButton/index.js",
-      "require": "./dist/RadioButton/index.cjs"
+      "import": "./dist/components/RadioButton/index.js",
+      "require": "./dist/components/RadioButton/index.cjs"
     },
     "./RadioButtonGroup": {
-      "import": "./dist/RadioButtonGroup/index.js",
-      "require": "./dist/RadioButtonGroup/index.cjs"
+      "import": "./dist/components/RadioButtonGroup/index.js",
+      "require": "./dist/components/RadioButtonGroup/index.cjs"
+    },
+    "./RecommendedProducts": {
+      "import": "./dist/components/RecommendedProducts/index.js",
+      "require": "./dist/components/RecommendedProducts/index.cjs"
     },
     "./SearchAutocomplete": {
-      "import": "./dist/SearchAutocomplete/index.js",
-      "require": "./dist/SearchAutocomplete/index.cjs"
+      "import": "./dist/components/SearchAutocomplete/index.js",
+      "require": "./dist/components/SearchAutocomplete/index.cjs"
     },
     "./SearchFilter": {
-      "import": "./dist/SearchFilter/index.js",
-      "require": "./dist/SearchFilter/index.cjs"
+      "import": "./dist/components/SearchFilter/index.js",
+      "require": "./dist/components/SearchFilter/index.cjs"
     },
     "./SearchInput": {
-      "import": "./dist/SearchInput/index.js",
-      "require": "./dist/SearchInput/index.cjs"
+      "import": "./dist/components/SearchInput/index.js",
+      "require": "./dist/components/SearchInput/index.cjs"
     },
     "./SearchInputForm": {
-      "import": "./dist/SearchInputForm/index.js",
-      "require": "./dist/SearchInputForm/index.cjs"
+      "import": "./dist/components/SearchInputForm/index.js",
+      "require": "./dist/components/SearchInputForm/index.cjs"
     },
     "./SearchResultsContent": {
-      "import": "./dist/SearchResultsContent/index.js",
-      "require": "./dist/SearchResultsContent/index.cjs"
+      "import": "./dist/components/SearchResultsContent/index.js",
+      "require": "./dist/components/SearchResultsContent/index.cjs"
+    },
+    "./SearchResultsFilterButton": {
+      "import": "./dist/components/SearchResultsFilterButton/index.js",
+      "require": "./dist/components/SearchResultsFilterButton/index.cjs"
+    },
+    "./SearchResultsFilterModal": {
+      "import": "./dist/components/SearchResultsFilterModal/index.js",
+      "require": "./dist/components/SearchResultsFilterModal/index.cjs"
     },
     "./SearchResultsFilterSidebar": {
-      "import": "./dist/SearchResultsFilterSidebar/index.js",
-      "require": "./dist/SearchResultsFilterSidebar/index.cjs"
+      "import": "./dist/components/SearchResultsFilterSidebar/index.js",
+      "require": "./dist/components/SearchResultsFilterSidebar/index.cjs"
     },
     "./SearchResultsStates": {
-      "import": "./dist/SearchResultsStates/index.js",
-      "require": "./dist/SearchResultsStates/index.cjs"
+      "import": "./dist/components/SearchResultsStates/index.js",
+      "require": "./dist/components/SearchResultsStates/index.cjs"
+    },
+    "./SearchResultsToolbar": {
+      "import": "./dist/components/SearchResultsToolbar/index.js",
+      "require": "./dist/components/SearchResultsToolbar/index.cjs"
     },
     "./SparkleAnimation": {
-      "import": "./dist/SparkleAnimation/index.js",
-      "require": "./dist/SparkleAnimation/index.cjs"
+      "import": "./dist/components/SparkleAnimation/index.js",
+      "require": "./dist/components/SparkleAnimation/index.cjs"
     },
     "./Spinner": {
-      "import": "./dist/Spinner/index.js",
-      "require": "./dist/Spinner/index.cjs"
+      "import": "./dist/components/Spinner/index.js",
+      "require": "./dist/components/Spinner/index.cjs"
     },
     "./SuggestionButton": {
-      "import": "./dist/SuggestionButton/index.js",
-      "require": "./dist/SuggestionButton/index.cjs"
+      "import": "./dist/components/SuggestionButton/index.js",
+      "require": "./dist/components/SuggestionButton/index.cjs"
     },
     "./TextInput": {
-      "import": "./dist/TextInput/index.js",
-      "require": "./dist/TextInput/index.cjs"
+      "import": "./dist/components/TextInput/index.js",
+      "require": "./dist/components/TextInput/index.cjs"
     },
     "./ToggleButton": {
-      "import": "./dist/ToggleButton/index.js",
-      "require": "./dist/ToggleButton/index.cjs"
+      "import": "./dist/components/ToggleButton/index.js",
+      "require": "./dist/components/ToggleButton/index.cjs"
     },
     "./Typography": {
-      "import": "./dist/Typography/index.js",
-      "require": "./dist/Typography/index.cjs"
+      "import": "./dist/components/Typography/index.js",
+      "require": "./dist/components/Typography/index.cjs"
+    },
+    "./util": {
+      "import": "./dist/util/index.js",
+      "require": "./dist/util/index.cjs"
     },
     "./package.json": "./package.json"
   }

package/src/components/RecommendedProducts/RecommendedProducts.tsx

@@ -0,0 +1,97 @@
+import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
+import { ProductCardConfig, ProductGridVariant } from "@envive-ai/react-hooks/contexts/types";
+import classNames from "classnames";
+import { motion } from "framer-motion";
+import { ProductGrid } from "../ProductGrid";
+import { Typography } from "../Typography";
+
+
+interface RecommendedProductsProps {
+  retrievedProducts: SearchResponseProductAttributes['attributes'][];
+  merchantShortName: string;
+  productCardConfig?: ProductCardConfig;
+  productGridVariant?: ProductGridVariant;
+  heading?: string;
+  onProductClick?: (product: SearchResponseProductAttributes['attributes'], index: number) => void;
+}
+
+export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
+  retrievedProducts,
+  merchantShortName,
+  productCardConfig = { variant: 'minimal', hoverVariant: 'none', layoutVariant: 'square' },
+  productGridVariant = 'square',
+  heading,
+  onProductClick,
+}: RecommendedProductsProps) => {
+  const containerClasses = classNames(
+    'spiffy-tw-justify-center',
+    'spiffy-tw-overflow-hidden',
+    'spiffy-tw-bg-white',
+    // Break out of parent container to fill full viewport width using CSS calc
+    'spiffy-tw-relative',
+    'spiffy-tw-px-[24px]',
+    'spiffy-tw-py-[16px]',
+    'sm:spiffy-tw-px-[41px]',
+    'sm:spiffy-tw-py-[40px]',
+  );
+
+  const titleContainerClasses = classNames(
+    'spiffy-tw-w-full',
+    'spiffy-tw-border-b',
+    'spiffy-tw-border-solid',
+    'spiffy-tw-border-b-[--spiffy-colors-text-accent]',
+    'spiffy-tw-pb-[8px]',
+    'spiffy-tw-mb-[16px]',
+  );
+
+  const productGridClasses = classNames(
+    'spiffy-tw-grid',
+    'spiffy-tw-justify-items-stretch',
+    'spiffy-tw-grid-cols-2',
+    'md:spiffy-tw-grid-cols-3',
+    'lg:spiffy-tw-grid-cols-4',
+    'spiffy-tw-gap-x-[4px]',
+    'spiffy-tw-gap-y-[24px]',
+    'spiffy-tw-h-full',
+    'spiffy-tw-w-full',
+    'spiffy-tw-items-stretch',
+  );
+
+  if (retrievedProducts == null || retrievedProducts.length === 0) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      className={containerClasses}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      style={{
+        // Break out of parent container padding using CSS calc
+        left: '50%',
+        right: '50%',
+        marginLeft: '-50vw',
+        marginRight: '-50vw',
+        width: '100vw',
+      }}
+    >
+      {heading && (
+        <div className={titleContainerClasses}>
+          <Typography variant="h1" className="spiffy-tw-text-[--spiffy-colors-text-accent]">
+            {heading}
+          </Typography>
+        </div>
+      )}
+      <ProductGrid
+        productList={retrievedProducts}
+        productGridVariant={productGridVariant}
+        productGridClasses={productGridClasses}
+        productCardConfig={productCardConfig}
+        merchantShortName={merchantShortName}
+        onProductClick={onProductClick}
+      />
+    </motion.div>
+  );
+};

package/src/components/RecommendedProducts/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './RecommendedProducts';

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 import { SearchResultsState } from '@envive-ai/react-hooks/hooks/utils';
 import {
@@ -14,16 +16,17 @@ import {
 
 interface SearchResultsContentProps {
   searchResultsState: SearchResultsState;
-  productList: SearchResponseProductAttributes['attributes'][];
+  productList: SearchResponseProduct[];
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
   productCardConfig: ProductCardConfig;
   merchantShortName: string;
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
   productGridVariant: ProductGridVariant;
-  productGridClasses: string;
   containerXPaddingClasses: string;
   selectedFilterOptions: SelectedFilterOption[];
   availableDynamicFilters: { name: string; displayName: string }[];
   onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onProductClick?: () => void;
   onToggleDynamicFilter: ({
     filter,
     dynamicFilterDisplayName,
@@ -32,51 +35,81 @@ interface SearchResultsContentProps {
     dynamicFilterDisplayName: string;
   }) => void;
   noResultsFoundText?: string;
+  searchResultsRef: React.RefObject<HTMLDivElement>;
+  toolbarHeight: number;
+  query: string;
 }
 
 export const SearchResultsContent = ({
   searchResultsState,
   productList,
+  recommendedProducts,
   productCardConfig,
   merchantShortName,
   searchFilterSidebarVariant,
   productGridVariant,
-  productGridClasses,
   containerXPaddingClasses,
   selectedFilterOptions,
   availableDynamicFilters,
+  onProductClick,
   onRemoveFilter,
   onToggleDynamicFilter,
   noResultsFoundText,
-}: SearchResultsContentProps) => (
-  <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}
-        onRemoveFilter={onRemoveFilter}
-        onToggleDynamicFilter={onToggleDynamicFilter}
-      />
-    )}
-    {searchResultsState === SearchResultsState.Loading && (
-      <SearchResultsLoadingGrid
-        productGridVariant={productGridVariant}
-        productGridClasses={productGridClasses}
-      />
-    )}
-  </div>
-);
+  searchResultsRef,
+  toolbarHeight,
+  query,
+}: SearchResultsContentProps) => {
+  const productGridClasses = classNames(
+    'spiffy-tw-grid',
+    'spiffy-tw-justify-items-stretch',
+    'spiffy-tw-grid-cols-2',
+    'md:spiffy-tw-grid-cols-3',
+    'lg:spiffy-tw-grid-cols-4',
+    'spiffy-tw-gap-x-[4px]',
+    'spiffy-tw-gap-y-[24px]',
+    'spiffy-tw-h-full',
+    'spiffy-tw-w-full',
+    'spiffy-tw-items-stretch',
+    containerXPaddingClasses,
+  );
+
+  return (
+    <div
+      ref={searchResultsRef}
+      style={{ paddingTop: `${toolbarHeight}px`, backgroundColor: 'white' }}
+    >
+      {searchResultsState === SearchResultsState.NoResults && (
+        <NoSearchResultsFound
+          containerPaddingClasses={containerXPaddingClasses}
+          noResultsFoundText={noResultsFoundText}
+          recommendedProducts={recommendedProducts}
+          searchText={query}
+          merchantShortName={merchantShortName}
+          productGridVariant={productGridVariant}
+        />
+      )}
+      {searchResultsState === SearchResultsState.Results && (
+        <SearchResultsGrid
+          searchFilterSidebarVariant={searchFilterSidebarVariant}
+          productCardConfig={productCardConfig}
+          merchantShortName={merchantShortName}
+          productList={productList}
+          productGridVariant={productGridVariant}
+          productGridClasses={productGridClasses}
+          containerXPaddingClasses={containerXPaddingClasses}
+          selectedFilterOptions={selectedFilterOptions}
+          availableDynamicFilters={availableDynamicFilters}
+          onRemoveFilter={onRemoveFilter}
+          onProductClick={onProductClick}
+          onToggleDynamicFilter={onToggleDynamicFilter}
+        />
+      )}
+      {searchResultsState === SearchResultsState.Loading && (
+        <SearchResultsLoadingGrid
+          productGridVariant={productGridVariant}
+          productGridClasses={productGridClasses}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+
+import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
+import { ButtonBase } from '../ButtonBase';
+
+export type SearchResultsFilterButtonProps = {
+  setIsOpen: (isOpen: boolean) => void;
+  filterButtonText: string;
+};
+
+export const SearchResultsFilterButton = ({
+  setIsOpen,
+  filterButtonText,
+}: SearchResultsFilterButtonProps) => {
+  const openFilter = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  return (
+    <ButtonBase
+      onClick={openFilter}
+      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"
+      buttonClass="spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]"
+      disablePadding
+    />
+  );
+};

package/src/components/SearchResultsFilterButton/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './SearchResultsFilterButton';

package/src/components/SearchResultsFilterModal/SearchResultsFilterModal.tsx

@@ -0,0 +1,61 @@
+import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
+import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
+import { SearchFilterSidebarVariant, searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar';
+
+export type SearchResultsFilterModalProps = {
+  productCount: number;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  searchFilters: SearchFilterDatum[];
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  onSelectFilterItem: SelectFilterItem;
+  onClearAllFilters: () => void;
+  filterButtonText: string;
+};
+
+export const SearchResultsFilterModal = ({
+  productCount,
+  isOpen,
+  setIsOpen,
+  searchFilters,
+  searchFilterSidebarVariant,
+  onSelectFilterItem,
+  onClearAllFilters,
+  filterButtonText,
+}: SearchResultsFilterModalProps) => {
+  const {
+    applyFiltersUnchangedClasses,
+    applyFiltersChangedClasses,
+    searchFilterHeaderClasses,
+    radioButtonFillColor,
+    radioButtonHoverColor,
+    radioButtonUncheckedBorderColor,
+    filterCloseIconVariant,
+  } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+
+  return (
+    <SearchFilter
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      filters={searchFilters}
+      productCount={productCount}
+      selectFilterItem={onSelectFilterItem}
+      clearAllFilters={onClearAllFilters}
+      applyFiltersUnchangedClasses={applyFiltersUnchangedClasses}
+      applyFiltersChangedClasses={applyFiltersChangedClasses}
+      filterButtonText={filterButtonText}
+      radioButtonFillColor={radioButtonFillColor}
+      radioButtonHoverColor={radioButtonHoverColor}
+      radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
+      filterCloseIconVariant={filterCloseIconVariant}
+      headerContent={
+        <SearchFilterHeader
+          closeModal={() => setIsOpen(false)}
+          productCount={productCount}
+          headerClassName={searchFilterHeaderClasses}
+          filterCloseIconVariant={filterCloseIconVariant}
+        />
+      }
+    />
+  );
+};

package/src/components/SearchResultsFilterModal/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './SearchResultsFilterModal';

package/src/components/SearchResultsStates/NoSearchResultsFound.tsx

@@ -1,29 +1,55 @@
 import classNames from 'classnames';
 import Sparkles from '@envive-ai/react-icons/Sparkles';
 import { Typography } from 'src/components/Typography';
+import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
+import { RecommendedProducts } from '../RecommendedProducts';
+import { ProductGridVariant } from '../ProductCard';
 
 interface NoSearchResultsFoundProps {
   containerPaddingClasses: string;
-  includeBottomMargin?: boolean; // manually add about a page of bottom margin to push unsupressed content down
+  // includeBottomMargin?: boolean; // manually add about a page of bottom margin to push unsupressed content down
   noResultsFoundText?: string;
   sparkleIconColor?: string; // example format: var(--spiffy-colors-accent-primary)
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
+  searchText: string;
+  merchantShortName: string;
+  productGridVariant: ProductGridVariant;
 }
 
 export const NoSearchResultsFound = ({
   containerPaddingClasses,
-  includeBottomMargin = false,
   noResultsFoundText,
   sparkleIconColor = 'var(--spiffy-colors-accent-primary)',
+  recommendedProducts,
+  searchText,
+  merchantShortName,
+  productGridVariant,
 }: NoSearchResultsFoundProps) => {
-  const containerClasses = classNames(
-    containerPaddingClasses,
-    includeBottomMargin ? 'spiffy-tw-mb-[100vh]' : '',
-    'spiffy-tw-mt-6',
-  );
+  const containerClasses = classNames(containerPaddingClasses, 'spiffy-tw-mt-6', {
+    'spiffy-tw-mb-[100vh]': recommendedProducts.length === 0,
+  });
 
-  const textPrompt =
-    noResultsFoundText ||
-    "I'm sorry, I wasn't able to find an exact match. Try changing your filters or adjusting your search query.";
+  let textPrompt: React.ReactNode;
+  if (recommendedProducts.length > 0) {
+    textPrompt = noResultsFoundText ? (
+      <span>{noResultsFoundText}</span>
+    ) : (
+      <span>
+        I’m sorry, I wasn’t able to find an exact match for
+        <strong className="spiffy-tw-font-semibold"> {`"${searchText}".`}</strong> Try changing your
+        filters or adjusting your search query. In the meantime, explore some of our top-selling
+        products below.
+      </span>
+    );
+  } else {
+    textPrompt = (
+      <span>
+        I’m sorry, I wasn’t able to find an exact match for
+        <strong className="spiffy-tw-font-semibold"> {`"${searchText}."`}</strong> Try changing your
+        filters or adjusting your search query.
+      </span>
+    );
+  }
 
   return (
     <div className={containerClasses}>
@@ -36,6 +62,12 @@ export const NoSearchResultsFound = ({
         </div>
         <Typography variant="body2">{textPrompt}</Typography>
       </div>
+      <RecommendedProducts
+        retrievedProducts={recommendedProducts}
+        merchantShortName={merchantShortName}
+        productCardConfig={{ variant: 'minimal', hoverVariant: 'none', layoutVariant: 'square' }}
+        productGridVariant={productGridVariant}
+      />
     </div>
   );
-};
+};