@developer_tribe/react-native-comnyx 0.6.1 → 0.7.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@developer_tribe/react-native-comnyx",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "React Native chat component with integrated support panel, enabling real-time customer communication and efficient agent workflow management.",
-  "source": "./src/index.tsx",
+  "source": "./src/index.ts",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
       "import": {
@@ -25,6 +26,7 @@
     "cpp",
     "*.podspec",
     "react-native.config.js",
+    "!server-scripts",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -37,7 +39,7 @@
     "!**/.*"
   ],
   "scripts": {
-    "test": "jest",
+    "test": "jest --config jest.config.ts",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
@@ -69,9 +71,10 @@
     "@react-native-community/cli": "15.0.1",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
+    "@testing-library/react-native": "^13.2.0",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.44",
-    "axios": "1.7.9",
+    "axios": "1.9.0",
     "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
     "eslint": "^8.51.0",
@@ -81,9 +84,11 @@
     "prettier": "^3.0.3",
     "react": "19.0.0",
     "react-native": "0.78.1",
-    "react-native-builder-bob": "^0.38.3",
+    "react-native-builder-bob": "^0.33.1",
+    "react-test-renderer": "^19.0.0",
     "release-it": "^17.10.0",
-    "turbo": "^1.10.7",
+    "ts-jest": "^29.3.4",
+    "ts-node": "^10.9.2",
     "typescript": "5.1.6",
     "use-sync-external-store": "^1.5.0",
     "zustand": "^5.0.3"
@@ -96,7 +101,6 @@
     "react": "*",
     "react-native": "*"
   },
-  "packageManager": "yarn@3.6.1",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -163,7 +167,6 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "codegen",
       [
         "commonjs",
         {
@@ -184,28 +187,11 @@
       ]
     ]
   },
-  "codegenConfig": {
-    "name": "RNComnyxSpec",
-    "type": "modules",
-    "jsSrcsDir": "src",
-    "outputDir": {
-      "ios": "ios/generated",
-      "android": "android/generated"
-    },
-    "android": {
-      "javaPackageName": "com.comnyx"
-    },
-    "includesGeneratedCode": true
-  },
-  "create-react-native-library": {
-    "type": "turbo-module",
-    "languages": "kotlin-objc",
-    "version": "0.48.6"
-  },
   "engines": {
     "node": ">=18.0.0"
   },
   "dependencies": {
     "react-hook-form": "^7.55.0"
-  }
+  },
+  "packageManager": "yarn@1.22.19"
 }

package/src/NativeComnyx.ts

@@ -1,8 +1,9 @@
-import type { TurboModule } from 'react-native';
-import { TurboModuleRegistry } from 'react-native';
+import { NativeModules } from 'react-native';
 
