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

package/dist/src/widgets/FloatingChatWidget/FloatingChatOverlay.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from 'framer-motion';
+import classNames from 'classnames';
+import { useCheckIsMobile } from '@envive-ai/react-toolkit-v3/utils/useCheckIsMobile';
+const ANIMATION_DURATION = 0.3;
+const useOverlayAnimations = ({ previewMode, isMobile, }) => {
+    if (previewMode) {
+        return {
+            overlayExitAnimation: { opacity: 0, x: 0 },
+            overlayAnimation: { opacity: 1, x: 0 },
+        };
+    }
+    if (isMobile) {
+        return {
+            overlayExitAnimation: { opacity: 0 },
+            overlayAnimation: { opacity: 1 },
+        };
+    }
+    return {
+        overlayExitAnimation: { opacity: 0, x: 512 },
+        overlayAnimation: { opacity: 1, x: 0 },
+    };
+};
+export const FloatingChatOverlay = ({ children, isOpened, onClose, className, dataTestId, previewMode = false, isResultsModalOpen = false, }) => {
+    const { isMobile } = useCheckIsMobile();
+    const { overlayExitAnimation, overlayAnimation } = useOverlayAnimations({
+        previewMode,
+        isMobile,
+    });
+    const overlayClasses = classNames(previewMode ? 'envive-tw-absolute' : 'envive-tw-fixed', 'envive-tw-top-0', 'envive-tw-left-0', previewMode ? 'envive-tw-h-full' : 'envive-tw-h-screen', 'envive-tw-w-full', 'envive-tw-z-[2147483647]', className);
+    const backdropClasses = classNames('envive-tw-absolute', 'envive-tw-top-0', 'envive-tw-left-0', 'envive-tw-h-full', 'envive-tw-w-full', isMobile ? 'envive-tw-bg-black' : '', 'envive-tw-opacity-50', 'envive-tw-pointer-events-none', 'envive-tw-z-0');
+    const overlayContentClasses = classNames('envive-tw-relative', 'envive-tw-flex', 'envive-tw-justify-end', 'envive-tw-items-stretch', 'envive-tw-h-full', 'envive-tw-w-full', 'envive-tw-pointer-events-auto', 'envive-tw-cursor-pointer', 'envive-tw-z-10');
+    const chatWrapper = (_jsx(AnimatePresence, { children: isOpened && (_jsxs(motion.div, { className: overlayClasses, style: { top: '0px' }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: ANIMATION_DURATION }, "data-testid": dataTestId, children: [!previewMode && (_jsx(motion.div, { className: backdropClasses, initial: { opacity: 0 }, animate: { opacity: 0.5 }, exit: { opacity: 0 }, transition: { duration: ANIMATION_DURATION }, "aria-label": "Close chat" })), _jsx("div", { className: overlayContentClasses, style: { top: '0px' }, onClick: onClose, onKeyDown: e => {
+                        if (e.key === 'Escape') {
+                            onClose();
+                        }
+                    }, role: "button", tabIndex: 0, "aria-label": "Close floating chat", children: _jsx(motion.div, { initial: overlayExitAnimation, animate: overlayAnimation, exit: overlayExitAnimation, transition: { duration: ANIMATION_DURATION }, style: {
+                            height: previewMode ? '100%' : '100dvh',
+                            cursor: 'default',
+                            margin: isResultsModalOpen ? '0 auto' : '0',
+                        }, className: "envive-tw-shadow-md", onClick: e => e.stopPropagation(), children: children }) })] }, "floating-chat-overlay")) }));
+    return chatWrapper;
+};
+FloatingChatOverlay.displayName = 'FloatingChatOverlay';

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

