app-tutor-ai-consumer 1.0.1

package/environments/.env.staging

@@ -0,0 +1,40 @@
+# APP
+ENVIRONMENT=staging
+APP_HOST=local.buildstaging.com
+APP_PORT=4223
+APP_NAME=app-tutor-ai-consumer
+
+# CAS Hotmart
+CAS_CLIENT_ID=b432cdd3-eb60-46bd-892b-5b450a65153e
+IS_CAS=false
+
+APP_HOST_MF=
+
+# API
+API_CONTENT_PLATFORM_SPACE=https://api-content-platform-space-gateway.buildstaging.com
+API_HOTMART_TUTOR=https://api-smart-search-content.buildstaging.com
+
+# OPTIMIZELY
+
+OPTIMIZELY_SDK_KEY=B9rwquwdhY7XfEzaqZH94
+
+# FIREBASE
+FIREBASE_API_KEY=AIzaSyAq3KtkkTsJC5maHM_A9YJ-roI2IbvI5fM
+FIREBASE_AUTH_DOMAIN=omnichat-cad8c.firebaseapp.com
+FIREBASE_DATABASE_URL=https://omnichat-cad8c.firebaseio.com
+FIREBASE_MESSAGING_SENDER_ID=78513709264
+FIREBASE_PROJECT_ID=omnichat-cad8c
+FIREBASE_STORAGE_BUCKET=omnichat-cad8c.appspot.com
+
+# C3PO
+API_CONVERSATION_URL=https://c3po-api-conversations.buildstaging.com
+API_AUTH_URL=https://c3po-api-auth.buildstaging.com/v1
+
+# VLC
+USER_VLC=
+VLC_PASSWORD=
+SECURITY_BASE_URL=
+AUTH_CLIENT_SECRET=
+
+# BUNDLE
+BUNDLE_PATH=https://app-club-microfrontends.buildstaging.com

package/environments/.env.test

@@ -0,0 +1,41 @@
+# APP
+ENVIRONMENT=test
+APP_HOST=local.buildstaging.com
+APP_PORT=4223
+APP_NAME=app-tutor-ai-consumer
+
+# CAS Hotmart
+CAS_CLIENT_ID=
+IS_CAS=
+
+# IT SHOULD ONLY BE FILLED IN the .env.local file
+MEMBERSHIP_SLUG=
+
+# API
+API_CONTENT_PLATFORM_SPACE=
+API_HOTMART_TUTOR=
+
+# OPTIMIZELY
+
+OPTIMIZELY_SDK_KEY=B9rwquwdhY7XfEzaqZH94
+
+# FIREBASE
+FIREBASE_API_KEY=AIzaSyAq3KtkkTsJC5maHM_A9YJ-roI2IbvI5fM
+FIREBASE_AUTH_DOMAIN=omnichat-cad8c.firebaseapp.com
+FIREBASE_DATABASE_URL=https://omnichat-cad8c.firebaseio.com
+FIREBASE_MESSAGING_SENDER_ID=78513709264
+FIREBASE_PROJECT_ID=omnichat-cad8c
+FIREBASE_STORAGE_BUCKET=omnichat-cad8c.appspot.com
+
+# C3PO
+API_CONVERSATION_URL=
+API_AUTH_URL=
+
+# VLC
+USER_VLC=
+VLC_PASSWORD=
+SECURITY_BASE_URL=
+AUTH_CLIENT_SECRET=
+
+# BUNDLE
+BUNDLE_PATH=

package/eslint.config.mjs

@@ -0,0 +1,87 @@
+// @ts-nocheck
+
+import eslint from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import reactPlugin from 'eslint-plugin-react'
+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'
+
+export default tseslint.config(
+  {
+    ignores: [
+      '**/node_modules/',
+      '**/dist/',
+      'config/rspack/',
+      '**/tailwind.config.*',
+      '**/postcss.config.*',
+      'eslint.config.mjs',
+      'commitlint.config.js',
+      'babel.config.js',
+      '**/*.d.ts',
+    ],
+  },
+  eslintPluginPrettierRecommended,
+  eslint.configs.recommended,
+  tseslint.configs.recommendedTypeChecked,
+  { languageOptions: { globals: globals.browser } },
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  reactPlugin.configs.flat.recommended,
+  reactPlugin.configs.flat['jsx-runtime'],
+  {
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'prettier/prettier': [
+        'error',
+        {
+          usePrettierrc: true,
+        },
+      ],
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [
+            // 1. Side effect imports at the start. For me this is important because I want to import reset.css and global styles at the top of my main file.
+            ['^\\u0000'],
+            // 2. `react` and packages: Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+            ['^react$', '^@?\\w'],
+            // 3. Absolute imports and other imports such as Vue-style `@/foo`.
+            // Anything not matched in another group. (also relative imports starting with "../")
+            ['^@', '^'],
+            // 4. relative imports from same folder "./" (I like to have them grouped together)
+            ['^\\./'],
+            // 5. style module imports always come last, this helps to avoid CSS order issues
+            ['^.+\\.(module.css|module.scss)$'],
+            // 6. media imports
+            ['^.+\\.(gif|png|svg|jpg)$'],
+          ],
+        },
+      ],
+      'simple-import-sort/exports': 'error',
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          fixStyle: 'separate-type-imports',
+        },
+      ],
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+)

