@developer_tribe/react-native-comnyx 0.4.4 → 0.4.6

package/src/components/ChatList.tsx

@@ -47,10 +47,10 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
     (windowHeight - FLATLIST_PADDING) / MESSAGE_MIN_HEIGHT
   );
   const [loading, setLoading] = useState(true);
-  const { data, setData, externalId } = useAppStore((s) => ({
+  const { data, setData, customer } = useAppStore((s) => ({
     data: s.data,
     setData: s.setData,
-    externalId: s.externalId,
+    customer: s.customer,
   }));
   const ref = useRef<SectionList<AppConversationMessage>>(null);
   const [page, setPage] = useState(1);
@@ -131,7 +131,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
   }, [data]);
 
   const resendMessage = useCallback(() => {
-    if (selectedMessage && externalId) {
+    if (selectedMessage && customer?.external_id) {
       const currentMessage = useAppStore.getState().data || [];
       const messageIndex = currentMessage.findIndex(
         (msg) => msg.content === selectedMessage
@@ -155,7 +155,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
           data: updatedValue,
         });
 
-        sendCustomerMessage(externalId, selectedMessage, {
+        sendCustomerMessage(customer.external_id, selectedMessage, {
           fake: useAppStore.getState().fake,
         })
           .then((res: any) => {
@@ -214,21 +214,26 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
           });
       }
     }
-  }, [selectedMessage, externalId]);
+  }, [selectedMessage, customer]);
 
   const nextPage = useCallback(() => {
     if (nextPageStatus.current) {
       return;
     }
     nextPageStatus.current = 'loading';
-    if (externalId) {
+    if (customer?.external_id) {
       const newPage = page + 1;
       setPage(newPage);
       const firstMessage = useAppStore.getState().firstMessage;
-      getCustomerConversation(externalId, firstMessage?.created_at, newPage, {
-        fake: useAppStore.getState().fake,
-        per_page: MESSAGES_PER_PAGE,
-      })
+      getCustomerConversation(
+        customer.external_id,
+        firstMessage?.created_at,
+        newPage,
+        {
+          fake: useAppStore.getState().fake,
+          per_page: MESSAGES_PER_PAGE,
+        }
+      )
         .then((newData) => {
           listChangedRef.current = true;
           setData((prevData) => {
@@ -277,7 +282,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
           setLoading(false);
         });
     }
-  }, [MESSAGES_PER_PAGE, externalId, page, setData]);
+  }, [MESSAGES_PER_PAGE, customer, page, setData]);
 
   const renderItem = useCallback(
     ({ item }: { item: AppConversationMessage }) => {
@@ -412,8 +417,8 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
   );
 
   useEffect(() => {
-    if (externalId && !initFailed) {
-      getCustomerConversation(externalId, new Date(), 1, {
+    if (customer?.external_id && !initFailed) {
+      getCustomerConversation(customer?.external_id, new Date(), 1, {
         fake: useAppStore.getState().fake,
         per_page: MESSAGES_PER_PAGE,
       })
@@ -437,7 +442,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
               if (processedMessages.length === 0) {
                 setLoading(false);
               }
-              return [...prevData, ...processedMessages];
+              return [...processedMessages];
             } else {
               // Handle the case where there's no previous data
               const processedMessages = newMessages.map((u) => ({
@@ -463,7 +468,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
           setLoading(false);
         });
     }
-  }, [MESSAGES_PER_PAGE, externalId, initFailed, setData]);
+  }, [MESSAGES_PER_PAGE, customer?.external_id, initFailed, setData]);
 
   // Initialize the current section when sections are loaded
   useEffect(() => {

package/src/components/CustomerForm.tsx

@@ -72,17 +72,17 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
 
   const onSubmit = async (data: CustomerFormData) => {
     try {
-      const customer = await createCustomer(
+      const res = await createCustomer(
         {
           ...data,
           language: 'en',
           customParameters: [],
         },
         { fake: useAppStore.getState().fake },
-        useAppStore.getState().externalId || ''
+        useAppStore.getState().customer?.external_id ?? ''
       );
-      if (customer !== undefined) {
-        useAppStore.getState().setForm(customer);
+      if (res) {
+        useAppStore.getState().setForm(res.customer);
       }
     } catch (error) {
       console.error('Error creating customer:', error);
@@ -190,6 +190,10 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
               <Controller
                 control={control}
                 rules={{
+                  required: {
+                    value: true,
+                    message: localize('customer.form.validation.name.required'),
+                  },
                   maxLength: {
                     value: 30,
                     message: localize(

package/src/components/MessageInput.tsx

@@ -17,7 +17,6 @@ export function MessageInput({
 }) {
   const [value, setValue] = useState('');
   const customer = useAppStore((s) => s.customer!);
-  const externalId = useAppStore((s) => s.externalId);
   const themeColors = useThemeColors();
   const localize = useLocalize();
 
@@ -37,7 +36,7 @@ export function MessageInput({
         },
         ...(data ?? []),
       ]);
-      sendCustomerMessage(externalId as string, value, {
+      sendCustomerMessage(customer.external_id as string, value, {
         fake: useAppStore.getState().fake,
       })
         .then((res) => {

package/src/constants/translations.ts

@@ -14,6 +14,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': 'Country is required',
     'customer.form.error.email': 'Valid email is required',
     'customer.form.error.phone': 'Phone is required',
+    'customer.form.validation.name.required': 'Name is required',
     'customer.form.placeholder.name': 'Enter your name',
     'customer.form.placeholder.country': 'Enter your country',
     'customer.form.placeholder.email': 'Enter your email',
@@ -60,6 +61,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': 'Ülke zorunludur',
     'customer.form.error.email': 'Geçerli bir e-posta adresi gerekli',
     'customer.form.error.phone': 'Telefon alanı zorunludur',
+    'customer.form.validation.name.required': 'İsim zorunludur',
     'customer.form.placeholder.name': 'Adınızı girin',
     'customer.form.placeholder.country': 'Ülkenizi girin',
     'customer.form.placeholder.email': 'E-posta adresinizi girin',
@@ -106,6 +108,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': 'País es obligatorio',
     'customer.form.error.email': 'Se requiere un correo electrónico válido',
     'customer.form.error.phone': 'El teléfono es requerido',
+    'customer.form.validation.name.required': 'El nombre es requerido',
     'customer.form.placeholder.name': 'Ingrese su nombre',
     'customer.form.placeholder.country': 'Ingrese su país',
     'customer.form.placeholder.email': 'Ingrese su correo electrónico',
@@ -154,6 +157,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': 'Le pays est obligatoire',
     'customer.form.error.email': 'Un email valide est requis',
     'customer.form.error.phone': 'Le téléphone est requis',
+    'customer.form.validation.name.required': 'Le nom est requis',
     'customer.form.placeholder.name': 'Entrez votre nom',
     'customer.form.placeholder.country': 'Entrez votre pays',
     'customer.form.placeholder.email': 'Entrez votre email',
@@ -203,6 +207,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': 'Land ist erforderlich',
     'customer.form.error.email': 'Eine gültige E-Mail-Adresse ist erforderlich',
     'customer.form.error.phone': 'Telefon ist erforderlich',
+    'customer.form.validation.name.required': 'Name ist erforderlich',
     'customer.form.placeholder.name': 'Geben Sie Ihren Namen ein',
     'customer.form.placeholder.country': 'Geben Sie Ihr Land ein',
     'customer.form.placeholder.email': 'Geben Sie Ihre E-Mail-Adresse ein',
@@ -253,6 +258,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': 'Il paese è obbligatorio',
     'customer.form.error.email': "È richiesta un'email valida",
     'customer.form.error.phone': 'Il telefono è obbligatorio',
+    'customer.form.validation.name.required': 'Il nome è obbligatorio',
     'customer.form.placeholder.name': 'Inserisci il tuo nome',
     'customer.form.placeholder.country': 'Inserisci il tuo paese',
     'customer.form.placeholder.email': 'Inserisci la tua email',
@@ -300,6 +306,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': 'País é obrigatório',
     'customer.form.error.email': 'Um email válido é obrigatório',
     'customer.form.error.phone': 'O telefone é obrigatório',
+    'customer.form.validation.name.required': 'O nome é obrigatório',
     'customer.form.placeholder.name': 'Digite seu nome',
     'customer.form.placeholder.country': 'Digite seu país',
     'customer.form.placeholder.email': 'Digite seu email',
@@ -349,6 +356,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': 'Страна обязательна',
     'customer.form.error.email': 'Требуется действительный email',
     'customer.form.error.phone': 'Телефон обязателен',
+    'customer.form.validation.name.required': 'Имя обязательно',
     'customer.form.placeholder.name': 'Введите ваше имя',
     'customer.form.placeholder.country': 'Введите вашу страну',
     'customer.form.placeholder.email': 'Введите ваш email',
@@ -398,6 +406,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': '国は必須です',
     'customer.form.error.email': '有効なメールアドレスが必要です',
     'customer.form.error.phone': '電話番号は必須です',
+    'customer.form.validation.name.required': '名前は必須です',
     'customer.form.placeholder.name': 'お名前を入力してください',
     'customer.form.placeholder.country': '国を入力してください',
     'customer.form.placeholder.email': 'メールアドレスを入力してください',
@@ -444,6 +453,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.error.country': '国家为必填项',
     'customer.form.error.email': '需要有效的电子邮件',
     'customer.form.error.phone': '电话为必填项',
+    'customer.form.validation.name.required': '姓名为必填项',
     'customer.form.placeholder.name': '请输入您的姓名',
     'customer.form.placeholder.country': '请输入您的国家',
     'customer.form.placeholder.email': '请输入您的电子邮件',

package/src/hooks/usePolling.ts

@@ -5,18 +5,18 @@ import { getNewCustomerConversation } from '../api';
 const NEW_MESSAGES_CHECK_INTERVAL = 10000;
 
 export function usePolling() {
-  const { data, setData, externalId } = useAppStore((s) => ({
+  const { data, setData, customer } = useAppStore((s) => ({
     data: s.data,
     setData: s.setData,
-    externalId: s.externalId,
+    customer: s.customer,
   }));
   const lastMessage = data ? data[data.length - 1] : null;
   useEffect(() => {
     const created_at = lastMessage?.created_at;
     let interval: NodeJS.Timeout | null = null;
-    if (externalId && created_at) {
+    if (customer && created_at) {
       interval = setInterval(() => {
-        getNewCustomerConversation(externalId, created_at, {
+        getNewCustomerConversation(customer?.external_id, created_at, {
           fake: useAppStore.getState().fake,
         }).then((newData) => {
           setData((prevData) => {
@@ -42,5 +42,5 @@ export function usePolling() {
         clearInterval(interval);
       }
     };
-  }, [externalId, lastMessage?.created_at, setData]);
+  }, [customer, lastMessage?.created_at, setData]);
 }

package/src/register.ts

@@ -1,7 +1,7 @@
 import { accumulator } from './Accumulator';
 import { initApi } from './api/api';
 import { useAppStore } from './store';
-import { createCustomer } from './api/customers';
+import { createCustomer } from './api';
 import type { CreateCustomerRequest } from './types/Customer';
 
 export function registerComnyx(registerOptions: {
@@ -15,16 +15,15 @@ export function registerComnyx(registerOptions: {
     throw new Error('Authentication token is required');
   }
 
-  initApi(registerOptions.token);
-  useAppStore.getState().init({ externalId: registerOptions.externalId });
+  initApi(registerOptions.token, registerOptions.externalId);
   accumulator.register(async (accumulatedData: CreateCustomerRequest) => {
-    const customer = await createCustomer(
+    const data = await createCustomer(
       accumulatedData,
       {
         fake: false,
       },
       registerOptions.externalId
     );
-    useAppStore.getState().setCustomer(customer);
+    useAppStore.getState().setCustomer(data.customer);
   });
 }

package/src/store.ts

@@ -10,10 +10,8 @@ import type { LanguageCode } from './types/Language';
 interface AppStoreState {
   baseHeight: number;
   baseWidth: number;
-  initialized: boolean;
   customer: Customer | null;
   data: AppConversationMessage[] | null;
-  externalId: string | null;
   language: LanguageCode;
   theme: 'light' | 'dark';
   fake: boolean;
@@ -25,7 +23,6 @@ interface AppStoreState {
     ) => AppConversationMessage[] | null
   ) => void;
   setFirstMessage: (message: AppConversationMessage | null) => void;
-  init: ({ externalId }: { externalId: string }) => void;
   setCustomer: (createCustomerResponse: Customer) => void;
   setLanguage: (language: LanguageCode) => void;
   setTheme: (theme: 'light' | 'dark') => void;
@@ -45,7 +42,6 @@ const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   initialized: false,
   customer: null,
   data: null,
-  externalId: null,
   language: 'en',
   theme: 'light',
   fake: false,
@@ -59,11 +55,11 @@ const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   setFirstMessage: (message) => {
     set({ firstMessage: message });
   },
-  init: ({ externalId }: { externalId: string }) => {
-    set({ externalId: externalId });
-  },
   setCustomer: (createCustomerResponse: Customer) => {
-    set({ customer: createCustomerResponse, initialized: true });
+    set({
+      customer: createCustomerResponse,
+      formSubmitted: !!createCustomerResponse.name,
+    });
   },
   setLanguage: (language: LanguageCode) => {
     set({ language });
@@ -92,8 +88,6 @@ export const useAppStore = createWithEqualityFn<AppStoreState>()(
     skipHydration: false,
     partialize: (state) => ({
       customer: state.customer,
-      externalId: state.externalId,
-      initialized: state.initialized,
       formSubmitted: state.formSubmitted,
       data: state.data
         ?.filter((message) => message.approved)

package/src/types/LocalizationKeys.ts

@@ -17,6 +17,7 @@ export type LocalizationKeys = {
   'customer.form.validation.phone.invalid': string;
   'customer.form.validation.country.maxLength': string;
   'customer.form.validation.name.maxLength': string;
+  'customer.form.validation.name.required': string;
   'chat.messageInput.placeholder': string;
   'app.initialization.required': string;
   'chat.load.error': string;