Update passport application step flow

src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep10.tsx

@@ -8,17 +8,24 @@ import Colors from '../../../../../assets/styles/Colors';
 import familyRelationshipData from '../../../../data/DropdownData/FamilyRelationshipData';
 
 type Step2PassportApplicationQuestionnaireSubStep10Props = {
+  selectedDestinationCountryOption: string;
+  setStep: (step: number) => void;
   setSubStep: (step: number) => void;
 };
 
-const Step2PassportApplicationQuestionnaireSubStep10 = ({
-  setSubStep,
-}: Step2PassportApplicationQuestionnaireSubStep10Props) => {
+const Step2PassportApplicationQuestionnaireSubStep10 = (
+  props: Step2PassportApplicationQuestionnaireSubStep10Props,
+) => {
+  const {selectedDestinationCountryOption, setStep, setSubStep} = props;
   return (
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(9)}
+          onPress={() => {
+            selectedDestinationCountryOption === 'destination_country_not_set'
+              ? setSubStep(7)
+              : setSubStep(9);
+          }}
           style={({pressed}) => [
             styles.subStepButtonBackWrapper,
             {
@@ -59,7 +66,11 @@ const Step2PassportApplicationQuestionnaireSubStep10 = ({
 
         <Button
           mode="contained"
-          onPress={() => setSubStep(11)}
+          onPress={() => {
+            selectedDestinationCountryOption === 'destination_country_not_set'
+              ? setStep(3)
+              : setSubStep(11);
+          }}
           style={styles.subStepButtonContained}
           textColor={Colors.neutral100.color}>
           Lanjut

src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep6.tsx

@@ -11,18 +11,27 @@ type Step2PassportApplicationQuestionnaireSubStep6Props = {
   setSubStep: (step: number) => void;
   selectedOption: string;
   setSelectedOption: (val: string) => void;
+  selectedPassportOption: string;
 };
 
-const Step2PassportApplicationQuestionnaireSubStep6 = ({
-  setSubStep,
-  selectedOption,
-  setSelectedOption,
-}: Step2PassportApplicationQuestionnaireSubStep6Props) => {
+const Step2PassportApplicationQuestionnaireSubStep6 = (
+  props: Step2PassportApplicationQuestionnaireSubStep6Props,
+) => {
+  const {
+    setSubStep,
+    selectedOption,
+    setSelectedOption,
+    selectedPassportOption,
+  } = props;
   return (
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(5)}
+          onPress={() => {
+            selectedPassportOption === 'already'
+              ? setSubStep(5)
+              : setSubStep(1);
+          }}
           style={({pressed}) => [
             styles.subStepButtonBackWrapper,
             {

src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep7.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
@@ -11,20 +11,46 @@ import countryData from '../../../../data/DropdownData/CountryData';
 
 type Step2PassportApplicationQuestionnaireSubStep7Props = {
   setSubStep: (step: number) => void;
-  selectedOption: string;
-  setSelectedOption: (val: string) => void;
+  selectedDestinationCountryOption: string;
+  setSelectedDestinationCountryOption: (val: string) => void;
 };
 
 const Step2PassportApplicationQuestionnaireSubStep7 = ({
   setSubStep,
-  selectedOption,
-  setSelectedOption,
+  selectedDestinationCountryOption,
+  setSelectedDestinationCountryOption,
 }: Step2PassportApplicationQuestionnaireSubStep7Props) => {
+  const [countryValue, setCountryValue] = useState<string | null>(null);
+
+  const handleCountrySelect = (value: string | null) => {
+    setCountryValue(value); 
+    setSelectedDestinationCountryOption(''); 
+  };
+
+  const handleRadioSelect = (value: string) => {
+    if (value === 'destination_country_not_set') {
+      setSelectedDestinationCountryOption(value);
+      setCountryValue(null); 
+    } else {
+      setSelectedDestinationCountryOption(value); 
+    }
+  };
+
+  const isRadioButtonSelected = (value: string) => {
+    if (countryValue !== null) {
+      return ''; 
+    }
+    return selectedDestinationCountryOption === value ? value : '';
+  };
+
   return (
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(6)}
+          onPress={() => {
+            setSubStep(6);
+            setSelectedDestinationCountryOption('');
+          }}
           style={({pressed}) => [
             styles.subStepButtonBackWrapper,
             {
@@ -41,6 +67,8 @@ const Step2PassportApplicationQuestionnaireSubStep7 = ({
             placeholder="Masukkan negara tujuan"
             isDropdownCountry
             dropdownCountryItemData={countryData}
+            countryValue={countryValue}
+            setCountryValue={handleCountrySelect}
           />
           {destinationCountryOptions.map(option => (
             <RadioButtonOptionComponent
@@ -48,15 +76,19 @@ const Step2PassportApplicationQuestionnaireSubStep7 = ({
               label={option.label}
               description={option.description}
               value={option.value}
-              selectedValue={selectedOption}
-              onSelect={value => setSelectedOption(value)}
+              selectedValue={isRadioButtonSelected(option.value)}
+              onSelect={() => handleRadioSelect(option.value)}
             />
           ))}
         </View>
 
         <Button
           mode="contained"
-          onPress={() => setSubStep(8)}
+          onPress={() => {
+            selectedDestinationCountryOption === 'destination_country_not_set'
+              ? setSubStep(10)
+              : setSubStep(8);
+          }}
           style={styles.subStepButtonContained}
           textColor={Colors.neutral100.color}>
           Lanjut

src/screens/regularPassport/steps/Step3UploadDocuments/Step3UploadDocuments.tsx

@@ -23,6 +23,7 @@ interface Step3UploadDocumentsProps {
   setStep: (step: number) => void;
   setSubStep: (subStep: number) => void;
   selectedPassportOption: string;
+  selectedDestinationCountryOption: string;
   showCivilStatusDocumentsInfoDialog: () => void;
 }
 
@@ -137,6 +138,7 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
     setStep,
     setSubStep,
     selectedPassportOption,
+    selectedDestinationCountryOption,
     showCivilStatusDocumentsInfoDialog,
   } = props;
   return (
@@ -145,7 +147,11 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
         <BackButton
           onPress={() => {
             setStep(2);
-            setSubStep(11);
+            setSubStep(
+              selectedDestinationCountryOption === 'destination_country_not_set'
+                ? 10
+                : 11,
+            );
           }}
         />
 
@@ -153,11 +159,11 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
           <Text style={styles.subStepDesc}>
             Layanan yang cocok untuk Anda adalah{' '}
             {selectedPassportOption !== 'already' ? (
+              <Text style={{...FontFamily.notoSansBold}}>Paspor Baru</Text>
+            ) : (
               <Text style={{...FontFamily.notoSansBold}}>
                 Paspor Penggantian
               </Text>
-            ) : (
-              <Text style={{...FontFamily.notoSansBold}}>Paspor Baru</Text>
             )}
             . Silakan unggah kelengkapan dokumen berikut.
           </Text>
@@ -244,7 +250,7 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
               showCivilStatusDocumentsInfoDialog
             }
           />
-          {selectedPassportOption !== 'already' && (
+          {selectedPassportOption === 'already' && (
             <DocumentUploadSection title="Paspor Lama" isRequired />
           )}
         </View>