@socialgest/rn-widget 0.0.1

package/src/redux/reducers/chatHistory.reducers.ts

@@ -0,0 +1,112 @@
+import { createReducer } from '@reduxjs/toolkit';
+import {
+  setChatPreviews,
+  setChatHistory,
+  createNewPreview,
+  updateHistoryPreview,
+  setPreviewOperator,
+  updatePreviewNotification,
+  setNotification,
+  changePrevies,
+} from '../actions/chatHistory.actions';
+import { removeFromHistory } from '../../helpers/chatHistory.helper';
+
+// import { existProp, getDate } from '../../helpers/utils.helper';
+import type {
+  // LastMessage,
+  Preview,
+  State,
+} from '../../models/chatHistory.models';
+
+const initialState: State = {
+  previews: [],
+  history: [],
+  tikkets: [],
+  counter: 0,
+  notify: false,
+};
+
+const chatHistory = createReducer(initialState, (builder) => {
+  builder
+    .addCase(updatePreviewNotification, (state, action) => {
+      const tikketId = action.payload;
+      var previews_ = [...state.previews];
+      previews_.map((chat: any) => {
+        if (chat.tikketId === tikketId) {
+          return { ...chat, lastMessage: { ...chat.lastMessage, read: true } };
+        } else return chat;
+      });
+
+      return { ...state, previews: previews_ };
+    })
+    .addCase(updateHistoryPreview, (state, action) => {
+      const previews = action.payload.previews;
+      const history = action.payload.history; //JSON.parse(sessionStorage.getItem('showOpInfo'));
+
+      return { ...state, previews, history };
+    })
+    .addCase(setChatPreviews, (state, action) => {
+      return {
+        ...state,
+        previews: action.payload.previews,
+        tikkets: action.payload.tikkets,
+        counter: action.payload.previews.length,
+      };
+    })
+    .addCase(setPreviewOperator, (state, action) => {
+      const { tikketId, operator } = action.payload;
+      let previews = state.previews;
+      previews.map((preview: any) => {
+        if (preview.tikketId === tikketId) {
+          preview.operator = operator;
+        }
+      });
+
+      return { ...state, previews };
+    })
+    .addCase(setChatHistory, (state, action) => {
+      const { tikketId } = action.payload;
+      let remove = removeFromHistory(tikketId, state.history);
+
+      if (remove.length === 0) {
+        return {
+          ...state,
+          history: [...state.history, action.payload],
+        };
+      }
+      remove[1] = [...remove[1], action.payload];
+      return { ...state, history: remove[1] };
+    })
+    .addCase(setNotification, (state, action) => {
+      return { ...state, notify: action.payload };
+    })
+    .addCase(changePrevies, (state, action) => {
+      return { ...state, previews: action.payload };
+    })
+    .addCase(createNewPreview, (state, action) => {
+      const counter = state.counter + 1;
+      const tikketId = action.payload.data.tikket_id;
+      const { message, typePerson, name, read } = action.payload.message;
+      const date = action.payload.message.date;
+      const newPreview: Preview = {
+        tikketId,
+        lastMessage: {
+          msj: message,
+          date,
+          typePerson,
+          name,
+          read,
+        },
+
+        operator: {},
+      };
+
+      return {
+        ...state,
+        previews: [newPreview, ...state.previews],
+        counter,
+      };
+    });
+});
+
+export default chatHistory;

package/src/redux/reducers/operators.reducers.ts

@@ -0,0 +1,49 @@
+import { createReducer } from '@reduxjs/toolkit';
+import { setOperators } from '../actions/operators.actions';
+import {
+  mapOperators,
+  getRandomOperators,
+} from '../../helpers/operators.helper';
+import type { OperatorsState } from '../../models/operators.models';
+
+const initState: OperatorsState = {
+  operators: [
+    {
+      userId: 'fbff7cda-e8ee-4b51-9b71-34fc815f0cd7',
+      imgURL:
+        'https://s3.amazonaws.com/prod-store.tikket.net/avatar/user/fbff7cda-e8ee-4b51-9b71-34fc815f0cd7.jpg',
+      name: 'Operador',
+    },
+  ],
+  randonOperators: [
+    {
+      userId: 'fbff7cda-e8ee-4b51-9b71-34fc815f0cd7',
+      imgURL:
+        'https://s3.amazonaws.com/prod-store.tikket.net/avatar/user/fbff7cda-e8ee-4b51-9b71-34fc815f0cd7.jpg',
+      name: 'Operador',
+    },
+    {
+      userId: 'd91a5706-1010-4a40-a00c-0b605547136a',
+      imgURL:
+        'https://dev-store.tikket.net/avatar/user/d91a5706-1010-4a40-a00c-0b605547136a.jpg',
+      name: 'Operador',
+    },
+    {
+      userId: '2108f1b7-58c5-42c2-84c7-ec982e3ec525',
+      imgURL:
+        'https://s3.amazonaws.com/prod-store.tikket.net/avatar/user/2108f1b7-58c5-42c2-84c7-ec982e3ec525.jpg',
+      name: 'Operador',
+    },
+  ],
+};
+
+const Operators = createReducer(initState, (builder) => {
+  builder.addCase(setOperators, (state, action) => {
+    const operators = mapOperators(action.payload, false);
+    //sessionStorage.setItem('operators', JSON.stringify(operators));
+    const randonOperators = getRandomOperators(operators);
+    return { ...state, operators, randonOperators };
+  });
+});
+
+export default Operators;

