@socialgest/rn-widget 0.0.1

package/src/assets/svg/video.tsx

@@ -0,0 +1,29 @@
+import React, { type FC } from 'react';
+import Svg, { Path, Text } from 'react-native-svg';
+/* SVGR has dropped some elements not supported by react-native-svg: title */
+
+interface VideoIconProps {
+  width: number;
+  height: number;
+}
+
+const VideoIcon: FC<VideoIconProps> = ({ width, height }) => (
+  <Svg viewBox="0 0 80 80" width={width} height={height}>
+    <Path fill={'#2c8fff'} d="M0 0h80v80H0z" />
+    <Text
+      transform="translate(14.37 71.5)"
+      fill={'#fff'}
+      fontSize={18}
+      fontFamily={'Roboto-Bold,Roboto'}
+      fontWeight={700}
+    >
+      {'VIDEO'}
+    </Text>
+    <Path
+      fill={'#fff'}
+      d="M30.73 35V22.5l10.83 6.25L52.38 35l-10.82 6.25-10.83 6.25V35z"
+    />
+  </Svg>
+);
+
+export default VideoIcon;

package/src/assets/svg/videoicon.tsx

@@ -0,0 +1,24 @@
+import React, { type FC } from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface IconVideoProps {
+  color: string;
+  width: number;
+  height: number;
+}
+
+const IconVideo: FC<IconVideoProps> = ({ color, width, height }) => (
+  <Svg
+    viewBox="0 0 512 512"
+    width={width}
+    height={height}
+    style={{ margin: 8 }}
+  >
+    <Path
+      fill={color}
+      d="M0 128c0-35.3 28.7-64 64-64h256c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zm559.1-28.2c10.4 5.6 16.9 16.4 16.9 28.2v256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64-14.2-9.5V174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"
+    />
+  </Svg>
+);
+
+export default IconVideo;

package/src/assets/svg/whatsapp.tsx

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface WhatsAppIconProps {
+  color: string;
+  width: number;
+  height: number;
+}
+
+const WhatsAppIcon: FC<WhatsAppIconProps> = ({ color, width, height }) => (
+  <Svg viewBox="0 0 1024 1024" width={width} height={height}>
+    <Path
+      fill={color}
+      d="M713.5 599.9c-10.9-5.6-65.2-32.2-75.3-35.8-10.1-3.8-17.5-5.6-24.8 5.6-7.4 11.1-28.4 35.8-35 43.3-6.4 7.4-12.9 8.3-23.8 2.8-64.8-32.4-107.3-57.8-150-131.1-11.3-19.5 11.3-18.1 32.4-60.2 3.6-7.4 1.8-13.7-1-19.3-2.8-5.6-24.8-59.8-34-81.9-8.9-21.5-18.1-18.5-24.8-18.9-6.4-.4-13.7-.4-21.1-.4-7.4 0-19.3 2.8-29.4 13.7-10.1 11.1-38.6 37.8-38.6 92s39.5 106.7 44.9 114.1c5.6 7.4 77.7 118.6 188.4 166.5 70 30.2 97.4 32.8 132.4 27.6 21.3-3.2 65.2-26.6 74.3-52.5 9.1-25.8 9.1-47.9 6.4-52.5-2.7-4.9-10.1-7.7-21-13z"
+    />
+    <Path
+      fill={color}
+      d="M925.2 338.4c-22.6-53.7-55-101.9-96.3-143.3-41.3-41.3-89.5-73.8-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9-53.3 22.8-101.1 55.2-142 96.5-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9.3 69.4 16.9 138.3 48 199.9v152c0 25.4 20.6 46 46 46h152.1c61.6 31.1 130.5 47.7 199.9 48h2.1c59.9 0 118-11.6 172.7-34.3 53.5-22.3 101.6-54.3 142.8-95.2 41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
+    />
+  </Svg>
+);
+
+export default WhatsAppIcon;

package/src/assets/svg/xls.tsx

