app-tutor-ai-consumer 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -101,6 +101,7 @@
   },
   "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",

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/lib/utils/constants.ts

@@ -2,3 +2,5 @@ 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/main/main.tsx

@@ -1,13 +1,12 @@
 import '@/config/styles/index.css'
 
-import { useEffect } from 'react'
 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 { useWidgetSettingsAtom } from '../modules/widget'
 import { GreetingsCard } from '../modules/widget/components'
 import type { WidgetSettingProps } from '../types'
 
@@ -16,23 +15,19 @@ import styles from './styles.module.css'
 function Main({ settings }: { settings: WidgetSettingProps }) {
   useDefaultId()
   useAppLang(settings.locale)
-  const [, setWidgetSettings] = useWidgetSettingsAtom()
-
-  useEffect(() => {
-    if (!settings || !Object.keys(settings)?.length) return
-
-    setWidgetSettings(settings)
-  }, [setWidgetSettings, settings])
 
   return (
-    <GlobalProviders>
-      <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' />
+    <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>
-      </div>
-    </GlobalProviders>
+      </GlobalProviders>
+    </ErrorBoundary>
   )
 }
 

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

@@ -1,15 +1,25 @@
-import type { PropsWithChildren } from 'react'
+import { type PropsWithChildren, useEffect } from 'react'
 
+import { OptimizelyProvider } from '@/src/config/optimizely'
 import { QueryProvider } from '@/src/config/tanstack'
-import { ErrorBoundary, GenericError } from '@/src/lib/components/errors'
+import { useWidgetSettingsAtom } from '@/src/modules/widget'
+import type { WidgetSettingProps } from '@/src/types'
 
-export type GlobalProvidersProps = PropsWithChildren
+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])
 
-function GlobalProviders({ children }: GlobalProvidersProps) {
   return (
-    <ErrorBoundary fallback={<GenericError />}>
+    <OptimizelyProvider settings={settings}>
       <QueryProvider>{children}</QueryProvider>
-    </ErrorBoundary>
+    </OptimizelyProvider>
   )
 }