Refactor the Passport Application flow by separating each step into its own component up to step 3, and complete the UI for step 7
This commit is contained in:
Mochammad Adhi Buchori
File diff suppressed because it is too large
Load Diff
187
src/screens/regularPassport/steps/Step3Payment/Step3Payment.tsx
Normal file
187
src/screens/regularPassport/steps/Step3Payment/Step3Payment.tsx
Normal file
@ -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 (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={({pressed}) => [
|
||||
styles.subStepButtonBackWrapper,
|
||||
{
|
||||
transform: [{scale: pressed ? 0.99 : 1}],
|
||||
marginBottom: 8,
|
||||
},
|
||||
]}>
|
||||
<Icon name="chevron-left" size={24} />
|
||||
<Text style={styles.subStepButtonBackText}>Kembali</Text>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
const DocumentUploadSection = (props: DocumentUploadSectionProps) => {
|
||||
const {title, isRequired = false} = props;
|
||||
return (
|
||||
<View>
|
||||
<Text style={styles.subStepSectionButtonTextTitle}>
|
||||
{title}{' '}
|
||||
{isRequired && (
|
||||
<Text style={{color: Colors.indicatorRed.color}}>*</Text>
|
||||
)}
|
||||
</Text>
|
||||
<View style={styles.sectionButtonWrapper}>
|
||||
<Button
|
||||
icon="camera-outline"
|
||||
mode="contained"
|
||||
style={styles.buttonContainedSecondary}
|
||||
textColor={Colors.neutral100.color}
|
||||
labelStyle={{fontSize: 12}}>
|
||||
Foto Dokumen
|
||||
</Button>
|
||||
<Button
|
||||
icon="tray-arrow-up"
|
||||
mode="contained"
|
||||
style={styles.buttonContainedSecondary}
|
||||
textColor={Colors.neutral100.color}
|
||||
labelStyle={{fontSize: 12}}>
|
||||
Unggah Dokumen
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const Step3Payment = (props: Step3PaymentProps) => {
|
||||
const {setStep, setSubStep} = props;
|
||||
return (
|
||||
<ScrollView>
|
||||
<View style={styles.subStepContainer}>
|
||||
<BackButton
|
||||
onPress={() => {
|
||||
setStep(2);
|
||||
setSubStep(11);
|
||||
}}
|
||||
/>
|
||||
|
||||
<View style={{marginBottom: 16, gap: 4}}>
|
||||
<Text style={styles.subStepDesc}>
|
||||
Layanan yang cocok untuk Anda adalah{' '}
|
||||
<Text style={{...FontFamily.notoSansBold}}>Paspor Penggantian</Text>
|
||||
. Silakan unggah kelengkapan dokumen berikut.
|
||||
</Text>
|
||||
<View>
|
||||
<View style={styles.textInputBulletTextWrapper}>
|
||||
<Text
|
||||
style={[
|
||||
styles.subStepDesc,
|
||||
{fontSize: 10, ...FontFamily.notoSansBold},
|
||||
]}>
|
||||
•
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.subStepDesc,
|
||||
{fontSize: 10, ...FontFamily.notoSansBold},
|
||||
]}>
|
||||
Unggah dokumen hanya bisa berbentuk JPG.
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textInputBulletTextWrapper}>
|
||||
<Text
|
||||
style={[
|
||||
styles.subStepDesc,
|
||||
{fontSize: 10, ...FontFamily.notoSansBold},
|
||||
]}>
|
||||
•
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.subStepDesc,
|
||||
{fontSize: 10, ...FontFamily.notoSansBold},
|
||||
]}>
|
||||
Data yang bertanda (
|
||||
<Text style={{color: Colors.indicatorRed.color}}>*</Text>) wajib
|
||||
diisi.
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={{marginBottom: 16, gap: 16}}>
|
||||
<TextInputComponent
|
||||
title="Nama Pemohon"
|
||||
placeholder="Salwa Aisyah Adhani"
|
||||
isRequired
|
||||
isDisabled
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Tempat Lahir"
|
||||
placeholder="Masukkan tempat lahir Anda"
|
||||
isRequired
|
||||
/>
|
||||
<View style={styles.subStepTextInputRowContainer}>
|
||||
<View style={styles.subStepTextInputFlex}>
|
||||
<TextInputComponent
|
||||
title="Tanggal Lahir"
|
||||
placeholder="22/02/2002"
|
||||
isRequired
|
||||
isDate
|
||||
isDisabled
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.subStepTextInputFlex}>
|
||||
<TextInputComponent
|
||||
title="Jenis Kelamin"
|
||||
placeholder="Wanita"
|
||||
isRequired
|
||||
isDropdown
|
||||
isDisabled
|
||||
dropdownItemData={genderData}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.subStepSectionButtonContainer}>
|
||||
<DocumentUploadSection title="e-KTP" isRequired />
|
||||
<DocumentUploadSection title="Kartu Keluarga" />
|
||||
<DocumentUploadSection title="Akta kelahiran/ijazah/akta perkawinan/buku nikah/surat baptis" />
|
||||
<DocumentUploadSection title="Paspor Lama" isRequired />
|
||||
</View>
|
||||
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={() => {
|
||||
setStep(4), setSubStep(1);
|
||||
}}
|
||||
style={styles.subStepButtonContained}
|
||||
textColor={Colors.neutral100.color}>
|
||||
Lanjut
|
||||
</Button>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Step3Payment;
|
||||
@ -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<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
const Step4DataConfirmationSubStep1: React.FC<
|
||||
Step4DataConfirmationSubStep1Props
|
||||
> = ({setStep, setSubStep, checkedOption, setCheckedOption}) => {
|
||||
return (
|
||||
<ScrollView>
|
||||
<View style={styles.subStepContainer}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setStep(3);
|
||||
}}
|
||||
style={({pressed}) => [
|
||||
styles.subStepButtonBackWrapper,
|
||||
{transform: [{scale: pressed ? 0.99 : 1}], marginBottom: 8},
|
||||
]}>
|
||||
<Icon name="chevron-left" size={24} />
|
||||
<Text style={styles.subStepButtonBackText}>Kembali</Text>
|
||||
</Pressable>
|
||||
|
||||
<Text style={styles.subStepDesc}>
|
||||
Data di bawah ini harus sesuai dengan keterangan pada KTP pemohon.
|
||||
Data yang bertanda (
|
||||
<Text style={{color: Colors.indicatorRed.color}}>*</Text>) wajib
|
||||
diisi.
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={[
|
||||
styles.subStepQuestionnaireOptionContainer,
|
||||
{marginBottom: 0},
|
||||
]}>
|
||||
<Text style={styles.questionnaireDataSecondary}>
|
||||
Alamat sesuai KTP
|
||||
</Text>
|
||||
<TextInputComponent
|
||||
title="Tanggal Dikeluarkan KTP"
|
||||
placeholder="DD/MM/YYYY"
|
||||
isRequired
|
||||
isDate
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Kewarganegaraan"
|
||||
placeholder="Indonesia"
|
||||
isRequired
|
||||
isDisabled
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Alamat Sesuai KTP"
|
||||
placeholder="Masukkan alamat sesuai KTP"
|
||||
isRequired
|
||||
supportText="0/100 karakter"
|
||||
containerHeight={90}
|
||||
isMultiline
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Provinsi Sesuai KTP"
|
||||
placeholder="Cari Provinsi"
|
||||
isDropdown
|
||||
dropdownItemData={provinceData}
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Kabupaten/Kota Sesuai KTP"
|
||||
placeholder="Cari Kabupaten/Kota"
|
||||
isDropdown
|
||||
dropdownItemData={cityData}
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Kecamatan Sesuai KTP"
|
||||
placeholder="Cari Kecamatan"
|
||||
isDropdown
|
||||
dropdownItemData={districtData}
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Kode Pos Sesuai KTP"
|
||||
placeholder="Cari Kode Pos"
|
||||
isDropdown
|
||||
dropdownItemData={postalCodeData}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
styles.subStepQuestionnaireOptionContainer,
|
||||
{marginBottom: 32},
|
||||
]}>
|
||||
<Text style={styles.questionnaireDataSecondary}>
|
||||
Alamat Sekarang (Domisili)
|
||||
</Text>
|
||||
<View style={styles.subStepCheckWrapper}>
|
||||
<Checkbox
|
||||
status={checkedOption ? 'checked' : 'unchecked'}
|
||||
color={Colors.secondary20.color}
|
||||
uncheckedColor={Colors.secondary20.color}
|
||||
onPress={() => setCheckedOption(prev => !prev)}
|
||||
/>
|
||||
<Text style={styles.subStepDesc}>Alamat sekarang sesuai KTP</Text>
|
||||
</View>
|
||||
<TextInputComponent
|
||||
title="Alamat Sesuai Domisili"
|
||||
placeholder="Masukkan alamat sesuai Domisili"
|
||||
isRequired
|
||||
supportText="0/100 karakter"
|
||||
containerHeight={90}
|
||||
isMultiline
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Provinsi Sesuai Domisili"
|
||||
placeholder="Cari Provinsi"
|
||||
isDropdown
|
||||
dropdownItemData={provinceData}
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Kabupaten/Kota Sesuai Domisili"
|
||||
placeholder="Cari Kabupaten/Kota"
|
||||
isDropdown
|
||||
dropdownItemData={cityData}
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Kecamatan Sesuai Domisili"
|
||||
placeholder="Cari Kecamatan"
|
||||
isDropdown
|
||||
dropdownItemData={districtData}
|
||||
/>
|
||||
<TextInputComponent
|
||||
title="Kode Pos Sesuai Domisili"
|
||||
placeholder="Cari Kode Pos"
|
||||
isDropdown
|
||||
dropdownItemData={postalCodeData}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={() => {
|
||||
setStep(4);
|
||||
setSubStep(2);
|
||||
}}
|
||||
style={[styles.subStepButtonContained, {marginBottom: 8}]}
|
||||
textColor={Colors.neutral100.color}>
|
||||
Lanjut
|
||||
</Button>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Step4DataConfirmationSubStep1;
|
||||
@ -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 (
|
||||
<ScrollView>
|
||||
<View style={styles.subStepContainer}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setStep(4);
|
||||
setSubStep(1);
|
||||
}}
|
||||
style={({ pressed }) => [
|
||||
styles.subStepButtonBackWrapper,
|
||||
{
|
||||
transform: [{ scale: pressed ? 0.99 : 1 }],
|
||||
marginBottom: 8,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Icon name="chevron-left" size={24} />
|
||||
<Text style={styles.subStepButtonBackText}>Kembali</Text>
|
||||
</Pressable>
|
||||
<Text style={styles.subStepDesc}>
|
||||
Data di bawah ini harus sesuai dengan keterangan pada KTP pemohon. Data yang bertanda (
|
||||
<Text style={{ color: Colors.indicatorRed.color }}>*</Text>) wajib diisi.
|
||||
</Text>
|
||||
|
||||
<View style={[styles.subStepQuestionnaireOptionContainer, { marginBottom: 0 }]}>
|
||||
<Text style={styles.questionnaireDataSecondary}>Keterangan Pemohon</Text>
|
||||
<TextInputComponent title="Pekerjaan" placeholder="Pilih pekerjaan" isRequired isDropdown />
|
||||
<TextInputComponent title="Nomor Telepon" placeholder="Contoh: 08513456789" isRequired />
|
||||
</View>
|
||||
|
||||
<View style={[styles.subStepQuestionnaireOptionContainer, { marginBottom: 0 }]}>
|
||||
<Text style={styles.questionnaireDataSecondary}>Keterangan Ibu Pemohon</Text>
|
||||
<TextInputComponent title="Nama Ibu" placeholder="Masukkan nama lengkap ibu" isRequired />
|
||||
<TextInputComponent title="Kewarganegaraan Ibu" placeholder="Pilih kewarganegaraan ibu" isRequired isDropdown />
|
||||
<TextInputComponent
|
||||
title="Alamat Ibu"
|
||||
placeholder="Masukkan alamat ibu"
|
||||
isRequired
|
||||
supportText="0/100 karakter"
|
||||
containerHeight={90}
|
||||
isMultiline
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={[styles.subStepQuestionnaireOptionContainer, { marginBottom: 0 }]}>
|
||||
<Text style={styles.questionnaireDataSecondary}>Keterangan Ayah Pemohon (Opsional)</Text>
|
||||
<TextInputComponent title="Nama Ayah" placeholder="Masukkan nama lengkap ayah" />
|
||||
<TextInputComponent title="Kewarganegaraan Ayah" placeholder="Pilih kewarganegaraan ayah" isDropdown />
|
||||
<TextInputComponent
|
||||
title="Alamat Ayah"
|
||||
placeholder="Masukkan alamat ayah"
|
||||
supportText="0/100 karakter"
|
||||
containerHeight={90}
|
||||
isMultiline
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={[styles.subStepQuestionnaireOptionContainer, { marginBottom: 32 }]}>
|
||||
<Text style={styles.questionnaireDataSecondary}>Keterangan Pasangan Pemohon (Opsional)</Text>
|
||||
<TextInputComponent title="Nama Pasangan" placeholder="Masukkan nama lengkap pasangan" />
|
||||
<TextInputComponent title="Kewarganegaraan Pasangan" placeholder="Pilih kewarganegaraan pasangan" isDropdown />
|
||||
<TextInputComponent
|
||||
title="Alamat Pasangan"
|
||||
placeholder="Masukkan alamat pasangan"
|
||||
supportText="0/100 karakter"
|
||||
containerHeight={90}
|
||||
isMultiline
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={() => setStep(5)}
|
||||
style={[styles.subStepButtonContained, { marginBottom: 8 }]}
|
||||
textColor={Colors.neutral100.color}
|
||||
>
|
||||
Simpan Draft
|
||||
</Button>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Step4DataConfirmationSubStep2;
|
||||
@ -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 (
|
||||
<View style={styles.subStepContainer}>
|
||||
<Text style={styles.subStepDesc}>
|
||||
Data pemohon berikut tidak akan terhapus dan sudah tersimpan di beranda.
|
||||
Silakan lanjut untuk memilih jenis paspor, lokasi dan jadwal
|
||||
pengambilan, serta pembayaran.
|
||||
</Text>
|
||||
<View style={styles.applicantDetailContentContainer}>
|
||||
<View style={styles.applicantDetailTopContentWrapper}>
|
||||
<View style={{gap: 4}}>
|
||||
<Text style={[styles.applicantDetailTextTitle, {flex: 0}]}>
|
||||
Pemohon
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.applicantDetailTextDesc,
|
||||
{textTransform: 'uppercase', flex: 0},
|
||||
]}>
|
||||
{lastAppointment.applicantName}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.applicantDetailIconContentWrapper}>
|
||||
<Icon
|
||||
name="trash-can-outline"
|
||||
size={24}
|
||||
color={Colors.indicatorRed.color}
|
||||
/>
|
||||
<Icon
|
||||
name="square-edit-outline"
|
||||
size={24}
|
||||
color={Colors.primary30.color}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.applicantDetailContentChildContainer}>
|
||||
<DetailRow
|
||||
label="NIK"
|
||||
value={lastAppointment.applicationDetails.nationalIdNumber}
|
||||
/>
|
||||
<DetailRow
|
||||
label="Jenis Kelamin"
|
||||
value={lastAppointment.applicationDetails.gender}
|
||||
/>
|
||||
<DetailRow
|
||||
label="Jenis Permohonan"
|
||||
value={lastAppointment.applicationDetails.applicationType}
|
||||
/>
|
||||
<DetailRow
|
||||
label="Alasan Penggantian"
|
||||
value={lastAppointment.applicationDetails.replacementReason}
|
||||
/>
|
||||
<DetailRow
|
||||
label="Tujuan Permohonan"
|
||||
value={lastAppointment.applicationDetails.applicationPurpose}
|
||||
/>
|
||||
<DetailRow
|
||||
label="Jenis Paspor"
|
||||
value={lastAppointment.applicationDetails.passportType}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[styles.subStepButtonContainer, {marginTop: 12}]}>
|
||||
<Button
|
||||
mode="contained"
|
||||
onPress={() => setStep(6)}
|
||||
style={styles.subStepButtonContained}
|
||||
textColor={Colors.neutral100.color}>
|
||||
Lanjut
|
||||
</Button>
|
||||
<Button
|
||||
mode="outlined"
|
||||
onPress={() => {
|
||||
setStep(4);
|
||||
setSubStep(2);
|
||||
}}
|
||||
style={styles.subStepButtonOutlined}
|
||||
textColor={Colors.primary30.color}>
|
||||
Kembali
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const DetailRow = ({label, value}: {label: string; value: string}) => (
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>{label}</Text>
|
||||
<Text style={styles.applicantDetailTextDesc}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
export default Step5Content;
|
||||
@ -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 (
|
||||
<ScrollView>
|
||||
<View style={styles.subStepContainer}>
|
||||
<View style={styles.subStepTextWrapper}>
|
||||
<Text style={styles.subStepTitle}>
|
||||
Pilih Lokasi Pengambilan dan Jenis Paspor
|
||||
</Text>
|
||||
<Text style={styles.subStepDesc}>
|
||||
Anda dapat membuat paspor di kantor imigrasi manapun di seluruh
|
||||
Indonesia. Silakan pilih lokasi permohonan paspor.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={[styles.subStepTextInputContainer, {marginVertical: 16}]}>
|
||||
<TextInputComponent
|
||||
title="Lokasi Kantor Imigrasi"
|
||||
placeholder="Pilih lokasi kantor imigrasi"
|
||||
isRequired
|
||||
isDropdown
|
||||
/>
|
||||
{/* TODO: Add button information */}
|
||||
<TextInputComponent
|
||||
title="Jenis Paspor"
|
||||
placeholder="Pilih satu jenis paspor"
|
||||
isRequired
|
||||
isDropdown
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Divider />
|
||||
|
||||
<View style={[styles.subStepTextInputContainer, {marginVertical: 16}]}>
|
||||
<View style={styles.subStepTextWrapper}>
|
||||
<Text style={styles.subStepTitle}>
|
||||
Pilih Tanggal dan Waktu Kedatangan
|
||||
</Text>
|
||||
<Text style={styles.subStepDesc}>
|
||||
Setiap lokasi kantor imigrasi memiliki ketersediaan kuota yang
|
||||
berbeda. Silakan pilih tanggal dan waktu kedatangan.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
{arrivalDateGuidelines.map((item, index) => (
|
||||
<View key={index} style={styles.subStepListTextRowContainer}>
|
||||
<Text style={[styles.subStepDesc, FontFamily.notoSansBold]}>
|
||||
•
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.subStepDesc,
|
||||
styles.subStepListTextFlex,
|
||||
FontFamily.notoSansBold,
|
||||
]}>
|
||||
{item}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* TODO: Add calendar functionality here. */}
|
||||
<TextInputComponent
|
||||
title="Tanggal dan Waktu Kedatangan"
|
||||
placeholder="Pilih tanggal dan waktu kedatangan"
|
||||
isRequired
|
||||
isDate
|
||||
/>
|
||||
|
||||
<Button
|
||||
mode="contained"
|
||||
style={[styles.subStepButtonContained, {marginTop: 24}]}
|
||||
textColor={Colors.neutral100.color}
|
||||
onPress={() => setStep(7)}>
|
||||
Lanjut
|
||||
</Button>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Step6Processing;
|
||||
@ -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 (
|
||||
<ScrollView>
|
||||
<View style={[styles.subStepContainer, {paddingBottom: 0}]}>
|
||||
<View style={styles.midContainer}>
|
||||
<Text style={styles.midTextTitle}>Jadwal Kedatangan</Text>
|
||||
<View style={styles.midIconContainer}>
|
||||
<View style={styles.midIconContentWrapper}>
|
||||
<Icon
|
||||
name="calendar-today"
|
||||
size={24}
|
||||
color={Colors.secondary30.color}
|
||||
/>
|
||||
<Text style={styles.midIconContentTextStyle}>
|
||||
{lastAppointment.appointmentDate}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.midIconContentWrapper}>
|
||||
<Icon
|
||||
name="clock-outline"
|
||||
size={24}
|
||||
color={Colors.secondary30.color}
|
||||
/>
|
||||
<Text style={styles.midIconContentTextStyle}>
|
||||
{lastAppointment.appointmentTime}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.midIconContentWrapper}>
|
||||
<Icon
|
||||
name="map-marker-outline"
|
||||
size={24}
|
||||
color={Colors.secondary30.color}
|
||||
/>
|
||||
<Text style={styles.midIconContentTextStyle}>
|
||||
{lastAppointment.serviceUnit}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Divider />
|
||||
<View style={styles.midTextContentContainer}>
|
||||
<View style={styles.midTextContentWrapper}>
|
||||
<Text style={styles.midTextContentTitle}>Tanggal Pengajuan</Text>
|
||||
<Text style={styles.midTextContentData}>
|
||||
{lastAppointment.submissionDate}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.midTextContentWrapper}>
|
||||
<Text style={styles.midTextContentTitle}>Kode Layanan</Text>
|
||||
<Text style={styles.midTextContentData}>
|
||||
{lastAppointment.serviceCode}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Divider />
|
||||
</View>
|
||||
<View style={styles.accordionContainer}>
|
||||
<Accordion title={'Persyaratan dan Ketentuan'}>
|
||||
<View style={styles.accordionOptionDataWrapper}>
|
||||
{termsAndConditionsData.map((item, index) => (
|
||||
<View key={index}>
|
||||
<View style={styles.accordionTextContentWrapper}>
|
||||
<Text
|
||||
style={[
|
||||
styles.accordionTextContentDesc,
|
||||
styles.accordionListFlex,
|
||||
]}>
|
||||
{item.id}.
|
||||
</Text>
|
||||
<Text style={styles.accordionTextContentDesc}>
|
||||
{item.text}
|
||||
</Text>
|
||||
</View>
|
||||
{item.subItems && (
|
||||
<View style={styles.accordionTextContentAlphabetWrapper}>
|
||||
{item.subItems.map((sub, subIndex) => (
|
||||
<View
|
||||
key={subIndex}
|
||||
style={styles.accordionTextContentWrapper}>
|
||||
<Text
|
||||
style={[
|
||||
styles.accordionTextContentDesc,
|
||||
styles.accordionListFlex,
|
||||
]}>
|
||||
{String.fromCharCode(97 + subIndex)}.
|
||||
</Text>
|
||||
<Text style={styles.accordionTextContentDesc}>
|
||||
{sub}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</Accordion>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: Colors.secondary70.color,
|
||||
padding: 16,
|
||||
borderRadius: 0,
|
||||
borderWidth: 0,
|
||||
}}>
|
||||
<View style={styles.applicantDetailContentContainer}>
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>Pemohon</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.applicantDetailTextDesc,
|
||||
styles.applicantDetailTexDescName,
|
||||
]}>
|
||||
{lastAppointment.applicantName}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>Kode Permohonan</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.applicantDetailTextDesc,
|
||||
styles.applicantDetailTexDescCode,
|
||||
]}>
|
||||
{lastAppointment.applicantCode}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.applicantDetailContentChildContainer}>
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>NIK</Text>
|
||||
<Text style={styles.applicantDetailTextDesc}>
|
||||
{lastAppointment.applicationDetails.nationalIdNumber}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>Jenis Kelamin</Text>
|
||||
<Text style={styles.applicantDetailTextDesc}>
|
||||
{lastAppointment.applicationDetails.gender}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>
|
||||
Jenis Permohonan
|
||||
</Text>
|
||||
<Text style={styles.applicantDetailTextDesc}>
|
||||
{lastAppointment.applicationDetails.applicationType}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>
|
||||
Alasan Penggantian
|
||||
</Text>
|
||||
<Text style={styles.applicantDetailTextDesc}>
|
||||
{lastAppointment.applicationDetails.replacementReason}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>
|
||||
Tujuan Permohonan
|
||||
</Text>
|
||||
<Text style={styles.applicantDetailTextDesc}>
|
||||
{lastAppointment.applicationDetails.applicationPurpose}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.applicantDetailTextContentWrapper}>
|
||||
<Text style={styles.applicantDetailTextTitle}>Jenis Paspor</Text>
|
||||
<Text style={styles.applicantDetailTextDesc}>
|
||||
{lastAppointment.applicationDetails.passportType}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{margin: 16}}>
|
||||
<Button
|
||||
mode="contained"
|
||||
style={styles.subStepButtonContained}
|
||||
textColor={Colors.neutral100.color}
|
||||
onPress={() => setStep(6)}>
|
||||
Kembali ke Halaman Utama
|
||||
</Button>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Step7Completion;
|
||||
240
src/screens/regularPassport/steps/styles.tsx
Normal file
240
src/screens/regularPassport/steps/styles.tsx
Normal file
@ -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;
|
||||
@ -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',
|
||||
|
||||
Reference in New Issue
Block a user