import React, {useCallback, useState} from 'react'; import {Box, CodeInput, Text, Button} from 'components'; import {useI18n} from 'locale'; import {useReportDiagnosis, ExposureStatusType, useExposureStatus} from 'services/ExposureNotificationService'; import {Alert} from 'react-native'; import {covidshield} from 'services/BackendService/covidshield'; import {xhrError} from 'shared/fetch'; import {useNavigation} from '@react-navigation/native'; import AsyncStorage from '@react-native-community/async-storage'; import {INITIAL_TEK_UPLOAD_COMPLETE} from 'shared/DataSharing'; import {BaseDataSharingView, StepXofY} from './components'; import {FormDiagnosedView} from './views/FormDiagnosedView'; export const FormScreen = () => { const i18n = useI18n(); const [codeValue, setCodeValue] = useState(''); const handleChange = useCallback(text => setCodeValue(text), []); const navigation = useNavigation(); const exposureStatus = useExposureStatus(); const [loading, setLoading] = useState(false); const {startSubmission} = useReportDiagnosis(); const onSuccess = useCallback(() => { AsyncStorage.setItem(INITIAL_TEK_UPLOAD_COMPLETE, 'false'); navigation.navigate('Step2'); }, [navigation]); const getTranslationKey = (error: any) => { // OTC = One time code (diagnosis code) switch (error) { case covidshield.KeyClaimResponse.ErrorCode.INVALID_ONE_TIME_CODE: return 'OtcUploadInvalidOneTimeCode'; case covidshield.KeyClaimResponse.ErrorCode.TEMPORARY_BAN: return 'OtcUploadTemporaryBan'; case xhrError: return 'OtcUploadOffline'; default: return 'OtcUploadDefault'; } }; const onError = useCallback( (error: any) => { const translationKey = getTranslationKey(error); Alert.alert(i18n.translate(`Errors.${translationKey}.Title`), i18n.translate(`Errors.${translationKey}.Body`), [ {text: i18n.translate(`Errors.Action`)}, ]); }, [i18n], ); const validateInput = () => { if (codeValue.length < 1) { Alert.alert(i18n.translate(`Errors.OtcCodeNotEntered.Title`), i18n.translate(`Errors.OtcCodeNotEntered.Body`), [ {text: i18n.translate(`Errors.Action`)}, ]); return false; } return true; }; const onSubmit = useCallback(async () => { setLoading(true); try { await startSubmission(codeValue); setLoading(false); onSuccess(); } catch (error) { setLoading(false); onError(error); } }, [startSubmission, codeValue, onSuccess, onError]); if (exposureStatus.type === ExposureStatusType.Diagnosed) { return <FormDiagnosedView />; } return ( <BaseDataSharingView> <Box marginHorizontal="m" marginBottom="l"> <StepXofY currentStep={1} /> <Text variant="bodyTitle2" color="overlayBodyText" accessibilityRole="header" // eslint-disable-next-line no-unneeded-ternary accessibilityAutoFocus={codeValue === '' ? true : false} > {i18n.translate('DataUpload.FormView.Title')} </Text> </Box> <Box marginHorizontal="m" marginBottom="l"> <Text color="lightText" variant="bodyDescription"> {i18n.translate('DataUpload.FormView.Body')} </Text> </Box> <Box marginBottom="m" paddingHorizontal="m"> <CodeInput value={codeValue} onChange={handleChange} accessibilityLabel={i18n.translate('DataUpload.FormView.InputLabel')} /> </Box> <Box flex={1} marginHorizontal="m" marginBottom="m"> <Button loading={loading} variant="thinFlat" text={i18n.translate('DataUpload.FormView.Action')} onPress={() => { const inputValid = validateInput(); if (!inputValid) { return; } onSubmit(); }} /> </Box> </BaseDataSharingView> ); };