445 lines
14 KiB
TypeScript
445 lines
14 KiB
TypeScript
import React, {useEffect, useState} from 'react';
|
|
import {
|
|
BackHandler,
|
|
Pressable,
|
|
ScrollView,
|
|
StatusBar,
|
|
Text,
|
|
View,
|
|
} from 'react-native';
|
|
import styles from './styles';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import {useNavigation} from '@react-navigation/native';
|
|
import Colors from '../../../assets/styles/Colors';
|
|
import RadioButtonOptionComponent from '../../components/RadioButtonOption';
|
|
import {RootStackParamList} from '../../navigation/type';
|
|
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
|
|
import {Button, PaperProvider} from 'react-native-paper';
|
|
import StepIndicator from '../../components/StepIndicator';
|
|
import TextInputComponent from '../../components/TextInput';
|
|
import DialogApplicationPassport from '../../components/dialog/DialogApplicationPassport';
|
|
import DialogDontHaveYetPassport from '../../components/dialog/DialogDontHaveYetPassport';
|
|
import DialogPassportInfo from '../../components/dialog/DialogPassportInfo';
|
|
import DialogLostOrDamagedPassport from '../../components/dialog/DialogLostOrDamagedPassport';
|
|
import familyRelationshipData from '../../data/DropdownData/FamilyRelationshipData';
|
|
import FontFamily from '../../../assets/styles/FontFamily';
|
|
import passportAppointmentData from '../../data/History/PassportAppointmentData';
|
|
import Step7Completion from './steps/Step7Completion/Step7Completion';
|
|
import Step6Processing from './steps/Step6Processing/Step6Processing';
|
|
import Step5Verification from './steps/Step5Verification/Step5Verification';
|
|
import Step3Payment from './steps/Step3Payment/Step3Payment';
|
|
|
|
// Data
|
|
import arrivalDateGuidelinesData from '../../data/Steps/ArrivalDateGuidelinesData';
|
|
|
|
// Options Data
|
|
import passportForOptions from '../../data/Options/PassportForOptions';
|
|
import durationAbroadOptions from '../../data/Options/DurationAbroadOptions';
|
|
import destinationFamilyContactOptions from '../../data/Options/DestinationFamilyContactOptions';
|
|
import Step4DataConfirmationSubStep2 from './steps/Step4DataConfirmation/Step4DataConfirmationSubStep2';
|
|
import Step4DataConfirmationSubStep1 from './steps/Step4DataConfirmation/Step4DataConfirmationSubStep1';
|
|
import Step1PersonalInfoSubStep1 from './steps/Step1PersonalInfo/Step1PersonalInfoSubStep1';
|
|
import Step1PersonalInfoSubStep2 from './steps/Step1PersonalInfo/Step1PersonalInfoSubStep2';
|
|
import Step1PersonalInfoSubStep3 from './steps/Step1PersonalInfo/Step1PersonalInfoSubStep3';
|
|
import Step2SupportingDocsSubStep1 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep1';
|
|
import Step2SupportingDocsSubStep2 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep2';
|
|
import Step2SupportingDocsSubStep3 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep3';
|
|
import Step2SupportingDocsSubStep4 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep4';
|
|
import Step2SupportingDocsSubStep5 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep5';
|
|
import Step2SupportingDocsSubStep6 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep6';
|
|
import Step2SupportingDocsSubStep7 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep7';
|
|
import Step2SupportingDocsSubStep8 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep8';
|
|
import Step2SupportingDocsSubStep9 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep9';
|
|
import Step2SupportingDocsSubStep10 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep10';
|
|
import Step2SupportingDocsSubStep11 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep11';
|
|
|
|
type RegularPassportScreenNavigationProp = NativeStackNavigationProp<
|
|
RootStackParamList,
|
|
'RegularPassport'
|
|
>;
|
|
|
|
type RenderApplicationStepsContentProps = {
|
|
step: number;
|
|
subStep: number;
|
|
setStep: (step: number) => void;
|
|
setSubStep: (subStep: number) => void;
|
|
selectedOption: string;
|
|
setSelectedOption: (val: string) => void;
|
|
selectedPassportOption: string;
|
|
setSelectedPassportOption: (val: string) => void;
|
|
checkedOption: boolean;
|
|
setCheckedOption: React.Dispatch<React.SetStateAction<boolean>>;
|
|
showDontHaveYetDialog: () => void;
|
|
showPassportInfoDialog: () => void;
|
|
showLostOrDamagedPassportDialog: () => void;
|
|
};
|
|
|
|
const RenderApplicationStepsContent = (
|
|
props: RenderApplicationStepsContentProps,
|
|
) => {
|
|
const {
|
|
step,
|
|
subStep,
|
|
setStep,
|
|
setSubStep,
|
|
selectedOption,
|
|
setSelectedOption,
|
|
selectedPassportOption,
|
|
setSelectedPassportOption,
|
|
checkedOption,
|
|
setCheckedOption,
|
|
showDontHaveYetDialog,
|
|
showPassportInfoDialog,
|
|
showLostOrDamagedPassportDialog,
|
|
} = props;
|
|
|
|
if (step === 1) {
|
|
switch (subStep) {
|
|
case 1:
|
|
return <Step1PersonalInfoSubStep1 setSubStep={setSubStep} />;
|
|
case 2:
|
|
return <Step1PersonalInfoSubStep2 setSubStep={setSubStep} />;
|
|
case 3:
|
|
return (
|
|
<Step1PersonalInfoSubStep3
|
|
setStep={setStep}
|
|
setSubStep={setSubStep}
|
|
/>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
if (step === 2) {
|
|
switch (subStep) {
|
|
case 1:
|
|
return (
|
|
<Step2SupportingDocsSubStep1
|
|
setStep={setStep}
|
|
setSubStep={setSubStep}
|
|
selectedPassportOption={selectedPassportOption}
|
|
setSelectedPassportOption={setSelectedPassportOption}
|
|
showDontHaveYetDialog={showDontHaveYetDialog}
|
|
/>
|
|
);
|
|
case 2:
|
|
return (
|
|
<Step2SupportingDocsSubStep2
|
|
setSubStep={setSubStep}
|
|
selectedOption={selectedOption}
|
|
setSelectedOption={setSelectedOption}
|
|
showPassportInfoDialog={showPassportInfoDialog}
|
|
showLostOrDamagedPassportDialog={showLostOrDamagedPassportDialog}
|
|
/>
|
|
);
|
|
case 3:
|
|
return <Step2SupportingDocsSubStep3 setSubStep={setSubStep} />;
|
|
case 4:
|
|
return <Step2SupportingDocsSubStep4 setSubStep={setSubStep} />;
|
|
case 5:
|
|
return <Step2SupportingDocsSubStep5 setSubStep={setSubStep} />;
|
|
case 6:
|
|
return (
|
|
<Step2SupportingDocsSubStep6
|
|
setSubStep={setSubStep}
|
|
selectedOption={selectedOption}
|
|
setSelectedOption={setSelectedOption}
|
|
/>
|
|
);
|
|
case 7:
|
|
return (
|
|
<Step2SupportingDocsSubStep7
|
|
setSubStep={setSubStep}
|
|
selectedOption={selectedOption}
|
|
setSelectedOption={setSelectedOption}
|
|
/>
|
|
);
|
|
case 8:
|
|
return <Step2SupportingDocsSubStep8 setSubStep={setSubStep} />;
|
|
case 9:
|
|
return (
|
|
<Step2SupportingDocsSubStep9
|
|
setSubStep={setSubStep}
|
|
selectedOption={selectedOption}
|
|
setSelectedOption={setSelectedOption}
|
|
/>
|
|
);
|
|
case 10:
|
|
return <Step2SupportingDocsSubStep10 setSubStep={setSubStep} />;
|
|
case 11:
|
|
return (
|
|
<Step2SupportingDocsSubStep11
|
|
setStep={setStep}
|
|
setSubStep={setSubStep}
|
|
selectedOption={selectedOption}
|
|
setSelectedOption={setSelectedOption}
|
|
/>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
if (step === 4) {
|
|
switch (subStep) {
|
|
case 1:
|
|
return (
|
|
<Step4DataConfirmationSubStep1
|
|
setStep={setStep}
|
|
setSubStep={setSubStep}
|
|
checkedOption={checkedOption}
|
|
setCheckedOption={setCheckedOption}
|
|
/>
|
|
);
|
|
case 2:
|
|
return (
|
|
<Step4DataConfirmationSubStep2
|
|
setStep={setStep}
|
|
setSubStep={setSubStep}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
switch (step) {
|
|
case 3:
|
|
return (
|
|
<Step3Payment
|
|
setStep={setStep}
|
|
setSubStep={setSubStep}
|
|
selectedPassportOption={selectedPassportOption}
|
|
/>
|
|
);
|
|
case 5:
|
|
return (
|
|
<Step5Verification
|
|
setStep={setStep}
|
|
setSubStep={setSubStep}
|
|
passportAppointmentData={passportAppointmentData}
|
|
/>
|
|
);
|
|
case 6:
|
|
return (
|
|
<Step6Processing
|
|
setStep={setStep}
|
|
arrivalDateGuidelines={arrivalDateGuidelinesData}
|
|
/>
|
|
);
|
|
case 7:
|
|
return <Step7Completion setStep={setStep} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const AppBar = ({onBackPress}: {onBackPress: () => void}) => (
|
|
<View style={styles.appBarContainer}>
|
|
<Icon
|
|
name="arrow-left"
|
|
size={24}
|
|
style={styles.appBarIcon}
|
|
color={Colors.neutral100.color}
|
|
onPress={onBackPress}
|
|
/>
|
|
<Text style={styles.appBarTitle}>Pengajuan Paspor Regular</Text>
|
|
</View>
|
|
);
|
|
|
|
const Questionnaire = ({
|
|
selectedOption,
|
|
setSelectedOption,
|
|
showDialog,
|
|
toggleApplicationStepsContent,
|
|
}: {
|
|
selectedOption: string;
|
|
setSelectedOption: React.Dispatch<React.SetStateAction<string>>;
|
|
showDialog: () => void;
|
|
toggleApplicationStepsContent: () => void;
|
|
}) => (
|
|
<>
|
|
<Text style={styles.questionnaireTitle}>Kuesioner Layanan Permohonan</Text>
|
|
<View style={styles.questionnaireOptionContainer}>
|
|
<Text style={styles.questionnaireData}>Untuk siapa paspor ini?</Text>
|
|
{passportForOptions.map(option => (
|
|
<RadioButtonOptionComponent
|
|
key={option.value}
|
|
label={option.label}
|
|
description={option.description}
|
|
value={option.value}
|
|
selectedValue={selectedOption}
|
|
onSelect={value => {
|
|
setSelectedOption(value);
|
|
value === 'child' ? showDialog() : toggleApplicationStepsContent();
|
|
}}
|
|
/>
|
|
))}
|
|
</View>
|
|
</>
|
|
);
|
|
|
|
function RegularPassportScreen() {
|
|
const navigation = useNavigation<RegularPassportScreenNavigationProp>();
|
|
|
|
// State management
|
|
const [selectedOption, setSelectedOption] = useState('');
|
|
const [selectedPassportOption, setSelectedPassportOption] = useState('');
|
|
const [checkedOption, setCheckedOption] = useState(false);
|
|
const [showApplicationStepsContent, setShowApplicationStepsContent] =
|
|
useState(false);
|
|
const [step, setStep] = useState(1);
|
|
const [subStep, setSubStep] = useState(1);
|
|
|
|
// Dialog visibility states
|
|
const [visible, setVisible] = useState(false);
|
|
const [visibleDontHaveYetDialog, setVisibleDontHaveYetDialog] =
|
|
useState(false);
|
|
const [visiblePassportInfoDialog, setVisiblePassportInfoDialog] =
|
|
useState(false);
|
|
const [
|
|
visibleLostOrDamagedPassportDialog,
|
|
setVisibleLostOrDamagedPassportDialog,
|
|
] = useState(false);
|
|
|
|
// Dialog visibility function
|
|
const showDialog = () => setVisible(true);
|
|
const hideDialog = () => setVisible(false);
|
|
|
|
const showDontHaveYetDialog = () => setVisibleDontHaveYetDialog(true);
|
|
const hideDontHaveYetDialog = () => setVisibleDontHaveYetDialog(false);
|
|
|
|
const showPassportInfoDialog = () => setVisiblePassportInfoDialog(true);
|
|
const hidePassportInfoDialog = () => setVisiblePassportInfoDialog(false);
|
|
|
|
const showVisibleLostOrDamagedPassportDialog = () =>
|
|
setVisibleLostOrDamagedPassportDialog(true);
|
|
const hideVisibleLostOrDamagedPassportDialog = () =>
|
|
setVisibleLostOrDamagedPassportDialog(false);
|
|
|
|
const completedSteps = [...Array(step - 1)].map((_, i) => i + 1);
|
|
|
|
const stepTitles: {[key: number]: string} = {
|
|
1: 'Informasi Pribadi',
|
|
2: 'Dokumen Pendukung',
|
|
3: 'Pembayaran',
|
|
4: 'Konfirmasi Data',
|
|
5: 'Verifikasi',
|
|
6: 'Pemrosesan',
|
|
7: 'Selesai',
|
|
};
|
|
|
|
// Back handler for showing/hiding steps content
|
|
useEffect(() => {
|
|
if (showApplicationStepsContent) {
|
|
const backAction = () => {
|
|
setShowApplicationStepsContent(false);
|
|
return true;
|
|
};
|
|
|
|
const backHandler = BackHandler.addEventListener(
|
|
'hardwareBackPress',
|
|
backAction,
|
|
);
|
|
|
|
return () => backHandler.remove();
|
|
}
|
|
}, [showApplicationStepsContent]);
|
|
|
|
// Render steps or questionnaire
|
|
const renderApplicationStepsContent = showApplicationStepsContent ? (
|
|
<>
|
|
<View style={styles.applicationStepsContainer}>
|
|
<Text style={styles.stepTitle}>{stepTitles[step]}</Text>
|
|
<StepIndicator
|
|
currentStep={step}
|
|
totalSteps={7}
|
|
completedSteps={completedSteps}
|
|
/>
|
|
<RenderApplicationStepsContent
|
|
step={step}
|
|
subStep={subStep}
|
|
setStep={setStep}
|
|
setSubStep={setSubStep}
|
|
selectedOption={selectedOption}
|
|
setSelectedOption={setSelectedOption}
|
|
selectedPassportOption={selectedPassportOption}
|
|
setSelectedPassportOption={setSelectedPassportOption}
|
|
checkedOption={checkedOption}
|
|
setCheckedOption={setCheckedOption}
|
|
showDontHaveYetDialog={showDontHaveYetDialog}
|
|
showPassportInfoDialog={showPassportInfoDialog}
|
|
showLostOrDamagedPassportDialog={
|
|
showVisibleLostOrDamagedPassportDialog
|
|
}
|
|
/>
|
|
</View>
|
|
|
|
{visibleDontHaveYetDialog && (
|
|
<DialogDontHaveYetPassport
|
|
visible={visibleDontHaveYetDialog}
|
|
onClose={hideDontHaveYetDialog}
|
|
onContinue={() => setSubStep(2)}
|
|
/>
|
|
)}
|
|
|
|
{visiblePassportInfoDialog && (
|
|
<DialogPassportInfo
|
|
visible={visiblePassportInfoDialog}
|
|
onClose={hidePassportInfoDialog}
|
|
/>
|
|
)}
|
|
|
|
{visibleLostOrDamagedPassportDialog && (
|
|
<DialogLostOrDamagedPassport
|
|
visible={visibleLostOrDamagedPassportDialog}
|
|
onBackToHome={() => {
|
|
navigation.goBack();
|
|
}}
|
|
onBackToFirstStep={() => {
|
|
setShowApplicationStepsContent(false);
|
|
setStep(1);
|
|
setSubStep(1);
|
|
hideVisibleLostOrDamagedPassportDialog();
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Questionnaire
|
|
selectedOption={selectedOption}
|
|
setSelectedOption={setSelectedOption}
|
|
showDialog={showDialog}
|
|
toggleApplicationStepsContent={() => setShowApplicationStepsContent(true)}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<PaperProvider>
|
|
<StatusBar
|
|
backgroundColor={
|
|
visible ||
|
|
visibleDontHaveYetDialog ||
|
|
visiblePassportInfoDialog ||
|
|
visibleLostOrDamagedPassportDialog
|
|
? '#295E70'
|
|
: Colors.secondary30.color
|
|
}
|
|
barStyle="light-content"
|
|
/>
|
|
<AppBar onBackPress={() => navigation.goBack()} />
|
|
{renderApplicationStepsContent}
|
|
<DialogApplicationPassport
|
|
visible={visible}
|
|
onClose={hideDialog}
|
|
onContinue={() => {
|
|
hideDialog();
|
|
setShowApplicationStepsContent(true);
|
|
}}
|
|
/>
|
|
</PaperProvider>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default RegularPassportScreen;
|