reza added activation

navigation.js

@@ -16,6 +16,7 @@ import {useTranslation} from "react-i18next";
 import Profile from "./src/screens/Profile";
 import Videos from "./src/screens/Videos";
 import Exams from "./src/screens/Exams";
+import Activation from "./src/screens/Activation";
 
 const mapStateToProps = state => {
 	return {
@@ -42,8 +43,8 @@ function BottomTab(props) {
 			<Tab.Screen name={'Videos'} component={Videos} options={{
 				title: t('videos')
 			}} />
-			<Tab.Screen name={'Product'} component={Product} options={{
-				title: t('books')
+			<Tab.Screen name={'Activation'} component={Activation} options={{
+				title: t('activation')
 			}} />
 			<Tab.Screen name={'Home'} component={Home} options={{
 				title: t('home')

src/components/Header.js

@@ -9,15 +9,15 @@ export default function Header({icon, title, description, background}) {
   return (
     <View
       style={[
-        tw.style('w-full flex flex-col items-center justify-end pb-3 relative'),
-        {height: height / 4, backgroundColor: '#196EC015'},
+        tw.style('w-full flex flex-col items-center justify-end pb-3 relative mb-4'),
+        {height: height / 4.5, backgroundColor: '#196EC015'},
       ]}>
       <Image source={background} style={[tw.style('absolute left-0 top-0'), {}]} />
-      <Image source={icon} style={[{width : width / 5, height : height / 10}]} />
+      <Image source={icon} style={[{width : width / 5, height : height / 10, marginBottom : 10}]} />
       <Text
         style={[
-          {fontSize: width / 14, color: '#196EC0'},
-          tw.style('font-bold'),
+          {fontSize: width / 18, color: '#196EC0'},
+          tw.style('font-semibold'),
         ]}>
         {title}
       </Text>

src/components/Redirect.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {View, Text, Dimensions, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import leftIcon from '../assets/icons/leftWhite.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Redirect({text}) {
+  return (
+    <View
+      style={[
+        tw.style('w-full flex flex-row-reverse items-center p-4 rounded-md mb-5'),
+        {backgroundColor: '#196EC0'},
+      ]}>
+      <View style={tw.style('flex-1 flex flex-col')}>
+        <Text
+          style={[
+            tw.style('font-medium text-right'),
+            {fontSize: width / 30, color: 'white'},
+          ]}>
+          {text}
+        </Text>
+      </View>
+      <View style={tw.style('p-0')}>
+        <Image source={leftIcon} style={{width: 24, height: 24}} />
+      </View>
+    </View>
+  );
+}

src/screens/Activation/index.js

@@ -3,21 +3,26 @@ import {
   View,
   StyleSheet,
   Dimensions,
-  TextInput,
+  ScrollView,
   Text,
-  Image,
   Pressable,
+  Image,
 } from 'react-native';
 import tw from 'tailwind-react-native-classnames';
-import FormButton from '../../components/FormButton';
-import bookIcon from '../../assets/icons/activation.png';
+import Header from '../../components/Header';
+import bgQr from './assets/bgQr.png';
+import qrIcon from './assets/qr.png';
+import alertIcon from './assets/alert.png';
+import bookIcon from './assets/book.png';
 
 const width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
 
-function Support(props) {
+function Activation(props) {
   const [formData, setFormData] = useState({
-    code: null,
+    title: null,
+    department: null,
+    message: null,
+    file: null,
   });
 
   const onChange = (name, value) => {
@@ -25,35 +30,45 @@ function Support(props) {
   };
 
   return (
-    <View
-      style={[
-        tw.style('bg-white flex flex-col p-1 relative'),
-        {width: width, height: height - 140},
-      ]}>
-      <View
-        style={tw.style('w-full flex flex-col items-center absolute top-1/4')}>
-        <Image source={bookIcon} style={{width: 250, height: 200}} />
-        <Text
-          style={tw.style(
-            'w-full text-center text-gray-900 text-medium mt-4 text-sm',
-          )}>
-          برای خدمت هوشمند کتاب کد فعال سازی را اینجا وارد کنید.
-        </Text>
-      </View>
-      <View
-        className={tw.style("flex flex-column")}
-        style={{bottom: 0, left: 10, position: 'absolute', width: width - 20}}>
-        <View style={tw.style('w-full flex flex-row mb-1 rounded-lg bg-gray-200 overflow-hidden')}>
-            <TextInput style={tw.style('py-3 px-2 placeholder-gray-900 text-center w-full')} placeholder={'مثال :‌ #FJKDLG'} />
-            <Pressable style={tw.style('flex justify-center items-center p-2')}>
-              <Text>QR</Text>
-            </Pressable>
-        </View>
-        <View style={tw.style('w-full mt-2')}>
-          <FormButton text={'ارسال'} color={'#6cbe44'} />
+    <ScrollView
+      contentContainerStyle={styles.contentContainerStyle}
+      style={[tw.style('bg-white flex flex-col'), {width: width}]}>
+      <Header
+        background={bgQr}
+        title={'فعال‌سازی کتاب دیجیتال'}
+        description={''}
+        icon={qrIcon}
+      />
+      <View style={tw.style('flex flex-row w-full flex-wrap p-2')}>
+        <View style={tw.style('w-full flex flex-row justify-center mb-7')}>
+          <Image source={bookIcon} style={[{width: 113, height: 113}]} />
         </View>
+        <Pressable
+          style={[
+            tw.style(
+              'w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3',
+            ),
+            {backgroundColor: '#196EC01a'},
+          ]}>
+          <Text
+            style={[
+              tw.style('text-right flex-1'),
+              {color: '#275077', fontSize: width / 30},
+            ]}>
+            دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون
+            کتاب قرار داده شده که شما می‌توانید با وارد کردن کد در قسمت زیر و یا
+            اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه برای
+            کتاب خود نمائید
+          </Text>
+          <View style={tw.style('p-2')}>
+            <Image
+              source={alertIcon}
+              style={{width: 30, height: 30, marginLeft: 5}}
+            />
+          </View>
+        </Pressable>
       </View>
-    </View>
+    </ScrollView>
   );
 }
 
@@ -63,6 +78,13 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
     alignItems: 'flex-end',
   },
+  container: {
+    width: Dimensions.get('window').width,
+    backgroundColor: 'white',
+    flexDirection: 'column',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
 });
 
-export default Support;
+export default Activation;

src/screens/Support/components/Address.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {View, Text, Dimensions, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import addressIcon from '../assets/address.png';
+import leftGreenIcon from '../assets/leftBlue.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Address() {
+  return (
+    <View
+      style={[
+        tw.style('w-full flex flex-row-reverse p-4 rounded-md mb-4'),
+        {backgroundColor: '#5FFFE94f'},
+      ]}>
+      <View style={tw.style('p-3')}>
+        <Image source={addressIcon} style={{width: 43, height: 43}} />
+      </View>
+      <View style={tw.style('flex-1 flex flex-col')}>
+        <Text
+          style={[
+            tw.style('font-bold mb-1 text-right'),
+            {fontSize: width / 24, color: '#0EAD98'},
+          ]}>
+          نشانی
+        </Text>
+        <Text
+          style={[
+            tw.style('font-light mb-3'),
+            {fontSize: width / 30, color: '#066A5C'},
+          ]}>
+          هنشانی دفتر مرکزی: تهران میدان فردوسی خیابان عباس موسوی پلاک 30
+        </Text>
+        <View
+          style={tw.style(
+            'flex flex-row justify-start items-center text-right',
+          )}>
+          <Image source={leftGreenIcon} style={{width: 11, height: 11}} />
+          <Text
+            style={[
+              tw.style('font-medium'),
+              {color: '#0A7769', fontSize: width / 32},
+            ]}>
+            لیست نمایندگی‌های فروش
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}

src/screens/Support/components/Call.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {View, Text, Dimensions, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import callIcon from '../assets/callGreen.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function Address() {
+  return (
+    <View
+      style={[
+        tw.style('w-full flex flex-row-reverse p-4 rounded-md mb-5'),
+        {backgroundColor: '#69FF5F2f'},
+      ]}>
+      <View style={tw.style('p-3')}>
+        <Image source={callIcon} style={{width: 43, height: 43}} />
+      </View>
+      <View style={tw.style('flex-1 flex flex-col')}>
+        <Text
+          style={[
+            tw.style('font-bold mb-1 text-right'),
+            {fontSize: width / 24, color: '#06A02A'},
+          ]}>
+          شماره تماس
+        </Text>
+        <Text
+          style={[
+            tw.style('font-light mb-3'),
+            {fontSize: width / 30, color: '#025816'},
+          ]}>
+          در صورت هرگونه سوال شما می‌توانید در ساعات اداری 9 الی 17 با شماره
+          021۸۸۸۱۴۶۳۷ تماس حاصل فرمایید{' '}
+        </Text>
+      </View>
+    </View>
+  );
+}

src/screens/Support/components/OnlineSupport.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {View, Text, Dimensions, Image} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import chatIcon from '../assets/chat.png';
+import leftYellowIcon from '../assets/leftYellow.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default function OnlineSupport() {
+  return (
+    <View
+      style={[
+        tw.style('w-full flex flex-row-reverse p-4 rounded-md mb-4'),
+        {backgroundColor: '#D3B7021f'},
+      ]}>
+      <View style={tw.style('p-3')}>
+        <Image source={chatIcon} style={{width: 43, height: 43}} />
+      </View>
+      <View style={tw.style('flex-1 flex flex-col')}>
+        <Text
+          style={[
+            tw.style('font-bold mb-1 text-right'),
+            {fontSize: width / 24, color: '#D3B702'},
+          ]}>
+          پشتیبانی آنلاین
+        </Text>
+        <Text
+          style={[
+            tw.style('font-light mb-3'),
+            {fontSize: width / 30, color: '#766600'},
+          ]}>
+          همکاران ما در قسمت فروش و پشتیبانی، پاسخگوی شما هستند هر سوالی در مورد
+          کتاب‌های ما داشتید بپرسید
+        </Text>
+        <View style={tw.style('flex flex-row justify-start items-center text-right')}>
+          <Image source={leftYellowIcon} style={{width: 11, height: 11}} />
+          <Text style={[ tw.style('font-medium') , {color: '#766600', fontSize: width / 32}]}>
+            ارتباط با بخش پشتیبانی
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}

src/screens/Support/index.js

@@ -2,9 +2,10 @@ import React, {useState} from 'react';
 import {View, StyleSheet, Dimensions, ScrollView, Text} from 'react-native';
 import tw from 'tailwind-react-native-classnames';
 import Header from '../../components/Header';
-import Select from '../../components/Select';
-import CustomTextInput from '../../components/CustomTextInput';
-import FormButton from '../../components/FormButton';
+import OnlineSupport from './components/OnlineSupport';
+import Address from './components/Address';
+import Call from './components/Call';
+import Redirect from '../../components/Redirect';
 import bgContact from './assets/bgContact.png';
 import callIcon from './assets/call.png';
 
@@ -25,13 +26,22 @@ function Support(props) {
   return (
     <ScrollView
       contentContainerStyle={styles.contentContainerStyle}
-      style={[tw.style('bg-white flex flex-col p-1'), {width: width}]}>
+      style={[tw.style('bg-white flex flex-col'), {width: width}]}>
       <Header
         background={bgContact}
         title={'تماس با ما'}
         description={'تیم پشتیبانی ما اینجاست تا شما رو کمک کنه'}
         icon={callIcon}
       />
+      <View style={styles.container}>
+        <OnlineSupport />
+        <Call />
+        <Address />
+        <Redirect
+          text="دشاید سوالی که بدنبال آن هستید را در قسمت پرسش‌های متداول بتوانید پیدا
+          کنید"
+        />
+      </View>
     </ScrollView>
   );
 }
@@ -42,6 +52,13 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
     alignItems: 'flex-end',
   },
+  container: {
+    width: Dimensions.get('window').width,
+    backgroundColor: 'white',
+    flexDirection: 'column',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
 });
 
 export default Support;