@developer_tribe/react-native-comnyx 0.1.1 → 0.2.0

package/lib/typescript/module/src/types/Conversation.d.ts

@@ -0,0 +1,26 @@
+export interface ConversationMessage {
+    id: number;
+    content: string;
+    created_at: string;
+    user: any | null;
+}
+export interface AppConversationMessage extends Omit<ConversationMessage, 'id' | 'created_at'> {
+    id: number | null;
+    approved?: boolean;
+    created_at: Date;
+}
+export interface ConversationPage {
+    current_page: number;
+    data: ConversationMessage[];
+    first_page_url: string;
+    from: number;
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+}
+export interface ConversationResponse {
+    page: ConversationPage;
+}
+//# sourceMappingURL=Conversation.d.ts.map

package/lib/typescript/module/src/types/Conversation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../../../src/types/Conversation.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,CAAC;IACtD,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,gBAAgB,CAAC;CACxB"}

package/lib/typescript/module/src/types/Customer.d.ts

@@ -0,0 +1,30 @@
+export interface CustomParameter {
+    name: string;
+    value: string;
+}
+export interface CreateCustomerRequest {
+    name: string;
+    country: string;
+    language: string;
+    externalId: string;
+    email: string;
+    phone: string;
+    ipAddress: string;
+    customParameters?: CustomParameter[];
+}
+export interface Customer {
+    id: number;
+    project_id: number;
+    external_id: string;
+    name: string;
+    country: string;
+    language: string;
+    email: string;
+    phone: string;
+    ip_address: string;
+    custom_parameters: string;
+    user_code: string;
+    updated_at: string;
+    created_at: string;
+}
+//# sourceMappingURL=Customer.d.ts.map

package/lib/typescript/module/src/types/Customer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Customer.d.ts","sourceRoot":"","sources":["../../../../../src/types/Customer.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;CACtC;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB"}

package/lib/typescript/module/src/types/Language.d.ts

@@ -0,0 +1,2 @@
+export type LanguageCode = 'en' | 'tr' | 'es' | 'fr' | 'de' | 'it' | 'pt' | 'ru' | 'ja' | 'zh';
+//# sourceMappingURL=Language.d.ts.map

package/lib/typescript/module/src/types/Language.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Language.d.ts","sourceRoot":"","sources":["../../../../../src/types/Language.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GACpB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC"}

package/lib/typescript/module/src/types/LocalizationKeys.d.ts

@@ -0,0 +1,22 @@
+export type LocalizationKeys = {
+    'customer.form.title': string;
+    'customer.form.email': string;
+    'customer.form.phone': string;
+    'customer.form.country': string;
+    'customer.form.submit': string;
+    'customer.form.error': string;
+    'customer.form.instructions': string;
+    'customer.form.error.country': string;
+    'customer.form.error.email': string;
+    'customer.form.error.phone': string;
+    'customer.form.placeholder.name': string;
+    'customer.form.placeholder.country': string;
+    'customer.form.placeholder.email': string;
+    'customer.form.placeholder.phone': string;
+    'chat.messageInput.placeholder': string;
+    'app.initialization.required': string;
+    'chat.load.error': string;
+    'chat.init.error': string;
+    'chat.empty': string;
+};
+//# sourceMappingURL=LocalizationKeys.d.ts.map

package/lib/typescript/module/src/types/LocalizationKeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalizationKeys.d.ts","sourceRoot":"","sources":["../../../../../src/types/LocalizationKeys.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4BAA4B,EAAE,MAAM,CAAC;IACrC,6BAA6B,EAAE,MAAM,CAAC;IACtC,2BAA2B,EAAE,MAAM,CAAC;IACpC,2BAA2B,EAAE,MAAM,CAAC;IACpC,gCAAgC,EAAE,MAAM,CAAC;IACzC,mCAAmC,EAAE,MAAM,CAAC;IAC5C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,iCAAiC,EAAE,MAAM,CAAC;IAC1C,+BAA+B,EAAE,MAAM,CAAC;IACxC,6BAA6B,EAAE,MAAM,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/lib/typescript/module/src/types/MessageResponse.d.ts

