app-tutor-ai-consumer 1.0.1 → 1.2.0

package/.github/workflows/production.yml

@@ -114,7 +114,7 @@ jobs:
           webhook-chat: 'https://chat.googleapis.com/v1/spaces/AAAA1nvOyjo/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=uuL7DA8zTxUkJjQa39HIM0TYVZV0DvneZ0mklNhEr5M'
           body: |
             {
-              "text": "🚀 *[PRODUCTION] app-club-consumer v${{ env.VERSION }}*: production deploy: ${{ github.ref_name }}",
+              "text": "🚀 *[PRODUCTION] app-tutor-ai-consumer v${{ env.VERSION }}*: production deploy: ${{ github.ref_name }}",
               "cards": [
                 {
                   "header": {

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [1.2.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.1.0...v1.2.0) (2025-06-20)
+
+### Features
+
+- add Optimizely Config ([ad2162f](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ad2162f6e92b606cb72078d75a972067a8988e6f))
+
+# [1.1.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.0.1...v1.1.0) (2025-06-18)
+
+### Bug Fixes
+
+- pr issues ([0004e58](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/0004e58014621a4a85ecabb6996372c470292d75))
+- pr issues ([897bbe8](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/897bbe8a5a049f8cbb3d30f854a8a73875dab174))
+- pr issues ([14353de](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/14353de72df8cecb70d673e87d91ed361eb5662b))
+
+### Features
+
+- add Tanstack Query Config ([14c40ec](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/14c40ec1fc022e8e45a4df29baef670505623be5))
+
 ## [1.0.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.0.0...v1.0.1) (2025-06-18)
 
 ### Bug Fixes

package/config/rspack/rspack.config.js

@@ -158,7 +158,8 @@ module.exports = async function (env) {
       }),
       new rspack.DefinePlugin({
         'process.env.PROJECT_VERSION': JSON.stringify(packageJSON.version),
-        'process.env.TARGET_ENV': JSON.stringify(process.env.NODE_ENV)
+        'process.env.TARGET_ENV': JSON.stringify(process.env.NODE_ENV),
+        'process.env.RELEASE_FULL_NAME': JSON.stringify(releaseFullName)
       }),
       new rspack.ProgressPlugin(),
       new TsCheckerRspackPlugin(),

package/eslint.config.mjs

@@ -7,6 +7,7 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import globals from 'globals'
 import simpleImportSort from 'eslint-plugin-simple-import-sort'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import pluginQuery from '@tanstack/eslint-plugin-query'
 
 export default tseslint.config(
   {
@@ -19,12 +20,16 @@ export default tseslint.config(
       'eslint.config.mjs',
       'commitlint.config.js',
       'babel.config.js',
+      'config/certs/',
+      'config/vitest/',
+      'scripts/',
       '**/*.d.ts',
     ],
   },
   eslintPluginPrettierRecommended,
   eslint.configs.recommended,
   tseslint.configs.recommendedTypeChecked,
+  ...pluginQuery.configs['flat/recommended'],
   { languageOptions: { globals: globals.browser } },
   {
     languageOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -47,6 +47,7 @@
     "@semantic-release/release-notes-generator": "~14.0.3",
     "@stylistic/eslint-plugin-js": "~4.4.1",
     "@svgr/webpack": "~8.1.0",
+    "@tanstack/eslint-plugin-query": "~5.78.0",
     "@tanstack/react-query-devtools": "~5.80.6",
     "@testing-library/jest-dom": "~6.6.3",
     "@testing-library/react": "~16.3.0",
@@ -99,10 +100,15 @@
     "vitest": "~3.2.3"
   },
   "dependencies": {
+    "@hot-observability-js/react": "~1.1.0",
+    "@optimizely/react-sdk": "~3.2.4",
+    "@tanstack/query-sync-storage-persister": "~5.80.7",
     "@tanstack/react-query": "~5.80.6",
+    "@tanstack/react-query-persist-client": "~5.80.7",
     "clsx": "~2.1.1",
     "i18next": "~25.2.1",
     "i18next-resources-to-backend": "~1.2.1",
+    "jotai": "~2.12.5",
     "react": "~19.1.0",
     "react-dom": "~19.1.0",
     "react-i18next": "~15.5.2"

package/src/config/i18n/init.ts

@@ -13,7 +13,7 @@ export const initLanguage = async (language: string) => {
   if (i18nInitialized) return
 
   const lang = language?.toUpperCase() as keyof ILangs
-  let lng = language.match(/^pt/gi) ? LANGUAGES.PT_BR : LANGUAGES[lang]
+  let lng = language?.match(/^pt/gi) ? LANGUAGES.PT_BR : LANGUAGES[lang]
 
   if (!LANG_RESOURCES.has(lng)) lng = DEFAULT_LANGUAGE
 

package/src/config/optimizely/index.ts

@@ -0,0 +1 @@
+export { default as OptimizelyProvider } from './optimizely-provider'

package/src/config/optimizely/optimizely-provider.tsx

@@ -0,0 +1,31 @@
+import { OptimizelyProvider as Provider } from '@optimizely/react-sdk'
+import type { PropsWithChildren } from 'react'
+
+import { APP_SYSTEM, APP_VERSION, productionMode } from '@/src/lib/utils'
+import type { WidgetSettingProps } from '@/src/types'
+
+import optimizelyClient from './optimizely'
+
+function OptimizelyProvider({
+  settings,
+  children,
+}: PropsWithChildren<{ settings: WidgetSettingProps }>) {
+  const userInfo = {
+    id: settings.user?.ucode ?? '',
+    attributes: {
+      appVersion: APP_VERSION,
+      appSystem: APP_SYSTEM,
+      appDebug: !productionMode,
+      locale: settings.locale ?? '',
+      slug: settings.membershipSlug ?? '',
+    },
+  }
+
+  return (
+    <Provider optimizely={optimizelyClient} user={userInfo}>
+      {children}
+    </Provider>
+  )
+}
+
+export default OptimizelyProvider

package/src/config/optimizely/optimizely.ts

@@ -0,0 +1,9 @@
+import { createInstance } from '@optimizely/react-sdk'
+
+const optimizelyClient = createInstance({
+  sdkKey: process.env.OPTIMIZELY_SDK_KEY,
+  eventBatchSize: 10,
+  eventFlushInterval: 1000,
+})
+
+export default optimizelyClient

package/src/config/request/api.ts

@@ -0,0 +1,27 @@
+import type { InternalAxiosRequestConfig } from 'axios'
+import axios from 'axios'
+
+import { RELEASE_FULL_NAME } from '@/src/lib/utils'
+
+import { whenRequestWithError, whenResponseWithError } from './interceptors'
+
+const addAppNameToHeader = (config: InternalAxiosRequestConfig) => {
+  if (config.headers) {
+    config.headers['x-app-name'] = RELEASE_FULL_NAME
+  }
+
+  return config
+}
+
+const api = axios.create()
+
+export function initAxios(token: string): void {
+  if (!token) throw new Error('Error initializing axios. Missing token')
+
+  api.defaults.headers.common.Authorization = `Bearer ${token}`
+}
+
+api.interceptors.request.use((config) => addAppNameToHeader(config), whenRequestWithError)
+api.interceptors.response.use((response) => response, whenResponseWithError)
+
+export default api

package/src/config/request/error.ts

@@ -0,0 +1,42 @@
+import type { AxiosResponse } from 'axios'
+
+import type { ApiErrorConstructorProps } from './types'
+
+class ApiError extends Error {
+  private _message: string
+  private _extra?: unknown
+  private _statusCode: number
+  private _response?: AxiosResponse
+  private _headers?: Record<string, unknown>
+
+  constructor({ statusCode, message, headers, extra, response }: ApiErrorConstructorProps) {
+    super(message)
+    this._statusCode = statusCode
+    this._message = message
+    this._headers = headers
+    this._extra = extra
+    this._response = response
+  }
+
+  get statusCode() {
+    return this._statusCode
+  }
+
+  get message() {
+    return this._message
+  }
+
+  get headers() {
+    return this._headers
+  }
+
+  get extra() {
+    return this?._extra
+  }
+
+  get response() {
+    return this._response
+  }
+}
+
+export default ApiError

package/src/config/request/index.ts

@@ -0,0 +1,2 @@
+export { default as api } from './api'
+export { default as ApiError } from './error'

package/src/config/request/interceptors.ts

@@ -0,0 +1,53 @@
+import { type AxiosError } from 'axios'
+
+import { HttpCodes, MessageTypes } from '@/src/lib/utils'
+import packageJson from '../../../package.json'
+
+import ApiError from './error'
+import type { ResponseError } from './types'
+
+const whenGenericError = (error: AxiosError) => {
+  const genericError = new ApiError({
+    message: error?.message,
+    statusCode: HttpCodes.INTERNAL_SERVER_ERROR
+  })
+
+  return Promise.reject(genericError)
+}
+
+export const whenRequestWithError = (error: AxiosError) => {
+  if (error.request) {
+    const code = parseInt(String(error.code), 10)
+    const requestError = new ApiError({
+      statusCode: !Number.isNaN(code) ? code : HttpCodes.INTERNAL_SERVER_ERROR,
+      message: String(error.request)
+    })
+
+    return Promise.reject(requestError)
+  }
+
+  return whenGenericError(error)
+}
+
+export const whenResponseWithError = (error: AxiosError<ResponseError>) => {
+  if (error.response) {
+    const responseError = new ApiError({
+      response: error.response,
+      headers: error.response.headers,
+      extra: error?.response?.data?.extra ?? '',
+      statusCode: error.response.status,
+      message: error?.response?.data?.message ?? ''
+    })
+
+    if (error.response.status === HttpCodes.UNAUTHORIZED) {
+      window.postMessage(
+        { appName: packageJson.name, type: MessageTypes.SSO_EXPIRED_TOKEN },
+        window.location.origin
+      )
+    }
+
+    return Promise.reject(responseError)
+  }
+
+  return whenGenericError(error)
+}

package/src/config/request/types.ts

@@ -0,0 +1,20 @@
+import type { AxiosRequestHeaders, AxiosResponse } from 'axios'
+
+export type RequestHeaders = AxiosRequestHeaders
+
+export type ResponseError = {
+  currentDate: string
+  status: string
+  code: string
+  message: string
+  details: string
+  extra: unknown
+}
+
+export type ApiErrorConstructorProps = {
+  message: string
+  statusCode: number
+  extra?: unknown
+  response?: AxiosResponse
+  headers?: Record<string, unknown>
+}

package/src/config/tanstack/index.ts

@@ -0,0 +1,3 @@
+export * from './query-client'
+export * from './query-provider'
+export { default as QueryProvider } from './query-provider'

package/src/config/tanstack/query-client.ts

@@ -0,0 +1,31 @@
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { QueryClient } from '@tanstack/react-query'
+
+import { DEFAULT_STALE_TIME, HttpCodes } from '@/src/lib/utils'
+import type { ApiError } from '../request'
+import api from '../request/api'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+      staleTime: DEFAULT_STALE_TIME,
+      refetchOnWindowFocus: false,
+      retry(failureCount, error) {
+        if (!api?.defaults?.headers?.common?.['Authorization']) return false
+
+        const maxRetries = 2
+        const statusCode = (error as ApiError).statusCode
+
+        return (
+          (statusCode < HttpCodes.BAD_REQUEST || statusCode >= HttpCodes.INTERNAL_SERVER_ERROR) &&
+          failureCount <= maxRetries
+        )
+      }
+    }
+  }
+})
+
+export const persister = createSyncStoragePersister({
+  storage: window.localStorage
+})

package/src/config/tanstack/query-provider.tsx

@@ -0,0 +1,18 @@
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import type { PropsWithChildren } from 'react'
+
+import { persister, queryClient } from './query-client'
+
+export type QueryProviderProps = PropsWithChildren<{ showDevTools?: boolean }>
+
+function QueryProvider({ children, showDevTools = true }: QueryProviderProps) {
+  return (
+    <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
+      {children}
+      {showDevTools && <ReactQueryDevtools />}
+    </PersistQueryClientProvider>
+  )
+}
+
+export default QueryProvider

package/src/config/tests/abstract-mock-generator.ts

@@ -2,7 +2,7 @@ abstract class MockGenerator<T = unknown> {
   abstract getOne(properties?: T): T
 
   getMany(amount = 1, props?: T) {
-    return Array(amount).fill(this.getOne(props)) as Array<T>
+    return Array.from({ length: amount }, () => this.getOne(props))
   }
 }
 

package/src/lib/components/errors/boundary.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+import { Component } from 'react'
+import { HotmartRum } from '@hot-observability-js/react'
+import type { ErrorInfo, PropsWithChildren, ReactNode } from 'react'
+
+export type BoundaryState = {
+  hasError: boolean
+}
+
+export type BoundaryProps = PropsWithChildren<{
+  user: {
+    id?: string
+    email?: string
+  }
+  pathname?: string
+  fallback: ReactNode
+  onError?: () => void
+}>
+
+const logError = (error: Error, errorInfo: ErrorInfo, user?: BoundaryProps['user']) => {
+  if (process.env.TARGET_ENV !== 'production' && typeof vi === 'undefined') {
+    return console.error(`Uncaught error: ${JSON.stringify({ error, errorInfo })}`)
+  }
+
+  HotmartRum.withScope((scope) => {
+    scope.setLevel('error')
+
+    if (user?.id && user?.email) {
+      scope.setUser({ id: user?.id, email: user?.email })
+    }
+
+    const msg = errorInfo?.componentStack?.toString()
+    if (msg) HotmartRum.captureMessage(msg)
+
+    HotmartRum.captureException(error)
+  })
+}
+
+class Boundary extends Component<BoundaryProps, BoundaryState> {
+  state: BoundaryState = { hasError: false }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidUpdate(prevProps: BoundaryProps, prevState: BoundaryState) {
+    const hasPathnameChanged = this.props.pathname !== prevProps.pathname
+
+    if (hasPathnameChanged && prevState.hasError) {
+      this.setState({ hasError: false })
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    logError(error, errorInfo, this.props?.user)
+    this.props.onError?.()
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback
+    }
+
+    return this.props.children
+  }
+}
+
+export default Boundary

package/src/lib/components/errors/error-boundary.spec.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@/src/config/tests'
+
+import ErrorBoundary from './error-boundary'
+
+describe('ErrorBoundary', () => {
+  const onErrorMock = vi.fn()
+
+  const InternalError = () => <h1>oops, an error occurred</h1>
+
+  const ThrowError = () => {
+    throw new Error('Test')
+  }
+
+  const renderComponent = () =>
+    render(
+      <ErrorBoundary fallback={<InternalError />} onError={onErrorMock}>
+        <ThrowError />
+      </ErrorBoundary>
+    )
+
+  beforeEach(() => vi.spyOn(console, 'error').mockImplementation(vi.fn()))
+
+  afterEach(() => vi.clearAllMocks())
+
+  it('should be intercept by error boundary when an error happen', () => {
+    renderComponent()
+
+    expect(screen.getByRole('heading', { name: /oops, an error occurred/i })).toBeInTheDocument()
+    expect(console.error).toHaveBeenCalled()
+  })
+
+  it('should, when intercept an error, execute callback', () => {
+    renderComponent()
+
+    expect(screen.getByRole('heading', { name: /oops, an error occurred/i })).toBeInTheDocument()
+    expect(onErrorMock).toHaveBeenCalled()
+  })
+})

package/src/lib/components/errors/error-boundary.tsx

@@ -0,0 +1,26 @@
+import type { PropsWithChildren, ReactNode } from 'react'
+
+import { useWidgetSettingsAtom } from '@/src/modules/widget'
+
+import Boundary from './boundary'
+
+export type ErrorBoundaryProps = PropsWithChildren<{
+  fallback: ReactNode
+  onError?: () => void
+}>
+
+const ErrorBoundary = ({ children, fallback, onError }: ErrorBoundaryProps) => {
+  const [settings] = useWidgetSettingsAtom()
+
+  return (
+    <Boundary
+      user={{ id: settings?.userId, email: settings?.user?.email }}
+      fallback={fallback}
+      pathname={location.pathname}
+      onError={onError}>
+      {children}
+    </Boundary>
+  )
+}
+
+export default ErrorBoundary

package/src/lib/components/errors/generic/generic-error.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next'
+
+function GenericError() {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <h4 className='text-xl font-bold'>{t('generic.error')}</h4>
+    </div>
+  )
+}
+
+export default GenericError

package/src/lib/components/errors/generic/index.ts

@@ -0,0 +1 @@
+export { default as GenericError } from './generic-error'

package/src/lib/components/errors/index.ts

@@ -0,0 +1,2 @@
+export { default as ErrorBoundary } from './error-boundary'
+export * from './generic'

package/src/lib/components/index.ts

@@ -1 +1,3 @@
+export * from './errors'
 export * from './icons'
+export * from './spinner'

package/src/lib/utils/constants.ts

@@ -1,2 +1,6 @@
 export const devMode = process.env.NODE_ENV === 'development'
 export const productionMode = process.env.NODE_ENV === 'production'
+export const RELEASE_FULL_NAME = `${process.env.RELEASE_FULL_NAME}_${process.env.NODE_ENV}`
+export const DEFAULT_STALE_TIME = 1000 * 60 * 30 // 30 minutes
+export const APP_VERSION = process.env.PROJECT_VERSION ?? ''
+export const APP_SYSTEM = 'Web'

package/src/lib/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './constants'
 export { default as HttpCodes } from './http-codes'
 export * from './languages'
+export * from './message-types'

package/src/lib/utils/message-types.ts

@@ -0,0 +1,3 @@
+export const MessageTypes = {
+  SSO_EXPIRED_TOKEN: 'THIRD-PARTY-APP.EXPIRED_TOKEN'
+} as const

package/src/main/main.tsx

@@ -2,9 +2,11 @@ import '@/config/styles/index.css'
 
 import clsx from 'clsx'
 
+import { ErrorBoundary, GenericError } from '@/src/lib/components/errors'
 import { useDefaultId } from '@/src/lib/hooks'
 import { useAppLang } from '../config/i18n'
 import { ChatInput } from '../modules/create-message/components'
+import { GlobalProviders } from '../modules/global-providers'
 import { GreetingsCard } from '../modules/widget/components'
 import type { WidgetSettingProps } from '../types'
 
@@ -15,12 +17,17 @@ function Main({ settings }: { settings: WidgetSettingProps }) {
   useAppLang(settings.locale)
 
   return (
-    <div className={clsx('flex min-h-svh flex-col items-center justify-center p-5', styles.main)}>
-      <div className='flex flex-1 flex-col justify-center gap-6 lg:max-w-sm'>
-        <GreetingsCard author={settings.author ?? ''} tutorName={settings.tutorName ?? ''} />
-        <ChatInput name='new-chat-msg-input' />
-      </div>
-    </div>
+    <ErrorBoundary fallback={<GenericError />}>
+      <GlobalProviders settings={settings}>
+        <div
+          className={clsx('flex min-h-svh flex-col items-center justify-center p-5', styles.main)}>
+          <div className='flex flex-1 flex-col justify-center gap-6 lg:max-w-sm'>
+            <GreetingsCard author={settings.author ?? ''} tutorName={settings.tutorName ?? ''} />
+            <ChatInput name='new-chat-msg-input' />
+          </div>
+        </div>
+      </GlobalProviders>
+    </ErrorBoundary>
   )
 }
 

package/src/modules/global-providers/global-providers.tsx

@@ -0,0 +1,26 @@
+import { type PropsWithChildren, useEffect } from 'react'
+
+import { OptimizelyProvider } from '@/src/config/optimizely'
+import { QueryProvider } from '@/src/config/tanstack'
+import { useWidgetSettingsAtom } from '@/src/modules/widget'
+import type { WidgetSettingProps } from '@/src/types'
+
+export type GlobalProvidersProps = PropsWithChildren<{ settings: WidgetSettingProps }>
+
+function GlobalProviders({ children, settings }: GlobalProvidersProps) {
+  const [, setWidgetSettings] = useWidgetSettingsAtom()
+
+  useEffect(() => {
+    if (!settings || !Object.keys(settings)?.length) return
+
+    setWidgetSettings(settings)
+  }, [setWidgetSettings, settings])
+
+  return (
+    <OptimizelyProvider settings={settings}>
+      <QueryProvider>{children}</QueryProvider>
+    </OptimizelyProvider>
+  )
+}
+
+export default GlobalProviders

package/src/modules/global-providers/index.ts

@@ -0,0 +1 @@
+export { default as GlobalProviders } from './global-providers'

package/src/modules/widget/index.ts

@@ -1,2 +1,4 @@
+export * from './components'
 export * from './events'
+export * from './store'
 export * from './types'

package/src/modules/widget/store/index.ts

@@ -0,0 +1 @@
+export * from './widget-settings.atom'

package/src/modules/widget/store/widget-settings.atom.ts

@@ -0,0 +1,12 @@
+import { atom, useAtom } from 'jotai'
+
+import type { WidgetSettingProps } from '@/src/types'
+
+export const widgetSettingsAtom = atom<WidgetSettingProps | null>(null)
+
+export const setWidgetSettingsAtom = atom(
+  (get) => get(widgetSettingsAtom),
+  (_, set, config: WidgetSettingProps) => set(widgetSettingsAtom, config)
+)
+
+export const useWidgetSettingsAtom = () => useAtom(setWidgetSettingsAtom)

package/src/types.ts

@@ -5,6 +5,17 @@ export type StartTutorWidgetProps = {
   settings: WidgetSettingProps
 }
 
+export type User = {
+  id: string
+  name?: string
+  email?: string
+  token?: string
+  ucode?: string
+  authorities?: string[]
+  avatar?: string
+  sessionId?: string
+}
+
 export type WidgetSettingProps = {
   hotmartToken: string
   locale: ILanguages
@@ -20,4 +31,5 @@ export type WidgetSettingProps = {
   membershipSlug?: string
   userId?: string
   tutorName?: string
+  user?: User
 }