@socialgest/rn-widget 0.0.1

package/src/components/chat/formMessage/FormMessage.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Linking,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
+
+// Actions
+import { setErrors, sendChatForm } from '../../../redux/actions/app.actions';
+// Helper
+import { validateEmail, makeObjFields } from '../../../helpers/form.helper';
+import { makeInput } from '../../../helpers/render.helper';
+import { isObjEmpty } from '../../../helpers/utils.helper';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../../hooks/redux-hooks';
+
+interface FormMessageProps {}
+
+const FormMessage: React.FC<FormMessageProps> = () => {
+  const initProps = useAppSelector((state) => state.app.initProperties);
+  const formChat = useAppSelector((state) => state.app.FormChat);
+  const { labels } = useAppSelector((state) => state.app);
+
+  const dispatch = useAppDispatch();
+
+  const objFields: any = makeObjFields(formChat.fields);
+  let [initForm, setInitForm] = useState<any[]>([]);
+  const inputs = makeInput(formChat, initFormHandler, setInitForm, initForm);
+
+  useEffect(() => {
+    if (initForm.length === 0) {
+      setInitForm(objFields);
+    }
+  }, [initForm]);
+
+  if (isObjEmpty(objFields)) {
+    return <View />;
+  } else {
+    return (
+      <View style={Styles.content}>
+        <Text style={Styles.text}>{formChat.formMessage}</Text>
+        <View style={Styles.form}>
+          {inputs}
+          {formChat.urlPrivacyPolicy && (
+            <TouchableOpacity
+              onPress={async () => {
+                const supported = await Linking.canOpenURL(
+                  formChat.urlPrivacyPolicy
+                );
+                if (supported) {
+                  await Linking.openURL(formChat.urlPrivacyPolicy);
+                }
+              }}
+            >
+              <Text style={Styles.aproveMessage}>
+                {labels.form_policy_label}{' '}
+                <Text
+                  style={[
+                    Styles.aproveMessage,
+                    {
+                      color: initProps.primaryColor,
+                    },
+                  ]}
+                >
+                  {labels.form_policy_link}
+                </Text>
+              </Text>
+            </TouchableOpacity>
+          )}
+          <View style={Styles.btnSubmitContent}>
+            <TouchableOpacity
+              onPress={(e) => {
+                sendForm(
+                  e,
+                  initForm,
+                  formChat.fields,
+                  setErrors,
+                  initProps,
+                  sendChatForm,
+                  dispatch
+                );
+              }}
+              style={[
+                Styles.btnSubmit,
+                {
+                  backgroundColor: initProps.primaryColor,
+                },
+              ]}
+            >
+              <Text
+                style={[
+                  Styles.btnText,
+                  {
+                    color: initProps.primaryTextColor,
+                  },
+                ]}
+              >
+                {labels.form_policy_button}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    );
+  }
+};
+
+const Styles = StyleSheet.create({
+  content: {
+    width: '100%',
+  },
+  form: {},
+  text: {
+    fontSize: 12,
+    color: '#000',
+  },
+  btnSubmit: {
+    marginTop: 10,
+    padding: 10,
+    borderRadius: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '50%',
+  },
+  btnSubmitContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnText: {
+    fontSize: 12,
+    fontWeight: '400',
+    color: '#fff',
+  },
+  aproveMessage: {
+    fontSize: 10,
+    color: '#000',
+  },
+});
+
+const initFormHandler = (
+  e: any,
+  setInitForm: React.Dispatch<React.SetStateAction<any[]>>,
+  initForm: any[],
+  type: string | undefined = undefined,
+  name: string
+) => {
+  if (typeof type === 'undefined') {
+    setInitForm({
+      ...initForm,
+      [name]: Platform.OS === 'web' ? e.target.value : e.nativeEvent.text,
+    });
+  } else {
+    setInitForm({
+      ...initForm,
+      [name]: Date.parse(e.target.value),
+    });
+  }
+};
+
+const sendForm = (
+  e: any,
+  initForm: any[],
+  fields: any[],
+  setErrors: any,
+  initProps: any,
+  sendChatForm: any,
+  dispatch: any
+) => {
+  e.preventDefault();
+  const errors: string[] = [];
+
+  fields.forEach((field) => {
+    if (initForm[field.id] === '' && field.required) {
+      errors.push(`campos requeridos`);
+      // throw BreakException;
+    }
+
+    if (field.id === 'email' && !validateEmail(initForm[field.id])) {
+      errors.push('correo electrónico no válido');
+    }
+    dispatch(setErrors(errors));
+    setTimeout(() => {
+      dispatch(setErrors([]));
+    }, 2000);
+  });
+
+  if (errors.length === 0) {
+    const body = {
+      last_url: initProps.lastUrl,
+      user: initForm,
+    };
+    dispatch(sendChatForm(body));
+  }
+};
+
+export default FormMessage;

