@envive-ai/react-toolkit-v3 0.3.6 → 0.3.8

package/src/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,54 @@
+import { Theme } from '../Tokens';
+import { resolveTheme } from '../utils/resolveTheme';
+import { WidgetTextField } from '../WidgetTextField';
+import { ProductCardWidgetComponents } from './components';
+import { ProductCardProps } from './types';
+
+export const ProductCard = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  imageSrc,
+  headline,
+  italicizeHeadline,
+  animatedText,
+  prompts,
+  promptButtonType,
+  carouselId,
+  fallbackColor,
+  placeholder,
+  textTypingDuration,
+  textTransition,
+  loop,
+  onSelect,
+  onInputClick,
+}: ProductCardProps) => {
+  const resolvedTheme = resolveTheme(theme);
+
+  return (
+    <ProductCardWidgetComponents.Poster
+      imageSrc={imageSrc}
+      fallbackColor={fallbackColor}
+    >
+      <ProductCardWidgetComponents.Header
+        headline={headline}
+        italicizeHeadline={italicizeHeadline}
+        animatedText={animatedText}
+        textTypingDuration={textTypingDuration}
+        textTransition={textTransition}
+        loop={loop}
+      />
+      <ProductCardWidgetComponents.Carousel
+        theme={resolvedTheme}
+        carouselId={carouselId}
+        prompts={prompts}
+        promptButtonType={promptButtonType}
+        onSelect={onSelect}
+      />
+      <WidgetTextField
+        theme={resolvedTheme}
+        placeholder={placeholder}
+        onClick={onInputClick}
+        className="envive-tw-bg-background-light"
+      />
+    </ProductCardWidgetComponents.Poster>
+  );
+};

package/src/components/ProductCard/__tests__/ProductCard.test.tsx

