@envive-ai/react-widgets 0.1.2-arthur-3 → 0.1.3

package/dist/SearchZeroState/components/RecommendedProducts.js

@@ -0,0 +1,72 @@
+import { Typography } from "../../packages/components/dist/components/Typography/Typography.js";
+import "../../packages/components/dist/components/Typography/index.js";
+import { ProductGrid } from "../../packages/components/dist/components/ProductGrid/ProductGrid.js";
+import "../../packages/components/dist/components/ProductGrid/index.js";
+import { ChatElementDisplayLocation } from "@envive-ai/react-hooks/application/models";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { useAmplitudeTracking } from "@envive-ai/react-hooks/hooks/AmplitudeOperations";
+import { SpiffyMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+
+//#region src/SearchZeroState/components/RecommendedProducts.tsx
+const RecommendedProducts = ({ retrievedProducts, merchantShortName, productCardConfig = {
+	variant: "minimal",
+	hoverVariant: "none",
+	layoutVariant: "square"
+}, productGridVariant = "square", heading }) => {
+	const { track } = useAmplitudeTracking();
+	const containerClasses = classNames("spiffy-tw-justify-center", "spiffy-tw-overflow-hidden", "spiffy-tw-bg-white", "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;
+	const handleProductClick = (product, index) => {
+		track(SpiffyMetricsEventName.ProductCardClicked, {
+			eventProps: {
+				url: product.url,
+				search_response_id: void 0,
+				product_response_id: product.response_id,
+				trigger_location: ChatElementDisplayLocation.SEARCH_ZERO_STATE_SUGGESTED_PRODUCTS,
+				click_position: index != null ? index + 1 : null,
+				title: product.title,
+				original_price: product.original_price,
+				sale_price: product.sale_price,
+				average_rating: product.average_rating,
+				number_reviews: product.number_reviews
+			},
+			alsoSendToGoogleAnalytics: true
+		});
+	};
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: containerClasses,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		style: {
+			left: "50%",
+			right: "50%",
+			marginLeft: "-50vw",
+			marginRight: "-50vw",
+			width: "100vw"
+		},
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			className: titleContainerClasses,
+			children: /* @__PURE__ */ jsx(Typography, {
+				variant: "h1",
+				className: "spiffy-tw-text-[--spiffy-colors-text-accent]",
+				children: heading
+			})
+		}), /* @__PURE__ */ jsx(ProductGrid, {
+			productList: retrievedProducts,
+			productGridVariant,
+			productGridClasses,
+			productCardConfig,
+			merchantShortName,
+			onProductClick: handleProductClick
+		})]
+	});
+};
+
+//#endregion
+export { RecommendedProducts };