@socialgest/rn-widget 0.0.1

package/src/components/header/sectionHeader/SectionHeader.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, Text, StyleSheet, StatusBar } from 'react-native';
+
+// Component
+import GoBackButton from '../../goBackButton/GoBackButton';
+
+// Hooks
+import { useAppSelector } from '../../../hooks/redux-hooks';
+
+interface SectionHeaderProps {
+  tittle: string;
+}
+
+const styles = StyleSheet.create({
+  tittle: {
+    fontWeight: '400',
+    marginLeft: 10,
+    fontSize: 18,
+  },
+  conversationsHeader: {
+    height: '100%',
+    paddingTop: 10,
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+  },
+});
+
+const SectionHeader: React.FC<SectionHeaderProps> = (props) => {
+  const app = useAppSelector((state) => state.app);
+  return (
+    <>
+      <StatusBar
+        barStyle="light-content"
+        animated={true}
+        hidden={true}
+        backgroundColor={app.initProperties.primaryColor}
+      />
+      <View
+        style={[
+          styles.conversationsHeader,
+          {
+            backgroundColor: app.initProperties.primaryColor,
+          },
+        ]}
+      >
+        <GoBackButton />
+        <Text
+          style={[
+            styles.tittle,
+            { color: app.initProperties.primaryTextColor },
+          ]}
+        >
+          {props.tittle}
+        </Text>
+      </View>
+    </>
+  );
+};
+
+export default SectionHeader;

package/src/components/header/smallChatHeader/SmallChatHeader.tsx

@@ -0,0 +1,90 @@
+import React, { type FC } from 'react';
+import { View, Text, StyleSheet, Image } from 'react-native';
+
+// Hooks
+import { useAppSelector } from '../../../hooks/redux-hooks';
+
+interface ShortHeaderProps {}
+
+const ShortHeader: FC<ShortHeaderProps> = () => {
+  const { initProperties, bot } = useAppSelector((state) => state.app);
+  const { randonOperators } = useAppSelector((state) => state.Operators);
+
+  const previewOperators = randonOperators
+    .filter(({ active }) => active)
+    .slice(0, 3);
+
+  return (
+    <>
+      <View style={styles.operatorsContainer}>
+        {previewOperators?.length > 0 ? (
+          previewOperators.map((operator, index) => (
+            <Image
+              key={index}
+              source={{
+                uri: operator.imgURL,
+              }}
+              style={[
+                styles.operator,
+                index === 0
+                  ? styles.operator1
+                  : index === 1
+                  ? styles.operator2
+                  : styles.operator3,
+              ]}
+            />
+          ))
+        ) : (
+          <Image
+            source={{
+              uri: bot.photo,
+            }}
+            style={[styles.operator, styles.operator1]}
+          />
+        )}
+      </View>
+      <View>
+        <Text style={[styles.text, { color: initProperties.primaryTextColor }]}>
+          {initProperties.mainTittle}
+        </Text>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  operatorsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  operator: {
+    width: 45,
+    height: 45,
+    borderRadius: 99,
+    borderWidth: 2,
+    borderColor: '#1082ff',
+  },
+  operator1: {
+    position: 'relative',
+    zIndex: 30,
+  },
+  operator2: {
+    position: 'relative',
+    left: -20,
+    zIndex: 20,
+  },
+  operator3: {
+    position: 'relative',
+    left: -46,
+    zIndex: 10,
+  },
+  text: {
+    marginLeft: 10,
+    alignItems: 'center',
+    fontWeight: '400',
+    fontSize: 18,
+    color: '#fff',
+  },
+});
+
+export default ShortHeader;

package/src/components/header/staticChatHeader/StaticChatHeader.tsx

