update logo, limit step navigation (1-6), and add custom toast

2025-06-19 16:26:08 +07:00
parent 91e93d4c10
commit 0cd9e1500b
35 changed files with 597 additions and 216 deletions
--- a/src/screens/regularPassport/steps/Step1VerifyNik/Step1VerifyNikSubStep3.tsx
+++ b/src/screens/regularPassport/steps/Step1VerifyNik/Step1VerifyNikSubStep3.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, {RefObject, useState} from 'react';
 import {ScrollView, View} from 'react-native';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
@ -6,23 +6,31 @@ import TextInputComponent from '../../../../components/TextInput';
 import genderData from '../../../../data/DropdownData/GenderData';
 import civilStatusData from '../../../../data/DropdownData/CivilStatusData';
 import Colors from '../../../../../assets/styles/Colors';
+import {changeStep} from '../../../../utils/stepNavigation';
+import {StepValidationStatusSetter} from '../../../../../types/step';

 type Step1VerifyNikSubStep3Props = {
+  step: number;
  setStep: (val: number) => void;
  setSubStep: (val: number) => void;
+  setStepValidationStatus: StepValidationStatusSetter;
  onSubStepValidation: (isValid: boolean) => void;
+  editedCompletedRef: RefObject<Set<number>>;
 };

 const Step1VerifyNikSubStep3 = ({
+  step,
  setStep,
  setSubStep,
+  setStepValidationStatus,
  onSubStepValidation,
+  editedCompletedRef,
 }: Step1VerifyNikSubStep3Props) => {
-  const [fullName, setFullName] = React.useState('');
-  const [nik, setNik] = React.useState('');
-  const [birthDate, setBirthDate] = React.useState('');
-  const [gender, setGender] = React.useState('');
-  const [civilStatus, setCivilStatus] = React.useState('');
+  const [fullName, setFullName] = useState('');
+  const [nik, setNik] = useState('');
+  const [birthDate, setBirthDate] = useState('');
+  const [gender, setGender] = useState('');
+  const [civilStatus, setCivilStatus] = useState('');

  const onNextPress = () => {
    const isFormValid =
@ -38,8 +46,14 @@ const Step1VerifyNikSubStep3 = ({
      onSubStepValidation(false);
    }

-    setStep(2);
-    setSubStep(1);
+    changeStep({
+      currentStep: step,
+      targetStep: 2,
+      setStep,
+      setSubStep: () => setSubStep(1),
+      setStepValidationStatus,
+      editedCompletedRef,
+    });
  };

  return (
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep1.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep1.tsx
@ -1,36 +1,52 @@
-import React from 'react';
+import React, {RefObject, useRef} from 'react';
 import {View, Pressable, Text} from 'react-native';
 import styles from '../styles';
 import RadioButtonOptionComponent from '../../../../components/RadioButtonOption';
 import hasHadPassportBeforeOptions from '../../../../data/Options/HasHadPassportBeforeOptions';
 import {Button} from 'react-native-paper';
 import Colors from '../../../../../assets/styles/Colors';
+import {changeStep} from '../../../../utils/stepNavigation';
+import {StepValidationStatusSetter} from '../../../../../types/step';

 type Step2PassportApplicationQuestionnaireSubStep1Props = {
+  step: number;
  setStep: (step: number) => void;
  setSubStep: (subStep: number) => void;
+  setStepValidationStatus: StepValidationStatusSetter;
  selectedPassportOption: string;
  setSelectedPassportOption: (value: string) => void;
  showDontHaveYetDialog: () => void;
+  editedCompletedRef: RefObject<Set<number>>;
 };

 const Step2PassportApplicationQuestionnaireSubStep1 = ({
+  step,
  setStep,
  setSubStep,
+  setStepValidationStatus,
  selectedPassportOption,
  setSelectedPassportOption,
  showDontHaveYetDialog,
+  editedCompletedRef,
 }: Step2PassportApplicationQuestionnaireSubStep1Props) => {
+  const onBackPress = () => {
+    changeStep({
+      currentStep: step,
+      targetStep: 1,
+      setStep,
+      setSubStep: () => setSubStep(3),
+      setStepValidationStatus,
+      editedCompletedRef,
+    });
+  };
+
  return (
    <View style={styles.subStepContainer}>
      <Pressable
        style={({pressed}) => ({
          transform: [{scale: pressed ? 0.99 : 1}],
        })}
-        onPress={() => {
-          setStep(1);
-          setSubStep(3);
-        }}>
+        onPress={onBackPress}>
        <Button
          mode="contained"
          icon="chevron-left"
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep10.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep10.tsx
@ -1,21 +1,62 @@
-import React from 'react';
+import React, {RefObject, useState} from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
 import Colors from '../../../../../assets/styles/Colors';
 import familyRelationshipData from '../../../../data/DropdownData/FamilyRelationshipData';
+import {changeStep} from '../../../../utils/stepNavigation';
+import {StepValidationStatusSetter} from '../../../../../types/step';

 type Step2PassportApplicationQuestionnaireSubStep10Props = {
-  selectedDestinationCountryOption: string;
+  step: number;
  setStep: (step: number) => void;
  setSubStep: (step: number) => void;
+  setStepValidationStatus: StepValidationStatusSetter;
+  selectedDestinationCountryOption: string;
+  onSubStepValidation: (isValid: boolean) => void;
+  editedCompletedRef: RefObject<Set<number>>;
 };

 const Step2PassportApplicationQuestionnaireSubStep10 = (
  props: Step2PassportApplicationQuestionnaireSubStep10Props,
 ) => {
-  const {selectedDestinationCountryOption, setStep, setSubStep} = props;
+  const {
+    step,
+    setStep,
+    setSubStep,
+    setStepValidationStatus,
+    selectedDestinationCountryOption,
+    onSubStepValidation,
+    editedCompletedRef,
+  } = props;
+
+  const [relativeName, setRelativeName] = useState('');
+  const [relativePhone, setRelativePhone] = useState('');
+  const [relativeRelationship, setRelativeRelationship] = useState('');
+
+  const onNextPress = () => {
+    const isFormValid =
+      relativeName.trim() !== '' &&
+      relativePhone.trim() !== '' &&
+      relativeRelationship.trim() !== '';
+
+    if (selectedDestinationCountryOption === 'destination_country_not_set') {
+      if (isFormValid) {
+        onSubStepValidation(true);
+      }
+      changeStep({
+        currentStep: step,
+        targetStep: 3,
+        setStep,
+        setStepValidationStatus,
+        editedCompletedRef,
+      });
+    } else {
+      setSubStep(11);
+    }
+  };
+
  return (
    <ScrollView>
      <View style={styles.subStepContainer}>
@ -47,12 +88,16 @@ const Step2PassportApplicationQuestionnaireSubStep10 = (
            title="Nama Kerabat"
            placeholder="Masukkan Nama Kerabat Anda"
            isRequired
+            value={relativeName}
+            onChangeText={setRelativeName}
          />

          <TextInputComponent
            title="Nomor Telepon"
            placeholder="Contoh: 08513456789"
            isRequired
+            value={relativePhone}
+            onChangeText={setRelativePhone}
          />

          <TextInputComponent
@ -61,16 +106,14 @@ const Step2PassportApplicationQuestionnaireSubStep10 = (
            isRequired
            isDropdown
            dropdownItemData={familyRelationshipData}
+            value={relativeRelationship}
+            onChangeText={setRelativeRelationship}
          />
        </View>

        <Button
          mode="contained"
-          onPress={() => {
-            selectedDestinationCountryOption === 'destination_country_not_set'
-              ? setStep(3)
-              : setSubStep(11);
-          }}
+          onPress={onNextPress}
          style={styles.subStepButtonContained}
          textColor={Colors.neutral100.color}>
          Lanjut
--- a/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep11.tsx
+++ b/src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep11.tsx
@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {RefObject, useState} from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
@ -8,21 +8,29 @@ import destinationFamilyContactOptions from '../../../../data/Options/Destinatio
 import familyRelationshipData from '../../../../data/DropdownData/FamilyRelationshipData';
 import RadioButtonOptionComponent from '../../../../components/RadioButtonOption';
 import Colors from '../../../../../assets/styles/Colors';
+import {changeStep} from '../../../../utils/stepNavigation';
+import {StepValidationStatusSetter} from '../../../../../types/step';

 type Step2PassportApplicationQuestionnaireSubStep11Props = {
+  step: number;
  setStep: (step: number) => void;
  setSubStep: (subStep: number) => void;
+  setStepValidationStatus: StepValidationStatusSetter;
  selectedOption: string;
  setSelectedOption: (value: string) => void;
  onSubStepValidation: (isValid: boolean) => void;
+  editedCompletedRef: RefObject<Set<number>>;
 };

 const Step2PassportApplicationQuestionnaireSubStep11 = ({
+  step,
  setStep,
  setSubStep,
+  setStepValidationStatus,
  selectedOption,
  setSelectedOption,
  onSubStepValidation,
+  editedCompletedRef,
 }: Step2PassportApplicationQuestionnaireSubStep11Props) => {
  const [relativeName, setRelativeName] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
@ -41,7 +49,13 @@ const Step2PassportApplicationQuestionnaireSubStep11 = ({
      onSubStepValidation(false);
    }

-    setStep(3);
+    changeStep({
+      currentStep: step,
+      targetStep: 3,
+      setStep,
+      setStepValidationStatus,
+      editedCompletedRef,
+    });
  };

  return (
--- a/src/screens/regularPassport/steps/Step3UploadDocuments/Step3UploadDocuments.tsx
+++ b/src/screens/regularPassport/steps/Step3UploadDocuments/Step3UploadDocuments.tsx
@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {RefObject, useState} from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
 import styles from '../styles';
 import Colors from '../../../../../assets/styles/Colors';
@ -7,6 +7,8 @@ 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';
+import {changeStep} from '../../../../utils/stepNavigation';
+import { StepValidationStatusSetter } from '../../../../../types/step';

 interface BackButtonProps {
  onPress: () => void;
@ -22,12 +24,15 @@ interface DocumentUploadSectionProps {
 }

 interface Step3UploadDocumentsProps {
+  step: number;
  setStep: (step: number) => void;
  setSubStep: (subStep: number) => void;
+  setStepValidationStatus: StepValidationStatusSetter;
  selectedPassportOption: string;
  selectedDestinationCountryOption: string;
  showCivilStatusDocumentsInfoDialog: () => void;
  onSubStepValidation: (isValid: boolean) => void;
+  editedCompletedRef: RefObject<Set<number>>;
 }

 const BackButton = (props: BackButtonProps) => {
@ -149,12 +154,15 @@ const DocumentUploadSection = (props: DocumentUploadSectionProps) => {

 const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
  const {
+    step,
    setStep,
    setSubStep,
+    setStepValidationStatus,
    selectedPassportOption,
    selectedDestinationCountryOption,
    showCivilStatusDocumentsInfoDialog,
    onSubStepValidation,
+    editedCompletedRef,
  } = props;

  const [isKTPUploaded, setIsKTPUploaded] = useState(false);
@ -162,6 +170,22 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
  const [isCivilStatusUploaded, setIsCivilStatusUploaded] = useState(false);
  const [isOldPassportUploaded, setIsOldPassportUploaded] = useState(false);

+  const onBackPress = () => {
+    changeStep({
+      currentStep: step,
+      targetStep: 2,
+      setStep,
+      setSubStep: () =>
+        setSubStep(
+          selectedDestinationCountryOption === 'destination_country_not_set'
+            ? 10
+            : 11,
+        ),
+      setStepValidationStatus,
+      editedCompletedRef,
+    });
+  };
+
  const onNextPress = () => {
    const isFormValid =
      isKTPUploaded &&
@ -175,23 +199,20 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
      onSubStepValidation(false);
    }

-    setStep(4);
-    setSubStep(1);
+    changeStep({
+      currentStep: step,
+      targetStep: 4,
+      setStep,
+      setSubStep: () => setSubStep(1),
+      setStepValidationStatus,
+      editedCompletedRef,
+    });
  };

  return (
    <ScrollView>
      <View style={styles.subStepContainer}>
-        <BackButton
-          onPress={() => {
-            setStep(2);
-            setSubStep(
-              selectedDestinationCountryOption === 'destination_country_not_set'
-                ? 10
-                : 11,
-            );
-          }}
-        />
+        <BackButton onPress={onBackPress} />

        <View style={{marginTop: 12, marginBottom: 16, gap: 4}}>
          <Text style={styles.subStepDesc}>
--- a/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep1.tsx
+++ b/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep1.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, {RefObject} 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';
@ -9,17 +9,40 @@ import postalCodeData from '../../../../data/DropdownData/PostalCodeData';
 import districtData from '../../../../data/DropdownData/DistrictData';
 import cityData from '../../../../data/DropdownData/CityData';
 import provinceData from '../../../../data/DropdownData/ProvinceData';
+import {changeStep} from '../../../../utils/stepNavigation';
+import { StepValidationStatusSetter } from '../../../../../types/step';

 type Step4ApplicantAdditionalDataSubStep1Props = {
+  step: number;
  setStep: (step: number) => void;
  setSubStep: (subStep: number) => void;
+  setStepValidationStatus: StepValidationStatusSetter;
  checkedOption: boolean;
  setCheckedOption: React.Dispatch<React.SetStateAction<boolean>>;
+  editedCompletedRef: RefObject<Set<number>>;
 };

 const Step4ApplicantAdditionalDataSubStep1: React.FC<
  Step4ApplicantAdditionalDataSubStep1Props
-> = ({setStep, setSubStep, checkedOption, setCheckedOption}) => {
+> = ({
+  step,
+  setStep,
+  setSubStep,
+  setStepValidationStatus,
+  checkedOption,
+  setCheckedOption,
+  editedCompletedRef,
+}) => {
+  const onBackPress = () => {
+    changeStep({
+      currentStep: step,
+      targetStep: 3,
+      setStep,
+      setStepValidationStatus,
+      editedCompletedRef,
+    });
+  };
+
  return (
    <ScrollView>
      <View style={styles.subStepContainer}>
@ -28,9 +51,7 @@ const Step4ApplicantAdditionalDataSubStep1: React.FC<
            transform: [{scale: pressed ? 0.99 : 1}],
            marginBottom: 12,
          })}
-          onPress={() => {
-            setStep(3);
-          }}>
+          onPress={onBackPress}>
          <Button
            mode="contained"
            icon="chevron-left"
--- a/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep2.tsx
+++ b/src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep2.tsx
@ -1,6 +1,5 @@
-import React from 'react';
+import React, {RefObject, useState} 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';
@ -9,14 +8,96 @@ import jobData from '../../../../data/DropdownData/JobData';
 import nationalityData from '../../../../data/DropdownData/NationalityData';
 import {PassportAppointment} from '../../../../navigation/type';
 import {addData, getData} from '../../../../helper/asyncStorageHelper';
+import {changeStep} from '../../../../utils/stepNavigation';
+import { StepValidationStatusSetter } from '../../../../../types/step';

-const Step4ApplicantAdditionalDataSubStep2 = ({
-  setStep,
-  setSubStep,
-}: {
+type Step4ApplicantAdditionalDataSubStep2Props = {
+  step: number;
  setStep: (step: number) => void;
  setSubStep: (subStep: number) => void;
-}) => {
+  setStepValidationStatus: StepValidationStatusSetter;
+  onSubStepValidation: (isValid: boolean) => void;
+  editedCompletedRef: RefObject<Set<number>>;
+};
+
+const Step4ApplicantAdditionalDataSubStep2 = ({
+  step,
+  setStep,
+  setSubStep,
+  setStepValidationStatus,
+  onSubStepValidation,
+  editedCompletedRef,
+}: Step4ApplicantAdditionalDataSubStep2Props) => {
+  const [job, setJob] = useState('');
+  const [phone, setPhone] = useState('');
+  const [motherName, setMotherName] = useState('');
+  const [motherNation, setMotherNation] = useState('');
+  const [motherAddress, setMotherAddress] = useState('');
+
+  const isFormValid =
+    job.trim() !== '' &&
+    phone.trim() !== '' &&
+    motherName.trim() !== '' &&
+    motherNation.trim() !== '' &&
+    motherAddress.trim() !== '';
+
+  const handleSaveDraft = async () => {
+    if (isFormValid) {
+      onSubStepValidation(true);
+
+      // Ambil data appointment yang sudah tersimpan
+      const storedAppointments: PassportAppointment[] =
+        (await getData('passportAppointments')) || [];
+
+      // Ambil ID terakhir dan hitung ID baru
+      const lastId = storedAppointments.length
+        ? Math.max(...storedAppointments.map(item => Number(item.id)))
+        : 0;
+      const nextId = (lastId + 1).toString();
+
+      // Buat appointment baru dengan ID yang sudah dihitung
+      const newAppointment: PassportAppointment = {
+        id: nextId,
+        applicantName: 'Salwa Aisyah Adhani',
+        applicantCode: '1038000008887777',
+        appointmentDate: 'Selasa, 20 Mei 2025',
+        appointmentTime: '10:00-11:00 WIB',
+        serviceUnit: 'Kantor Imigrasi Depok',
+        status: 'Menunggu Pembayaran',
+        submissionDate: 'Kamis, 15 Mei 2025 21:30',
+        serviceCode: 'EH-LP7RNC',
+        applicationDetails: {
+          nationalIdNumber: '3271234560009123456',
+          gender: 'Wanita',
+          applicationType: 'Penggantian Paspor',
+          replacementReason: 'Penuh/Halaman Penuh',
+          applicationPurpose: 'Wisata/Liburan',
+          passportType: 'PASPOR ELEKTRONIK POLIKARBONAT 5 TAHUN',
+          fee: '650.000',
+        },
+      };
+
+      // Simpan appointment baru
+      await addData<PassportAppointment>(
+        'passportAppointments',
+        newAppointment,
+      );
+
+      const updatedAppointments = await getData('passportAppointments');
+      console.log('Data yang berhasil ditambahkan:', updatedAppointments);
+    } else {
+      onSubStepValidation(false);
+    }
+
+    changeStep({
+      currentStep: step,
+      targetStep: 5,
+      setStep,
+      setStepValidationStatus,
+      editedCompletedRef,
+    });
+  };
+
  return (
    <ScrollView>
      <View style={styles.subStepContainer}>
@ -37,6 +118,7 @@ const Step4ApplicantAdditionalDataSubStep2 = ({
            Kembali
          </Button>
        </Pressable>
+
        <Text style={styles.subStepDesc}>
          Data di bawah ini harus sesuai dengan keterangan pada KTP pemohon.
          Data yang bertanda (
@ -58,11 +140,15 @@ const Step4ApplicantAdditionalDataSubStep2 = ({
            isRequired
            isDropdown
            dropdownItemData={jobData}
+            value={job}
+            onChangeText={setJob}
          />
          <TextInputComponent
            title="Nomor Telepon"
            placeholder="Contoh: 08513456789"
            isRequired
+            value={phone}
+            onChangeText={setPhone}
          />
        </View>

@ -78,6 +164,8 @@ const Step4ApplicantAdditionalDataSubStep2 = ({
            title="Nama Ibu"
            placeholder="Masukkan nama lengkap ibu"
            isRequired
+            value={motherName}
+            onChangeText={setMotherName}
          />
          <TextInputComponent
            title="Kewarganegaraan Ibu"
@ -85,6 +173,8 @@ const Step4ApplicantAdditionalDataSubStep2 = ({
            isRequired
            isDropdown
            dropdownItemData={nationalityData}
+            value={motherNation}
+            onChangeText={setMotherNation}
          />
          <TextInputComponent
            title="Alamat Ibu"
@ -93,6 +183,8 @@ const Step4ApplicantAdditionalDataSubStep2 = ({
            supportText="0/100 karakter"
            containerHeight={90}
            isMultiline
+            value={motherAddress}
+            onChangeText={setMotherAddress}
          />
        </View>

@ -152,49 +244,7 @@ const Step4ApplicantAdditionalDataSubStep2 = ({

        <Button
          mode="contained"
-          onPress={async () => {
-            // Ambil data appointment yang sudah tersimpan
-            const storedAppointments: PassportAppointment[] =
-              (await getData('passportAppointments')) || [];
-
-            // Ambil ID terakhir dan hitung ID baru
-            const lastId = storedAppointments.length
-              ? Math.max(...storedAppointments.map(item => Number(item.id)))
-              : 0;
-            const nextId = (lastId + 1).toString();
-
-            // Buat appointment baru dengan ID yang sudah dihitung
-            const newAppointment: PassportAppointment = {
-              id: nextId,
-              applicantName: 'Salwa Aisyah Adhani',
-              applicantCode: '1038000008887777',
-              appointmentDate: 'Selasa, 20 Mei 2025',
-              appointmentTime: '10:00-11:00 WIB',
-              serviceUnit: 'Kantor Imigrasi Depok',
-              status: 'Menunggu Pembayaran',
-              submissionDate: 'Kamis, 15 Mei 2025 21:30',
-              serviceCode: 'EH-LP7RNC',
-              applicationDetails: {
-                nationalIdNumber: '3271234560009123456',
-                gender: 'Wanita',
-                applicationType: 'Penggantian Paspor',
-                replacementReason: 'Penuh/Halaman Penuh',
-                applicationPurpose: 'Wisata/Liburan',
-                passportType: 'PASPOR ELEKTRONIK POLIKARBONAT 5 TAHUN',
-                fee: '650.000',
-              },
-            };
-
-            // Simpan appointment baru
-            await addData<PassportAppointment>(
-              'passportAppointments',
-              newAppointment,
-            );
-
-            const updatedAppointments = await getData('passportAppointments');
-            console.log('Data yang berhasil ditambahkan:', updatedAppointments);
-            setStep(5);
-          }}
+          onPress={handleSaveDraft}
          style={[styles.subStepButtonContained, {marginBottom: 8}]}
          textColor={Colors.neutral100.color}>
          Simpan Draft
--- a/src/screens/regularPassport/steps/Step5ApplicationTypeAndApplicantData/Step5ApplicationTypeAndApplicantData.tsx
+++ b/src/screens/regularPassport/steps/Step5ApplicationTypeAndApplicantData/Step5ApplicationTypeAndApplicantData.tsx
@ -9,12 +9,15 @@ import {PassportAppointment} from '../../../../navigation/type';

 type Step5ApplicationTypeAndApplicantDataProps = {
  setStep: (step: number) => void;
-  setSubStep: (subStep: number) => void;
  showEditDataSheet: () => void;
+  navigation: any;
+  onSubStepValidation: (isValid: boolean) => void;
 };

-const Step5Content = (props: Step5ApplicationTypeAndApplicantDataProps) => {
-  const {setStep, setSubStep, showEditDataSheet} = props;
+const Step5ApplicationTypeAndApplicantData = (
+  props: Step5ApplicationTypeAndApplicantDataProps,
+) => {
+  const {setStep, showEditDataSheet, navigation, onSubStepValidation} = props;

  const [lastAppointment, setLastAppointment] = useState<PassportAppointment>();

@ -32,6 +35,18 @@ const Step5Content = (props: Step5ApplicationTypeAndApplicantDataProps) => {
    fetchData();
  }, []);

+  const onNextPress = () => {
+    onSubStepValidation(true);
+    setStep(6);
+  };
+
+  const onBackHomePress = () => {
+    navigation.reset({
+      index: 0,
+      routes: [{name: 'NavigationRoute'}],
+    });
+  };
+
  return (
    <View style={styles.subStepContainer}>
      <Text style={styles.subStepDesc}>
@ -104,20 +119,17 @@ const Step5Content = (props: Step5ApplicationTypeAndApplicantDataProps) => {
      <View style={[styles.subStepButtonContainer, {marginTop: 12}]}>
        <Button
          mode="contained"
-          onPress={() => setStep(6)}
+          onPress={onNextPress}
          style={styles.subStepButtonContained}
          textColor={Colors.neutral100.color}>
          Lanjut
        </Button>
        <Button
          mode="outlined"
-          onPress={() => {
-            setStep(4);
-            setSubStep(2);
-          }}
+          onPress={onBackHomePress}
          style={styles.subStepButtonOutlined}
          textColor={Colors.primary30.color}>
-          Kembali
+          Beranda
        </Button>
      </View>
    </View>
@ -137,4 +149,4 @@ const DetailRow = ({
  </View>
 );

-export default Step5Content;
+export default Step5ApplicationTypeAndApplicantData;
--- a/src/screens/regularPassport/steps/Step6ApplicationTypeAndApplicantData/Step6ApplicationTypeAndApplicantData.tsx
+++ b/src/screens/regularPassport/steps/Step6ApplicationTypeAndApplicantData/Step6ApplicationTypeAndApplicantData.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {ScrollView, View, Text} from 'react-native';
 import {Button, Divider} from 'react-native-paper';
 import TextInputComponent from '../../../../components/TextInput';
@ -15,13 +15,16 @@ type Step6ApplicationTypeAndApplicantDataProps = {
  showSelectDateSheet: () => void;
 };

-const Step6ApplicationTypeAndApplicantData = (props: Step6ApplicationTypeAndApplicantDataProps) => {
+const Step6ApplicationTypeAndApplicantData = (
+  props: Step6ApplicationTypeAndApplicantDataProps,
+) => {
  const {
    showFinalizationConfirmationDialog,
    showPassportTypeInfoDialog,
    showSearchLocationSheet,
    showSelectDateSheet,
  } = props;
+
  return (
    <ScrollView>
      <View style={styles.subStepContainer}>
--- a/src/screens/regularPassport/steps/Step7ApplicationFeeDetails/Step7ApplicationFeeDetails.tsx
+++ b/src/screens/regularPassport/steps/Step7ApplicationFeeDetails/Step7ApplicationFeeDetails.tsx
@ -12,10 +12,12 @@ import {getData} from '../../../../helper/asyncStorageHelper';
 type Step7ApplicationFeeDetailsProps = {
  showSubmitSuccessDialog: () => void;
  setLastCompletedSteps: () => void;
+  onSubStepValidation: (isValid: boolean) => void;
 };

 const Step7ApplicationFeeDetails = (props: Step7ApplicationFeeDetailsProps) => {
-  const {showSubmitSuccessDialog, setLastCompletedSteps} = props;
+  const {showSubmitSuccessDialog, setLastCompletedSteps, onSubStepValidation} =
+    props;
  const [lastAppointment, setLastAppointment] = useState<PassportAppointment>();

  useEffect(() => {
@ -32,6 +34,12 @@ const Step7ApplicationFeeDetails = (props: Step7ApplicationFeeDetailsProps) => {
    fetchData();
  }, []);

+  const onNextPress = () => {
+    onSubStepValidation(true);
+    showSubmitSuccessDialog();
+    setLastCompletedSteps();
+  };
+
  return (
    <ScrollView>
      <View style={[styles.subStepContainer, {paddingBottom: 0}]}>
@ -215,10 +223,7 @@ const Step7ApplicationFeeDetails = (props: Step7ApplicationFeeDetailsProps) => {
          mode="contained"
          style={styles.subStepButtonContained}
          textColor={Colors.neutral100.color}
-          onPress={() => {
-            showSubmitSuccessDialog();
-            setLastCompletedSteps();
-          }}>
+          onPress={onNextPress}>
          Kembali ke Halaman Utama
        </Button>
      </View>