@envive-ai/react-hooks 0.3.13 → 0.3.15-beta.0

package/src/hooks/ChatToggle/useChatToggle.ts

@@ -1,16 +1,30 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { ChatElementDisplayLocationV3 } from 'src/application/models';
 import { chatAtom, chatOnToggleAtom } from 'src/atoms/chat';
-import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
-import { SpiffyMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
+import {
+  EnviveMetricsEventName,
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from 'src/contexts/amplitudeContext/amplitudeContext';
+import { useWidgetInteraction } from '../WidgetInteraction';
+import { WidgetInteractionComponent, WidgetInteractionType } from '../WidgetInteraction/types';
 
 export const useChatToggle = () => {
   const onToggle = useSetAtom(chatOnToggleAtom);
   const { isOpen } = useAtomValue(chatAtom);
   const { trackEvent } = useAmplitude();
+  const { trackWidgetInteraction } = useWidgetInteraction();
 
   const toggle = (triggerLocation: ChatElementDisplayLocationV3, triggerId?: string) => {
     if (!isOpen) {
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget: WidgetInteractionComponent.FLOATING_BUTTON,
+          widget_interaction: WidgetInteractionType.WIDGET_CLICKED,
+        },
+      });
+
       trackEvent({
         eventName: SpiffyMetricsEventName.ChatComponentExpanded,
         eventProps: {
@@ -21,6 +35,14 @@ export const useChatToggle = () => {
         },
       });
     } else {
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget: WidgetInteractionComponent.FLOATING_BUTTON,
+          widget_interaction: WidgetInteractionType.WIDGET_COLLAPSED,
+        },
+      });
+
       trackEvent({
         eventName: SpiffyMetricsEventName.ChatComponentCollapsed,
         eventProps: {
@@ -47,10 +69,21 @@ export const useChatToggle = () => {
     }
   };
 
+  const onHover = () => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FLOATING_BUTTON,
+        widget_interaction: WidgetInteractionType.WIDGET_HOVERED,
+      },
+    });
+  };
+
   return {
     toggle,
     isOpen,
     openChat,
     closeChat,
+    onHover,
   };
 };

package/src/hooks/WidgetInteraction/index.ts

@@ -0,0 +1 @@
+export * from './useWidgetInteraction';

package/src/hooks/WidgetInteraction/types.ts

@@ -0,0 +1,139 @@
+import { EnviveMetricsEventName, SpiffyMetricsEventName } from '../../contexts/amplitudeContext';
+
+export interface WidgetInteractionContext {
+  page_type: WidgetInteractionPageType;
+  page_id: string;
+}
+
+interface WidgetInteractionTrigger {
+  interaction_id?: string;
+  widget: WidgetInteractionComponent;
+  widget_interaction: WidgetInteractionType;
+  widget_interaction_data?: WidgetInteractionData | null;
+}
+
+export interface InternalWidgetInteraction {
+  eventName: SpiffyMetricsEventName | EnviveMetricsEventName;
+  context: WidgetInteractionContext;
+  trigger: WidgetInteractionTrigger;
+}
+
+export interface WidgetInteraction {
+  eventName: InternalWidgetInteraction['eventName'];
+  trigger: InternalWidgetInteraction['trigger'];
+}
+
+export enum WidgetInteractionPageType {
+  PDP = 'pdp',
+  PLP = 'plp',
+  HOMEPAGE = 'homepage',
+  SEARCH = 'search',
+  OTHER = 'other',
+  FULL_PAGE = 'full_page',
+}
+
+export enum WidgetInteractionComponent {
+  EMBEDDED_WIDGET = 'embedded_widget',
+  SUGGESTION_BAR = 'suggestion_bar',
+  FLOATING_BUTTON = 'floating_button',
+  SOCIAL_PROOF = 'social_proof',
+  CHAT_PREVIEW = 'chat_preview',
+  FLOATING_CHAT = 'floating_chat',
+  SINGLE_IMAGE_PROMPT = 'single_image_prompt',
+  IMAGE_PROMPT_CARD = 'image_prompt_card',
+  POST_INTERACTION_COMPARISON = 'post_interaction_comparison',
+  POST_INTERACTION_EMBEDDED = 'post_interaction_embedded',
+}
+
+export enum WidgetInteractionType {
+  QUERY_INPUT_CLICKED = 'query_input_clicked',
+  SUGGESTION_CLICKED = 'suggestion_clicked',
+  WIDGET_CLICKED = 'widget_clicked',
+  WIDGET_HOVERED = 'widget_hovered',
+  WIDGET_EXPANDED = 'widget_expanded',
+  WIDGET_COLLAPSED = 'widget_collapsed',
+  SUGGESTION_SCROLLED = 'suggestion_scrolled',
+  LINK_CLICKED = 'link_clicked',
+  PRODUCT_CARD_CLICKED = 'product_card_clicked',
+  TEXT_LINK_CLICKED = 'text_link_clicked',
+  ARTICLE_LINK_CLICKED = 'article_link_clicked',
+  REVIEW_CARD_CLICKED = 'review_card_clicked',
+  MESSAGE_SUBMITTED = 'message_submitted',
+  MANUAL_SCROLL_TO_BOTTOM = 'manual_scroll_to_bottom',
+}
+
+export type URL = {
+  url: string;
+};
+
+export type Product = {
+  product_id: string;
+};
+
+export type Review = {
+  review_id: string;
+};
+
+export type Suggestion = {
+  suggestion_id: string;
+};
+
+export type Request = {
+  request_text: string;
+};
+
+export type Collapse = {
+  collapse_source: 'close_button' | 'swipe' | 'body_click';
+};
+
+export type SuggestionScrolled = {
+  suggestion_scrolled: Suggestion;
+};
+
+export type SuggestionClicked = {
+  suggestion_clicked: Suggestion;
+};
+
+export type SuggestionHovered = {
+  suggestion_hovered: Suggestion;
+};
+
+export type LinkClicked = {
+  link_clicked: URL;
+};
+
+export type WidgetCollapsed = {
+  widget_collapsed: Collapse;
+};
+
+export type TextLinkClicked = {
+  text_link_clicked: URL;
+};
+
+export type ArticleLinkClicked = {
+  article_link_clicked: URL;
+};
+
+export type ProductCardClicked = {
+  product_card_clicked: Product;
+};
+
+export type ReviewCardClicked = {
+  review_card_clicked: Review;
+};
+
+export type MessageSubmitted = {
+  message_submitted: Request;
+};
+
+export type WidgetInteractionData =
+  | SuggestionScrolled
+  | SuggestionClicked
+  | SuggestionHovered
+  | LinkClicked
+  | WidgetCollapsed
+  | TextLinkClicked
+  | ArticleLinkClicked
+  | ProductCardClicked
+  | ReviewCardClicked
+  | MessageSubmitted;

