import React , { useState } from 'react' ; import { View , Text , StyleSheet , TouchableWithoutFeedback } from 'react-native' ; import Icon from 'react-native-vector-icons/Feather' ; import { StackNavigationProp } from '@react-navigation/stack' ; import { RootStackParamList } from 'App/App' ; import AsyncStorage from '@react-native-community/async-storage' ; import AlphaNotice from '../components/AlphaNotice' ; import BasicButton from '../components/BasicButton' ; import { useTranslation } from 'react-i18next' ; import { BottomMenu } from '../components/BottomMenu' ; import Header from '../components/Header' ; import global from '../styles' ; const styles = StyleSheet . create ( { container : { ... global . container , flex : 1 , textAlign : 'center' , backgroundColor : 'rgba(0, 0, 0, 0.15)' , } , lastFetchRow : { flex : 1 , flexDirection : 'row' , justifyContent : 'center' , } , lastFetch : { color : 'hsl(0, 0%, 30%)' , fontSize : 16 , fontFamily : 'Ubuntu-R' , marginRight : 8 , } , refreshIcon : { color : 'hsl(0, 0%, 30%)' , } , bubbleBox : { position : 'absolute' , backgroundColor : 'white' , flex : 1 , paddingTop : 6 , paddingBottom : 6 , marginLeft : 18 , marginRight : 18 , borderRadius : 12 , flexDirection : 'column' , zIndex : 1 , } , bubbleText : { paddingLeft : 14 , paddingRight : 14 , fontFamily : 'Ubuntu-R' , } , bubbleActions : { flexDirection : 'row' , justifyContent : 'flex-end' , paddingLeft : 20 , paddingRight : 20 , paddingTop : 4 , paddingBottom : 4 , } , firstBubble : { top : - 6 , } , secondBubble : { top : 230 , } , thirdBubble : { bottom : 78 , } , next : { fontFamily : 'Ubuntu-R' , color : 'hsl(167, 39%, 64%)' , } , done : { fontFamily : 'Ubuntu-R' , color : 'hsl(167, 39%, 64%)' , } , nextIcon : { color : 'hsl(167, 39%, 64%)' , } , bubbleTriangle : { position : 'absolute' , width : 0 , height : 0 , bottom : - 24 , borderTopColor : 'white' , borderLeftColor : 'transparent' , borderRightColor : 'transparent' , borderBottomColor : 'transparent' , borderLeftWidth : 24 , borderRightWidth : 24 , borderTopWidth : 24 , alignSelf : 'center' , } , bubbleTriangleTop : { position : 'absolute' , width : 0 , height : 0 , top : - 24 , transform : [ { rotateX : '180deg' } ] , borderTopColor : 'white' , borderLeftColor : 'transparent' , borderRightColor : 'transparent' , borderBottomColor : 'transparent' , borderLeftWidth : 24 , borderRightWidth : 24 , borderTopWidth : 24 , alignSelf : 'center' , } , bubbleTriangleLeft : { left : 100 , } , radiusContainer : { margin : 0 , paddingTop : 16 , paddingBottom : 64 , alignItems : 'center' , flex : 10 , } , radius1Icon : { position : 'absolute' , top : 155 , paddingLeft : 35 , width : 100 , height : 100 , zIndex : 3 , } , radius1 : { position : 'absolute' , top : 120 , borderRadius : 50 , borderWidth : 5 , borderColor : 'black' , width : 100 , height : 100 , backgroundColor : 'hsl(167, 20%, 58%)' , } , radius2 : { position : 'absolute' , top : 60 , borderRadius : 110 , width : 220 , height : 220 , backgroundColor : 'rgba(135, 202, 187, 0.2)' , } , radius3 : { borderRadius : 170 , width : 340 , height : 340 , backgroundColor : 'rgba(133, 201, 186, 0.2)' , } , contacts : { color : '#595959' , fontSize : 18 , textAlign : 'center' , fontFamily : 'Ubuntu-B' , marginBottom : 300 , } , bottomButtonContainer : { paddingTop : 16 , paddingBottom : 16 , backgroundColor : 'hsl(0, 0%, 70%)' , } , buttonInfected : { backgroundColor : 'hsl(167, 35%, 58%)' , borderColor : 'hsl(167, 35%, 58%)' , borderRadius : 6 , marginLeft : 16 , marginRight : 16 , } , buttonInfectedTitle : { color : '#2c2c2c' , letterSpacing : 1 , textTransform : 'uppercase' , fontSize : 14 , fontFamily : 'Ubuntu-M' , } , } ) ; type HomeTourScreenNavigationProp = StackNavigationProp < RootStackParamList , 'HomeTour' > ; export const HomeTour = ( { navigation } ) => { const [ step , setStep ] = useState ( 1 ) ; const { t } = useTranslation ( ) ; return ( < View style = { styles . container } > < Header /> < View style = { styles . lastFetchRow } > < Text style = { styles . lastFetch } > { t ( 'home.lastIdFetch' ) } : { t ( 'home.today' ) } 11 : 04 < /Text> < Icon name = "refresh-ccw" size = { 18 } style = { styles . refreshIcon } / > < /View> < View style = { styles . radiusContainer } > { step === 1 && ( < TouchableWithoutFeedback onPress = { ( ) : void => setStep ( 2 ) } > < View style = { [ styles . bubbleBox , styles . firstBubble ] } > < Text style = { styles . bubbleText } > { t ( 'homeTour.circle' ) } < /Text> < View style = { styles . bubbleActions } > < Text style = { styles . next } > { t ( 'homeTour.next' ) } < /Text> < Icon name = "chevron-right" size = { 18 } style = { styles . nextIcon } / > < /View> < View style = { styles . bubbleTriangle } / > < /View> < /TouchableWithoutFeedback>)} { step === 2 && ( < TouchableWithoutFeedback onPress = { ( ) : void => setStep ( 3 ) } > < View style = { [ styles . bubbleBox , styles . secondBubble ] } > < View style = { styles . bubbleTriangleTop } /> < Text style = { styles . bubbleText } > { t ( 'homeTour.pause' ) } < /Text> < View style = { styles . bubbleActions } > < Text style = { styles . done } > { t ( 'homeTour.next' ) } < /Text> < Icon name = "chevron-right" size = { 18 } style = { styles . nextIcon } / > < /View> < /View> < /TouchableWithoutFeedback>)} < Text style = { styles . radius1 } / > < Icon name = "pause" style = { styles . radius1Icon } size = { 30 } > < /Icon> < Text style = { styles . radius2 } / > < Text style = { styles . radius3 } /> < /View> { } { step === 3 && ( < TouchableWithoutFeedback onPress = { ( ) : void => { AsyncStorage . setItem ( 'userHasSeenOnboarding' , 'true' ) ; navigation . navigate ( 'Home' ) ; } } > < View style = { [ styles . bubbleBox , styles . thirdBubble ] } > < Text style = { styles . bubbleText } > { t ( 'homeTour.report' ) } < /Text> < View style = { styles . bubbleActions } > < Text style = { styles . done } > { t ( 'homeTour.done' ) } < /Text> < Icon name = "chevron-right" size = { 18 } style = { styles . nextIcon } / > < /View> < View style = { [ styles . bubbleTriangle , styles . bubbleTriangleLeft ] } / > < /View> < /TouchableWithoutFeedback>)} < Text style = { [ styles . contacts ] } > 0 { t ( 'home.contacts' ) } ( avg : n /a)</Text > < BottomMenu activate = { 'Tracing' } > < /BottomMenu> < /View>); } ; export default HomeTour ;