@socialgest/rn-widget 0.0.1

package/src/components/conversations/conversationsCard/ConversationsCard.tsx

@@ -0,0 +1,356 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
+
+// Actions
+import {
+  changeView,
+  setDefaultTikketLoaded,
+} from '../../../redux/actions/chatBoard.actions';
+import { setView } from '../../../redux/actions/storage.actions';
+import { setHeader } from '../../../redux/actions/chat.actions';
+import {
+  allowSendMessage,
+  setQuickReplies,
+} from '../../../redux/actions/app.actions';
+
+// Components
+import CardHeader from '../../cardHeader/CardHeader';
+import ChannelsCard from '../../channelsCard/ChannelsCard';
+import { searchCoversation } from '../conversationItem/ConversationItem';
+
+// Helper
+import {
+  conversationsItemHandler,
+  shadow,
+} from '../../../helpers/render.helper';
+import {
+  orderConversations,
+  wc_hex_is_light,
+} from '../../../helpers/utils.helper';
+import {
+  cleanDefaultTikket,
+  getDefaultTikket,
+} from '../../../helpers/chat.helper';
+
+// Svg
+import RightIcon from '../../../assets/svg/right';
+import ClockIcon from '../../../assets/svg/clock';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../../hooks/redux-hooks';
+import IconComments from '../../../assets/svg/comments';
+
+interface Props {}
+
+const ConversationCard: React.FC<Props> = () => {
+  const [open_exists, setOpenExists] = useState<boolean | null>(null);
+  const [index, setIndex] = useState<number>(0);
+  const [is_loaded, setis_loaded] = useState<boolean | null>(null);
+  const [chats, setChats] = useState<any[]>([]);
+  const [chatPreviews, setChatPreviews] = useState<any[]>([]);
+
+  const dispatch = useAppDispatch();
+
+  const app = useAppSelector((state) => state.app);
+  const countChats = useAppSelector((state) => state.chatHistory.counter);
+  const chatHistory = useAppSelector((state) => state.chatHistory.history);
+  const operators = useAppSelector((state) => state.Operators.operators);
+  const previews = useAppSelector((state) => state.chatHistory.previews);
+  const randonOperators = useAppSelector(
+    (state) => state.Operators.randonOperators
+  );
+  const defaultTikketLoaded = useAppSelector(
+    (state) => state.chatBoard.defaultTikketLoaded
+  );
+
+  const { labels, bot } = app;
+
+  var values = { app, operators, chatHistory, previews };
+
+  useEffect(() => {
+    if (!is_loaded) {
+      setis_loaded(true);
+    }
+    if (
+      (chats.length === 0 && previews.length > 0) ||
+      chatPreviews !== previews
+    ) {
+      let data = orderConversations(previews);
+      setChats(data);
+      setChatPreviews(previews);
+    }
+
+    if (!open_exists) {
+      const open_chat = (element: any) => {
+        if (
+          element.lastMessage.closed === false ||
+          !element.lastMessage.closed
+        ) {
+          return element;
+        }
+      };
+
+      let search_open_chat = previews.findIndex(open_chat);
+
+      if (search_open_chat !== -1) {
+        setOpenExists(true);
+        setIndex(search_open_chat);
+
+        const defaultTikket = getDefaultTikket();
+
+        if (!defaultTikketLoaded && chats[index]) {
+          if (defaultTikket === chats[index].tikketId) {
+            dispatch(setDefaultTikketLoaded(true));
+            searchCoversation(values, dispatch, true, chats[index]);
+            // dispatch(allowSendMessage(true));
+          } else cleanDefaultTikket();
+        }
+      } else {
+        setOpenExists(false);
+      }
+    }
+  }, [index, open_exists, is_loaded, previews]);
+
+  const initProps = app.initProperties;
+  const showOp = initProps.showOperatorsInfo;
+
+  let str = `${initProps.noMessagesIcon}`;
+  let substr = 'https://dashboard.tikket.net/';
+
+  const result = str.includes(substr);
+
+  var noMessagesIcon = initProps.defaultIcon
+    ? result
+      ? initProps.noMessagesIcon
+      : `https://dashboard.tikket.net/${initProps.noMessagesIcon}`
+    : false;
+
+  const conversationItem = conversationsItemHandler(chats);
+  const previewOperators = randonOperators
+    .filter(({ active }) => active)
+    .slice(0, showOp ? 3 : 1);
+
+  const styleMinWidth =
+    !showOp || previewOperators.length === 0 ? { minWidth: 50 } : null;
+
+  const colorStyle = {
+    color: wc_hex_is_light(initProps.textColor)
+      ? initProps.primaryColor
+      : initProps.textColor,
+  };
+  return (
+    <>
+      <View
+        style={[
+          styles.card,
+          shadow({
+            color: '#000',
+            opacity: 0,
+            radius: 7,
+            offsetWidth: 0,
+            offsetHeight: 4,
+            elevation: 8,
+          }),
+        ]}
+      >
+        <CardHeader
+          tittle={labels.conversations_label}
+          linkTittle={labels.see_all_link}
+          link="conversations"
+        />
+        {countChats === 0 && (
+          <View style={styles.cleanHistory}>
+            {noMessagesIcon ? (
+              <IconComments
+                width={40}
+                height={40}
+                color={initProps.primaryColor}
+              />
+            ) : (
+              <View style={styles.row}>
+                <View style={[styles.containerImg, styleMinWidth]}>
+                  {previewOperators?.length > 0 ? (
+                    previewOperators.map((operator, i) => (
+                      <Image
+                        key={i}
+                        source={{ uri: operator.imgURL }}
+                        style={[
+                          styles.operator,
+                          !showOp ? { maxWidth: 50 } : { maxWidth: '30%' },
+                          i === 0
+                            ? styles.operator1
+                            : i === 1
+                            ? styles.operator2
+                            : styles.operator3,
+                        ]}
+                      />
+                    ))
+                  ) : (
+                    <Image
+                      source={{ uri: bot.photo }}
+                      style={[
+                        styles.operator,
+                        styles.operator3,
+                        !showOp ? { maxWidth: 50 } : {},
+                      ]}
+                    />
+                  )}
+                </View>
+                <View style={styles.containerText}>
+                  <View style={styles.row2}>
+                    <Text style={styles.textP}>{labels.label_time}</Text>
+                  </View>
+                  <View style={styles.row2}>
+                    <ClockIcon
+                      width={14}
+                      height={14}
+                      color={colorStyle.color}
+                    />
+                    <Text style={[styles.textP, colorStyle]}>
+                      {labels.time_answer}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            )}
+          </View>
+        )}
+        {countChats > 0 && conversationItem[0]}
+        <TouchableOpacity
+          style={[
+            styles.btnMsj,
+            styles.btn,
+            {
+              backgroundColor: initProps.primaryColor,
+            },
+          ]}
+          onPress={() => {
+            if (open_exists) {
+              var values = { app, operators, chatHistory, previews };
+
+              searchCoversation(values, dispatch, true, chats[index]);
+              // dispatch(allowSendMessage(true));
+            } else {
+              dispatch(setQuickReplies(false));
+              dispatch(allowSendMessage(false));
+              dispatch(changeView('chat'));
+              dispatch(setView('chat'));
+              dispatch(setHeader('group'));
+            }
+          }}
+        >
+          <RightIcon color={'#fff'} width={15} height={15} />
+          <Text style={[styles.textBtn, { color: initProps.primaryTextColor }]}>
+            {labels.main_init_chat_label}
+          </Text>
+        </TouchableOpacity>
+        <ChannelsCard />
+      </View>
+    </>
+  );
+};
+
+const styles: any = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    padding: 8,
+    borderRadius: 5,
+    margin: 16,
+    // marginTop: -1,
+    zIndex: 1000,
+  },
+  textBtn: {
+    color: '#fff',
+    fontWeight: '500',
+    fontSize: 12.8,
+    textAlign: 'left',
+  },
+  btn: {
+    padding: 8,
+    backgroundColor: '#1082ff',
+    borderRadius: 10,
+  },
+  btnMsj: {
+    marginTop: 10,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  textSpan: {
+    fontWeight: '400',
+  },
+  msjIcon: {
+    marginRight: 2,
+    width: 15,
+    height: 15,
+  },
+  cleanHistory: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  textSpan2: {
+    marginTop: 10,
+    fontSize: 8,
+  },
+  operator: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    // object-fit: cover;
+  },
+  operator3: {
+    position: 'relative',
+    zIndex: 10,
+  },
+  operator2: {
+    position: 'relative',
+    left: '-8%',
+    zIndex: 20,
+  },
+  operator1: {
+    position: 'relative',
+    left: '-16%',
+    zIndex: 30,
+  },
+  row: {
+    flexDirection: 'row',
+    width: '90%',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  row2: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+  },
+  containerImg: {
+    minWidth: 120,
+    width: 'auto',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  containerText: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    flex: 1,
+  },
+  textP: {
+    fontSize: 14.4,
+    fontWeight: '400',
+    color: '#000',
+  },
+  iconClock: {
+    marginRight: 2,
+    width: 14,
+    height: 14,
+  },
+});
+
+export default ConversationCard;

