@envive-ai/react-widgets-v3 0.3.15-alpha.1 → 0.3.15-alpha.2

package/dist/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.js

@@ -1,452 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { render, screen, waitFor } from '@testing-library/react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { withBaseWidget } from '../withBaseWidget';
-// Mock IntersectionObserver
-class MockIntersectionObserver {
-    observe = vi.fn();
-    disconnect = vi.fn();
-    unobserve = vi.fn();
-    root = null;
-    rootMargin = '';
-    thresholds = [];
-    callback;
-    options;
-    constructor(callback, options) {
-        this.callback = callback;
-        this.options = options;
-        if (options) {
-            this.rootMargin = options.rootMargin || '';
-        }
-    }
-    // Helper method to trigger intersection
-    triggerIntersection(isIntersecting, target) {
-        const entry = {
-            isIntersecting,
-            intersectionRatio: isIntersecting ? 1 : 0,
-            boundingClientRect: {},
-            rootBounds: {},
-            target: target || {},
-            time: Date.now(),
-        };
-        this.callback([entry]);
-    }
-    // Helper method to get options
-    getOptions() {
-        return this.options;
-    }
-    // Required by IntersectionObserver interface but not used in tests
-    // eslint-disable-next-line class-methods-use-this
-    takeRecords() {
-        return [];
-    }
-}
-// Mock the contexts
-const mockTrackEvent = vi.fn();
-const mockGetHardcopy = vi.fn();
-vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
-    useAmplitude: () => ({
-        trackEvent: mockTrackEvent,
-        isReady: true,
-    }),
-    SpiffyMetricsEventName: {
-        ChatComponentVisible: 'Chat Component Visible',
-        SearchComponentVisible: 'Search Component Visible',
-    },
-}));
-vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
-    useHardcopy: () => ({
-        getHardcopy: mockGetHardcopy,
-    }),
-}));
-vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
-    usePage: () => ({
-        userEvent: {
-            id: 'test-user-event-id',
-            category: UserEventCategory.PageVisit,
-            created_at: '2025-01-01T00:00:00Z',
-            event_id: 'test-event-id',
-        },
-    }),
-}));
-vi.mock('@envive-ai/react-hooks/contexts/widgetConfigContext', () => ({
-    useWidgetConfig: () => ({
-        getWidgetConfig: vi.fn().mockResolvedValue({}),
-    }),
-}));
-vi.mock('@envive-ai/react-hooks/contexts/uiConfigContext', () => ({
-    useUiConfig: () => ({
-        getUiConfig: vi.fn().mockResolvedValue({}),
-    }),
-}));
-const TestWidget = ({ widgetConfigId, widgetType, hardcopyContent, observedWidget, testId = 'test-widget', children, }) => {
-    // Attach the ref to the root div so IntersectionObserver can observe it
-    // Note: The ref type is RefObject<HTMLDivElement> but BaseWidgetProps expects RefObject<BaseWidgetProps>
-    // This is a type mismatch in the implementation, but we handle it for testing
-    const ref = observedWidget;
-    return (_jsxs("div", { ref: ref, "data-testid": testId, children: [_jsx("div", { "data-testid": "widget-config-id", children: widgetConfigId }), _jsx("div", { "data-testid": "widget-type", children: widgetType }), hardcopyContent && (_jsxs("div", { "data-testid": "hardcopy-content", children: [_jsx("div", { "data-testid": "hardcopy-language", children: hardcopyContent.language }), _jsx("div", { "data-testid": "hardcopy-values", children: JSON.stringify(hardcopyContent.values) })] })), observedWidget && _jsx("div", { "data-testid": "observed-widget-ref", children: "Ref attached" }), children] }));
-};
-describe('withBaseWidget', () => {
-    let mockObserver;
-    let mockObservers;
-    let originalIntersectionObserver;
-    beforeEach(() => {
-        vi.clearAllMocks();
-        mockObservers = [];
-        // Set default mock for getHardcopy to return a resolved promise
-        mockGetHardcopy.mockResolvedValue({
-            language: 'en',
-            values: {},
-        });
-        // Store original IntersectionObserver
-        originalIntersectionObserver = global.IntersectionObserver;
-        // Replace IntersectionObserver with mock class
-        global.IntersectionObserver = class extends MockIntersectionObserver {
-            constructor(callback, options) {
-                super(callback, options);
-                // eslint-disable-next-line @typescript-eslint/no-this-alias
-                mockObserver = this;
-                mockObservers.push(this);
-            }
-        };
-    });
-    afterEach(() => {
-        // Restore original IntersectionObserver
-        global.IntersectionObserver = originalIntersectionObserver;
-    });
-    describe('IntersectionObserver setup', () => {
-        it('should create an IntersectionObserver with default rootMargin', () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-1", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            expect(mockObserver).toBeDefined();
-            expect(mockObserver.rootMargin).toBe('0px');
-        });
-        it('should create an IntersectionObserver with custom rootMargin', () => {
-            const WrappedWidget = withBaseWidget(TestWidget, {
-                rootMargin: '100px',
-            });
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-2", widgetType: WidgetTypeV3.ChatPreviewV3 }));
-            expect(mockObserver).toBeDefined();
-            expect(mockObserver.rootMargin).toBe('100px');
-        });
-        it('should observe the widget element', () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-3", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            expect(mockObserver.observe).toHaveBeenCalled();
-        });
-    });
-    describe('Amplitude event tracking', () => {
-        it('should track default event when widget becomes visible', async () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-4", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            const widgetElement = container.querySelector('[data-testid="test-widget"]');
-            // Trigger intersection with the actual element
-            mockObserver.triggerIntersection(true, widgetElement);
-            await waitFor(() => {
-                expect(mockTrackEvent).toHaveBeenCalledWith({
-                    eventName: SpiffyMetricsEventName.ChatComponentVisible,
-                    eventProps: {
-                        widget_config_id: 'test-config-4',
-                        widget_type: WidgetTypeV3.PromptCarouselV3,
-                    },
-                });
-            });
-        });
-        it('should track custom event when widget becomes visible', async () => {
-            const WrappedWidget = withBaseWidget(TestWidget, {
-                visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
-            });
-            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-5", widgetType: WidgetTypeV3.ChatPreviewV3 }));
-            const widgetElement = container.querySelector('[data-testid="test-widget"]');
-            // Trigger intersection
-            mockObserver.triggerIntersection(true, widgetElement);
-            await waitFor(() => {
-                expect(mockTrackEvent).toHaveBeenCalledWith({
-                    eventName: SpiffyMetricsEventName.SearchComponentVisible,
-                    eventProps: {
-                        widget_config_id: 'test-config-5',
-                        widget_type: WidgetTypeV3.ChatPreviewV3,
-                    },
-                });
-            });
-        });
-        it('should include custom event props when tracking', async () => {
-            const WrappedWidget = withBaseWidget(TestWidget, {
-                visibilityEventProps: {
-                    custom_prop: 'custom_value',
-                    another_prop: 123,
-                },
-            });
-            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-6", widgetType: WidgetTypeV3.SocialProofV3 }));
-            const widgetElement = container.querySelector('[data-testid="test-widget"]');
-            // Trigger intersection
-            mockObserver.triggerIntersection(true, widgetElement);
-            await waitFor(() => {
-                expect(mockTrackEvent).toHaveBeenCalledWith({
-                    eventName: SpiffyMetricsEventName.ChatComponentVisible,
-                    eventProps: {
-                        widget_config_id: 'test-config-6',
-                        widget_type: WidgetTypeV3.SocialProofV3,
-                        custom_prop: 'custom_value',
-                        another_prop: 123,
-                    },
-                });
-            });
-        });
-        it('should only track event once even if intersection happens multiple times', async () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-7", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            const widgetElement = container.querySelector('[data-testid="test-widget"]');
-            // Trigger intersection multiple times
-            mockObserver.triggerIntersection(true, widgetElement);
-            mockObserver.triggerIntersection(false, widgetElement);
-            mockObserver.triggerIntersection(true, widgetElement);
-            await waitFor(() => {
-                expect(mockTrackEvent).toHaveBeenCalledTimes(1);
-            });
-        });
-        it('should disconnect observer after tracking event', async () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-8", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            const widgetElement = container.querySelector('[data-testid="test-widget"]');
-            // Trigger intersection
-            mockObserver.triggerIntersection(true, widgetElement);
-            await waitFor(() => {
-                expect(mockObserver.disconnect).toHaveBeenCalled();
-            });
-        });
-        it('should not track event if widget is not intersecting', async () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            const { container } = render(_jsx(WrappedWidget, { widgetConfigId: "test-config-9", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            const widgetElement = container.querySelector('[data-testid="test-widget"]');
-            // Trigger non-intersection
-            mockObserver.triggerIntersection(false, widgetElement);
-            // Wait a bit to ensure no event is tracked
-            await new Promise(resolve => {
-                setTimeout(resolve, 100);
-            });
-            expect(mockTrackEvent).not.toHaveBeenCalled();
-        });
-    });
-    describe('Hardcopy content fetching', () => {
-        it('should fetch hardcopy content when widget mounts', async () => {
-            const mockHardcopy = {
-                responseId: 'mock-response-id',
-                language: 'en',
-                values: {
-                    suggestionBarButtons: ['Button 1', 'Button 2'],
-                },
-            };
-            mockGetHardcopy.mockResolvedValue(mockHardcopy);
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-10", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            await waitFor(() => {
-                expect(mockGetHardcopy).toHaveBeenCalledWith({
-                    widgetType: WidgetTypeV3.PromptCarouselV3,
-                    userEvent: {
-                        id: 'test-user-event-id',
-                        category: UserEventCategory.PageVisit,
-                        created_at: '2025-01-01T00:00:00Z',
-                        event_id: 'test-event-id',
-                    },
-                });
-            });
-        });
-        it('should pass hardcopy content to widget', async () => {
-            const mockHardcopy = {
-                responseId: 'mock-response-id',
-                language: 'en',
-                values: {
-                    chatPreviewTitle: 'Chat Preview Title',
-                    typewriterTextPrefix: 'Want to know',
-                },
-            };
-            mockGetHardcopy.mockResolvedValue(mockHardcopy);
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-11", widgetType: WidgetTypeV3.ChatPreviewV3 }));
-            await waitFor(() => {
-                expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
-                expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
-                expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(JSON.stringify(mockHardcopy.values));
-            });
-        });
-        it('should not fetch hardcopy if widgetType is not provided', () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            // @ts-expect-error - Testing invalid props
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-12" }));
-            expect(mockGetHardcopy).not.toHaveBeenCalled();
-        });
-        it('should handle hardcopy fetch errors gracefully', async () => {
-            const error = new Error('Failed to fetch hardcopy');
-            mockGetHardcopy.mockRejectedValue(error);
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-13", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            await waitFor(() => {
-                expect(mockGetHardcopy).toHaveBeenCalled();
-            });
-            // Wait a bit for the promise to reject and be handled
-            await new Promise(resolve => {
-                setTimeout(resolve, 100);
-            });
-            // Widget should still render without hardcopy
-            expect(screen.getByTestId('test-widget')).toBeInTheDocument();
-            expect(screen.queryByTestId('hardcopy-content')).not.toBeInTheDocument();
-        });
-    });
-    describe('Widget rendering', () => {
-        it('should render the wrapped widget with correct props', () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-14", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            expect(screen.getByTestId('test-widget')).toBeInTheDocument();
-            expect(screen.getByTestId('widget-config-id')).toHaveTextContent('test-config-14');
-            expect(screen.getByTestId('widget-type')).toHaveTextContent(WidgetTypeV3.PromptCarouselV3);
-        });
-        it('should pass observedWidget ref to the widget', () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-15", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            expect(screen.getByTestId('observed-widget-ref')).toBeInTheDocument();
-        });
-        it('should render widget children correctly', () => {
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-16", widgetType: WidgetTypeV3.PromptCarouselV3, children: _jsx("div", { "data-testid": "child-content", children: "Child Content" }) }));
-            expect(screen.getByTestId('child-content')).toBeInTheDocument();
-            expect(screen.getByTestId('child-content')).toHaveTextContent('Child Content');
-        });
-        it('should render widget with hardcopy content when available', async () => {
-            const mockHardcopy = {
-                responseId: 'mock-response-id',
-                language: 'en',
-                values: {
-                    imagePromptTitle: 'Image Prompt Title',
-                },
-            };
-            mockGetHardcopy.mockResolvedValue(mockHardcopy);
-            const WrappedWidget = withBaseWidget(TestWidget);
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-17", widgetType: WidgetTypeV3.ImagePromptCardV3 }));
-            await waitFor(() => {
-                expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
-            });
-            expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
-            expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(JSON.stringify(mockHardcopy.values));
-        });
-    });
-    describe('Integration tests', () => {
-        it('should handle full flow: visibility tracking + hardcopy rendering', async () => {
-            const mockHardcopy = {
-                responseId: 'mock-response-id',
-                language: 'en',
-                values: {
-                    suggestionBarButtons: ['Button 1', 'Button 2', 'Button 3'],
-                },
-            };
-            mockGetHardcopy.mockResolvedValue(mockHardcopy);
-            const WrappedWidget = withBaseWidget(TestWidget, {
-                visibilityEventName: SpiffyMetricsEventName.SearchComponentVisible,
-                visibilityEventProps: {
-                    test_integration: true,
-                },
-            });
-            render(_jsx(WrappedWidget, { widgetConfigId: "test-config-integration", widgetType: WidgetTypeV3.PromptCarouselV3 }));
-            // Wait for hardcopy to be fetched and rendered
-            await waitFor(() => {
-                expect(screen.getByTestId('hardcopy-content')).toBeInTheDocument();
-            });
-            const widgetElement = screen.getByTestId('test-widget');
-            // Trigger intersection to track event
-            mockObserver.triggerIntersection(true, widgetElement);
-            // Verify both hardcopy and event tracking worked
-            await waitFor(() => {
-                expect(mockTrackEvent).toHaveBeenCalledWith({
-                    eventName: SpiffyMetricsEventName.SearchComponentVisible,
-                    eventProps: {
-                        widget_config_id: 'test-config-integration',
-                        widget_type: WidgetTypeV3.PromptCarouselV3,
-                        test_integration: true,
-                    },
-                });
-            });
-            expect(screen.getByTestId('hardcopy-language')).toHaveTextContent('en');
-            expect(screen.getByTestId('hardcopy-values')).toHaveTextContent(JSON.stringify(mockHardcopy.values));
-        });
-        it('should handle multiple widget instances independently', async () => {
-            const mockHardcopy1 = {
-                responseId: 'mock-response-id',
-                language: 'en',
-                values: { buttons: ['Button 1'] },
-            };
-            const mockHardcopy2 = {
-                responseId: 'mock-response-id',
-                language: 'en',
-                values: { buttons: ['Button 2'] },
-            };
-            mockGetHardcopy.mockResolvedValueOnce(mockHardcopy1).mockResolvedValueOnce(mockHardcopy2);
-            const WrappedWidget = withBaseWidget(TestWidget);
-            // Render both widgets simultaneously to test independence
-            render(_jsxs(_Fragment, { children: [_jsx(WrappedWidget, { widgetConfigId: "widget-1", widgetType: WidgetTypeV3.PromptCarouselV3, testId: "widget-1" }), _jsx(WrappedWidget, { widgetConfigId: "widget-2", widgetType: WidgetTypeV3.ChatPreviewV3, testId: "widget-2" })] }));
-            // Wait for both widgets to render and fetch hardcopy
-            await waitFor(() => {
-                expect(screen.getByTestId('widget-1')).toBeInTheDocument();
-                expect(screen.getByTestId('widget-2')).toBeInTheDocument();
-            });
-            // Verify both widgets have their own config IDs
-            const widget1ConfigId = screen
-                .getByTestId('widget-1')
-                .querySelector('[data-testid="widget-config-id"]');
-            const widget2ConfigId = screen
-                .getByTestId('widget-2')
-                .querySelector('[data-testid="widget-config-id"]');
-            expect(widget1ConfigId).toHaveTextContent('widget-1');
-            expect(widget2ConfigId).toHaveTextContent('widget-2');
-            // Verify both widgets fetched their own hardcopy independently
-            expect(mockGetHardcopy).toHaveBeenCalledWith({
-                widgetType: WidgetTypeV3.PromptCarouselV3,
-                userEvent: expect.any(Object),
-            });
-            expect(mockGetHardcopy).toHaveBeenCalledWith({
-                widgetType: WidgetTypeV3.ChatPreviewV3,
-                userEvent: expect.any(Object),
-            });
-            // Verify first widget can trigger intersection and track event
-            // When multiple widgets are rendered, each creates its own IntersectionObserver
-            // We need to find the observer that's observing widget-1's element
-            const widget1Element = screen.getByTestId('widget-1');
-            const widget2Element = screen.getByTestId('widget-2');
-            // Clear any previous calls to isolate this test
-            mockTrackEvent.mockClear();
-            // Find which observer is observing widget-1 by checking which one was called with widget1Element
-            // In our mock setup, the first observer should be for widget-1, second for widget-2
-            const widget1Observer = mockObservers[0];
-            const widget2Observer = mockObservers[1];
-            // Verify we have both observers
-            expect(widget1Observer).toBeDefined();
-            expect(widget2Observer).toBeDefined();
-            // Trigger intersection for widget-1 using its observer
-            widget1Observer.triggerIntersection(true, widget1Element);
-            await waitFor(() => {
-                // Verify that an event was tracked for widget-1
-                expect(mockTrackEvent).toHaveBeenCalled();
-                const { calls } = mockTrackEvent.mock;
-                // Find any call that matches widget-1's properties
-                const widget1Call = calls.find(
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (call) => call[0]?.eventProps?.widget_config_id === 'widget-1' &&
-                    call[0]?.eventProps?.widget_type === WidgetTypeV3.PromptCarouselV3);
-                expect(widget1Call).toBeDefined();
-            });
-            // Verify widget-2 can also track independently
-            mockTrackEvent.mockClear();
-            widget2Observer.triggerIntersection(true, widget2Element);
-            await waitFor(() => {
-                expect(mockTrackEvent).toHaveBeenCalled();
-                const { calls } = mockTrackEvent.mock;
-                const widget2Call = calls.find(
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (call) => call[0]?.eventProps?.widget_config_id === 'widget-2' &&
-                    call[0]?.eventProps?.widget_type === WidgetTypeV3.ChatPreviewV3);
-                expect(widget2Call).toBeDefined();
-            });
-        });
-    });
-});

