@socialgest/rn-widget 0.0.1

package/src/redux/actions/chat.actions.ts

@@ -0,0 +1,441 @@
+/** @format */
+
+import { createAction } from '@reduxjs/toolkit';
+import {
+  createNewTikket,
+  sendMessage as sendmsj,
+  getTikketInfo,
+  sendSeenMessage,
+  getLastMessages,
+  feedBack,
+} from '../../services/chat.service';
+import { setAwaitMessages, setChat, setSinceStorage } from './storage.actions';
+
+import {
+  // dispatchQueuedMessages,
+  getNewOperator,
+} from '../../helpers/chat.helper';
+import {
+  createNewPreview,
+  setNotification,
+  setPreviewOperator,
+  updateHistoryPreview,
+} from '../../redux/actions/chatHistory.actions';
+import {
+  mapTikketsHistory,
+  searchChatInStore,
+} from '../../helpers/chatHistory.helper';
+import { existProp, getDate, setSince } from '../../helpers/utils.helper';
+import {
+  setFeedBack,
+  setQuickReplies,
+  allowSendMessage,
+  initChat,
+  setLoadingMsjBot,
+  changeBot,
+  setFloatMessage,
+  setFloatMessageOC,
+} from './app.actions';
+import {
+  setChatPreviews,
+  searchChat,
+} from '../../redux/actions/chatHistory.actions';
+import { matchOperator } from '../../helpers/operators.helper';
+import type { LastMessage } from '../../models/chatHistory.models';
+
+export const typingUser = createAction<any>('TYPING');
+export const typingOff = createAction('TYPING_OFF');
+export const setHeader = createAction<string>('SET_HEADER');
+export const initMsjDetail = createAction<any>('INIT_MSJ_DETAIL');
+export const resettMsjDetail = createAction<any>('RESET_MSJ_DETAIL');
+export const saveMessage = createAction<any>('SAVE_MESSAGE');
+export const updateChat = createAction<any>('UPDATE_CHAT');
+export const cleanChat = createAction('CLEAN_CHAT');
+export const RenderChat = createAction<any>('RENDER_CHAT');
+export const chargeNewMessages = createAction<any>('CHARGE_NEW_MESSAGES');
+export const updateOperatorTikket = createAction<any>('UPDATE_OPERATOR_TIKKET');
+export const updateClosedTikket = createAction<any>('UPDATE_CLOSED_TIKKET');
+export const setTextBoxMessage = createAction<string>('SET_TEXTBOX_MESSAGE');
+export const RenderMessageWithoutTikketId = createAction<any>(
+  'RENDER_MESSAGE_WITHOUT_TIKKET_ID'
+);
+export const setErrorSendMessage = createAction<boolean>('ERROR_SEND_MESSAGE');
+
+export const typing =
+  (payload: any) => async (dispatch: any, getState: any) => {
+    const { operators }: any = getState().Operators;
+    payload.operators = operators;
+    dispatch(typingUser(payload));
+  };
+
+export const resendMessage =
+  (payload: any) => async (dispatch: any, getState: any) => {
+    dispatch(setErrorSendMessage(true));
+
+    const search_message = getState().chat.detail.findIndex(
+      (el: any) => el.message === payload.message
+    );
+
+    if (search_message !== -1) {
+      getState().chat.detail[search_message].retry = true;
+    }
+    dispatch(resettMsjDetail(getState().chat.detail));
+  };
+
+export const sendMessageHandler =
+  (payload: any) => async (dispatch: any, getState: any) => {
+    try {
+      if (!payload.resend) {
+        dispatch(setChat(getState().chat));
+        dispatch(saveMessage(payload));
+      }
+
+      if (payload.tikketId !== null) {
+        try {
+          const resp = await sendmsj(payload);
+
+          if (resp?.meta?.code === 400) {
+            dispatch(setLoadingMsjBot(false));
+            dispatch(setQuickReplies(false));
+            dispatch(setAwaitMessages(null));
+          } else if (resp?.meta?.code !== 200) {
+            dispatch(resendMessage(payload));
+          }
+        } catch (error) {
+          dispatch(resendMessage(payload));
+        }
+        //TODO: ejecutar acciones luego de enviar mensaje
+      } else {
+        try {
+          if (payload.resend) {
+            delete payload.resend;
+          }
+          const resp = await createNewTikket(payload);
+
+          if (resp?.meta?.code === 200) {
+            dispatch(updateChat(resp));
+            var since;
+            if (typeof resp.data.msj_created_at !== 'undefined') {
+              since = resp.data.msj_created_at;
+            } else {
+              since = setSince();
+            }
+
+            dispatch(setSinceStorage(since));
+            dispatch(createNewPreview({ data: resp.data, message: payload }));
+            // dispatchQueuedMessages(resp.data.tikket_id, awaitMessages);
+            dispatch(setQuickReplies(false));
+            dispatch(setAwaitMessages(null));
+          } else if (resp?.meta?.code === 400) {
+            dispatch(setLoadingMsjBot(false));
+            dispatch(setQuickReplies(false));
+            dispatch(setAwaitMessages(null));
+          } else if (
+            resp?.meta?.code === 401 ||
+            (resp?.message && resp.message === 'Unauthorized')
+          ) {
+            const { channelId, initProperties, user, token } = getState().app;
+            let last_url = initProperties.lastUrl,
+              channel_id = channelId,
+              messages = payload;
+            dispatch(initChat({ channel_id, last_url, messages, user, token }));
+          } else if (
+            resp?.meta?.code === 500 ||
+            (!resp.meta && resp.message === null)
+          ) {
+            dispatch(resendMessage(payload));
+          }
+        } catch (error) {
+          dispatch(resendMessage(payload));
+        }
+      }
+    } catch (error) {}
+  };
+
+export const sendSeen = (tId: string) => async (getState: any) => {
+  const token = getState().app.token; //sessionStorage.getItem('token');
+  const channelId = getState().app.channelId; //sessionStorage.getItem('channelId');
+  const since = getState().Storage.since; //sessionStorage.getItem('since');
+  const view = getState().Storage.view; //sessionStorage.getItem('view');
+  const isWindowOpen = getState().app.openWindow; //JSON.parse(sessionStorage.getItem('isWindowOpen'));
+  const tikketId = tId;
+
+  if (view === 'chat' && isWindowOpen) {
+    await sendSeenMessage({
+      token,
+      channelId,
+      timestamp_since: !since ? new Date().getTime() : since,
+      tikketId,
+    });
+  }
+};
+
+export const searchIncomingMessage =
+  (payload: any) => async (dispatch: any, getState: any) => {
+    const token = getState().app.token; //sessionStorage.getItem('token');
+    // const channelId = getState().app.channelId; //sessionStorage.getItem('channelId');
+    const { channelId } = getState().app;
+    var bots = getState().app;
+    var { show_widget, since } = getState().Storage;
+    var storage = getState().Storage;
+    var { labels } = getState().app;
+    const operators = getState().Storage.operators_complete;
+    // const view = getState().Storage.view; //sessionStorage.getItem('view');
+    const tikkets = getState().chatHistory.tikkets;
+    const tikketId = payload.tikket_id;
+
+    var previews = getState().chatHistory.previews;
+    var history = getState().chatHistory.history;
+
+    const resp = await getLastMessages({ token, channelId, since, tikketId });
+
+    if (resp?.meta?.code === 200) {
+      let messages = resp.data.messages;
+
+      const search_tikket = tikkets.find((el: any) => el.id === tikketId);
+
+      if (messages.length > 0) {
+        dispatch(
+          chargeNewMessages({
+            messages,
+            tikketId,
+            since: messages[messages.length - 1]?.created_at,
+            operators,
+          })
+        );
+
+        const feedback_item = messages.find(
+          (msj: any) => msj.type_message === 5
+        );
+        const latestMessage = existProp(
+          messages[messages.length - 1],
+          'quick_replies'
+        );
+
+        const search_msj_bot = messages.filter((el: any) => el.bot_id);
+
+        if (search_msj_bot.length > 0 && bots.length > 0) {
+          const search_bot = bots.find(
+            (el: any) => el.bot_id === search_msj_bot[0].bot_id
+          );
+          if (search_bot) {
+            dispatch(changeBot(search_bot.bot));
+          }
+        }
+
+        dispatch(setSinceStorage(messages[messages.length - 1]?.created_at));
+
+        if (feedback_item) {
+          const index = messages.indexOf(feedback_item);
+          if (index !== -1) {
+            messages.splice(index, 1);
+          }
+
+          dispatch(
+            setFeedBack(
+              feedback_item?.filter((el: any) => !el.deleted && !el.deleted_at)
+            )
+          );
+        }
+
+        if (latestMessage) {
+          dispatch(
+            setQuickReplies(messages[messages.length - 1].quick_replies)
+          );
+        } else {
+          dispatch(setQuickReplies(false));
+        }
+
+        if (search_tikket) {
+          let messagePreview: any = {
+            tikketId,
+            message: messages[messages.length - 1].message,
+            date: getDate(messages[messages.length - 1].created_at),
+          };
+          const sincePreview: string | number = setSince(messagePreview.date);
+          dispatch(setSinceStorage(sincePreview));
+          if (existProp(messages[messages.length - 1], 'user_id')) {
+            // dispatch(typingOff());
+            const operators: any[] = storage.operators; //JSON.parse(sessionStorage.getItem('operators'));
+            messagePreview.userInfo = matchOperator(
+              operators,
+              messages[messages.length - 1].user_id
+            )[0];
+          }
+          const { showOpInfo, showOpName } = storage;
+
+          if (
+            !showOpInfo &&
+            existProp(messages[messages.length - 1], 'user_id')
+          ) {
+            messagePreview.userInfo.name = labels.operador;
+          }
+          if (
+            showOpName &&
+            existProp(messages[messages.length - 1], 'user_id')
+          ) {
+            messagePreview.userInfo.name = showOpName;
+          }
+
+          const lastMessage: LastMessage = {
+            date: getDate(messages[messages.length - 1].created_at),
+            msj: messages[messages.length - 1].message,
+            name: existProp(messagePreview, 'userInfo')
+              ? messagePreview.userInfo.name
+              : 'yo:',
+            read: false,
+            typePerson: 'operator',
+          };
+
+          var n = previews.map((chat: any) => {
+            if (chat.tikketId === tikketId) {
+              var newChat = { ...chat };
+              if (!showOpInfo && existProp(messagePreview, 'userInfo')) {
+                lastMessage.name = 'Operador';
+              }
+              if (showOpName && existProp(messagePreview, 'userInfo')) {
+                lastMessage.name = showOpName;
+              }
+
+              newChat.lastMessage = lastMessage;
+              return newChat;
+            } else return chat;
+          });
+          const historyIndex = history.findIndex(
+            (el: any) => el.tikketId === tikketId
+          );
+
+          if (
+            historyIndex !== -1 &&
+            typeof messagePreview.userInfo !== 'undefined'
+          ) {
+            let messageToChat = {
+              date: getDate(lastMessage.date),
+              message: lastMessage.msj,
+              userId: messagePreview.userInfo.userId,
+              typePerson: 'operator',
+            };
+            history[historyIndex].detail = [
+              messageToChat,
+              ...history[historyIndex].detail,
+            ];
+            history = history.concat(history[historyIndex]);
+          }
+
+          dispatch(updateHistoryPreview({ previews: n, history }));
+
+          const closed = existProp(search_tikket, 'closed_at') ? true : false;
+
+          if (closed) {
+            dispatch(updateClosedTikket({ closed }));
+            dispatch(setChat(null));
+          }
+        }
+      }
+
+      if (
+        (messages[messages.length - 1]?.type_message === 1 ||
+          messages[messages.length - 1]?.type_message === 6) &&
+        !show_widget
+      ) {
+        dispatch(setFloatMessageOC(true));
+        dispatch(
+          setFloatMessage({
+            messages: [messages[messages.length - 1]],
+            tikketId,
+            since: !since ? messages[messages.length - 1]?.created_at : since,
+          })
+        );
+      }
+
+      dispatch(sendSeen(tikketId));
+      dispatch(setLoadingMsjBot(false));
+
+      dispatch(setNotification(true));
+    } else {
+      dispatch(setLoadingMsjBot(false));
+    }
+  };
+
+export const updateTikket =
+  (payload: any) => async (dispatch: any, getState: any) => {
+    const token = getState().app.token; //sessionStorage.getItem('token');
+    const channelId = getState().app.channelId; //sessionStorage.getItem('channelId');
+    const tikketId = payload.data.tikket_id;
+    const showOpName = getState().Storage.showOpName;
+    const showOpInfo = getState().Storage.showOpInfo;
+    const operators = getState().Operators.operators;
+    const tikkets = getState().chatHistory.tikkets;
+    const chatHistory = getState().chatHistory.history;
+    const language = getState().Storage.lang;
+    const labels = getState().app.labels;
+
+    const resp = await getTikketInfo({ token, channelId, tikketId });
+
+    if (resp?.meta?.code === 200) {
+      const operator = getNewOperator(resp.data.tikkets[0], operators);
+      const closed = existProp(resp.data.tikkets[0], 'closed_at')
+        ? true
+        : false;
+      dispatch(updateOperatorTikket({ operator, closed }));
+      dispatch(setPreviewOperator({ operator, tikketId }));
+      const search_tikket = tikkets.findIndex(
+        (el: any) => el.id === resp.data.tikkets[0].id
+      );
+
+      if (search_tikket !== -1) {
+        tikkets.splice(search_tikket, 1, resp.data.tikkets[0]);
+      } else {
+        tikkets.push(resp.data.tikkets[0]);
+      }
+
+      const previews = mapTikketsHistory({
+        tikkets,
+        showOpInfo,
+        operators,
+        language,
+        showOpName,
+        labels,
+      });
+
+      dispatch(setChatPreviews({ previews, tikkets }));
+      if (closed) {
+        dispatch(setChat(null));
+      }
+
+      if (payload.data?.go_chat) {
+        dispatch(sendSeen(tikketId));
+
+        const chat = searchChatInStore(tikketId, chatHistory);
+
+        if (chat.length === 0) {
+          const data = {
+            token,
+            channelId: channelId,
+            tikketId: tikketId,
+            operator,
+            preview: {},
+          };
+
+          dispatch(searchChat(data));
+
+          dispatch(allowSendMessage(true));
+        }
+      }
+    }
+  };
+
+export const sendFeedBack =
+  (payload: any) => async (dispatch: any, getState: any) => {
+    const { channelId, token } = getState().app;
+    const tikketId = payload.tikket_id;
+    const resp = await feedBack({ token, channelId, tikketId, payload });
+
+    if (resp?.meta?.code === 200) {
+      dispatch(searchIncomingMessage({ tikket_id: tikketId }));
+    }
+  };
+
+export const markModalMessageSeen = (data: any) => async () => {
+  await sendSeenMessage(data);
+};