-export interface Spec extends TurboModule {
-  multiply(a: number, b: number): number;
+export interface NativeComnyx {
+  initialize(): Promise<boolean>;
+  checkOptIn(): Promise<boolean>;
+  optIn(): Promise<boolean>;
 }
 
-export default TurboModuleRegistry.getEnforcing<Spec>('Comnyx');
+export const nativeComnyx = NativeModules.Comnyx as NativeComnyx;

package/src/api/api.ts

@@ -1,17 +1,28 @@
 import axios from 'axios';
 const axiosInstance = axios.create({
-  //baseURL: 'https://api.comnyx.com',
-  baseURL: 'https://stage.comnyx.com',
+  baseURL: 'https://api.comnyx.com',
   headers: {
     'Content-Type': 'application/json',
   },
   timeout: 1000,
 });
 
-export function initApi(token: string, externalId: string) {
+export function isInitCalled() {
+  return !!axiosInstance.defaults.headers.common.Authorization;
+}
+
+export function initApi(token: string, baseURL?: string) {
   axiosInstance.defaults.headers.common['Content-Type'] = 'application/json';
   axiosInstance.defaults.headers.common.Authorization = 'Bearer ' + token;
+  axiosInstance.defaults.baseURL = baseURL || axiosInstance.defaults.baseURL;
+}
+
+export function setLoginForAxios(externalId: string) {
   axiosInstance.defaults.headers.common['external-id'] = externalId;
 }
 
+export function setLogoutForAxios() {
+  axiosInstance.defaults.headers.common['external-id'] = null;
+}
+
 export { axiosInstance };

package/src/api/customers.ts

@@ -1,16 +1,11 @@
 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(
+// NOTE: This is not a REST API endpoint. Data is collected with debounce and sent to the server at an appropriate time.
+export function updateCustomer(
   customerData: CreateCustomerRequest,
-  options: ApiOptions,
-  externalId: string
+  externalId?: string
 ): Promise<{ customer: Customer }> {
-  if (options.fake) {
-    return Promise.resolve({ customer: getFakeCustomer(customerData) });
-  }
   console.info('[Comnyx] Adding customer info');
   return axiosInstance
     .post('/api/customers/create', customerData, {

package/src/api/index.ts

@@ -1,4 +1,4 @@
-export { createCustomer } from './customers';
+export { updateCustomer as createCustomer } from './customers';
 export {
   getCustomerConversation,
   getNewCustomerConversation,

package/src/components/AppText.tsx

@@ -1,10 +1,10 @@
 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';
 import { useGlobalTheme } from '../hooks/useTheme';
+import { useAppStore } from '../store/store';
 
 export type FamilyWeight = Record<Weight, string | undefined>;
 

package/src/components/ChatList.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
-import { useAppStore } from '../store';
 import {
   SectionList,
   View,
@@ -23,6 +22,7 @@ import type { LocalizationKeys } from '../types/LocalizationKeys';
 import { ScaledSheet } from './ScaledSheet';
 import { formatDate } from '../utils/formatDate';
 import { activeOpacity } from '../constants/activeOpacity';
+import { useAppStore } from '../store/store';
 
 const headphonesIcon = require('../assets/headphones-01.png');
 const closeIcon = require('../assets/x-close.png');

package/src/components/CustomerForm.tsx

@@ -9,7 +9,6 @@ import {
   ActivityIndicator,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
-import { useAppStore } from '../store';
 import { createCustomer } from '../api';
 import { AppText } from './AppText';
 import { useLocalize } from '../hooks/useLocalize';
@@ -19,7 +18,8 @@ import { useEffect, useState } from 'react';
 import { ScaledSheet } from './ScaledSheet';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
 import { activeOpacity } from '../constants/activeOpacity';
-import { accumulator } from '../Accumulator';
+import { accumulator } from '../register/Accumulator';
+import { useAppStore } from '../store/store';
 
 interface CustomerFormData {
   name: string;
@@ -78,7 +78,6 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
           language: 'en',
           customParameters: [],
         },
-        { fake: useAppStore.getState().fake },
         useAppStore.getState().customer?.external_id ?? ''
       );
       if (res) {

package/src/components/MessageInput.tsx

@@ -1,5 +1,4 @@
 import { TextInput, View, Image, TouchableOpacity } from 'react-native';
-import { useAppStore } from '../store';
 import { useState } from 'react';
 import { sendCustomerMessage } from '../api';
 import { useThemeColors } from '../hooks/useThemeColors';
@@ -7,6 +6,7 @@ import { ScaledSheet } from './ScaledSheet';
 import { useLocalize } from '../hooks/useLocalize';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useIsRtl } from '../hooks/isRtl';
+import { useAppStore } from '../store/store';
 
 const sendDark = require('../assets/arrow-right.png');
 

package/src/hooks/isRtl.ts

@@ -1,5 +1,5 @@
 import { rtlLanguages } from '../constants/rtl';
-import { useAppStore } from '../store';
+import { useAppStore } from '../store/store';
 
 export const useIsRtl = () => {
   const language = useAppStore((s) => s.language);

package/src/hooks/useLocalize.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { LocalizationList } from '../constants/translations';
-import { useAppStore } from '../store';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
+import { useAppStore } from '../store/store';
 
 export function useLocalize() {
   const { language } = useAppStore((s) => ({

package/src/hooks/usePolling.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { useAppStore } from '../store';
 import { getNewCustomerConversation } from '../api';
+import { useAppStore } from '../store/store';
 
 const NEW_MESSAGES_CHECK_INTERVAL = 10000;
 

package/src/hooks/useTheme.ts

@@ -1,5 +1,5 @@
-import { useAppStore } from '../store';
 import type { GlobalTheme } from '../types/GlobalTheme';
+import { useAppStore } from '../store/store';
 
 export function useGlobalTheme(): Required<GlobalTheme> {
   const themes = useAppStore((s) => s.themes);

package/src/index.ts

@@ -0,0 +1,8 @@
+export { Comnyx } from './register';
+export { ComnyxSupport } from './support';
+export { ComnyxNotifications } from './notifications';
+
+//types
+
+//deprecated
+export { registerOneSignalForComnyx } from './register/collectData';

package/src/notifications/index.ts

@@ -0,0 +1,49 @@
+import { Platform, type EmitterSubscription } from 'react-native';
+import { NativeEventEmitter } from 'react-native';
+import { NativeModules } from 'react-native';
+import { nativeComnyx, type NativeComnyx } from '../NativeComnyx';
+
+const comnyxEmitter =
+  Platform.OS === 'android'
+    ? new NativeEventEmitter() //TODO2: fix
+    : new NativeEventEmitter(NativeModules.Comnyx);
+
+type ComnyxNotificationsEventType =
+  | 'TOKEN_INIT'
+  | 'TOKEN_FAILED'
+  | 'NOTIFICATION_RECEIVED'
+  | 'NOTIFICATION_CLICKED';
+
+type ComnyxNotificationsEventResult = {
+  TOKEN_INIT: {
+    type: string;
+    token: string;
+  };
+  TOKEN_FAILED: {
+    type: string;
+    token: null;
+  };
+  NOTIFICATION_RECEIVED: unknown;
+  NOTIFICATION_CLICKED: unknown;
+};
+
+interface ComnyxNotificationsType extends NativeComnyx {
+  addEventListener<T extends ComnyxNotificationsEventType>(
+    event: T,
+    listener: (event: ComnyxNotificationsEventResult[T]) => void
+  ): EmitterSubscription;
+}
+
+export const ComnyxNotifications: ComnyxNotificationsType = {
+  initialize: nativeComnyx.initialize,
+  optIn: nativeComnyx.optIn,
+  checkOptIn: nativeComnyx.checkOptIn,
+  addEventListener: function <T extends ComnyxNotificationsEventType>(
+    eventType: T,
+    listener: (event: ComnyxNotificationsEventResult[T]) => void
+  ): EmitterSubscription {
+    return comnyxEmitter.addListener(eventType, (event) => {
+      listener(event);
+    });
+  },
+};

package/src/{Accumulator.ts → register/Accumulator.ts}

@@ -1,8 +1,8 @@
-import type { CreateCustomerRequest } from './types/Customer';
+import type { CreateCustomerRequest } from '../types/Customer';
 
 const ACCUMULATOR_DEBOUNCE_TIME_IN_MS = 3000;
 
-class Accumulator {
+export class Accumulator {
   private registerData: CreateCustomerRequest | null = null;
   private __select_time: NodeJS.Timeout | undefined = undefined;
   private listener: ((data: CreateCustomerRequest) => Promise<void>) | null =
@@ -95,6 +95,14 @@ class Accumulator {
     }
   }
 
+  clear() {
+    this.registerData = null;
+  }
+
+  empty() {
+    this.registerData = {};
+  }
+
   get() {
     return this.registerData;
   }

package/src/{collectData.ts → register/collectData.ts}

@@ -11,6 +11,7 @@ export function collectData(key: string, value: string) {
   });
 }
 
+//* @deprecated
 export function registerOneSignalForComnyx(external_id: string) {
   accumulator.add({
     integrationParameters: {

package/src/register/index.ts

@@ -0,0 +1,11 @@
+import { login } from './login';
+import { collectData } from './collectData';
+import { logout } from './logout';
+import { init } from './init';
+
+export const Comnyx = {
+  init: init,
+  login: login,
+  logout: logout,
+  collectData: collectData,
+};

package/src/register/init.ts

@@ -0,0 +1,16 @@
+import { initApi } from '../api/api';
+
+interface InitOptions {
+  token: string;
+}
+
+interface ExtendedInitOptions extends InitOptions {
+  baseURL?: string;
+}
+
+export function init(initOptions: InitOptions) {
+  if (!initOptions.token) {
+    throw new Error('App token is required');
+  }
+  initApi(initOptions.token, (initOptions as ExtendedInitOptions).baseURL);
+}

package/src/register/login.ts

@@ -0,0 +1,23 @@
+import { accumulator } from './Accumulator';
+import { isInitCalled, setLoginForAxios } from '../api/api';
+import type { CreateCustomerRequest } from '../types/Customer';
+import { useAppStore } from '../store/store';
+import { updateCustomer } from '../api/customers';
+
+interface LoginOptions {
+  externalId: string;
+}
+
+export function login(loginOptions: LoginOptions) {
+  if (!isInitCalled()) {
+    throw new Error('Please initialize the Comnyx SDK first');
+  }
+  if (!loginOptions.externalId) {
+    throw new Error('External ID is required for initialization');
+  }
+  accumulator.register(async (accumulatedData: CreateCustomerRequest) => {
+    const data = await updateCustomer(accumulatedData, loginOptions.externalId);
+    setLoginForAxios(loginOptions.externalId);
+    useAppStore.getState().setCustomer(data.customer);
+  });
+}

package/src/register/logout.ts

@@ -0,0 +1,14 @@
+import { setLogoutForAxios } from '../api/api';
+import { useAppStore } from '../store/store';
+import { accumulator } from './Accumulator';
+
+export async function logout() {
+  accumulator.empty();
+  await accumulator.flush();
+  setLogoutForAxios();
+  //TODO: state
+  useAppStore.setState({
+    customer: null,
+    formSubmitted: false,
+  });
+}

package/src/{store.ts → store/store.ts}

@@ -3,9 +3,9 @@ import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import type { StateCreator } from 'zustand';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import type { Customer } from './types/Customer';
-import type { AppConversationMessage } from './types/Conversation';
-import type { LanguageCode } from './types/Language';
+import type { AppConversationMessage } from '../types/Conversation';
+import type { LanguageCode } from '../types/Language';
+import type { Customer } from '../types/Customer';
 
 interface AppStoreState {
   baseHeight: number;
@@ -23,7 +23,7 @@ interface AppStoreState {
     ) => AppConversationMessage[] | null
   ) => void;
   setFirstMessage: (message: AppConversationMessage | null) => void;
-  setCustomer: (createCustomerResponse: Customer) => void;
+  setCustomer: (createCustomerResponse: Customer | null) => void;
   setLanguage: (language: LanguageCode) => void;
   setTheme: (theme: 'light' | 'dark') => void;
   setFake: (fake: boolean) => void;
@@ -36,7 +36,7 @@ interface AppStoreState {
   setForm: (form: Customer) => void;
 }
 
-const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
+export const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   baseWidth: 390,
   baseHeight: 844,
   initialized: false,
@@ -55,10 +55,10 @@ const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   setFirstMessage: (message) => {
     set({ firstMessage: message });
   },
-  setCustomer: (createCustomerResponse: Customer) => {
+  setCustomer: (createCustomerResponse: Customer | null) => {
     set({
       customer: createCustomerResponse,
-      formSubmitted: !!createCustomerResponse.name,
+      formSubmitted: !!createCustomerResponse?.name,
     });
   },
   setLanguage: (language: LanguageCode) => {

package/src/{App.tsx → support/ComnyxSupport.tsx}

@@ -1,14 +1,16 @@
-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 { View, TouchableOpacity, Image } from 'react-native';
+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';
+import { AppText } from '../components/AppText';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { usePolling } from '../hooks/usePolling';
+import { useAppStore } from '../store/store';
+import { ScaledSheet } from '../components/ScaledSheet';
+const closeIcon = require('../assets/x-close.png');
 
-interface ComnyxProps {
+interface SupportComnyxProps {
   language?: LanguageCode;
   theme?: 'light' | 'dark';
   fake?: boolean;
@@ -17,13 +19,13 @@ interface ComnyxProps {
   rtlFix?: boolean;
 }
 
-export function Comnyx({
+export function ComnyxSupport({
   language = 'en',
   theme = 'dark',
   fake = false,
   onBack,
   themes,
-}: ComnyxProps) {
+}: SupportComnyxProps) {
   const { customer, formSubmitted } = useAppStore((s) => ({
     customer: s.customer,
     formSubmitted: s.formSubmitted,
@@ -51,9 +53,25 @@ export function Comnyx({
     //NOTE: customer yoksa register hiç çalışmamış
     return (
       <View
-        style={[styles.container, { backgroundColor: themeColors.background }]}
+        style={[
+          styles.container,
+          { backgroundColor: themeColors.background, justifyContent: 'center' },
+        ]}
       >
-        <AppText localization="app.initialization.required" />
+        <TouchableOpacity
+          activeOpacity={1}
+          style={[styles.iconContainer]}
+          onPress={onBack}
+        >
+          <Image
+            source={closeIcon}
+            style={[styles.closeIcon, { tintColor: themeColors.text }]}
+          />
+        </TouchableOpacity>
+        <AppText
+          style={{ textAlign: 'center' }}
+          localization="app.initialization.required"
+        />
       </View>
     );
   } else if (!formSubmitted) {
@@ -70,8 +88,17 @@ export function Comnyx({
   );
 }
 
-const styles = StyleSheet.create({
+const styles = ScaledSheet.create({
   container: {
     flex: 1,
   },
+  iconContainer: {
+    position: 'absolute',
+    top: '60@vs',
+    left: '24@s',
+  },
+  closeIcon: {
+    width: '24@vs',
+    height: '24@vs',
+  },
 });

package/src/support/index.ts

@@ -0,0 +1 @@
+export { ComnyxSupport } from './ComnyxSupport';

package/src/utils/scalingUtils.ts

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import { useAppStore } from '../store';
+import { useAppStore } from '../store/store';
 
 const { width, height } = Dimensions.get('window');
 const [shortDimension, longDimension] =

package/android/generated/java/com/comnyx/NativeComnyxSpec.java

@@ -1,37 +0,0 @@
-
-/**
- * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
- *
- * Do not edit this file as changes may cause incorrect behavior and will be lost
- * once the code is regenerated.
- *
- * @generated by codegen project: GenerateModuleJavaSpec.js
- *
- * @nolint
- */
-
-package com.comnyx;
-
-import com.facebook.proguard.annotations.DoNotStrip;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.turbomodule.core.interfaces.TurboModule;
-import javax.annotation.Nonnull;
-
-public abstract class NativeComnyxSpec extends ReactContextBaseJavaModule implements TurboModule {
-  public static final String NAME = "Comnyx";
-
-  public NativeComnyxSpec(ReactApplicationContext reactContext) {
-    super(reactContext);
-  }
-
-  @Override
-  public @Nonnull String getName() {
-    return NAME;
-  }
-
-  @ReactMethod(isBlockingSynchronousMethod = true)
-  @DoNotStrip
-  public abstract double multiply(double a, double b);
-}

package/ios/Comnyx.h

@@ -1,6 +0,0 @@
-
-#import "generated/RNComnyxSpec/RNComnyxSpec.h"
-
-@interface Comnyx : NSObject <NativeComnyxSpec>
-
-@end

package/ios/Comnyx.mm

@@ -1,18 +0,0 @@
-#import "Comnyx.h"
-
-@implementation Comnyx
-RCT_EXPORT_MODULE()
-
-- (NSNumber *)multiply:(double)a b:(double)b {
-    NSNumber *result = @(a * b);
-
-    return result;
-}
-
-- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
-    (const facebook::react::ObjCTurboModule::InitParams &)params
-{
-    return std::make_shared<facebook::react::NativeComnyxSpecJSI>(params);
-}
-
-@end