@@ -0,0 +1,59 @@
+export interface MessageResponse {
+    message: {
+        conversation_id: number;
+        content: string;
+        is_note: boolean;
+        updated_at: string;
+        created_at: string;
+        id: number;
+        user: null | any;
+        conversation: {
+            id: number;
+            project_id: number;
+            customer_id: number;
+            created_at: string;
+            updated_at: string;
+            deleted_at: null | string;
+            language: string;
+            use_ai_answers: number;
+            project: {
+                id: number;
+                name: string;
+                organization_id: number;
+                created_at: string;
+                updated_at: string;
+                deleted_at: null | string;
+                uuid: string;
+                organization: {
+                    id: number;
+                    name: string;
+                    created_at: string;
+                    updated_at: string;
+                    deleted_at: null | string;
+                    owner: Array<{
+                        id: number;
+                        name: string;
+                        email: string;
+                        email_verified_at: null | string;
+                        created_at: string;
+                        updated_at: string;
+                        avatar: null | string;
+                        two_factor_secret: null | string;
+                        two_factor_recovery_codes: null | string;
+                        is_bot: boolean;
+                        profile_photo_url: string;
+                        pivot: {
+                            organization_id: number;
+                            user_id: number;
+                            role: string;
+                            created_at: string;
+                            updated_at: string;
+                        };
+                    }>;
+                };
+            };
+        };
+        events: any[];
+    };
+}
+//# sourceMappingURL=MessageResponse.d.ts.map

package/lib/typescript/module/src/types/MessageResponse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageResponse.d.ts","sourceRoot":"","sources":["../../../../../src/types/MessageResponse.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,OAAO,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,IAAI,GAAG,GAAG,CAAC;QACjB,YAAY,EAAE;YACZ,EAAE,EAAE,MAAM,CAAC;YACX,UAAU,EAAE,MAAM,CAAC;YACnB,WAAW,EAAE,MAAM,CAAC;YACpB,UAAU,EAAE,MAAM,CAAC;YACnB,UAAU,EAAE,MAAM,CAAC;YACnB,UAAU,EAAE,IAAI,GAAG,MAAM,CAAC;YAC1B,QAAQ,EAAE,MAAM,CAAC;YACjB,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE;gBACP,EAAE,EAAE,MAAM,CAAC;gBACX,IAAI,EAAE,MAAM,CAAC;gBACb,eAAe,EAAE,MAAM,CAAC;gBACxB,UAAU,EAAE,MAAM,CAAC;gBACnB,UAAU,EAAE,MAAM,CAAC;gBACnB,UAAU,EAAE,IAAI,GAAG,MAAM,CAAC;gBAC1B,IAAI,EAAE,MAAM,CAAC;gBACb,YAAY,EAAE;oBACZ,EAAE,EAAE,MAAM,CAAC;oBACX,IAAI,EAAE,MAAM,CAAC;oBACb,UAAU,EAAE,MAAM,CAAC;oBACnB,UAAU,EAAE,MAAM,CAAC;oBACnB,UAAU,EAAE,IAAI,GAAG,MAAM,CAAC;oBAC1B,KAAK,EAAE,KAAK,CAAC;wBACX,EAAE,EAAE,MAAM,CAAC;wBACX,IAAI,EAAE,MAAM,CAAC;wBACb,KAAK,EAAE,MAAM,CAAC;wBACd,iBAAiB,EAAE,IAAI,GAAG,MAAM,CAAC;wBACjC,UAAU,EAAE,MAAM,CAAC;wBACnB,UAAU,EAAE,MAAM,CAAC;wBACnB,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;wBACtB,iBAAiB,EAAE,IAAI,GAAG,MAAM,CAAC;wBACjC,yBAAyB,EAAE,IAAI,GAAG,MAAM,CAAC;wBACzC,MAAM,EAAE,OAAO,CAAC;wBAChB,iBAAiB,EAAE,MAAM,CAAC;wBAC1B,KAAK,EAAE;4BACL,eAAe,EAAE,MAAM,CAAC;4BACxB,OAAO,EAAE,MAAM,CAAC;4BAChB,IAAI,EAAE,MAAM,CAAC;4BACb,UAAU,EAAE,MAAM,CAAC;4BACnB,UAAU,EAAE,MAAM,CAAC;yBACpB,CAAC;qBACH,CAAC,CAAC;iBACJ,CAAC;aACH,CAAC;SACH,CAAC;QACF,MAAM,EAAE,GAAG,EAAE,CAAC;KACf,CAAC;CACH"}

package/lib/typescript/module/src/types/Theme.d.ts

@@ -0,0 +1,18 @@
+export interface ThemeColors {
+    primary: string;
+    secondary: string;
+    background: string;
+    text: string;
+    error: string;
+    success: string;
+    warning: string;
+    info: string;
+    border: string;
+}
+export declare const lightTheme: ThemeColors;
+export declare const darkTheme: ThemeColors;
+export interface Theme {
+    light: ThemeColors;
+    dark: ThemeColors;
+}
+//# sourceMappingURL=Theme.d.ts.map