package/mkdocs.yaml

@@ -0,0 +1,11 @@
+site_name: app-tutor-ai-consumer
+repo_url: https://github.com/Hotmart-Org/app-tutor-ai-consumer
+
+plugins:
+  - techdocs-core
+
+nav:
+  - Summary: 'index.md'
+  - ADR: 'architecture/decisions/index.md'
+  - Design Docs: 'architecture/design/index.md'
+  - Quick Guide: 'README.md'

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "app-tutor-ai-consumer",
+  "version": "1.0.1",
+  "main": "index.js",
+  "scripts": {
+    "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
+    "dev:local": "rspack serve --env=local --config config/rspack/rspack.config.js",
+    "generate-icon-types": "ts-node scripts/generate-icon-types.js",
+    "postgenerate-icon-types": "npm run format",
+    "prebuild": "npm run generate-icon-types",
+    "build": "rspack build --mode=production --env=production --config config/rspack/rspack.config.js",
+    "prebuild:staging": "npm run generate-icon-types",
+    "build:staging": "rspack build --mode=production --env=staging --config config/rspack/rspack.config.js",
+    "prebuild:start": "npm run build",
+    "build:start": "NODE_ENV=production rspack preview --config config/rspack/rspack.config.js --port 4200",
+    "test": "vitest --config config/vitest/vitest.config.mts",
+    "test:ci": "npm run test -- --run --coverage --silent --bail 1",
+    "type-check": "bash -c tsc --project ./tsconfig.json --noEmit",
+    "lint": "eslint --ext js,ts,tsx ./src --no-warn-ignored --max-warnings=0",
+    "lint:fix": "npm run lint -- --fix",
+    "prelint": "npm run format",
+    "format": "prettier --ignore-path .prettierignore --write \"**/*.+(js|jsx|ts|tsx|json)\"",
+    "fetch-langs": "PROJECT=app-tutor-ai-consumer PATH_LANGUAGES=public/locales api-languages-cli",
+    "fetch-langs:local": "PROJECT=app-tutor-ai-consumer PATH_LANGUAGES=public/locales LANG_ENV=local api-languages-cli",
+    "semantic-release": "semantic-release",
+    "prepare": "husky || true"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@babel/preset-typescript": "~7.27.1",
+    "@commitlint/cli": "~19.8.1",
+    "@commitlint/config-conventional": "~19.8.1",
+    "@eslint/compat": "~1.2.9",
+    "@eslint/js": "~9.28.0",
+    "@hotmart/api-languages-cli": "~2.0.5",
+    "@rsbuild/plugin-svgr": "~1.2.0",
+    "@rspack/cli": "~1.3.15",
+    "@rspack/core": "~1.3.15",
+    "@rspack/plugin-react-refresh": "~1.4.3",
+    "@semantic-release/changelog": "~6.0.3",
+    "@semantic-release/commit-analyzer": "~13.0.1",
+    "@semantic-release/git": "~10.0.1",
+    "@semantic-release/npm": "~12.0.1",
+    "@semantic-release/release-notes-generator": "~14.0.3",
+    "@stylistic/eslint-plugin-js": "~4.4.1",
+    "@svgr/webpack": "~8.1.0",
+    "@tanstack/react-query-devtools": "~5.80.6",
+    "@testing-library/jest-dom": "~6.6.3",
+    "@testing-library/react": "~16.3.0",
+    "@testing-library/user-event": "~14.6.1",
+    "@types/axios": "~0.9.36",
+    "@types/chance": "~1.1.6",
+    "@types/node": "~24.0.0",
+    "@types/react": "~19.1.7",
+    "@types/react-dom": "~19.1.6",
+    "@types/react-router-dom": "~5.3.3",
+    "@types/ua-parser-js": "~0.7.39",
+    "@vitejs/plugin-react": "~4.5.2",
+    "@vitest/coverage-istanbul": "~3.2.3",
+    "@vitest/coverage-v8": "~3.2.3",
+    "autoprefixer": "~10.4.21",
+    "chance": "~1.1.13",
+    "compression-webpack-plugin": "~11.1.0",
+    "css-loader": "~7.1.2",
+    "dotenv": "~16.5.0",
+    "eslint": "~9.28.0",
+    "eslint-config-prettier": "~10.1.5",
+    "eslint-plugin-prettier": "~5.4.1",
+    "eslint-plugin-react": "~7.37.5",
+    "eslint-plugin-react-hooks": "~5.2.0",
+    "eslint-plugin-simple-import-sort": "~12.1.1",
+    "file-loader": "~6.2.0",
+    "globals": "~16.2.0",
+    "husky": "~9.1.7",
+    "jsdom": "~26.1.0",
+    "lint-staged": "~16.1.0",
+    "loader": "~2.1.1",
+    "msw": "~2.10.2",
+    "postcss": "~8.5.4",
+    "postcss-import": "~16.1.0",
+    "postcss-loader": "~8.1.1",
+    "prettier": "~3.5.3",
+    "prettier-plugin-tailwindcss": "~0.6.12",
+    "process": "~0.11.10",
+    "react-refresh": "~0.17.0",
+    "semantic-release": "~24.2.5",
+    "style-loader": "~4.0.0",
+    "tailwindcss": "~3.4.17",
+    "ts-checker-rspack-plugin": "~1.1.4",
+    "ts-node": "~10.9.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "~8.34.0",
+    "ua-parser-js": "~2.0.3",
+    "undici": "~7.10.0",
+    "vite-tsconfig-paths": "~5.1.4",
+    "vitest": "~3.2.3"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "~5.80.6",
+    "clsx": "~2.1.1",
+    "i18next": "~25.2.1",
+    "i18next-resources-to-backend": "~1.2.1",
+    "react": "~19.1.0",
+    "react-dom": "~19.1.0",
+    "react-i18next": "~15.5.2"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.6.1",
+    "@rspack/binding-linux-x64-gnu": "1.3.10"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx}": [
+      "npm run type-check",
+      "npm run lint:fix",
+      "vitest --config config/vitest/vitest.config.mts related --run --bail 1"
+    ],
+    "*.{json,js,jsx,ts,tsx,css,md,html}": [
+      "prettier --write"
+    ]
+  }
+}