package/src/redux/reducers/storage.reducer.ts

@@ -0,0 +1,77 @@
+import { createReducer } from '@reduxjs/toolkit';
+import {
+  setOperatorsStorage,
+  setLanguage,
+  setChat,
+  setView,
+  setShowOpInfo,
+  setAwaitMessages,
+  setSinceStorage,
+  setModalImagen,
+  setOpenClosed,
+  setShowOpName,
+} from '../actions/storage.actions';
+import { mapOperators } from '../../helpers/operators.helper';
+import type { StorageState } from '../../models/storage.models';
+
+const initState: StorageState = {
+  lang: '',
+  chat: null,
+  view: null,
+  showOpInfo: null,
+  operators: [],
+  awaitMessages: null,
+  operators_complete: [],
+  since: null,
+  showModal: false,
+  urlImage: '',
+  show_widget: false,
+};
+
+const Storage = createReducer(initState, (builder) => {
+  builder
+    .addCase(setLanguage, (state, action) => {
+      return { ...state, lang: action.payload };
+    })
+    .addCase(setOpenClosed, (state, action) => {
+      return { ...state, show_widget: action.payload };
+    })
+    .addCase(setChat, (state, action) => {
+      return { ...state, chat: action.payload };
+    })
+    .addCase(setView, (state, action) => {
+      return { ...state, view: action.payload };
+    })
+    .addCase(setShowOpInfo, (state, action) => {
+      return { ...state, showOpInfo: action.payload };
+    })
+    .addCase(setShowOpName, (state, action) => {
+      return { ...state, showOpName: action.payload };
+    })
+    .addCase(setOperatorsStorage, (state, action) => {
+      const operators = mapOperators(action.payload, false);
+      const operators_complete = mapOperators(action.payload, 'complete');
+      return { ...state, operators, operators_complete };
+    })
+    .addCase(setSinceStorage, (state, action) => {
+      return {
+        ...state,
+        since: action.payload,
+      };
+    })
+    .addCase(setAwaitMessages, (state, action) => {
+      return {
+        ...state,
+        awaitMessages: action.payload,
+      };
+    })
+    .addCase(setModalImagen, (state, action) => {
+      return {
+        ...state,
+        showModal: action.payload.show,
+        urlImage: action.payload.file,
+      };
+    });
+});
+
+export default Storage;

package/src/services/app.services.ts

@@ -0,0 +1,67 @@
+import { post, get, put } from './http.conect';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const auth = (body: any = {}, channel_id: string): Promise<any> => {
+  return post(`chat/${channel_id}/auth`, body);
+};
+
+export const getNetworkTikets = (
+  token: string,
+  channelId: string
+): Promise<any> => {
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return get(`chat/${channelId}/tikket`, header);
+};
+
+// export const getCustomery = (token, channelId, networkId) => {
+//   const header = {
+//     authorization: `Bearer ${token}`,
+//   };
+//   return get(`customer/${channelId}/${networkId}`, header);
+// };
+
+export const sendinputs = (
+  token: string,
+  channelId: string,
+  body: any
+): Promise<any> => {
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return put(`chat/${channelId}/network`, body, header);
+};
+
+export const sendLog = (body: any = {}): Promise<any> => {
+  return post(`slack/log`, body);
+};
+
+export const getCategoryHelp = (url: string): Promise<any> => {
+  return get(`help/${url}/category`, {});
+};
+
+export const getArticlesHelp = (url: string): Promise<any> => {
+  return get(`help/${url}/search?search=`, {});
+};
+
+export const setTokenWidget = async (token: string): Promise<void> => {
+  await AsyncStorage.setItem('token_widget', token);
+};
+
+export const getTokenWidget = async (): Promise<string | null> => {
+  const token = await AsyncStorage.getItem('token_widget');
+  return token;
+};
+
+export const getChatMessages = (data: {
+  token: string;
+  channelId: string;
+  tikketId: string;
+}): Promise<any> => {
+  const { token, channelId, tikketId } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return get(`chat/${channelId}/tikket/${tikketId}/messages`, header);
+};