@@ -0,0 +1,8 @@
+export interface FloatingChatWidgetProps {
+    previewButtonOnly?: boolean;
+    previewChatAlwaysOpen?: boolean;
+}
+export declare const FloatingChatWidget: {
+    ({ previewButtonOnly, previewChatAlwaysOpen, }?: FloatingChatWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/widgets/FloatingChatWidget/FloatingChatWidget.js

@@ -0,0 +1,134 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude, } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { WidgetTypeV3, } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import { WidgetInteractionComponent, WidgetInteractionType, } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { FloatingButton, } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
+import { DebugBar } from 'src/debug/debugBar';
+import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton';
+import { CustomerServiceType } from '../../CXIntegration/types';
+import { withBaseWidget } from '../../hocs/withBaseWidget';
+import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
+import { FLOATING_BUTTON_ID } from './constants';
+import { FloatingChatOverlay } from './FloatingChatOverlay';
+import { useFloatingButtonVisibility } from './hooks/useFloatingButtonVisibility';
+import { useAutoPopup } from './hooks/useAutoPopup';
+const FloatingChat = lazy(async () => ({
+    default: (await import('@envive-ai/react-toolkit-v3/FloatingChat')).FloatingChat,
+}));
+/**
+ * Wrapper component that isolates the useUnifiedCXButton hook call.
+ * Provider implementations use different React hooks internally, so the
+ * provider value must be stable across renders. Use a `key` prop based on
+ * provider to force a clean remount when the provider changes.
+ */
+const CXButtonProvider = ({ provider, enabled, suppressMerchantButton, onSwitchToAgent, onCXClose, children, }) => {
+    const unifiedCXButton = useUnifiedCXButton({
+        provider,
+        enabled,
+        suppressMerchantButton,
+        onSwitchToAgent,
+        onCXClose,
+    });
+    const { isSwitchEnabled, toggle } = unifiedCXButton ?? {};
+    return _jsx(_Fragment, { children: children({ isSwitchEnabled, toggle }) });
+};
+const FloatingChatWidgetHandler = (props) => {
+    const { previewButtonOnly, previewChatAlwaysOpen } = props;
+    const salesAgentData = useSalesAgent();
+    const { trackWidgetInteraction } = useWidgetInteraction();
+    const { userHasInteractedValue } = useGetWidgetStatus();
+    // TODO: Get hardcopy
+    const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
+    const { customerServiceIntegration, floatingButton, floatingChat } = uiConfig ?? {};
+    const cxProvider = customerServiceIntegration?.provider ??
+        CustomerServiceType.unsupported;
+    // TODO: Get hardcopy content
+    const { isOpen, openChat, closeChat, onHover } = useChatToggle();
+    const [isCXOpen, setIsCXOpen] = useState(false);
+    const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
+    // Reset CX open state when the envive widget is reopened
+    useEffect(() => {
+        if (isOpen)
+            setIsCXOpen(false);
+    }, [isOpen]);
+    const handleClose = (type) => {
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.FLOATING_CHAT,
+                widget_interaction: WidgetInteractionType.WIDGET_COLLAPSED,
+                widget_interaction_data: {
+                    widget_collapsed: type,
+                },
+            },
+        });
+    };
+    const { shouldShowFloatingButton } = useFloatingButtonVisibility({
+        floatingButtonShowConfig: floatingButton?.showOption,
+        isChatOpen: isOpen,
+        userHasInteracted: userHasInteractedValue,
+    });
+    // Override isOpen for preview modes
+    const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
+    const effectiveShouldRenderFloatingButton = !effectiveIsOpen && shouldShowFloatingButton;
+    const buttonShouldRender = previewButtonOnly
+        ? true
+        : effectiveShouldRenderFloatingButton && !isCXOpen;
+    const theme = useMemo(() => {
+        if (isUiConfigLoading || !uiConfig) {
+            return Theme.STANDARD;
+        }
+        return uiConfig?.lookAndFeel?.theme ?? Theme.GLOBAL_CUSTOM;
+    }, [isUiConfigLoading, uiConfig]);
+    useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
+    const { trackEvent } = useAmplitude();
+    const hasTrackedEvent = useRef(false);
+    // When we add support for initially hidden floating buttons, we will need to update this to handle that case
+    useEffect(() => {
+        if (buttonShouldRender && !hasTrackedEvent.current) {
+            trackEvent({
+                eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                eventProps: {
+                    widget_config_id: 'floating-button',
+                    widget_type: WidgetTypeV3.FloatingButtonV3,
+                },
+            });
+            hasTrackedEvent.current = true;
+        }
+    }, [trackEvent, buttonShouldRender]);
+    return (_jsx(CXButtonProvider, { provider: cxProvider, enabled: customerServiceIntegration?.enabled ?? false, suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton ?? false, onSwitchToAgent: () => setIsCXOpen(true), onCXClose: () => setIsCXOpen(false), children: ({ isSwitchEnabled, toggle }) => (_jsxs(_Fragment, { children: [!previewButtonOnly && (_jsx(FloatingChatOverlay, { isOpened: effectiveIsOpen, isResultsModalOpen: isResultsModalOpen, onClose: previewChatAlwaysOpen
+                        ? () => { }
+                        : () => {
+                            closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
+                            handleClose({
+                                collapse_source: 'body_click',
+                            });
+                        }, previewMode: !!previewChatAlwaysOpen, children: _jsx(Suspense, { children: _jsx(FloatingChat, { setIsResultsModalOpen: setIsResultsModalOpen, theme: theme, salesAgentData: salesAgentData, hardcopyContent: hardcopyContent, floatingChatConfig: uiConfig?.floatingChat ?? {}, lookAndFeelConfig: uiConfig?.lookAndFeel ?? {}, isCXButtonSwitchEnabled: !!isSwitchEnabled?.(), isFloatingChatOpen: effectiveIsOpen, onToggleCXButton: toggle, debugBar: _jsx(DebugBar, {}), onSwipeClose: previewChatAlwaysOpen
+                                ? () => { }
+                                : () => {
+                                    closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+                                    handleClose({
+                                        collapse_source: 'swipe',
+                                    });
+                                }, onClose: previewChatAlwaysOpen
+                                ? () => { }
+                                : () => {
+                                    closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+                                    handleClose({
+                                        collapse_source: 'close_button',
+                                    });
+                                } }) }) })), buttonShouldRender && (_jsx(FloatingButton, { id: FLOATING_BUTTON_ID, variant: floatingButton?.style, mode: floatingButton?.mode, backgroundColor: floatingButton?.backgroundColor, onClick: previewButtonOnly
+                        ? () => { }
+                        : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON), onMouseOver: onHover, customIcon: floatingButton?.iconSVGSrc, show: floatingButton?.showOption, location: floatingButton?.position, hasInteractionHappened: userHasInteractedValue, ariaLabel: "Open chat", previewMode: !!previewButtonOnly }))] })) }, cxProvider));
+};
+const FloatingChatWidgetWithBaseWidget = withBaseWidget(FloatingChatWidgetHandler);
+export const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen, } = {}) => {
+    return (_jsx(FloatingChatWidgetWithBaseWidget, { widgetType: WidgetTypeV3.FloatingChatV3, widgetConfigId: "fake-widget-config-id", previewButtonOnly: previewButtonOnly, previewChatAlwaysOpen: previewChatAlwaysOpen }));
+};
+FloatingChatWidget.displayName = 'FloatingChatWidget';

