Add Eazy Passport screen and add passport application flow until step 5 'Verifikasi'

src/components/StepIndicator.tsx

@@ -24,7 +24,7 @@ const StepIndicator = ({currentStep, totalSteps, completedSteps}: any) => {
         const textStyle = isCompleted
           ? FontFamily.notoSansBold
           : isCurrent
-          ? FontFamily.notoSansRegular
+          ? FontFamily.notoSansSemiBold
           : FontFamily.notoSansRegular;
 
         return (

src/components/TextInput.tsx

@@ -87,7 +87,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
             </View>
           )}
           <Dropdown
-            style={styles.dropdown}
+            style={[styles.dropdown, isDisabled && styles.outlineColorDisabled]}
             placeholderStyle={styles.placeholderDropdownStyle}
             selectedTextStyle={styles.selectedTextStyle}
             iconStyle={styles.iconStyle}
@@ -100,6 +100,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
             onChange={item => {
               setGenderValue(item.value);
             }}
+            disable={isDisabled}
             renderRightIcon={() => <Icon name="arrow-drop-down" size={20} />}
             renderItem={renderDropdownItem}
           />
@@ -114,18 +115,19 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
             {title && <Text style={styles.title}>{title}</Text>}
             {isRequired && <Text style={styles.required}>*</Text>}
           </View>
-          <Pressable onPress={() => setShowPicker(true)}>
+          <Pressable onPress={() => !isDisabled && setShowPicker(true)}>
             <TextInput
               mode="outlined"
               placeholder={placeholder}
-              style={inputStyle}
+              style={[inputStyle, isDisabled && styles.outlineColorDisabled]}
               theme={{roundness: 12}}
               placeholderTextColor={Colors.primary60.color}
               editable={false}
               value={formattedDate}
-              right={<TextInput.Icon icon="calendar" color='#48454E' />}
+              right={<TextInput.Icon icon="calendar" color="#48454E" />}
               multiline={false}
-              textColor='#48454E'
+              textColor="#48454E"
+              disabled={isDisabled}
             />
           </Pressable>
           {showPicker && (
@@ -151,7 +153,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
         <TextInput
           mode="outlined"
           placeholder={placeholder}
-          style={inputStyle}
+          style={[inputStyle, isDisabled && styles.outlineColorDisabled]}
           theme={{roundness: 12}}
           placeholderTextColor={Colors.primary60.color}
           activeOutlineColor={Colors.primary10.color}
@@ -167,7 +169,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
             ) : null
           }
           multiline={isMultiline}
-          textColor='#48454E'
+          textColor="#48454E"
         />
         {supportText && <Text style={[styles.supportText]}>{supportText}</Text>}
       </View>
@@ -243,6 +245,12 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     color: Colors.neutral70.color,
   },
+  outlineColorDisabled: {
+    backgroundColor: '#F8F9FE',
+    borderWidth: 1,
+    borderRadius: 12,
+    borderColor: '#e3e3e5',
+  },
 });
 
 export default TextInputComponent;

src/components/dialog/DialogApplicationPassport.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {Portal, Dialog, Button} from 'react-native-paper';
+import Colors from '../../../assets/styles/Colors';
+import FontFamily from '../../../assets/styles/FontFamily';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  onContinue: () => void;
+};
+
+const DialogApplicationPassport = (props: Props) => {
+  const {visible, onClose, onContinue} = props;
+  return (
+    <Portal>
+      <Dialog visible={visible} style={styles.dialogContainer}>
+        <Dialog.Title style={styles.dialogTitle}>Pemberitahuan</Dialog.Title>
+        <View style={styles.dialogContentContainer}>
+          <Text style={styles.dialogDesc}>
+            Permohonan paspor anak diwajibkan untuk didampingi oleh orang
+            tua/wali yang sah pada saat datang ke Kantor Imigrasi untuk
+            pelaksanaan wawancara dan pengambilan foto sidik jari.
+          </Text>
+          <View>
+            <Button
+              style={styles.buttonAgree}
+              mode="contained"
+              textColor={Colors.neutral100.color}
+              onPress={onContinue}>
+              Lanjut
+            </Button>
+            <Button
+              style={styles.buttonDontAgree}
+              mode="outlined"
+              textColor={Colors.primary30.color}
+              onPress={onClose}>
+              Kembali
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  dialogContainer: {
+    backgroundColor: 'white',
+    elevation: 0,
+    shadowColor: 'transparent',
+    borderRadius: 20,
+  },
+  dialogTitle: {
+    fontSize: 22,
+    color: Colors.secondary30.color,
+  },
+  dialogContentContainer: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+    gap: 16,
+  },
+  dialogDesc: {
+    fontSize: 14,
+    ...FontFamily.notoSansRegular,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+  },
+  buttonAgree: {
+    backgroundColor: Colors.primary30.color,
+    marginTop: 12,
+  },
+  buttonDontAgree: {
+    borderColor: Colors.primary30.color,
+    marginTop: 12,
+  },
+});
+
+export default DialogApplicationPassport;