package/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')]
+}

package/public/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css?family=Nunito:400,700"
+      rel="stylesheet"
+    />
+    <title>App Tutor AI Consumer</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/scripts/generate-icon-types.js

@@ -0,0 +1,31 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
+const fs = require('fs')
+const path = require('path')
+
+const ICONS_DIR = path.join(process.cwd(), 'src/lib/components/icons')
+
+const generateIconTypes = () => {
+  try {
+    const files = fs.readdirSync(ICONS_DIR)
+    const svgNames = files
+      .filter((file) => file.endsWith('.svg'))
+      .map((file) => file.replace(/\.svg$/, ''))
+
+    const typeContent = `// Auto-generated file - DO NOT EDIT
+export type ValidIconNames = ${svgNames.map((name) => `'${name}'`).join(' | ')};
+`
+
+    fs.writeFileSync(
+      path.join(process.cwd(), 'src/lib/components/icons/icon-names.d.ts'),
+      typeContent
+    )
+
+    console.log('✅ Icon types generated successfully')
+  } catch (error) {
+    console.error('Error generating icon types:', error)
+    process.exit(1)
+  }
+}
+
+generateIconTypes()

package/src/@types/declarations.d.ts

@@ -0,0 +1,25 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.css'
+
+declare module '*.css?inline'
+
+declare module '*.png'
+
+declare module '*.jpg'
+
+declare module '*.gif'
+
+declare module '*?url'
+
+declare module '*.svg?url'
+
+declare module '*.svg' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+  const content: string
+  export { ReactComponent }
+  export default content
+}

package/src/@types/env.d.ts

@@ -0,0 +1 @@
+declare module 'HotmartTutorAIConsumer/*'

package/src/@types/global.types.ts

@@ -0,0 +1,64 @@
+import type { PropsWithChildren } from 'react'
+
+export type Logos = {
+  type: 'light' | 'dark'
+  imageUrl: string
+}
+
+export type Banners = {
+  imageUrlWeb: string
+  imageUrlMobile: string
+  url: string
+  altText: string
+}
+
+export type Settings = {
+  primaryColor: string
+  logoAltText: string
+  logos: Logos[]
+  banners: Banners[]
+  orientation: { global: 'HORIZONTAL' | 'VERTICAL' }
+}
+
+export type Membership = {
+  id: string
+  name: string
+  ownerId?: number
+  ownerUcode: string
+  settings: Settings
+  roles: string[]
+}
+
+export enum Roles {
+  OWNER = 'OWNER',
+  VIEWER = 'VIEWER'
+}
+
+export type UserInfo = {
+  id: string
+  name: string
+  email: string
+  role: Roles
+  isMembership: boolean
+  isAttendant: boolean
+  ucode?: string
+  permission: {
+    addProduct: boolean
+    deleteProduct: boolean
+  }
+  avatar: string
+}
+
+export type MicrofrontEndProps = {
+  locale: string
+  membership: Membership
+  slug: string
+  token: string
+  user: UserInfo
+  isOwner: boolean
+  baseUrl: string
+}
+
+export type IMicrofrontEndProps = Partial<PropsWithChildren<MicrofrontEndProps>>
+
+export type IQueryDataUpdater<T = unknown> = T | ((args: T) => T)