package/dist/src/widgets/FloatingChatWidget/__tests__/FloatingChatWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/widgets/FloatingChatWidget/__tests__/FloatingChatWidget.test.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, 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 { FloatingChatWidget } from '../FloatingChatWidget';
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+vi.mock('@envive-ai/react-toolkit-v3/FloatingButton', () => ({
+    FloatingButton: () => _jsx("div", { "data-testid": "floating-button", children: "Floating Button" }),
+}));
+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({
+            floatingButton: { showOption: 'always', position: 'bottom-right' },
+            floatingChat: {},
+            lookAndFeel: {},
+        }),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
+    useSalesAgent: () => ({}),
+}));
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+    useChatToggle: () => ({
+        isOpen: false,
+        openChat: vi.fn(),
+        closeChat: vi.fn(),
+    }),
+}));
+vi.mock('../hooks/useFloatingButtonVisibility', () => ({
+    useFloatingButtonVisibility: () => ({
+        shouldShowFloatingButton: true,
+    }),
+}));
+vi.mock('../hooks/useAutoPopup', () => ({
+    useAutoPopup: () => { },
+}));
+vi.mock('../../hooks/useGetWidgetStatus', () => ({
+    default: () => ({
+        userHasInteractedValue: false,
+    }),
+}));
+vi.mock('src/debug/debugBar', () => ({
+    DebugBar: () => null,
+}));
+vi.mock('../../CXIntegration/hooks/useUnifiedCXButton', () => ({
+    useUnifiedCXButton: () => ({
+        isSwitchEnabled: () => false,
+        toggle: vi.fn(),
+    }),
+}));
+describe('FloatingChatWidget analytics', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockGetHardcopy.mockResolvedValue({ language: 'en', values: {} });
+    });
+    it('should track ChatComponentVisible when floating button is shown', async () => {
+        render(_jsx(FloatingChatWidget, { previewButtonOnly: true }));
+        await waitFor(() => {
+            expect(mockTrackEvent).toHaveBeenCalledWith({
+                eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                eventProps: {
+                    widget_config_id: 'floating-button',
+                    widget_type: WidgetTypeV3.FloatingButtonV3,
+                },
+            });
+        }, { timeout: 3000 });
+    }, 5000);
+});