src/components/dialog/DialogDontHaveYetPassport.tsx

@@ -0,0 +1,84 @@
+import {StyleSheet, Text, View} from 'react-native';
+import {Dialog, Portal, Button} from 'react-native-paper';
+import Colors from '../../../assets/styles/Colors';
+import FontFamily from '../../../assets/styles/FontFamily';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  onContinue: () => void;
+};
+
+const DialogDontHaveYetPassport = (props: Props) => {
+  const {visible, onClose, onContinue} = props;
+
+  return (
+    <Portal>
+      <Dialog visible={visible} style={styles.dialogContainer}>
+        <Dialog.Title style={styles.dialogTitle}>Peringatan</Dialog.Title>
+        <View style={styles.dialogContentContainer}>
+          <Text style={styles.dialogDesc}>
+            Apabila Anda sudah memiliki paspor atau sudah pernah mengajukan
+            permohonan paspor pada Kantor Imigrasi namun Anda memilih permohonan
+            paspor baru, maka data anda akan{' '}
+            <Text style={styles.dialogDescRed}>tertolak</Text> oleh sistem dan{' '}
+            <Text style={styles.dialogDescRed}>
+              pembayaran yang telah masuk kas negara tidak dapat dikembalikan.
+            </Text>
+          </Text>
+          <Text style={styles.dialogDesc}>
+            Silakan menghubungi hotline atau datang langsung ke Kantor Imigrasi
+            terdekat untuk informasi dan arahan lebih lanjut.
+          </Text>
+          <View>
+            <Button
+              style={styles.buttonContinue}
+              mode="contained"
+              textColor={Colors.neutral100.color}
+              onPress={() => {
+                onClose();
+                onContinue();
+              }}>
+              Lanjut
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  dialogContainer: {
+    backgroundColor: 'white',
+    elevation: 0,
+    shadowColor: 'transparent',
+    borderRadius: 20,
+  },
+  dialogTitle: {
+    fontSize: 22,
+    color: Colors.secondary30.color,
+  },
+  dialogContentContainer: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+    gap: 16,
+  },
+  dialogDesc: {
+    fontSize: 14,
+    ...FontFamily.notoSansRegular,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+  },
+  dialogDescRed: {
+    ...FontFamily.notoSansBold,
+    color: Colors.indicatorRed.color,
+    includeFontPadding: false,
+  },
+  buttonContinue: {
+    backgroundColor: Colors.primary30.color,
+    marginTop: 12,
+  },
+});
+
+export default DialogDontHaveYetPassport;