package/src/@types/index.d.ts

@@ -0,0 +1,16 @@
+import type { StartTutorWidgetProps } from '@/src/types'
+
+export {}
+
+declare global {
+  interface WindowEventMap {}
+
+  type OptionalSpread<T> = T extends undefined ? [] : [T]
+
+  interface Window {
+    __INJECT_CSS_MODULE__?: (cssText: string, id: string) => void
+    startTutorWidget: (props: StartTutorWidgetProps) => Promise<void>
+    closeTutorWidget: () => void
+    TOKEN: string
+  }
+}

package/src/config/i18n/constants.ts

@@ -0,0 +1,9 @@
+export const LANGUAGES = {
+  EN: 'en',
+  ES: 'es',
+  PT_BR: 'pt_BR'
+} as const
+
+export const DEFAULT_LANGUAGE = LANGUAGES.EN
+
+export const LANG_RESOURCES = new Set(Object.values(LANGUAGES))

package/src/config/i18n/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-app-lang'

package/src/config/i18n/hooks/use-app-lang/index.ts

@@ -0,0 +1 @@
+export { default as useAppLang } from './use-app-lang'

package/src/config/i18n/hooks/use-app-lang/use-app-lang.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+
+import { productionMode } from '@/src/lib/utils'
+import i18n from '../../init'
+import type { ILanguages } from '../../types'
+import { getLang } from '../../utils/get-lang'
+
+const useAppLang = (lng?: ILanguages) => {
+  const language = getLang(lng)
+
+  useEffect(() => {
+    if (i18n?.language && i18n.language === language) return
+
+    void i18n.changeLanguage(language, (err) => {
+      if (!err) return
+
+      console[productionMode ? 'warn' : 'error']('user: ', err)
+    })
+  }, [language])
+}
+
+export default useAppLang

package/src/config/i18n/index.ts

@@ -0,0 +1,5 @@
+export * from './constants'
+export * from './hooks'
+export { default } from './init'
+export * from './init'
+export * from './types'

package/src/config/i18n/init.ts

@@ -0,0 +1,44 @@
+import i18n from 'i18next'
+import resourcesToBackend from 'i18next-resources-to-backend'
+import { initReactI18next } from 'react-i18next'
+
+import { devMode } from '@/src/lib/utils'
+
+import { DEFAULT_LANGUAGE, LANG_RESOURCES, LANGUAGES } from './constants'
+import type { ILangs } from './types'
+
+let i18nInitialized = false
+
+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]
+
+  if (!LANG_RESOURCES.has(lng)) lng = DEFAULT_LANGUAGE
+
+  await i18n
+    .use(initReactI18next)
+    .use(
+      resourcesToBackend(() => {
+        return import(`@/public/locales/${lng}.json`)
+      })
+    )
+    .init({
+      debug: devMode,
+      fallbackLng: [DEFAULT_LANGUAGE, LANGUAGES.PT_BR],
+      preload: [DEFAULT_LANGUAGE, LANGUAGES.PT_BR],
+      load: 'currentOnly',
+      lng: lng || DEFAULT_LANGUAGE,
+      interpolation: {
+        escapeValue: false
+      },
+      returnEmptyString: false
+    })
+
+  i18nInitialized = true
+}
+
+export const t = i18n.t.bind(i18n)
+
+export default i18n

package/src/config/i18n/types.ts

@@ -0,0 +1,5 @@
+import type { LANGUAGES } from './constants'
+
+export type ILangs = typeof LANGUAGES
+
+export type ILanguages = ILangs[keyof ILangs]

package/src/config/i18n/utils/get-lang.ts

@@ -0,0 +1,10 @@
+import { DEFAULT_LANGUAGE, LANGUAGES } from '../constants'
+import type { ILanguages } from '../types'
+
+export const getLang = (lng?: string) => {
+  if (lng && lng.match(/^pt/gi)) return LANGUAGES.PT_BR
+
+  if (lng && Object.values(LANGUAGES).includes(lng as ILanguages)) return lng as ILanguages
+
+  return DEFAULT_LANGUAGE
+}