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

src/screens/regularPassport/steps/Step3Payment/Step3Payment.tsx

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

src/screens/regularPassport/steps/Step5Verification/Step5Verification.tsx

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

src/screens/regularPassport/steps/Step6Processing/Step6Processing.tsx

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

src/screens/regularPassport/steps/Step7Completion/Step7Completion.tsx

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