src/components/dialog/DialogLostOrDamagedPassport.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import {Portal, Dialog, Button} from 'react-native-paper';
+import Colors from '../../../assets/styles/Colors';
+import FontFamily from '../../../assets/styles/FontFamily';
+
+type Props = {
+  visible: boolean;
+  onBackToHome: () => void;
+  onBackToFirstStep: () => void;
+};
+
+const DialogLostOrDamagedPassport = (props: Props) => {
+  const {visible, onBackToHome, onBackToFirstStep} = props;
+  return (
+    <Portal>
+      <Dialog visible={visible} style={styles.dialogContainer}>
+        <Dialog.Title style={styles.dialogTitle}>Pemberitahuan</Dialog.Title>
+        <View style={styles.dialogContentContainer}>
+          <Text style={styles.dialogDesc}>
+            Silakan langsung datang ke Kantor Imigrasi terdekat untuk melakukan
+            permohonan penggantian paspor hilang atau rusak dengan membawa
+            dokumen sebagai berikut:
+          </Text>
+          <View>
+            <Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
+              1. Untuk Paspor Hilang
+            </Text>
+            <View style={styles.dialogBulletPointWrapper}>
+              <Text style={styles.dialogDesc}>• e-КТР</Text>
+              <Text style={styles.dialogDesc}>• Kartu Keluarga</Text>
+              <View style={styles.dialogLongBulletPointWrapper}>
+                <Text>•</Text>
+                <Text style={styles.dialogDesc}>
+                  Akta kelahiran/ijazah/akta perkawinan/buku nikah/surat baptis
+                </Text>
+              </View>
+              <Text style={styles.dialogDesc}>
+                • Surat kehilangan dari Kepolisian
+              </Text>
+            </View>
+          </View>
+          <View>
+            <Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
+              2. Untuk Paspor Rusak
+            </Text>
+            <View style={styles.dialogBulletPointWrapper}>
+              <Text style={styles.dialogDesc}>• e-КТР</Text>
+              <Text style={styles.dialogDesc}>• Kartu Keluarga</Text>
+              <View style={styles.dialogLongBulletPointWrapper}>
+                <Text>•</Text>
+                <Text style={styles.dialogDesc}>
+                  Akta kelahiran/ijazah/akta perkawinan/buku nikah/surat baptis
+                </Text>
+              </View>
+              <Text style={styles.dialogDesc}>• Paspor lama</Text>
+            </View>
+          </View>
+          <Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
+            Harap membawa semua dokumen asli dan fotokopi dalam kertas A4.
+          </Text>
+          <View>
+            <Button
+              style={styles.buttonContained}
+              mode="contained"
+              textColor={Colors.neutral100.color}
+              onPress={onBackToHome}>
+              Kembali ke Beranda
+            </Button>
+            <Button
+              style={styles.buttonOutlined}
+              mode="outlined"
+              textColor={Colors.primary30.color}
+              onPress={onBackToFirstStep}>
+              Kembali ke Tahap Awal
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  dialogContainer: {
+    backgroundColor: 'white',
+    elevation: 0,
+    shadowColor: 'transparent',
+    borderRadius: 20,
+  },
+  dialogTitle: {
+    fontSize: 22,
+    color: Colors.secondary30.color,
+  },
+  dialogContentContainer: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+    gap: 16,
+  },
+  dialogDesc: {
+    fontSize: 14,
+    ...FontFamily.notoSansRegular,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+  },
+  dialogBulletPointWrapper: {
+    marginStart: 8,
+    gap: 6,
+    marginTop: 8,
+  },
+  dialogLongBulletPointWrapper: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  buttonContained: {
+    backgroundColor: Colors.primary30.color,
+    marginTop: 12,
+  },
+  buttonOutlined: {
+    borderColor: Colors.primary30.color,
+    marginTop: 12,
+  },
+});
+
+export default DialogLostOrDamagedPassport;

src/components/dialog/DialogPassportInfo.tsx

