connect-x-reactnative-livechat-sdk 0.2.0

package/src/NativeConnectXReactnativeLivechatSdk.ts

@@ -0,0 +1,8 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  multiply(a: number, b: number): number;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('ConnectXReactnativeLivechatSdk');

package/src/SendIcon.tsx

@@ -0,0 +1,25 @@
+const SendIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={33}
+    height={32}
+    fill="none"
+    {...props}
+  >
+    <rect width={32} height={32} x={0.5} fill="#006CFD" rx={16} />
+    <g clipPath="url(#a)">
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="m21.492 11.008-10.494 3.795 3.496 2.023 3.083-3.084a.833.833 0 1 1 1.178 1.18l-3.083 3.083 2.025 3.495 3.795-10.492Zm.269-1.87c.996-.36 1.96.604 1.6 1.6L18.959 22.91c-.361.998-1.725 1.12-2.257.201l-2.681-4.632-4.632-2.68c-.919-.533-.797-1.896.201-2.258l12.171-4.402Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M6.5 6h20v20h-20z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SendIcon;

package/src/api.ts

@@ -0,0 +1,79 @@
+export const BASE_URL_LIVE_CHAT =
+  'https://df99-2001-44c8-4287-b85c-2407-5b2-9e79-9451.ngrok-free.app'; //'https://live-chat.connect-x.tech';
+const BASE_URL_TRACKING = 'https://tracking.connect-x.tech';
+export const apiGet = async (path: string, token: string) => {
+  console.log(`GET ${BASE_URL_LIVE_CHAT}/connectx/api/${path}`);
+  const headers = {
+    'Authorization': `Bearer ${token}`,
+    'x-type': 'mobile',
+  };
+
+  const response = await fetch(`${BASE_URL_LIVE_CHAT}/connectx/api/${path}`, {
+    method: 'GET',
+    headers: headers,
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw errorData || new Error('API request failed');
+  }
+  console.log('Response:', response);
+  return response.json();
+};
+
+export const apiPost = async (path: string, body: any, token: string) => {
+  console.log('Finding customer with userId:', body.userId, body.externalValue);
+  console.log(`POST ${BASE_URL_LIVE_CHAT}/connectx/api/${path}`);
+  console.log('Request body:', body);
+  const response = await fetch(`${BASE_URL_LIVE_CHAT}/connectx/api/${path}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`,
+      'x-type': 'mobile',
+    },
+    body: JSON.stringify(body),
+  });
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw errorData || new Error('API POST request failed');
+  }
+  console.log('Response:', response);
+  return response.json();
+};
+
+export const uploadFile = async (
+  file: any,
+  organizeId: string,
+  channelId: string
+) => {
+  const APIEndpoint = `${BASE_URL_TRACKING}/connectx/api/storage/uploadFile`;
+  const formData = new FormData();
+
+  formData.append('file', {
+    uri: file.uri,
+    name: file.name,
+    type: file.type,
+  });
+  formData.append(
+    'path',
+    `Organizes/${organizeId}/connector/liveChat/channel/${channelId}`
+  );
+  formData.append('isPublic', 'true');
+
+  const response = await fetch(APIEndpoint, {
+    method: 'POST',
+    body: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw errorData || new Error('File upload failed');
+  }
+
+  const result = await response.json();
+  return result?.url;
+};

package/src/index.tsx

@@ -0,0 +1,91 @@
+import { useState, useEffect, type ReactNode, useRef } from 'react';
+import { Modal } from 'react-native';
+import { ChatScreen } from './ChatScreen';
+import ConnectXReactnativeLivechatSdk from './NativeConnectXReactnativeLivechatSdk';
+
+export function multiply(a: number, b: number): number {
+  return ConnectXReactnativeLivechatSdk.multiply(a, b);
+}
+
+type EventType = 'show' | 'hide';
+type ShowPayload = { token: string; orgId: string; channelId: string };
+
+// Event Emitter ที่รองรับการส่งข้อมูล
+const chatEventEmitter = {
+  listeners: new Map<EventType, Set<(payload?: any) => void>>(),
+  on(event: EventType, callback: (payload?: any) => void) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event)!.add(callback);
+    return () => this.off(event, callback);
+  },
+  off(event: EventType, callback: (payload?: any) => void) {
+    this.listeners.get(event)?.delete(callback);
+  },
+  emit(event: EventType, payload?: any) {
+    this.listeners.get(event)?.forEach((callback) => callback(payload));
+  },
+};
+
+export const ChatProvider = ({ children }: { children: ReactNode }) => {
+  const [isModalVisible, setModalVisible] = useState(false);
+  // เก็บ config ที่ได้รับมา
+  const configRef = useRef<ShowPayload | null>(null);
+
+  useEffect(() => {
+    const showHandler = (payload: ShowPayload) => {
+      if (payload && payload.token && payload.orgId && payload.channelId) {
+        configRef.current = payload;
+        setModalVisible(true);
+      } else {
+        console.error('LiveChat.show() requires { token, orgId, channelId }');
+      }
+    };
+    const hideHandler = () => setModalVisible(false);
+
+    const showUnsubscribe = chatEventEmitter.on('show', showHandler);
+    const hideUnsubscribe = chatEventEmitter.on('hide', hideHandler);
+
+    return () => {
+      showUnsubscribe();
+      hideUnsubscribe();
+    };
+  }, []);
+
+  return (
+    <>
+      {children}
+      <Modal
+        visible={isModalVisible}
+        animationType="slide"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        {/* ส่ง config ไปยัง ChatScreen เมื่อ Modal เปิด */}
+        {configRef.current && (
+          <ChatScreen
+            onClose={() => setModalVisible(false)}
+            token={configRef.current.token}
+            orgId={configRef.current.orgId}
+            channelId={configRef.current.channelId}
+          />
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export const LiveChat = {
+  /**
+   * แสดงหน้าแชท
+   * @param config - ต้องมี orgId และ channelId
+   */
+  show: (config: ShowPayload) => {
+    chatEventEmitter.emit('show', config);
+  },
+  hide: () => {
+    chatEventEmitter.emit('hide');
+  },
+};
+
+export * from './ChatScreen';