diff --git a/src/screens/InspectionCapture/index.js b/src/screens/InspectionCapture/index.js index a1aa80ff2..b7eadc112 100644 --- a/src/screens/InspectionCapture/index.js +++ b/src/screens/InspectionCapture/index.js @@ -60,7 +60,7 @@ export default function InspectionCapture() { { cancelable: true }, ); } else if (isLastTour) { - navigation.navigate(names.INSPECTION_REPORT, { inspectionId, vehicleType }); + navigation.navigate(names.INSPECTION_FEEDBACK, { inspectionId, vehicleType }); } else { navigation.navigate(names.LANDING, { inspectionId }); } diff --git a/src/screens/InspectionFeedback/index.js b/src/screens/InspectionFeedback/index.js index 08989082e..e69ea9055 100644 --- a/src/screens/InspectionFeedback/index.js +++ b/src/screens/InspectionFeedback/index.js @@ -1,100 +1,124 @@ import React, { useCallback, useState } from 'react'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useMediaQuery } from 'react-responsive'; +import { Card, List, useTheme } from 'react-native-paper'; +import { View, useWindowDimensions } from 'react-native'; +import { useNavigation, useRoute } from '@react-navigation/native'; +import { useTranslation } from 'react-i18next'; +import { version } from '@package/json'; + import { Feedback } from '@monkvision/feedback'; -import { View } from 'react-native'; +import { Container } from '@monkvision/ui'; +import * as names from 'screens/names'; + +import Artwork from '../Landing/Artwork'; +import styles from './styles'; export default function InspectionFeedback() { - const [interior, setInterior] = useState(''); - const [windShieldCondition, setWindShieldCondition] = useState(''); + const { colors } = useTheme(); + const { height } = useWindowDimensions(); + const { t } = useTranslation(); + const navigation = useNavigation(); + const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }); + + const route = useRoute(); + const { inspectionId, vehicleType } = route.params || {}; + const [tireCondition, setTireCondition] = useState(''); - const [tireConditionSingleSelect, setTireConditionSingleSelect] = useState(''); - const [tireConditionMultiSelect, setTireConditionMultiSelect] = useState([]); + const [windShieldCondition, setWindShieldCondition] = useState(''); const [vehicleInterior, setVehicleInterior] = useState(''); + const [additionInfo, setAdditionInfo] = useState(''); const handleSubmit = useCallback(() => { - console.log('🚀 interior : ', interior); - console.log('🚀 windShieldCondition : ', windShieldCondition); - console.log('🚀 tireCondition : ', tireCondition); - console.log('🚀 tireConditionSingleSelect : ', tireConditionSingleSelect); - console.log('🚀 tireConditionMultiSelect : ', tireConditionMultiSelect); - console.log('🚀 vehicleInterior : ', vehicleInterior); + const data = { + tireCondition, + windShieldCondition, + vehicleInterior, + additionInfo + } + console.log('🚀 ~ handleSubmit ~ data : ', data); + navigation.navigate(names.INSPECTION_REPORT, { inspectionId, vehicleType }); }, [ - interior, - windShieldCondition, + inspectionId, + vehicleType, + navigation, tireCondition, - tireConditionSingleSelect, - tireConditionMultiSelect, - vehicleInterior + windShieldCondition, + vehicleInterior, + additionInfo, ]); return ( - - setInterior(value) - }, { - type: 'radio', - question: 'Is the windshield in good condition?', - answer: windShieldCondition, - onChange: (data) => setWindShieldCondition(data.value), - options: [ - { label: 'Y', value: true }, - { label: 'N', value: false }, - ], - }, { - type: 'select', - question: 'Is the tire condition normal (Single Select)?', - answer: tireConditionSingleSelect, - onChange: (data) => setTireConditionSingleSelect(data), - options: [ - { label: 'Poor', value: 'Poor' }, - { label: 'Medium', value: 'Medium' }, - { label: 'Good', value: 'Good' }, - { label: 'Great', value: 'Great' }, - ], - }, { - type: 'select', - question: 'Is the tire condition normal (Multi Select)?', - answer: tireConditionMultiSelect, - config: { - isMulti: true, - }, - onChange: (data) => setTireConditionMultiSelect(data), - options: [ - { label: 'Poor', value: 'Poor' }, - { label: 'Medium', value: 'Medium' }, - { label: 'Good', value: 'Good' }, - { label: 'Great', value: 'Great' }, - ], - }, { - type: 'radio', - question: 'Is the tire condition normal?', - answer: tireCondition, - onChange: (data) => setTireCondition(data.value), - options: [ - { label: 'Poor', value: 'Poor' }, - { label: 'Medium', value: 'Medium' }, - { label: 'Good', value: 'Good' }, - { label: 'Great', value: 'Great' }, - ], - }, { - type: 'radio', - question: 'How is the interior of the vehicle?', - answer: vehicleInterior, - onChange: (data) => setVehicleInterior(data.value), - options: [ - { label: 'Poor', value: 'Poor' }, - { label: 'Medium', value: 'Medium' }, - { label: 'Good', value: 'Good' }, - ], - }, { - type: 'button', - question: 'Submit', - onChange: () => handleSubmit() - }]} + + + + + + + + + + {t('landing.appVersion')} + {': '} + {version} + + + + Feedback + + setTireCondition(data.value), + options: [ + { label: 'Poor', value: 'Poor' }, + { label: 'Average', value: 'Average' }, + { label: 'Good', value: 'Good' }, + ], + }, { + type: 'radio', + question: 'What is the condition of the windshield?', + answer: windShieldCondition, + onChange: (data) => setWindShieldCondition(data.value), + options: [ + { label: 'Poor', value: 'Poor' }, + { label: 'Average', value: 'Average' }, + { label: 'Good', value: 'Good' }, + ], + }, { + type: 'radio', + question: 'What is the condition of the vehicle\'s interior?', + answer: vehicleInterior, + onChange: (data) => setVehicleInterior(data.value), + options: [ + { label: 'Poor', value: 'Poor' }, + { label: 'Average', value: 'Average' }, + { label: 'Good', value: 'Good' }, + ], + }, { + type: 'text', + question: 'Any additional info?', + answer: additionInfo, + onChange: (value) => setAdditionInfo(value), + }, { + type: 'button', + question: 'Skip', + onChange: () => handleSubmit() + }, { + type: 'button', + question: 'Validate', + onChange: () => handleSubmit() + }]} + /> + + + + ); } diff --git a/src/screens/InspectionFeedback/styles.js b/src/screens/InspectionFeedback/styles.js index 78c2ab86e..9226f25f7 100644 --- a/src/screens/InspectionFeedback/styles.js +++ b/src/screens/InspectionFeedback/styles.js @@ -1,3 +1,49 @@ +import { utils } from '@monkvision/toolkit'; import { StyleSheet } from 'react-native'; -export default StyleSheet.create({}); +export default StyleSheet.create({ + root: { + position: 'relative', + }, + container: { + flex: 1, + display: 'flex', + justifyContent: 'space-around', + flexDirection: 'row', + position: 'relative', + }, + portrait: { + flex: 1, + display: 'flex', + justifyContent: 'flex-start', + flexDirection: 'column', + }, + background: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + }, + left: { + flex: 0.75, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + paddingVertical: utils.styles.spacing(2), + paddingRight: utils.styles.spacing(2), + }, + right: { + flex: 1.25, + display: 'flex', + }, + card: { + borderRadius: 0, + }, + textAlignRight: { + alignItems: 'flex-end', + }, + feedbackWrapper: { + marginHorizontal: 15 + } +});