package/src/components/errors/Errors.tsx

@@ -0,0 +1,70 @@
+import React, { type FC } from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+
+// Actions
+import { setErrors } from '../../redux/actions/app.actions';
+
+// Hooks
+import { useAppDispatch } from '../../hooks/redux-hooks';
+
+interface ErrorsProps {
+  errors: string[];
+}
+
+const Errors: FC<ErrorsProps> = ({ errors }) => {
+  const dispatch = useAppDispatch();
+  if (errors.length > 0) {
+    return (
+      <View style={styles.content}>
+        <View style={styles.cross}>
+          <TouchableOpacity
+            onPress={() => {
+              dispatch(setErrors([]));
+            }}
+          >
+            <Text style={styles.errorsContent}>icon times</Text>
+          </TouchableOpacity>
+        </View>
+        <View>
+          {errors.map((err, index) => (
+            <Text style={styles.errorsContent} key={index}>
+              {err}
+            </Text>
+          ))}
+        </View>
+      </View>
+    );
+  } else {
+    return null;
+  }
+};
+
+const styles = StyleSheet.create({
+  content: {
+    position: 'absolute',
+    borderRadius: 5,
+    zIndex: 10,
+    width: '97%',
+    margin: 6,
+    bottom: '16%',
+    backgroundColor: '#f2dede',
+    borderColor: '#ebccd1',
+    borderWidth: 1,
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  cross: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    margin: 10,
+  },
+  errorsContent: {
+    fontSize: 12,
+    margin: 2,
+    color: '#a94442',
+  },
+});
+
+export default Errors;