package/dist/src/widgets/FloatingChatWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const FLOATING_BUTTON_ID = "envive-ai-floating-button";

package/dist/src/widgets/FloatingChatWidget/constants.js

@@ -0,0 +1 @@
+export const FLOATING_BUTTON_ID = 'envive-ai-floating-button';

package/dist/src/widgets/FloatingChatWidget/hooks/useAutoPopup.d.ts

@@ -0,0 +1,4 @@
+import { AutoPopupConfig } from '@envive-ai/react-hooks/contexts/typesV3';
+export declare const useAutoPopup: ({ autoPopupConfig }: {
+    autoPopupConfig?: AutoPopupConfig;
+}) => void;

package/dist/src/widgets/FloatingChatWidget/hooks/useAutoPopup.js

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { ChatElementDisplayLocationV3, FeatureGates, } from '@envive-ai/react-hooks/application/models';
+export const useAutoPopup = ({ autoPopupConfig }) => {
+    const { isOpen, openChat } = useChatToggle();
+    const { featureFlagService } = useFeatureFlagService();
+    const hasBeenOpenedRef = useRef(false);
+    const autoPopupTimerRef = useRef(null);
+    const isReferrerBasedPromptEnabled = useMemo(() => featureFlagService.isFeatureGateEnabled(FeatureGates.IsReferrerBasedPromptEnabled), [featureFlagService]);
+    useEffect(() => {
+        if (!hasBeenOpenedRef.current && isOpen) {
+            hasBeenOpenedRef.current = true;
+        }
+    }, [isOpen]);
+    const openChatSafely = useCallback((triggerLocation) => {
+        if (!hasBeenOpenedRef.current) {
+            hasBeenOpenedRef.current = true;
+            openChat(triggerLocation);
+        }
+    }, [openChat]);
+    useEffect(() => {
+        const cleanup = () => {
+            if (autoPopupTimerRef.current) {
+                clearTimeout(autoPopupTimerRef.current);
+            }
+        };
+        if (!autoPopupConfig || hasBeenOpenedRef.current) {
+            return cleanup;
+        }
+        for (const trigger of autoPopupConfig.triggers) {
+            if (trigger.trigger.type === 'referrer') {
+                if (!isReferrerBasedPromptEnabled) {
+                    break;
+                }
+                const utmSource = new URLSearchParams(window.location.search).get('utm_source');
+                if (trigger.trigger.referrers.includes(utmSource)) {
+                    autoPopupTimerRef.current = setTimeout(() => {
+                        openChatSafely(ChatElementDisplayLocationV3.REFERRER_BASED_PROMPT);
+                    }, trigger.delay);
+                }
+            }
+            if (trigger.trigger.type === 'automatic') {
+                autoPopupTimerRef.current = setTimeout(() => {
+                    openChatSafely(ChatElementDisplayLocationV3.AUTOMATIC_PROMPT);
+                }, trigger.delay);
+            }
+        }
+        return cleanup;
+    }, [autoPopupConfig, isOpen, isReferrerBasedPromptEnabled, openChatSafely]);
+};

package/dist/src/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.d.ts

@@ -0,0 +1,11 @@
+import { FloatingButtonShow } from '@envive-ai/react-toolkit-v3/FloatingButton';
+export interface UseFloatingButtonVisibilityProps {
+    floatingButtonShowConfig?: FloatingButtonShow;
+    isChatOpen: boolean;
+    userHasInteracted: boolean;
+}
+export interface UseFloatingButtonVisibilityReturn {
+    shouldShowFloatingButton: boolean;
+    isSalesAgentEnabled: boolean;
+}
+export declare const useFloatingButtonVisibility: ({ floatingButtonShowConfig, isChatOpen, userHasInteracted, }: UseFloatingButtonVisibilityProps) => UseFloatingButtonVisibilityReturn;