package/src/redux/actions/chatBoard.actions.ts

@@ -0,0 +1,10 @@
+import { createAction } from '@reduxjs/toolkit';
+
+export const changeVisibility = createAction<boolean>('CHANGE_VISIBILITY');
+export const changeView = createAction<string>('CHANGE_VIEW');
+export const changeHeader = createAction<string>('CHANGE_HEADER');
+export const changeLoading = createAction('CHANGE_LOADING');
+export const setInitProps = createAction<any>('SET_INIT_PROPS');
+export const setDefaultTikketLoaded = createAction<boolean>(
+  'SET_DEFAULT_TIKKET_LOADED'
+);

package/src/redux/actions/chatHistory.actions.ts

@@ -0,0 +1,170 @@
+/** @format */
+
+import { createAction } from '@reduxjs/toolkit';
+import { getNetworkTikets, getChatMessages } from '../../services/app.services';
+import { changeView, changeLoading } from '../actions/chatBoard.actions';
+import { setView } from '../actions/storage.actions';
+import { mapHistoryChat } from '../../helpers/chat.helper';
+import { RenderChat } from '../actions/chat.actions';
+import {
+  setFeedBack,
+  setQuickReplies,
+  setFloatMessage,
+  setFloatMessageOC,
+} from './app.actions';
+import { existProp, setSince } from '../../helpers/utils.helper';
+import { setSinceStorage } from '../actions/storage.actions';
+import { mapTikketsHistory } from '../../helpers/chatHistory.helper';
+
+export const setChatHistory = createAction<any>('SET_CHAT_HISTORY');
+export const setChatPreviews = createAction<any>('SET_CHAT_PREVIEWS');
+export const setPreviewOperator = createAction<any>('SET_PREVIEW_OPERATOR');
+export const createNewPreview = createAction<any>('CREATE_NEW_PREVIEW');
+export const updateHistoryPreview = createAction<any>('UPDATE_HISTORY_PREVIEW');
+export const updatePreviewNotification = createAction<any>(
+  'UPDATE_PREVIEW_NOTIFICATION'
+);
+export const setNotification = createAction<boolean>('NOTIFICATION');
+export const changePrevies = createAction<any[]>('CHANGE_PREVIEWS');
+
+export const getTikets =
+  (data: { token: string; channelId: string }) =>
+  async (dispatch: any, getState: any) => {
+    const { token, channelId } = data;
+    const operators = getState().Storage.operators_complete;
+    const language = getState().Storage.lang;
+    const { show_widget, showOpInfo, showOpName } = getState().Storage;
+    // const app = getState().app;
+    // const audio_url = `${
+    //   process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000/'
+    // }audio/SplendidNotificationPickup-MP3.mp3`;
+
+    try {
+      const resp = await getNetworkTikets(token, channelId);
+      if (resp?.meta.code === 200) {
+        const previews = mapTikketsHistory({
+          tikkets: resp.data.tikkets,
+          showOpInfo,
+          operators,
+          language,
+          showOpName,
+          labels: null,
+        });
+
+        dispatch(setChatPreviews({ previews, tikkets: resp.data.tikkets }));
+
+        const tikket_read = previews.findIndex(
+          (el: any) => el.lastMessage.read === false
+        );
+        if (tikket_read !== -1) {
+          const tikket = resp.data.tikkets.find(
+            (el: any) => el.id === previews[tikket_read].tikketId
+          );
+
+          if (
+            (tikket?.messages[0]?.type_message === 1 ||
+              tikket?.messages[0]?.type_message === 6) &&
+            !show_widget
+          ) {
+            dispatch(setFloatMessageOC(true));
+            dispatch(
+              setFloatMessage({
+                messages: tikket.messages,
+                tikketId: previews[tikket_read].tikketId,
+                since: tikket.messages[0].created_at,
+              })
+            );
+          }
+        }
+      }
+    } catch (error) {}
+  };
+
+export const searchChat =
+  (payload: {
+    channelId: string;
+    tikketId: string;
+    token: string;
+    operator: string;
+    preview: any;
+  }) =>
+  async (dispatch: any, getState: any) => {
+    const { channelId, tikketId, token, operator, preview } = payload;
+
+    const queryParams = { channelId, tikketId, token };
+    dispatch(changeView('chat'));
+    dispatch(setView('chat'));
+    if (tikketId) {
+      dispatch(changeLoading());
+      let messages = await getChatMessages(queryParams);
+
+      if (messages?.meta?.code === 200) {
+        const feedback = messages.data.messages.find(
+          (msj: any) => msj.type_message === 5
+        );
+
+        const messageFeedBack = messages.data.messages.findIndex(
+          (msj: any) => typeof msj.message !== 'string'
+        );
+
+        const latestMessage = existProp(
+          messages.data.messages[messages.data.messages.length - 1],
+          'quick_replies'
+        );
+
+        // console.log("====================================");
+        // console.log(latestMessage);
+        // console.log("====================================");
+
+        if (latestMessage) {
+          dispatch(
+            setQuickReplies(
+              messages.data.messages[messages.data.messages.length - 1]
+                .quick_replies
+            )
+          );
+        }
+
+        if (feedback) {
+          const index = messages.data.messages.indexOf(feedback);
+          messages.data.messages.splice(index, 1);
+          dispatch(setFeedBack(feedback));
+        }
+
+        if (messageFeedBack !== -1) {
+          messages.data.messages.splice(messageFeedBack, 1);
+        }
+        var array = [
+          {
+            created_at: messages.data.messages[0].created_at,
+            message: getState().app.initProperties?.chatFirstMessage,
+            source: 1,
+            tikket_id: messages.data.messages[0].tikket_id,
+            type_message: 1,
+            updated_at: messages.data.messages[0].created_at,
+            user_id: getState().Operators.randonOperators[0]?.userId,
+          },
+          ...messages.data.messages,
+        ];
+
+        messages = mapHistoryChat(array);
+        messages = {
+          ...messages,
+          typeHeader: 'onlyOne',
+          typing: false,
+          typingUser: null,
+          operator,
+          closed: preview?.lastMessage?.closed,
+        };
+        const since = setSince(
+          messages.detail[messages?.detail.length - 1]?.created_at
+        );
+        dispatch(setSinceStorage(since));
+
+        dispatch(RenderChat(messages));
+        dispatch(changeLoading());
+      } else {
+        dispatch(changeLoading());
+      }
+    }
+  };

