app-tutor-ai-consumer 1.19.0 → 1.21.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [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
+
+- add generic error page ([2ac19d0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/2ac19d0d033731508580778dcf679fb9c71ca24f))
+
 # [1.19.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.18.2...v1.19.0) (2025-07-29)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.19.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/public/assets/svg/error-dark.svg

@@ -0,0 +1,27 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.5" cx="80" cy="80" r="80" fill="#282C2F"/>
+<g filter="url(#filter0_d_22198_69476)">
+<path d="M32.8 47.9999C32.8 47.1162 33.5164 46.3999 34.4 46.3999H125.6C126.484 46.3999 127.2 47.1162 127.2 47.9999V55.9999H32.8V47.9999Z" fill="#464B52"/>
+<path d="M32.8 56H127.2V112C127.2 112.884 126.484 113.6 125.6 113.6H34.4001C33.5164 113.6 32.8 112.884 32.8 112V56Z" fill="white"/>
+<rect width="11.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 74.3999 91.2)" fill="#C9CED4"/>
+<rect width="4" height="4" rx="2" transform="matrix(1 0 0 -1 68 81.6001)" fill="#C9CED4"/>
+<rect width="4" height="4" rx="2" transform="matrix(1 0 0 -1 88 81.6001)" fill="#C9CED4"/>
+</g>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 36 52.8)" fill="#E37570"/>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 41.6001 52.8)" fill="#EFBA0F"/>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 47.2 52.8)" fill="#4ACC82"/>
+<path d="M141.143 46.1714C141.143 53.9981 134.798 60.3429 126.971 60.3429C119.145 60.3429 112.8 53.9981 112.8 46.1714C112.8 38.3447 119.145 32 126.971 32C134.798 32 141.143 38.3447 141.143 46.1714Z" fill="#5981E3"/>
+<path d="M128.297 49.5064H125.566L124.993 38.562H128.87L128.297 49.5064ZM124.947 53.3381C124.947 52.6345 125.138 52.145 125.52 51.8697C125.903 51.579 126.369 51.4337 126.92 51.4337C127.455 51.4337 127.914 51.579 128.297 51.8697C128.679 52.145 128.87 52.6345 128.87 53.3381C128.87 54.0111 128.679 54.5006 128.297 54.8065C127.914 55.0971 127.455 55.2425 126.92 55.2425C126.369 55.2425 125.903 55.0971 125.52 54.8065C125.138 54.5006 124.947 54.0111 124.947 53.3381Z" fill="white"/>
+<defs>
+<filter id="filter0_d_22198_69476" x="24.8" y="44.7999" width="110.4" height="83.2002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="4.8" operator="erode" in="SourceAlpha" result="effect1_dropShadow_22198_69476"/>
+<feOffset dy="6.4"/>
+<feGaussianBlur stdDeviation="6.4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22198_69476"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22198_69476" result="shape"/>
+</filter>
+</defs>
+</svg>

package/public/assets/svg/error-light.svg

