From 2c0ea70fb3283b24cdfe867c9b9f0305db87cd61 Mon Sep 17 00:00:00 2001 From: Mochammad Adhi Buchori Date: Thu, 24 Apr 2025 17:07:15 +0700 Subject: [PATCH] Refactor the Passport Application flow by separating each step into its own component up to step 3, and complete the UI for step 7 --- src/components/dialog/DialogSubmitSuccess.tsx | 0 .../{CivilStatus.tsx => CivilStatusData.tsx} | 0 .../Options/DestinationCountryOptions.tsx | 9 + .../DestinationFamilyContactOptions.tsx | 9 + src/data/Options/DurationAbroadOptions.tsx | 29 + .../Options/HasHadPassportBeforeOptions.tsx | 15 + .../PassportApplicationPurposeOptions.tsx | 39 + src/data/Options/PassportForOptions.tsx | 14 + .../PreviousPassportConditionOptions.tsx | 34 + src/data/Steps/ArrivalDateGuidelinesData.tsx | 7 + src/data/Steps/TermsAndContionsData.tsx | 38 + src/screens/regularPassport/index.tsx | 1052 +++-------------- .../Step1PersonalInfoSubStep1.tsx | 0 .../Step1PersonalInfoSubStep2.tsx | 0 .../Step1PersonalInfoSubStep3.tsx | 0 .../Step2SupportingDocsSubStep1.tsx | 0 .../Step2SupportingDocsSubStep10.tsx | 0 .../Step2SupportingDocsSubStep11.tsx | 0 .../Step2SupportingDocsSubStep2.tsx | 0 .../Step2SupportingDocsSubStep3.tsx | 0 .../Step2SupportingDocsSubStep4.tsx | 0 .../Step2SupportingDocsSubStep5.tsx | 0 .../Step2SupportingDocsSubStep6.tsx | 0 .../Step2SupportingDocsSubStep7.tsx | 0 .../Step2SupportingDocsSubStep8.tsx | 0 .../Step2SupportingDocsSubStep9.tsx | 0 .../steps/Step3Payment/Step3Payment.tsx | 187 +++ .../Step4DataConfirmationSubStep1.tsx | 165 +++ .../Step4DataConfirmationSubStep2.tsx | 99 ++ .../Step5Verification/Step5Verification.tsx | 113 ++ .../steps/Step6Processing/Step6Processing.tsx | 99 ++ .../steps/Step7Completion/Step7Completion.tsx | 203 ++++ src/screens/regularPassport/steps/styles.tsx | 240 ++++ src/screens/regularPassport/styles.tsx | 8 + 34 files changed, 1504 insertions(+), 856 deletions(-) create mode 100644 src/components/dialog/DialogSubmitSuccess.tsx rename src/data/DropdownData/{CivilStatus.tsx => CivilStatusData.tsx} (100%) create mode 100644 src/data/Options/DestinationCountryOptions.tsx create mode 100644 src/data/Options/DestinationFamilyContactOptions.tsx create mode 100644 src/data/Options/DurationAbroadOptions.tsx create mode 100644 src/data/Options/HasHadPassportBeforeOptions.tsx create mode 100644 src/data/Options/PassportApplicationPurposeOptions.tsx create mode 100644 src/data/Options/PassportForOptions.tsx create mode 100644 src/data/Options/PreviousPassportConditionOptions.tsx create mode 100644 src/data/Steps/ArrivalDateGuidelinesData.tsx create mode 100644 src/data/Steps/TermsAndContionsData.tsx create mode 100644 src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep1.tsx create mode 100644 src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep2.tsx create mode 100644 src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep3.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep1.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep10.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep11.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep2.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep3.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep4.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep5.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep6.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep7.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep8.tsx create mode 100644 src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep9.tsx create mode 100644 src/screens/regularPassport/steps/Step3Payment/Step3Payment.tsx create mode 100644 src/screens/regularPassport/steps/Step4DataConfirmation/Step4DataConfirmationSubStep1.tsx create mode 100644 src/screens/regularPassport/steps/Step4DataConfirmation/Step4DataConfirmationSubStep2.tsx create mode 100644 src/screens/regularPassport/steps/Step5Verification/Step5Verification.tsx create mode 100644 src/screens/regularPassport/steps/Step6Processing/Step6Processing.tsx create mode 100644 src/screens/regularPassport/steps/Step7Completion/Step7Completion.tsx create mode 100644 src/screens/regularPassport/steps/styles.tsx diff --git a/src/components/dialog/DialogSubmitSuccess.tsx b/src/components/dialog/DialogSubmitSuccess.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/data/DropdownData/CivilStatus.tsx b/src/data/DropdownData/CivilStatusData.tsx similarity index 100% rename from src/data/DropdownData/CivilStatus.tsx rename to src/data/DropdownData/CivilStatusData.tsx diff --git a/src/data/Options/DestinationCountryOptions.tsx b/src/data/Options/DestinationCountryOptions.tsx new file mode 100644 index 0000000..537422d --- /dev/null +++ b/src/data/Options/DestinationCountryOptions.tsx @@ -0,0 +1,9 @@ +const destinationCountryOptions = [ + { + label: 'Saya belum memiliki negara tujuan', + description: 'null', + value: 'destination_country_not_set', + }, +]; + +export default destinationCountryOptions; diff --git a/src/data/Options/DestinationFamilyContactOptions.tsx b/src/data/Options/DestinationFamilyContactOptions.tsx new file mode 100644 index 0000000..011c8cc --- /dev/null +++ b/src/data/Options/DestinationFamilyContactOptions.tsx @@ -0,0 +1,9 @@ +const destinationFamilyContactOptions = [ + { + label: 'Saya tidak memiliki keluarga/kerabat di negara tujuan', + description: 'null', + value: 'no_family_in_destination_country', + }, +]; + +export default destinationFamilyContactOptions; diff --git a/src/data/Options/DurationAbroadOptions.tsx b/src/data/Options/DurationAbroadOptions.tsx new file mode 100644 index 0000000..d33fbd6 --- /dev/null +++ b/src/data/Options/DurationAbroadOptions.tsx @@ -0,0 +1,29 @@ +const durationAbroadOptions = [ + { + label: '< 1 Bulan', + description: 'null', + value: 'less_than_1_month', + }, + { + label: '< 6 Bulan', + description: 'null', + value: 'less_than_6_months', + }, + { + label: '< 1 Tahun', + description: 'null', + value: 'less_than_1_year', + }, + { + label: '< 5 Tahun', + description: 'null', + value: 'less_than_5_years', + }, + { + label: '> 5 Tahun', + description: 'null', + value: 'more_than_5_years', + }, +]; + +export default durationAbroadOptions; diff --git a/src/data/Options/HasHadPassportBeforeOptions.tsx b/src/data/Options/HasHadPassportBeforeOptions.tsx new file mode 100644 index 0000000..01f3daa --- /dev/null +++ b/src/data/Options/HasHadPassportBeforeOptions.tsx @@ -0,0 +1,15 @@ +const hasHadPassportBeforeOptions = [ + { + label: 'Belum', + description: + 'Belum pernah memiliki paspor atau belum pernah mengajukan permohonan paspor', + value: 'not_yet', + }, + { + label: 'Sudah', + description: '', + value: 'already', + }, +]; + +export default hasHadPassportBeforeOptions; diff --git a/src/data/Options/PassportApplicationPurposeOptions.tsx b/src/data/Options/PassportApplicationPurposeOptions.tsx new file mode 100644 index 0000000..ed17856 --- /dev/null +++ b/src/data/Options/PassportApplicationPurposeOptions.tsx @@ -0,0 +1,39 @@ +const passportApplicationPurposeOptions = [ + { + label: 'Wisata', + description: 'null', + value: 'tourism', + }, + { + label: 'Umroh', + description: 'null', + value: 'umrah', + }, + { + label: 'Haji', + description: 'null', + value: 'hajj', + }, + { + label: 'Bekerja Formal', + description: 'null', + value: 'formal_work', + }, + { + label: 'Pekerja Imigran Indonesia (PMI)', + description: 'null', + value: 'indonesian_migrant_worker', + }, + { + label: 'Belajar', + description: 'null', + value: 'study', + }, + { + label: 'Berobat', + description: 'null', + value: 'medical', + }, +]; + +export default passportApplicationPurposeOptions; diff --git a/src/data/Options/PassportForOptions.tsx b/src/data/Options/PassportForOptions.tsx new file mode 100644 index 0000000..246cbfd --- /dev/null +++ b/src/data/Options/PassportForOptions.tsx @@ -0,0 +1,14 @@ +const passportForOptions = [ + { + label: 'Dewasa', + description: 'WNI berusia di atas 17 tahun atau sudah menikah', + value: 'adult', + }, + { + label: 'Anak', + description: 'WNI berusia di bawah 17 tahun dan belum menikah', + value: 'child', + }, +]; + +export default passportForOptions; diff --git a/src/data/Options/PreviousPassportConditionOptions.tsx b/src/data/Options/PreviousPassportConditionOptions.tsx new file mode 100644 index 0000000..c3b7453 --- /dev/null +++ b/src/data/Options/PreviousPassportConditionOptions.tsx @@ -0,0 +1,34 @@ +const previousPassportConditionOptions = [ + { + label: 'Habis masa berlaku', + description: 'null', + value: 'expired', + }, + { + label: 'Penuh/Halaman Penuh', + description: 'null', + value: 'full_pages', + }, + { + label: 'Hilang', + description: 'null', + value: 'lost', + }, + { + label: 'Rusak', + description: 'null', + value: 'damaged', + }, + { + label: 'Hilang karena keadaan kahar', + description: 'null', + value: 'lost_due_to_force_majeure', + }, + { + label: 'Rusak karena keadaan kahar', + description: 'null', + value: 'damaged_due_to_force_majeure', + }, +]; + +export default previousPassportConditionOptions; diff --git a/src/data/Steps/ArrivalDateGuidelinesData.tsx b/src/data/Steps/ArrivalDateGuidelinesData.tsx new file mode 100644 index 0000000..48e9290 --- /dev/null +++ b/src/data/Steps/ArrivalDateGuidelinesData.tsx @@ -0,0 +1,7 @@ +const arrivalDateGuidelinesData = [ + 'Pastikan kehadiran Anda pada tanggal yang dipilih', + 'Anda dapat melakukan ubah jadwal sebanyak 1 kali paling lambat 1 hari sebelum tanggal kedatangan', + 'Apabila Anda tidak hadir pada tanggal kedatangan dan tidak melakukan ubah jadwal, permohonan Anda dinyatakan batal dan pembayaran tidak dapat dikembalikan', +]; + +export default arrivalDateGuidelinesData; diff --git a/src/data/Steps/TermsAndContionsData.tsx b/src/data/Steps/TermsAndContionsData.tsx new file mode 100644 index 0000000..9edec03 --- /dev/null +++ b/src/data/Steps/TermsAndContionsData.tsx @@ -0,0 +1,38 @@ +const termsAndConditionsData = [ + { + id: 1, + text: 'Pemohon wajib hadir 15 menit sebelum jam kedatangan dimulai;', + }, + { + id: 2, + text: 'Membawa dokumen persyaratan permohonan paspor asli sesuai tujuan permohonan paspor;', + }, + { + id: 3, + text: 'Permohonan penggantian paspor wajib membawa paspor lama;', + }, + { + id: 4, + text: 'Apabila anda tidak hadir sesuai jadwal kedatangan dan tidak melakukan ubah jadwal, maka permohonan paspor anda dibatalkan dan harus melakukan pendaftaran ulang', + }, + { + id: 5, + text: 'Permohonan paspor dapat ditolak dalam hal:', + subItems: [ + 'Termasuk dalam daftar pencegahan dan penangkalan;', + 'Terindikasi Pekerja Migran Indonesia (PMI) Non Prosedural;', + 'Memberikan data tidak sah dan/atau keterangan tidak benar;', + 'Hal lain yang dianggap oleh petugas akan dipergunakan untuk tujuan melawan hukum;', + ], + }, + { + id: 6, + text: 'Apabila terdapat kesalahan dari pihak pemohon paspor sebagaimana ketentuan di atas, pembayaran yang telah disetorkan pada Kas Negara tidak dapat dikembalikan;', + }, + { + id: 7, + text: 'Dengan membaca dan menyetujui persyaratan dan ketentuan ini, pemohon telah siap dan mematuhi segala konsekuensi yang berakibat secara hukum.', + }, +]; + +export default termsAndConditionsData; diff --git a/src/screens/regularPassport/index.tsx b/src/screens/regularPassport/index.tsx index d5e43db..681799e 100644 --- a/src/screens/regularPassport/index.tsx +++ b/src/screens/regularPassport/index.tsx @@ -14,11 +14,10 @@ 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, Checkbox, PaperProvider} from 'react-native-paper'; +import {Button, PaperProvider} from 'react-native-paper'; import StepIndicator from '../../components/StepIndicator'; import TextInputComponent from '../../components/TextInput'; import genderData from '../../data/DropdownData/GenderData'; -import civilStatusData from '../../data/DropdownData/CivilStatus'; import DialogApplicationPassport from '../../components/dialog/DialogApplicationPassport'; import DialogDontHaveYetPassport from '../../components/dialog/DialogDontHaveYetPassport'; import DialogPassportInfo from '../../components/dialog/DialogPassportInfo'; @@ -26,174 +25,62 @@ import DialogLostOrDamagedPassport from '../../components/dialog/DialogLostOrDam import destinationCountryData from '../../data/DropdownData/DestinationCountryData'; import familyRelationshipData from '../../data/DropdownData/FamilyRelationshipData'; import FontFamily from '../../../assets/styles/FontFamily'; -import provinceData from '../../data/DropdownData/ProvinceData'; -import cityData from '../../data/DropdownData/CityData'; -import districtData from '../../data/DropdownData/DistrictData'; -import postalCodeData from '../../data/DropdownData/PostalCodeData'; 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 civilStatusData from '../../data/DropdownData/CivilStatusData'; +import arrivalDateGuidelinesData from '../../data/Steps/ArrivalDateGuidelinesData'; + +// Options Data +import passportForOptions from '../../data/Options/PassportForOptions'; +import hasHadPassportBeforeOptions from '../../data/Options/HasHadPassportBeforeOptions'; +import previousPassportConditionOptions from '../../data/Options/PreviousPassportConditionOptions'; +import passportApplicationPurposeOptions from '../../data/Options/PassportApplicationPurposeOptions'; +import destinationCountryOptions from '../../data/Options/destinationCountryOptions'; +import durationAbroadOptions from '../../data/Options/DurationAbroadOptions'; +import destinationFamilyContactOptions from '../../data/Options/DestinationFamilyContactOptions'; +import Step4DataConfirmationSubStep2 from './steps/Step4DataConfirmation/Step4DataConfirmationSubStep2'; +import Step4DataConfirmationSubStep1 from './steps/Step4DataConfirmation/Step4DataConfirmationSubStep1'; type RegularPassportScreenNavigationProp = NativeStackNavigationProp< RootStackParamList, 'RegularPassport' >; -const options = [ - { - label: 'Dewasa', - description: 'WNI berusia di atas 17 tahun atau sudah menikah', - value: 'adult', - }, - { - label: 'Anak', - description: 'WNI berusia di bawah 17 tahun dan belum menikah', - value: 'child', - }, -]; +type RenderApplicationStepsContentProps = { + step: number; + subStep: number; + setStep: (step: number) => void; + setSubStep: (subStep: number) => void; + selectedOption: string; + setSelectedOption: (val: string) => void; + checkedOption: boolean; + setCheckedOption: React.Dispatch>; + showDontHaveYetDialog: () => void; + showPassportInfoDialog: () => void; + showLostOrDamagedPassportDialog: () => void; +}; -const hasHadPassportBeforeOptions = [ - { - label: 'Belum', - description: - 'Belum pernah memiliki paspor atau belum pernah mengajukan permohonan paspor', - value: 'not_yet', - }, - { - label: 'Sudah', - description: '', - value: 'already', - }, -]; - -const previousPassportConditionOptions = [ - { - label: 'Habis masa berlaku', - description: 'null', - value: 'expired', - }, - { - label: 'Penuh/Halaman Penuh', - description: 'null', - value: 'full_pages', - }, - { - label: 'Hilang', - description: 'null', - value: 'lost', - }, - { - label: 'Rusak', - description: 'null', - value: 'damaged', - }, - { - label: 'Hilang karena keadaan kahar', - description: 'null', - value: 'lost_due_to_force_majeure', - }, - { - label: 'Rusak karena keadaan kahar', - description: 'null', - value: 'damaged_due_to_force_majeure', - }, -]; - -const passportApplicationPurposeOptions = [ - { - label: 'Wisata', - description: 'null', - value: 'tourism', - }, - { - label: 'Umroh', - description: 'null', - value: 'umrah', - }, - { - label: 'Haji', - description: 'null', - value: 'hajj', - }, - { - label: 'Bekerja Formal', - description: 'null', - value: 'formal_work', - }, - { - label: 'Pekerja Imigran Indonesia (PMI)', - description: 'null', - value: 'indonesian_migrant_worker', - }, - { - label: 'Belajar', - description: 'null', - value: 'study', - }, - { - label: 'Berobat', - description: 'null', - value: 'medical', - }, -]; - -const destinationCountryOptions = [ - { - label: 'Saya belum memiliki negara tujuan', - description: 'null', - value: 'destination_country_not_set', - }, -]; - -const durationAbroadOptions = [ - { - label: '< 1 Bulan', - description: 'null', - value: 'less_than_1_month', - }, - { - label: '< 6 Bulan', - description: 'null', - value: 'less_than_6_months', - }, - { - label: '< 1 Tahun', - description: 'null', - value: 'less_than_1_year', - }, - { - label: '< 5 Tahun', - description: 'null', - value: 'less_than_5_years', - }, - { - label: '> 5 Tahun', - description: 'null', - value: 'more_than_5_years', - }, -]; - -const familyContactNumberInDestinationCountryOptions = [ - { - label: 'Saya tidak memiliki keluarga/kerabat di negara tujuan', - description: 'null', - value: 'no_family_in_destination_country', - }, -]; - -const renderApplicationStepsContent = ( - step: number, - subStep: number, - setStep: (step: number) => void, - setSubStep: (step: number) => void, - selectedOption: string, - setSelectedOption: (val: string) => void, - checkedOption: boolean, - setCheckedOption: React.Dispatch>, - showDontHaveYetDialog: () => void, - showPassportInfoDialog: () => void, - showLostOrDamagedPassportDialog: () => void, +const RenderApplicationStepsContent = ( + props: RenderApplicationStepsContentProps, ) => { - const lastAppointment = - passportAppointmentData[passportAppointmentData.length - 1]; + const { + step, + subStep, + setStep, + setSubStep, + selectedOption, + setSelectedOption, + checkedOption, + setCheckedOption, + showDontHaveYetDialog, + showPassportInfoDialog, + showLostOrDamagedPassportDialog, + } = props; if (step === 1) { switch (subStep) { @@ -880,7 +767,7 @@ const renderApplicationStepsContent = ( isDropdown dropdownItemData={familyRelationshipData} /> - {familyContactNumberInDestinationCountryOptions.map(options => ( + {destinationFamilyContactOptions.map(options => ( - - { - setStep(3); - }} - style={({pressed}) => [ - styles.subStepButtonBackWrapper, - { - transform: [{scale: pressed ? 0.99 : 1}], - marginBottom: 8, - }, - ]}> - - Kembali - - - Data di bawah ini harus sesuai dengan keterangan pada KTP - pemohon. Data yang bertanda ( - *) wajib - diisi. - - - - Alamat sesuai KTP - - - - - - - - - - - - Alamat Sekarang (Domisili) - - - setCheckedOption(prev => !prev)} - /> - - Alamat sekarang sesuai KTP - - - - - - - - - - - + ); case 2: return ( - - - { - setStep(4); - setSubStep(1); - }} - style={({pressed}) => [ - styles.subStepButtonBackWrapper, - { - transform: [{scale: pressed ? 0.99 : 1}], - marginBottom: 8, - }, - ]}> - - Kembali - - - Data di bawah ini harus sesuai dengan keterangan pada KTP - pemohon. Data yang bertanda ( - *) wajib - diisi. - - - - Keterangan Pemohon - - - - - - - Keterangan Ibu Pemohon - - - - - - - - Keterangan Ayah Pemohon (Opsional) - - - - - - - - Keterangan Pasangan Pemohon (Opsional) - - - - - - - - + ); } } switch (step) { case 3: - return ( - - - { - setStep(2); - setSubStep(11); - }} - style={({pressed}) => [ - styles.subStepButtonBackWrapper, - { - transform: [{scale: pressed ? 0.99 : 1}], - marginBottom: 8, - }, - ]}> - - Kembali - - - - Layanan yang cocok untuk Anda adalah{' '} - - Paspor Penggantian - - . Silakan unggah kelengkapan dokumen berikut. - - - - - • - - - Unggah dokumen hanya bisa berbentuk JPG.{' '} - - - - - • - - - Data yang bertanda ( - *) - wajib diisi. - - - - - - - - - - - - - - - - - - - - e-KTP{' '} - * - - - - - - - - - Kartu Keluarga - - - - - - - - - - Akta kelahiran/ijazah/akta perkawinan/buku nikah/surat - baptis - - - - - - - - - - - Paspor Lama{' '} - * - - - - - - - - - - - ); + return ; case 5: return ( - - - Data pemohon berikut tidak akan terhapus dan sudah tersimpan di - beranda. Silakan lanjut untuk memilih jenis paspor, lokasi dan - jadwal pengambilan, serta pembayaran. - - - - - - Pemohon - - - {lastAppointment.applicantName} - - - - - - - - - - NIK - - {lastAppointment.applicationDetails.nationalIdNumber} - - - - - Jenis Kelamin - - - {lastAppointment.applicationDetails.gender} - - - - - Jenis Permohonan - - - {lastAppointment.applicationDetails.applicationType} - - - - - Alasan Penggantian - - - {lastAppointment.applicationDetails.replacementReason} - - - - - Tujuan Permohonan - - - {lastAppointment.applicationDetails.applicationPurpose} - - - - - Jenis Paspor - - - {lastAppointment.applicationDetails.passportType} - - - - - - - - - + ); case 6: return ( - - - - + ); case 7: - return ( - - - - ); + return ; default: return null; } }; +const AppBar = ({onBackPress}: {onBackPress: () => void}) => ( + + + Pengajuan Paspor Regular + +); + +const Questionnaire = ({ + selectedOption, + setSelectedOption, + showDialog, + toggleApplicationStepsContent, +}: { + selectedOption: string; + setSelectedOption: React.Dispatch>; + showDialog: () => void; + toggleApplicationStepsContent: () => void; +}) => ( + <> + Kuesioner Layanan Permohonan + + Untuk siapa paspor ini? + {passportForOptions.map(option => ( + { + setSelectedOption(value); + value === 'child' ? showDialog() : toggleApplicationStepsContent(); + }} + /> + ))} + + +); + function RegularPassportScreen() { const navigation = useNavigation(); + + // State management const [selectedOption, setSelectedOption] = 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); @@ -1551,6 +909,7 @@ function RegularPassportScreen() { setVisibleLostOrDamagedPassportDialog, ] = useState(false); + // Dialog visibility function const showDialog = () => setVisible(true); const hideDialog = () => setVisible(false); @@ -1577,6 +936,7 @@ function RegularPassportScreen() { 7: 'Selesai', }; + // Back handler for showing/hiding steps content useEffect(() => { if (showApplicationStepsContent) { const backAction = () => { @@ -1593,6 +953,72 @@ function RegularPassportScreen() { } }, [showApplicationStepsContent]); + // Render steps or questionnaire + const renderApplicationStepsContent = showApplicationStepsContent ? ( + <> + + {stepTitles[step]} + + + + + {visibleDontHaveYetDialog && ( + setSubStep(2)} + /> + )} + + {visiblePassportInfoDialog && ( + + )} + + {visibleLostOrDamagedPassportDialog && ( + { + navigation.goBack(); + }} + onBackToFirstStep={() => { + setShowApplicationStepsContent(false); + setStep(1); + setSubStep(1); + hideVisibleLostOrDamagedPassportDialog(); + }} + /> + )} + + ) : ( + setShowApplicationStepsContent(true)} + /> + ); + return ( @@ -1607,102 +1033,16 @@ function RegularPassportScreen() { } barStyle="light-content" /> - - navigation.goBack()} - /> - Pengajuan Paspor Regular - - {showApplicationStepsContent ? ( - <> - - {stepTitles[step]} - - {renderApplicationStepsContent( - step, - subStep, - setStep, - setSubStep, - selectedOption, - setSelectedOption, - checkedOption, - setCheckedOption, - showDontHaveYetDialog, - showPassportInfoDialog, - showVisibleLostOrDamagedPassportDialog, - )} - - {visibleDontHaveYetDialog && ( - setSubStep(2)} - /> - )} - {visiblePassportInfoDialog && ( - - )} - {visibleLostOrDamagedPassportDialog && ( - { - navigation.goBack(); - }} - onBackToFirstStep={() => { - setShowApplicationStepsContent(false); - setStep(1); - setSubStep(1); - hideVisibleLostOrDamagedPassportDialog(); - }} - /> - )} - - ) : ( - <> - - Kuesioner Layanan Permohonan - - - - Untuk siapa paspor ini? - - {options.map(option => ( - { - setSelectedOption(value); - value === 'child' - ? showDialog() - : setShowApplicationStepsContent(true); - }} - /> - ))} - - { - hideDialog(); - setShowApplicationStepsContent(true); - }} - /> - - )} + navigation.goBack()} /> + {renderApplicationStepsContent} + { + hideDialog(); + setShowApplicationStepsContent(true); + }} + /> ); diff --git a/src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep1.tsx b/src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep1.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep2.tsx b/src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep2.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep3.tsx b/src/screens/regularPassport/steps/Step1PersonalInfo/Step1PersonalInfoSubStep3.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep1.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep1.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep10.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep10.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep11.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep11.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep2.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep2.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep3.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep3.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep4.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep4.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep5.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep5.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep6.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep6.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep7.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep7.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep8.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep8.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep9.tsx b/src/screens/regularPassport/steps/Step2SupportingDocs/Step2SupportingDocsSubStep9.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/regularPassport/steps/Step3Payment/Step3Payment.tsx b/src/screens/regularPassport/steps/Step3Payment/Step3Payment.tsx new file mode 100644 index 0000000..16f2c22 --- /dev/null +++ b/src/screens/regularPassport/steps/Step3Payment/Step3Payment.tsx @@ -0,0 +1,187 @@ +import React from 'react'; +import {ScrollView, View, Text, Pressable} from 'react-native'; +import styles from '../styles'; +import Colors from '../../../../../assets/styles/Colors'; +import FontFamily from '../../../../../assets/styles/FontFamily'; +import genderData from '../../../../data/DropdownData/GenderData'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import {Button} from 'react-native-paper'; +import TextInputComponent from '../../../../components/TextInput'; + +interface BackButtonProps { + onPress: () => void; +} + +interface DocumentUploadSectionProps { + title: string; + isRequired?: boolean; +} + +interface Step3PaymentProps { + setStep: (step: number) => void; + setSubStep: (subStep: number) => void; +} + +const BackButton = (props: BackButtonProps) => { + const {onPress} = props; + return ( + [ + styles.subStepButtonBackWrapper, + { + transform: [{scale: pressed ? 0.99 : 1}], + marginBottom: 8, + }, + ]}> + + Kembali + + ); +}; + +const DocumentUploadSection = (props: DocumentUploadSectionProps) => { + const {title, isRequired = false} = props; + return ( + + + {title}{' '} + {isRequired && ( + * + )} + + + + + + + ); +}; + +const Step3Payment = (props: Step3PaymentProps) => { + const {setStep, setSubStep} = props; + return ( + + + { + setStep(2); + setSubStep(11); + }} + /> + + + + Layanan yang cocok untuk Anda adalah{' '} + Paspor Penggantian + . Silakan unggah kelengkapan dokumen berikut. + + + + + • + + + Unggah dokumen hanya bisa berbentuk JPG. + + + + + • + + + Data yang bertanda ( + *) wajib + diisi. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Step3Payment; diff --git a/src/screens/regularPassport/steps/Step4DataConfirmation/Step4DataConfirmationSubStep1.tsx b/src/screens/regularPassport/steps/Step4DataConfirmation/Step4DataConfirmationSubStep1.tsx new file mode 100644 index 0000000..f12b598 --- /dev/null +++ b/src/screens/regularPassport/steps/Step4DataConfirmation/Step4DataConfirmationSubStep1.tsx @@ -0,0 +1,165 @@ +import React from 'react'; +import {ScrollView, View, Pressable, Text} from 'react-native'; +import {Checkbox, Button} from 'react-native-paper'; +import Icon from 'react-native-vector-icons/MaterialIcons'; +import Colors from '../../../../../assets/styles/Colors'; +import styles from '../styles'; +import TextInputComponent from '../../../../components/TextInput'; +import postalCodeData from '../../../../data/DropdownData/PostalCodeData'; +import districtData from '../../../../data/DropdownData/DistrictData'; +import cityData from '../../../../data/DropdownData/CityData'; +import provinceData from '../../../../data/DropdownData/ProvinceData'; + +type Step4DataConfirmationSubStep1Props = { + setStep: (step: number) => void; + setSubStep: (subStep: number) => void; + checkedOption: boolean; + setCheckedOption: React.Dispatch>; +}; + +const Step4DataConfirmationSubStep1: React.FC< + Step4DataConfirmationSubStep1Props +> = ({setStep, setSubStep, checkedOption, setCheckedOption}) => { + return ( + + + { + setStep(3); + }} + style={({pressed}) => [ + styles.subStepButtonBackWrapper, + {transform: [{scale: pressed ? 0.99 : 1}], marginBottom: 8}, + ]}> + + Kembali + + + + Data di bawah ini harus sesuai dengan keterangan pada KTP pemohon. + Data yang bertanda ( + *) wajib + diisi. + + + + + Alamat sesuai KTP + + + + + + + + + + + + + Alamat Sekarang (Domisili) + + + setCheckedOption(prev => !prev)} + /> + Alamat sekarang sesuai KTP + + + + + + + + + + + + ); +}; + +export default Step4DataConfirmationSubStep1; diff --git a/src/screens/regularPassport/steps/Step4DataConfirmation/Step4DataConfirmationSubStep2.tsx b/src/screens/regularPassport/steps/Step4DataConfirmation/Step4DataConfirmationSubStep2.tsx new file mode 100644 index 0000000..b256c64 --- /dev/null +++ b/src/screens/regularPassport/steps/Step4DataConfirmation/Step4DataConfirmationSubStep2.tsx @@ -0,0 +1,99 @@ +import React from 'react'; +import { ScrollView, View, Text, Pressable } from 'react-native'; +import Icon from 'react-native-vector-icons/MaterialIcons'; +import styles from '../styles'; +import TextInputComponent from '../../../../components/TextInput'; +import { Button } from 'react-native-paper'; +import Colors from '../../../../../assets/styles/Colors'; + +const Step4DataConfirmationSubStep2 = ({ + setStep, + setSubStep, +}: { + setStep: (step: number) => void; + setSubStep: (subStep: number) => void; +}) => { + return ( + + + { + setStep(4); + setSubStep(1); + }} + style={({ pressed }) => [ + styles.subStepButtonBackWrapper, + { + transform: [{ scale: pressed ? 0.99 : 1 }], + marginBottom: 8, + }, + ]} + > + + Kembali + + + Data di bawah ini harus sesuai dengan keterangan pada KTP pemohon. Data yang bertanda ( + *) wajib diisi. + + + + Keterangan Pemohon + + + + + + Keterangan Ibu Pemohon + + + + + + + Keterangan Ayah Pemohon (Opsional) + + + + + + + Keterangan Pasangan Pemohon (Opsional) + + + + + + + + + ); +}; + +export default Step4DataConfirmationSubStep2; diff --git a/src/screens/regularPassport/steps/Step5Verification/Step5Verification.tsx b/src/screens/regularPassport/steps/Step5Verification/Step5Verification.tsx new file mode 100644 index 0000000..4f08ec3 --- /dev/null +++ b/src/screens/regularPassport/steps/Step5Verification/Step5Verification.tsx @@ -0,0 +1,113 @@ +import React from 'react'; +import {View, Text} from 'react-native'; +import {Button} from 'react-native-paper'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import Colors from '../../../../../assets/styles/Colors'; +import styles from '../styles'; + +type Step5VerificationProps = { + setStep: (step: number) => void; + setSubStep: (subStep: number) => void; + passportAppointmentData: any[]; +}; + +const Step5Content = ({ + setStep, + setSubStep, + passportAppointmentData, +}: Step5VerificationProps) => { + const lastAppointment = + passportAppointmentData[passportAppointmentData.length - 1]; + + return ( + + + Data pemohon berikut tidak akan terhapus dan sudah tersimpan di beranda. + Silakan lanjut untuk memilih jenis paspor, lokasi dan jadwal + pengambilan, serta pembayaran. + + + + + + Pemohon + + + {lastAppointment.applicantName} + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const DetailRow = ({label, value}: {label: string; value: string}) => ( + + {label} + {value} + +); + +export default Step5Content; diff --git a/src/screens/regularPassport/steps/Step6Processing/Step6Processing.tsx b/src/screens/regularPassport/steps/Step6Processing/Step6Processing.tsx new file mode 100644 index 0000000..efb7f1b --- /dev/null +++ b/src/screens/regularPassport/steps/Step6Processing/Step6Processing.tsx @@ -0,0 +1,99 @@ +import React from 'react'; +import {ScrollView, View, Text} from 'react-native'; +import {Button, Divider} from 'react-native-paper'; +import TextInputComponent from '../../../../components/TextInput'; +import styles from '../styles'; +import Colors from '../../../../../assets/styles/Colors'; +import FontFamily from '../../../../../assets/styles/FontFamily'; + +type Step6ProcessingProps = { + setStep: (step: number) => void; + arrivalDateGuidelines: string[]; +}; + +const Step6Processing = ({ + setStep, + arrivalDateGuidelines, +}: Step6ProcessingProps) => { + return ( + + + + + Pilih Lokasi Pengambilan dan Jenis Paspor + + + Anda dapat membuat paspor di kantor imigrasi manapun di seluruh + Indonesia. Silakan pilih lokasi permohonan paspor. + + + + + + {/* TODO: Add button information */} + + + + + + + + + Pilih Tanggal dan Waktu Kedatangan + + + Setiap lokasi kantor imigrasi memiliki ketersediaan kuota yang + berbeda. Silakan pilih tanggal dan waktu kedatangan. + + + + + {arrivalDateGuidelines.map((item, index) => ( + + + • + + + {item} + + + ))} + + + + {/* TODO: Add calendar functionality here. */} + + + + + + ); +}; + +export default Step6Processing; diff --git a/src/screens/regularPassport/steps/Step7Completion/Step7Completion.tsx b/src/screens/regularPassport/steps/Step7Completion/Step7Completion.tsx new file mode 100644 index 0000000..0d6181d --- /dev/null +++ b/src/screens/regularPassport/steps/Step7Completion/Step7Completion.tsx @@ -0,0 +1,203 @@ +import React from 'react'; +import {ScrollView, View} from 'react-native'; +import {Button, Divider, Text} from 'react-native-paper'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import Colors from '../../../../../assets/styles/Colors'; +import styles from '../styles'; +import passportAppointmentData from '../../../../data/History/PassportAppointmentData'; +import Accordion from '../../../../components/Accordion'; +import termsAndConditionsData from '../../../../data/Steps/TermsAndContionsData'; + +type Step7CompletionProps = { + setStep: (step: number) => void; +}; + +const Step7Completion = ({setStep}: Step7CompletionProps) => { + const lastAppointment = + passportAppointmentData[passportAppointmentData.length - 1]; + + return ( + + + + Jadwal Kedatangan + + + + + {lastAppointment.appointmentDate} + + + + + + {lastAppointment.appointmentTime} + + + + + + {lastAppointment.serviceUnit} + + + + + + + Tanggal Pengajuan + + {lastAppointment.submissionDate} + + + + Kode Layanan + + {lastAppointment.serviceCode} + + + + + + + + + {termsAndConditionsData.map((item, index) => ( + + + + {item.id}. + + + {item.text} + + + {item.subItems && ( + + {item.subItems.map((sub, subIndex) => ( + + + {String.fromCharCode(97 + subIndex)}. + + + {sub} + + + ))} + + )} + + ))} + + + + + + + + Pemohon + + {lastAppointment.applicantName} + + + + Kode Permohonan + + {lastAppointment.applicantCode} + + + + + NIK + + {lastAppointment.applicationDetails.nationalIdNumber} + + + + Jenis Kelamin + + {lastAppointment.applicationDetails.gender} + + + + + Jenis Permohonan + + + {lastAppointment.applicationDetails.applicationType} + + + + + Alasan Penggantian + + + {lastAppointment.applicationDetails.replacementReason} + + + + + Tujuan Permohonan + + + {lastAppointment.applicationDetails.applicationPurpose} + + + + Jenis Paspor + + {lastAppointment.applicationDetails.passportType} + + + + + + + + + + ); +}; + +export default Step7Completion; diff --git a/src/screens/regularPassport/steps/styles.tsx b/src/screens/regularPassport/steps/styles.tsx new file mode 100644 index 0000000..33f271f --- /dev/null +++ b/src/screens/regularPassport/steps/styles.tsx @@ -0,0 +1,240 @@ +import {StyleSheet} from 'react-native'; +import Colors from '../../../../assets/styles/Colors'; +import FontFamily from '../../../../assets/styles/FontFamily'; + +const styles = StyleSheet.create({ + subStepContainer: { + backgroundColor: Colors.neutral100.color, + padding: 16, + }, + subStepButtonContainer: { + gap: 16, + }, + subStepButtonContained: { + backgroundColor: Colors.primary30.color, + }, + subStepButtonOutlined: { + borderColor: Colors.primary30.color, + }, + subStepTextWrapper: { + gap: 10, + }, + subStepTitle: { + fontSize: 16, + ...FontFamily.notoSansExtraBold, + color: Colors.secondary30.color, + includeFontPadding: false, + }, + subStepDesc: { + includeFontPadding: false, + fontSize: 12, + color: Colors.primary10.color, + ...FontFamily.notoSansRegular, + lineHeight: 20, + textAlign: 'justify', + }, + subStepTextInputContainer: { + gap: 16, + }, + subStepListTextRowContainer: { + flexDirection: 'row', + gap: 6, + }, + subStepListTextFlex: { + flex: 1, + }, + subStepButtonBackWrapper: { + flexDirection: 'row', + alignItems: 'center', + gap: 4, + }, + subStepButtonBackText: { + ...FontFamily.notoSansRegular, + includeFontPadding: false, + fontSize: 10, + }, + subStepSectionButtonTextTitle: { + marginBottom: 8, + fontSize: 12, + includeFontPadding: false, + ...FontFamily.notoSansBold, + color: Colors.primary30.color, + flex: 1, + }, + subStepSectionButtonTextWrapper: { + flexDirection: 'row', + }, + sectionButtonWrapper: { + flexDirection: 'row', + gap: 16, + }, + buttonContainedSecondary: { + flex: 1, + backgroundColor: Colors.secondary30.color, + }, + textInputBulletTextWrapper: { + flexDirection: 'row', + gap: 6, + }, + subStepTextInputRowContainer: { + justifyContent: 'center', + flexDirection: 'row', + gap: 12, + }, + subStepTextInputFlex: { + flex: 1, + }, + subStepSectionButtonContainer: { + marginBottom: 24, + gap: 16, + }, + subStepQuestionnaireOptionContainer: { + borderWidth: 1, + borderColor: Colors.secondary50.color, + borderRadius: 8, + padding: 16, + marginVertical: 16, + gap: 16, + backgroundColor: Colors.neutral100.color, + }, + subStepCheckWrapper: { + flexDirection: 'row', + alignItems: 'center', + gap: 8, + }, + questionnaireDataSecondary: { + ...FontFamily.notoSansBold, + fontSize: 12, + color: Colors.secondary30.color, + includeFontPadding: false, + }, + applicantDetailContentContainer: { + borderRadius: 16, + backgroundColor: Colors.neutral100.color, + borderWidth: 1, + borderColor: Colors.primary70.color, + marginVertical: 12, + padding: 16, + gap: 8, + }, + applicantDetailTextContentWrapper: { + flexDirection: 'row', + justifyContent: 'space-between', + gap: 8, + }, + applicantDetailTopContentWrapper: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + applicantDetailIconContentWrapper: { + flexDirection: 'row', + gap: 16, + }, + applicantDetailTextTitle: { + fontSize: 12, + ...FontFamily.notoSansRegular, + includeFontPadding: false, + color: Colors.primary30.color, + flex: 1, + }, + applicantDetailTextDesc: { + fontSize: 12, + ...FontFamily.notoSansBold, + includeFontPadding: false, + color: Colors.primary30.color, + flex: 1.2, + }, + applicantDetailContentChildContainer: { + padding: 16, + borderWidth: 1, + marginVertical: 8, + borderColor: Colors.primary70.color, + borderRadius: 8, + gap: 12, + }, + applicantDetailBottomContentWrapper: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + applicantDetailTexDescName: { + textTransform: 'uppercase', + textAlign: 'right', + }, + applicantDetailTexDescCode: { + textAlign: 'right', + }, + midContainer: { + backgroundColor: Colors.neutral100.color, + }, + midTextTitle: { + ...FontFamily.notoSansExtraBold, + fontSize: 18, + includeFontPadding: false, + marginBottom: 6, + color: Colors.primary30.color, + }, + midIconContainer: { + gap: 8, + marginVertical: 12, + }, + midIconContentWrapper: { + flexDirection: 'row', + alignItems: 'center', + gap: 6, + }, + midIconContentTextStyle: { + fontSize: 12, + ...FontFamily.notoSansRegular, + color: Colors.primary30.color, + flex: 1, + }, + midTextContentWrapper: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + midTextContentContainer: { + marginVertical: 12, + gap: 12, + }, + midTextContentTitle: { + fontSize: 12, + ...FontFamily.notoSansRegular, + includeFontPadding: false, + color: Colors.primary30.color, + }, + midTextContentData: { + fontSize: 12, + ...FontFamily.notoSansSemiBold, + includeFontPadding: false, + color: Colors.primary30.color, + }, + accordionContainer: { + marginTop: 8, + marginBottom: 8, + }, + accordionOptionDataWrapper: { + marginBottom: 16, + }, + accordionTextContentWrapper: { + flexDirection: 'row', + gap: 6, + }, + accordionTextContentDesc: { + flex: 1, + color: Colors.primary30.color, + ...FontFamily.notoSansRegular, + fontSize: 12, + textAlign: 'justify', + includeFontPadding: false, + lineHeight: 24, + }, + accordionListFlex: { + flex: 0, + }, + accordionTextContentAlphabetWrapper: { + marginStart: 16, + } +}); + +export default styles; diff --git a/src/screens/regularPassport/styles.tsx b/src/screens/regularPassport/styles.tsx index ddbb0c3..aac3f70 100644 --- a/src/screens/regularPassport/styles.tsx +++ b/src/screens/regularPassport/styles.tsx @@ -129,6 +129,7 @@ const styles = StyleSheet.create({ color: Colors.primary10.color, ...FontFamily.notoSansRegular, lineHeight: 20, + textAlign: 'justify', }, documentImageContainer: { alignItems: 'center', @@ -151,6 +152,13 @@ const styles = StyleSheet.create({ subStepTextInputFlex: { flex: 1, }, + subStepListTextRowContainer: { + flexDirection: 'row', + gap: 6, + }, + subStepListTextFlex: { + flex: 1, + }, subStepButtonBackWrapper: { flexDirection: 'row', alignItems: 'center',