@socialgest/rn-widget 0.0.1

package/src/components/chat/Chat.tsx

@@ -0,0 +1,396 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Text,
+  Platform,
+  ScrollView,
+} from 'react-native';
+// import moment from 'moment';
+
+//Hooks
+import { useAppDispatch, useAppSelector } from '../../hooks/redux-hooks';
+
+// Helper
+import { chatItemHandler } from '../../helpers/render.helper';
+import { scrollAtBottom, setDefaultTikket } from '../../helpers/chat.helper';
+import TimeAgo from '../../helpers/timeAgo.helper';
+import {
+  orderConversations,
+  wc_hex_is_light,
+} from '../../helpers/utils.helper';
+
+// Actions
+// import { sendMessageHandler } from '../../redux/actions/chat.actions';
+// import { setAwaitMessages } from '../../redux/actions/storage.actions';
+// import { changeView } from '../../redux/actions/chatBoard.actions';
+// import { setView, setSinceStorage } from '../../redux/actions/storage.actions';
+// import { RenderChat } from '../../redux/actions/chat.actions';
+// import { searchChat } from '../../redux/actions/chatHistory.actions';
+import {
+  setQuickReplies,
+  setLoadingMsjBot,
+  allowSendMessage,
+} from '../../redux/actions/app.actions';
+
+// Components
+import Typing from '../typing/Typing';
+import ChatHeader from '../header/chatHeader/ChatHeader';
+import TextBox, { submitMsj } from './textBox/TextBox';
+import FirstMessage from './firstMessage/FirstMessage';
+import Errors from '../errors/Errors';
+import CloseMessage from '../chat/closeMessage/CloseMessage';
+import StartMessage from '../chat/startMessage/startMessage';
+import DisconectMessage from '../chat/disconectMessage/disconectMessage';
+import FeedBack from '../feedback/FeedBack';
+import { searchCoversation } from '../conversations/conversationItem/ConversationItem';
+import ModalImagen from './modals/ModalImage';
+
+interface ChatProps {
+  selectFile: any;
+}
+
+const Chat: React.FC<ChatProps> = ({ selectFile }) => {
+  const [index, setIndex] = useState<number | null>(null);
+  const [limit, setLimit] = useState<number>(6);
+  const [state_quick, setStateQuick] = useState<boolean>(false);
+  const [open_exists, setOpenExists] = useState<boolean | null>(null);
+  const [quick_replies_state, setQuickRepliesState] = useState<any[]>([]);
+  const [quick_replies_date, setQuickRepliesDate] = useState<any>(new Date());
+  const [chatDetail, setChatDetail] = useState<any[]>([]);
+
+  const dispatch = useAppDispatch();
+  const app = useAppSelector((state) => state.app);
+  const { errors, socket, user, quick_replies } = app;
+  const form = useAppSelector((state) => state.app.FormChat);
+  const awaitMessages = useAppSelector((state) => state.Storage.awaitMessages);
+
+  const initProps = useAppSelector((state) => state.app.initProperties);
+  const chat = useAppSelector((state) => state.chat);
+  const { randonOperators } = useAppSelector((state) => state.Operators);
+
+  const randomOperator = useAppSelector(
+    (state) => state.Operators.randonOperators
+  );
+  const loading = useAppSelector((state) => state.chatBoard.loading);
+  const lang = useAppSelector((state) => state.Storage.lang);
+
+  const { previews, history } = useAppSelector((state) => state.chatHistory);
+  const { operators } = useAppSelector((state) => state.Operators);
+
+  var props = {
+    app,
+    operators,
+    chatHistory: history,
+    previews,
+    chat,
+    awaitMessages,
+    randonOperators,
+  };
+
+  useEffect(() => {
+    if (chat.detail !== chatDetail) {
+      setChatDetail(chat.detail);
+    }
+    if (quick_replies_state !== quick_replies && chat.detail.length > 0) {
+      setQuickRepliesState(quick_replies);
+
+      setStateQuick(quick_replies ? true : false);
+
+      setQuickRepliesDate(
+        quick_replies ? chat.detail[chat.detail.length - 1].date : new Date()
+      );
+    } else {
+      setStateQuick(false);
+      setQuickRepliesState([]);
+    }
+  }, [quick_replies, chat]);
+
+  const { typing } = chat;
+
+  const chatContent = useRef(null);
+  const chatBoard = useRef(null);
+
+  const chatItems = chatItemHandler(chatDetail, lang);
+
+  const startMessageCondition = !form.sent && socket !== 'closed' && !user;
+  const closeMessageCondition = chat.closed && socket !== 'closed';
+  const disconectCondition = socket === 'closed';
+  const textBoxCondition =
+    (form.sent && !chat.closed && socket !== 'closed') ||
+    (user && !chat.closed && socket !== 'closed');
+
+  useEffect(() => {
+    if (chat.textBoxMessage && chat.detail.length === 0 && !open_exists) {
+      let chats = orderConversations(previews);
+      let search_open_chat = previews.findIndex(
+        (el: any) => el.lastMessage.closed === false || !el.lastMessage.closed
+      );
+      if (search_open_chat !== -1) {
+        setOpenExists(true);
+
+        if (chats[search_open_chat]) {
+          searchCoversation(props, dispatch, true, chats[search_open_chat]);
+          dispatch(allowSendMessage(true));
+        }
+      } else {
+        setOpenExists(false);
+      }
+    }
+  }, [chat.detail, chat.textBoxMessage, open_exists, props]);
+
+  useEffect(() => {
+    scrollAtBottom(chatContent.current);
+
+    if (!loading && chat?.tikketId && !chat?.closed) {
+      setDefaultTikket(chat?.tikketId);
+    }
+  });
+
+  const counter = chat.detail.length;
+
+  const sendQuickReplies = (title: string) => {
+    setIndex(null);
+    submitMsj(props, title, [], null, 'bot', dispatch);
+    setQuickRepliesState([]);
+    setQuickRepliesDate(null);
+    setStateQuick(false);
+    dispatch(setQuickReplies(false));
+    dispatch(setLoadingMsjBot(true));
+  };
+
+  const colorBackground = (index: number | null, i: number) => {
+    var color = '#ffffff';
+    if (index !== i) {
+      color = initProps.primaryColor;
+    }
+    return color;
+  };
+
+  const colorBackgroundAndBorde = (index: number | null, i: number) => {
+    var color =
+      initProps.textColor.toLowerCase() === '#ffffff' &&
+      colorBackground(index, i) === '#ffffff'
+        ? initProps.primaryColor
+        : !wc_hex_is_light(initProps.primaryColor) &&
+          colorBackground(index, i) === '#ffffff'
+        ? initProps.primaryColor
+        : initProps.textColor;
+    return color;
+  };
+
+  const colorBackgroundAndBorde2 = (index: number | null, i: number) => {
+    var color =
+      colorBackground(index, i) !== '#ffffff'
+        ? initProps.primaryColor
+        : !wc_hex_is_light(initProps.primaryColor) &&
+          colorBackground(index, i) === '#ffffff'
+        ? initProps.primaryColor
+        : initProps.textColor;
+    return color;
+  };
+
+  const backgroundColor = !wc_hex_is_light(initProps.primaryColor)
+    ? initProps.primaryColor
+    : initProps.textColor;
+
+  return (
+    <>
+      <ChatHeader />
+      <ModalImagen />
+      <Errors errors={errors} />
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={80}
+        behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+      >
+        <View style={styles.view1}>
+          <View style={styles.chatBoard}>
+            <View style={styles.messagescontent} ref={chatContent}>
+              {!loading && (
+                <>
+                  {form.sent && (
+                    <FirstMessage
+                      userId={randomOperator[0]?.userId}
+                      counterMsj={counter}
+                      message={initProps.chatFirstMessage}
+                      type={'message'}
+                    />
+                  )}
+                  {!form.sent && (
+                    <FirstMessage
+                      userId={randomOperator[0]?.userId}
+                      message={null}
+                      counterMsj={counter}
+                      type={'form'}
+                    />
+                  )}
+                </>
+              )}
+              <ScrollView style={[styles.scroll, styles.transform]}>
+                <View style={styles.transform}>
+                  {chatItems}
+                  {quick_replies?.length > 0 && !closeMessageCondition && (
+                    <View style={styles.operator}>
+                      <View style={styles.QuickReplies}>
+                        {quick_replies
+                          .slice(0, limit)
+                          .map((value: any, i: number) => (
+                            <TouchableOpacity
+                              key={i}
+                              onPress={() => {
+                                sendQuickReplies(value.title);
+                              }}
+                              style={[
+                                styles.QuickRepliesButton,
+                                {
+                                  backgroundColor: colorBackground(index, i),
+                                  borderColor: colorBackgroundAndBorde2(
+                                    index,
+                                    i
+                                  ),
+                                },
+                              ]}
+
+                              // onMouseOver={(e) => {
+                              //   if (index !== i) {
+                              //     toggleHover(i);
+                              //   }
+                              // }}
+                              // onMouseLeave={() => {
+                              //   if (index === i) {
+                              //     toggleHover(i);
+                              //   }
+                              // }}
+                            >
+                              <Text
+                                style={[
+                                  styles.QuickRepliesText,
+                                  {
+                                    color: colorBackgroundAndBorde(index, i),
+                                  },
+                                ]}
+                              >
+                                {value.title}
+                              </Text>
+                            </TouchableOpacity>
+                          ))}
+                        {!closeMessageCondition &&
+                          quick_replies.length > 6 &&
+                          limit === 6 && (
+                            <TouchableOpacity
+                              onPress={() => {
+                                setLimit(quick_replies.length);
+                              }}
+                              style={[
+                                styles.white,
+                                styles.QuickRepliesButton,
+                                {
+                                  backgroundColor,
+                                  borderColor: backgroundColor,
+                                },
+                              ]}
+                            >
+                              <Text
+                                style={[
+                                  styles.QuickRepliesText,
+                                  {
+                                    color: !wc_hex_is_light(
+                                      initProps.primaryColor
+                                    )
+                                      ? initProps.primaryColor
+                                      : initProps.textColor,
+                                  },
+                                ]}
+                              >
+                                {lang === 'spanish' ? 'Ver más' : 'See more'}
+                              </Text>
+                            </TouchableOpacity>
+                          )}
+                      </View>
+                      <TimeAgo
+                        style={{
+                          fontSize: 10,
+                          marginVertical: 5,
+                        }}
+                        time={quick_replies_date}
+                      />
+                    </View>
+                  )}
+                  {typing && <Typing />}
+                  <FeedBack />
+                </View>
+              </ScrollView>
+            </View>
+          </View>
+          {textBoxCondition && !state_quick && (
+            <TextBox chatBoard={chatBoard} openFile={selectFile} />
+          )}
+          {startMessageCondition && <StartMessage />}
+          {closeMessageCondition && <CloseMessage />}
+          {disconectCondition && <DisconectMessage initProps={initProps} />}
+        </View>
+      </KeyboardAvoidingView>
+    </>
+  );
+};
+const styles = StyleSheet.create({
+  chatBoard: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+    height: '85.5%',
+  },
+  scroll: {
+    maxHeight: '100%',
+  },
+  view4: {
+    width: '100%',
+    position: 'absolute',
+    bottom: 10,
+    height: '20%',
+    maxHeight: '35%',
+  },
+  transform: {
+    transform: [{ scaleY: -1 }],
+  },
+  messagescontent: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    paddingTop: 10,
+    width: '100%',
+  },
+  operator: {
+    margin: 9,
+    flexDirection: 'column',
+    display: 'flex',
+  },
+  boardContent2: {
+    height: '90%',
+    position: 'relative',
+    width: '100%',
+  },
+  QuickReplies: {
+    paddingLeft: 35,
+    width: 'auto',
+    flexDirection: 'row',
+  },
+  QuickRepliesButton: {
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    margin: 5,
+    borderRadius: 5,
+    width: 'auto',
+  },
+  QuickRepliesText: {
+    fontWeight: '400',
+    color: '#000',
+  },
+  white: { backgroundColor: '#fff' },
+  view1: { height: '90%' },
+});
+
+export default Chat;

