Add UI for the See Requirements screen

src/navigation/RootStack.tsx

@@ -14,12 +14,12 @@ import TermsAndConnditionsScreen from '../screens/termsAndConditions';
 import NavigationRouteScreen from '../screens/navigationRoute';
 import SetPasswordScreen from '../screens/setPassword';
 import RegularPassportScreen from '../screens/regularPassport';
-import ExpressPassportScreen from '../screens/expressPassport';
 import GuidebookScreen from '../screens/guidebook';
 import EazyPassportScreen from '../screens/eazyPassport';
 import ApplicationDetailScreen from '../screens/applicationDetail';
 import PassportRequirementsScreen from '../screens/passportRequirements';
 import ApplicationGuideScreen from '../screens/applicationGuide';
+import SeeRequirementsScreen from '../screens/seeRequirements';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -89,11 +89,6 @@ function RootStack() {
         component={RegularPassportScreen}
         options={{headerShown: false}}
       />
-      <Stack.Screen
-        name="ExpressPassport"
-        component={ExpressPassportScreen}
-        options={{headerShown: false}}
-      />
       <Stack.Screen
         name="Guidebook"
         component={GuidebookScreen}
@@ -119,6 +114,11 @@ function RootStack() {
         component={PassportRequirementsScreen}
         options={{headerShown: false}}
       />
+      <Stack.Screen
+        name="SeeRequirements"
+        component={SeeRequirementsScreen}
+        options={{headerShown: false}}
+      />
     </Stack.Navigator>
   );
 }

src/navigation/type.ts

@@ -14,10 +14,10 @@ export type RootStackParamList = {
   CloseAccount: undefined;
   SetPassword: undefined;
   RegularPassport: undefined;
-  ExpressPassport: undefined;
   Guidebook: undefined;
   EazyPassport: undefined;
   ApplicationDetail: {data: PassportAppointmentData};
   ApplicationGuide: undefined;
   PassportRequirements: undefined;
+  SeeRequirements: undefined;
 };

src/screens/applicationDetail/index.tsx

@@ -17,6 +17,7 @@ type ApplicationDetailScreenNavigationProp = NativeStackNavigationProp<
 const renderApplicantDetailContent = () => {
   const route = useRoute();
   const {data} = route.params as {data: PassportAppointmentData};
+  const navigation = useNavigation<ApplicationDetailScreenNavigationProp>();
 
   return (
     <View style={styles.applicantDetailContentContainer}>
@@ -96,7 +97,14 @@ const renderApplicantDetailContent = () => {
             mode="contained"
             style={styles.applicantDetailContentChildButton}
             onPress={() => {}}>
-            Lanjut Pembayaran
+            Download Surat Pengantar Menuju KANIM
+          </Button>
+          <Button
+            mode="outlined"
+            textColor={Colors.primary30.color}
+            style={styles.applicantDetailContentChildButtonOutlined}
+            onPress={() => navigation.navigate('SeeRequirements')}>
+            Lihat Persyaratan
           </Button>
         </>
       ) : data.status === 'Permohonan Kadaluarsa' ? (
@@ -125,7 +133,7 @@ const renderApplicantDetailContent = () => {
             mode="contained"
             style={styles.applicantDetailContentChildButton}
             onPress={() => {}}>
-            Lihat Persyaratan
+            Lanjut Pembayaran
           </Button>
         </>
       )}

src/screens/applicationDetail/styles.tsx

@@ -152,6 +152,10 @@ const styles = StyleSheet.create({
     marginTop: 8,
     backgroundColor: Colors.primary30.color,
   },
+  applicantDetailContentChildButtonOutlined: {
+    marginTop: 8,
+    borderColor: Colors.primary30.color,
+  },
 });
 
 export default styles;

src/screens/expressPassport/index.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import {Text, View} from 'react-native';
-import styles from './styles';
-
-function ExpressPassportScreen() {
-  return (
-    <View style={styles.container}>
-      <Text>Express Passport Screen</Text>
-    </View>
-  );
-}
-
-export default ExpressPassportScreen;

src/screens/expressPassport/styles.tsx

@@ -1,13 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-    justifyContent: 'center',
-  },
-});
-
-export default styles;

src/screens/home/index.tsx