package/lib/typescript/module/src/types/Theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../../../src/types/Theme.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,WAUxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAUvB,CAAC;AAEF,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;CACnB"}

package/lib/typescript/module/src/utils/date.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Converts a Date object to Unix timestamp (seconds)
+ * @param date - The Date object to convert
+ * @returns Unix timestamp in seconds, or undefined if date is undefined
+ */
+export declare const dateToUnixTimestamp: (date: Date | undefined) => number | undefined;
+//# sourceMappingURL=date.d.ts.map

package/lib/typescript/module/src/utils/date.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../../../src/utils/date.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,SACxB,IAAI,GAAG,SAAS,KACrB,MAAM,GAAG,SAGX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-native-comnyx",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "React Native chat component with integrated support panel, enabling real-time customer communication and efficient agent workflow management.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -65,11 +65,13 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^19.6.0",
     "@evilmartians/lefthook": "^1.5.0",
+    "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native-community/cli": "15.0.1",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.44",
+    "axios": "1.7.9",
     "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
     "eslint": "^8.51.0",
@@ -82,12 +84,15 @@
     "react-native-builder-bob": "^0.38.3",
     "release-it": "^17.10.0",
     "turbo": "^1.10.7",
-    "typescript": "^5.2.2"
+    "typescript": "5.1.6",
+    "use-sync-external-store": "^1.5.0",
+    "zustand": "^5.0.3"
   },
   "resolutions": {
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=2.0.0",
     "react": "*",
     "react-native": "*"
   },
@@ -199,5 +204,8 @@
   },
   "engines": {
     "node": ">=22.0.0"
+  },
+  "dependencies": {
+    "react-hook-form": "^7.55.0"
   }
 }

package/src/App.tsx

@@ -0,0 +1,59 @@
+import { View, StyleSheet } from 'react-native';
+import { useAppStore } from './store';
+import { ChatList } from './components/ChatList';
+import { CustomerForm } from './components/CustomerForm';
+import type { LanguageCode } from './types/Language';
+import { useEffect } from 'react';
+import { AppText } from './components/AppText';
+import { useThemeColors } from './hooks/useThemeColors';
+import { usePolling } from './hooks/usePolling';
+
+interface ComnyxProps {
+  language?: LanguageCode;
+  theme?: 'light' | 'dark';
+  fake?: boolean;
+}
+
+export function Comnyx({
+  language = 'en',
+  theme = 'dark',
+  fake = false,
+}: ComnyxProps) {
+  const { initialized, customer } = useAppStore((s) => ({
+    initialized: s.initialized,
+    customer: s.customer,
+  }));
+  const themeColors = useThemeColors();
+  usePolling();
+  useEffect(() => {
+    useAppStore.getState().setLanguage(language);
+    useAppStore.getState().setTheme(theme);
+    useAppStore.getState().setFake(fake);
+  }, [language, theme, fake]);
+
+  if (!initialized) {
+    return (
+      <View
+        style={[styles.container, { backgroundColor: themeColors.background }]}
+      >
+        <AppText localization="app.initialization.required" />
+      </View>
+    );
+  } else if (!customer) {
+    return <CustomerForm />;
+  }
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: themeColors.background }]}
+    >
+      <ChatList />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/__dev__.ts

@@ -0,0 +1,22 @@
+import { useAppStore } from './store';
+import type { LanguageCode } from './types/Language';
+
+// @ts-ignore
+global.clearStorage = async () => {
+  useAppStore.setState({ data: null });
+  console.info('Storage cleared');
+};
+
+// @ts-ignore
+global.changeLanguage = (language: string) => {
+  useAppStore.setState({ language: language as LanguageCode });
+  console.info(`Language changed to: ${language}`);
+};
+
+// @ts-ignore
+global.toggleTheme = () => {
+  const currentTheme = useAppStore.getState().theme;
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  useAppStore.setState({ theme: newTheme });
+  console.info(`Theme changed to: ${newTheme}`);
+};

package/src/api/api.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+const axiosInstance = axios.create({
+  //baseURL: 'https://api.comnyx.com',
+  baseURL: 'https://stage.comnyx.com',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 1000,
+});
+
+export function initApi(token: string) {
+  axiosInstance.defaults.headers.common['Content-Type'] = 'application/json';
+  axiosInstance.defaults.headers.common.Authorization = 'Bearer ' + token;
+}
+
+export { axiosInstance };

package/src/api/conversations.ts

