Update the top back button style in the step flow

package-lock.json

@@ -8,7 +8,7 @@
       "name": "mpaspor",
       "version": "0.0.1",
       "dependencies": {
-        "@react-native-async-storage/async-storage": "^2.1.2",
+        "@react-native-async-storage/async-storage": "^2.2.0",
         "@react-native-community/datetimepicker": "^8.3.0",
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
@@ -2795,10 +2795,9 @@
       }
     },
     "node_modules/@react-native-async-storage/async-storage": {
-      "version": "2.1.2",
+      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
-      "integrity": "sha512-dvlNq4AlGWC+ehtH12p65+17V0Dx7IecOWl6WanF2ja38O1Dcjjvn7jVzkUHJ5oWkQBlyASurTPlTHgKXyYiow==",
+      "integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
-      "license": "MIT",
       "dependencies": {
         "merge-options": "^3.0.4"
       },

package.json

@@ -10,7 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^2.1.2",
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.3.0",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import {View, Pressable, Text} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 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';
 
 type Step2PassportApplicationQuestionnaireSubStep1Props = {
   setStep: (step: number) => void;
@@ -23,18 +24,20 @@ const Step2PassportApplicationQuestionnaireSubStep1 = ({
   return (
     <View style={styles.subStepContainer}>
       <Pressable
+        style={({pressed}) => ({
+          transform: [{scale: pressed ? 0.99 : 1}],
+        })}
         onPress={() => {
           setStep(1);
           setSubStep(3);
-        }}
+        }}>
-        style={({pressed}) => [
+        <Button
-          styles.subStepButtonBackWrapper,
+          mode="contained"
-          {
+          icon="chevron-left"
-            transform: [{scale: pressed ? 0.99 : 1}],
+          textColor={Colors.neutral100.color}
-          },
+          style={styles.subStepButtonBackContainer}>
-        ]}>
+          Kembali
-        <Icon name="chevron-left" size={24} />
+        </Button>
-        <Text style={styles.subStepButtonBackText}>Kembali</Text>
       </Pressable>
 
       <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
@@ -21,20 +20,21 @@ const Step2PassportApplicationQuestionnaireSubStep10 = (
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             selectedDestinationCountryOption === 'destination_country_not_set'
               ? setSubStep(7)
               : setSubStep(9);
-          }}
+          }}>
-          style={({pressed}) => [
+          <Button
-            styles.subStepButtonBackWrapper,
+            mode="contained"
-            {
+            icon="chevron-left"
-              transform: [{scale: pressed ? 0.99 : 1}],
+            textColor={Colors.neutral100.color}
-              marginBottom: 8,
+            style={styles.subStepButtonBackContainer}>
-            },
+            Kembali
-          ]}>
+          </Button>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import FontFamily from '../../../../../assets/styles/FontFamily';
@@ -27,16 +26,17 @@ const Step2PassportApplicationQuestionnaireSubStep11 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(10)}
+          style={({pressed}) => ({
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
             transform: [{scale: pressed ? 0.99 : 1}],
-              marginBottom: 8,
+          })}
-            },
+          onPress={() => setSubStep(10)}>
-          ]}>
+          <Button
-          <Icon name="chevron-left" size={24} />
+            mode="contained"
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -26,15 +26,19 @@ const Step2PassportApplicationQuestionnaireSubStep2 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             setSubStep(1);
-          }}
+          }}>
-          style={({pressed}) => [
+          <Button
-            styles.subStepButtonBackWrapper,
+            mode="contained"
-            {transform: [{scale: pressed ? 0.99 : 1}]},
+            icon="chevron-left"
-          ]}>
+            textColor={Colors.neutral100.color}
-          <Icon name="chevron-left" size={24} />
+            style={styles.subStepButtonBackContainer}>
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Pressable, Text} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import Colors from '../../../../../assets/styles/Colors';
@@ -16,18 +15,19 @@ const Step2PassportApplicationQuestionnaireSubStep3 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             setSubStep(2);
-          }}
+          }}>
-          style={({pressed}) => [
+          <Button
-            styles.subStepButtonBackWrapper,
+            mode="contained"
-            {
+            icon="chevron-left"
-              transform: [{scale: pressed ? 0.99 : 1}],
+            textColor={Colors.neutral100.color}
-              marginBottom: 8,
+            style={styles.subStepButtonBackContainer}>
-            },
+            Kembali
-          ]}>
+          </Button>
-          <Icon name="chevron-left" size={24} />
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
         </Pressable>
 
         <View style={styles.subStepTextWrapper}>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Pressable, Text} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import Colors from '../../../../../assets/styles/Colors';
