@socialgest/rn-widget 0.0.1

package/src/components/messageFloat/MessageFloat.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  Image,
+  TouchableOpacity,
+  Vibration,
+} from 'react-native';
+import Modal from 'react-native-modal';
+
+// Component
+
+// Hooks
+import { useAppSelector, useAppDispatch } from '../../hooks/redux-hooks';
+
+// Actions
+import {
+  setFloatMessage,
+  setFloatMessageOC,
+} from '../../redux/actions/app.actions';
+import { setOpenClosed } from '../../redux/actions/storage.actions';
+
+//
+import { searchCoversation } from '../conversations/conversationItem/ConversationItem';
+
+interface MessageFloatProps {}
+
+const MessageFloat: React.FC<MessageFloatProps> = () => {
+  React.useEffect(() => {
+    Vibration.vibrate();
+  }, []);
+
+  const dispatch = useAppDispatch();
+
+  const app = useAppSelector((state) => state.app);
+  const { messageFloat, token, channelId } = app;
+
+  const { bots, bot } = useAppSelector((state) => state.app);
+  const operators = useAppSelector((state) => state.Storage.operators_complete);
+  const chatHistory = useAppSelector((state) => state.chatHistory.history);
+  const previews = useAppSelector((state) => state.chatHistory.previews);
+
+  var messages = messageFloat?.messages;
+
+  var message = messages
+    ? messages.length > 1
+      ? messages[0]
+      : messages[messages?.length - 1]
+    : null;
+
+  var user = message?.user_id
+    ? operators.find((el) => el.userId === message.user_id)
+    : message?.bot_id && Array.isArray(bots)
+    ? bots.find((el) => el.bot_id === message.bot_id).bot
+    : bot;
+
+  const closedModal = () => {
+    dispatch(setFloatMessageOC(false));
+    dispatch(setFloatMessage(null));
+  };
+
+  return (
+    <Modal
+      isVisible={true}
+      backdropOpacity={0.2}
+      onBackdropPress={() => {
+        closedModal();
+      }}
+      onSwipeComplete={() => {
+        closedModal();
+      }}
+    >
+      <View style={styles.centeredView}>
+        <TouchableOpacity
+          onPress={() => {
+            var props = { app, operators, chatHistory, previews };
+
+            var values = {
+              tikketId: messageFloat?.tikketId,
+              operator: user,
+              channelId,
+              token,
+            };
+            closedModal();
+            searchCoversation(props, dispatch, true, values);
+            dispatch(setOpenClosed(true));
+          }}
+          style={styles.modalView}
+        >
+          {user && (
+            <Image
+              style={{ width: 40, height: 40, borderRadius: 20 }}
+              source={{ uri: user.imgURL ? user.imgURL : user.photo }}
+            />
+          )}
+
+          <View
+            style={{
+              alignContent: 'center',
+              justifyContent: 'flex-start',
+              width: '80%',
+              marginLeft: 10,
+            }}
+          >
+            <Text style={{ fontWeight: 'bold' }}>{user?.name}</Text>
+            <Text numberOfLines={1}>
+              {message?.message
+                .replace(new RegExp('<div><br></div><div>', 'g'), '\n \n')
+                .replace(/<[^>]*>?/g, '')
+                .replace(/&nbsp;/g, ' ')}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  modalView: {
+    marginTop: 50,
+    width: '90%',
+    height: 60,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    padding: 10,
+    flexDirection: 'row',
+  },
+});
+
+export default MessageFloat;

package/src/components/typing/PulseLoader.tsx

@@ -0,0 +1,12 @@
+// import React, { type FC } from 'react';
+// // import { Bubbles } from 'react-native-loader';
+
+// interface PulseLoaderProps {
+//   color: string;
+// }
+
+// const PulseLoader: FC<PulseLoaderProps> = ({ color }) => {
+//   return <Bubbles size={10} color={color} />;
+// };
+
+// export default PulseLoader;

package/src/components/typing/Typing.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, Image, StyleSheet } from 'react-native';
+
+// import PulseLoader from './PulseLoader';
+
+// Hooks
+import { useAppSelector } from '../../hooks/redux-hooks';
+
+interface TypingProps {}
+
+const Typing: React.FC<TypingProps> = () => {
+  const TypingUserPhoto = useAppSelector((state) => state.chat.typingUser);
+  const { initProperties, bot } = useAppSelector((state) => state.app);
+  const showOpInfo: boolean | null = initProperties.showOperatorsInfo;
+  // const color = initProperties.primaryColor;
+
+  return (
+    <View style={styles.TypingContent}>
+      <Image
+        source={{ uri: `${showOpInfo ? TypingUserPhoto : bot.photo}` }}
+        style={styles.image}
+      />
+
+      {/* <PulseLoader color={color} /> */}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  TypingContent: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'auto',
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  image: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    marginRight: 20,
+  },
+});
+
+export default Typing;