@@ -0,0 +1,61 @@
+import React, { type FC } from 'react';
+import { View, Text, StyleSheet, Image } from 'react-native';
+
+//Hooks
+import { useAppSelector } from '../../../hooks/redux-hooks';
+
+interface StaticChatHeaderProps {}
+
+const styles = StyleSheet.create({
+  operatorsContainer: {
+    width: '50%',
+    maxHeight: 50,
+    display: 'flex',
+  },
+  operator: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: '#1082ff',
+  },
+  text: {
+    marginLeft: 8,
+    alignItems: 'center',
+    fontWeight: '400',
+    fontSize: 19.2,
+    color: '#fff',
+  },
+});
+
+const StaticChatHeader: FC<StaticChatHeaderProps> = () => {
+  const { initProperties, bot } = useAppSelector((state) => state.app);
+
+  return (
+    <>
+      <Image
+        source={{ uri: bot.photo }}
+        style={[styles.operator, { borderColor: initProperties.primaryColor }]}
+      />
+
+      <View
+        style={{
+          backgroundColor: initProperties.primaryColor,
+        }}
+      >
+        <Text
+          style={[
+            styles.text,
+            {
+              color: initProperties.primaryTextColor,
+            },
+          ]}
+        >
+          {initProperties.mainTittle}
+        </Text>
+      </View>
+    </>
+  );
+};
+
+export default StaticChatHeader;

package/src/components/header/userHeader/UserHeader.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+// Hooks
+import { useAppSelector } from '../../../hooks/redux-hooks';
+
+interface UserHeaderProps {}
+
+const UserHeader: React.FC<UserHeaderProps> = () => {
+  const operator = useAppSelector((state) => state.chat.operator);
+
+  return (
+    <View style={styles.headerContainer}>
+      <Image style={styles.image} source={{ uri: operator.imgURL }} />
+
+      <View>
+        <Text style={styles.text}>{operator.name}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  image: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+  },
+  text: {
+    marginLeft: 10,
+    alignSelf: 'center',
+    fontWeight: '400',
+    fontSize: 18,
+    color: '#fff',
+  },
+});
+
+export default UserHeader;

package/src/components/helpCenter/HelpCenterCard.tsx

@@ -0,0 +1,127 @@
+import React, { type FC } from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+
+// Component
+import CardHeader from '../cardHeader/CardHeader';
+
+// Actions
+import { changeView } from '../../redux/actions/chatBoard.actions';
+
+// Helper
+import { shadow } from '../../helpers/render.helper';
+
+// Svg
+import SearchIcon from '../../assets/svg/search';
+
+// Hooks
+import { useAppSelector, useAppDispatch } from '../../hooks/redux-hooks';
+
+export interface ShadowParams {
+  color: string;
+  opacity: number;
+  radius: number;
+  offsetWidth: number;
+  offsetHeight: number;
+  elevation: number;
+}
+
+interface HelpCenterCardProps {}
+
+const HelpCenterCard: FC<HelpCenterCardProps> = () => {
+  const dispatch = useAppDispatch();
+  const app = useAppSelector((state) => state.app);
+  // const countChats = useAppSelector((state) => state.chatHistory.counter);
+
+  const { labels, initProperties } = app;
+
+  const shadow_param: ShadowParams = {
+    color: '#000',
+    opacity: 0,
+    radius: 7,
+    offsetWidth: 0,
+    offsetHeight: 4,
+    elevation: 8,
+  };
+
+  return (
+    <View style={[styles.card, shadow(shadow_param)]}>
+      <CardHeader
+        tittle={labels.help_center_label}
+        link=""
+        linkTittle=""
+        channel={true}
+      />
+      <View style={styles.search}>
+        <TouchableOpacity
+          style={styles.searchButton}
+          onPress={() => dispatch(changeView('search'))}
+        >
+          <View>
+            <Text style={styles.text}>{labels.help_center_search}</Text>
+          </View>
+          <View
+            style={[
+              styles.searchIcon,
+              { backgroundColor: initProperties.primaryColor },
+            ]}
+          >
+            <SearchIcon width={20} height={20} color={'#fff'} />
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    padding: 5,
+    borderRadius: 5,
+    margin: 16,
+    marginBottom: 50,
+  },
+  search: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    padding: 0.32,
+    marginBottom: 10,
+  },
+  searchButton: {
+    color: '#cecece',
+    display: 'flex',
+    width: '90%',
+    height: 45,
+    flexDirection: 'row',
+    borderWidth: 1.5,
+    borderColor: '#cccccc',
+    borderStyle: 'solid',
+    borderRadius: 3.5,
+    backgroundColor: '#fcfcfc',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#cecece',
+    fontSize: 12,
+    padding: 10,
+  },
+  searchIcon: {
+    padding: 10,
+    width: '20%',
+    height: '100%',
+    borderBottomEndRadius: 3.5,
+    borderTopEndRadius: 3.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+});
+
+export default HelpCenterCard;