package/src/components/chat/messageItem/MessageItem.tsx

@@ -0,0 +1,433 @@
+import React, { type FC, useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  Image,
+  View,
+  Text,
+  Linking,
+  TouchableOpacity,
+} from 'react-native';
+// import HTMLView from 'react-native-htmlview';
+import Hyperlink from 'react-native-hyperlink';
+
+// import moment from 'moment';
+
+// Helper
+import { docItemsHandler } from '../../../helpers/render.helper';
+import TimeAgo from '../../../helpers/timeAgo.helper';
+import { existProp, getDate } from '../../../helpers/utils.helper';
+
+// Hooks
+import { useAppSelector, useAppDispatch } from '../../../hooks/redux-hooks';
+
+// Component
+import FormMessage from '../formMessage/FormMessage';
+import ErrorSendMessage from '../../errors/ErrorsSendMessage';
+
+// Actions
+import {
+  resettMsjDetail,
+  setErrorSendMessage,
+  sendMessageHandler,
+} from '../../../redux/actions/chat.actions';
+import { changeBot } from '../../../redux/actions/app.actions';
+import { reconectSocket } from '../../../redux/actions/app.actions';
+import IconExclamationTriangle from '../../../assets/svg/exclamationtriangle';
+import IconSync from '../../../assets/svg/sync';
+
+// function renderNode(node: any, index: number) {
+//   if (node.name === 'img') {
+//     const data = node.attribs;
+//     return (
+//       <Image
+//         key={index}
+//         source={{ uri: data.src }}
+//         resizeMode="contain"
+//         style={styles.imageNode}
+//       />
+//     );
+//   }
+//   return null;
+// }
+
+const MessageItem: FC<any> = (props) => {
+  const dispatch = useAppDispatch();
+
+  const app = useAppSelector((state) => state.app);
+  const chat = useAppSelector((state) => state.chat);
+  const botMessage = props.data.botMesssage;
+  const { bot, initProperties, user, bots, token, channelId, labels } = app;
+  const showOpInfo = initProperties.showOperatorsInfo;
+  const showOperatorName = initProperties.showOperatorName;
+
+  const { tikketId } = chat;
+
+  const [bot_new, setBotNew] = useState(bot);
+
+  const operators = useAppSelector((state) => state.Storage.operators_complete);
+
+  const files: any[] = props.data.files;
+
+  useEffect(() => {
+    if (props.data.bot_id && Array.isArray(bots)) {
+      const search_bot = bots.find((el) => el.bot_id === props.data.bot_id);
+      if (search_bot && bot_new.name !== search_bot.bot.name) {
+        dispatch(changeBot(search_bot.bot));
+        setBotNew(search_bot.bot);
+      }
+    }
+  }, [props.data.bot_id]);
+
+  const docs: any[] =
+    typeof files !== 'undefined' && files.length !== 0
+      ? docItemsHandler(props.data.files)
+      : [];
+  const type: string =
+    typeof props.data.type === 'undefined' ? 'message' : props.data.type;
+
+  const isCLient: boolean = props.data.typePerson === 'client';
+  const operatorData: any[] = getOpertarorInfo(props.data.userId, operators);
+  const activeOperators: any[] = operatorData; //props.operators.filter(({active}) => active).slice(0, 3)
+
+  const clientStyles: any = isCLient
+    ? {
+        backgroundColor: app.initProperties.primaryColor,
+      }
+    : {};
+
+  const clientStylesError = isCLient
+    ? {
+        background: '#c8120f',
+        color: '#ffffff',
+      }
+    : {};
+
+  if (isCLient) {
+    return (
+      <View style={styles.client}>
+        <View style={styles.messageError2}>
+          <View
+            style={[
+              styles.message,
+              props.data.retry ? clientStylesError : clientStyles,
+            ]}
+          >
+            {props.data.message && (
+              <Hyperlink
+                linkStyle={{ color: '#2C8FFF' }}
+                onPress={async (url) => {
+                  await Linking.openURL(url);
+                }}
+              >
+                <Text style={{ color: app.initProperties.primaryTextColor }}>
+                  {props.data.message
+                    .replace(new RegExp('<div><br></div><div>', 'g'), '\n \n')
+                    .replace(/<[^>]*>?/g, '')
+                    .replace(/&nbsp;/g, ' ')}
+                </Text>
+              </Hyperlink>
+            )}
+            {/* <HTMLView
+              value={htmlContent}
+              stylesheet={stylesHtml2}
+              renderNode={renderNode}
+            /> */}
+            {docs.length !== 0 && (
+              <View style={styles.fileContent}>{docs}</View>
+            )}
+          </View>
+          {props.data.retry && (
+            <IconExclamationTriangle width={10} height={10} color={'#c8120f'} />
+          )}
+        </View>
+
+        <TimeAgo style={styles.time} time={props.data.date} />
+
+        {props.data.retry && (
+          <>
+            <ErrorSendMessage />
+            <View style={styles.messageError}>
+              <TouchableOpacity
+                onPress={() => {
+                  const search_message = chat.detail.filter(
+                    (el) => el.message !== props.data.message
+                  );
+                  dispatch(resettMsjDetail(search_message));
+                  dispatch(setErrorSendMessage(false));
+                }}
+              >
+                <Text
+                  style={[styles.messageErrorText, styles.messageErrorCancel]}
+                >
+                  {labels.cancel}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => {
+                  dispatch(reconectSocket());
+                  props.data.date = getDate();
+                  props.data.tikketId = tikketId;
+                  props.data.channelId = channelId;
+                  props.data.retry = false;
+                  props.data.resend = true;
+                  props.data.token = token;
+
+                  dispatch(setErrorSendMessage(false));
+                  dispatch(sendMessageHandler(props.data));
+                  dispatch(resettMsjDetail(chat.detail));
+                }}
+              >
+                <Text
+                  style={[styles.messageErrorText, styles.messageErrorCancel]}
+                >
+                  {labels.retry_message}
+                </Text>
+                <IconSync
+                  color={app.initProperties.primaryColor}
+                  width={10}
+                  height={10}
+                />
+              </TouchableOpacity>
+            </View>
+          </>
+        )}
+      </View>
+    );
+  }
+
+  if (type === 'message' || user) {
+    // const htmlContent: string = `<p>${props.data.message}</p>`;
+    if (existProp(props.data, 'messageType')) {
+      return (
+        <View style={styles.viewOperator}>
+          <View style={styles.msjAndPhoto}>
+            <Image
+              style={styles.msjAndPhotoImage}
+              source={{
+                uri:
+                  showOpInfo && activeOperators.length > 0
+                    ? activeOperators[0].imgURL
+                    : bot_new.photo,
+              }}
+            />
+            <View style={[styles.operator, styles.message]}>
+              <Text style={[styles.text, styles.bold]}>
+                {showOpInfo && activeOperators.length > 0
+                  ? activeOperators[0].name
+                  : !showOpInfo && showOperatorName
+                  ? showOperatorName
+                  : bot_new.name}
+              </Text>
+              {/* <HTMLView
+                value={htmlContent}
+                stylesheet={stylesHtml}
+                renderNode={renderNode}
+              /> */}
+              {props.data.message?.length > 0 && (
+                <Hyperlink
+                  linkStyle={{ color: '#2C8FFF' }}
+                  onPress={async (url) => {
+                    await Linking.openURL(url);
+                  }}
+                >
+                  <Text style={{ color: '#000' }}>
+                    {props.data.message
+                      .replace(new RegExp('<div><br></div><div>', 'g'), '\n \n')
+                      .replace(/<[^>]*>?/g, '')
+                      .replace(/&nbsp;/g, ' ')}
+                  </Text>
+                </Hyperlink>
+              )}
+            </View>
+          </View>
+          {props.data.date && (
+            <TimeAgo style={styles.time} time={props.data.date} />
+          )}
+        </View>
+      );
+    }
+    return (
+      <View style={styles.viewOperator}>
+        <View style={styles.msjAndPhoto}>
+          {botMessage && (
+            <Image
+              style={styles.msjAndPhotoImage}
+              source={{ uri: bot_new.photo }}
+            />
+          )}
+          {!botMessage && (
+            <Image
+              style={styles.msjAndPhotoImage}
+              source={{
+                uri:
+                  showOpInfo && operatorData.length > 0
+                    ? operatorData[0].imgURL
+                    : bot_new.photo,
+              }}
+            />
+          )}
+          <View style={[styles.operator, styles.message]}>
+            <Text style={[styles.text, styles.bold]}>
+              {botMessage && <Text>{bot_new.name}</Text>}
+              {!botMessage && (
+                <Text>
+                  {showOpInfo && operatorData.length > 0
+                    ? operatorData[0].name
+                    : !showOpInfo && showOperatorName
+                    ? showOperatorName
+                    : labels.operator}
+                </Text>
+              )}
+            </Text>
+            {/* <HTMLView
+              value={htmlContent}
+              stylesheet={stylesHtml}
+              renderNode={renderNode}
+            /> */}
+            {props.data.message?.length > 0 && (
+              <Hyperlink
+                linkStyle={{ color: '#2C8FFF' }}
+                onPress={async (url) => {
+                  await Linking.openURL(url);
+                }}
+              >
+                <Text style={{ color: '#000' }}>
+                  {props.data.message
+                    .replace(new RegExp('<div><br></div><div>', 'g'), '\n \n')
+                    .replace(/<[^>]*>?/g, '')
+                    .replace(/&nbsp;/g, ' ')}
+                </Text>
+              </Hyperlink>
+            )}
+            {docs.length !== 0 && (
+              <View style={styles.fileContent}>{docs}</View>
+            )}
+          </View>
+        </View>
+        {props.data.date && (
+          <TimeAgo style={styles.time} time={props.data.date} />
+        )}
+      </View>
+    );
+  } else if (type === 'form' && !user) {
+    return (
+      <View>
+        <View style={styles.msjAndPhoto}>
+          <Image
+            style={styles.msjAndPhotoImage}
+            source={{
+              uri:
+                showOpInfo && activeOperators.length > 0
+                  ? activeOperators[0].imgURL
+                  : bot_new.photo,
+            }}
+          />
+          <View style={[styles.message, styles.operator, styles.form]}>
+            <Text style={[styles.text, styles.bold]}>
+              {showOpInfo && activeOperators.length > 0
+                ? activeOperators[0].name
+                : !showOpInfo && showOperatorName
+                ? showOperatorName
+                : bot_new.name}
+            </Text>
+            <FormMessage />
+          </View>
+        </View>
+      </View>
+    );
+  }
+  return null;
+};
+
+const getOpertarorInfo = (userId: string | undefined, Operators: any[]) => {
+  return Operators.filter((operator) => operator.userId === userId);
+};
+
+const styles = StyleSheet.create({
+  messageError: {
+    flexDirection: 'row',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  messageErrorCancel: { color: 'red', marginRight: 10 },
+  messageErrorText: { fontSize: 12, fontWeight: '500' },
+  messageError2: {
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  imageNode: { height: 100, width: 100 },
+  client: {
+    textAlign: 'right',
+    display: 'flex',
+    flexDirection: 'column',
+    alignSelf: 'flex-end',
+    maxWidth: '80%',
+  },
+  operator: {
+    backgroundColor: '#f5f5f5',
+    maxWidth: '80%',
+    borderWidth: 1,
+    borderColor: '#cccccc',
+    borderRadius: 8,
+  },
+  message: {
+    borderRadius: 8,
+    padding: 11,
+  },
+  form: {
+    maxWidth: '85%',
+    width: '85%',
+  },
+  text: {
+    fontSize: 12.8,
+    color: '#000',
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  viewOperator: {
+    margin: 5,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  fileContent: {
+    borderRadius: 5,
+    // box-shadow: 0 4px 7px 0px rgba(0, 0, 0, 0.2);
+    margin: 5,
+    alignSelf: 'center',
+  },
+  msjAndPhoto: {
+    flexDirection: 'row',
+  },
+  msjAndPhotoImage: {
+    width: 30,
+    height: 30,
+    borderWidth: 1,
+    borderColor: '#f5f5f5',
+    borderRadius: 15,
+    marginRight: 10,
+    marginTop: 10,
+  },
+  time: {
+    fontSize: 10,
+    marginVertical: 5,
+  },
+});
+
+// const stylesHtml = StyleSheet.create({
+//   p: {
+//     color: '#000',
+//     fontSize: 12.8, // make links coloured pink
+//   },
+// });
+
+// const stylesHtml2 = StyleSheet.create({
+//   p: {
+//     color: '#FFF',
+//     fontSize: 12.8, // make links coloured pink
+//   },
+// });
+
+export default MessageItem;

package/src/components/chat/modals/ModalImage.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { View, Image, Dimensions } from 'react-native';
+import Modal from 'react-native-modal';
+
+// Actions
+import { setModalImagen } from '../../../redux/actions/storage.actions';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../../hooks/redux-hooks';
+interface ModalImagenProps {}
+
+const windowHeight = Dimensions.get('window').height;
+
+const ModalImagen: React.FC<ModalImagenProps> = () => {
+  const { showModal, urlImage } = useAppSelector((state) => state.Storage);
+  const [isModalVisible, setModalVisible] = useState(false);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (showModal !== isModalVisible) {
+      setModalVisible(showModal);
+    }
+  }, [showModal, isModalVisible]);
+
+  return (
+    <View>
+      <Modal
+        isVisible={isModalVisible}
+        onBackdropPress={() => {
+          setModalVisible(false);
+          dispatch(setModalImagen({ show: false, file: null }));
+        }}
+      >
+        <View
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+        >
+          <Image
+            style={{
+              width: '100%',
+              height: windowHeight - 300,
+              borderRadius: 5,
+            }}
+            source={{ uri: urlImage }}
+          />
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default ModalImagen;