package/src/services/chat.service.ts

@@ -0,0 +1,176 @@
+import { post, get, postFile } from './http.conect';
+
+interface TikketData {
+  token: string;
+  channelId: string;
+  message: string;
+}
+
+export const createNewTikket = (data: TikketData) => {
+  const { token, channelId, message } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return post(`chat/${channelId}/tikket`, { message }, header);
+};
+
+interface SendMessageData {
+  token: string;
+  channelId: string;
+  message: string;
+  tikketId: string;
+  files: string[];
+}
+
+export const sendMessage = (data: SendMessageData) => {
+  const { token, channelId, message, tikketId, files } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return post(
+    `chat/${channelId}/tikket/${tikketId}/message`,
+    { message, files },
+    header
+  );
+};
+
+interface FeedbackData {
+  token: string;
+  channelId: string;
+  tikketId: string;
+  payload: any;
+}
+
+export const feedBack = (data: FeedbackData) => {
+  const { token, channelId, tikketId, payload } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return post(`chat/${channelId}/tikket/${tikketId}/message`, payload, header);
+};
+
+interface GetChatMessagesData {
+  token: string;
+  channelId: string;
+  tikketId: string;
+}
+
+export const getChatMessages = (data: GetChatMessagesData) => {
+  const { token, channelId, tikketId } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return get(`chat/${channelId}/tikket/${tikketId}/messages`, header);
+};
+
+interface GetLastMessagesData {
+  token: string;
+  channelId: string;
+  tikketId: string;
+  since: number;
+}
+
+export const getLastMessages = (data: GetLastMessagesData) => {
+  const { token, channelId, tikketId, since } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return get(
+    `chat/${channelId}/tikket/${tikketId}/messages?timestamp_since=${since}`,
+    header
+  );
+};
+
+interface SendTypingData {
+  token: string;
+  channelId: string;
+  tikketId: string;
+  message: string;
+}
+
+export const sendTyping = (data: SendTypingData) => {
+  const { token, channelId, tikketId, message } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return post(
+    `chat/${channelId}/tikket/${tikketId}/typing`,
+    {
+      message,
+    },
+    header
+  );
+};
+
+interface SendSeenMessageData {
+  token: string;
+  channelId: string;
+  tikketId: string;
+  timestamp_since: number;
+}
+
+export const sendSeenMessage = (data: SendSeenMessageData) => {
+  const { token, channelId, tikketId, timestamp_since } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return post(
+    `chat/${channelId}/tikket/${tikketId}/marked_as_seen`,
+    {
+      timestamp_since,
+    },
+    header
+  );
+};
+
+interface GetTikketInfoData {
+  token: string;
+  channelId: string;
+  tikketId: string;
+}
+
+export const getTikketInfo = (data: GetTikketInfoData) => {
+  const { token, channelId, tikketId } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return get(`chat/${channelId}/tikket/${tikketId}`, header);
+};
+
+interface GetUrlS3FilesData {
+  token: string;
+  type: string;
+  fileName: string;
+  tikketId: string;
+  channelId: string;
+}
+
+export const getUrlS3Files = (data: GetUrlS3FilesData) => {
+  const { token, type, fileName, tikketId, channelId } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+  return get(
+    `chat/${channelId}/tikket/${tikketId}/files?mime=${type}&fileName=${fileName}`,
+    header
+  );
+};
+
+interface SaveFilesData {
+  token: string;
+  channelId: string;
+  tikketId: string;
+  file: any[];
+}
+
+export const saveFiles = (data: SaveFilesData) => {
+  let { token, channelId, tikketId, file } = data;
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+
+  const body = new FormData();
+  body.append('file', file);
+
+  return postFile(`chat/${channelId}/tikket/${tikketId}/files`, body, header);
+};

package/src/services/env.ts

@@ -0,0 +1,5 @@
+const urlBase: string = 'https://api-serverless.tikket.net';
+const socket: string = 'wss://chat.tikket.net/prod';
+const public_url: string = 'https://widget.tikket.net/';
+
+export { urlBase, socket, public_url };

package/src/services/http.conect.ts

