@developer_tribe/react-native-comnyx 0.3.15 → 0.4.0

package/src/Accumulator.ts

@@ -0,0 +1,84 @@
+import type { CreateCustomerRequest } from './types/Customer';
+
+const ACCUMULATOR_DEBOUNCE_TIME_IN_MS = 3000;
+
+class Accumulator {
+  private registerData: CreateCustomerRequest | null = null;
+  private __select_time: NodeJS.Timeout | undefined = undefined;
+  private listener: ((data: CreateCustomerRequest) => Promise<void>) | null =
+    null;
+  private _isListenerCalledOnce: boolean = false;
+  constructor() {}
+
+  register(
+    externalId: string,
+    listener: (data: CreateCustomerRequest) => Promise<void>
+  ) {
+    this.registerData = {
+      externalId,
+      customParameters: [],
+      integrationParameters: {},
+    };
+    this.listener = listener;
+    this.debounce();
+  }
+
+  add(data: Partial<Omit<CreateCustomerRequest, 'externalId'>>) {
+    if (!this.registerData) {
+      throw new Error('Register data is not set');
+    }
+    this.registerData = {
+      ...this.registerData,
+      ...data,
+      integrationParameters: {
+        ...(this.registerData.integrationParameters || {}),
+        ...(data.integrationParameters || {}),
+      },
+      customParameters: [
+        ...(this.registerData.customParameters || []),
+        ...(data.customParameters || []),
+      ],
+    };
+    this.debounce();
+  }
+
+  async flush() {
+    if (!this.registerData) {
+      throw new Error('Register data is not set');
+    }
+    if (this.listener) {
+      await this.listener(this.registerData!);
+      this._isListenerCalledOnce = true;
+    }
+    this.reset();
+  }
+
+  debounce() {
+    if (!this.registerData) {
+      throw new Error('Register data is not set');
+    }
+    this.reset();
+    this.__select_time = setTimeout(() => {
+      if (this.listener) {
+        this.listener(this.registerData!);
+        this._isListenerCalledOnce = true;
+      }
+    }, ACCUMULATOR_DEBOUNCE_TIME_IN_MS);
+  }
+
+  reset() {
+    if (this.__select_time) {
+      clearTimeout(this.__select_time);
+    }
+  }
+
+  get() {
+    return this.registerData;
+  }
+
+  isListenerCalledOnce() {
+    return this._isListenerCalledOnce;
+  }
+}
+
+export const accumulator = new Accumulator();

package/src/App.tsx