@@ -0,0 +1,57 @@
+import React, { type FC } from 'react';
+import Svg, { Path, Text, Rect } from 'react-native-svg';
+/* SVGR has dropped some elements not supported by react-native-svg: title */
+
+interface XlsIconProps {
+  width: number;
+  height: number;
+}
+
+const XlsIcon: FC<XlsIconProps> = ({ width, height }) => (
+  <Svg data-name="Layer 1" viewBox="0 0 80 80" width={width} height={height}>
+    <Path fill={'#2eaa66'} d="M0 0h80v80H0z" />
+    <Text
+      transform="translate(23.88 71.5)"
+      fill={'#fff'}
+      fontSize={18}
+      fontFamily={'Roboto'}
+      fontWeight={700}
+    >
+      {'XLS'}
+    </Text>
+    <Path
+      d="M47 11.5H28.09a5 5 0 0 0-5 5v29.97a5 5 0 0 0 5 5h23.27a5 5 0 0 0 5-5v-27Z"
+      strokeMiterlimit={10}
+      fill={'none'}
+      stroke={'#fff'}
+      strokeWidth={3}
+    />
+    <Rect
+      x={18.61}
+      y={25.47}
+      width={19.89}
+      height={17.18}
+      rx={2.78}
+      ry={2.78}
+      fill={'#fff'}
+    />
+    <Text
+      transform="matrix(1.3 0 0 1 23.12 38.24)"
+      fontSize={'12.08px'}
+      fontFamily={'Roboto'}
+      fill={'#2eaa66'}
+    >
+      {'X'}
+    </Text>
+    <Path
+      strokeLinecap={'round'}
+      strokeLinejoin={'round'}
+      fill={'none'}
+      stroke={'#fff'}
+      strokeWidth={3}
+      d="M56.5 22.5h-11v-11"
+    />
+  </Svg>
+);
+
+export default XlsIcon;

package/src/components/App.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+// Store
+import store from '../store';
+
+// Component
+import Main from './Main';
+
+const WidgetTikket: React.FC<any> = (props) => {
+  const { selectFile } = props;
+  return (
+    <Provider store={store}>
+      <Main selectFile={selectFile} />
+    </Provider>
+  );
+};
+
+export default WidgetTikket;

package/src/components/Main.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+// Components
+import ChatBoard from './chatBoard/ChatBoard';
+
+// Hooks
+import { useAppSelector } from '../hooks/redux-hooks';
+import MessageFloat from './messageFloat/MessageFloat';
+
+interface Props {
+  selectFile: any;
+}
+
+const App: React.FC<Props> = ({ selectFile }) => {
+  const show_widget = useAppSelector((state) => state.Storage.show_widget);
+  const { openMessageFloat } = useAppSelector((state) => state.app);
+
+  if (openMessageFloat) {
+    return <MessageFloat />;
+  } else if (!show_widget) {
+    return null;
+  }
+
+  return (
+    <View style={styles.Main}>
+      <ChatBoard selectFile={selectFile} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  Main: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#fff',
+  },
+});
+
+export default App;

package/src/components/articles/Articles.tsx

@@ -0,0 +1,60 @@
+import React, { type FC } from 'react';
+import { View, Text, StyleSheet, Platform, ScrollView } from 'react-native';
+import { connect } from 'react-redux';
+import { articlesItemHandler } from '../../helpers/render.helper';
+
+interface Article {
+  id: number;
+  title: string;
+  content: string;
+}
+
+interface ArticlesProps {
+  articles: {
+    articles: Article[];
+  };
+}
+
+const styles = StyleSheet.create({
+  historicalContent: {
+    paddingLeft: 10,
+    paddingTop: 10,
+    maxHeight: Platform.OS === 'web' ? 500 : '100%',
+  },
+  notResults: {
+    padding: 7,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    textAlign: 'center',
+    color: '#cccccc',
+    fontWeight: '400',
+    fontSize: 12,
+  },
+});
+
+const Articles: FC<ArticlesProps> = (props) => {
+  const { articles } = props.articles;
+  const articleItem = articlesItemHandler(articles);
+
+  return (
+    <>
+      {articles.length > 0 ? (
+        <ScrollView style={styles.historicalContent}>{articleItem}</ScrollView>
+      ) : (
+        <View style={styles.notResults}>
+          <Text style={styles.text}>
+            Por los momentos no hay contenido para mostrar
+          </Text>
+        </View>
+      )}
+    </>
+  );
+};
+
+const mapStateToProps = (state: any) => {
+  return { initProperties: state.app.initProperties, articles: state.articles };
+};
+
+export default connect(mapStateToProps)(Articles);

