@envive-ai/react-toolkit 0.2.7 → 0.2.8

package/dist/{index-Br1B7Jta.d.cts → index-4KapT-qa.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -41,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime0.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-CoKLba8Y.d.ts → index-CY3-7i6i.d.cts}

@@ -1,6 +1,6 @@
-import { FC } from "react";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
+import { FC } from "react";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
 //#region src/util/trim.d.ts
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime26.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime22.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime26.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime22.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -288,7 +288,7 @@ interface ProductCardProps extends TestProps {
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
-  handleClick?: (clickedUrl: string) => void;
+  onClick?: () => void;
 }
 declare const ProductCard: ({
   productCardConfig,
@@ -307,8 +307,8 @@ declare const ProductCard: ({
   zoomOnHover,
   aspectRatio,
   growWithContainer,
-  handleClick
-}: ProductCardProps) => react_jsx_runtime26.JSX.Element;
+  onClick
+}: ProductCardProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-DZG-p0HX.d.cts → index-DELwJODl.d.ts}

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
 import { FC } from "react";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
 //#region src/util/trim.d.ts
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime19.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime16.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime19.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime16.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -288,7 +288,7 @@ interface ProductCardProps extends TestProps {
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
-  handleClick?: (clickedUrl: string) => void;
+  onClick?: () => void;
 }
 declare const ProductCard: ({
   productCardConfig,
@@ -307,8 +307,8 @@ declare const ProductCard: ({
   zoomOnHover,
   aspectRatio,
   growWithContainer,
-  handleClick
-}: ProductCardProps) => react_jsx_runtime19.JSX.Element;
+  onClick
+}: ProductCardProps) => react_jsx_runtime16.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-qY2eo4Dx.d.ts → index-OpwPXBH6.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -41,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime14.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{searchFilterSidebarVariants-Bv_5N0Qd.cjs → searchFilterSidebarVariants-DzCf_sfh.cjs}

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

