@socialgest/rn-widget 0.0.1

package/src/components/chat/startMessage/startMessage.tsx

@@ -0,0 +1,54 @@
+import React, { type FC } from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+
+// Hooks
+import { useAppSelector } from '../../../hooks/redux-hooks';
+
+// Svg
+import IconHeadSet from '../../../assets/svg/headset';
+
+interface StartMessageProps {}
+
+const styles = StyleSheet.create({
+  chatInput: {
+    borderTopColor: '#afafb2',
+    borderTopWidth: 1,
+    backgroundColor: '#f1f1f1',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    width: '100%',
+    padding: 15,
+  },
+  message: {
+    marginRight: 8,
+  },
+  view4: {
+    width: '100%',
+    position: 'absolute',
+    bottom: -10,
+    height: Platform.OS === 'web' ? 78 : '20%',
+    maxHeight: Platform.OS === 'web' ? 88 : '35%',
+  },
+  text: {
+    fontSize: 14,
+    color: '#afafb2',
+  },
+});
+
+const StartMessage: FC<StartMessageProps> = () => {
+  const { labels } = useAppSelector((state) => state.app);
+  return (
+    <View style={styles.view4}>
+      <View style={styles.chatInput}>
+        <IconHeadSet width={40} height={40} color={'#d1d2d3'} />
+
+        <View style={styles.message}>
+          <Text style={styles.text}>{labels.no_form_sent_message}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default StartMessage;

package/src/components/chat/textBox/Picker.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import EmojiPicker from 'rn-emoji-keyboard';
+
+interface PickerComponentProps {
+  showEmoji: boolean;
+  onEmojiClick: (emoji: string) => void;
+  close: () => void;
+}
+
+export default function PickerComponent(props: PickerComponentProps) {
+  const [isOpen, setIsOpen] = React.useState<boolean>(props.showEmoji);
+
+  const handlePick = (emojiObject: { emoji: string }) => {
+    props.onEmojiClick(emojiObject.emoji);
+  };
+
+  return (
+    <EmojiPicker
+      onEmojiSelected={handlePick}
+      open={isOpen}
+      onClose={() => {
+        setIsOpen(false);
+        props.close();
+      }}
+    />
+  );
+}

package/src/components/chat/textBox/TextBox.tsx

@@ -0,0 +1,589 @@
+import React, { useRef, useEffect, useState } from 'react';
+import {
+  View,
+  TextInput,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  Platform,
+} from 'react-native';
+import PickerComponent from './Picker';
+
+import {
+  sendMessageHandler,
+  RenderMessageWithoutTikketId,
+  initMsjDetail,
+} from '../../../redux/actions/chat.actions';
+import { setAwaitMessages } from '../../../redux/actions/storage.actions';
+import { getDate, isObjEmpty } from '../../../helpers/utils.helper';
+import { thereIsnTikketIdYet } from '../../../helpers/chat.helper';
+import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import DocumentPicker from 'react-native-document-picker';
+import { sendTyping } from '../../../services/chat.service';
+import useFileHandlers from '../../../hooks/useFileHandlers';
+// import Loading from '../../loading/Loading';
+// import BounceLoader from 'react-spinners/BounceLoader';
+import {
+  setErrors,
+  setQuickReplies,
+  setLoadingMsjBot,
+} from '../../../redux/actions/app.actions';
+import IconsSmile from '../../../assets/svg/smile';
+import IconPaperclip from '../../../assets/svg/paperclicp';
+import IconPaperPlane from '../../../assets/svg/paperplane';
+// import IconImage from '../../../assets/svg/image';
+// import IconVideo from '../../../assets/svg/videoicon';
+import IconTimesCircle from '../../../assets/svg/timescircle';
+import IconPdf from '../../../assets/svg/pdf';
+import IconPPT from '../../../assets/svg/ppt';
+import VideoIcon from '../../../assets/svg/video';
+import IconDoc from '../../../assets/svg/doc';
+import XlsIcon from '../../../assets/svg/xls';
+
+import { useAppDispatch, useAppSelector } from '../../../hooks/redux-hooks';
+
+interface Props {
+  chatBoard: any;
+  openFile: any;
+}
+
+const TextBox: React.FC<Props> = ({ chatBoard, /*openFile*/ }) => {
+  const dispatch = useAppDispatch();
+  const app = useAppSelector((state) => state.app);
+  const chat = useAppSelector((state) => state.chat);
+  const awaitMessages = useAppSelector((state) => state.Storage.awaitMessages);
+  const loading = useAppSelector((state) => state.chatBoard.loading);
+  const { randonOperators } = useAppSelector((state) => state.Operators);
+
+  const inputText = useRef<TextInput>(null);
+  const [text, setText] = useState<string>('');
+  const { files, onChange, cleanUploadFiles, deleteFile, loadMoreFiles } =
+    useFileHandlers();
+  const [onTyping$] = useState(() => new Subject());
+  const [showEmoji, setShowEmoji] = useState<boolean>(false);
+
+  const props = {
+    app,
+    awaitMessages,
+    chat,
+    chatBoard,
+    dispatch,
+    randonOperators,
+  };
+  // TODO: averiguar la forma de encapsular esto en un custom hook
+  useEffect(() => {
+    // @ts-ignore
+    const subscription = onTyping$
+      .pipe(
+        filter((v) => !!v),
+        debounceTime(800),
+        distinctUntilChanged()
+      )
+      .subscribe((data: any) => {
+        if (data.tikketId !== null) {
+          sendTyping(data);
+        }
+      });
+    // TODO: averiguar como desubcribir esto sin sin joder el observable.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (chat.textBoxMessage !== undefined) {
+      setText(chat.textBoxMessage);
+    }
+  }, [chat.textBoxMessage]);
+
+  const handleSearch = (e: any) => {
+    const data = {
+      message: e.nativeEvent.text,
+      tikketId: chat.tikketId,
+      token: app.token,
+      channelId: app.channelId,
+    };
+    onTyping$.next(data);
+    setText(e.nativeEvent.text);
+  };
+
+  const onEmojiClick = (emoji: string) => {
+    setText(text.concat(emoji));
+    setShowEmoji(false);
+  };
+
+  const selectFile = async () => {
+    DocumentPicker.pick({
+      allowMultiSelection: true,
+      type: [DocumentPicker.types.allFiles],
+      copyTo: 'cachesDirectory',
+    })
+      .then((result) => {
+        const clipFiles = result;
+
+        verifyUploadFiles(
+          files.length,
+          clipFiles,
+          chat.tikketId,
+          loadMoreFiles,
+          onChange,
+          app.token,
+          app.channelId
+        );
+      })
+      .catch(() => {});
+  };
+
+  // const selectImageOrVideo = async (type: any) => {
+  //   try {
+  //     const res = await openFile(type);
+  //     const clipFiles = res.assets.map((file: any) => {
+  //       return {
+  //         ...file,
+  //         size: file.fileSize,
+  //         fileCopyUri: file.uri,
+  //         name: file.fileName,
+  //       };
+  //     });
+
+  //     verifyUploadFiles(
+  //       files.length,
+  //       clipFiles,
+  //       chat.tikketId,
+  //       loadMoreFiles,
+  //       onChange,
+  //       app.token,
+  //       app.channelId
+  //     );
+  //   } catch (error) {
+  //     console.log(error);
+  //   }
+  // };
+
+  return (
+    <>
+      {showEmoji && (
+        <View style={styles.emojiCard}>
+          <PickerComponent
+            close={() => setShowEmoji(false)}
+            onEmojiClick={onEmojiClick}
+            showEmoji={showEmoji}
+          />
+        </View>
+      )}
+      <View
+        style={[
+          styles.view4,
+          {
+            height: files.length > 0 ? '35%' : '20%',
+            maxHeight: files.length > 0 ? '45%' : '35%',
+          },
+        ]}
+      >
+        <View style={styles.cardInput}>
+          <View style={styles.chatInput}>
+            <View
+              style={{
+                width: '70%',
+                flexDirection: 'row',
+                margin: 2,
+                marginRight: 5,
+                alignItems: 'flex-start',
+                justifyContent: 'flex-start',
+              }}
+            >
+              <TextInput
+                style={styles.textarea}
+                value={text}
+                placeholderTextColor={'#000'}
+                placeholder={app.labels.chat_placeholder}
+                ref={inputText}
+                multiline
+                numberOfLines={5}
+                onKeyPress={(e) => {
+                  if (e.nativeEvent.key === 'Enter' && !loading) {
+                    submitMsj(
+                      props,
+                      text,
+                      files,
+                      cleanUploadFiles,
+                      false,
+                      dispatch
+                    );
+                    setText('');
+                  }
+                }}
+                onChange={handleSearch}
+              />
+            </View>
+            <View style={styles.icons}>
+              <TouchableOpacity
+                style={styles.buttonIcons}
+                onPress={() => {
+                  setShowEmoji(!showEmoji);
+                }}
+              >
+                <IconsSmile
+                  color={app.initProperties.primaryColor}
+                  width={16}
+                  height={16}
+                />
+              </TouchableOpacity>
+
+              {chat.tikketId && (
+                <>
+                  <TouchableOpacity
+                    style={styles.buttonIcons}
+                    onPress={() => {
+                      if (!app.FormChat.sent) {
+                        openModal();
+                        return;
+                      }
+                      selectFile();
+                    }}
+                  >
+                    <IconPaperclip
+                      color={app.initProperties.primaryColor}
+                      width={16}
+                      height={16}
+                    />
+                  </TouchableOpacity>
+                  {/* <TouchableOpacity
+                    style={styles.buttonIcons}
+                    onPress={() => {
+                      if (!app.FormChat.sent) {
+                        openModal();
+                        return;
+                      }
+                      selectImageOrVideo('photo');
+                    }}
+                  >
+                    <IconImage
+                      color={app.initProperties.primaryColor}
+                      width={16}
+                      height={16}
+                    />
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    style={styles.buttonIcons}
+                    onPress={() => {
+                      if (!app.FormChat.sent) {
+                        openModal();
+                        return;
+                      }
+                      selectImageOrVideo('video');
+                    }}
+                  >
+                    <IconVideo
+                      color={app.initProperties.primaryColor}
+                      width={16}
+                      height={16}
+                    />
+                  </TouchableOpacity> */}
+                </>
+              )}
+              {text.length > 1 && (
+                <TouchableOpacity
+                  style={styles.buttonIcons}
+                  onPress={() => {
+                    if (!loading) {
+                      submitMsj(
+                        props,
+                        text,
+                        files,
+                        cleanUploadFiles,
+                        false,
+                        dispatch
+                      );
+                      setText('');
+                    }
+                  }}
+                >
+                  <IconPaperPlane
+                    color={app.initProperties.primaryColor}
+                    width={16}
+                    height={16}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
+          <View style={styles.chatFiles}>
+            {files.map(({ src, id, loading, type }, index) => (
+              <View key={`thumb${index}`} style={styles.thumbnailWrapper}>
+                {loading && (
+                  <View style={styles.loading}>
+                    <ActivityIndicator
+                      size={Platform.OS !== 'ios' ? 15 : 'small'}
+                      color={app.initProperties.primaryColor}
+                    />
+                  </View>
+                )}
+                {!loading && (
+                  <TouchableOpacity
+                    style={styles.delete}
+                    onPress={() => {
+                      deleteFile(id);
+                    }}
+                  >
+                    <IconTimesCircle
+                      color={app.initProperties.primaryColor}
+                      width={16}
+                      height={16}
+                    />
+                  </TouchableOpacity>
+                )}
+                {src ? (
+                  <Image style={styles.thumbnail} source={{ uri: src }} />
+                ) : type.includes('pdf') ? (
+                  <IconPdf width={40} height={40} />
+                ) : type.includes('ppt') ? (
+                  <IconPPT width={40} height={40} />
+                ) : type.includes('video') ? (
+                  <VideoIcon width={40} height={40} />
+                ) : type.includes('doc') ? (
+                  <IconDoc width={40} height={40} />
+                ) : (
+                  type.includes('xls') && <XlsIcon width={40} height={40} />
+                )}
+              </View>
+            ))}
+          </View>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const verifyUploadFiles = (
+  fileCount: number,
+  uploadFiles: any,
+  tikketId: any,
+  loadMoreFiles: any,
+  onChange: any,
+  token: any,
+  channelId: any
+) => {
+  fileCount > 0
+    ? loadMoreFiles(uploadFiles, tikketId, fileCount, token, channelId)
+    : onChange(uploadFiles, tikketId, token, channelId);
+};
+
+export const submitMsj = (
+  props: any,
+  inputText: string,
+  files: any,
+  cleanUploadFiles: any,
+  bot: boolean | string,
+  dispatch: any
+) => {
+  let newMessaje: any = {};
+  const loadedFiles = verifyFiles(files);
+
+  const { app, chat, awaitMessages, randonOperators } = props;
+  const { token, channelId } = app;
+  const { tikketId } = chat;
+
+  let search_open_chat = props.previews?.findIndex(
+    (el: any) => el.lastMessage.closed === false || !el.lastMessage.closed
+  );
+
+  if (loadedFiles.length > 0 || inputText !== '' || bot) {
+    if (!app.FormChat.sent && !app.user) {
+      openModal();
+      return;
+    }
+
+    newMessaje = {
+      message: inputText,
+      date: getDate(),
+      typePerson: 'client',
+      name: 'yo',
+      read: true,
+      token,
+      channelId,
+      tikketId,
+    };
+
+    if (loadedFiles.length > 0) {
+      if (isFilesOk(loadedFiles)) {
+        newMessaje.files = mapFilesToSend(loadedFiles);
+        newMessaje.viewFiles = mapFilesToView(loadedFiles);
+      }
+      cleanUploadFiles(loadedFiles);
+    }
+    if (chat.detail.length === 0) {
+      dispatch(
+        initMsjDetail({
+          message: app.initProperties?.chatFirstMessage,
+          date: getDate(),
+          userId: randonOperators[0]?.userId,
+        })
+      );
+      dispatch(setLoadingMsjBot(true));
+    }
+
+    // console.log(newMessaje);
+
+    if (thereIsnTikketIdYet(chat) && search_open_chat === -1) {
+      dispatch(RenderMessageWithoutTikketId(newMessaje));
+    } else {
+      dispatch(sendMessageHandler(newMessaje));
+    }
+
+    if (awaitMessages === null) {
+      dispatch(setAwaitMessages([newMessaje]));
+    } else {
+      var array = [...awaitMessages];
+      array.push(newMessaje);
+
+      dispatch(setAwaitMessages(array));
+    }
+    dispatch(setQuickReplies(false));
+  }
+};
+
+const isFilesOk = (loadedFiles: any) => {
+  const files = mapFilesToSend(loadedFiles);
+  let flag = true;
+  if (files.length > 0) {
+    files.forEach((f: any) => {
+      if (isObjEmpty(f)) {
+        flag = false;
+        const error = ['no se pudo cargar el archivo'];
+        setErrors(error);
+      }
+    });
+  }
+  return flag;
+};
+
+// const validEvent = (e: any) => {
+//   if (Platform.OS === 'web') {
+//     return e.key === 'Enter' || e.type === 'click';
+//   } else {
+//     return true;
+//   }
+// };
+
+const openModal = () => {
+  const error = ['debe diligenciar el formulario para poder continuar'];
+  setErrors(error);
+};
+
+const mapFilesToSend = (files: any) => {
+  return files.map((file: any) => {
+    return { url: file.urlUploaded, type: file.type };
+  });
+};
+
+const verifyFiles = (files: any) => {
+  return files.filter((element: any) => {
+    return !element.loading;
+  });
+};
+
+const mapFilesToView = (files: any) => {
+  return files.map((file: any) => {
+    return { url: file.urlUploaded, fileIcon: file.src, type: file.type };
+  });
+};
+
+const styles = StyleSheet.create({
+  cardInput: {
+    minHeight: '20%',
+    maxHeight: '80%',
+    width: '100%',
+  },
+  chatInput: {
+    backgroundColor: '#fff',
+    flexDirection: 'row',
+    // alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    // maxHeight: 150,
+    // flex: 1,
+    borderTopColor: '#cccccc',
+    borderTopWidth: 1,
+  },
+  emojiCard: {
+    position: 'absolute',
+    left: Platform.OS === 'web' ? '15%' : 0,
+    bottom: Platform.OS === 'web' ? 100 : 150,
+    zIndex: 2000,
+    backgroundColor: '#fff',
+  },
+  textarea: {
+    paddingLeft: 15,
+    // fontFamily: 'Roboto',
+    fontSize: 12.8,
+    borderWidth: 0,
+    borderColor: '#fff',
+    color: '#000',
+    width: '100%',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    textAlignVertical: 'top',
+    minHeight: 150,
+    maxHeight: 35,
+    padding: 10,
+  },
+  attach: {
+    width: 16,
+    height: 16,
+    margin: 8,
+    color: '#000',
+  },
+  buttonIcons: { width: 20, height: 20, margin: 5, marginTop: 10 },
+  icons: {
+    width: '30%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    // minHeight: 40,
+    flex: 1,
+    // maxHeight: 120,
+    paddingRight: 5,
+    marginBottom: 10,
+    // paddingTop: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    // paddingHorizontal: 5,
+  },
+
+  thumbnail: {
+    width: 40,
+    height: 40,
+    borderRadius: 5,
+  },
+  chatFiles: {
+    flexDirection: 'row',
+    margin: 10,
+  },
+  thumbnailWrapper: {},
+  loading: {
+    position: 'absolute',
+    marginLeft: 30,
+    borderRadius: 15,
+    padding: 8,
+    marginTop: -8,
+    backgroundColor: '#fff',
+    borderWidth: 0.5,
+    zIndex: 10,
+    borderColor: '#ececec',
+    // box-shadow: 0px 0px 8px 0px rgb(219, 219, 219);
+  },
+  delete: {
+    position: 'absolute',
+    marginLeft: 28,
+    marginTop: -15,
+    // backgroundColor: '#fff',
+    zIndex: 10,
+  },
+  view4: {
+    width: '100%',
+    position: 'absolute',
+    bottom: 10,
+  },
+});
+
+export default TextBox;