package/src/components/articles/articleItem/ArticleItem.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View, Text, StyleSheet, Linking } from 'react-native';
+
+// Hooks
+import { useAppSelector } from '../../../hooks/redux-hooks';
+
+interface ArticleItemProps {
+  data: {
+    category_id: string;
+    id: string;
+    title: string;
+    description: string;
+  };
+}
+
+const styles = StyleSheet.create({
+  articleItem: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  articleInfo: {
+    display: 'flex',
+  },
+  description: {
+    padding: 5,
+  },
+  text: {
+    color: '#000',
+    fontWeight: '300',
+  },
+  text2: {
+    fontSize: 12,
+    margin: 3,
+    color: '#000',
+  },
+});
+
+const ArticleItem: React.FC<ArticleItemProps> = (props) => {
+  const app = useAppSelector((state) => state.app);
+
+  const url = app.initProperties.url_helpcenter;
+  return (
+    <View style={{ marginBottom: 10 }}>
+      <View style={styles.articleItem}>
+        <View style={styles.articleInfo}>
+          <View style={styles.description}>
+            <Text
+              onPress={async () => {
+                const url_ = `https://${url}/${props.data.category_id}/${props.data.id}`;
+                await Linking.openURL(url_);
+              }}
+              style={[
+                styles.text,
+                {
+                  color: app.initProperties.primaryColor,
+                },
+              ]}
+            >
+              {props.data.title}
+            </Text>
+            <Text style={styles.text2}>{props.data.description}</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default ArticleItem;

package/src/components/articles/articlesCard/ArticlesCard.tsx

@@ -0,0 +1,44 @@
+import React, { type FC } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+// Component
+import CardHeader from '../../cardHeader/CardHeader';
+
+// Helper
+import { articlesItemHandler } from '../../../helpers/render.helper';
+
+interface ArticlesCardProps {
+  articles: {
+    articles: [];
+    // define the type of articles object
+  };
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    backgroundColor: '#fff',
+    padding: 5,
+    borderRadius: 5,
+    // box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.12);
+  },
+});
+
+const ArticlesCard: FC<ArticlesCardProps> = (props) => {
+  const { articles } = props.articles;
+
+  const articleItem = articlesItemHandler(articles);
+
+  return (
+    <View style={styles.cardContainer}>
+      <CardHeader
+        tittle="Top Articulos"
+        linkTittle="Ver Mas"
+        link="articles"
+        channel={true}
+      />
+      {articleItem}
+    </View>
+  );
+};
+
+export default ArticlesCard;

package/src/components/cardHeader/CardHeader.tsx