package/src/helpers/Audio.tsx

@@ -0,0 +1,60 @@
+import React, { type FC } from 'react';
+import { View, StyleSheet } from 'react-native';
+// import {WebView} from 'react-native-webview';
+
+interface AudioComponentProps {
+  audio: string;
+}
+
+// const html = (data: string): string => {
+//   let text = `<!DOCTYPE html>
+//         <html>
+//             <head>
+//                 <meta charset="utf-8">
+//                 <meta http-equiv="x-ua-compatible" content="ie=edge">
+//                 <title>Web Audio Tikket</title>
+//                 <meta name="description" content="Audio basics demo for Web Audio API">
+//                 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+//                 <style>
+//                     audio {
+//                         width: 90%;
+//                         height: 25px;
+//                     }
+//                 </style>
+//             </head>
+//             <body>
+//                     <audio controls>
+//                         <source src=${data}>
+//                     </audio>
+//             </body>
+//         </html>`;
+//   return text;
+// };
+
+const styles = StyleSheet.create({
+  view: {
+    width: 250,
+    height: 40,
+  },
+  color: { backgroundColor: 'transparent' },
+});
+
+const AudioComponent: FC<AudioComponentProps> = () => {
+  return (
+    <View style={styles.view}>
+      {/* <WebView
+        startInLoadingState
+        originWhitelist={['*']}
+        mediaPlaybackRequiresUserAction={false}
+        useWebKit={true}
+        source={{
+          html: html(audio),
+        }}
+        onShouldStartLoadWithRequest={() => false}
+        style={styles.color}
+      /> */}
+    </View>
+  );
+};
+
+export default AudioComponent;

package/src/helpers/CheckBox.tsx

@@ -0,0 +1,35 @@
+import React, { type FC, useState, useEffect } from 'react';
+import { CheckBox } from 'react-native-elements';
+
+interface CheckBoxComponentProps {
+  value: boolean;
+  onChange: (newValue: boolean) => void;
+  color: string;
+}
+
+const CheckBoxComponent: FC<CheckBoxComponentProps> = ({
+  value,
+  onChange,
+  color,
+}) => {
+  const [check, setCheck] = useState(false);
+
+  useEffect(() => {
+    if (value !== check) {
+      setCheck(value);
+    }
+  }, [value]);
+
+  return (
+    <CheckBox
+      checked={value}
+      checkedColor={color}
+      onPress={() => {
+        onChange(!check);
+        setCheck(!check);
+      }}
+    />
+  );
+};
+
+export default CheckBoxComponent;

package/src/helpers/Date.tsx

@@ -0,0 +1,42 @@
+import React, { type FC, useState } from 'react';
+import DatePicker from 'react-native-datepicker';
+interface DatePickerComponentProps {
+  value: Date;
+}
+
+const DatePickerComponent: FC<DatePickerComponentProps> = ({ value }) => {
+  const [date, setDate] = useState(new Date());
+
+  const onChangeTime = (event: any) => {
+    console.log(event, value);
+    setDate(event);
+  };
+
+  return (
+    <DatePicker
+      style={{ width: 200 }}
+      date={date}
+      mode="date"
+      placeholder="select date"
+      format="YYYY-MM-DD"
+      confirmBtnText="Confirm"
+      cancelBtnText="Cancel"
+      customStyles={{
+        dateIcon: {
+          position: 'absolute',
+          left: 0,
+          top: 4,
+          marginLeft: 0,
+        },
+        dateInput: {
+          marginLeft: 36,
+        },
+      }}
+      onDateChange={(a: any) => {
+        onChangeTime(a);
+      }}
+    />
+  );
+};
+
+export default DatePickerComponent;

package/src/helpers/DateTime.tsx