@@ -23,9 +23,9 @@ export function Comnyx({
   onBack,
   themes,
 }: ComnyxProps) {
-  const { initialized, customer } = useAppStore((s) => ({
-    initialized: s.initialized,
-    customer: s.customer,
+  const { externalId, formSubmitted } = useAppStore((s) => ({
+    externalId: s.externalId,
+    formSubmitted: s.formSubmitted,
   }));
   const themeColors = useThemeColors();
   usePolling();
@@ -38,7 +38,7 @@ export function Comnyx({
     }
   }, [language, theme, fake, themes]);
 
-  if (!initialized) {
+  if (!externalId) {
     return (
       <View
         style={[styles.container, { backgroundColor: themeColors.background }]}
@@ -46,7 +46,7 @@ export function Comnyx({
         <AppText localization="app.initialization.required" />
       </View>
     );
-  } else if (!customer) {
+  } else if (!formSubmitted) {
     return <CustomerForm onBack={onBack} />;
   }
 

package/src/api/customers.ts

@@ -10,6 +10,7 @@ export function createCustomer(
   if (options.fake) {
     return Promise.resolve(getFakeCustomer(customerData));
   }
+  console.info('[Comnyx] Adding customer info');
   return axiosInstance
     .post('/api/customers/create', customerData)
     .then((res) => res.data);

package/src/collectData.ts

@@ -0,0 +1,26 @@
+import { accumulator } from './Accumulator';
+
+export function collectData(key: string, value: string) {
+  accumulator.add({
+    customParameters: [
+      {
+        name: key,
+        value,
+      },
+    ],
+  });
+}
+
+export function registerOneSignalForComnyx(
+  onesignal_id: string,
+  external_id: string
+) {
+  accumulator.add({
+    integrationParameters: {
+      onesignal: {
+        onesignal_id,
+        external_id,
+      },
+    },
+  });
+}

package/src/components/CustomerForm.tsx

@@ -6,6 +6,7 @@ import {
   Image,
   ScrollView,
   StatusBar,
+  ActivityIndicator,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useAppStore } from '../store';
@@ -14,10 +15,11 @@ import { AppText } from './AppText';
 import { useLocalize } from '../hooks/useLocalize';
 import { useThemeColors } from '../hooks/useThemeColors';
 import CustomPopup from './CustomAlert';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ScaledSheet } from './ScaledSheet';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
 import { activeOpacity } from '../constants/activeOpacity';
+import { accumulator } from '../Accumulator';
 
 interface CustomerFormData {
   name: string;
@@ -40,6 +42,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
     handleSubmit,
     formState: { errors },
   } = useForm<CustomerFormData>();
+  const [loading, setLoading] = useState(true);
   const themeColors = useThemeColors();
   const localize = useLocalize();
 
@@ -55,6 +58,16 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
     description: 'null',
   });
 
+  useEffect(() => {
+    if (!accumulator.isListenerCalledOnce()) {
+      accumulator.flush().then(() => {
+        setTimeout(() => {
+          setLoading(false);
+        }, 100);
+      });
+    }
+  }, []);
+
   const onSubmit = async (data: CustomerFormData) => {
     try {
       const customer = await createCustomer(
@@ -62,13 +75,12 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
           ...data,
           language: 'en',
           externalId: useAppStore.getState().externalId || '',
-          ipAddress: '192.168.1.1',
           customParameters: [],
         },
         { fake: useAppStore.getState().fake }
       );
       if (customer !== undefined) {
-        useAppStore.getState().initForm(customer);
+        useAppStore.getState().setForm(customer);
       }
     } catch (error) {
       console.error('Error creating customer:', error);
@@ -95,6 +107,19 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
     );
   };
 
+  if (loading) {
+    return (
+      <View
+        style={[
+          styles.loadingContainer,
+          { backgroundColor: themeColors.background },
+        ]}
+      >
+        <ActivityIndicator size="large" color={themeColors.light_text} />
+      </View>
+    );
+  }
+
   return (
     <>
       <StatusBar
@@ -401,4 +426,9 @@ const styles = ScaledSheet.create({
     tintColor: 'red',
   },
   titleContainer: { marginHorizontal: '20@s', flex: 1 },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

package/src/data/fake/customers.ts

@@ -5,15 +5,14 @@ export function getFakeCustomer(customerData: CreateCustomerRequest): Customer {
     id: Math.floor(Math.random() * 1000),
     project_id: 1,
     external_id: customerData.externalId,
-    name: customerData.name,
-    country: customerData.country,
-    language: customerData.language,
-    email: customerData.email,
-    phone: customerData.phone,
-    ip_address: customerData.ipAddress,
+    name: customerData.name!,
+    country: customerData.country!,
+    language: customerData.language!,
+    email: customerData.email!,
+    phone: customerData.phone!,
     custom_parameters: JSON.stringify(customerData.customParameters || []),
     user_code: Math.random().toString(36).substring(7),
     updated_at: new Date().toISOString(),
     created_at: new Date().toISOString(),
-  };
+  } as Customer;
 }

package/src/index.tsx

@@ -1,4 +1,8 @@
 import './__dev__';
+export {
+  collectData as collectDataForComnyx,
+  registerOneSignalForComnyx,
+} from './collectData';
 export { registerComnyx } from './register';
 export type { CreateCustomerRequest } from './types/Customer';
 export { Comnyx } from './App';

package/src/register.ts

@@ -1,5 +1,8 @@
+import { accumulator } from './Accumulator';
 import { initApi } from './api/api';
 import { useAppStore } from './store';
+import { createCustomer } from './api/customers';
+import type { CreateCustomerRequest } from './types/Customer';
 
 export function registerComnyx(registerOptions: {
   externalId: string;
@@ -14,4 +17,13 @@ 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, {
+        fake: false,
+      });
+      useAppStore.getState().setCustomer(customer);
+    }
+  );
 }

package/src/store.ts

@@ -26,7 +26,7 @@ interface AppStoreState {
   ) => void;
   setFirstMessage: (message: AppConversationMessage | null) => void;
   init: ({ externalId }: { externalId: string }) => void;
-  initForm: (createCustomerResponse: Customer) => void;
+  setCustomer: (createCustomerResponse: Customer) => void;
   setLanguage: (language: LanguageCode) => void;
   setTheme: (theme: 'light' | 'dark') => void;
   setFake: (fake: boolean) => void;
@@ -35,6 +35,8 @@ interface AppStoreState {
     baseHeight: number;
     baseWidth: number;
   }) => void;