@@ -0,0 +1,98 @@
+import React, { type FC } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+
+// Actions
+import { changeView } from '../../redux/actions/chatBoard.actions';
+import { setView } from '../../redux/actions/storage.actions';
+
+// Hooks
+import { useAppSelector, useAppDispatch } from '../../hooks/redux-hooks';
+
+interface CardHeaderProps {
+  tittle: string;
+  channel?: boolean;
+  link: string;
+  linkTittle: string;
+}
+
+const CardHeader: FC<CardHeaderProps> = (props) => {
+  const initProperties = useAppSelector((state) => state.app.initProperties);
+  const countChats = useAppSelector((state) => state.chatHistory.counter);
+
+  const dispatch = useAppDispatch();
+
+  return (
+    <View style={styles.historicalHeader}>
+      <Text style={styles.title}>{props.tittle}</Text>
+
+      {!props.channel && countChats > 0 && (
+        <TouchableOpacity
+          style={styles.seeMoreLink}
+          onPress={() => {
+            dispatch(changeView(props.link));
+            dispatch(setView(props.link));
+          }}
+        >
+          <>
+            <Text style={styles.title}>{props.linkTittle}</Text>
+            <View
+              style={[
+                styles.counterItems,
+                { backgroundColor: initProperties.primaryColor },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.counterText,
+                  {
+                    color: initProperties.primaryTextColor,
+                  },
+                ]}
+              >
+                {countChats}
+              </Text>
+            </View>
+          </>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  historicalHeader: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    padding: 10,
+  },
+  counterItems: {
+    width: 15,
+    height: 15,
+    borderRadius: 7,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  counterText: {
+    padding: 2,
+    fontSize: 8,
+    fontWeight: 'bold',
+  },
+  seeMoreLink: {
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    maxWidth: '30%',
+    flexDirection: 'row',
+  },
+  seeMoreLabel: {
+    maxWidth: '50%',
+    justifyContent: 'flex-end',
+  },
+  title: {
+    fontSize: 11.2,
+    fontWeight: '500',
+    color: '#000',
+  },
+});
+
+export default CardHeader;

package/src/components/channelsCard/ChannelsCard.tsx

@@ -0,0 +1,206 @@
+import React, { type FC, useCallback, useState } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Linking,
+  Text,
+} from 'react-native';
+
+// Component
+import CardHeader from '../cardHeader/CardHeader';
+// Action
+
+// Hooks
+import { useAppSelector } from '../../hooks/redux-hooks';
+
+// Svg
+import WhatsAppIcon from '../../assets/svg/whatsapp';
+import FacebookIcon from '../../assets/svg/facebook';
+import TwitterIcon from '../../assets/svg/twitter';
+import InstagramIcon from '../../assets/svg/instagram';
+import TelegramIcon from '../../assets/svg/telegram';
+import EmailIcon from '../../assets/svg/email';
+
+interface Channel {
+  id: number;
+  name: string;
+  color: string;
+  icon: FC<{ color: string }>;
+}
+
+interface ChannelsCardProps {}
+
+const type_channels: Channel[] = [
+  {
+    id: 1,
+    name: 'Twitter',
+    color: '#00acee',
+    icon: ({ color }) => <TwitterIcon width={18} height={18} color={color} />,
+  },
+  {
+    id: 2,
+    name: 'Facebook',
+    color: '#3b5998',
+    icon: ({ color }) => <FacebookIcon width={18} height={18} color={color} />,
+  },
+  {
+    id: 5,
+    name: 'WhatsApp',
+    color: '#21d240',
+    icon: ({ color }) => <WhatsAppIcon width={18} height={18} color={color} />,
+  },
+  {
+    id: 6,
+    name: 'Instagram',
+    color: '#E1306C',
+    icon: ({ color }) => <InstagramIcon width={18} height={18} color={color} />,
+  },
+  {
+    id: 8,
+    name: 'Telegram',
+    color: '#2ab1d5',
+    icon: ({ color }) => <TelegramIcon width={18} height={18} color={color} />,
+  },
+  {
+    id: 4,
+    name: 'Email',
+    color: '#f56565',
+    icon: ({ color }) => <EmailIcon width={18} height={18} color={color} />,
+  },
+];
+
+const ChannelsCard: FC<ChannelsCardProps> = () => {
+  const app = useAppSelector((state) => state.app);
+
+  const { labels, channels_button, initProperties } = app;
+
+  const [index, setIndex] = useState<number | null>(null);
+
+  const handlePress = useCallback(async (url: string, type: number) => {
+    const supported = await Linking.canOpenURL(url);
+
+    if (type === 2) {
+      var lastParams = url.substring(url.lastIndexOf('/') + 1);
+      if (type === 2) {
+        var newUrl = `fb://page/${lastParams}`;
+        await Linking.openURL(newUrl);
+      }
+      return;
+    } else if (supported || type === 4 || type === 5 || type === 1) {
+      await Linking.openURL(url);
+      return;
+    }
+  }, []);
+
+  return (
+    <>
+      {channels_button?.length > 0 && (
+        <View style={styles.channelsDiv}>
+          <CardHeader
+            tittle={labels.other_channels}
+            link="Canales"
+            linkTittle="Canales"
+            channel={true}
+          />
+          <View style={styles.channels}>
+            {channels_button.map((channel, i) => {
+              const item_channel = type_channels.find(
+                (el) => el.id === channel.type
+              );
+
+              if (!item_channel) {
+                return null;
+              } else {
+                return (
+                  <TouchableOpacity
+                    key={i}
+                    onPress={() => {
+                      setIndex(i);
+                      handlePress(channel.url, channel.type);
+                    }}
+                    style={[
+                      styles.channelsButton,
+                      {
+                        borderColor: `${
+                          index === i ? initProperties.primaryColor : '#dce4e4'
+                        }`,
+                      },
+                    ]}
+                    data-index={i}
+                  >
+                    <View
+                      style={[
+                        styles.channelsIcon,
+                        {
+                          backgroundColor: item_channel.color,
+                        },
+                      ]}
+                    >
+                      {item_channel.icon({
+                        color: '#fff',
+                      })}
+                    </View>
+                    <View style={styles.channelsText}>
+                      <Text style={styles.channelsButtonP}>
+                        {channel.name ? channel.name : item_channel.name}
+                      </Text>
+                    </View>
+                  </TouchableOpacity>
+                );
+              }
+            })}
+          </View>
+        </View>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  channels: {
+    width: '100%',
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  channelsDiv: {
+    marginTop: 8,
+  },
+  channelsButton: {
+    flexDirection: 'row',
+    backgroundColor: '#fff',
+    borderRadius: 6,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    width: '98%',
+    margin: 4,
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: 10,
+    padding: 8,
+  },
+  channelsButtonP: {
+    color: '#474747',
+    fontSize: 12,
+  },
+  channelsIcon: {
+    padding: 3,
+    marginRight: 8,
+    borderRadius: 5,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  channelsText: {
+    width: '75%',
+    textAlign: 'justify',
+  },
+  icon: {
+    textAlign: 'center',
+    width: 18,
+    height: 18,
+    color: '#fff',
+  },
+});
+
+export default ChannelsCard;