@@ -0,0 +1,87 @@
+import { urlBase } from './env';
+
+/**
+ * @param {string}  url url a la cual consultar
+ * esta funcion detecta si es una nueva url base (comienza con http:// o https://).
+ * en caso de ser asi, retorna la url. en caso contrario, se asume que es un fragmento
+ * de path por lo que se concatena con la constante urlBase
+ **/
+const readUrl = (url: string = ''): string =>
+  url.startsWith('http://') || url.startsWith('https://')
+    ? url
+    : `${urlBase}/${url}`;
+
+const get = (url: string = '', headers: object = {}): Promise<any> =>
+  fetch(readUrl(url), {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  })
+    .then((response) => response.json())
+    .catch();
+
+const post = (
+  url: string = '',
+  body: object = {},
+  headers: object = {}
+): Promise<any> =>
+  fetch(readUrl(url), {
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  })
+    .then((response) => response.json())
+    .catch();
+
+const put = (
+  url: string = '',
+  body: object = {},
+  headers: object = {}
+): Promise<any> =>
+  fetch(readUrl(url), {
+    method: 'PUT',
+    body: JSON.stringify(body),
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  })
+    .then((response) => response.json())
+    .catch();
+
+const del = (url: string = '', headers: object = {}): Promise<any> =>
+  fetch(readUrl(url), {
+    method: 'DELETE',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  })
+    .then((response) => response.json())
+    .catch();
+
+const postFile = (
+  url: string = '',
+  body: object = {},
+  headers: object = {}
+): Promise<any> =>
+  fetch(readUrl(url), {
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: {
+      ...headers,
+    },
+  })
+    .then((response) => response.json())
+    .catch();
+
+export { get, post, put, del, postFile };

package/src/services/socket.service.ts

@@ -0,0 +1,69 @@
+import { dispathSocketAction } from '../helpers/socket.helper';
+import { setSocketStatus } from '../redux/actions/app.actions';
+
+import { socket } from './env';
+
+import { filter, map, throttleTime } from 'rxjs/operators';
+import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
+
+import store from '../store';
+
+export const listenSocket = (channelId: string, token: string): void => {
+  let socketConnect = 0;
+  const webSocketSubject: WebSocketSubject<any> = webSocket({
+    url: `${socket}?channel_id=${channelId}&token=${token}`,
+    openObserver: {
+      next: () => {
+        webSocketSubject.next({ action: 'subscribe_network' });
+        store.dispatch(setSocketStatus('open'));
+        setInterval(() => {
+          webSocketSubject.next({ action: 'ping', data: 'ping' });
+        }, 60000);
+      },
+    },
+    closeObserver: {
+      next: () => {
+        if (socketConnect <= 1) {
+          setTimeout(() => {
+            subscribeSocket(webSocketSubject);
+          }, 5000);
+        } else {
+          store.dispatch(setSocketStatus('closed'));
+        }
+        socketConnect++;
+      },
+    },
+  });
+
+  subscribeSocket(webSocketSubject);
+};
+
+const subscribeSocket = (webSocketSubject: WebSocketSubject<any>): void => {
+  webSocketSubject
+    .pipe(
+      filter((data: any) => {
+        return data.data;
+      }),
+      map((data: any) => {
+        if (data.data.type !== 'new_message') {
+          dispathSocketAction(data);
+        }
+        return data;
+      }),
+      filter((data: any) => {
+        return data.data.type === 'new_message';
+      }),
+      throttleTime(1000)
+    )
+    .subscribe(
+      (data: any) => {
+        dispathSocketAction(data);
+      },
+      (err: any) => {
+        console.log(err, 'Error en el subscribeSocket');
+      },
+      () => {
+        // sessionStorage.setItem('socket', 'closed');
+      }
+    );
+};

package/src/store/index.tsx

@@ -0,0 +1,31 @@
+import { configureStore } from '@reduxjs/toolkit';
+import thunk from 'redux-thunk';
+
+import app from '../redux/reducers/app.reducers';
+import articles from '../redux/reducers/articles.reducers';
+import chat from '..//redux/reducers/chat.reducers';
+import chatBoard from '../redux/reducers/chatBoard.reducers';
+import chatHistory from '../redux/reducers/chatHistory.reducers';
+import Operators from '../redux/reducers/operators.reducers';
+import Storage from '../redux/reducers/storage.reducer';
+
+const store = configureStore({
+  reducer: {
+    app,
+    articles,
+    chat,
+    Storage,
+    chatBoard,
+    chatHistory,
+    Operators,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }).concat(thunk),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;