@developer_tribe/react-native-comnyx 0.4.1 → 0.4.3

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

@@ -10,7 +10,6 @@ export interface IntegrationParameters {
     onesignal?: OneSignalIntegrationParameters;
 }
 export interface CreateCustomerRequest {
-    externalId: string;
     name?: string;
     country?: string;
     language?: string;
@@ -36,5 +35,6 @@ export interface Customer {
     created_at: string;
     updated_at: string;
     deleted_at: null | string;
+    integration_parameters: IntegrationParameters;
 }
 //# sourceMappingURL=Customer.d.ts.map

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

@@ -1 +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,8BAA8B;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,8BAA8B,CAAC;CAC5C;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C;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,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,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;IACnB,UAAU,EAAE,IAAI,GAAG,MAAM,CAAC;CAC3B"}
+{"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,8BAA8B;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,8BAA8B,CAAC;CAC5C;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C;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,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,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;IACnB,UAAU,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,sBAAsB,EAAE,qBAAqB,CAAC;CAC/C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-native-comnyx",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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",

package/src/Accumulator.ts

@@ -10,12 +10,8 @@ class Accumulator {
   private _isListenerCalledOnce: boolean = false;
   constructor() {}
 
-  register(
-    externalId: string,
-    listener: (data: CreateCustomerRequest) => Promise<void>
-  ) {
+  register(listener: (data: CreateCustomerRequest) => Promise<void>) {
     this.registerData = {
-      externalId,
       customParameters: [],
       integrationParameters: {},
     };

package/src/api/customers.ts

@@ -5,13 +5,18 @@ import { axiosInstance } from './api';
 
 export function createCustomer(
   customerData: CreateCustomerRequest,
-  options: ApiOptions
+  options: ApiOptions,
+  externalId: string
 ): Promise<Customer> {
   if (options.fake) {
     return Promise.resolve(getFakeCustomer(customerData));
   }
   console.info('[Comnyx] Adding customer info');
   return axiosInstance
-    .post('/api/customers/create', customerData)
+    .post('/api/customers/create', customerData, {
+      headers: {
+        'external-id': externalId,
+      },
+    })
     .then((res) => res.data);
 }

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 { customer, data, setData } = useAppStore((s) => ({
-    customer: s.customer,
+  const { data, setData, externalId } = useAppStore((s) => ({
     data: s.data,
     setData: s.setData,
+    externalId: s.externalId,
   }));
   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 && customer?.external_id) {
+    if (selectedMessage && externalId) {
       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(customer.external_id, selectedMessage, {
+        sendCustomerMessage(externalId, selectedMessage, {
           fake: useAppStore.getState().fake,
         })
           .then((res: any) => {
@@ -214,26 +214,21 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
           });
       }
     }
-  }, [selectedMessage, customer]);
+  }, [selectedMessage, externalId]);
 
   const nextPage = useCallback(() => {
     if (nextPageStatus.current) {
       return;
     }
     nextPageStatus.current = 'loading';
-    if (customer?.external_id) {
+    if (externalId) {
       const newPage = page + 1;
       setPage(newPage);
       const firstMessage = useAppStore.getState().firstMessage;
-      getCustomerConversation(
-        customer?.external_id,
-        firstMessage?.created_at,
-        newPage,
-        {
-          fake: useAppStore.getState().fake,
-          per_page: MESSAGES_PER_PAGE,
-        }
-      )
+      getCustomerConversation(externalId, firstMessage?.created_at, newPage, {
+        fake: useAppStore.getState().fake,
+        per_page: MESSAGES_PER_PAGE,
+      })
         .then((newData) => {
           listChangedRef.current = true;
           setData((prevData) => {
@@ -282,7 +277,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
           setLoading(false);
         });
     }
-  }, [MESSAGES_PER_PAGE, customer?.external_id, page, setData]);
+  }, [MESSAGES_PER_PAGE, externalId, page, setData]);
 
   const renderItem = useCallback(
     ({ item }: { item: AppConversationMessage }) => {
@@ -417,8 +412,8 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
   );
 
   useEffect(() => {
-    if (customer?.external_id && !initFailed) {
-      getCustomerConversation(customer?.external_id, new Date(), 1, {
+    if (externalId && !initFailed) {
+      getCustomerConversation(externalId, new Date(), 1, {
         fake: useAppStore.getState().fake,
         per_page: MESSAGES_PER_PAGE,
       })
@@ -468,7 +463,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
           setLoading(false);
         });
     }
-  }, [MESSAGES_PER_PAGE, customer?.external_id, initFailed, setData]);
+  }, [MESSAGES_PER_PAGE, externalId, initFailed, setData]);
 
   // Initialize the current section when sections are loaded
   useEffect(() => {
@@ -568,6 +563,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
         >
           <AppText
             localization="chat.support-team"
+            weight={'600'}
             style={[styles.header, { color: themeColors.text }]}
           />
           <View
@@ -742,12 +738,11 @@ const styles = ScaledSheet.create({
   header: {
     fontSize: '16@vs',
     textAlign: 'center',
-    fontWeight: 600,
   },
   liveChat: {
     fontSize: '16@vs',
     textAlign: 'center',
-    fontWeight: 600,
+    fontWeight: 400,
   },
   headerContainer: {
     alignItems: 'center',

package/src/components/CustomerForm.tsx

@@ -65,6 +65,8 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
           setLoading(false);
         }, 100);
       });
+    } else {
+      setLoading(false);
     }
   }, []);
 
@@ -74,10 +76,10 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
         {
           ...data,
           language: 'en',
-          externalId: useAppStore.getState().externalId || '',
           customParameters: [],
         },
-        { fake: useAppStore.getState().fake }
+        { fake: useAppStore.getState().fake },
+        useAppStore.getState().externalId || ''
       );
       if (customer !== undefined) {
         useAppStore.getState().setForm(customer);

package/src/components/MessageInput.tsx

@@ -17,6 +17,7 @@ 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();
 
@@ -36,7 +37,7 @@ export function MessageInput({
         },
         ...(data ?? []),
       ]);
-      sendCustomerMessage(customer.external_id, value, {
+      sendCustomerMessage(externalId as string, value, {
         fake: useAppStore.getState().fake,
       })
         .then((res) => {

package/src/data/fake/customers.ts

@@ -4,7 +4,6 @@ export function getFakeCustomer(customerData: CreateCustomerRequest): Customer {
   return {
     id: Math.floor(Math.random() * 1000),
     project_id: 1,
-    external_id: customerData.externalId,
     name: customerData.name!,
     country: customerData.country!,
     language: customerData.language!,

package/src/data/fake/messages.ts

@@ -11,7 +11,7 @@ export function getFakeMessageResponse(content: string): MessageResponse {
       id: Math.floor(Math.random() * 1000),
       user: null,
       customer: null,
-      bot: null ,
+      bot: null,
       conversation: {
         id: 1,
         project_id: 1,

package/src/hooks/usePolling.ts

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

package/src/register.ts

@@ -17,13 +17,14 @@ export function registerComnyx(registerOptions: {
 
   initApi(registerOptions.token);
   useAppStore.getState().init({ externalId: registerOptions.externalId });
-  accumulator.register(
-    registerOptions.externalId,
-    async (accumulatedData: CreateCustomerRequest) => {
-      const customer = await createCustomer(accumulatedData, {
+  accumulator.register(async (accumulatedData: CreateCustomerRequest) => {
+    const customer = await createCustomer(
+      accumulatedData,
+      {
         fake: false,
-      });
-      useAppStore.getState().setCustomer(customer);
-    }
-  );
+      },
+      registerOptions.externalId
+    );
+    useAppStore.getState().setCustomer(customer);
+  });
 }

package/src/types/Customer.ts

@@ -13,7 +13,6 @@ export interface IntegrationParameters {
 }
 
 export interface CreateCustomerRequest {
-  externalId: string;
   name?: string;
   country?: string;
   language?: string;
@@ -40,4 +39,5 @@ export interface Customer {
   created_at: string;
   updated_at: string;
   deleted_at: null | string;
+  integration_parameters: IntegrationParameters;
 }