package/dist/src/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.js

@@ -0,0 +1,21 @@
+import { FeatureGates } from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { featureFlagServiceAtom } from '@envive-ai/react-hooks/atoms/org';
+import { FloatingButtonShow } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import { useAtom, useAtomValue } from 'jotai';
+import { useMemo } from 'react';
+export const useFloatingButtonVisibility = ({ floatingButtonShowConfig = FloatingButtonShow.ALWAYS, isChatOpen, userHasInteracted, }) => {
+    const featureFlagService = useAtomValue(featureFlagServiceAtom);
+    const [variantInfo] = useAtom(variantInfoAtom);
+    const internalfloatingButtonShowConfig = variantInfo.floatingButtonOverride ?? floatingButtonShowConfig;
+    const isSalesAgentEnabled = useMemo(() => featureFlagService?.featureFlagService?.isFeatureGateEnabled(FeatureGates.IsSalesAgentEnabled), [featureFlagService]);
+    const shouldShowFloatingButton = (isSalesAgentEnabled || isSalesAgentEnabled === undefined) &&
+        !isChatOpen &&
+        (internalfloatingButtonShowConfig === FloatingButtonShow.ALWAYS ||
+            (internalfloatingButtonShowConfig === FloatingButtonShow.POST_INTERACTION &&
+                userHasInteracted));
+    return {
+        shouldShowFloatingButton,
+        isSalesAgentEnabled,
+    };
+};

package/dist/src/widgets/FloatingChatWidget/index.d.ts

@@ -0,0 +1,4 @@
+import { FloatingChatWidget } from './FloatingChatWidget';
+export { FloatingChatWidget };
+export type { FloatingChatWidgetProps } from './FloatingChatWidget';
+export { FLOATING_BUTTON_ID } from './constants';

package/dist/src/widgets/FloatingChatWidget/index.js

@@ -0,0 +1,3 @@
+import { FloatingChatWidget } from './FloatingChatWidget';
+export { FloatingChatWidget };
+export { FLOATING_BUTTON_ID } from './constants';

package/dist/src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.d.ts

