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

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

@@ -2,12 +2,15 @@ import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { SocialProof } from '../SocialProof';
-import { DynamicLayout } from '../types/types';
+import { DynamicLayout, PageVariant } from '../types/types';
 import { ImageGalleryLayout } from '../../ImageGallery/types/types';
 import { PromptButtonVariant } from '../../PromptButton/types';
 import { PromptCarouselRows } from '../../PromptCarousel/types/types';
 import { WidgetWrapperVariant } from '../../WidgetWrapper/types/types';
 import { Theme } from '../../Tokens';
+import { SOCIAL_PROOF_COUNT_KEY } from '../hooks';
+
+const COUNT_KEY_MOCK = 'test-social-proof';
 
 const mockUseCheckIsMobile = vi.fn(() => ({ isMobile: false, viewportWidth: 1024 }));
 vi.mock('../../utils/useCheckIsMobile', () => ({
@@ -26,12 +29,35 @@ vi.mock('src/components/utils/useGetContentSize', () => ({
   }),
 }));
 
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => {
+      store[key] = value.toString();
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock,
+});
+
 describe('SocialProof', () => {
   const defaultProps = {
-    baseProps: {},
+    baseProps: {
+      id: 'test-social-proof',
+      pageVariant: PageVariant.PageVisit,
+      countKey: COUNT_KEY_MOCK,
+    },
     widgetContentProps: {
       titleLabel: 'Shopping Assistant',
-      numberOfCustomersText: '114 customers',
       customerQueryText: 'asked which products are best for gifting...',
       primaryButtonText: 'This is a prompt button',
       secondaryButtonTitleText: 'What else are customers asking?',
@@ -61,14 +87,37 @@ describe('SocialProof', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockUseCheckIsMobile.mockReturnValue({ isMobile: false, viewportWidth: 1024 });
+    localStorageMock.clear();
   });
 
   describe('Basic rendering', () => {
-    it('should render with default props', () => {
+    it('should render with default props', async () => {
       render(<SocialProof {...defaultProps} />);
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      // Customer count should be between 100-200 and formatted as "{number} customers"
+      const customerCountText = screen.getByText(/\d+ customers/);
+      expect(customerCountText).toBeInTheDocument();
+      const match = customerCountText.textContent?.match(/(\d+)/);
+      if (match) {
+        const count = parseInt(match[1], 10);
+        expect(count).toBeGreaterThanOrEqual(100);
+        expect(count).toBeLessThanOrEqual(200);
+      }
       expect(screen.getByText('asked which products are best for gifting...')).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
+
+      // Verify persistence of customer count in localStorage:
+      await waitFor(() => {
+        const storedData = localStorageMock.getItem(SOCIAL_PROOF_COUNT_KEY);
+        expect(storedData).not.toBeNull();
+        if (storedData) {
+          const customerCountMap = JSON.parse(storedData);
+          expect(customerCountMap).toHaveProperty(PageVariant.PageVisit);
+          expect(customerCountMap[PageVariant.PageVisit]).toHaveProperty(COUNT_KEY_MOCK);
+          const storedCount = customerCountMap[PageVariant.PageVisit][COUNT_KEY_MOCK];
+          expect(storedCount).toBeGreaterThanOrEqual(100);
+          expect(storedCount).toBeLessThanOrEqual(200);
+        }
+      });
     });
 
     it('should apply id attribute when provided', () => {
@@ -124,7 +173,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
 
@@ -135,7 +184,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ imageGalleryLayout: ImageGalleryLayout.FOUR_HORIZONTAL }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
 
@@ -146,7 +195,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ imageGalleryLayout: ImageGalleryLayout.SINGLE }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
 
@@ -158,7 +207,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
 
@@ -172,7 +221,7 @@ describe('SocialProof', () => {
           }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
   });
@@ -199,7 +248,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ hideImage: false, imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
 
     it('should hide textfield when hideTextField is true', () => {
@@ -311,7 +360,7 @@ describe('SocialProof', () => {
             widgetStyleProps={{ theme, imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
           />,
         );
-        expect(screen.getByText('114 customers')).toBeInTheDocument();
+        expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
         unmount();
       });
     });
@@ -331,7 +380,7 @@ describe('SocialProof', () => {
             widgetStyleProps={{ variant, imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
           />,
         );
-        expect(screen.getByText('114 customers')).toBeInTheDocument();
+        expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
         unmount();
       });
     });
@@ -416,7 +465,7 @@ describe('SocialProof', () => {
           }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
 
     it('should render with dynamicLayout WIDE', () => {
@@ -429,7 +478,7 @@ describe('SocialProof', () => {
           }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
   });
 
@@ -450,7 +499,7 @@ describe('SocialProof', () => {
           widgetEventProps={{ handleTextFieldClick: vi.fn() }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
 
     it('should render with empty secondaryButtonTexts array', () => {
@@ -463,7 +512,7 @@ describe('SocialProof', () => {
           }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
   });
 });

package/src/components/SocialProof/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useSocialProofCount } from './useSocialProofCount';
+export { SOCIAL_PROOF_COUNT_KEY } from './useSocialProofCount';

package/src/components/SocialProof/hooks/useSocialProofCount.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { PageVariant } from '../types/types';
+
+const RANDOM_NUMBER_MIN = 100;
+const RANDOM_NUMBER_MAX = 200;
+export const SOCIAL_PROOF_COUNT_KEY = 'v3_social_proof_values';
+
+type SocialProofCount = Record<string, Record<string, number>>;
+
+interface UseSocialProofCountParams {
+  pageVariant?: PageVariant;
+  countKey?: string;
+  id?: string;
+}
+
+export const useSocialProofCount = ({
+  pageVariant,
+  countKey,
+  id,
+}: UseSocialProofCountParams): string => {
+  const [customerCount, setCustomerCount] = useState<number>(() =>
+    Math.floor(Math.random() * (RANDOM_NUMBER_MAX - RANDOM_NUMBER_MIN + 1) + RANDOM_NUMBER_MIN),
+  );
+
+  useEffect(() => {
+    const variant = pageVariant || PageVariant.PageVisit;
+    const key = countKey || id || 'default';
+
+    try {
+      const storedData = localStorage.getItem(SOCIAL_PROOF_COUNT_KEY);
+      let customerCountMap: SocialProofCount = {};
+
+      if (storedData) {
+        try {
+          customerCountMap = JSON.parse(storedData) as SocialProofCount;
+        } catch (parseError) {
+          console.warn('Failed to parse social proof count from localStorage:', parseError);
+          return;
+        }
+      }
+
+      if (customerCountMap[variant]?.[key]) {
+        setCustomerCount(customerCountMap[variant][key]);
+      } else {
+        const randomCount = Math.floor(
+          Math.random() * (RANDOM_NUMBER_MAX - RANDOM_NUMBER_MIN + 1) + RANDOM_NUMBER_MIN,
+        );
+
+        if (!customerCountMap[variant]) {
+          customerCountMap[variant] = {};
+        }
+        customerCountMap[variant][key] = randomCount;
+
+        try {
+          localStorage.setItem(SOCIAL_PROOF_COUNT_KEY, JSON.stringify(customerCountMap));
+          setCustomerCount(randomCount);
+        } catch (storageError) {
+          console.warn('Failed to save social proof count to localStorage:', storageError);
+        }
+      }
+    } catch (error) {
+      console.warn('Error managing social proof count:', error);
+    }
+  }, [pageVariant, countKey, id]);
+
+  return `${customerCount} customers`;
+};

package/src/components/SocialProof/index.ts

@@ -1,3 +1,4 @@
 export { SocialProof } from './SocialProof';
 export type { SocialProofProps } from './types/types';
-export { DynamicLayout } from './types/types';
+export { DynamicLayout, PageVariant } from './types/types';
+export { useSocialProofCount } from './hooks';

package/src/components/SocialProof/types/types.ts

@@ -9,6 +9,12 @@ export enum DynamicLayout {
   WIDE = 'wide',
 }
 
+export enum PageVariant {
+  PLP = 'PLP',
+  PDP = 'PDP',
+  PageVisit = 'PageVisit',
+}
+
 /**
  * Base props for the SocialProof component container.
  *
@@ -34,6 +40,18 @@ export type BaseProps = {
    * Inline styles to apply to the container.
    */
   style?: React.CSSProperties;
+
+  /**
+   * Page variant for localStorage persistence of customer counts (PLP, PDP, or PageVisit).
+   */
+  pageVariant?: PageVariant;
+
+  /**
+   * Specific identifier for the pageVariant (e.g., productId for PDP, plpId for PLP, category for PageVisit).
+   * Used as the key for localStorage persistence.
+   * Falls back to the `id` prop if not provided.
+   */
+  countKey?: string;
 };
 
 /**
@@ -53,12 +71,6 @@ export type WidgetContentProps = {
    */
   titleLabel: string;
 
-  /**
-   * Text displaying the number of customers (e.g., "114 customers").
-   * Displayed in the headline section.
-   */
-  numberOfCustomersText?: string;
-
   /**
    * Text displaying what customers asked (e.g., "asked which products are best for gifting...").
    * Displayed in the headline section alongside the customer count.