package/src/components/errors/ErrorsSendMessage.tsx

@@ -0,0 +1,62 @@
+/** @format */
+
+import React, { type FC } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+
+// Actions
+import { setErrorSendMessage } from '../../redux/actions/chat.actions';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../hooks/redux-hooks';
+import IconTimes from '../../assets/svg/times';
+
+interface ErrorSendMessageProps {}
+
+const ErrorSendMessage: FC<ErrorSendMessageProps> = () => {
+  const { labels } = useAppSelector((state) => state.app);
+  const dispatch = useAppDispatch();
+
+  return (
+    <View style={styles.content2}>
+      <View style={styles.cross}>
+        <TouchableOpacity
+          onPress={() => {
+            dispatch(setErrorSendMessage(false));
+          }}
+        >
+          <IconTimes color={'#a94442'} width={15} height={15} />
+        </TouchableOpacity>
+      </View>
+      <Text style={styles.errorsContent2}>{labels.error_send_message}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  content2: {
+    borderRadius: 5,
+    zIndex: 10,
+    width: '97%',
+    margin: 6,
+    bottom: '16%',
+    backgroundColor: '#f2dede',
+    borderColor: '#ebccd1',
+    borderWidth: 1,
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  cross: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    margin: 10,
+  },
+  errorsContent2: {
+    fontSize: 12,
+    margin: 2,
+    color: '#a94442',
+  },
+});
+
+export default ErrorSendMessage;