@@ -0,0 +1,91 @@
+import {StyleSheet, Text, View} from 'react-native';
+import {Dialog, Portal, Button} from 'react-native-paper';
+import Colors from '../../../assets/styles/Colors';
+import FontFamily from '../../../assets/styles/FontFamily';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+const DialogPassportInfo = (props: Props) => {
+  const {visible, onClose} = props;
+
+  return (
+    <Portal>
+      <Dialog visible={visible} style={styles.dialogContainer}>
+        <View style={styles.dialogContentContainer}>
+          <Text style={styles.dialogDesc}>
+            Keterangan di dalamnya menjadi tidak jelas atau memberi kesan yang
+            tidak pantas lagi sebagai dokumen resmi (pasal 36 ayat (1) huruf
+            (d.2) Permenkumham RI no 8 tahun 2014 ttg Paspor Biasa dan SPLP)
+          </Text>
+          <Text style={styles.dialogDesc}>Informasi Keadaan Paspor:</Text>
+          <Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
+            1. Keadaan Baik
+          </Text>
+          <Text style={styles.dialogDesc}>
+            Paspor masih dalam keadaan baik atau sangat baik, tanpa ada
+            kerusakan apapun.
+          </Text>
+          <Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
+            2. Keadaan Rusak
+          </Text>
+          <Text style={styles.dialogDesc}>
+            Paspor ada kerusakan (contoh: tersobek, terbakar, dll) dan bagian
+            data diri tidak dapat terbaca.
+          </Text>
+          <Text style={[styles.dialogDesc, {...FontFamily.notoSansBold}]}>
+            3. Hilang
+          </Text>
+          <Text style={styles.dialogDesc}>
+            Paspor hilang dan tidak dapat ditemukan karena suatu keadaan
+            (tertinggal, dicuri, dan lain-lain).
+          </Text>
+          <View>
+            <Button
+              style={styles.buttonContinue}
+              mode="contained"
+              textColor={Colors.neutral100.color}
+              onPress={() => {
+                onClose();
+              }}>
+              Lanjut
+            </Button>
+          </View>
+        </View>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  dialogContainer: {
+    backgroundColor: 'white',
+    elevation: 0,
+    shadowColor: 'transparent',
+    borderRadius: 20,
+  },
+  dialogContentContainer: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+    gap: 16,
+  },
+  dialogDesc: {
+    fontSize: 14,
+    ...FontFamily.notoSansRegular,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+  },
+  dialogDescRed: {
+    ...FontFamily.notoSansBold,
+    color: Colors.indicatorRed.color,
+    includeFontPadding: false,
+  },
+  buttonContinue: {
+    backgroundColor: Colors.primary30.color,
+    marginTop: 12,
+  },
+});
+
+export default DialogPassportInfo;

src/data/DropdownData/DestinationCountryData.tsx

@@ -0,0 +1,14 @@
+const destinationCountryData = [
+  {label: 'Japan', value: '1'},
+  {label: 'South Korea', value: '2'},
+  {label: 'Thailand', value: '3'},
+  {label: 'Singapore', value: '4'},
+  {label: 'Australia', value: '5'},
+  {label: 'United States', value: '6'},
+  {label: 'United Kingdom', value: '7'},
+  {label: 'France', value: '8'},
+  {label: 'Germany', value: '9'},
+  {label: 'Canada', value: '10'},
+];
+
+export default destinationCountryData;

src/data/DropdownData/FamilyRelationshipData.tsx

@@ -0,0 +1,13 @@
+const familyRelationshipData = [
+  {label: 'Suami/Istri', value: '1'},
+  {label: 'Ayah', value: '2'},
+  {label: 'Ibu', value: '3'},
+  {label: 'Kakak/Adik', value: '4'},
+  {label: 'Anak', value: '5'},
+  {label: 'Tante', value: '6'},
+  {label: 'Paman', value: '7'},
+  {label: 'Saudara', value: '8'},
+  {label: 'Keluarga/Kerabat Lainnya', value: '9'},
+];
+
+export default familyRelationshipData;

src/screens/eazyPassport/index.tsx

@@ -1,12 +1,119 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import {ScrollView, StatusBar, Text, View} from 'react-native';
 import styles from './styles';