package/src/redux/actions/operators.actions.ts

@@ -0,0 +1,3 @@
+import { createAction } from '@reduxjs/toolkit';
+
+export const setOperators = createAction<any>('SET_OPERATORS');

package/src/redux/actions/storage.actions.ts

@@ -0,0 +1,22 @@
+import { createAction } from '@reduxjs/toolkit';
+
+export const setLanguage = createAction<string>('SET_LANGUAGE');
+export const setChat = createAction<string | null | boolean>('SET_CHAT');
+export const setView = createAction<string>('SET_VIEW');
+export const setSinceStorage = createAction<string | number | null>(
+  'SET_SINCE_STORAGE'
+);
+export const setShowOpInfo = createAction<string | null | boolean>(
+  'SET_SHOW_OP_INFO'
+);
+export const setOperatorsStorage = createAction<Array<any>>(
+  'SET_OPERATORS_STORAGE'
+);
+export const setAwaitMessages = createAction<null | any[]>(
+  'SET_AWAIT_MESSAGES'
+);
+export const setModalImagen = createAction<any>('SET_MODAL_IMAGEN');
+export const setOpenClosed = createAction<boolean>('SET_OPEN_CLOSED');
+export const setShowOpName = createAction<string | null | boolean>(
+  'SET_SHOW_OP_NAME'
+);