diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx new file mode 100644 index 0000000..f259039 --- /dev/null +++ b/src/components/Accordion.tsx @@ -0,0 +1,46 @@ +import {ReactNode, useState} from 'react'; +import {Pressable, StyleSheet, Text, View} from 'react-native'; +import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; +import Colors from '../../assets/styles/Colors'; +import FontFamily from '../../assets/styles/FontFamily'; + +type AccordionProps = { + title: string; + children: ReactNode; +}; + +const Accordion: React.FC = ({title, children}) => { + const [expanded, setExpanded] = useState(false); + + return ( + + setExpanded(!expanded)}> + {title} + + + {expanded && {children}} + + ); +}; + +const styles = StyleSheet.create({ + accordionContainer: { + flexDirection: 'row', + paddingVertical: 12, + justifyContent: 'space-between', + }, + accordionTitle: { + ...FontFamily.notoSansBold, + includeFontPadding: false, + fontSize: 14, + color: Colors.secondary30.color, + }, +}); + +export default Accordion; diff --git a/src/screens/applicationGuide/index.tsx b/src/screens/applicationGuide/index.tsx index aa58a6f..187bf7a 100644 --- a/src/screens/applicationGuide/index.tsx +++ b/src/screens/applicationGuide/index.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import {StatusBar, Text, View} from 'react-native'; +import {ScrollView, StatusBar, Text, View} from 'react-native'; import styles from './styles'; import Colors from '../../../assets/styles/Colors'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import { RootStackParamList } from '../../navigation/type'; -import { useNavigation } from '@react-navigation/native'; -import { NativeStackNavigationProp } from '@react-navigation/native-stack'; +import {RootStackParamList} from '../../navigation/type'; +import {useNavigation} from '@react-navigation/native'; +import {NativeStackNavigationProp} from '@react-navigation/native-stack'; +import Accordion from '../../components/Accordion'; +import FontFamily from '../../../assets/styles/FontFamily'; type ApplicationGuideScreenNavigationProp = NativeStackNavigationProp< RootStackParamList, @@ -14,7 +16,7 @@ type ApplicationGuideScreenNavigationProp = NativeStackNavigationProp< function ApplicationGuideScreen() { const navigation = useNavigation(); - + return ( Panduan Aplikasi + + + + + Untuk dapat masuk ke M-Paspor, Anda diharuskan memiliki akun + dengan cara mendaftar ke aplikasi dengan cara sebagai berikut: + + + 1. + + Buka M-Paspor menampilkan halaman login; + + + + 2. + Pilih Daftar Akun; + + + 3. + + Input data pendaftaran akun; + + + + 4. + + Input kode OTP yang terkirim melalui email (pastikan email aktif + yang digunakan), kemudian klik "Aktivasi" maka akun sudah dapat + digunakan dan dapat untuk login ke aplikasi. + + + + + + Setelah berhasil melakukan registrasi, anda sudah dapat masuk ke + M-Paspor dengan cara sebagai berikut: + + + 1. + + Buka M-Paspor menampilkan halaman login; + + + + 2. + Masukkan Email; + + + 3. + Masukkan Kata Sandi; + + + 4. + Tekan tombol Masuk; + + + 5. + + + Security check + {' '} + berbasis verifikasi CAPTCHA; + + + + 6. + + Jika login berhasil, Anda akan langsung diarahkan ke halaman + Beranda. + + + + + + Jika login berhasil, akan muncul tampilan beranda aplikasi. Pada + beranda, aplikasi M-Paspor menampilkan{' '} + banner, menu + permohonan pengajuan paspor, buku panduan, informasi EAZY + Passport, dan status permohonan. + + + + + 1. + + Pilih permohonan paspor reguler atau percepatan; + + + + 2. + + Pengisian Kuesioner Layanan Permohonan Peruntukan Paspor; + + + + 3. + + Pemohon mengambil atau mengunggah foto KTP sebagai persyaratan + permohonan paspor; + + + + 4. + + Klik Pilih Foto, lalu akan muncul form untuk mengisi Nama, + Tanggal Lahir, dan NIK Pemohon; + + + + 5. + + Selanjutnya yaitu pengisian kuesioner. Pada tahap ini akan + terdapat beberapa pertanyaan, yang menentukan jenis paspor apa + yang kita butuhkan seperti berikut: + + + + + + a. + + + Pemohon mengisi data riwayat kepemilikan paspor (sudah atau + belum pernah memiliki paspor); + + + + + b. + + + Pemohon mengisi tujuan permohonan paspor. Untuk pengajuan + permohonan dengan tujuan Haji dan Umroh tidak memerlukan + upload surat rekomendasi dari Kementerian Agama (sebelumnya + diwajibkan mengisi nomor surat rekomendasi Kemenag di data + tambahan pemohon); + + + + + c. + + + Pemohon mengisi data negara tujuan; + + + + + d. + + + Pemohon mengisi data tempat tinggal di negara tujuan; + + + + + e. + + + Pemohon mengisi kuesioner rencana lama tinggal di luar negeri; + + + + + f. + + + Pemohon mengisi data identitas keluarga atau kerabat di + Indonesia; + + + + + g. + + + Pemohon mengisi data identitas keluarga atau kerabat di negara + tujuan (jika ada). + + + + + 6. + + Tahap selanjutnya, pemohon mengunggah dokumen persyaratan yang + diperlukan seperti berikut: + + + + + + a. + + + Pemohon mengisi data tempat lahir, tanggal lahir, dan jenis + kelamin (wajib). Kemudian Pemohon juga mengunggah data Kartu + keluarga dan akta kelahiran/ ijazah/akta perkawinan/buku + nikah/surat baptis (wajib); + + + + + b. + + + Pemohon mengunggah data tanggal penerbitan KTP, data + kewarganegaraan, data alamat sesuai KTP, dan data alamat + sekarang; + + + + + c. + + + Pemohon mengisi data identitas ibu (wajib), dan ayah (tidak + wajib) serta data pasangan (tidak wajib). + + + + + 7. + + Terlihat jenis permohonan dan data pemohon yang sudah diinput, + kemudian klik Lanjut; + + + + 8. + + Pemohon memilih lokasi, jenis paspor, dan jadwal pengambilan + paspor seperti berikut: + + + + + + a. + + + Pemohon memilih lokasi kantor imigrasi yang dituju untuk + melakukan permohonan dan pengambilan paspor; + + + + + b. + + + Pemohon memilih jenis paspor; + + + + + c. + + + Pemohon memilih tanggal dan waktu kedatangan berdasarkan kuota + yang tersedia dari kantor imigrasi yang terpilih sebelumnya; + + + + + 9. + + Selanjutnya, tahap finalisasi. Pemohon memastikan data yang + diinput sudah benar. Jika sudah, klik "Ya, lanjutkan". Namun, + jika belum yakin, bisa klik "Tidak, saya ingin mengubah data" + untuk mengedit data; + + + + 10. + + Pemohon akan melakukan pembayaran dan kemudian sistem akan + melakukan pengecekan dan menampilkan status pembayaran; + + + + 11. + + Pemohon melakukan pembayaran dengan payment gateway atau kode + billing yang tercantum pada aplikasi dan dokumen PDF pembayaran; + + + + 12. + + Jika sudah terbayar, maka permohonan akan berubah menjadi warna + hijau (indikator permohonan terbayar). Kemudian, Pemohon dapat + mendatangi kantor imigrasi sesuai tanggal kedatangan dengan + membawa bukti terbayar pada aplikasi ini. + + + + + + Pemohon dapat mengajukan perubahan jadwal ( + reschedule) + permohonan dengan ketentuan sebagai berikut: + + + 1. + + Reschedule{' '} + hanya untuk permohonan yang telah terbayar; + + + + 2. + + Pemohon tidak dapat{' '} + reschedule{' '} + dengan tanggal yang sama dengan pengajuan awal; + + + + 3. + + Batas{' '} + reschedule{' '} + hanya 1x dan hanya 30 hari dari tanggal pembayaran pertama. + + + + + + Menu Riwayat menampilkan daftar riwayat permohonan dengan status + yang sudah terbayar, menunggu pembayaran, draft, atau permohonan + kadaluarsa. + + + + ); } diff --git a/src/screens/applicationGuide/styles.tsx b/src/screens/applicationGuide/styles.tsx index e7a8ee8..14a3695 100644 --- a/src/screens/applicationGuide/styles.tsx +++ b/src/screens/applicationGuide/styles.tsx @@ -23,6 +23,31 @@ const styles = StyleSheet.create({ alignItems: 'center', backgroundColor: Colors.neutral100.color, }, + contentContainer: { + marginTop: 4, + marginHorizontal: 16, + marginBottom: 24, + gap: 12, + }, + textContentDesc: { + flex: 1, + color: Colors.primary30.color, + ...FontFamily.notoSansRegular, + fontSize: 12, + textAlign: 'justify', + includeFontPadding: false, + lineHeight: 24, + }, + listFlex: { + flex: 0, + }, + alphabetListWrapper: { + marginStart: 16, + }, + textContentWrapper: { + flexDirection: 'row', + gap: 6, + }, }); export default styles; diff --git a/src/screens/eazyPassport/styles.tsx b/src/screens/eazyPassport/styles.tsx index 6a0ce10..f2fd873 100644 --- a/src/screens/eazyPassport/styles.tsx +++ b/src/screens/eazyPassport/styles.tsx @@ -9,7 +9,7 @@ const styles = StyleSheet.create({ }, textContainer: { gap: 8, - margin: 16 + margin: 16, }, textDesc: { ...FontFamily.notoSansRegular, diff --git a/src/screens/seeRequirements/index.tsx b/src/screens/seeRequirements/index.tsx index e2015b3..53749d3 100644 --- a/src/screens/seeRequirements/index.tsx +++ b/src/screens/seeRequirements/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {StatusBar, Text, View} from 'react-native'; +import {ScrollView, StatusBar, Text, View} from 'react-native'; import styles from './styles'; import {RootStackParamList} from '../../navigation/type'; import {NativeStackNavigationProp} from '@react-navigation/native-stack'; @@ -31,84 +31,86 @@ function SeeRequirementsScreen() { /> Persyaratan dan Ketentuan - - - 1. - - Pemohon wajib hadir 15 menit sebelum jam kedatangan dimulai; - - - - 2. - - Membawa dokumen persyaratan permohonan paspor asli sesuai tujuan - permohonan paspor; - - - - 3. - - Permohonan penggantian paspor wajib membawa paspor lama; - - - - 4. - - Apabila anda tidak hadir sesuai jadwal kedatangan dan tidak - melakukan ubah jadwal, maka permohonan paspor anda dibatalkan dan - harus melakukan pendaftaran ulang; - - - - 5. - - Permohonan paspor dapat ditolak dalam hal: - - - + + - a. + 1. - Termasuk dalam daftar pencegahan dan penangkalan; + Pemohon wajib hadir 15 menit sebelum jam kedatangan dimulai; - b. + 2. - Terindikasi Pekerja Migran Indonesia (PMI) Non Prosedural; + Membawa dokumen persyaratan permohonan paspor asli sesuai tujuan + permohonan paspor; - c. + 3. - Memberikan data tidak sah dan/atau keterangan tidak benar; + Permohonan penggantian paspor wajib membawa paspor lama; - d. + 4. - Hal lain yang dianggap oleh petugas akan dipergunakan untuk tujuan - melawan hukum; + Apabila anda tidak hadir sesuai jadwal kedatangan dan tidak + melakukan ubah jadwal, maka permohonan paspor anda dibatalkan dan + harus melakukan pendaftaran ulang; + + + + 5. + + Permohonan paspor dapat ditolak dalam hal: + + + + + a. + + Termasuk dalam daftar pencegahan dan penangkalan; + + + + b. + + Terindikasi Pekerja Migran Indonesia (PMI) Non Prosedural; + + + + c. + + Memberikan data tidak sah dan/atau keterangan tidak benar; + + + + d. + + Hal lain yang dianggap oleh petugas akan dipergunakan untuk + tujuan melawan hukum; + + + + + 6. + + Apabila terdapat kesalahan dari pihak pemohon paspor sebagaimana + ketentuan di atas, pembayaran yang telah disetorkan pada Kas + Negara tidak dapat dikembalikan; + + + + 7. + + Dengan membaca dan menyetujui persyaratan dan ketentuan ini, + pemohon telah siap dan mematuhi segala konsekuensi yang berakibat + secara hukum. - - 6. - - Apabila terdapat kesalahan dari pihak pemohon paspor sebagaimana - ketentuan di atas, pembayaran yang telah disetorkan pada Kas Negara - tidak dapat dikembalikan; - - - - 7. - - Dengan membaca dan menyetujui persyaratan dan ketentuan ini, pemohon - telah siap dan mematuhi segala konsekuensi yang berakibat secara - hukum. - - - + ); } diff --git a/src/screens/seeRequirements/styles.tsx b/src/screens/seeRequirements/styles.tsx index 657f998..a61b6b4 100644 --- a/src/screens/seeRequirements/styles.tsx +++ b/src/screens/seeRequirements/styles.tsx @@ -26,24 +26,25 @@ const styles = StyleSheet.create({ textContentContainer: { marginTop: 4, marginHorizontal: 16, + marginBottom: 16, gap: 4, }, textContentWrapper: { flexDirection: 'row', - gap: 6 + gap: 6, }, textContentStyle: { ...FontFamily.notoSansRegular, includeFontPadding: false, color: Colors.primary30.color, fontSize: 12, - lineHeight: 20, + lineHeight: 24, textAlign: 'justify', }, textContentAlphabetListContainer: { marginStart: 16, gap: 4, - } + }, }); export default styles;