2110512052/M-Paspor-Redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalized all of the passport application flow feature except for step 6

Browse Source
This commit is contained in:
Mochammad Adhi Buchori
2025-04-25 17:27:12 +07:00
parent 2fa2b05918
commit ad67df1461
20 changed files with 1418 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/screens/regularPassport/index.tsx
View File

@ -1,12 +1,5 @@
import React, {useEffect, useState} from 'react';
import {
BackHandler,
Pressable,
ScrollView,
StatusBar,
Text,
View,
} from 'react-native';
import {BackHandler, StatusBar, Text, View} from 'react-native';
import styles from './styles';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useNavigation} from '@react-navigation/native';
@ -14,28 +7,19 @@ 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 {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';
@ -52,6 +36,13 @@ import Step2SupportingDocsSubStep8 from './steps/Step2SupportingDocs/Step2Suppor
import Step2SupportingDocsSubStep9 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep9';
import Step2SupportingDocsSubStep10 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep10';
import Step2SupportingDocsSubStep11 from './steps/Step2SupportingDocs/Step2SupportingDocsSubStep11';
import DialogCivilStatusDocumentsInfo from '../../components/dialog/DialogCivilStatusDocumentsInfo';
import DialogSubmitSuccess from '../../components/dialog/DialogSubmitSuccess';
import DialogFinalizationConfirmation from '../../components/dialog/DialogFinalizationConfirmation';
import DialogPassportConditionInfo from '../../components/dialog/DialogPassportConditionInfo';
import DialogPassportTypeInfo from '../../components/dialog/DialogPassportTypeInfo';
import SheetEditData from '../../components/sheet/SheetEditData';
import SheetSearchLocation from '../../components/sheet/SheetSearchLocation';
type RegularPassportScreenNavigationProp = NativeStackNavigationProp<
RootStackParamList,
@ -72,6 +63,13 @@ type RenderApplicationStepsContentProps = {
showDontHaveYetDialog: () => void;
showPassportInfoDialog: () => void;
showLostOrDamagedPassportDialog: () => void;
showCivilStatusDocumentsInfoDialog: () => void;
showSubmitSuccessDialog: () => void;
setLastCompletedSteps: () => void;
showFinalizationConfirmationDialog: () => void;
showPassportTypeInfoDialog: () => void;
showEditDataSheet: () => void;
showSearchLocationSheet: () => void;
};
const RenderApplicationStepsContent = (
@ -91,6 +89,13 @@ const RenderApplicationStepsContent = (
showDontHaveYetDialog,
showPassportInfoDialog,
showLostOrDamagedPassportDialog,
showCivilStatusDocumentsInfoDialog,
showSubmitSuccessDialog,
setLastCompletedSteps,
showFinalizationConfirmationDialog,
showPassportTypeInfoDialog,
showEditDataSheet,
showSearchLocationSheet,
} = props;
if (step === 1) {
@ -208,6 +213,9 @@ const RenderApplicationStepsContent = (
setStep={setStep}
setSubStep={setSubStep}
selectedPassportOption={selectedPassportOption}
showCivilStatusDocumentsInfoDialog={
showCivilStatusDocumentsInfoDialog
}
/>
);
case 5:
@ -216,17 +224,26 @@ const RenderApplicationStepsContent = (
setStep={setStep}
setSubStep={setSubStep}
passportAppointmentData={passportAppointmentData}
showEditDataSheet={showEditDataSheet}
/>
);
case 6:
return (
<Step6Processing
setStep={setStep}
arrivalDateGuidelines={arrivalDateGuidelinesData}
showFinalizationConfirmationDialog={
showFinalizationConfirmationDialog
}
showPassportTypeInfoDialog={showPassportTypeInfoDialog}
showSearchLocationSheet={showSearchLocationSheet}
/>
);
case 7:
return <Step7Completion setStep={setStep} />;
return (
<Step7Completion
showSubmitSuccessDialog={showSubmitSuccessDialog}
setLastCompletedSteps={setLastCompletedSteps}
/>
);
default:
return null;
}
@ -288,6 +305,9 @@ function RegularPassportScreen() {
useState(false);
const [step, setStep] = useState(1);
const [subStep, setSubStep] = useState(1);
const [completedSteps, setCompletedSteps] = useState<number[]>(
[...Array(step - 1)].map((_, i) => i + 1),
);
// Dialog visibility states
const [visible, setVisible] = useState(false);
@ -299,6 +319,23 @@ function RegularPassportScreen() {
visibleLostOrDamagedPassportDialog,
setVisibleLostOrDamagedPassportDialog,
] = useState(false);
const [
visibleCivilStatusDocumentsInfoDialog,
setVisibleCivilStatusDocumentsInfoDialog,
] = useState(false);
const [visibleSubmitSuccessDialog, setVisibleSubmitSuccessDialog] =
useState(false);
const [
visibleFinalizationConfirmationDialog,
setVisibleFinalizationConfirmationDialog,
] = useState(false);
const [visiblePassportTypeInfoDialog, setVisiblePassportTypeInfoDialog] =
useState(false);
// Sheet visibility states
const [visibleEditDataSheet, setVisibleEditDataSheet] = useState(false);
const [visibleSearchLocationSheet, setVisibleSearchLocationSheet] =
useState(false);
// Dialog visibility function
const showDialog = () => setVisible(true);
@ -310,12 +347,35 @@ function RegularPassportScreen() {
const showPassportInfoDialog = () => setVisiblePassportInfoDialog(true);
const hidePassportInfoDialog = () => setVisiblePassportInfoDialog(false);
const showVisibleLostOrDamagedPassportDialog = () =>
const showLostOrDamagedPassportDialog = () =>
setVisibleLostOrDamagedPassportDialog(true);
const hideVisibleLostOrDamagedPassportDialog = () =>
const hideLostOrDamagedPassportDialog = () =>
setVisibleLostOrDamagedPassportDialog(false);
const completedSteps = [...Array(step - 1)].map((_, i) => i + 1);
const showCivilStatusDocumentsInfoDialog = () =>
setVisibleCivilStatusDocumentsInfoDialog(true);
const hideCivilStatusDocumentsInfoDialog = () =>
setVisibleCivilStatusDocumentsInfoDialog(false);
const showSubmitSuccessDialog = () => setVisibleSubmitSuccessDialog(true);
const hideSubmitSuccessDialog = () => setVisibleSubmitSuccessDialog(false);
const showFinalizationConfirmationDialog = () =>
setVisibleFinalizationConfirmationDialog(true);
const hideFinalizationConfirmationDialog = () =>
setVisibleFinalizationConfirmationDialog(false);
const showPassportTypeInfoDialog = () =>
setVisiblePassportTypeInfoDialog(true);
const hidePassportTypeInfoDialog = () =>
setVisiblePassportTypeInfoDialog(false);
// Sheet visibility function
const showEditDataSheet = () => setVisibleEditDataSheet(true);
const hideEditDataSheet = () => setVisibleEditDataSheet(false);
const showSearchLocationSheet = () => setVisibleSearchLocationSheet(true);
const hideSearchLocationSheet = () => setVisibleSearchLocationSheet(false);
const stepTitles: {[key: number]: string} = {
1: 'Informasi Pribadi',
@ -344,6 +404,24 @@ function RegularPassportScreen() {
}
}, [showApplicationStepsContent]);
useEffect(() => {
if (step > 1) {
const updatedCompletedSteps = [...Array(step - 1)].map((_, i) => i + 1);
setCompletedSteps(updatedCompletedSteps);
} else {
setCompletedSteps([]);
}
}, [step]);
const setLastCompletedSteps = () => {
setCompletedSteps(prevCompletedSteps => {
if (!prevCompletedSteps.includes(7)) {
return [...prevCompletedSteps, 7];
}
return prevCompletedSteps;
});
};
// Render steps or questionnaire
const renderApplicationStepsContent = showApplicationStepsContent ? (
<>
@ -367,9 +445,18 @@ function RegularPassportScreen() {
setCheckedOption={setCheckedOption}
showDontHaveYetDialog={showDontHaveYetDialog}
showPassportInfoDialog={showPassportInfoDialog}
showLostOrDamagedPassportDialog={
showVisibleLostOrDamagedPassportDialog
showLostOrDamagedPassportDialog={showLostOrDamagedPassportDialog}
showCivilStatusDocumentsInfoDialog={
showCivilStatusDocumentsInfoDialog
}
showSubmitSuccessDialog={showSubmitSuccessDialog}
setLastCompletedSteps={setLastCompletedSteps}
showFinalizationConfirmationDialog={
showFinalizationConfirmationDialog
}
showPassportTypeInfoDialog={showPassportTypeInfoDialog}
showEditDataSheet={showEditDataSheet}
showSearchLocationSheet={showSearchLocationSheet}
/>
</View>
@ -382,7 +469,7 @@ function RegularPassportScreen() {
)}
{visiblePassportInfoDialog && (
<DialogPassportInfo
<DialogPassportConditionInfo
visible={visiblePassportInfoDialog}
onClose={hidePassportInfoDialog}
/>
@ -398,10 +485,63 @@ function RegularPassportScreen() {
setShowApplicationStepsContent(false);
setStep(1);
setSubStep(1);
hideVisibleLostOrDamagedPassportDialog();
hideLostOrDamagedPassportDialog();
}}
/>
)}
{visibleCivilStatusDocumentsInfoDialog && (
<DialogCivilStatusDocumentsInfo
visible={visibleCivilStatusDocumentsInfoDialog}
onClose={hideCivilStatusDocumentsInfoDialog}
/>
)}
{visibleSubmitSuccessDialog && (
<DialogSubmitSuccess
visible={visibleSubmitSuccessDialog}
onSubmitSuccess={() => {
navigation.goBack(), hideSubmitSuccessDialog();
}}
/>
)}
{visibleFinalizationConfirmationDialog && (
<DialogFinalizationConfirmation
visible={visibleFinalizationConfirmationDialog}
onClose={hideFinalizationConfirmationDialog}
onContinue={() => {
setStep(7);
hideFinalizationConfirmationDialog();
}}
/>
)}
{visiblePassportTypeInfoDialog && (
<DialogPassportTypeInfo
visible={visiblePassportTypeInfoDialog}
onClose={hidePassportTypeInfoDialog}
/>
)}
{visibleEditDataSheet && (
<SheetEditData
visible={visibleEditDataSheet}
onClose={hideEditDataSheet}
showCivilStatusDocumentsInfoDialog={() => {
hideEditDataSheet();
showCivilStatusDocumentsInfoDialog();
}}
selectedPassportOption={selectedPassportOption}
/>
)}
{visibleSearchLocationSheet && (
<SheetSearchLocation
visible={visibleSearchLocationSheet}
onClose={hideSearchLocationSheet}
/>
)}
</>
) : (
<Questionnaire
@ -420,8 +560,14 @@ function RegularPassportScreen() {
visible ||
visibleDontHaveYetDialog ||
visiblePassportInfoDialog ||
visibleLostOrDamagedPassportDialog
visibleLostOrDamagedPassportDialog ||
visibleCivilStatusDocumentsInfoDialog ||
visibleSubmitSuccessDialog ||
visibleFinalizationConfirmationDialog ||
visiblePassportTypeInfoDialog
? '#295E70'
: visibleEditDataSheet || visibleSearchLocationSheet
? '#185769'
: Colors.secondary30.color
}
barStyle="light-content"

23
src/screens/regularPassport/steps/Step3Payment/Step3Payment.tsx
View File

@ -16,12 +16,14 @@ interface DocumentUploadSectionProps {
title: string;
isRequired?: boolean;
isIcon?: boolean;
showDialogCivilStatusDocumentsInfo?: () => void;
}
interface Step3PaymentProps {
setStep: (step: number) => void;
setSubStep: (subStep: number) => void;
selectedPassportOption: string;
showCivilStatusDocumentsInfoDialog: () => void;
}
const BackButton = (props: BackButtonProps) => {
@ -43,7 +45,7 @@ const BackButton = (props: BackButtonProps) => {
};
const DocumentUploadSection = (props: DocumentUploadSectionProps) => {
const {title, isRequired, isIcon} = props;
const {title, isRequired, isIcon, showDialogCivilStatusDocumentsInfo} = props;
const [uploadedFileName, setUploadedFileName] = useState<string | null>(null);
const handleUpload = (p0: string) => {
@ -72,7 +74,13 @@ const DocumentUploadSection = (props: DocumentUploadSectionProps) => {
)}
</Text>
{isIcon && (
<Icon name="information" size={24} color={Colors.primary30.color} />
<Pressable
style={({pressed}) => ({
transform: [{scale: pressed ? 0.925 : 1}],
})}
onPress={showDialogCivilStatusDocumentsInfo}>
<Icon name="information" size={24} color={Colors.primary30.color} />
</Pressable>
)}
</View>
@ -125,8 +133,12 @@ const DocumentUploadSection = (props: DocumentUploadSectionProps) => {
};
const Step3Payment = (props: Step3PaymentProps) => {
const {setStep, setSubStep, selectedPassportOption} = props;
console.log('selectedPassportOption', selectedPassportOption);
const {
setStep,
setSubStep,
selectedPassportOption,
showCivilStatusDocumentsInfoDialog,
} = props;
return (
<ScrollView>
<View style={styles.subStepContainer}>
@ -228,6 +240,9 @@ const Step3Payment = (props: Step3PaymentProps) => {
<DocumentUploadSection
title="Akta kelahiran/ijazah/akta perkawinan/buku nikah/surat baptis"
isIcon
showDialogCivilStatusDocumentsInfo={
showCivilStatusDocumentsInfoDialog
}
/>
{selectedPassportOption !== 'already' && (
<DocumentUploadSection title="Paspor Lama" isRequired />

29
src/screens/regularPassport/steps/Step5Verification/Step5Verification.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import {View, Text} from 'react-native';
import {View, Text, Pressable} from 'react-native';
import {Button} from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Colors from '../../../../../assets/styles/Colors';
@ -9,13 +9,12 @@ type Step5VerificationProps = {
setStep: (step: number) => void;
setSubStep: (subStep: number) => void;
passportAppointmentData: any[];
showEditDataSheet: () => void;
};
const Step5Content = ({
setStep,
setSubStep,
passportAppointmentData,
}: Step5VerificationProps) => {
const Step5Content = (props: Step5VerificationProps) => {
const {setStep, setSubStep, passportAppointmentData, showEditDataSheet} =
props;
const lastAppointment =
passportAppointmentData[passportAppointmentData.length - 1];
@ -46,11 +45,19 @@ const Step5Content = ({
size={24}
color={Colors.indicatorRed.color}
/>
<Icon
name="square-edit-outline"
size={24}
color={Colors.primary30.color}
/>
<Pressable
onPress={showEditDataSheet}
style={({pressed}) => [
{
transform: [{scale: pressed ? 0.925 : 1}],
},
]}>
<Icon
name="square-edit-outline"
size={24}
color={Colors.primary30.color}
/>
</Pressable>
</View>
</View>
<View style={styles.applicantDetailContentChildContainer}>

24
src/screens/regularPassport/steps/Step6Processing/Step6Processing.tsx
View File

@ -5,16 +5,17 @@ import TextInputComponent from '../../../../components/TextInput';
import styles from '../styles';
import Colors from '../../../../../assets/styles/Colors';
import FontFamily from '../../../../../assets/styles/FontFamily';
import arrivalDateGuidelinesData from '../../../../data/Steps/ArrivalDateGuidelinesData';
type Step6ProcessingProps = {
setStep: (step: number) => void;
arrivalDateGuidelines: string[];
showFinalizationConfirmationDialog: () => void;
showPassportTypeInfoDialog: () => void;
showSearchLocationSheet: () => void;
};
const Step6Processing = ({
setStep,
arrivalDateGuidelines,
}: Step6ProcessingProps) => {
const Step6Processing = (props: Step6ProcessingProps) => {
const {showFinalizationConfirmationDialog, showPassportTypeInfoDialog, showSearchLocationSheet} =
props;
return (
<ScrollView>
<View style={styles.subStepContainer}>
@ -29,18 +30,21 @@ const Step6Processing = ({
</View>
<View style={[styles.subStepTextInputContainer, {marginVertical: 16}]}>
{/* Trigger Search Location Bottom Sheet */}
<TextInputComponent
title="Lokasi Kantor Imigrasi"
placeholder="Pilih lokasi kantor imigrasi"
isRequired
isDropdown
isDropdownSearchLocation
handlePressSearchLocation={showSearchLocationSheet}
/>
{/* TODO: Add button information */}
<TextInputComponent
title="Jenis Paspor"
iconButton
placeholder="Pilih satu jenis paspor"
isRequired
isDropdown
onIconButtonPress={showPassportTypeInfoDialog}
/>
</View>
@ -58,7 +62,7 @@ const Step6Processing = ({
</View>
<View>
{arrivalDateGuidelines.map((item, index) => (
{arrivalDateGuidelinesData.map((item, index) => (
<View key={index} style={styles.subStepListTextRowContainer}>
<Text style={[styles.subStepDesc, FontFamily.notoSansBold]}>
•
@ -88,7 +92,7 @@ const Step6Processing = ({
mode="contained"
style={[styles.subStepButtonContained, {marginTop: 24}]}
textColor={Colors.neutral100.color}
onPress={() => setStep(7)}>
onPress={showFinalizationConfirmationDialog}>
Lanjut
</Button>
</View>

11
src/screens/regularPassport/steps/Step7Completion/Step7Completion.tsx
View File

@ -9,10 +9,12 @@ import Accordion from '../../../../components/Accordion';
import termsAndConditionsData from '../../../../data/Steps/TermsAndContionsData';
type Step7CompletionProps = {
setStep: (step: number) => void;
showSubmitSuccessDialog: () => void;
setLastCompletedSteps: () => void;
};
const Step7Completion = ({setStep}: Step7CompletionProps) => {
const Step7Completion = (props: Step7CompletionProps) => {
const {showSubmitSuccessDialog, setLastCompletedSteps} = props;
const lastAppointment =
passportAppointmentData[passportAppointmentData.length - 1];
@ -192,7 +194,10 @@ const Step7Completion = ({setStep}: Step7CompletionProps) => {
mode="contained"
style={styles.subStepButtonContained}
textColor={Colors.neutral100.color}
onPress={() => setStep(6)}>
onPress={() => {
showSubmitSuccessDialog();
setLastCompletedSteps();
}}>
Kembali ke Halaman Utama
</Button>
</View>

1
src/screens/regularPassport/styles.tsx
View File

@ -71,6 +71,7 @@ const styles = StyleSheet.create({
fontSize: 14,
...FontFamily.notoSansRegular,
includeFontPadding: false,
lineHeight: 22,
color: Colors.primary30.color,
},
buttonAgree: {