+import {RootStackParamList} from '../../navigation/type';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {useNavigation} from '@react-navigation/native';
+import Colors from '../../../assets/styles/Colors';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+type EazyPassportScreenNavigationProp = NativeStackNavigationProp<
+  RootStackParamList,
+  'EazyPassport'
+>;
 
 function EazyPassportScreen() {
+  const navigation = useNavigation<EazyPassportScreenNavigationProp>();
+
   return (
+    <ScrollView>
       <View style={styles.container}>
-      <Text>Eazy Passport Screen</Text>
+        <StatusBar
+          backgroundColor={Colors.secondary30.color}
+          barStyle="light-content"
+        />
+        <View style={styles.appBarContainer}>
+          <Icon
+            name="arrow-left"
+            size={24}
+            style={styles.appBarIcon}
+            color={Colors.neutral100.color}
+            onPress={() => navigation.goBack()}
+          />
+          <Text style={styles.appBarTitle}>Eazy Passport</Text>
         </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.textDesc}>
+            Layanan Eazy Passport yaitu pelayanan paspor yang dilaksanakan di
+            luar kantor dan menuju lokasi pemohon dengan menggunakan mobil
+            layanan paspor keliling dan/atau mobile unit Surat Perjalanan
+            Republik Indonesia (SPRI).
+          </Text>
+          <Text style={styles.textDesc}>
+            Ketentuan dan prosedur pemberian layanan paspor dalam pelaksanaan
+            Layanan Eazy Passport adalah sebagai berikut:
+          </Text>
+          <View style={{gap: 4}}>
+            <View style={{flexDirection: 'row', gap: 6}}>
+              <Text style={styles.textDesc}>1.</Text>
+              <Text style={[styles.textDesc, {flex: 1}]}>
+                Layanan Eazy Passport melayani minimal 50 (lima puluh)
+                permohonan per hari;
+              </Text>
+            </View>
+            <View style={{flexDirection: 'row', gap: 6}}>
+              <Text style={styles.textDesc}>2.</Text>
+              <Text style={[styles.textDesc, {flex: 1}]}>
+                Keluarga dari para pegawai di lingkungan Perkantoran Pemerintah/
+                TNI /POLRI / BUMN/BUMD/Swasta dan institusi pendidikan dapat
+                diberikan pelayanan paspor dalam pelaksanaan Layanan Eazy
+                Passport;
+              </Text>
+            </View>
+            <View style={{flexDirection: 'row', gap: 6}}>
+              <Text style={styles.textDesc}>3.</Text>
+              <Text style={[styles.textDesc, {flex: 1}]}>
+                Layanan Eazy Passport hanya melayani pembuatan paspor baru dan
+                penggantian paspor karena habis masa berlaku dan halaman penuh,
+                tidak melayani penggantian paspor karena hilang atau rusak;
+              </Text>
+            </View>
+            <View style={{flexDirection: 'row', gap: 6}}>
+              <Text style={styles.textDesc}>4.</Text>
+              <Text style={[styles.textDesc, {flex: 1}]}>
+                Jadwal layanan ditentukan oleh Kantor Imigrasi setempat dan
+                dilayani di hari kerja (pukul 08.00 s/d 16.00 waktu setempat)
+                atau di luar jam/hari kerja;
+              </Text>
+            </View>
+            <View style={{flexDirection: 'row', gap: 6}}>
+              <Text style={styles.textDesc}>5.</Text>
+              <Text style={[styles.textDesc, {flex: 1}]}>
+                Pelaksanaan input data dan pengambilan biometrik dilakukan
+                dengan mobile unit SPRI baik secara online atau offline;
+              </Text>
+            </View>
+            <View style={{flexDirection: 'row', gap: 6}}>
+              <Text style={styles.textDesc}>6.</Text>
+              <Text style={[styles.textDesc, {flex: 1}]}>
+                Proses penyelesaian paspor 4 (empat) hari kerja setelah pemohon
+                melakukan pembayaran PNBP sesuai dengan jenis paspor yang
+                dipilih;
+              </Text>
+            </View>
+            <View style={{flexDirection: 'row', gap: 6}}>
+              <Text style={styles.textDesc}>7.</Text>
+              <Text style={[styles.textDesc, {flex: 1}]}>
+                Pemohon Layanan Eazy Passport dapat diberikan layanan percepatan
+                paspor selesai pada hari yang sama dengan syarat pembayaran PNBP
+                dilakukan sebelum pukul 13.00 waktu setempat;
+              </Text>
+            </View>
+            <View style={{flexDirection: 'row', gap: 6}}>
+              <Text style={styles.textDesc}>8.</Text>
+              <Text style={[styles.textDesc, {flex: 1}]}>
+                Pengambilan paspor yang sudah dicetak pada Kantor Imigrasi dapat
+                diambil langsung oleh pemohon paspor, diambil oleh perwakilan
+                instansi/kantor/komunitas sebagaimana tersebut pada angka 1
+                dengan melampirkan surat kuasa/ surat perintah dari
+                pimpinan/para pemohon atau dikirim melalui jasa PT. Pos
+                Indonesia.
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
   );
 }
 