+  formSubmitted: boolean;
+  setForm: (form: Customer) => void;
 }
 
 const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
@@ -49,6 +51,7 @@ const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   fake: false,
   themes: {},
   firstMessage: null,
+  formSubmitted: false,
   setData: (cb) => {
     const newData = cb(get().data);
     set({ data: newData });
@@ -57,10 +60,10 @@ const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
     set({ firstMessage: message });
   },
   init: ({ externalId }: { externalId: string }) => {
-    set({ externalId: externalId, initialized: true });
+    set({ externalId: externalId });
   },
-  initForm: (createCustomerResponse: Customer) => {
-    set({ customer: createCustomerResponse });
+  setCustomer: (createCustomerResponse: Customer) => {
+    set({ customer: createCustomerResponse, initialized: true });
   },
   setLanguage: (language: LanguageCode) => {
     set({ language });
@@ -77,16 +80,21 @@ const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   updateBaseDimensions: ({ baseWidth, baseHeight }) => {
     set({ baseWidth, baseHeight });
   },
+  setForm: (form: Customer) => {
+    set({ formSubmitted: true, customer: form });
+  },
 });
 
 export const useAppStore = createWithEqualityFn<AppStoreState>()(
   persist(storeCreator, {
-    name: 'commonyx_appStore-10',
+    name: 'commonyx_appStore-12',
     storage: createJSONStorage(() => AsyncStorage),
     skipHydration: false,
     partialize: (state) => ({
       customer: state.customer,
       externalId: state.externalId,
+      initialized: state.initialized,
+      formSubmitted: state.formSubmitted,
       data: state.data
         ?.filter((message) => message.approved)
         .map((message) => ({

package/src/types/Customer.ts

@@ -3,15 +3,25 @@ export interface CustomParameter {
   value: string;
 }
 
+export interface OneSignalIntegrationParameters {
+  onesignal_id: string;
+  external_id: string;
+}
+
+export interface IntegrationParameters {
+  onesignal?: OneSignalIntegrationParameters;
+}
+
 export interface CreateCustomerRequest {
-  name: string;
-  country: string;
-  language: string;
   externalId: string;
-  email: string;
-  phone: string;
-  ipAddress: string;
+  name?: string;
+  country?: string;
+  language?: string;
+  email?: string;
+  phone?: string;
+  ipAddress?: string;
   customParameters?: CustomParameter[];
+  integrationParameters?: IntegrationParameters;
 }
 
 export interface Customer {
@@ -19,6 +29,7 @@ export interface Customer {
   project_id: number;
   external_id: string;
   name: string;
+  device: null | string;
   country: string;
   language: string;
   email: string;
@@ -26,6 +37,7 @@ export interface Customer {
   ip_address: string;
   custom_parameters: string;
   user_code: string;
-  updated_at: string;
   created_at: string;
+  updated_at: string;
+  deleted_at: null | string;
 }