app-tutor-ai-consumer 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [1.21.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.20.0...v1.21.0) (2025-07-29)
+
+### Features
+
+- add DataHub Config ([745264a](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/745264a166e868884958abb19d0d720e06294ffe))
+
 # [1.20.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.19.0...v1.20.0) (2025-07-29)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -104,6 +104,7 @@
   },
   "dependencies": {
     "@hot-observability-js/react": "~1.1.0",
+    "@hotmart/event-agent-js": "~1.1.2",
     "@hotmart/sparkie": "~5.1.0",
     "@optimizely/react-sdk": "~3.2.4",
     "@tanstack/query-sync-storage-persister": "~5.80.7",

package/src/config/datahub/actions.ts

@@ -0,0 +1,10 @@
+export const DataHubActions = {
+  OPEN: 'open',
+  TRY: 'try',
+  CLICK: 'click',
+  CLOSE: 'close',
+  SELECT: 'select',
+  VIEW: 'view'
+} as const
+
+export type DataHubActionTypes = (typeof DataHubActions)[keyof typeof DataHubActions]

package/src/config/datahub/constants.ts

@@ -0,0 +1,43 @@
+export const DATA_VERSION = '1.0'
+
+export const EVENT_VERSION = '1.1'
+
+export const System = {
+  HOTMART_CLUB: 'hotmart_club'
+} as const
+
+export const ActionNames = {
+  CLICK_HOTMART_TUTOR: 'click_hotmart_tutor'
+} as const
+
+export const ScreenNames = {
+  NOT_APP_EVENT: 'NOT_APP_EVENT',
+  HOME_CONSUMER: 'HOME_CONSUMER'
+} as const
+
+export const Platform = {
+  WEB: 'WEB'
+} as const
+
+export const ResultType = {
+  SUCCESS: 'SUCCESSFUL',
+  FAILURE: 'FAILURE',
+  FAILURE_DESCRIPTION: 'NOT_FAILURE_RESULT_EVENT'
+} as const
+
+export const ComponentNames = {
+  BUTTON_LIKE_ANSWER: 'BUTTON_LIKE_ANSWER',
+  BUTTON_DISLIKE_ANSWER: 'BUTTON_DISLIKE_ANSWER'
+} as const
+
+export const ComponentSource = {
+  ACTION_BAR_STATUS: 'ACTION_BAR_STATUS'
+} as const
+
+export const ArrivedFrom = {
+  HOME: 'HOME'
+} as const
+
+export const PushKind = {
+  NOT_PUSH_EVENT: 'NOT_PUSH_EVENT'
+} as const

package/src/config/datahub/entities.ts

@@ -0,0 +1,4 @@
+export const DataHubEntities = {
+  ADMIN: 'admin',
+  HOME: 'home'
+} as const

package/src/config/datahub/index.ts

@@ -0,0 +1,5 @@
+export * from './constants'
+export * from './entities'
+export { default as DataHubService } from './service'
+export { default as DataHubStore } from './store'
+export * from './types'

package/src/config/datahub/schemas/base-schema.ts

@@ -0,0 +1,72 @@
+import { APP_VERSION } from '@/src/lib/utils'
+import { DataHubStore } from '..'
+import { Platform } from '../constants'
+import type {
+  ActionNamesType,
+  DataHubEntityTypes,
+  InitDataParams,
+  PlatformType,
+  SchemaType
+} from '../types'
+
+import { ClubVersion, UserRole } from './constants'
+import type { ClubVersionType, UserRoleType } from './types'
+
+abstract class BaseSchema implements SchemaType, InitDataParams {
+  appVersion: string
+  osVersion: string
+  platform: PlatformType
+  platformDetail: string
+
+  membershipId: string
+  membershipSlug: string
+  sessionId: string
+  ucode: string
+  userId: number
+
+  clubVersion: ClubVersionType
+  userRole: UserRoleType
+  url: string
+
+  abstract action: ActionNamesType
+  abstract entity: DataHubEntityTypes
+  abstract isLogged: boolean
+  abstract getDataHubEventData(): Record<string, unknown>
+
+  constructor() {
+    this.appVersion = APP_VERSION
+    this.clubVersion = ClubVersion.MEMBERSHIP
+    this.membershipId = DataHubStore.membershipId
+    this.membershipSlug = DataHubStore.membershipSlug
+    this.osVersion = DataHubStore.browserInfo.version ?? ''
+    this.platform = Platform.WEB
+    this.platformDetail = DataHubStore.browserInfo.name ?? ''
+    this.sessionId = DataHubStore.sessionId
+    this.ucode = DataHubStore.ucode
+    this.url = window.location.href
+    this.userId = DataHubStore.userId
+    this.userRole = UserRole.CONSUMER
+  }
+
+  prepare(): Record<string, unknown> {
+    return {
+      action: this.action,
+      entity: this.entity,
+      isLogged: this.isLogged,
+      appVersion: this.appVersion,
+      osVersion: this.osVersion,
+      platform: this.platform,
+      platformDetail: this.platformDetail,
+      membershipId: this.membershipId,
+      membershipSlug: this.membershipSlug,
+      sessionId: this.sessionId,
+      ucode: this.ucode,
+      userId: this.userId,
+      clubVersion: this.clubVersion,
+      userRole: this.userRole,
+      url: this.url
+    }
+  }
+}
+
+export default BaseSchema

package/src/config/datahub/schemas/constants.ts

@@ -0,0 +1,10 @@
+export const ClubVersion = {
+  MEMBERSHIP: 'MEMBERSHIP'
+} as const
+
+export const UserRole = {
+  OWNER: 'OWNER',
+  MODERATOR: 'MODERATOR',
+  ADMIN: 'ADMIN',
+  CONSUMER: 'CONSUMER'
+} as const

package/src/config/datahub/schemas/index.ts

@@ -0,0 +1,2 @@
+export * from './constants'
+export * from './types'

package/src/config/datahub/schemas/tutor/__tests__/click-hotmart-tutor.spec.ts

@@ -0,0 +1,81 @@
+import { chance } from '@/src/config/tests'
+import { DataHubStore } from '../../..'
+import { ActionNames, ComponentNames, ScreenNames } from '../../../constants'
+import { DataHubEntities } from '../../../entities'
+import { UserRole } from '../../constants'
+import ClickHotmartTutor from '../click-hotmart-tutor'
+import { ButtonReactions } from '../constants'
+
+describe('ClickHotmartTutor', () => {
+  it('should send the event with the correct structure', () => {
+    const event = {
+      reactionType: ButtonReactions.DISLIKE,
+      messageId: chance.guid(),
+      hasAccess: true,
+      isLogged: true
+    }
+
+    expect(new ClickHotmartTutor(event).getDataHubEventData()).toMatchObject({
+      action: ActionNames.CLICK_HOTMART_TUTOR,
+      appVersion: '',
+      clubVersion: 'MEMBERSHIP',
+      componentName: ComponentNames.BUTTON_DISLIKE_ANSWER,
+      entity: DataHubEntities.HOME,
+      hasAccess: event.hasAccess,
+      isLogged: event.isLogged,
+      membershipId: 'UNDEFINED',
+      membershipSlug: 'UNDEFINED',
+      messageId: event.messageId,
+      osVersion: '537.36',
+      platform: 'WEB',
+      platformDetail: 'WebKit',
+      screenName: ScreenNames.HOME_CONSUMER,
+      sessionId: 'UNDEFINED',
+      ucode: 'UNDEFINED',
+      url: 'http://localhost:3000/',
+      userId: 0,
+      userRole: UserRole.CONSUMER
+    })
+  })
+
+  it('should send reflect DataHubStore current state when sending the event', () => {
+    const event = {
+      reactionType: ButtonReactions.LIKE,
+      messageId: chance.guid(),
+      hasAccess: true,
+      isLogged: true
+    }
+
+    const store = {
+      ucode: chance.guid(),
+      membershipId: chance.guid(),
+      membershipSlug: chance.animal(),
+      sessionId: chance.guid(),
+      userId: chance.integer()
+    }
+
+    DataHubStore.initData(store)
+
+    expect(new ClickHotmartTutor(event).getDataHubEventData()).toMatchObject({
+      action: ActionNames.CLICK_HOTMART_TUTOR,
+      appVersion: '',
+      clubVersion: 'MEMBERSHIP',
+      componentName: ComponentNames.BUTTON_LIKE_ANSWER,
+      entity: DataHubEntities.HOME,
+      hasAccess: event.hasAccess,
+      isLogged: event.isLogged,
+      membershipId: store.membershipId,
+      membershipSlug: store.membershipSlug,
+      messageId: event.messageId,
+      osVersion: '537.36',
+      platform: 'WEB',
+      platformDetail: 'WebKit',
+      screenName: ScreenNames.HOME_CONSUMER,
+      sessionId: store.sessionId,
+      ucode: store.ucode,
+      url: 'http://localhost:3000/',
+      userId: store.userId,
+      userRole: UserRole.CONSUMER
+    })
+  })
+})

package/src/config/datahub/schemas/tutor/click-hotmart-tutor.ts

@@ -0,0 +1,61 @@
+import { ActionNames, ComponentNames, ScreenNames } from '../../constants'
+import { DataHubEntities } from '../../entities'
+import type {
+  ActionNamesType,
+  ComponentNamesType,
+  DataHubEntityTypes,
+  ScreenNamesType
+} from '../../types'
+import BaseSchema from '../base-schema'
+
+import { ButtonReactions } from './constants'
+import type { ButtonReactionsType } from './types'
+
+class ClickHotmartTutor extends BaseSchema {
+  private componentName: ComponentNamesType
+  private screenName: ScreenNamesType
+  private messageId: string
+  private hasAccess: boolean
+
+  action: ActionNamesType
+  entity: DataHubEntityTypes
+  isLogged: boolean
+
+  constructor({
+    reactionType,
+    messageId,
+    hasAccess = true,
+    isLogged = true
+  }: {
+    reactionType: ButtonReactionsType
+    messageId: string
+    hasAccess?: boolean
+    isLogged?: boolean
+  }) {
+    super()
+
+    this.action = ActionNames.CLICK_HOTMART_TUTOR
+    this.entity = DataHubEntities.HOME
+
+    this.componentName =
+      reactionType === ButtonReactions.LIKE
+        ? ComponentNames.BUTTON_LIKE_ANSWER
+        : ComponentNames.BUTTON_DISLIKE_ANSWER
+    this.screenName = ScreenNames.HOME_CONSUMER
+    this.messageId = messageId
+    this.hasAccess = hasAccess
+    this.isLogged = isLogged
+  }
+
+  getDataHubEventData(): Record<string, unknown> {
+    return {
+      ...super.prepare(),
+      componentName: this.componentName,
+      screenName: this.screenName,
+      messageId: this.messageId,
+      hasAccess: this.hasAccess
+    }
+  }
+}
+
+export default ClickHotmartTutor

package/src/config/datahub/schemas/tutor/constants.ts

@@ -0,0 +1,4 @@
+export const ButtonReactions = {
+  LIKE: 'LIKE',
+  DISLIKE: 'DISLIKE'
+}

package/src/config/datahub/schemas/tutor/index.ts

@@ -0,0 +1,3 @@
+export { default as ClickHotmartTutor } from './click-hotmart-tutor'
+export * from './constants'
+export * from './types'

package/src/config/datahub/schemas/tutor/types.ts

@@ -0,0 +1,3 @@
+import type { ButtonReactions } from './constants'
+
+export type ButtonReactionsType = (typeof ButtonReactions)[keyof typeof ButtonReactions]

package/src/config/datahub/schemas/types.ts

@@ -0,0 +1,19 @@
+import type { ClubVersion, UserRole } from './constants'
+
+export type UserRoleType = (typeof UserRole)[keyof typeof UserRole]
+
+export type ClubVersionType = (typeof ClubVersion)[keyof typeof ClubVersion]
+
+export type SchemaBasedProps = {
+  membershipSlug?: string
+  membershipId?: string
+  ucode?: string
+  userId?: number
+  hasAccess?: boolean
+}
+
+export type BaseSchemaProps = {
+  membershipId: string
+  membershipSlug: string
+  userId: string
+}

package/src/config/datahub/service.ts

@@ -0,0 +1,32 @@
+import EventAgent from '@hotmart/event-agent-js'
+
+import { productionMode } from '@/src/lib/utils'
+
+import { DATA_VERSION, EVENT_VERSION, System } from './constants'
+import type { SendEventParams } from './types'
+
+EventAgent.mode = productionMode ? 'production' : 'staging'
+
+class DataHubService {
+  sendEvent({
+    schema,
+    dataVersion = DATA_VERSION,
+    eventVersion = EVENT_VERSION,
+    system = System.HOTMART_CLUB
+  }: SendEventParams): void {
+    const dataHubEvent = {
+      system,
+      action: schema.action,
+      entity: schema.entity,
+      data_version: dataVersion,
+      event_version: eventVersion,
+      event: schema.getDataHubEventData()
+    }
+
+    if (!productionMode) console.warn('DataHub event dispatched: ', dataHubEvent)
+
+    void EventAgent.send(dataHubEvent)
+  }
+}
+
+export default new DataHubService()

package/src/config/datahub/store.ts

@@ -0,0 +1,87 @@
+import { UAParser } from 'ua-parser-js'
+
+import type { InitDataParams } from './types'
+
+class DataHubStore {
+  private instanceObj?: {
+    userAgentParser: UAParser.IResult
+    browserInfo: UAParser.IBrowser
+    deviceType: string
+    deviceVendor: UAParser.IDevice['vendor']
+    deviceModel: UAParser.IDevice['model']
+    ucode: string
+    sessionId: string
+    userId: number
+    membershipSlug: string
+    membershipId: string
+  }
+
+  private get instance() {
+    return this.instanceObj ?? this.resetData()
+  }
+
+  initData({ ucode, membershipId, membershipSlug, sessionId, userId }: InitDataParams) {
+    this.instance.userAgentParser = UAParser(navigator.userAgent)
+    this.instance.browserInfo = this.instance.userAgentParser.browser
+    this.instance.deviceType =
+      this.instance.userAgentParser.device?.type?.toUpperCase() || 'DESKTOP'
+    this.instance.deviceVendor = this.instance.userAgentParser.device?.vendor?.toUpperCase() ?? ''
+    this.instance.deviceModel = this.instance.userAgentParser.device?.model?.toUpperCase() ?? ''
+    this.instance.ucode = ucode
+    this.instance.sessionId = sessionId
+    this.instance.userId = userId || 0
+    this.instance.membershipSlug = membershipSlug
+    this.instance.membershipId = membershipId
+  }
+
+  resetData() {
+    const userAgent = UAParser(navigator.userAgent)
+
+    const clearData = {
+      userAgentParser: userAgent,
+      browserInfo: userAgent.browser,
+      deviceType: userAgent.device.type?.toUpperCase() || 'DESKTOP',
+      deviceVendor: userAgent.device.vendor,
+      deviceModel: userAgent.device.model,
+      ucode: 'UNDEFINED',
+      sessionId: 'UNDEFINED',
+      userId: 0,
+      membershipSlug: 'UNDEFINED',
+      membershipId: 'UNDEFINED'
+    }
+
+    this.instanceObj = clearData
+
+    return clearData
+  }
+
+  get userAgentParser() {
+    return this.instance.userAgentParser
+  }
+
+  get browserInfo() {
+    return this.instance.browserInfo
+  }
+
+  get ucode() {
+    return this.instance.ucode
+  }
+
+  get sessionId() {
+    return this.instance.sessionId
+  }
+
+  get userId() {
+    return this.instance.userId
+  }
+
+  get membershipSlug() {
+    return this.instance.membershipSlug
+  }
+
+  get membershipId() {
+    return this.instance.membershipId
+  }
+}
+
+export default new DataHubStore()

package/src/config/datahub/types.ts

@@ -0,0 +1,35 @@
+import type { ActionNames, ComponentNames, Platform, ScreenNames, System } from './constants'
+import type { DataHubEntities } from './entities'
+
+export type ActionNamesType = (typeof ActionNames)[keyof typeof ActionNames]
+export type DataHubEntityTypes = (typeof DataHubEntities)[keyof typeof DataHubEntities]
+export type PlatformType = (typeof Platform)[keyof typeof Platform]
+export type SystemType = (typeof System)[keyof typeof System]
+export type ComponentNamesType = (typeof ComponentNames)[keyof typeof ComponentNames]
+export type ScreenNamesType = (typeof ScreenNames)[keyof typeof ScreenNames]
+
+export type SchemaType = {
+  action: ActionNamesType
+  entity: DataHubEntityTypes
+  osVersion: string
+  appVersion: string
+  platformDetail: string
+  platform: PlatformType
+  prepare: () => Record<string, unknown>
+  getDataHubEventData: () => Record<string, unknown>
+}
+
+export type SendEventParams = {
+  schema: SchemaType
+  system?: SystemType
+  dataVersion?: string
+  eventVersion?: string
+}
+
+export type InitDataParams = {
+  ucode: string
+  sessionId: string
+  userId: number
+  membershipSlug: string
+  membershipId: string
+}

package/src/development-bootstrap.tsx

@@ -35,6 +35,7 @@ if (devMode) {
       namespace: 'tutor_v1-2',
       author: 'user',
       clubName: 'comofazerumvideodeteste',
+      membershipSlug: 'comofazerumvideodeteste',
       productName: 'Curso de Assinatura',
       productId: 4266504,
       sessionId: v4(),

package/src/modules/messages/components/message-actions/message-actions.spec.tsx

@@ -0,0 +1,53 @@
+import { DataHubService } from '@/src/config/datahub'
+import { ButtonReactions, ClickHotmartTutor } from '@/src/config/datahub/schemas/tutor'
+import { render, screen } from '@/src/config/tests'
+import ParsedMessageBuilder from '../../__tests__/parsed-message.builder'
+
+import MessageActions from './message-actions'
+
+describe('<MessageActions/>', () => {
+  const defaultProps = {
+    message: new ParsedMessageBuilder()
+  }
+
+  const renderComponent = (props = defaultProps) => render(<MessageActions {...props} />)
+
+  it('should render without errors', () => {
+    renderComponent()
+
+    expect(screen.getByRole('button', { name: /general.buttons.like/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /general.buttons.dislike/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /general.buttons.copy/i })).toBeInTheDocument()
+  })
+
+  it('should copy the current message text when clicking the copy button', async () => {
+    vi.spyOn(navigator.clipboard, 'writeText').mockImplementation(() => Promise.resolve(undefined))
+
+    const { user } = renderComponent()
+
+    const copyBtn = screen.getByRole('button', { name: /general.buttons.copy/i })
+
+    await user.click(copyBtn)
+
+    expect(navigator.clipboard.writeText).toBeCalledTimes(1)
+    expect(navigator.clipboard.writeText).toHaveBeenNthCalledWith(1, defaultProps.message.text)
+  })
+
+  it('should send like event when clicking the like button', async () => {
+    vi.spyOn(DataHubService, 'sendEvent').mockImplementation(() => undefined)
+
+    const { user } = renderComponent()
+
+    const likeBtn = screen.getByRole('button', { name: /general.buttons.like/i })
+
+    await user.click(likeBtn)
+
+    expect(DataHubService.sendEvent).toBeCalledTimes(1)
+    expect(DataHubService.sendEvent).toHaveBeenNthCalledWith(1, {
+      schema: new ClickHotmartTutor({
+        messageId: defaultProps.message.id,
+        reactionType: ButtonReactions.LIKE
+      })
+    })
+  })
+})

package/src/modules/messages/components/message-actions/message-actions.tsx

@@ -3,6 +3,9 @@ import dayjs from 'dayjs'
 import type { CSSProperties } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { DataHubService } from '@/src/config/datahub'
+import type { ButtonReactionsType } from '@/src/config/datahub/schemas/tutor'
+import { ButtonReactions, ClickHotmartTutor } from '@/src/config/datahub/schemas/tutor'
 import { Button, Icon } from '@/src/lib/components'
 import type { ParsedMessage } from '../../types'
 
@@ -14,7 +17,8 @@ export type MessageActionsProps = {
 
 function MessageActions({ message, className, showActions = false }: MessageActionsProps) {
   const { t } = useTranslation()
-  const copyToClipboard = () => {
+
+  const copyToClipboard = (): void => {
     if (!message.text) return
 
     navigator.clipboard.writeText(message.text).catch((err) => {
@@ -22,6 +26,11 @@ function MessageActions({ message, className, showActions = false }: MessageActi
     })
   }
 
+  const handleReaction = (reactionType: ButtonReactionsType = ButtonReactions.LIKE): void => {
+    const schema = new ClickHotmartTutor({ messageId: message.id, reactionType })
+    return DataHubService.sendEvent({ schema })
+  }
+
   return (
     <div className={className}>
       <span className='text-xs tracking-wide'>
@@ -32,10 +41,13 @@ function MessageActions({ message, className, showActions = false }: MessageActi
         className={clsx('flex flex-nowrap gap-2 text-neutral-600', {
           hidden: !showActions
         })}>
-        <Button aria-label={t('general.buttons.like')}>
+        <Button onClick={() => handleReaction()} aria-label={t('general.buttons.like')}>
           <Icon name='like' className='h-3 w-3.5' />
         </Button>
-        <Button className='rotate-180 scale-x-[-1]' aria-label={t('general.buttons.dislike')}>
+        <Button
+          className='rotate-180 scale-x-[-1]'
+          onClick={() => handleReaction(ButtonReactions.DISLIKE)}
+          aria-label={t('general.buttons.dislike')}>
           <Icon name='like' className='h-3 w-3.5' />
         </Button>
         <Button onClick={copyToClipboard} aria-label={t('general.buttons.copy')}>

package/src/modules/widget/hooks/use-init-widget/use-init-widget.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 
+import { DataHubStore } from '@/src/config/datahub'
 import { initDayjs } from '@/src/config/dayjs'
 import { initAxios } from '@/src/config/request/api'
 import { SparkieService } from '@/src/modules/sparkie'
@@ -10,6 +11,13 @@ const init = async (settings: WidgetSettingProps) => {
   try {
     initAxios(settings.hotmartToken)
     await initDayjs(settings.locale)
+    DataHubStore.initData({
+      ucode: settings.user?.ucode ?? '',
+      membershipId: settings.membershipId ?? '',
+      membershipSlug: settings.membershipSlug ?? '',
+      sessionId: settings.sessionId,
+      userId: Number(settings.userId)
+    })
     await SparkieService.initSparkie({
       token: settings?.hotmartToken,
       skipPresenceSetup: true,