@@ -16,16 +15,19 @@ const Step2PassportApplicationQuestionnaireSubStep4 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(3)}
+          style={({pressed}) => ({
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
             transform: [{scale: pressed ? 0.99 : 1}],
-              marginBottom: 8,
+          })}
-            },
+          onPress={() => {
-          ]}>
+            setSubStep(3);
-          <Icon name="chevron-left" size={24} />
+          }}>
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepTextWrapper}>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
@@ -17,15 +16,19 @@ const Step2PassportApplicationQuestionnaireSubStep5 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(4)}
+          style={({pressed}) => ({
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
             transform: [{scale: pressed ? 0.99 : 1}],
-            },
+          })}
-          ]}>
+          onPress={() => {
-          <Icon name="chevron-left" size={24} />
+            setSubStep(4);
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+          }}>
+          <Button
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import passportApplicationPurposeOptions from '../../../../data/Options/PassportApplicationPurposeOptions';
 import styles from '../styles';
@@ -27,19 +26,21 @@ const Step2PassportApplicationQuestionnaireSubStep6 = (
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             selectedPassportOption === 'already'
               ? setSubStep(5)
               : setSubStep(1);
-          }}
+          }}>
-          style={({pressed}) => [
+          <Button
-            styles.subStepButtonBackWrapper,
+            mode="contained"
-            {
+            icon="chevron-left"
-              transform: [{scale: pressed ? 0.99 : 1}],
+            textColor={Colors.neutral100.color}
-            },
+            style={styles.subStepButtonBackContainer}>
-          ]}>
+            Kembali
-          <Icon name="chevron-left" size={24} />
+          </Button>
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -1,6 +1,5 @@
 import React, {useState} from 'react';
-import {ScrollView, View, Text, Pressable} from 'react-native';
+import {ScrollView, View, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
@@ -47,18 +46,20 @@ const Step2PassportApplicationQuestionnaireSubStep7 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+          })}
           onPress={() => {
             setSubStep(6);
             setSelectedDestinationCountryOption('');
-          }}
+          }}>
-          style={({pressed}) => [
+          <Button
-            styles.subStepButtonBackWrapper,
+            mode="contained"
-            {
+            icon="chevron-left"
-              transform: [{scale: pressed ? 0.99 : 1}],
+            textColor={Colors.neutral100.color}
-            },
+            style={styles.subStepButtonBackContainer}>
-          ]}>
+            Kembali
-          <Icon name="chevron-left" size={24} />
+          </Button>
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import {ScrollView, View, Text, Pressable} from 'react-native';
+import {ScrollView, View, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import TextInputComponent from '../../../../components/TextInput';
@@ -17,15 +16,17 @@ const Step2PassportApplicationQuestionnaireSubStep8 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(7)}
+          style={({pressed}) => ({
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
             transform: [{scale: pressed ? 0.99 : 1}],
-            },
+          })}
-          ]}>
+          onPress={() => setSubStep(7)}>
-          <Icon name="chevron-left" size={24} />
+          <Button
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import {ScrollView, View, Text, Pressable} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 import {Button} from 'react-native-paper';
 import styles from '../styles';
 import durationAbroadOptions from '../../../../data/Options/DurationAbroadOptions';
@@ -22,15 +21,17 @@ const Step2PassportApplicationQuestionnaireSubStep9 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
-          onPress={() => setSubStep(8)}
+          style={({pressed}) => ({
-          style={({pressed}) => [
-            styles.subStepButtonBackWrapper,
-            {
             transform: [{scale: pressed ? 0.99 : 1}],
-            },
+          })}
-          ]}>
+          onPress={() => setSubStep(8)}>
-          <Icon name="chevron-left" size={24} />
+          <Button
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+            mode="contained"
+            icon="chevron-left"
+            textColor={Colors.neutral100.color}
+            style={styles.subStepButtonBackContainer}>
+            Kembali
+          </Button>
         </Pressable>
 
         <View style={styles.subStepQuestionnaireOptionContainer}>

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

@@ -31,16 +31,17 @@ const BackButton = (props: BackButtonProps) => {
   const {onPress} = props;
   return (
     <Pressable
-      onPress={onPress}
+      style={({pressed}) => ({
-      style={({pressed}) => [
-        styles.subStepButtonBackWrapper,
-        {
         transform: [{scale: pressed ? 0.99 : 1}],
-          marginBottom: 8,
+      })}
-        },
+      onPress={onPress}>
-      ]}>
+      <Button
-      <Icon name="chevron-left" size={24} />
+        mode="contained"
-      <Text style={styles.subStepButtonBackText}>Kembali</Text>
+        icon="chevron-left"
+        textColor={Colors.neutral100.color}
+        style={styles.subStepButtonBackContainer}>
+        Kembali
+      </Button>
     </Pressable>
   );
 };
@@ -155,7 +156,7 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
           }}
         />
 
