@socialgest/rn-widget 0.0.1

package/src/components/chatBoard/ChatBoard.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  StatusBar,
+} from 'react-native';
+
+// Component
+import Chat from '../chat/Chat';
+import Footer from '../footer/Footer';
+import Conversations from '../conversations/Conversations';
+import Main from '../main/Main';
+import SearchHelpCenter from '../helpCenter/SearchHelpCenter/SearchHelpCenter';
+import Loading from '../loading/Loading';
+
+// Svg
+import CloseIcon from '../../assets/svg/close';
+
+// Actions
+import { setOpenClosed } from '../../redux/actions/storage.actions';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../hooks/redux-hooks';
+
+interface StatusBarPlaceHolderProps {
+  backgroundColor: string;
+}
+
+// const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 44 : 0;
+
+const StatusBarPlaceHolder: React.FC<StatusBarPlaceHolderProps> = ({
+  backgroundColor,
+}) => {
+  return (
+    <View style={[styles.view2, { backgroundColor }]}>
+      <StatusBar
+        animated={true}
+        backgroundColor={backgroundColor}
+        barStyle={'light-content'}
+        showHideTransition={'fade'}
+      />
+    </View>
+  );
+};
+
+interface ChatBoardProps {
+  selectFile: any;
+}
+
+const ChatBoard: React.FC<ChatBoardProps> = ({ selectFile }) => {
+  const chatboard = useAppSelector((state) => state.chatBoard);
+  const initprops = useAppSelector((state) => state.app.initProperties);
+  const { labels } = useAppSelector((state) => state.app);
+
+  const dispatch = useAppDispatch();
+  return (
+    <>
+      <StatusBarPlaceHolder backgroundColor={initprops.primaryColor} />
+      {chatboard.loading && <Loading />}
+      <>
+        {chatboard.boardView === 'search' ? (
+          <SearchHelpCenter />
+        ) : (
+          <>
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => {
+                dispatch(setOpenClosed(false));
+              }}
+            >
+              <CloseIcon color={'#fff'} width={24} height={24} />
+            </TouchableOpacity>
+            <View style={styles.board}>
+              {chatboard.boardView === 'main' && <Main />}
+              {chatboard.boardView === 'chat' && (
+                <Chat selectFile={selectFile} />
+              )}
+              {chatboard.boardView === 'conversations' && <Conversations />}
+            </View>
+            <Footer labels={labels} whiteMark={initprops.whiteMark} />
+          </>
+        )}
+      </>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  closeButton: {
+    position: 'absolute',
+    top: Platform.OS === 'ios' ? 25 : 10,
+    right: 10,
+    zIndex: 100,
+  },
+  icon: {
+    color: '#FFFFFF',
+    width: 24,
+    height: 24,
+  },
+  board: {
+    backgroundColor: '#fff',
+    height: Platform.OS === 'ios' ? '95%' : '100%',
+  },
+  view2: {
+    width: '100%',
+    // height: STATUS_BAR_HEIGHT,
+    borderBottomColor: '#fff',
+    borderBottomWidth: 0.2,
+  },
+});
+
+export default ChatBoard;

package/src/components/chatButton/ChatButton.tsx

@@ -0,0 +1,49 @@
+import React, { type FC } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+// Actions
+import { changeVisibility } from '../../redux/actions/chatBoard.actions';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../hooks/redux-hooks';
+
+interface ChatButtonProps {}
+
+const styles = StyleSheet.create({
+  btnChat: {
+    borderRadius: 50,
+    height: 40,
+    width: 40,
+    fontSize: 2,
+  },
+});
+
+const ChatButton: FC<ChatButtonProps> = () => {
+  const dispatch = useAppDispatch();
+
+  const chatboard = useAppSelector((state) => state.chatBoard);
+  const app = useAppSelector((state) => state.app);
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.btnChat,
+        {
+          backgroundColor: app.initProperties.primaryColor,
+        },
+      ]}
+      onPress={() => {
+        dispatch(changeVisibility(!chatboard.showBoard));
+      }}
+    >
+      <i
+        className="fas fa-comments"
+        style={{
+          color: app.initProperties.primaryTextColor,
+        }}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default ChatButton;

package/src/components/chatDate/ChatDate.tsx

@@ -0,0 +1,34 @@
+import React, { type FC } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import moment from 'moment';
+import 'moment/locale/es';
+
+interface ChatDateProps {
+  date: string;
+  lang: string;
+}
+
+const styles = StyleSheet.create({
+  date: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 5,
+  },
+  text: {
+    fontSize: 16,
+    color: '#8f8e94',
+  },
+});
+
+const ChatDate: FC<ChatDateProps> = ({ date, lang }) => {
+  date = date.split('-').join('/');
+  lang = lang === 'spanish' ? 'en' : 'en';
+
+  return (
+    <View style={styles.date}>
+      <Text style={styles.text}>{moment(date).locale(lang).format('LL')}</Text>
+    </View>
+  );
+};
+
+export default ChatDate;