@@ -0,0 +1,27 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.5" cx="80" cy="80" r="80" fill="#E6E9ED"/>
+<g filter="url(#filter0_d_22198_92633)">
+<path d="M32.8 47.9999C32.8 47.1162 33.5164 46.3999 34.4 46.3999H125.6C126.484 46.3999 127.2 47.1162 127.2 47.9999V55.9999H32.8V47.9999Z" fill="#464B52"/>
+<path d="M32.8 56H127.2V112C127.2 112.884 126.484 113.6 125.6 113.6H34.4001C33.5164 113.6 32.8 112.884 32.8 112V56Z" fill="white"/>
+<rect width="11.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 74.3999 91.2002)" fill="#C9CED4"/>
+<rect width="4" height="4" rx="2" transform="matrix(1 0 0 -1 68 81.6001)" fill="#C9CED4"/>
+<rect width="4" height="4" rx="2" transform="matrix(1 0 0 -1 88 81.6001)" fill="#C9CED4"/>
+</g>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 36 52.7998)" fill="#E37570"/>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 41.6001 52.7998)" fill="#EFBA0F"/>
+<rect width="3.2" height="3.2" rx="1.6" transform="matrix(1 0 0 -1 47.2 52.7998)" fill="#4ACC82"/>
+<path d="M141.143 46.1714C141.143 53.9981 134.798 60.3429 126.971 60.3429C119.145 60.3429 112.8 53.9981 112.8 46.1714C112.8 38.3447 119.145 32 126.971 32C134.798 32 141.143 38.3447 141.143 46.1714Z" fill="#5981E3"/>
+<path d="M128.297 49.5064H125.566L124.993 38.562H128.87L128.297 49.5064ZM124.947 53.3381C124.947 52.6345 125.138 52.145 125.52 51.8697C125.903 51.579 126.369 51.4337 126.92 51.4337C127.455 51.4337 127.914 51.579 128.297 51.8697C128.679 52.145 128.87 52.6345 128.87 53.3381C128.87 54.0111 128.679 54.5006 128.297 54.8065C127.914 55.0971 127.455 55.2425 126.92 55.2425C126.369 55.2425 125.903 55.0971 125.52 54.8065C125.138 54.5006 124.947 54.0111 124.947 53.3381Z" fill="white"/>
+<defs>
+<filter id="filter0_d_22198_92633" x="24.8" y="44.7999" width="110.4" height="83.2002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="4.8" operator="erode" in="SourceAlpha" result="effect1_dropShadow_22198_92633"/>
+<feOffset dy="6.4"/>
+<feGaussianBlur stdDeviation="6.4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22198_92633"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22198_92633" result="shape"/>
+</filter>
+</defs>
+</svg>

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/lib/components/errors/generic/generic-error.tsx

@@ -1,12 +1,67 @@
+import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import ErrorDarkSVG from '@/public/assets/svg/error-dark.svg?url'
+import ErrorLightSVG from '@/public/assets/svg/error-light.svg?url'
+import { Button } from '@/src/lib/components'
+import { PageLayout, TutorWidgetEvents, useWidgetSettingsAtom } from '@/src/modules/widget'
+import { WidgetHeader } from '@/src/modules/widget/components/header'
+
 function GenericError() {
   const { t } = useTranslation()
+  const [settings] = useWidgetSettingsAtom()
+  const isDarkMode = settings?.config?.theme === 'dark'
 
   return (
-    <div>
-      <h4 className='text-xl font-bold'>{t('generic.error')}</h4>
-    </div>
+    <PageLayout className='p-5'>
+      <WidgetHeader enabledButtons={['close']} showContent={false} />
+
+      <div className='flex h-full flex-col items-center justify-center p-10'>
+        <div className='mb-8 flex flex-col items-center gap-1 text-center'>
+          <img
+            alt={t('generic_error.image_alt')}
+            className='mb-4'
+            src={isDarkMode ? ErrorDarkSVG : ErrorLightSVG}
+            width={200}
+            height={200}
+          />
+
+          <h2
+            className={clsx('text-xl font-bold', {
+              'text-white': isDarkMode,
+              'text-gray-800': !isDarkMode
+            })}>
+            {t('generic_error.title')}
+          </h2>
+
+          <p
+            className={clsx('text-sm', {
+              'text-gray-400': isDarkMode,
+              'text-gray-500': !isDarkMode
+            })}>
+            {t('generic_error.description')}
+          </p>
+        </div>
+
+        <div className='flex w-full flex-col gap-4'>
+          <Button
+            variant='brand'
+            className='w-full rounded-lg py-2'
+            onClick={() => window.location.reload()}
+            aria-label='Retry Button'>
+            <span className='font-light'>{t('general.buttons.try_again')}</span>
+          </Button>
+
+          <Button
+            variant='secondary'
+            className='w-full rounded-lg py-2'
+            onClick={() => TutorWidgetEvents['c3po-app-widget-hide'].dispatch()}
+            aria-label='Close Button'>
+            <span className='font-light'>{t('general.buttons.close')}</span>
+          </Button>
+        </div>
+      </div>
+    </PageLayout>
   )
 }
 

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,