-        <View style={{marginBottom: 16, gap: 4}}>
+        <View style={{marginTop: 12, marginBottom: 16, gap: 4}}>
           <Text style={styles.subStepDesc}>
             Layanan yang cocok untuk Anda adalah{' '}
             {selectedPassportOption !== 'already' ? (
@@ -258,7 +259,8 @@ const Step3UploadDocuments = (props: Step3UploadDocumentsProps) => {
         <Button
           mode="contained"
           onPress={() => {
-            setStep(4), setSubStep(1);
+            setStep(4);
+            setSubStep(1);
           }}
           style={styles.subStepButtonContained}
           textColor={Colors.neutral100.color}>

src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep1.tsx

@@ -24,15 +24,20 @@ const Step4ApplicantAdditionalDataSubStep1: React.FC<
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+            marginBottom: 12,
+          })}
           onPress={() => {
             setStep(3);
-          }}
+          }}>
-          style={({pressed}) => [
+          <Button
-            styles.subStepButtonBackWrapper,
+            mode="contained"
-            {transform: [{scale: pressed ? 0.99 : 1}], marginBottom: 8},
+            icon="chevron-left"
-          ]}>
+            textColor={Colors.neutral100.color}
-          <Icon name="chevron-left" size={24} />
+            style={styles.subStepButtonBackContainer}>
-          <Text style={styles.subStepButtonBackText}>Kembali</Text>
+            Kembali
+          </Button>
         </Pressable>
 
         <Text style={styles.subStepDesc}>

src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep2.tsx

@@ -8,10 +8,7 @@ import Colors from '../../../../../assets/styles/Colors';
 import jobData from '../../../../data/DropdownData/JobData';
 import nationalityData from '../../../../data/DropdownData/NationalityData';
 import {PassportAppointment} from '../../../../navigation/type';
-import {
+import {addData, getData} from '../../../../helper/asyncStorageHelper';
-  addData,
-  getData,
-} from '../../../../helper/asyncStorageHelper';
 
 const Step4ApplicantAdditionalDataSubStep2 = ({
   setStep,
@@ -24,19 +21,21 @@ const Step4ApplicantAdditionalDataSubStep2 = ({
     <ScrollView>
       <View style={styles.subStepContainer}>
         <Pressable
+          style={({pressed}) => ({
+            transform: [{scale: pressed ? 0.99 : 1}],
+            marginBottom: 12,
+          })}
           onPress={() => {
             setStep(4);
             setSubStep(1);
-          }}
+          }}>
-          style={({pressed}) => [
+          <Button
-            styles.subStepButtonBackWrapper,
+            mode="contained"
-            {
+            icon="chevron-left"
-              transform: [{scale: pressed ? 0.99 : 1}],
+            textColor={Colors.neutral100.color}
-              marginBottom: 8,
+            style={styles.subStepButtonBackContainer}>
-            },
+            Kembali
-          ]}>
+          </Button>
-          <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.

src/screens/regularPassport/steps/Step5ApplicationTypeAndApplicantData/Step5ApplicationTypeAndApplicantData.tsx

@@ -10,16 +10,13 @@ import {PassportAppointment} from '../../../../navigation/type';
 type Step5ApplicationTypeAndApplicantDataProps = {
   setStep: (step: number) => void;
   setSubStep: (subStep: number) => void;
-  passportAppointmentData: any[];
   showEditDataSheet: () => void;
 };
 
 const Step5Content = (props: Step5ApplicationTypeAndApplicantDataProps) => {
-  const {setStep, setSubStep, passportAppointmentData, showEditDataSheet} =
+  const {setStep, setSubStep, showEditDataSheet} = props;
-    props;
 
-  const [lastAppointment, setLastAppointment] =
+  const [lastAppointment, setLastAppointment] = useState<PassportAppointment>();
-    useState<PassportAppointment>();
 
   useEffect(() => {
     const fetchData = async () => {
@@ -127,7 +124,13 @@ const Step5Content = (props: Step5ApplicationTypeAndApplicantDataProps) => {
   );
 };
 
-const DetailRow = ({label, value}: {label: string; value: string | undefined}) => (
+const DetailRow = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | undefined;
+}) => (
   <View style={styles.applicantDetailTextContentWrapper}>
     <Text style={styles.applicantDetailTextTitle}>{label}</Text>
     <Text style={styles.applicantDetailTextDesc}>{value}</Text>

src/screens/regularPassport/steps/styles.tsx

@@ -48,6 +48,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 4,
   },
+  subStepButtonBackContainer: {
+    alignSelf: 'flex-start',
+    backgroundColor: Colors.primary30.color,
+  },
   subStepButtonBackText: {
     ...FontFamily.notoSansRegular,
     includeFontPadding: false,