@@ -0,0 +1,191 @@
+import '@testing-library/jest-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Theme } from '../../../../tokens/theme/theme';
+import { PromptButtonVariant } from '../../PromptButton';
+import { ProductCard } from '../ProductCard';
+
+vi.mock('../../../utils/resolveTheme', () => ({
+  resolveTheme: vi.fn((theme: Theme) => theme),
+}));
+
+vi.mock('../../DesignTokens/components/utils', () => ({
+  getComputedCSSVariable: vi.fn(() => 'standard'),
+}));
+
+const defaultProps = {
+  theme: Theme.STANDARD,
+  imageSrc:
+    'https://www.bandolierstyle.com/cdn/shop/files/Lily17_Black_Gold_Chrome_MOD_Dec25_6.jpg?v=1765844272',
+  headline: 'Test Product',
+  italicizeHeadline: false,
+  animatedText: ['Description 1', 'Description 2'],
+  prompts: ['Prompt 1', 'Prompt 2'],
+  promptButtonType: PromptButtonVariant.LIGHT,
+  carouselId: 'test-carousel-id',
+  placeholder: 'Ask me anything...',
+  onSelect: vi.fn(),
+  onInputClick: vi.fn(),
+};
+
+describe('ProductCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Basic rendering', () => {
+    it('should render with all required props', () => {
+      render(<ProductCard {...defaultProps} />);
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render headline text', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          headline="Custom Headline"
+        />,
+      );
+
+      expect(screen.getByText('Custom Headline')).toBeInTheDocument();
+    });
+
+    it('should render with different themes', () => {
+      const { rerender } = render(
+        <ProductCard
+          {...defaultProps}
+          theme={Theme.STANDARD}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          theme={Theme.MODERN}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+  });
+
+  describe('Callback handlers', () => {
+    it('should call onInputClick when input is clicked', () => {
+      const handleInputClick = vi.fn();
+      render(
+        <ProductCard
+          {...defaultProps}
+          onInputClick={handleInputClick}
+        />,
+      );
+
+      const input = screen.getByText('Ask me anything...');
+      input.click();
+
+      expect(handleInputClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render prompts in carousel', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          prompts={['Prompt 1', 'Prompt 2']}
+        />,
+      );
+
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Optional props', () => {
+    it('should render with custom placeholder', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          placeholder="Custom placeholder"
+        />,
+      );
+
+      expect(screen.getByText('Custom placeholder')).toBeInTheDocument();
+    });
+
+    it('should render with fallbackColor', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          fallbackColor="#FF0000"
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with italicizeHeadline set to true', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          italicizeHeadline
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with italicizeHeadline set to false', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          italicizeHeadline={false}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with different promptButtonType variants', () => {
+      const { rerender } = render(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.LIGHT}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.DARK}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.GHOST}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/ProductCard/components/Carousel.tsx

@@ -0,0 +1,26 @@
+import { PromptCarousel, PromptCarouselRows } from '../../PromptCarousel';
+import { resolveTheme } from '../../utils/resolveTheme';
+import { useGetCarouselProperties } from '../hooks/useGetCarouselProperties';
+import { CarouselProps } from '../types';
+
+export const Carousel = ({
+  theme,
+  carouselId,
+  prompts,
+  promptButtonType,
+  onSelect,
+}: CarouselProps) => {
+  const resolvedTheme = resolveTheme(theme);
+  const { carouselClasses } = useGetCarouselProperties();
+  return (
+    <PromptCarousel
+      className={carouselClasses}
+      handleButtonClick={onSelect}
+      id={carouselId}
+      promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
+      theme={resolvedTheme}
+      promptButtonType={promptButtonType}
+      promptButtonTexts={prompts}
+    />
+  );
+};

package/src/components/ProductCard/components/Header.tsx

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { AnimatedText } from '../../AnimatedText';
+import { Stack } from '../../Stack';
+import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
+import { useGetHeaderProperties } from '../hooks/useGetHeaderProperties';
+import { HeaderProps } from '../types';
+
+export const Header = ({
+  headline,
+  italicizeHeadline,
+  animatedText,
+  textTypingDuration,
+  textTransition,
+  loop,
+}: HeaderProps) => {
+  const { stackClasses, headlineClasses } = useGetHeaderProperties(italicizeHeadline);
+
+  const animatedTextWrapper = useCallback(
+    (text: string) => (
+      <Typography
+        variant={TypographyVariant.B3_MD}
+        color={TypographyColor.TEXT_LIGHT}
+        numberOfLines={2}
+      >
+        {text}
+      </Typography>
+    ),
+    [],
+  );
+
+  return (
+    <Stack
+      gap={1}
+      className={stackClasses}
+    >
+      <Typography
+        variant={TypographyVariant.B1_MD}
+        color={TypographyColor.TEXT_LIGHT}
+        className={headlineClasses}
+        numberOfLines={2}
+      >
+        {headline}
+      </Typography>
+      <AnimatedText
+        sequence={animatedText}
+        getNodeWrapper={animatedTextWrapper}
+        typingDuration={textTypingDuration}
+        transition={textTransition}
+        loop={loop}
+      />
+    </Stack>
+  );
+};

package/src/components/ProductCard/components/Poster.tsx

@@ -0,0 +1,15 @@
+import { Container } from '../../Container';
+import { useGetPosterProperties } from '../hooks/useGetPosterProperties';
+import { PosterProps } from '../types';
+
+export const Poster = ({ children, imageSrc, fallbackColor }: PosterProps) => {
+  const { containerStyles, containerClasses } = useGetPosterProperties(imageSrc, fallbackColor);
+  return (
+    <Container
+      className={containerClasses}
+      style={containerStyles}
+    >
+      {children}
+    </Container>
+  );
+};

package/src/components/ProductCard/components/index.ts

@@ -0,0 +1,9 @@
+import { Carousel } from './Carousel';
+import { Header } from './Header';
+import { Poster } from './Poster';
+
+export const ProductCardWidgetComponents = {
+  Poster,
+  Header,
+  Carousel,
+};

package/src/components/ProductCard/hooks/useGetCarouselProperties.ts

@@ -0,0 +1,7 @@
+export const useGetCarouselProperties = () => {
+  const carouselClasses = 'envive-tw-mb-4';
+
+  return {
+    carouselClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetHeaderProperties.ts

@@ -0,0 +1,9 @@
+export const useGetHeaderProperties = (italicizeHeadline: boolean) => {
+  const stackClasses = 'envive-tw-mb-6';
+  const headlineClasses = italicizeHeadline ? 'envive-tw-italic' : '';
+
+  return {
+    stackClasses,
+    headlineClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetInputProperties.ts

@@ -0,0 +1,22 @@
+import { Theme } from '../../../../tokens/theme/theme';
+import { TypographyColor } from '../../Typography';
+
+const inputContainer = {
+  [Theme.STANDARD]: 'envive-tw-bg-background-light',
+  [Theme.MODERN]: 'envive-tw-bg-background-light !envive-tw-rounded-0',
+};
+
+const inputPlaceholder = {
+  [Theme.STANDARD]: TypographyColor.TEXT_SECONDARY,
+  [Theme.MODERN]: TypographyColor.TEXT_SECONDARY,
+  [Theme.MINIMAL]: TypographyColor.TEXT_LIGHT,
+};
+
+export const useGetInputProperties = (theme: Theme) => {
+  const containerClasses = inputContainer[theme];
+  const placeholderClasses = inputPlaceholder[theme];
+  return {
+    containerClasses,
+    placeholderClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetPosterProperties.ts

@@ -0,0 +1,19 @@
+const OVERLAY_OPACITY = '60'; // 60%
+
+export const useGetPosterProperties = (imageSrc: string, fallbackColor: string) => {
+  const overlayColor = `#000000${OVERLAY_OPACITY}`;
+  const bgColor = fallbackColor || 'black';
+  const containerStyles: React.CSSProperties = {
+    background: imageSrc
+      ? `linear-gradient(${overlayColor}, ${overlayColor}) 0% 0%/cover, url('${imageSrc}') 50% 0%/cover`
+      : bgColor,
+  };
+
+  const containerClasses =
+    'envive-tw-px-4 envive-tw-py-10 envive-tw-w-full envive-tw-h-full envive-tw-flex envive-tw-flex-col envive-tw-justify-center';
+
+  return {
+    containerStyles,
+    containerClasses,
+  };
+};

package/src/components/ProductCard/index.ts

@@ -0,0 +1,2 @@
+export { ProductCard } from './ProductCard';
+export type { ProductCardProps } from './types';

package/src/components/ProductCard/types/index.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
+import { PromptButtonVariant } from '../../PromptButton';
+
+/**
+ * Props for the Carousel component.
+ */
+export interface CarouselProps {
+  /** Visual theme configuration for styling the carousel. */
+  theme: Theme;
+  /** Array of prompt strings to display in the carousel. */
+  prompts: string[];
+  /** Visual variant/style of the prompt buttons. */
+  promptButtonType: PromptButtonVariant;
+  /** Unique identifier for the carousel instance. */
+  carouselId: string;
+  /**
+   * Callback function invoked when a prompt is selected.
+   */
+  onSelect: (prompt: string) => void;
+}
+
+/**
+ * Props for the Header component.
+ */
+export interface HeaderProps {
+  /** Main headline text to display. */
+  headline: string;
+  /** Whether to apply italic styling to the headline. */
+  italicizeHeadline?: boolean;
+  /** Array of text strings to animate/type. */
+  animatedText: string[];
+  /** Duration in milliseconds for the typing animation. */
+  textTypingDuration?: number;
+  /** Duration in milliseconds for text transitions. */
+  textTransition?: number;
+  /** Whether the animation should loop continuously. */
+  loop?: boolean;
+}
+
+/**
+ * Props for the Poster component.
+ */
+export interface PosterProps {
+  /** React node(s) to render as children. */
+  children?: React.ReactNode;
+  /** Source URL or path for the poster image. */
+  imageSrc: string;
+  /** Fallback background color to display if the image fails to load. */
+  fallbackColor?: string;
+}
+
+/**
+ * Props for the Input component.
+ */
+export interface InputProps {
+  /** Visual theme configuration for styling the input. */
+  theme: Theme;
+  /** Callback function invoked when the input is clicked. */
+  onInputClick: () => void;
+  /** Placeholder text displayed in the input field. */
+  placeholder?: string;
+}
+
+/**
+ * Props for the InputIcon component.
+ */
+export interface InputIconProps {
+  /** Visual theme configuration for styling the input icon. */
+  theme: Theme;
+}
+
+/**
+ * Props for the ProductCard component.
+ * Combines props from Input, Carousel, Header, and Poster components.
+ * Excludes the 'children' prop from PosterProps.
+ */
+export interface ProductCardProps
+  extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {}

package/src/components/PromptCarousel/PromptCarousel.tsx

@@ -54,7 +54,6 @@ export const PromptCarousel = ({
     isAnimated: isAnimatedValue,
   });
 
-  console.log('PromptCarousel', promptButtonTexts, isLoading);
   const { visibleButtonsFirstRow, visibleButtonsSecondRow } = useCarouselButtons({
     promptButtonTexts,
     shouldShowTwoRows: shouldShowTwoRowsValue,

package/src/components/PromptCarousel/hooks/useCarouselRefs.ts

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 
 interface UseCarouselRefsProps {
   shouldShowTwoRows: boolean;
@@ -11,9 +11,10 @@ export const useCarouselRefs = ({ shouldShowTwoRows }: UseCarouselRefsProps) =>
   const blockScrollRef = useRef<HTMLDivElement>(null);
   const blockFirstRowStackRef = useRef<HTMLDivElement>(null);
 
-  const scrollRefs = shouldShowTwoRows
-    ? [firstRowScrollRef, secondRowScrollRef]
-    : [firstRowScrollRef];
+  const scrollRefs = useMemo(
+    () => (shouldShowTwoRows ? [firstRowScrollRef, secondRowScrollRef] : [firstRowScrollRef]),
+    [shouldShowTwoRows],
+  );
 
   return {
     firstRowScrollRef,

package/src/components/SocialProof/SocialProof.tsx

@@ -2,12 +2,14 @@ import { ImageGalleryLayout } from '../ImageGallery/types/types';
 import { useCheckIsMobile } from '../utils/useCheckIsMobile';
 import { SocialProofComponents } from './components';
 import { resolveTheme } from '../utils/resolveTheme';
-import { SocialProofProps } from './types/types';
+import { SocialProofProps, WidgetKind } from './types/types';
 import { Theme } from '../Tokens';
 import { WidgetWrapperVariant } from '../WidgetWrapper';
 import { PromptCarouselRows } from '../PromptCarousel';
 import { PromptButtonVariant } from '../PromptButton';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle/WidgetWrapperWithTitle';
+import { useSocialProofCount } from './hooks';
+import { IconVariant } from '../WidgetTextField/types/types';
 
 export const SocialProof = ({
   baseProps,
@@ -15,11 +17,12 @@ export const SocialProof = ({
   widgetStyleProps,
   widgetEventProps,
 }: SocialProofProps) => {
-  const { id, testId, className, style } = baseProps ?? {};
+  const { id, testId, className, style, pageVariant, countKey } = baseProps ?? {};
 
   const {
     theme = Theme.GLOBAL_CUSTOM,
     variant = WidgetWrapperVariant.CARD_WITH_BORDER,
+    kind = WidgetKind.STATIC,
     hexCardColor,
     promptCarouselRows = PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
     hideImage,
@@ -32,7 +35,6 @@ export const SocialProof = ({
   } = widgetStyleProps ?? {};
 
   const {
-    numberOfCustomersText,
     customerQueryText,
     primaryButtonText,
     secondaryButtonTitleText,
@@ -43,6 +45,12 @@ export const SocialProof = ({
     titleLabel,
   } = widgetContentProps ?? {};
 
+  const numberOfCustomersText = useSocialProofCount({
+    pageVariant,
+    countKey,
+    id,
+  });
+
   const { handlePrimaryButtonClick, handleSecondaryButtonClick, handleTextFieldClick } =
     widgetEventProps ?? {};
 
@@ -50,7 +58,17 @@ export const SocialProof = ({
 
   const { isMobile } = useCheckIsMobile('sm');
 
-  const hasDynamicLayout = dynamicLayout !== undefined;
+  const hasDynamicLayout = kind === WidgetKind.DYNAMIC || dynamicLayout !== undefined;
+
+  const hideImageGallery = hideImage || !images || images.length === 0;
+
+  const isFourGridLayout =
+    !isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID && !hasDynamicLayout;
+
+  const isFourHorizontalLayout =
+    (imageGalleryLayout === ImageGalleryLayout.FOUR_HORIZONTAL ||
+      (isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID)) &&
+    !hasDynamicLayout;
 
   const headline = (
     <SocialProofComponents.Headline
@@ -79,12 +97,11 @@ export const SocialProof = ({
       theme={finalTheme}
       placeholder={textFieldPlaceholderText}
       handleTextFieldClick={handleTextFieldClick}
+      iconVariant={hasDynamicLayout ? IconVariant.DEFAULT : IconVariant.SEARCH}
     />
   );
 
-  const hideImageGallery = hideImage || !images || images.length === 0;
-
-  if (!isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID && !hasDynamicLayout) {
+  if (isFourGridLayout) {
     return (
       <WidgetWrapperWithTitle
         id={id}
@@ -108,11 +125,7 @@ export const SocialProof = ({
     );
   }
 
-  if (
-    (imageGalleryLayout === ImageGalleryLayout.FOUR_HORIZONTAL ||
-      (isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID)) &&
-    !hasDynamicLayout
-  ) {
+  if (isFourHorizontalLayout) {
     return (
       <WidgetWrapperWithTitle
         id={id}