package/dist/{searchFilterSidebarVariants-Dc0irQTl.js → searchFilterSidebarVariants-f9PS9fl6.js}

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -28,16 +28,16 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "^0.1.8",
+    "@envive-ai/react-hooks": "0.2.5",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",
     "react-indiana-drag-scroll": "^3.0.3-alpha"
   },
   "peerDependencies": {
+    "framer-motion": ">=12.23.24",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "framer-motion": ">=12.23.24"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/node": "^24.3.2",

package/src/components/ProductCard/ProductCard.tsx

@@ -5,6 +5,7 @@ import { Typography } from 'src/components/Typography';
 import { formatPrice } from 'src/util/formatPrice';
 import { TestProps } from '@envive-ai/react-hooks/types';
 import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
+import { PRODUCT_CARD_TESTID } from '@envive-ai/react-hooks/config';
 import {
   variantClassMap,
   variantHoverClassMap,
@@ -112,7 +113,7 @@ interface ProductCardProps extends TestProps {
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
-  handleClick?: (clickedUrl: string) => void;
+  onClick?: () => void;
 }
 
 export const ProductCard = ({
@@ -132,7 +133,7 @@ export const ProductCard = ({
   zoomOnHover = false,
   aspectRatio = 'none',
   growWithContainer = false,
-  handleClick,
+  onClick,
 }: ProductCardProps) => {
   const { resolve } = useImageResolver();
 
@@ -141,6 +142,8 @@ export const ProductCard = ({
   const finalLayoutVariant = layoutVariant ?? productCardConfig?.layoutVariant ?? 'normal';
   const pricePrefix = productCardConfig?.pricePrefix;
 
+  const handleClick = () => onClick();
+
   if (productCardConfig == null) {
     Logger.logError('[ProductCard] productCardConfig is null', undefined, {
       merchant: merchantShortName,
@@ -161,6 +164,7 @@ export const ProductCard = ({
       'spiffy-tw-h-full': growWithContainer,
       'spiffy-tw-w-full': growWithContainer,
       'spiffy-tw-max-w-full': growWithContainer,
+      'spiffy-tw-rounded-[8px]': layoutVariant === 'normal',
     },
     !growWithContainer && layoutClasses.container,
     variantClassMap.get(finalVariant) ?? [],
@@ -209,11 +213,11 @@ export const ProductCard = ({
     linkClassnames,
     zoomOnHover
       ? [
-          'spiffy-tw-transition-transform',
-          'spiffy-tw-duration-200',
-          'spiffy-tw-origin-top',
-          'hover:spiffy-tw-scale-105',
-        ]
+        'spiffy-tw-transition-transform',
+        'spiffy-tw-duration-200',
+        'spiffy-tw-origin-top',
+        'hover:spiffy-tw-scale-105',
+      ]
       : [],
   );
 
@@ -260,8 +264,8 @@ export const ProductCard = ({
   );
 
   return (
-    <div className={containerClassnames} data-testid={dataTestId}>
-      <a href={url} onClick={() => handleClick(url)} target="_self" draggable={false}>
+    <div className={containerClassnames} data-testid={dataTestId ?? PRODUCT_CARD_TESTID}>
+      <a href={url} onClick={() => handleClick()} target="_self" draggable={false}>
         <div className={verticalContainerClassnames}>
           <div className={imageClipContainerClassnames}>
             <div className={imageContainerClassnames}>

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,14 +1,13 @@
 import classNames from 'classnames';
-import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
-import { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
+import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
 import { productGridVariantClasses } from './productGridVariants';
 import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
 
 interface ProductGridProps {
-  productList: SearchResponseProduct[];
+  productList: SearchResponseProductAttributes['attributes'][];
   productGridVariant: ProductGridVariant;
   productGridClasses: string;
-  productCardConfig?: ProductCardConfig;
+  productCardConfig: ProductCardConfig;
   merchantShortName: string;
   cardsGrowWithContainer?: boolean;
 }
@@ -36,31 +35,27 @@ export const ProductGrid = ({
 
   return (
     <div className={productGridClasses}>
-      {productList.map((product: SearchResponseProduct) => {
-        const camelCasedProduct: CamelCasedPropertiesDeep<SearchResponseProduct> = product;
-        return (
-          <div key={camelCasedProduct.id} className={cardContainerClasses}>
-            <ProductCard
-              productCardConfig={productCardConfig}
-              merchantShortName={merchantShortName}
-              key={camelCasedProduct.id}
-              imageUrl={camelCasedProduct.imageUrl}
-              title={camelCasedProduct.title}
-              url={camelCasedProduct.url}
-              originalPrice={camelCasedProduct.originalPrice}
-              salePrice={camelCasedProduct.salePrice}
-              averageRating={camelCasedProduct.averageRating}
-              numberReviews={camelCasedProduct.numberReviews}
-              layoutVariant={productCardLayoutVariant}
-              variant={productCardVariant}
-              hoverVariant={productCardHoverVariant}
-              zoomOnHover={zoomOnHover}
-              aspectRatio={productCardImageAspectRatio}
-              growWithContainer={cardsGrowWithContainer}
-            />
-          </div>
-        );
-      })}
+      {productList.map((product: (typeof productList)[0]) => (
+        <div key={product.id} className={cardContainerClasses}>
+          <ProductCard
+            productCardConfig={productCardConfig}
+            merchantShortName={merchantShortName}
+            imageUrl={product.imageUrl}
+            title={product.title}
+            url={product.url}
+            originalPrice={product.originalPrice}
+            salePrice={product.salePrice}
+            averageRating={product.averageRating}
+            numberReviews={product.numberReviews}
+            layoutVariant={productCardLayoutVariant}
+            variant={productCardVariant}
+            hoverVariant={productCardHoverVariant}
+            zoomOnHover={zoomOnHover}
+            aspectRatio={productCardImageAspectRatio}
+            growWithContainer={cardsGrowWithContainer}
+          />
+        </div>
+      ))}
     </div>
   );
 };

package/src/config/chatElementDisplayLocation.ts

@@ -14,6 +14,7 @@ export enum ChatElementDisplayLocation {
   SEARCH_NAV_ENTRYPOINT = 'search_nav_entrypoint',
   SEARCH_PROMPT = 'search_prompt',
   SEARCH_PROMPT_BUTTON = 'search_prompt_button',
+  SEARCH_ZERO_STATE_SUGGESTED_PRODUCTS = 'search_zero_state_suggested_products',
   PRODUCT_GRID = 'product_grid',
   UNSPECIFIED = 'unspecified',
   FILTER_MODAL = 'filter_modal',