|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import React, {useState} from 'react'; |
|
|
|
import React, { useState } from "react"; |
|
|
|
import { |
|
|
|
import { |
|
|
|
View, |
|
|
|
View, |
|
|
|
StyleSheet, |
|
|
|
StyleSheet, |
|
|
|
@ -8,17 +8,25 @@ import { |
|
|
|
Pressable, |
|
|
|
Pressable, |
|
|
|
Image, |
|
|
|
Image, |
|
|
|
TextInput, |
|
|
|
TextInput, |
|
|
|
} from 'react-native'; |
|
|
|
SafeAreaView, |
|
|
|
import tw from 'tailwind-react-native-classnames'; |
|
|
|
StatusBar, |
|
|
|
import Header from '../../components/Header'; |
|
|
|
Platform, |
|
|
|
import CustomPressable from '../../components/Pressable'; |
|
|
|
LayoutAnimation |
|
|
|
import Or from '../../components/Or'; |
|
|
|
} from "react-native"; |
|
|
|
import bgQr from './assets/bgQr.png'; |
|
|
|
import tw from "tailwind-react-native-classnames"; |
|
|
|
import qrIcon from './assets/qr.png'; |
|
|
|
import Header from "../../components/Header"; |
|
|
|
import alertIcon from './assets/alert.png'; |
|
|
|
import Navbar from "../../components/Navbar"; |
|
|
|
import bookIcon from './assets/book.png'; |
|
|
|
import Drawer from "../../components/Drawer"; |
|
|
|
|
|
|
|
import CustomPressable from "../../components/Pressable"; |
|
|
|
|
|
|
|
import Or from "../../components/Or"; |
|
|
|
|
|
|
|
|
|
|
|
const width = Dimensions.get('window').width; |
|
|
|
//assets
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
|
|
|
function Activation(props) { |
|
|
|
function Activation(props) { |
|
|
|
const [formData, setFormData] = useState({ |
|
|
|
const [formData, setFormData] = useState({ |
|
|
|
@ -27,79 +35,98 @@ function Activation(props) { |
|
|
|
message: null, |
|
|
|
message: null, |
|
|
|
file: null, |
|
|
|
file: null, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
const [position, setPosition] = useState("100%"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const setBoxPosition = () => { |
|
|
|
|
|
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); |
|
|
|
|
|
|
|
setPosition(position === "100%" ? "0%" : "100%"); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const onChange = (name, value) => { |
|
|
|
const onChange = (name, value) => { |
|
|
|
setFormData({...formData, [name]: value}); |
|
|
|
setFormData({ ...formData, [name]: value }); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<ScrollView |
|
|
|
<SafeAreaView |
|
|
|
contentContainerStyle={styles.contentContainerStyle} |
|
|
|
style={{ |
|
|
|
style={[tw.style('bg-white flex flex-col'), {width: width}]}> |
|
|
|
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, |
|
|
|
|
|
|
|
position: "relative", |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Navbar setBoxPosition={setBoxPosition} /> |
|
|
|
|
|
|
|
<Drawer setBoxPosition={setBoxPosition} position={position} /> |
|
|
|
<Header |
|
|
|
<Header |
|
|
|
background={bgQr} |
|
|
|
background={bgQr} |
|
|
|
title={'فعالسازی کتاب دیجیتال'} |
|
|
|
title={"فعالسازی کتاب دیجیتال"} |
|
|
|
description={''} |
|
|
|
description={""} |
|
|
|
icon={qrIcon} |
|
|
|
icon={qrIcon} |
|
|
|
/> |
|
|
|
/> |
|
|
|
<View style={tw.style('flex flex-row w-full flex-wrap p-2')}> |
|
|
|
<ScrollView |
|
|
|
<View style={tw.style('w-full flex flex-row justify-center mb-7')}> |
|
|
|
contentContainerStyle={styles.contentContainerStyle} |
|
|
|
<Image source={bookIcon} style={[{width: 113, height: 113}]} /> |
|
|
|
style={[tw.style("bg-white flex flex-col"), { width: width }]} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<View style={tw.style("flex flex-col w-full flex-wrap p-2")}> |
|
|
|
|
|
|
|
<View style={tw.style("w-full flex flex-row justify-center mb-7")}> |
|
|
|
|
|
|
|
<Image source={bookIcon} style={[{ width: 90, height: 90 }]} /> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
<Pressable |
|
|
|
{/* <Pressable |
|
|
|
style={[ |
|
|
|
style={[ |
|
|
|
tw.style( |
|
|
|
tw.style( |
|
|
|
'w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3', |
|
|
|
"w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3" |
|
|
|
), |
|
|
|
), |
|
|
|
{backgroundColor: '#196EC01a'}, |
|
|
|
{ backgroundColor: "#196EC01a" }, |
|
|
|
]}> |
|
|
|
]} |
|
|
|
|
|
|
|
> |
|
|
|
<Text |
|
|
|
<Text |
|
|
|
style={[ |
|
|
|
style={[ |
|
|
|
tw.style('text-right flex-1'), |
|
|
|
tw.style("text-right flex-1"), |
|
|
|
{color: '#275077', fontSize: width / 30}, |
|
|
|
{ color: "#275077", fontSize: width / 30 }, |
|
|
|
]}> |
|
|
|
]} |
|
|
|
|
|
|
|
> |
|
|
|
دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون |
|
|
|
دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون |
|
|
|
کتاب قرار داده شده که شما میتوانید با وارد کردن کد در قسمت زیر و یا |
|
|
|
کتاب قرار داده شده که شما میتوانید با وارد کردن کد در قسمت زیر و |
|
|
|
اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه برای |
|
|
|
یا اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه |
|
|
|
کتاب خود نمائید |
|
|
|
برای کتاب خود نمائید |
|
|
|
</Text> |
|
|
|
</Text> |
|
|
|
<View style={tw.style('p-2')}> |
|
|
|
<View style={tw.style("p-2")}> |
|
|
|
<Image |
|
|
|
<Image |
|
|
|
source={alertIcon} |
|
|
|
source={alertIcon} |
|
|
|
style={{width: 30, height: 30, marginLeft: 5}} |
|
|
|
style={{ width: 30, height: 30, marginLeft: 5 }} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</Pressable> |
|
|
|
</Pressable> */} |
|
|
|
<TextInput |
|
|
|
<TextInput |
|
|
|
placeholder="کد فعالسازی" |
|
|
|
placeholder="کد فعالسازی" |
|
|
|
placeholderTextColor="#70707070" |
|
|
|
placeholderTextColor="#70707070" |
|
|
|
style={[ |
|
|
|
style={[ |
|
|
|
tw.style('w-full mt-4 mb-3 rounded-md text-center py-4'), |
|
|
|
tw.style("w-full mt-4 mb-3 rounded-md text-center py-2"), |
|
|
|
{ |
|
|
|
{ |
|
|
|
backgroundColor: '#F9F9F9', |
|
|
|
backgroundColor: "#F9F9F9", |
|
|
|
borderColor: '#DFDFDF', |
|
|
|
borderColor: "#DFDFDF", |
|
|
|
borderWidth: 1, |
|
|
|
borderWidth: 1, |
|
|
|
fontSize: width / 27, |
|
|
|
fontSize: width / 31, |
|
|
|
|
|
|
|
fontFamily: "light", |
|
|
|
}, |
|
|
|
}, |
|
|
|
]} |
|
|
|
]} |
|
|
|
/> |
|
|
|
/> |
|
|
|
<CustomPressable |
|
|
|
<CustomPressable |
|
|
|
title={'تایید کد'} |
|
|
|
title={"تایید کد"} |
|
|
|
backgroundColor="#196EC0" |
|
|
|
backgroundColor="#196EC0" |
|
|
|
color={'white'} |
|
|
|
color={"white"} |
|
|
|
border={{color: '#196EC0', width: 0}} |
|
|
|
border={{ color: "#196EC0", width: 0 }} |
|
|
|
width={'100%'} |
|
|
|
width={"100%"} |
|
|
|
/> |
|
|
|
/> |
|
|
|
<Or /> |
|
|
|
<Or /> |
|
|
|
<CustomPressable |
|
|
|
<CustomPressable |
|
|
|
title={'فعالسازی با کد QR'} |
|
|
|
title={"فعالسازی با کد QR"} |
|
|
|
backgroundColor="#98B2CB" |
|
|
|
backgroundColor="#98B2CB" |
|
|
|
color={'white'} |
|
|
|
color={"white"} |
|
|
|
border={{color: '#196EC0', width: 0}} |
|
|
|
border={{ color: "#196EC0", width: 0 }} |
|
|
|
width={'100%'} |
|
|
|
width={"100%"} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
</ScrollView> |
|
|
|
</ScrollView> |
|
|
|
|
|
|
|
</SafeAreaView> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -107,14 +134,14 @@ function Activation(props) { |
|
|
|
const styles = StyleSheet.create({ |
|
|
|
const styles = StyleSheet.create({ |
|
|
|
contentContainerStyle: { |
|
|
|
contentContainerStyle: { |
|
|
|
paddingBottom: 50, |
|
|
|
paddingBottom: 50, |
|
|
|
alignItems: 'flex-end', |
|
|
|
alignItems: "flex-end", |
|
|
|
}, |
|
|
|
}, |
|
|
|
container: { |
|
|
|
container: { |
|
|
|
width: Dimensions.get('window').width, |
|
|
|
width: Dimensions.get("window").width, |
|
|
|
backgroundColor: 'white', |
|
|
|
backgroundColor: "white", |
|
|
|
flexDirection: 'column', |
|
|
|
flexDirection: "column", |
|
|
|
paddingVertical: 5, |
|
|
|
paddingVertical: 5, |
|
|
|
paddingHorizontal: 10, |
|
|
|
paddingHorizontal: 16, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
Reza_ashrafi
3 years ago