src/screens/eazyPassport/styles.tsx

@@ -1,12 +1,36 @@
 import {StyleSheet} from 'react-native';
+import FontFamily from '../../../assets/styles/FontFamily';
+import Colors from '../../../assets/styles/Colors';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignContent: 'center',
-    alignItems: 'center',
     backgroundColor: 'white',
-    justifyContent: 'center',
+  },
+  textContainer: {
+    gap: 8,
+    margin: 16
+  },
+  textDesc: {
+    ...FontFamily.notoSansRegular,
+    fontSize: 12,
+    includeFontPadding: false,
+    textAlign: 'justify',
+  },
+  appBarTitle: {
+    color: Colors.neutral100.color,
+    ...FontFamily.notoSansRegular,
+    fontSize: 22,
+    marginStart: 16,
+  },
+  appBarIcon: {
+    marginLeft: 16,
+  },
+  appBarContainer: {
+    height: 64,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.secondary30.color,
   },
 });
 

src/screens/regularPassport/styles.tsx

@@ -45,6 +45,12 @@ const styles = StyleSheet.create({
     color: Colors.primary30.color,
     includeFontPadding: false,
   },
+  questionnaireDataSecondary: {
+    ...FontFamily.notoSansBold,
+    fontSize: 12,
+    color: Colors.secondary30.color,
+    includeFontPadding: false,
+  },
   dialogContainer: {
     backgroundColor: 'white',
     elevation: 0,
@@ -90,7 +96,9 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.neutral100.color,
     padding: 16,
   },
-  nationalIdImage: {
+  documentImage: {
+    alignItems: 'center',
+    justifyContent: 'center',
     marginVertical: 16,
     height: 350,
     backgroundColor: Colors.primary70.color,
@@ -99,10 +107,10 @@ const styles = StyleSheet.create({
   subStepButtonContainer: {
     gap: 16,
   },
-  subStepButtonActive: {
+  subStepButtonContained: {
     backgroundColor: Colors.primary30.color,
   },
-  subStepButtonInActive: {
+  subStepButtonOutlined: {
     borderColor: Colors.primary30.color,
   },
   subStepTextWrapper: {
@@ -121,15 +129,15 @@ const styles = StyleSheet.create({
     ...FontFamily.notoSansRegular,
     lineHeight: 20,
   },
-  nationalIdImageContainer: {
+  documentImageContainer: {
     alignItems: 'center',
   },
-  nationalIdImageCropped: {
+  documentImageCropped: {
     marginBottom: 16,
     width: 225,
     height: 140,
     backgroundColor: Colors.primary70.color,
-    borderRadius: 20,
+    borderRadius: 8,
   },
   subStepTextInputContainer: {
     gap: 16,
@@ -159,6 +167,100 @@ const styles = StyleSheet.create({
     padding: 16,
     marginVertical: 16,
     gap: 16,
+    backgroundColor: Colors.neutral100.color,
+  },
+  documentImageSupportText: {
+    ...FontFamily.notoSansRegular,
+    color: Colors.neutral100.color,
+    includeFontPadding: false,
+    fontSize: 14,
+    marginBottom: 10,
+  },
+  textInputBulletTextWrapper: {
+    flexDirection: 'row',
+    gap: 6,
+  },
+  textInputSupportText: {
+    fontSize: 10,
+    ...FontFamily.notoSansRegular,
+    color: '#8F9098',
+  },
+  sectionButtonWrapper: {
+    flexDirection: 'row',
+    gap: 16,
+  },
+  buttonContainedSecondary: {
+    flex: 1,
+    backgroundColor: Colors.secondary30.color,
+  },
+  subStepSectionButtonContainer: {
+    marginBottom: 24,
+    gap: 16,
+  },
+  subStepSectionButtonTextTitle: {
+    marginBottom: 8,
+    fontSize: 12,
+    includeFontPadding: false,
+    ...FontFamily.notoSansBold,
+    color: Colors.primary30.color,
+    flex: 1,
+  },
+  subStepSectionButtonTextWrapper: {
+    flexDirection: 'row',
+  },
+  subStepCheckWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  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',
   },
 });