@socialgest/rn-widget 0.0.1

package/src/components/feedback/FeedBackClose.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
+import IconThumbsUp from '../../assets/svg/thumbsup';
+
+const styles = StyleSheet.create({
+  feedBack: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    textAlign: 'center',
+    fontFamily: 'Roboto',
+    marginBottom: 5,
+    padding: 2,
+    fontWeight: '500',
+  },
+});
+
+interface FeedBackCloseProps {
+  color: string;
+  close: () => void;
+}
+
+const FeedBackClose: React.FC<FeedBackCloseProps> = ({ color, close }) => {
+  const [title] = useState<string>('¡Tu opinión es importante para nosotros!');
+  const [color_state, setColorState] = useState<string>('#00c1c6');
+  const [titleButton] = useState<string>('Cerrar');
+
+  useEffect(() => {
+    if (color_state !== color) {
+      setColorState(color);
+    }
+  }, [color]);
+
+  return (
+    <View style={styles.feedBack}>
+      <IconThumbsUp width={55} height={55} color={color} />
+      <Text
+        style={{
+          textAlign: 'center',
+          fontFamily: 'Roboto',
+          fontWeight: 'bold',
+          fontSize: 16,
+          marginVertical: 10,
+        }}
+      >
+        {title}
+      </Text>
+      <TouchableOpacity
+        onPress={close}
+        style={{
+          backgroundColor: color,
+          borderRadius: 5,
+          padding: 10,
+          width: '50%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: 10,
+        }}
+      >
+        <Text style={{ color: '#fff' }}>{titleButton}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+export default FeedBackClose;

package/src/components/feedback/TypeFeedBack.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { StyleSheet, View, Text, TextInput } from 'react-native';
+
+const styles = StyleSheet.create({
+  textarea: {
+    fontFamily: 'Roboto',
+    width: '90%',
+    height: 192,
+    borderWidth: 2,
+    borderColor: '#a0b9c0',
+    borderRadius: 5,
+    backgroundColor: '#fff',
+    padding: 10,
+  },
+  feedBack: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    borderRadius: 25,
+    padding: 10,
+    color: '#fff',
+    opacity: 1,
+    backgroundColor: '#00c1c6',
+    borderWidth: 1,
+    textAlign: 'center',
+  },
+  text: {
+    textAlign: 'center',
+    fontFamily: 'Roboto',
+    marginBottom: 5,
+    padding: 2,
+    fontWeight: '500',
+  },
+});
+interface TypeFeedBackProps {
+  color: string;
+  // value: any;
+  onChange: (value: string) => void;
+}
+
+const TypeFeedBack: React.FC<TypeFeedBackProps> = ({ color, onChange }) => {
+  const [valueState, setValueState] = useState<string>('');
+  const [color_state, setColorState] = useState<string>('#00c1c6');
+  const [titleButton] = useState<string>('Enviar');
+  const [placeholder] = useState<string>(
+    'Añade tu feedback sobre nuestro servicio'
+  );
+
+  useEffect(() => {
+    if (color_state !== color) {
+      setColorState(color);
+    }
+  }, [color]);
+
+  const handleChange = (event: any) => {
+    setValueState(event);
+  };
+
+  const handleSubmit = () => {
+    onChange(valueState);
+  };
+
+  return (
+    <View style={styles.feedBack}>
+      <TextInput
+        placeholder={placeholder}
+        value={valueState}
+        onChangeText={handleChange}
+        numberOfLines={4}
+        style={{
+          backgroundColor: '#fff',
+          padding: 20,
+          borderRadius: 5,
+          marginTop: 5,
+          borderColor: '#a0b9c0',
+          color: '#000',
+        }}
+      />
+      <TouchableOpacity
+        style={{
+          backgroundColor: valueState?.length < 2 ? '#cccccc' : color,
+          borderRadius: 5,
+          padding: 10,
+          width: '50%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: 10,
+        }}
+        onPress={handleSubmit}
+        disabled={valueState?.length < 2}
+      >
+        <Text style={{ color: '#fff' }}>{titleButton}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+export default TypeFeedBack;

package/src/components/feedback/TypeRating.tsx

@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import IconsStart from '../../assets/svg/start';
+
+const styles = StyleSheet.create({
+  rating: {
+    overflow: 'hidden',
+    position: 'relative',
+    margin: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+interface StarProps {
+  type_rating: string;
+  initial_value?: string;
+  value?: any;
+  final_value?: string;
+  color: string;
+  onChange: (value: string) => void;
+}
+
+// const defaultStyles = {
+//   position: 'relative',
+//   overflow: 'hidden',
+//   cursor: 'pointer',
+//   display: 'flex',
+//   justifyContent: 'center',
+//   borderRadius: 5,
+//   padding: 2,
+//   textAlign: 'center',
+//   borderWidth: 0,
+// };
+
+// const getHalfStarStyles = (color: string, uniqueness: string): string => {
+//   return `
+//     .feedback-stars-${uniqueness}:before {
+//       position: absolute;
+//       overflow: hidden;
+//       display: block;
+//       z-index: 1;
+//       top: 0; left: 0;
+//       width: 50%;
+//       content: attr(data-forhalf);
+//       color: ${color};
+//   }`;
+// };
+
+const Star: React.FC<StarProps> = ({
+  onChange,
+  value,
+  type_rating,
+  initial_value,
+  final_value,
+}) => {
+  // const [uniqueness] = useState<string>((Math.random() + '').replace('.', ''));
+  const [typeRating] = useState<string>(type_rating);
+  const [valueState, setValueState] = useState<number>(0);
+  const [stars, setStars] = useState<any[]>([]);
+  const [numbers, setNumbers] = useState<any[]>([]);
+  const [initial, setInitial] = useState<any>(null);
+  const [final, setFinal] = useState<any>(0);
+  // const [colorPrimary, setColorPrimary] = useState<string>('#00c1c6');
+  // const [halfStar] = useState<any>({
+  //   at: Math.floor(0),
+  //   hidden: 1,
+  // });
+
+  useEffect(() => {
+    setStars(getStars(value));
+    setNumbers(getNumbers(value));
+  }, []);
+
+  useEffect(() => {
+    if (initial_value && initial !== initial_value) {
+      setInitial(parseInt(initial_value));
+    }
+  }, [initial_value]);
+
+  useEffect(() => {
+    if (final_value && final !== final_value) {
+      setFinal(parseInt(final_value));
+    }
+  }, [final_value]);
+
+  const calculateNumber = (init: number, final: number): number => {
+    var total = 0;
+    for (let index = init; index <= final; index++) {
+      total++;
+    }
+    return total;
+  };
+
+  const [config] = useState<any>({
+    number:
+      initial_value && final_value
+        ? calculateNumber(parseInt(initial_value), parseInt(final_value))
+        : 10,
+    count: initial_value ? parseInt(initial_value) : 5,
+    size: 1.875,
+    color1: '#cccccc',
+    color3: '#9c9c9c',
+    color4: '#626262',
+    half: false,
+    edit: true,
+  });
+
+  const getRate = () => {
+    let stars;
+    if (config.half) {
+      stars = Math.floor(value);
+    } else {
+      stars = Math.round(value);
+    }
+    return stars;
+  };
+
+  // const isDecimal = (value: number): boolean => {
+  //   return value % 1 !== 0;
+  // };
+
+  const getStars = (activeCount?: any) => {
+    if (typeof activeCount === 'undefined') {
+      activeCount = getRate();
+    }
+    let stars = [];
+    for (let i = 0; i < config.count; i++) {
+      // var active = i <= activeCount - 1;
+      stars.push({
+        active: false,
+      });
+    }
+    return stars;
+  };
+
+  const getNumbers = (activeCount?: any) => {
+    if (typeof activeCount === 'undefined') {
+      activeCount = getRate();
+    }
+    let numbers = [];
+    for (let i = 0; i < config.number; i++) {
+      // var active = i <= activeCount - 1;
+      numbers.push({
+        active: false,
+      });
+    }
+    return numbers;
+  };
+
+  const clicked = (index: any) => {
+    // if (!config.edit) return;
+    // let index = Number(event.currentTarget.getAttribute('data-index'));
+    var value;
+
+    if (typeof initial !== null && type_rating !== 'stars') {
+      value = initial + index;
+    } else {
+      value = index + 1;
+    }
+
+    console.log(value);
+
+    if (typeRating === 'stars' || typeRating === 'star') {
+      setStars(getStars(index));
+      setValueState(value);
+    } else {
+      setNumbers(getNumbers(index));
+      setValueState(value);
+    }
+
+    onChange(value.toString());
+  };
+
+  // useEffect(() => {
+  //   if (color_state !== color) {
+  //     setColorState(color);
+  //   }
+  // }, [color]);
+
+  useEffect(() => {
+    if (valueState !== value) {
+      setValueState(value);
+    }
+  }, []);
+
+  // const handleChange = (event: any) => {
+  //   setValueState(event);
+  // };
+
+  // const handleSubmit = () => {
+  //   onChange(value);
+  // };
+
+  const renderStars = () => {
+    return stars.map((star, index) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          onPress={() => {
+            console.log(star);
+            clicked(index);
+          }}
+          style={{
+            margin: 2.5,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <IconsStart width={40} height={40} color="#cccccc" />
+        </TouchableOpacity>
+      );
+    });
+  };
+
+  const renderNumbers = () => {
+    return numbers.map((number: any, index: any) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          onPress={() => {
+            console.log(number, 'aaa', index);
+            clicked(index);
+          }}
+          style={{
+            borderRadius: 5,
+            width: 40,
+            height: 40,
+            backgroundColor: '#cccccc',
+            margin: 2.5,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Text
+            style={{
+              color: '#626262',
+              textAlign: 'center',
+              fontSize: 20,
+              fontWeight: 'bold',
+              fontFamily: 'Roboto',
+            }}
+            key={index}
+          >
+            {typeof initial !== null ? initial + index : index + 1}
+          </Text>
+        </TouchableOpacity>
+      );
+    });
+  };
+
+  return (
+    <View style={styles.rating}>
+      {typeRating === 'stars' ? renderStars() : renderNumbers()}
+    </View>
+  );
+};
+export default Star;

package/src/components/footer/Footer.tsx

@@ -0,0 +1,72 @@
+import React, { type FC, useCallback } from 'react';
+import {
+  TouchableOpacity,
+  Linking,
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+
+// Svg
+import TikketIcon from '../../assets/svg/tikket_icon';
+
+interface FooterProps {
+  labels: {
+    footer_label: string;
+  };
+  whiteMark: boolean;
+}
+
+const Footer: FC<FooterProps> = ({ labels, whiteMark }) => {
+  const handlePress = useCallback(async (url: string) => {
+    const supported = await Linking.canOpenURL(url);
+
+    if (supported) {
+      await Linking.openURL(url);
+    }
+  }, []);
+
+  if (whiteMark) {
+    return (
+      <TouchableOpacity
+        style={styles.footer}
+        onPress={() => {
+          handlePress('https://www.tikket.net');
+        }}
+      >
+        <TikketIcon width={15} height={15} />
+        <Text style={styles.text}>{labels.footer_label}</Text>
+      </TouchableOpacity>
+    );
+  } else {
+    return <View />;
+  }
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderTopColor: '#cccccc',
+    borderTopWidth: 1,
+    padding: 7,
+    backgroundColor: '#fff',
+    width: '100%',
+    height: Platform.OS === 'web' ? 25 : 30,
+    position: 'absolute',
+    bottom: -1,
+    flexDirection: 'row',
+  },
+  text: {
+    fontSize: 9.6,
+    fontWeight: 'bold',
+    marginLeft: 2,
+    color: '#868686',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+  },
+});
+
+export default Footer;

package/src/components/goBackButton/GoBackButton.tsx

@@ -0,0 +1,77 @@
+import React, { type FC } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+// Actions
+import { changeView } from '../../redux/actions/chatBoard.actions';
+import { setView, setChat } from '../../redux/actions/storage.actions';
+import {
+  setChatHistory,
+  updatePreviewNotification,
+} from '../../redux/actions/chatHistory.actions';
+import { cleanChat } from '../../redux/actions/chat.actions';
+import { setFeedBack } from '../../redux/actions/app.actions';
+
+// Svg
+import IconLeft from '../../assets/svg/left';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../hooks/redux-hooks';
+
+interface GoBackButtonProps {}
+
+const styles = StyleSheet.create({
+  btn: {
+    alignSelf: 'center',
+    fontWeight: 'bold',
+    fontSize: 16,
+    color: '#FFFFFF',
+  },
+  icon: {
+    width: 40,
+    height: 40,
+  },
+});
+
+const GoBackButton: FC<GoBackButtonProps> = () => {
+  const app = useAppSelector((state) => state.app);
+  const chat = useAppSelector((state) => state.chat);
+  const chatBoard = useAppSelector((state) => state.chatBoard);
+
+  const dispatch = useAppDispatch();
+
+  const navigate = () => {
+    if (
+      chatBoard.boardView === 'conversations' ||
+      chatBoard.boardView === 'chat'
+    ) {
+      dispatch(changeView('main'));
+      dispatch(setView('main'));
+    } else {
+      dispatch(changeView(chatBoard.lastView));
+      dispatch(setView(chatBoard.lastView));
+    }
+
+    if (chatBoard.boardView === 'chat') {
+      dispatch(setChat(null));
+      dispatch(setFeedBack(false));
+      //sessionStorage.removeItem('chat');
+      setTimeout(() => {
+        dispatch(updatePreviewNotification(chat.tikketId));
+        dispatch(setChatHistory(chat));
+        dispatch(cleanChat());
+      }, 500);
+    }
+  };
+
+  return (
+    <TouchableOpacity style={styles.btn} onPress={navigate}>
+      <IconLeft
+        width={40}
+        height={40}
+        color={app.initProperties.primaryTextColor}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default GoBackButton;

package/src/components/header/Header.tsx

@@ -0,0 +1,51 @@
+import React, { type FC } from 'react';
+import { View, StyleSheet, StatusBar } from 'react-native';
+
+// Hooks
+import { useAppSelector } from '../../hooks/redux-hooks';
+
+interface HeaderProps {
+  children: React.ReactNode;
+}
+
+const styles = StyleSheet.create({
+  smallHeader: {
+    height: 80,
+    // transition: height 0.5s;
+  },
+  header: {
+    backgroundColor: '#1082ff',
+    maxHeight: 192,
+    marginTop: 20,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+const Header: FC<HeaderProps> = (props) => {
+  const app = useAppSelector((state) => state.app);
+  return (
+    <View style={{ backgroundColor: app.initProperties.primaryColor }}>
+      <StatusBar
+        barStyle="light-content"
+        animated={true}
+        hidden={true}
+        backgroundColor={app.initProperties.primaryColor}
+      />
+      <View
+        style={[
+          styles.smallHeader,
+          styles.header,
+          {
+            backgroundColor: app.initProperties.primaryColor,
+          },
+        ]}
+      >
+        {props.children}
+      </View>
+    </View>
+  );
+};
+
+export default Header;

package/src/components/header/chatHeader/ChatHeader.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+//Hooks
+import { useAppSelector } from '../../../hooks/redux-hooks';
+
+//Component
+import Header from '../Header';
+import GoBackButton from '../../goBackButton/GoBackButton';
+import SmallChatHeader from '../smallChatHeader/SmallChatHeader';
+import UserHeader from '../userHeader/UserHeader';
+import StaticChatHeader from '../staticChatHeader/StaticChatHeader';
+
+interface ChatHeaderProps {}
+
+const styles = StyleSheet.create({
+  headerBlock: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  goback: {
+    margin: 16,
+    display: 'flex',
+  },
+});
+
+const ChatHeader: React.FC<ChatHeaderProps> = () => {
+  const app = useAppSelector((state) => state.app);
+  const chat = useAppSelector((state) => state.chat);
+
+  const [head, setHead] = useState<string>(chat.operator.userId);
+  const { showOperatorsInfo } = app.initProperties;
+
+  useEffect(() => {
+    if (head !== chat.operator.userId) {
+      setHead(chat.operator.userId);
+    }
+  }, [chat.operator]);
+
+  return (
+    <Header>
+      <View style={styles.goback}>
+        <GoBackButton />
+      </View>
+      {!showOperatorsInfo && (
+        <View style={styles.headerBlock}>
+          <StaticChatHeader />
+        </View>
+      )}
+      {showOperatorsInfo && (
+        <View>
+          <View style={styles.headerBlock}>
+            {!head && <SmallChatHeader />}
+            {head && <UserHeader />}
+          </View>
+        </View>
+      )}
+    </Header>
+  );
+};
+
+export default ChatHeader;