package/dist/src/hocs/withBaseWidget/index.d.ts

@@ -1,2 +0,0 @@
-export { withBaseWidget } from './withBaseWidget';
-export type { BaseWidgetProps, WithBaseWidgetOptions } from './types';

package/dist/src/hocs/withBaseWidget/index.js

@@ -1 +0,0 @@
-export { withBaseWidget } from './withBaseWidget';

package/dist/src/hocs/withBaseWidget/types.d.ts

@@ -1,33 +0,0 @@
-import { RefObject } from 'react';
-import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
-import { OrgUIConfigV3, WidgetConfigV3, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
-export interface BaseWidgetProps {
-    widgetConfigId?: string;
-    widgetType: WidgetTypeV3;
-    observedWidget?: RefObject<BaseWidgetProps>;
-    hardcopyContent?: HardcopyResponse;
-    widgetConfig?: WidgetConfigV3;
-    uiConfig?: OrgUIConfigV3;
-    isLoading?: boolean;
-    isHardcopyLoading?: boolean;
-    isPageLoading?: boolean;
-    isWidgetConfigLoading?: boolean;
-    isUiConfigLoading?: boolean;
-}
-export interface WithBaseWidgetOptions {
-    /**
-     * The Amplitude event name to track when the widget becomes visible.
-     * Defaults to a generic component visible event if not provided.
-     */
-    visibilityEventName?: SpiffyMetricsEventName;
-    /**
-     * Additional properties to include with the visibility event.
-     */
-    visibilityEventProps?: Record<string, unknown>;
-    /**
-     * Root margin for the IntersectionObserver (e.g., '0px', '100px').
-     * Defaults to '0px'.
-     */
-    rootMargin?: string;
-}

package/dist/src/hocs/withBaseWidget/withBaseWidget.d.ts

@@ -1,5 +0,0 @@
-import { BaseWidgetProps, WithBaseWidgetOptions } from './types';
-export declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-    (props: P): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/src/hocs/withBaseWidget/withBaseWidget.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { SpiffyMetricsEventName, useAmplitude, } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { useHardcopy } from '@envive-ai/react-hooks/contexts/hardcopyContext';
-import { usePage } from '@envive-ai/react-hooks/contexts/pageContext';
-import { useWidgetConfig } from '@envive-ai/react-hooks/contexts/widgetConfigContext';
-import { useUiConfig } from '@envive-ai/react-hooks/contexts/uiConfigContext';
-export function withBaseWidget(Widget, options) {
-    const WrappedWidget = (props) => {
-        const { widgetConfigId, widgetType } = props;
-        const widgetRef = useRef(null);
-        const hasTrackedEvent = useRef(false);
-        const { trackEvent, isReady } = useAmplitude();
-        const [hardcopyContent, setHardcopyContent] = useState(undefined);
-        const { getHardcopy, isLoading: isHardcopyLoading } = useHardcopy();
-        const { userEvent, isLoading: isPageLoading } = usePage();
-        const [widgetConfig, setWidgetConfig] = useState(undefined);
-        const { getWidgetConfig, isLoading: isWidgetConfigLoading } = useWidgetConfig();
-        const [uiConfig, setUiConfig] = useState(undefined);
-        const { getUiConfig, isLoading: isUiConfigLoading } = useUiConfig();
-        const isLoading = isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
-        useEffect(() => {
-            if (!isReady || hasTrackedEvent.current || !widgetRef.current) {
-                return undefined;
-            }
-            const observer = new IntersectionObserver(([entry]) => {
-                if (entry.isIntersecting && !hasTrackedEvent.current) {
-                    const eventName = options?.visibilityEventName || SpiffyMetricsEventName.ChatComponentVisible;
-                    trackEvent({
-                        eventName,
-                        eventProps: {
-                            widget_config_id: widgetConfigId,
-                            widget_type: widgetType,
-                            ...options?.visibilityEventProps,
-                        },
-                    });
-                    hasTrackedEvent.current = true;
-                    observer.disconnect();
-                }
-            }, {
-                rootMargin: options?.rootMargin || '0px',
-            });
-            observer.observe(widgetRef.current);
-            return () => {
-                observer.disconnect();
-            };
-        }, [isReady, widgetConfigId, widgetType, trackEvent]);
-        useEffect(() => {
-            if (!widgetType || !userEvent) {
-                return;
-            }
-            getHardcopy({ widgetType, userEvent })
-                .then(setHardcopyContent)
-                .catch(() => {
-                // Silently handle errors - widget will render without hardcopy content
-            });
-        }, [widgetConfigId, widgetType, getHardcopy, userEvent]);
-        useEffect(() => {
-            getUiConfig()
-                .then(setUiConfig)
-                .catch(() => {
-                // Silently handle errors - widget will render without ui config
-            });
-        }, [getUiConfig, widgetConfigId, widgetType]);
-        useEffect(() => {
-            if (!widgetConfigId || !widgetType) {
-                return;
-            }
-            getWidgetConfig({ widgetConfigId, widgetType })
-                .then(setWidgetConfig)
-                .catch(e => {
-                console.error('Error getting widget config', widgetConfigId, widgetType, e);
-                // Silently handle errors - widget will render without widget config
-            });
-        }, [widgetConfigId, widgetType, getWidgetConfig]);
-        return (_jsx(Widget, { ...props, isLoading: isLoading, isHardcopyLoading: isHardcopyLoading, isPageLoading: isPageLoading, isWidgetConfigLoading: isWidgetConfigLoading, isUiConfigLoading: isUiConfigLoading, uiConfig: uiConfig, widgetConfig: widgetConfig, hardcopyContent: hardcopyContent, observedWidget: widgetRef }));
-    };
-    WrappedWidget.displayName = `withBaseWidget(${Widget.displayName || Widget.name || 'Component'})`;
-    return WrappedWidget;
-}

package/dist/src/stories/FloatingChatWidget.stories.d.ts

@@ -1,25 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    title: string;
-    component: {
-        ({ previewButtonOnly, previewChatAlwaysOpen, }?: import("../widgets/FloatingChatWidget").FloatingChatWidgetProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    tags: string[];
-    args: {};
-    argTypes: {};
-    parameters: {
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        previewButtonOnly?: boolean;
-        previewChatAlwaysOpen?: boolean;
-    }>) => import("react/jsx-runtime").JSX.Element)[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Playground: Story;

package/dist/src/stories/FloatingChatWidget.stories.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { PageVisitCategory, useSalesAgent, } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { useEffect } from 'react';
-import { v4 as uuid } from 'uuid';
-import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { FloatingChatWidget } from '../widgets/FloatingChatWidget';
-const meta = {
-    title: 'Widgets V3/FloatingChatWidget',
-    component: FloatingChatWidget,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {},
-    parameters: {
-        docs: {
-            description: {
-                component: 'FloatingChatWidget is a widget wrapper around FloatingChat that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget renders a floating chat interface that allows users to interact with the sales agent.',
-            },
-        },
-    },
-    decorators: [
-        Story => {
-            const { logPageVisit, logUserEvent } = useSalesAgent();
-            useEffect(() => {
-                logUserEvent({
-                    eventId: uuid(),
-                    category: UserEventCategory.AppLoaded,
-                    createdAt: new Date().toISOString(),
-                });
-                logPageVisit({ pageVisitCategory: PageVisitCategory.Homepage });
-            }, []);
-            return _jsx(Story, {});
-        },
-    ],
-};
-export default meta;
-export const Playground = {
-    parameters: {
-        docs: {
-            description: {
-                story: 'Experiment with different widgetConfigId values. The widget will fetch configuration from the widget config based on the widgetConfigId.',
-            },
-        },
-    },
-};