@socialgest/rn-widget 0.0.1

package/src/components/helpCenter/SearchHelpCenter/SearchHelpCenter.tsx

@@ -0,0 +1,432 @@
+import React, { useState, useEffect } from 'react';
+
+import {
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  FlatList,
+  Platform,
+  ActivityIndicator,
+  StatusBar,
+} from 'react-native';
+
+// Services
+import { get } from '../../../services/http.conect';
+import { getArticlesHelp } from '../../../services/app.services';
+
+// Actions
+import { changeView } from '../../../redux/actions/chatBoard.actions';
+import { listArticles } from '../../../redux/actions/articles.actions';
+
+// Component
+import Articles from '../../articles/Articles';
+
+// Svg
+import SearchIcon from '../../../assets/svg/search';
+import CloseIcon from '../../../assets/svg/close';
+import RightIcon from '../../../assets/svg/right';
+
+// Hooks
+import { useAppDispatch, useAppSelector } from '../../../hooks/redux-hooks';
+
+const urlBase: string = 'https://api-serverless.tikket.net';
+
+interface ItemProps {
+  item: {
+    name?: string;
+    title: string;
+    articles_count: number;
+    id: string;
+  };
+  key: any;
+  handleArticles: (item: {
+    name?: string;
+    title: string;
+    articles_count: number;
+    id: string;
+  }) => void;
+}
+
+const Item: React.FC<ItemProps> = ({ item, key, handleArticles }) => (
+  <TouchableOpacity
+    style={styles.item}
+    key={key}
+    onPress={() => {
+      console.log(item);
+
+      handleArticles(item);
+    }}
+  >
+    <View>
+      <Text style={styles.divText}>{item.name ? item.name : item.title}</Text>
+    </View>
+    <View style={styles.divIcon}>
+      <Text style={styles.divText}>{item.articles_count}</Text>
+      <RightIcon color={'#cccccc'} width={15} height={15} />
+    </View>
+  </TouchableOpacity>
+);
+
+interface SearchHelpCenterProps {}
+
+const SearchHelpCenter: React.FC<SearchHelpCenterProps> = (props) => {
+  const dispatch = useAppDispatch();
+  const app = useAppSelector((state) => state.app);
+
+  const { labels, initProperties, token, category } = app;
+  const [searchHelpCenter, setSearchHelpCenter] = useState<string>('');
+  const [notResults, setNotResults] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [showArticles, setShowArticles] = useState<boolean>(false);
+  const [data, setData] = useState<
+    Array<{
+      name?: string;
+      title: string;
+      articles_count: number;
+      id: string;
+    }>
+  >([]);
+
+  const header = {
+    authorization: `Bearer ${token}`,
+  };
+
+  const handleChange = async (text: string) => {
+    setShowArticles(false);
+    setNotResults(false);
+    setSearchHelpCenter(text);
+  };
+
+  const handleArticles = (item: {
+    name?: string;
+    title: string;
+    articles_count: number;
+    id: string;
+  }) => {
+    setLoading(true);
+    get(
+      `${urlBase}/help/${initProperties.url_helpcenter}/category/${item.id}/articles`,
+      header
+    )
+      .then((res) => {
+        setLoading(false);
+        if (!res.error) {
+          dispatch(listArticles(res.data));
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+    setShowArticles(true);
+  };
+
+  const handleSearch = async (value: string) => {
+    setLoading(true);
+
+    const results = await get(
+      `${urlBase}/help/${initProperties.url_helpcenter}/search?search=${value}`,
+      header
+    );
+    if (!results.error) {
+      if (results.data.length === 0) {
+        setNotResults(true);
+      } else {
+        setShowArticles(true);
+        setNotResults(false);
+        dispatch(listArticles(results.data));
+      }
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (category.length === 0) {
+      setLoading(true);
+      getArticlesHelp(initProperties.url_helpcenter)
+        .then((res) => {
+          if (!res.error) {
+            setLoading(false);
+            setShowArticles(true);
+            dispatch(listArticles(res.data));
+          }
+        })
+        .catch(() => {
+          setLoading(false);
+        });
+    } else {
+      setData(category);
+      setLoading(false);
+    }
+  }, [category, initProperties.url_helpcenter, props]);
+
+  // useEffect(() => {
+  //   const listener = async (event: KeyboardEvent) => {
+  //     if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+  //       handleSearch(event.target.value);
+  //       event.preventDefault();
+  //     }
+  //   };
+  //   // Platform.OS === 'web' && document.addEventListener('keydown', listener);
+  //   return () => {
+  //     // Platform.OS === 'web' &&
+  //     //   document.removeEventListener('keydown', listener);
+  //   };
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, []);
+
+  const [searchResults, setSearchResults] = useState<
+    Array<{
+      name?: string;
+      title: string;
+      articles_count: number;
+      id: string;
+    }>
+  >([]);
+
+  useEffect(() => {
+    if (searchResults.length === 0 && !notResults) {
+      setSearchResults(category);
+    }
+  }, [searchHelpCenter, category, notResults, searchResults]);
+
+  const renderItem = ({ item, index }: { item: any; index: any }) => (
+    <Item item={item} key={index} handleArticles={handleArticles} />
+  );
+
+  const renderView = () => {
+    if (showArticles && !loading && !notResults) {
+      return <Articles />;
+    }
+    if (loading) {
+      return (
+        <View style={styles.loading}>
+          <ActivityIndicator
+            size={Platform.OS !== 'ios' ? 40 : 'large'}
+            color={initProperties.primaryColor}
+          />
+        </View>
+      );
+    }
+    if (!loading && !showArticles && !notResults) {
+      if (category.length === 0) {
+        return (
+          <View style={styles.notResults}>
+            <Text style={styles.textNotResults}>No hay resultados</Text>
+          </View>
+        );
+      } else if (category.length > 0 && data.length > 0) {
+        return (
+          <FlatList
+            style={styles.list}
+            data={data}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.id}
+          />
+        );
+      }
+    }
+    if (notResults && !loading) {
+      return (
+        <View style={styles.notResults}>
+          <Text style={styles.textNotResults}>
+            No hay resultados para {searchHelpCenter}
+          </Text>
+        </View>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <>
+      <StatusBar
+        barStyle="light-content"
+        animated={true}
+        hidden={true}
+        backgroundColor="#01579b"
+      />
+      <View style={styles.searchDiv}>
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={() => dispatch(changeView('main'))}
+        >
+          <CloseIcon color={'#000'} width={24} height={24} />
+        </TouchableOpacity>
+        <View style={styles.header}>
+          <Text style={styles.textHeader}>{labels.help_center_label}</Text>
+        </View>
+        <View style={styles.search}>
+          <TextInput
+            placeholderTextColor={'#dce4e4'}
+            style={styles.input}
+            placeholder={labels.help_center_search}
+            value={searchHelpCenter}
+            onChangeText={(text) => handleChange(text)}
+          />
+          <TouchableOpacity
+            disabled={searchHelpCenter.length === 0}
+            style={[
+              styles.button,
+              {
+                backgroundColor: `${
+                  searchHelpCenter.length === 0
+                    ? '#dce4e4'
+                    : initProperties.primaryColor
+                }`,
+                borderColor: `${
+                  searchHelpCenter.length === 0
+                    ? '#cccccc'
+                    : initProperties.primaryColor
+                }`,
+              },
+            ]}
+            onPress={() => {
+              handleSearch(searchHelpCenter);
+            }}
+          >
+            <View
+              style={[
+                styles.searchIcon,
+                {
+                  backgroundColor: `${
+                    searchHelpCenter.length === 0
+                      ? '#dce4e4'
+                      : initProperties.primaryColor
+                  }`,
+                },
+              ]}
+            >
+              <SearchIcon width={20} height={20} color={'#fff'} />
+            </View>
+          </TouchableOpacity>
+        </View>
+        {renderView()}
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  search: {
+    color: '#cecece',
+    fontSize: 7.5,
+    display: 'flex',
+    width: '97%',
+    height: 35,
+    flexDirection: 'row',
+    // padding: 10,
+    backgroundColor: '#fcfcfc',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  item: {
+    flexDirection: 'row',
+    paddingVertical: 16,
+    justifyContent: 'space-between',
+  },
+  header: {
+    display: 'flex',
+    paddingVertical: 7,
+  },
+  input: {
+    height: '100%',
+    width: '80%',
+    color: '#000',
+    padding: 5,
+    fontSize: 12,
+    borderWidth: 1.5,
+    borderColor: '#cccccc',
+    borderStyle: 'solid',
+    borderTopLeftRadius: 3.5,
+    borderBottomLeftRadius: 3.5,
+    borderRightWidth: 0,
+  },
+  textHeader: {
+    fontSize: 12.8,
+    fontWeight: '500',
+    color: '#000',
+  },
+  searchDiv: {
+    marginTop: 15,
+    padding: 12.8,
+    backgroundColor: '#fff',
+    borderRadius: 5,
+    height: Platform.OS === 'web' ? 600 : '100%',
+  },
+  divIcon: {
+    flexDirection: 'row',
+    marginLeft: 5,
+  },
+  divText: {
+    color: '#000',
+    textAlign: 'justify',
+    fontSize: 12,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 12.8,
+    zIndex: 1000,
+  },
+  notResults: {
+    padding: '7%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textNotResults: {
+    color: '#cccccc',
+    textAlign: 'center',
+    fontWeight: '400',
+    fontSize: 14.4,
+  },
+  searchIcon: {
+    padding: 10,
+    width: '20%',
+    height: '100%',
+    borderBottomEndRadius: 3,
+    borderTopEndRadius: 3,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  icon2: {
+    color: '#FFFFFF',
+    width: 24,
+    height: 24,
+  },
+  button: {
+    height: '100%',
+    width: '20%',
+    borderWidth: 1.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderTopRightRadius: 3.5,
+    borderBottomRightRadius: 3.5,
+  },
+  msjIcon: {
+    width: 15,
+    height: 15,
+  },
+  loading: {
+    position: 'absolute',
+    zIndex: 1000,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  list: { paddingTop: 10, paddingLeft: 5, height: '90%' },
+});
+
+export default SearchHelpCenter;

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './App';

package/src/components/loading/Loading.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, StyleSheet, ActivityIndicator, Platform } from 'react-native';
+
+// Hooks
+import { useAppSelector } from '../../hooks/redux-hooks';
+
+interface LoadingProps {}
+
+const styles = StyleSheet.create({
+  loading: {
+    position: 'absolute',
+    zIndex: 1000,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+const Loading: React.FC<LoadingProps> = () => {
+  const color = useAppSelector(
+    (state) => state.app.initProperties.primaryColor
+  );
+  return (
+    <View style={styles.loading}>
+      <ActivityIndicator
+        size={Platform.OS !== 'ios' ? 80 : 'large'}
+        color={color}
+      />
+    </View>
+  );
+};
+
+export default Loading;

package/src/components/main/Main.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View, StyleSheet, ScrollView, StatusBar } from 'react-native';
+
+// Component
+import ConversationsCard from '../conversations/conversationsCard/ConversationsCard';
+import HelpCenterCard from '../helpCenter/HelpCenterCard';
+import InitMessage from './initMessage/InitMessage';
+
+// Hooks
+import { useAppSelector } from '../../hooks/redux-hooks';
+
+interface MainProps {}
+
+const styles = StyleSheet.create({
+  header: {
+    backgroundColor: '#1082ff',
+    height: 192,
+    position: 'relative',
+    top: 0,
+  },
+  boardContent: {
+    position: 'relative',
+    marginTop: -190,
+    maxHeight: '100%',
+    width: '100%',
+  },
+});
+
+const Main: React.FC<MainProps> = () => {
+  const { initProperties } = useAppSelector((state) => state.app);
+
+  const data_style = {
+    backgroundColor: initProperties.primaryColor,
+    color: initProperties.primaryTextColor,
+  };
+  return (
+    <>
+      <StatusBar
+        barStyle="light-content"
+        animated={true}
+        hidden={true}
+        backgroundColor={initProperties.primaryColor}
+      />
+      <View style={[styles.header, data_style]}></View>
+      <View style={styles.boardContent}>
+        <InitMessage
+          tittle={initProperties.mainTittle}
+          description={initProperties.mainDescription}
+          textColor={initProperties.primaryTextColor}
+          photo={initProperties.mainPhoto}
+          photoHeight={initProperties.photoHeight}
+        />
+        <ScrollView>
+          <ConversationsCard />
+          {initProperties.url_helpcenter && <HelpCenterCard />}
+        </ScrollView>
+      </View>
+    </>
+  );
+};
+
+export default Main;

package/src/components/main/initMessage/InitMessage.tsx

@@ -0,0 +1,63 @@
+import React, { type FC } from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+interface InitMessageProps {
+  textColor: string;
+  photo: string;
+  photoHeight?: number;
+  tittle: string;
+  description: string;
+}
+
+const styles = StyleSheet.create({
+  boardMessage: {
+    paddingTop: 25,
+    margin: 16,
+    // animation-duration: 0.5s;
+    // animation-name: slidein;
+  },
+  view: {
+    maxWidth: 145,
+  },
+  image: {
+    width: '100%',
+    height: 45,
+  },
+  text: {
+    fontSize: 19.2,
+    fontWeight: '300',
+    marginTop: 5,
+    marginBottom: 5,
+    color: '#fff',
+  },
+  text2: {
+    fontSize: 14.4,
+    fontWeight: '400',
+    color: '#fff',
+  },
+});
+
+const InitMessage: FC<InitMessageProps> = (props) => {
+  return (
+    <View style={[styles.boardMessage]}>
+      <View style={styles.view}>
+        <Image
+          resizeMode={'contain'}
+          source={{ uri: props.photo }}
+          style={[
+            styles.image,
+            { maxHeight: !props.photoHeight ? 45 : props.photoHeight },
+          ]}
+        />
+      </View>
+      <Text style={[styles.text, { color: props.textColor }]}>
+        {props.tittle}
+      </Text>
+      <Text style={[styles.text2, { color: props.textColor }]}>
+        {props.description}
+      </Text>
+    </View>
+  );
+};
+
+export default InitMessage;