@@ -0,0 +1,12 @@
+import { BaseWidgetProps } from 'src/hocs/withBaseWidget';
+export declare const FullPageSalesAgentBaseWidget: {
+    (props: BaseWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface FullPageSalesAgentBaseWidgetProps {
+    widgetConfigId: string;
+}
+export declare const FullPageSalesAgentWidget: {
+    ({ widgetConfigId }: FullPageSalesAgentBaseWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WidgetTypeV3, } from '@envive-ai/react-hooks/contexts/typesV3';
+import { FullPageSalesAgent } from '@envive-ai/react-toolkit-v3/FullPageSalesAgent';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { withBaseWidget } from 'src/hocs/withBaseWidget';
+const FullPageSalesAgentHandler = ({ uiConfig, hardcopyContent, widgetConfig, }) => {
+    const { headerContainer, autoHeight } = widgetConfig || {};
+    return (_jsx(FullPageSalesAgent, { theme: Theme.STANDARD, floatingChatConfig: uiConfig?.floatingChat ?? {}, lookAndFeelConfig: uiConfig?.lookAndFeel ?? {}, hardcopyContent: hardcopyContent, headerContainer: headerContainer, autoHeight: autoHeight }));
+};
+export const FullPageSalesAgentBaseWidget = withBaseWidget(FullPageSalesAgentHandler);
+export const FullPageSalesAgentWidget = ({ widgetConfigId }) => {
+    return (_jsx(FullPageSalesAgentBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.FullPageSalesAgentV3 }));
+};
+FullPageSalesAgentWidget.displayName = 'FullPageSalesAgentWidget';

package/dist/src/widgets/FullPageSalesAgentWidget/index.d.ts

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

package/dist/src/widgets/FullPageSalesAgentWidget/index.js

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

package/dist/src/widgets/ProductCardWidget/ProductCardWidget.d.ts

@@ -0,0 +1,7 @@
+export interface ProductCardWidgetProps {
+    widgetConfigId: string;
+}
+export declare const ProductCardWidget: {
+    ({ widgetConfigId }: ProductCardWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/widgets/ProductCardWidget/ProductCardWidget.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude, } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import { WidgetInteractionComponent, WidgetInteractionType, } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { ProductCard } from '@envive-ai/react-toolkit-v3/ProductCard';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback, useEffect } from 'react';
+import { withBaseWidget } from '../../hocs/withBaseWidget';
+import { getStringIdForText } from '../utils/functions';
+const mockPrompts = [
+    'Loading prompt 1',
+    'Loading prompt 2',
+    'Loading prompt 3',
+    'Loading prompt 4',
+    'Loading prompt 5',
+];
+const mockHeadline = 'Loading...';
+const mockAnimatedText = ['Loading...'];
+const ProductCardWidgetHandler = (props) => {
+    const { onTypedMessageSubmitted } = useSalesAgent();
+    const { openChat } = useChatToggle();
+    const { hardcopyContent, widgetConfig, isLoading } = props;
+    const hardCopyHeadline = hardcopyContent?.values?.headline;
+    const headline = isLoading ? mockHeadline : hardCopyHeadline || '';
+    const hardCopyAnimatedText = hardcopyContent?.values?.animatedText || [];
+    const animatedText = isLoading ? mockAnimatedText : hardCopyAnimatedText;
+    const hardCopyPrompts = hardcopyContent?.values?.prompts || [];
+    const prompts = isLoading ? mockPrompts : hardCopyPrompts;
+    const hardCopyPlaceholder = hardcopyContent?.values?.placeholder;
+    const placeholder = hardCopyPlaceholder;
+    const productCardWidgetConfig = widgetConfig;
+    const carouselId = productCardWidgetConfig?.contentId || '';
+    const promptButtonType = productCardWidgetConfig?.promptButtonType || PromptButtonVariant.LIGHT;
+    const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
+    const fallbackColor = productCardWidgetConfig?.fallbackColor;
+    const imageSrc = productCardWidgetConfig?.imageSrc || '';
+    const { trackEvent } = useAmplitude();
+    const { trackWidgetInteraction } = useWidgetInteraction();
+    const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, } = usePromptCarouselAnalytics(WidgetInteractionComponent.IMAGE_PROMPT_CARD, text => {
+        const rawValues = hardcopyContent?.rawValues;
+        return getStringIdForText(rawValues, text);
+    });
+    const { widgetConfigId } = props;
+    useEffect(() => {
+        trackEvent({
+            eventName: SpiffyMetricsEventName.ChatComponentVisible,
+            eventProps: {
+                widget_config_id: widgetConfigId,
+                widget_type: WidgetTypeV3.ProductCardV3,
+            },
+        });
+    }, [trackEvent, widgetConfigId]);
+    const handleSelect = useCallback((text) => {
+        const rawValues = hardcopyContent?.rawValues;
+        const stringId = getStringIdForText(rawValues, text);
+        trackEvent({
+            eventName: EnviveMetricsEventName.WidgetTextClicked,
+            eventProps: {
+                response_id: hardcopyContent?.responseId,
+                string_id: stringId,
+                text,
+            },
+        });
+        onTypedMessageSubmitted({
+            query: text,
+            userTyped: false,
+            displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON,
+        });
+        openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+        onSuggestionClick(text);
+    }, [hardcopyContent, onTypedMessageSubmitted, openChat, trackEvent]);
+    const handleInputClick = useCallback(() => {
+        openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+                widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+            },
+        });
+    }, [openChat]);
+    return (_jsx(ProductCard, { theme: Theme.GLOBAL_CUSTOM, imageSrc: imageSrc, fallbackColor: fallbackColor, headline: headline, italicizeHeadline: italicizeHeadline, animatedText: animatedText, prompts: prompts, promptButtonType: promptButtonType, carouselId: carouselId, placeholder: placeholder, textTypingDuration: 800, textTransition: 2000, onSelect: handleSelect, onDrag: onDrag, onHover: onHover, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onInputClick: handleInputClick }));
+};
+const ProductCardWidgetWithBaseWidget = withBaseWidget(ProductCardWidgetHandler);
+export const ProductCardWidget = ({ widgetConfigId }) => {
+    return (_jsx(ProductCardWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ProductCardV3 }));
+};
+ProductCardWidget.displayName = 'ProductCardWidget';

package/dist/src/widgets/ProductCardWidget/__tests__/ProductCardWidget.test.d.ts

@@ -0,0 +1 @@
+export {};