package/src/components/chat/closeMessage/CloseMessage.tsx

@@ -0,0 +1,118 @@
+import React, { type FC } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+// Actions
+import { cleanChat, RenderChat } from '../../../redux/actions/chat.actions';
+import { setQuickReplies } from '../../../redux/actions/app.actions';
+// import { searchChat } from '../../../redux/actions/chatHistory.actions';
+import {
+  setAwaitMessages,
+  setSinceStorage,
+  setView,
+} from '../../../redux/actions/storage.actions';
+import { changeView } from '../../../redux/actions/chatBoard.actions';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../../hooks/redux-hooks';
+
+// Helper
+import { searchChatInStore } from '../../../helpers/chatHistory.helper';
+import { setSince } from '../../../helpers/utils.helper';
+
+// Svg
+import IconCheckCircle from '../../../assets/svg/checkCircle';
+
+interface CloseMessageProps {}
+
+const CloseMessage: FC<CloseMessageProps> = () => {
+  const { labels } = useAppSelector((state) => state.app);
+  const chatHistory = useAppSelector((state) => state.chatHistory.history);
+  const { previews } = useAppSelector((state) => state.chatHistory);
+
+  const dispatch = useAppDispatch();
+
+  return (
+    <View style={styles.view4}>
+      <View style={styles.chatInput}>
+        <IconCheckCircle width={40} height={40} color={'#d1d2d3'} />
+
+        <View style={styles.view1}>
+          <Text style={styles.message}>
+            {labels.close_tittle}{' '}
+            <Text style={styles.bold}>{labels.close_tittle_bold}</Text>
+          </Text>
+          <View>
+            <Text style={styles.subtittle}>
+              {labels.close_paragraph_1}{' '}
+              <Text style={styles.bold}> {labels.close_paragraph_2}</Text>{' '}
+              {labels.close_paragraph_3}{' '}
+              <Text
+                onPress={() => {
+                  const search_tikket_open = previews.find(
+                    (el: any) => !el.lastMessage.closed
+                  );
+
+                  dispatch(setQuickReplies(false));
+                  dispatch(setAwaitMessages(null));
+
+                  if (search_tikket_open) {
+                    const chat = searchChatInStore(
+                      search_tikket_open.tikketId,
+                      chatHistory
+                    );
+                    const since = setSince(chat[0].detail.date);
+                    dispatch(RenderChat(chat[0]));
+                    dispatch(setSinceStorage(since));
+                    dispatch(changeView('chat'));
+                    dispatch(setView('chat'));
+                  } else {
+                    dispatch(cleanChat());
+                  }
+                }}
+                style={[styles.subtittle, styles.bold]}
+              >
+                {labels.close_paragraph_link}
+              </Text>
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  chatInput: {
+    backgroundColor: '#f1f1f1',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    width: '100%',
+    paddingLeft: 10,
+    paddingHorizontal: 15,
+  },
+  message: {
+    fontSize: 14,
+    color: '#000',
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  subtittle: {
+    fontSize: 11,
+    color: '#000',
+  },
+  view1: { width: '80%', margin: 5, paddingVertical: 5 },
+  view4: {
+    width: '100%',
+    // position: 'absolute',
+    // bottom: -35,
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+    // bottom: Platform.OS === 'ios' ? -20 : -15,
+    height: '20%',
+    maxHeight: '35%',
+  },
+});
+
+export default CloseMessage;

package/src/components/chat/disconectMessage/disconectMessage.tsx

@@ -0,0 +1,101 @@
+import React, { type FC } from 'react';
+import {
+  // Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+// Actions
+import { reconectSocket } from '../../../redux/actions/app.actions';
+
+// Hooks
+import { useAppDispatch } from '../../../hooks/redux-hooks';
+
+// Svg
+import NoConectionIcon from '../../../assets/svg/no-conection';
+
+interface DisconectMessageProps {
+  initProps: {
+    primaryColor: string;
+    primaryTextColor: string;
+  };
+}
+
+const DisconectMessage: FC<DisconectMessageProps> = (props) => {
+  const dispatch = useAppDispatch();
+  return (
+    <View style={styles.view4}>
+      <View style={styles.chatInput}>
+        <NoConectionIcon width={64} height={64} />
+        <View style={styles.message}>
+          <Text style={styles.subtittle}>Conexión perdida con el servidor</Text>
+          <TouchableOpacity
+            style={[
+              styles.btnSubmit,
+              {
+                backgroundColor: props.initProps.primaryColor,
+              },
+            ]}
+            onPress={() => {
+              dispatch(reconectSocket());
+            }}
+          >
+            <Text
+              style={[styles.text, { color: props.initProps.primaryTextColor }]}
+            >
+              Reconectar
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  chatInput: {
+    borderTopColor: '#afafb2',
+    borderTopWidth: 1,
+    backgroundColor: '#f1f1f1',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    width: '100%',
+    paddingLeft: 10,
+    paddingHorizontal: 15,
+  },
+  message: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 12,
+    color: '#afafb2',
+    fontWeight: '300',
+  },
+  subtittle: {
+    fontSize: 11,
+    color: '#000',
+  },
+  btnSubmit: {
+    marginTop: 5,
+    padding: 5,
+    borderRadius: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  view4: {
+    width: '100%',
+    // position: 'absolute',
+    // bottom: -35,
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+    // bottom: Platform.OS === 'ios' ? -20 : -15,
+    height: '20%',
+    maxHeight: '35%',
+  },
+});
+
+export default DisconectMessage;

package/src/components/chat/firstMessage/FirstMessage.tsx

@@ -0,0 +1,35 @@
+import React, { type FC } from 'react';
+import MessageItem from '../messageItem/MessageItem';
+
+interface FirstMessageProps {
+  userId: string | undefined;
+  counterMsj: number;
+  message: string | null;
+  type: string;
+}
+
+const FirstMessage: FC<FirstMessageProps> = ({
+  userId,
+  counterMsj,
+  message,
+  type,
+}) => {
+  const data = {
+    files: [],
+    message,
+    typePerson: 'operator',
+    userId,
+    type,
+    messageType: 'automatic',
+  };
+
+  if (type === 'message') {
+    return <>{counterMsj === 0 && <MessageItem data={data} />}</>;
+  }
+  if (type === 'form') {
+    return <>{counterMsj === 0 && <MessageItem data={data} />}</>;
+  }
+  return null;
+};
+
+export default FirstMessage;