package/src/components/feedback/FeedBack.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from 'react';
+import Modal from 'react-native-modal';
+import { StyleSheet, View, Text } from 'react-native';
+
+import { sendFeedBack } from '../../redux/actions/chat.actions';
+import TypeFeedBack from './TypeFeedBack';
+import TypeRating from './TypeRating';
+import FeedBackClose from './FeedBackClose';
+import { existProp } from '../../helpers/utils.helper';
+import { setFeedBack } from '../../redux/actions/app.actions';
+import { useAppDispatch, useAppSelector } from '../../hooks/redux-hooks';
+
+const styles = StyleSheet.create({
+  feedBack: {
+    justifyContent: 'flex-end',
+    borderColor: '#f5f5f5',
+    borderWidth: 1,
+    backgroundColor: '#F5F5F5',
+    padding: 15,
+    borderRadius: 10,
+  },
+  text: {
+    textAlign: 'center',
+    fontFamily: 'Roboto',
+    marginBottom: 5,
+    padding: 2,
+    fontWeight: '500',
+  },
+});
+
+interface FeedBackProps {}
+
+const FeedBack: React.FC<FeedBackProps> = () => {
+  const [modal, setModal] = useState<boolean>(false);
+  const [index, setIndex] = useState<number>(0);
+  const [end_feedback, setEndFeedBack] = useState<boolean>(false);
+  const [feedback, setFeedback] = useState<any>(false);
+  const [validate_feedback, setValidateFeedBack] = useState<boolean>(false);
+  const feedBack_props = useAppSelector((state) => state.app.feedBack);
+  const app = useAppSelector((state) => state.app);
+  const chat = useAppSelector((state) => state.chat);
+
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (feedBack_props !== feedback) {
+      const search_value: number = feedBack_props?.questions?.findIndex(
+        (el: any) => existProp(el, 'value')
+      );
+      if (search_value !== -1) {
+        setValidateFeedBack(true);
+      } else {
+        setModal(true);
+        setValidateFeedBack(false);
+      }
+
+      setFeedback(feedBack_props);
+    }
+  }, [feedBack_props]);
+
+  const nextView = (index: number, value: any) => {
+    var data = { ...feedback };
+    var test: any = [];
+    data.questions.map((e: object, i: any) => {
+      if (i === index) {
+        test.push({ ...e, value });
+      } else {
+        test.push(e);
+      }
+    });
+
+    data.questions = test;
+
+    if (feedback.questions[index + 1]) {
+      setIndex(index + 1);
+    } else {
+      setEndFeedBack(true);
+    }
+    setFeedback(data);
+  };
+
+  const handleFeedBack = () => {
+    let data: any = {};
+    const { tikketId } = chat;
+
+    feedback.questions.map((item: any) => {
+      console.log(item);
+
+      delete item.title;
+      delete item.type;
+      delete item.value_type;
+
+      return {};
+    });
+
+    data = {
+      tikket_id: tikketId,
+      created_at: feedback.created_at,
+      updated_at: feedback.updated_at,
+      type_message: 5,
+      questions: feedback.questions,
+    };
+    dispatch(sendFeedBack(data));
+    dispatch(setFeedBack(false));
+
+    setIndex(0);
+    setModal(false);
+    setFeedback(false);
+    setEndFeedBack(false);
+  };
+
+  return (
+    <>
+      {feedback && !validate_feedback && (
+        <Modal
+          isVisible={modal}
+          backdropOpacity={0}
+          style={{ margin: 0, justifyContent: 'flex-end' }}
+          onBackdropPress={() => setModal(false)}
+        >
+          {feedback && !validate_feedback && (
+            <View style={styles.feedBack}>
+              {!end_feedback ? (
+                <>
+                  {feedback?.questions?.map((item: any, i: number) => {
+                    if (index === i) {
+                      return (
+                        <View key={item.id}>
+                          <Text
+                            style={{
+                              textAlign: 'center',
+                              fontFamily: 'Roboto',
+                              fontWeight: 'bold',
+                              fontSize: 16,
+                            }}
+                          >
+                            {item.title}
+                          </Text>
+                          <View>
+                            {item.type === 'rating' ? (
+                              <TypeRating
+                                type_rating={item.value_type}
+                                initial_value={item.initial_value}
+                                final_value={item.final_value}
+                                value={item.value}
+                                color={app.initProperties.primaryColor}
+                                onChange={(e: any) => nextView(index, e)}
+                              />
+                            ) : (
+                              <TypeFeedBack
+                                // value={item.value}
+                                color={app.initProperties.primaryColor}
+                                onChange={(e: any) => nextView(index, e)}
+                              />
+                            )}
+                          </View>
+                        </View>
+                      );
+                    } else return null;
+                  })}
+                </>
+              ) : (
+                <FeedBackClose
+                  close={() => handleFeedBack()}
+                  color={app.initProperties.primaryColor}
+                />
+              )}
+            </View>
+          )}
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default FeedBack;