@@ -148,7 +148,7 @@ const RenderContent = ({showDialog}: RenderContentProps) => {
           </View>
           <View style={styles.serviceOptionContainer}>
             <Pressable
-              onPress={() => navigation.navigate('ExpressPassport')}
+              onPress={showDialog}
               style={({pressed}) => [
                 styles.serviceIcon,
                 {

src/screens/seeRequirements/index.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {StatusBar, Text, View} from 'react-native';
+import styles from './styles';
+import {RootStackParamList} from '../../navigation/type';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {useNavigation} from '@react-navigation/native';
+import Colors from '../../../assets/styles/Colors';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+type SeeRequirementsScreenNavigationProp = NativeStackNavigationProp<
+  RootStackParamList,
+  'SeeRequirements'
+>;
+
+function SeeRequirementsScreen() {
+  const navigation = useNavigation<SeeRequirementsScreenNavigationProp>();
+
+  return (
+    <View style={styles.container}>
+      <StatusBar
+        backgroundColor={Colors.neutral100.color}
+        barStyle="dark-content"
+      />
+      <View style={styles.appBarContainer}>
+        <Icon
+          name="arrow-left"
+          size={24}
+          style={styles.appBarIcon}
+          color={Colors.secondary30.color}
+          onPress={() => navigation.goBack()}
+        />
+        <Text style={styles.appBarTitle}>Persyaratan dan Ketentuan</Text>
+      </View>
+      <View style={styles.textContentContainer}>
+        <View style={styles.textContentWrapper}>
+          <Text style={styles.textContentStyle}>1.</Text>
+          <Text style={[styles.textContentStyle, {flex: 1}]}>
+            Pemohon wajib hadir 15 menit sebelum jam kedatangan dimulai;
+          </Text>
+        </View>
+        <View style={styles.textContentWrapper}>
+          <Text style={styles.textContentStyle}>2.</Text>
+          <Text style={[styles.textContentStyle, {flex: 1}]}>
+            Membawa dokumen persyaratan permohonan paspor asli sesuai tujuan
+            permohonan paspor;
+          </Text>
+        </View>
+        <View style={styles.textContentWrapper}>
+          <Text style={styles.textContentStyle}>3.</Text>
+          <Text style={[styles.textContentStyle, {flex: 1}]}>
+            Permohonan penggantian paspor wajib membawa paspor lama;
+          </Text>
+        </View>
+        <View style={styles.textContentWrapper}>
+          <Text style={styles.textContentStyle}>4.</Text>
+          <Text style={[styles.textContentStyle, {flex: 1}]}>
+            Apabila anda tidak hadir sesuai jadwal kedatangan dan tidak
+            melakukan ubah jadwal, maka permohonan paspor anda dibatalkan dan
+            harus melakukan pendaftaran ulang;
+          </Text>
+        </View>
+        <View style={styles.textContentWrapper}>
+          <Text style={styles.textContentStyle}>5.</Text>
+          <Text style={[styles.textContentStyle, {flex: 1}]}>
+            Permohonan paspor dapat ditolak dalam hal:
+          </Text>
+        </View>
+        <View style={styles.textContentAlphabetListContainer}>
+          <View style={styles.textContentWrapper}>
+            <Text style={styles.textContentStyle}>a.</Text>
+            <Text style={[styles.textContentStyle, {flex: 1}]}>
+              Termasuk dalam daftar pencegahan dan penangkalan;
+            </Text>
+          </View>
+          <View style={styles.textContentWrapper}>
+            <Text style={styles.textContentStyle}>b.</Text>
+            <Text style={[styles.textContentStyle, {flex: 1}]}>
+              Terindikasi Pekerja Migran Indonesia (PMI) Non Prosedural;
+            </Text>
+          </View>
+          <View style={styles.textContentWrapper}>
+            <Text style={styles.textContentStyle}>c.</Text>
+            <Text style={[styles.textContentStyle, {flex: 1}]}>
+              Memberikan data tidak sah dan/atau keterangan tidak benar;
+            </Text>
+          </View>
+          <View style={styles.textContentWrapper}>
+            <Text style={styles.textContentStyle}>d.</Text>
+            <Text style={[styles.textContentStyle, {flex: 1}]}>
+              Hal lain yang dianggap oleh petugas akan dipergunakan untuk tujuan
+              melawan hukum;
+            </Text>
+          </View>
+        </View>
+        <View style={styles.textContentWrapper}>
+          <Text style={styles.textContentStyle}>6.</Text>
+          <Text style={[styles.textContentStyle, {flex: 1}]}>
+            Apabila terdapat kesalahan dari pihak pemohon paspor sebagaimana
+            ketentuan di atas, pembayaran yang telah disetorkan pada Kas Negara
+            tidak dapat dikembalikan;
+          </Text>
+        </View>
+        <View style={styles.textContentWrapper}>
+          <Text style={styles.textContentStyle}>7.</Text>
+          <Text style={[styles.textContentStyle, {flex: 1}]}>
+            Dengan membaca dan menyetujui persyaratan dan ketentuan ini, pemohon
+            telah siap dan mematuhi segala konsekuensi yang berakibat secara
+            hukum.
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default SeeRequirementsScreen;

src/screens/seeRequirements/styles.tsx

@@ -0,0 +1,49 @@
+import {StyleSheet} from 'react-native';
+import Colors from '../../../assets/styles/Colors';
+import FontFamily from '../../../assets/styles/FontFamily';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.neutral100.color,
+  },
+  appBarTitle: {
+    color: Colors.secondary30.color,
+    ...FontFamily.notoSansRegular,
+    fontSize: 20,
+    marginStart: 16,
+    includeFontPadding: false,
+  },
+  appBarIcon: {
+    marginLeft: 16,
+  },
+  appBarContainer: {
+    height: 64,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.neutral100.color,
+  },
+  textContentContainer: {
+    marginTop: 4,
+    marginHorizontal: 16,
+    gap: 4,
+  },
+  textContentWrapper: {
+    flexDirection: 'row',
+    gap: 6
+  },
+  textContentStyle: {
+    ...FontFamily.notoSansRegular,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+    fontSize: 12,
+    lineHeight: 20,
+    textAlign: 'justify',
+  },
+  textContentAlphabetListContainer: {
+    marginStart: 16,
+    gap: 4,
+  }
+});
+
+export default styles;