package/src/hooks/WidgetInteraction/useWidgetInteraction.ts

@@ -0,0 +1,35 @@
+import { useAtomValue } from 'jotai';
+import { pageVariantInfoAtom } from 'src/atoms/app';
+import { useAmplitude } from 'src/contexts/amplitudeContext';
+import { PageVariantInfo } from 'src/contexts/pageContext/types';
+import { v4 as uuid } from 'uuid';
+import { InternalWidgetInteraction, WidgetInteraction } from './types';
+import { extractPageContext } from './utils';
+
+export const useWidgetInteraction = () => {
+  const { trackEvent } = useAmplitude();
+  const variantInfo = useAtomValue(pageVariantInfoAtom);
+
+  const trackWidgetInteraction = (props: WidgetInteraction) => {
+    if (props.trigger) {
+      props.trigger.interaction_id = props.trigger.interaction_id || getInteractionId();
+    }
+
+    const eventProps = {
+      ...props,
+      context: extractPageContext(variantInfo as PageVariantInfo),
+    } as InternalWidgetInteraction;
+
+    trackEvent({
+      eventName: props.eventName,
+      eventProps: { ...eventProps },
+    });
+  };
+
+  const getInteractionId = () => uuid();
+
+  return {
+    trackWidgetInteraction,
+    getInteractionId,
+  };
+};

package/src/hooks/WidgetInteraction/utils.ts

@@ -0,0 +1,44 @@
+import { VariantTypeEnum } from 'src/application/models';
+import {
+  FullPageSalesAgentVariantInfo,
+  HomeVariantInfo,
+  OtherVariantInfo,
+  PageVariantInfo,
+  PDPPageVariantInfo,
+  PLPPageVariantInfo,
+} from '../../contexts/pageContext/types';
+import { WidgetInteractionContext, WidgetInteractionPageType } from './types';
+
+export const extractPageContext = (
+  pageVariant: PageVariantInfo,
+): WidgetInteractionContext | null => {
+  switch (pageVariant.variantType) {
+    case VariantTypeEnum.Pdp:
+      return {
+        page_id: (pageVariant as PDPPageVariantInfo).productId,
+        page_type: WidgetInteractionPageType.PDP,
+      };
+    case VariantTypeEnum.Plp:
+      return {
+        page_id: (pageVariant as PLPPageVariantInfo).plpId,
+        page_type: WidgetInteractionPageType.PLP,
+      };
+    case VariantTypeEnum.Home:
+      return {
+        page_id: (pageVariant as HomeVariantInfo).url,
+        page_type: WidgetInteractionPageType.HOMEPAGE,
+      };
+    case VariantTypeEnum.Other:
+      return {
+        page_id: (pageVariant as OtherVariantInfo).url,
+        page_type: WidgetInteractionPageType.OTHER,
+      };
+    case VariantTypeEnum.FullPageSalesAgent:
+      return {
+        page_id: (pageVariant as FullPageSalesAgentVariantInfo).url,
+        page_type: WidgetInteractionPageType.FULL_PAGE,
+      };
+  }
+
+  return null;
+};

package/src/types/customerService.ts

@@ -11,6 +11,8 @@ export enum CustomerServiceType {
   gladly = 'gladly',
   richpanel = 'richpanel',
   zendesk = 'zendesk',
+  helpscout = 'helpscout',
+  talkdesk = 'talkdesk',
   eightByEight = '8x8',
   unsupported = 'unsupported',
 }