package/src/components/conversations/Conversations.tsx

@@ -0,0 +1,147 @@
+import React, { type FC, useState, useEffect } from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  Text,
+  ScrollView,
+} from 'react-native';
+import { connect } from 'react-redux';
+
+// Helper
+import { conversationsItemHandler } from '../../helpers/render.helper';
+
+// Actions
+import { changeView } from '../../redux/actions/chatBoard.actions';
+import { setView } from '../../redux/actions/storage.actions';
+import { setQuickReplies } from '../../redux/actions/app.actions';
+
+// Component
+import SectionHeader from '../header/sectionHeader/SectionHeader';
+
+import { useAppDispatch, useAppSelector } from '../../hooks/redux-hooks';
+import { searchCoversation } from './conversationItem/ConversationItem';
+
+interface ConversationsProps {}
+
+const styles = StyleSheet.create({
+  buttonContent: {
+    borderTopColor: '#afafb2',
+    borderTopWidth: 0.5,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // position: 'absolute',
+    // bottom:  25,
+    // height: '10%',
+    padding: 10,
+    width: '100%',
+  },
+  view: {
+    height: '100%',
+  },
+  btnMsj: {
+    width: '90%',
+    alignItems: 'center',
+  },
+  header: { height: '10%' },
+  btn: {
+    padding: 8,
+    backgroundColor: '#1082ff',
+    borderRadius: 10,
+  },
+  scroll: { height: 500, paddingVertical: 5 },
+  text: {
+    fontSize: 12,
+    fontWeight: '300',
+  },
+});
+
+const Conversations: FC<ConversationsProps> = () => {
+  const dispatch = useAppDispatch();
+  const chatPreviews = useAppSelector(
+    (state: any) => state.chatHistory.previews
+  );
+  const { initProperties } = useAppSelector((state) => state.app);
+  const app = useAppSelector((state) => state.app);
+  const { labels } = app;
+  const operators = useAppSelector((state) => state.Storage.operators_complete);
+  const chatHistory = useAppSelector((state) => state.chatHistory.history);
+  const previews = useAppSelector((state) => state.chatHistory.previews);
+
+  const conversationItem = conversationsItemHandler(chatPreviews);
+
+  const [open_exists, setOpenExists] = useState<any>(null);
+  const [index, setIndex] = useState<any>(null);
+
+  var props = { app, operators, chatHistory, previews };
+
+  useEffect(() => {
+    const open_chat = (element: any) => {
+      if (element.lastMessage.closed === false || !element.lastMessage.closed) {
+        return element;
+      }
+    };
+
+    let search_open_chat = chatPreviews.findIndex(open_chat);
+
+    if (search_open_chat !== -1) {
+      setOpenExists(true);
+      setIndex(search_open_chat);
+    } else {
+      setOpenExists(false);
+    }
+  }, []);
+
+  return (
+    <View style={styles.view}>
+      <View style={styles.header}>
+        <SectionHeader tittle="Conversaciones" />
+      </View>
+
+      <ScrollView style={styles.scroll}>{conversationItem}</ScrollView>
+
+      <View style={styles.buttonContent}>
+        <TouchableOpacity
+          style={[
+            styles.btnMsj,
+            styles.btn,
+            {
+              backgroundColor: initProperties.primaryColor,
+            },
+          ]}
+          onPress={() => {
+            if (open_exists) {
+              searchCoversation(props, dispatch, true, chatPreviews[index]);
+            } else {
+              dispatch(setQuickReplies(false));
+              dispatch(changeView('chat'));
+              dispatch(setView('chat'));
+            }
+          }}
+        >
+          <Text
+            style={[styles.text, { color: initProperties.primaryTextColor }]}
+          >
+            {labels.new_chat_button}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const mapStateToProps = (state: any) => {
+  return {
+    chatPreviews: state.chatHistory.previews,
+    initProperties: state.app.initProperties,
+  };
+};
+
+const mapDispatchToProps = {
+  changeView,
+  setView,
+  setQuickReplies,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Conversations);

package/src/components/conversations/avatar/Avatar.tsx

@@ -0,0 +1,136 @@
+import React, { type FC } from 'react';
+import { StyleSheet, View, Image } from 'react-native';
+
+// Hooks
+import { useAppSelector } from '../../../hooks/redux-hooks';
+
+interface AvatarProps {
+  imgURL: string;
+  userId: string | null;
+  read: boolean;
+}
+
+interface Operator {
+  imgURL: string;
+  active: boolean;
+}
+
+const Avatar: FC<AvatarProps> = ({ imgURL, userId, read }) => {
+  const app = useAppSelector((state) => state.app);
+  const operators = useAppSelector((state) => state.Operators.randonOperators);
+
+  const { bot, initProperties } = app;
+  const activeOperators = operators.filter(({ active }) => active).slice(0, 3);
+
+  const displayOperators = (operators: Operator[] | any[]) =>
+    operators?.length >= 3 ? (
+      <View style={styles.group}>
+        {!read && <View style={styles.tic} />}
+        <Image
+          style={[styles.first, styles.group_of_3]}
+          source={{ uri: operators[0].imgURL }}
+        />
+        <Image
+          style={[styles.second, styles.group_of_3]}
+          source={{ uri: operators[1].imgURL }}
+        />
+        <Image
+          style={styles.group_of_3}
+          source={{ uri: operators[2].imgURL }}
+        />
+      </View>
+    ) : operators?.length === 2 ? (
+      <View style={styles.group}>
+        {!read && <View style={styles.tic} />}
+        <Image
+          style={[styles.first1, styles.group_of_2]}
+          source={{ uri: operators[0].imgURL }}
+        />
+        <Image
+          style={styles.group_of_2}
+          source={{ uri: operators[1].imgURL }}
+        />
+      </View>
+    ) : (
+      <View style={styles.chatAvatar}>
+        {!read && <View style={styles.tic} />}
+        <Image
+          style={styles.image}
+          source={{ uri: operators[0]?.imgURL || bot.photo }}
+        />
+      </View>
+    );
+
+  if (!initProperties.showOperatorsInfo) {
+    return (
+      <View style={styles.chatAvatar}>
+        {!read && <View style={styles.tic} />}
+        <Image style={styles.image} source={{ uri: bot.photo }} />
+      </View>
+    );
+  }
+  if (userId != null) {
+    return (
+      <View style={styles.chatAvatar}>
+        {!read && <View style={styles.tic} />}
+        <Image style={styles.image} source={{ uri: imgURL }} />
+      </View>
+    );
+  }
+  return displayOperators(activeOperators);
+};
+
+const styles = StyleSheet.create({
+  chatAvatar: {
+    position: 'relative',
+  },
+  image: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+  },
+  tic: {
+    position: 'absolute',
+    zIndex: 10,
+    width: 15,
+    height: 15,
+    backgroundColor: '#dc3545',
+    borderRadius: 25,
+    right: -5,
+    top: 0,
+  },
+  group: {
+    width: 40,
+    height: 40,
+    position: 'relative',
+  },
+  group_of_2: {
+    width: 28,
+    height: 28,
+    position: 'absolute',
+    top: 4,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#fff',
+  },
+  first1: {
+    left: '30%',
+  },
+  group_of_3: {
+    width: 25,
+    height: 25,
+    position: 'absolute',
+    borderRadius: 12.5,
+    borderWidth: 1,
+    borderColor: '#FFF',
+  },
+  first: {
+    left: '35%',
+  },
+  second: {
+    top: '35%',
+    left: '25%',
+  },
+});
+
+export default Avatar;

package/src/components/conversations/conversationItem/ConversationItem.tsx

@@ -0,0 +1,221 @@
+import React, { type FC } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+
+// Actios
+import { searchChat } from '../../../redux/actions/chatHistory.actions';
+import { RenderChat } from '../../../redux/actions/chat.actions';
+import { changeView } from '../../../redux/actions/chatBoard.actions';
+import {
+  setView,
+  setSinceStorage,
+  setChat,
+} from '../../../redux/actions/storage.actions';
+import {
+  // allowSendMessage,
+  setQuickReplies,
+} from '../../../redux/actions/app.actions';
+
+// Helper
+import {
+  cutLongText,
+  existProp,
+  setSince,
+} from '../../../helpers/utils.helper';
+import { searchChatInStore } from '../../../helpers/chatHistory.helper';
+import TimeAgo from '../../../helpers/timeAgo.helper';
+
+// Component
+import Avatar from '../avatar/Avatar';
+
+// Service
+import { sendSeenMessage } from '../../../services/chat.service';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../../hooks/redux-hooks';
+
+interface ConversationItemProps {
+  data: {
+    lastMessage: {
+      read: boolean;
+      name: string;
+      msj: string;
+      date: string;
+    };
+    operator: {
+      imgURL: string;
+      userId: string;
+    };
+    tikketId: string;
+  };
+}
+
+const ConversationItem: FC<ConversationItemProps> = (props) => {
+  const dispatch = useAppDispatch();
+  const app = useAppSelector((state) => state.app);
+  const operators = useAppSelector((state) => state.Operators.operators);
+  const chatHistory = useAppSelector((state) => state.chatHistory.history);
+  const previews = useAppSelector((state) => state.chatHistory.previews);
+
+  const bold = !props.data.lastMessage.read ? styles.bold : {};
+
+  var values = { app, operators, chatHistory, previews, data: props.data };
+
+  return (
+    <>
+      <TouchableOpacity
+        style={styles.historicalItem}
+        onPress={() => {
+          searchCoversation(values, dispatch, false);
+        }}
+      >
+        <View style={styles.left}>
+          <Avatar
+            read={props.data.lastMessage.read}
+            imgURL={props.data.operator.imgURL}
+            userId={props.data.operator.userId}
+          />
+
+          <Text style={[bold, styles.span]}>
+            {props.data.lastMessage.name && (
+              <Text>
+                {props.data.lastMessage.name}
+                {props.data.lastMessage.name.charAt(
+                  props.data.lastMessage.name.length - 1
+                ) === ':'
+                  ? ' '
+                  : ': '}
+              </Text>
+            )}
+            {props.data.lastMessage.msj && (
+              <Text>
+                {cutLongText(
+                  props.data.lastMessage.msj.replace(/<[^>]*>?/g, ''),
+                  10
+                )}
+              </Text>
+            )}
+          </Text>
+        </View>
+        <TimeAgo style={styles.time} time={props.data.lastMessage.date} />
+      </TouchableOpacity>
+      <View style={styles.view} />
+    </>
+  );
+};
+
+export const searchCoversation = (
+  props: any,
+  dispatch: any,
+  update: boolean,
+  values?: any
+) => {
+  const chat = searchChatInStore(
+    values ? values.tikketId : props.data.tikketId,
+    props.chatHistory
+  );
+
+  const chatTosearch = searchChatInStore(
+    values ? values.tikketId : props.data.tikketId,
+    props.previews
+  );
+
+  var id = values ? values.tikketId : props.data.tikketId;
+  if (id) {
+    dispatchSeen(props, values);
+  }
+
+  if (chat.length === 0 || update) {
+    const data = {
+      token: values && values.token ? values.token : props.app.token,
+      channelId:
+        values && values.channelId ? values.channelId : props.app.channelId,
+      tikketId: values ? values.tikketId : props.data.tikketId,
+      operator: values ? values.operator : props.data.operator,
+      preview: update ? chat[0] : chatTosearch[0],
+    };
+
+    dispatch(setQuickReplies(false));
+    dispatch(searchChat(data));
+    return;
+  }
+
+  const latestMessage = existProp(
+    chat[0].detail[chat[0].detail.length - 1],
+    'quick_replies'
+  );
+
+  if (latestMessage) {
+    dispatch(
+      setQuickReplies(chat[0].detail[chat[0].detail.length - 1].quick_replies)
+    );
+  }
+
+  const since = setSince(chat[0].detail.date);
+
+  if (props?.data?.lastMessage?.closed) {
+    dispatch(setChat(null));
+  }
+
+  dispatch(RenderChat(chat[0]));
+  dispatch(setSinceStorage(since));
+  dispatch(changeView('chat'));
+  dispatch(setView('chat'));
+};
+
+const dispatchSeen = (props: any, values?: any) => {
+  const tikketId = values ? values.tikketId : props.data.tikketId;
+  const preview = props.previews.filter(
+    (preview: any) => preview.tikketId === tikketId
+  );
+  if (!preview[0]?.lastMessage?.read) {
+    const data = {
+      token: values && values.token ? values.token : props.app.token,
+      channelId:
+        values && values.channelId ? values.channelId : props.app.channelId,
+      tikketId: tikketId,
+      timestamp_since: new Date().getTime(),
+    };
+    sendSeenMessage(data);
+  }
+};
+
+const styles = StyleSheet.create({
+  historicalItem: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: 8,
+    flexDirection: 'row',
+  },
+  left: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  span: {
+    marginLeft: 6,
+    color: '#000',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 12,
+  },
+  hr: {
+    backgroundColor: '#afafb2',
+    height: 5,
+    width: '100%',
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  time: {
+    fontSize: 12,
+  },
+  view: {
+    backgroundColor: '#cccccc',
+    height: 1,
+    width: '100%',
+  },
+});
+
+export default ConversationItem;