reza added activation

master
Reza_ashrafi 3 years ago
parent 58dfd889ec
commit 1742d6abda
  1. 5
      navigation.js
  2. BIN
      src/assets/icons/leftWhite.png
  3. 10
      src/components/Header.js
  4. 30
      src/components/Redirect.js
  5. BIN
      src/screens/Activation/assets/alert.png
  6. 0
      src/screens/Activation/assets/bgQr.png
  7. BIN
      src/screens/Activation/assets/book.png
  8. BIN
      src/screens/Activation/assets/qr.png
  9. 92
      src/screens/Activation/index.js
  10. BIN
      src/screens/Support/assets/address.png
  11. BIN
      src/screens/Support/assets/callGreen.png
  12. BIN
      src/screens/Support/assets/chat.png
  13. BIN
      src/screens/Support/assets/leftBlue.png
  14. BIN
      src/screens/Support/assets/leftYellow.png
  15. 51
      src/screens/Support/components/Address.js
  16. 38
      src/screens/Support/components/Call.js
  17. 45
      src/screens/Support/components/OnlineSupport.js
  18. 25
      src/screens/Support/index.js

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 271 B

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

@ -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>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 684 B

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

@ -3,21 +3,26 @@ import {
View, View,
StyleSheet, StyleSheet,
Dimensions, Dimensions,
TextInput, ScrollView,
Text, Text,
Image,
Pressable, Pressable,
Image,
} from 'react-native'; } from 'react-native';
import tw from 'tailwind-react-native-classnames'; import tw from 'tailwind-react-native-classnames';
import FormButton from '../../components/FormButton'; import Header from '../../components/Header';
import bookIcon from '../../assets/icons/activation.png'; 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 width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
function Support(props) { function Activation(props) {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
code: null, title: null,
department: null,
message: null,
file: null,
}); });
const onChange = (name, value) => { const onChange = (name, value) => {
@ -25,35 +30,45 @@ function Support(props) {
}; };
return ( return (
<View <ScrollView
style={[ contentContainerStyle={styles.contentContainerStyle}
tw.style('bg-white flex flex-col p-1 relative'), style={[tw.style('bg-white flex flex-col'), {width: width}]}>
{width: width, height: height - 140}, <Header
]}> background={bgQr}
<View title={'فعالسازی کتاب دیجیتال'}
style={tw.style('w-full flex flex-col items-center absolute top-1/4')}> description={''}
<Image source={bookIcon} style={{width: 250, height: 200}} /> icon={qrIcon}
<Text />
style={tw.style( <View style={tw.style('flex flex-row w-full flex-wrap p-2')}>
'w-full text-center text-gray-900 text-medium mt-4 text-sm', <View style={tw.style('w-full flex flex-row justify-center mb-7')}>
)}> <Image source={bookIcon} style={[{width: 113, height: 113}]} />
برای خدمت هوشمند کتاب کد فعال سازی را اینجا وارد کنید.
</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'} />
</View> </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>
</View> </ScrollView>
); );
} }
@ -63,6 +78,13 @@ const styles = StyleSheet.create({
paddingBottom: 50, paddingBottom: 50,
alignItems: 'flex-end', alignItems: 'flex-end',
}, },
container: {
width: Dimensions.get('window').width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal: 10,
},
}); });
export default Support; export default Activation;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 B

@ -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>
);
}

@ -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>
);
}

@ -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>
);
}

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

Loading…
Cancel
Save