@@ -0,0 +1,45 @@
+import React, { type FC, useState } from 'react';
+import DatePicker from 'react-native-datepicker';
+
+interface DateTimePickerComponentProps {
+  value: Date;
+}
+
+const DateTimePickerComponent: FC<DateTimePickerComponentProps> = ({
+  value,
+}) => {
+  const [date, setDate] = useState(new Date());
+
+  const onChangeTime = (event: any) => {
+    console.log(event, value);
+    setDate(event);
+  };
+
+  return (
+    <DatePicker
+      style={{ width: 200 }}
+      date={date}
+      mode="datetime"
+      placeholder="select date"
+      format="YYYY-MM-DD hh:mm a"
+      confirmBtnText="Confirm"
+      cancelBtnText="Cancel"
+      customStyles={{
+        dateIcon: {
+          position: 'absolute',
+          left: 0,
+          top: 4,
+          marginLeft: 0,
+        },
+        dateInput: {
+          marginLeft: 36,
+        },
+      }}
+      onDateChange={(a: any) => {
+        onChangeTime(a);
+      }}
+    />
+  );
+};
+
+export default DateTimePickerComponent;

package/src/helpers/chat.helper.ts

@@ -0,0 +1,154 @@
+/** @format */
+import { getDate, existProp } from './utils.helper';
+import { sendMessage } from '../services/chat.service';
+import { mapFiles } from './files.helper';
+import { getDefaultOperator, matchOperator } from './operators.helper';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const mapHistoryChat = (
+  messages: any[]
+): { tikketId: string; detail: any } => {
+  const tikketId: string = messages[0].tikket_id;
+
+  const detail: any = mapMessages(messages);
+
+  return { tikketId, detail };
+};
+
+export const mapMessages = (messages: any[]) => {
+  return messages.map((message) => {
+    const date = getDate(message.created_at);
+    return {
+      message: message.message,
+      created_at: message.created_at,
+      date,
+      typePerson:
+        existProp(message, 'user_id') || existProp(message, 'bot_id')
+          ? 'operator'
+          : 'client',
+      userId: existProp(message, 'bot_id')
+        ? getDefaultOperator().userId
+        : message.user_id,
+      botMesssage: existProp(message, 'bot_id'),
+      bot_id: existProp(message, 'bot_id') ? message.bot_id : null,
+      files: existProp(message, 'files') ? mapFiles(message.files) : [],
+      quick_replies: existProp(message, 'quick_replies')
+        ? message.quick_replies
+        : null,
+    };
+  });
+};
+
+export const verifyMessagesInChat = (
+  chat: any[],
+  newMessages: any[]
+): any[] => {
+  const lastMessages = chat.slice(-10);
+
+  const messageFiltered = newMessages.filter(
+    (newMessage) => !verifyByDate(lastMessages, newMessage.created_at)
+  );
+
+  const botMesssage = verifyBotMessage(messageFiltered);
+
+  if (botMesssage.length >= 1) {
+    return botMesssage;
+  }
+
+  if (messageFiltered.length === 0) {
+    return [];
+  }
+
+  return messageFiltered;
+};
+
+const verifyBotMessage = (newMessages: any[]): any[] => {
+  return newMessages.filter((msj) => msj.botMesssage);
+};
+
+const verifyByDate = (arr: any[], date: string): boolean => {
+  let exist = false;
+  arr.forEach((item) => {
+    if (item.created_at === date) {
+      return (exist = true);
+    }
+    return exist;
+  });
+  return exist;
+};
+
+export const thereIsnTikketIdYet = (chat: any): boolean => {
+  return chat.detail.length >= 1 && chat.tikketId === null;
+};
+
+export const dispatchQueuedMessages = (
+  tikketID: string,
+  awaitMessages: any[]
+) => {
+  let messages: any[] = awaitMessages;
+
+  if (messages !== null) {
+    messages.forEach((msj) => {
+      msj.tikketId = tikketID;
+      sendMessage(msj);
+    });
+  }
+};
+
+export const findUserTyping = (userId: string, operators: any[]): string => {
+  const typingUser = operators.filter((operator) => operator.userId === userId);
+  return typingUser[0].imgURL;
+};
+
+export const getNewOperator = (tikket: any, operators: any[]): any => {
+  return existProp(tikket, 'user_id')
+    ? matchOperator(operators, tikket.user_id)[0]
+    : getDefaultOperator();
+};
+
+export const scrollAtBottom = (content: any): void => {
+  content.scrollTop = content.scrollHeight - content.clientHeight;
+};
+
+export const chatBackup = async (chat: any[]) => {
+  const saveChat = await AsyncStorage.getItem('saveChat');
+  if (!(saveChat === 'undefined' || saveChat === 'false')) {
+    return AsyncStorage.setItem('chat', JSON.stringify(chat));
+  }
+  return;
+};
+
+export const setDefaultTikket = (tikket_id: string): boolean => {
+  try {
+    AsyncStorage.setItem('default_tikket', tikket_id);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const getDefaultTikket = async () => {
+  try {
+    const default_tikket: string | null = await AsyncStorage.getItem(
+      'default_tikket'
+    );
+
+    if (!default_tikket) {
+      cleanDefaultTikket();
+      return false;
+    }
+
+    return default_tikket;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const cleanDefaultTikket = (): boolean => {
+  try {
+    AsyncStorage.removeItem('default_tikket');
+    return true;
+  } catch (error) {
+    return false;
+  }
+};

package/src/helpers/chatHistory.helper.ts

@@ -0,0 +1,128 @@
+/** @format */
+
+import { updateHistoryPreview } from '../redux/actions/chatHistory.actions';
+import { setSince, existProp } from './utils.helper';
+import { typingOff } from '../redux/actions/chat.actions';
+import { matchOperator, asingOperator } from './operators.helper';
+import { setSinceStorage } from '../redux/actions/storage.actions';
+
+export const mapTikketsHistory = ({
+  tikkets,
+  showOpInfo,
+  operators,
+  language,
+}: {
+  tikkets: any[];
+  showOpInfo: boolean;
+  operators: any[];
+  language: string;
+  showOpName: string | null;
+  labels: any;
+}): any[] => {
+  return tikkets.map(function (tikket) {
+    const operator = asingOperator(tikket.user_id, operators);
+    const date = new Date(tikket.updated_at);
+    let { messages } = tikket;
+    messages = messages[0];
+    const lastMessage = {
+      msj:
+        messages.type_message === 2 || messages.type_message === 3
+          ? language === 'spanish'
+            ? 'Haz click para continuar tu última conversación'
+            : 'Click to continue your last conversation'
+          : messages.message === ''
+          ? 'archivo adjunto'
+          : typeof messages.message === 'string'
+          ? messages.message.replace(/<[^>]*>?/g, '')
+          : '',
+      date: date,
+      name: existProp(messages, 'user_id')
+        ? `${operator.name}:`
+        : existProp(messages, 'action_bot')
+        ? ''
+        : 'yo:',
+      closed: existProp(tikket, 'closed_at') ? true : false,
+      read: existProp(messages, 'seen') ? true : false,
+    };
+    if (existProp(messages, 'user_id') && !showOpInfo) {
+      lastMessage.name = 'Operador';
+    }
+    return {
+      tikketId: tikket.id,
+      lastMessage,
+      operator,
+      date,
+    };
+  });
+};
+
+export const searchChatInStore = (
+  tikketId: string,
+  chatHistory: any[]
+): any[] => {
+  return chatHistory.filter((chat: any) => {
+    return chat.tikketId === tikketId;
+  });
+};
+
+export const updatePreviewTikket = (
+  data: any,
+  dispatch: any,
+  Storage: any,
+  labels: any
+): void => {
+  const { showOpInfo, showOpName } = Storage; //JSON.parse(sessionStorage.getItem('showOpInfo'));
+  if (data.messages.length === 0) {
+    return;
+  }
+
+  let message: any = {
+    tikketId: data.tikketId,
+    message: data.messages[data.messages.length - 1].message,
+    date: data.messages[data.messages.length - 1].created_at,
+  };
+  const since: string | number = setSince(message.date);
+  dispatch(setSinceStorage(since));
+  if (existProp(data.messages[data.messages.length - 1], 'user_id')) {
+    dispatch(typingOff());
+    const operators: any[] = Storage.operators; //JSON.parse(sessionStorage.getItem('operators'));
+    message.userInfo = matchOperator(
+      operators,
+      data.messages[data.messages.length - 1].user_id
+    )[0];
+  }
+
+  if (
+    !showOpInfo &&
+    existProp(data.messages[data.messages.length - 1], 'user_id')
+  ) {
+    message.userInfo.name = labels.operador;
+  }
+
+  if (
+    showOpName &&
+    existProp(data.messages[data.messages.length - 1], 'user_id')
+  ) {
+    message.userInfo.name = showOpName;
+  }
+
+  dispatch(updateHistoryPreview({ message, showOpInfo, showOpName }));
+};
+
+export const removeFromHistory = (
+  tikketId: string,
+  chatHistory: any[]
+): any[] => {
+  var history = chatHistory;
+  const chat: any[] = history.filter((chat: any) => {
+    return chat.tikketId === tikketId;
+  });
+  if (chat.length === 0) {
+    return [];
+  }
+
+  const rest: any[] = history.filter((chat: any) => {
+    return chat.tikketId !== tikketId;
+  });
+  return [chat[0], rest];
+};