@@ -0,0 +1,53 @@
+import type { ConversationResponse } from '../types/Conversation';
+import type { ApiOptions } from '../types/ApiOptions';
+import {
+  getFakeConversationResponse,
+  getFakePaginatedConversationResponse,
+} from '../data/fake/conversations';
+import { axiosInstance } from './api';
+import { dateToUnixTimestamp } from '../utils/date';
+
+const PER_PAGE = 25;
+
+export function getCustomerConversation(
+  externalId: string,
+  created_at: Date | undefined,
+  page: number = 0,
+  options: ApiOptions & { per_page?: number }
+): Promise<ConversationResponse> {
+  if (options.fake) {
+    return getFakePaginatedConversationResponse(
+      page,
+      options.per_page ?? PER_PAGE
+    );
+  }
+  return axiosInstance
+    .get<ConversationResponse>(`/api/customers/${externalId}/conversation`, {
+      params: {
+        page,
+        // per_page: PER_PAGE,
+        getOld: 1,
+        getFrom: dateToUnixTimestamp(created_at),
+      },
+    })
+    .then((res) => res.data);
+}
+
+export function getNewCustomerConversation(
+  externalId: string,
+  created_at: Date | undefined,
+  options: ApiOptions
+): Promise<ConversationResponse> {
+  if (options.fake) {
+    return getFakeConversationResponse(25, 0, 0, true);
+  }
+  return axiosInstance
+    .get<ConversationResponse>(`/api/customers/${externalId}/conversation`, {
+      params: {
+        page: 1,
+        // per_page: 25,
+        getFrom: dateToUnixTimestamp(created_at),
+      },
+    })
+    .then((res) => res.data);
+}

package/src/api/customers.ts

@@ -0,0 +1,16 @@
+import type { CreateCustomerRequest, Customer } from '../types/Customer';
+import type { ApiOptions } from '../types/ApiOptions';
+import { getFakeCustomer } from '../data/fake/customers';
+import { axiosInstance } from './api';
+
+export function createCustomer(
+  customerData: CreateCustomerRequest,
+  options: ApiOptions
+): Promise<Customer> {
+  if (options.fake) {
+    return Promise.resolve(getFakeCustomer(customerData));
+  }
+  return axiosInstance
+    .post('/api/customers/create', customerData)
+    .then((res) => res.data);
+}

package/src/api/index.ts

@@ -0,0 +1,6 @@
+export { createCustomer } from './customers';
+export {
+  getCustomerConversation,
+  getNewCustomerConversation,
+} from './conversations';
+export { sendCustomerMessage } from './messages';

package/src/api/messages.ts

@@ -0,0 +1,33 @@
+import type { MessageResponse } from '../types/MessageResponse';
+import type { ApiOptions } from '../types/ApiOptions';
+import { getFakeMessageResponse } from '../data/fake/messages';
+import { axiosInstance } from './api';
+
+export function sendCustomerMessage(
+  externalId: string,
+  content: string,
+  options: ApiOptions
+): Promise<MessageResponse> {
+  if (options.fake) {
+    return new Promise<MessageResponse>((resolve, _) => {
+      setTimeout(() => {
+        resolve(getFakeMessageResponse(content));
+      }, 500);
+    });
+  }
+  return axiosInstance
+    .post<MessageResponse>(
+      '/api/customers/message',
+      {
+        externalId,
+        content,
+      },
+      {
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+      }
+    )
+    .then((res) => res.data);
+}

package/src/components/AppText.tsx

@@ -0,0 +1,43 @@
+import { Text } from 'react-native';
+import type { TextProps } from 'react-native';
+import { LocalizationList } from '../constants/translations';
+import { useAppStore } from '../store';
+import { useThemeColors } from '../hooks/useThemeColors';
+import type { LocalizationKeys } from '../types/LocalizationKeys';
+
+interface AppTextProps extends Omit<TextProps, 'children'> {
+  localization?: keyof LocalizationKeys;
+  children?: React.ReactNode;
+}
+
+export function AppText({
+  style,
+  localization,
+  children,
+  ...props
+}: AppTextProps) {
+  const themeColors = useThemeColors();
+  const { language } = useAppStore((s) => ({
+    language: s.language,
+  }));
+
+  const localizedText = localization
+    ? (LocalizationList[language as keyof typeof LocalizationList] ||
+        LocalizationList.en)[localization]
+    : undefined;
+
+  const content = localizedText || children;
+
+  if (!content) {
+    console.warn(
+      'AppText: No content provided. Either localization or children must be provided.'
+    );
+    return null;
+  }
+
+  return (
+    <Text style={[{ color: themeColors.text }, style]} {...props}>
+      {content}
+    </Text>
+  );
+}