2110512052/M-Paspor-Redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the top back button style in the step flow

Browse Source
This commit is contained in:
Mochammad Adhi Buchori
2025-06-16 07:37:54 +07:00
parent 081a637463
commit e8c61edeb0
18 changed files with 191 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@ -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",
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.1.2.tgz",
"integrity": "sha512-dvlNq4AlGWC+ehtH12p65+17V0Dx7IecOWl6WanF2ja38O1Dcjjvn7jVzkUHJ5oWkQBlyASurTPlTHgKXyYiow==",
"license": "MIT",
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
"integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
"dependencies": {
"merge-options": "^3.0.4"
},

2
package.json
View File

@ -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",

23
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep1.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
},
]}>
<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.subStepQuestionnaireOptionContainer}>

22
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep10.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
marginBottom: 8,
},
]}>
<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.subStepQuestionnaireOptionContainer}>

22
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep11.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
marginBottom: 8,
},
]}>
<Icon name="chevron-left" size={24} />
<Text style={styles.subStepButtonBackText}>Kembali</Text>
style={({pressed}) => ({
transform: [{scale: pressed ? 0.99 : 1}],
})}
onPress={() => setSubStep(10)}>
<Button
mode="contained"
icon="chevron-left"
textColor={Colors.neutral100.color}
style={styles.subStepButtonBackContainer}>
Kembali
</Button>
</Pressable>
<View style={styles.subStepQuestionnaireOptionContainer}>

18
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep2.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{transform: [{scale: pressed ? 0.99 : 1}]},
]}>
<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.subStepQuestionnaireOptionContainer}>

22
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep3.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
marginBottom: 8,
},
]}>
<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}>

24
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep4.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
marginBottom: 8,
},
]}>
<Icon name="chevron-left" size={24} />
<Text style={styles.subStepButtonBackText}>Kembali</Text>
style={({pressed}) => ({
transform: [{scale: pressed ? 0.99 : 1}],
})}
onPress={() => {
setSubStep(3);
}}>
<Button
mode="contained"
icon="chevron-left"
textColor={Colors.neutral100.color}
style={styles.subStepButtonBackContainer}>
Kembali
</Button>
</Pressable>
<View style={styles.subStepTextWrapper}>

23
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep5.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
},
]}>
<Icon name="chevron-left" size={24} />
<Text style={styles.subStepButtonBackText}>Kembali</Text>
style={({pressed}) => ({
transform: [{scale: pressed ? 0.99 : 1}],
})}
onPress={() => {
setSubStep(4);
}}>
<Button
mode="contained"
icon="chevron-left"
textColor={Colors.neutral100.color}
style={styles.subStepButtonBackContainer}>
Kembali
</Button>
</Pressable>
<View style={styles.subStepQuestionnaireOptionContainer}>

21
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep6.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
},
]}>
<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.subStepQuestionnaireOptionContainer}>

33
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep7.tsx
View File

@ -1,6 +1,5 @@
import React, {useState} from 'react';
import {ScrollView, View, Text, Pressable} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import {ScrollView, View, Pressable} from 'react-native';
import {Button} from 'react-native-paper';
import styles from '../styles';
import TextInputComponent from '../../../../components/TextInput';
@ -23,22 +22,22 @@ const Step2PassportApplicationQuestionnaireSubStep7 = ({
const [countryValue, setCountryValue] = useState<string | null>(null);
const handleCountrySelect = (value: string | null) => {
setCountryValue(value);
setSelectedDestinationCountryOption('');
setCountryValue(value);
setSelectedDestinationCountryOption('');
};
const handleRadioSelect = (value: string) => {
if (value === 'destination_country_not_set') {
setSelectedDestinationCountryOption(value);
setCountryValue(null);
setCountryValue(null);
} else {
setSelectedDestinationCountryOption(value);
setSelectedDestinationCountryOption(value);
}
};
const isRadioButtonSelected = (value: string) => {
if (countryValue !== null) {
return '';
return '';
}
return selectedDestinationCountryOption === value ? value : '';
};
@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
},
]}>
<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.subStepQuestionnaireOptionContainer}>

23
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep8.tsx
View File

@ -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 {ScrollView, View, Pressable} from 'react-native';
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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
},
]}>
<Icon name="chevron-left" size={24} />
<Text style={styles.subStepButtonBackText}>Kembali</Text>
style={({pressed}) => ({
transform: [{scale: pressed ? 0.99 : 1}],
})}
onPress={() => setSubStep(7)}>
<Button
mode="contained"
icon="chevron-left"
textColor={Colors.neutral100.color}
style={styles.subStepButtonBackContainer}>
Kembali
</Button>
</Pressable>
<View style={styles.subStepQuestionnaireOptionContainer}>

21
src/screens/regularPassport/steps/Step2PassportApplicationQuestionnaire/Step2PassportApplicationQuestionnaireSubStep9.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
},
]}>
<Icon name="chevron-left" size={24} />
<Text style={styles.subStepButtonBackText}>Kembali</Text>
style={({pressed}) => ({
transform: [{scale: pressed ? 0.99 : 1}],
})}
onPress={() => setSubStep(8)}>
<Button
mode="contained"
icon="chevron-left"
textColor={Colors.neutral100.color}
style={styles.subStepButtonBackContainer}>
Kembali
</Button>
</Pressable>
<View style={styles.subStepQuestionnaireOptionContainer}>

26
src/screens/regularPassport/steps/Step3UploadDocuments/Step3UploadDocuments.tsx
View File

@ -31,16 +31,17 @@ const BackButton = (props: BackButtonProps) => {
const {onPress} = props;
return (
<Pressable
onPress={onPress}
style={({pressed}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
marginBottom: 8,
},
]}>
<Icon name="chevron-left" size={24} />
<Text style={styles.subStepButtonBackText}>Kembali</Text>
style={({pressed}) => ({
transform: [{scale: pressed ? 0.99 : 1}],
})}
onPress={onPress}>
<Button
mode="contained"
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}>

19
src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep1.tsx
View File

@ -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}) => [
styles.subStepButtonBackWrapper,
{transform: [{scale: pressed ? 0.99 : 1}], marginBottom: 8},
]}>
<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>
<Text style={styles.subStepDesc}>

27
src/screens/regularPassport/steps/Step4ApplicantAdditionalData/Step4ApplicantAdditionalDataSubStep2.tsx
View File

@ -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 {
addData,
getData,
} from '../../../../helper/asyncStorageHelper';
import {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}) => [
styles.subStepButtonBackWrapper,
{
transform: [{scale: pressed ? 0.99 : 1}],
marginBottom: 8,
},
]}>
<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>
<Text style={styles.subStepDesc}>
Data di bawah ini harus sesuai dengan keterangan pada KTP pemohon.

15
src/screens/regularPassport/steps/Step5ApplicationTypeAndApplicantData/Step5ApplicationTypeAndApplicantData.tsx
View File

@ -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} =
props;
const {setStep, setSubStep, showEditDataSheet} = props;
const [lastAppointment, setLastAppointment] =
useState<PassportAppointment>();
const [lastAppointment, setLastAppointment] = 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>

4
src/screens/regularPassport/steps/styles.tsx
View File

@ -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,