From 01c55e2fe63165f895fc1c9476090400a5ef4921 Mon Sep 17 00:00:00 2001 From: Mochammad Adhi Buchori Date: Thu, 24 Apr 2025 10:43:15 +0700 Subject: [PATCH] Imporve code quality of Billing Code screen and finalized Other Method screen UI components --- src/screens/billingCode/index.tsx | 707 +++++++---------------------- src/screens/billingCode/styles.tsx | 3 + src/screens/otherMethod/index.tsx | 172 ++++++- src/screens/otherMethod/styles.tsx | 49 ++ 4 files changed, 381 insertions(+), 550 deletions(-) diff --git a/src/screens/billingCode/index.tsx b/src/screens/billingCode/index.tsx index fe7f5b4..fa18aaa 100644 --- a/src/screens/billingCode/index.tsx +++ b/src/screens/billingCode/index.tsx @@ -13,6 +13,137 @@ type BillingCodeScreenNavigationProp = NativeStackNavigationProp< 'BillingCode' >; +const atmDataList = [ + { + title: 'BCA', + steps: [ + 'Pembayaran', + 'MPN / Pajak', + 'Penerimaan Negara', + 'Masukkan Kode Billing', + ], + }, + { + title: 'BNI', + steps: [ + 'Menu Lainnya', + 'Pembayaran', + 'Pajak/Penerimaan Negara', + 'PajaK/PNBP/BEA & CUKAI', + 'Masukkan Kode Billing', + ], + }, + { + title: 'BRI', + steps: [ + 'Transaksi Lainnya', + 'Pembayaran', + 'Lainnya', + 'MPN', + 'Masukkan Kode Kode Billing', + ], + }, + { + title: 'Mandiri', + steps: [ + 'Bayar/Beli', + 'Penerimaan Negara', + 'Pajak / PNBP / Cukai', + 'Masukkan Kode Billing', + 'Konfirmasi Pembayaran dan klik angka 1', + ], + }, +]; + +const mobileAndInternetBankingDataList = [ + { + title: 'BNI (Mobile Banking)', + steps: [ + 'Masukkan User ID dan M-Pin anda di aplikasi BNI Mobile', + 'Pilih menu Pembayaran', + 'Pilih menu Penerimaan Negara', + 'Masukkan Kode Billing ke kolom nomor tagihan', + 'Konfirmasi pembayaran dan masukkan password transaksi', + 'Print bukti transaksi untuk pengambilan paspor', + ], + }, + { + title: 'BCA (Internet Banking)', + steps: [ + 'Masuk ke https://ibank.klikbca.com', + 'Masukkan User ID dan Pin', + 'Pilih menu Pembayaran', + 'Pilih menu Pajak', + 'Pilih Penerimaan Negara pada kolom jenis pajak', + 'Masukkan kode billing ke kolom kode billing', + 'Konfirmasi pembayaran dan masukkan Key BCA Anda', + 'Print bukti transaksi untuk pengambilan', + ], + }, + { + title: 'BRI (Internet Banking)', + steps: [ + 'Masuk ke https://ib.bri.co.id', + 'Masukkan User ID dan pin', + 'Pilih menu Pembayaran', + 'Pilih menu MPN', + 'Masukkan nomor MPN G3', + 'Konfirmasi pembayaran dan masukkan Password serta M-Token', + 'Print bukti transaksi untuk pengambilan paspor', + ], + }, + { + title: 'BRImo (Mobile Banking)', + steps: [ + 'Login', + 'Masuk ke menu utama', + 'Pilih menu Lainnya', + 'Pilih menu Penerimaan Negara', + 'Masukkan Kode Billing', + 'Konfirmasi pembayaran dan masukkan pin', + 'Print bukti transaksi untuk pengambilan paspor', + ], + }, + { + title: 'Livin’ by Mandiri (Mobile Banking)', + steps: [ + 'Masukkan User ID dan Password Anda di aplikasi', + 'Pilih menu Bayar', + 'Pilih menu Pajak', + 'Pilih Pajak/PNBP/Cukai di kolom Penyedia Jasa', + 'Masukkan Kode Billing dan tekan lanjutkan', + 'Konfirmasi pembayaran dan masukkan pin transaksi', + 'Print bukti transaksi untuk pengambilan paspor', + ], + }, + { + title: 'BSI Mobile (Mobile Banking)', + steps: [ + 'Buka Aplikasi BSI Mobile Banking, pilih menu Bayar', + 'Pilih Penerimaan Negara (MPN)', + 'Pilih Pajak/Cukai/SBSN/Paspor (menu Reinquiry MPN untuk cek jumlah tagihan pajak yang telah dibuat melalui Web MPN)', + 'Masukkan No. Nasabah/No. Tagihan, klik Selanjutnya', + 'Input pin BSI Mobile', + 'Muncul layar konfirmasi, klik Selanjutnya', + 'Transaksi berhasil', + 'Bukti transaksi akan dikirim ke email yang didaftarkan notifikasi BSI Mobile', + ], + }, + { + title: 'BSI Net', + steps: [ + 'Login ke https:// bankbsi.co.id', + 'Pilih menu Pembayaran', + 'Input Aplikasi Pembayaran: Rekening Sumber, Jenis Pembayaran Penerimaan Negara/Pajak/Cukai/SBN, Nomor Pembayaran', + 'Klik Verifikasi Aplikasi Pembayaran', + 'Muncul layar konfirmasi, klik Selanjutnya', + 'Input token & pin otorisasi, klik Submit', + 'Transaksi berhasil', + 'Bukti transaksi akan dikirim ke email yang didaftarkan notifikasi BSI Net', + ], + }, +]; + function BillingCodeScreen() { const navigation = useNavigation(); @@ -69,144 +200,20 @@ function BillingCodeScreen() { - - - - 1. - - Pembayaran - - - - 2. - - MPN/Pajak - - - - 3. - - Penerimaan Negara - - - - 4. - - - Masukkan Kode Billing - - - - - - - - 1. - - Menu Lainnya + {atmDataList.map((atm, atmIndex) => ( + + + {atm.steps.map((step, stepIndex) => ( + + + {stepIndex + 1}. + + {step} + + ))} - - - 2. - - Pembayaran - - - - 3. - - - Pajak/Penerimaan Negara - - - - - 4. - - - PajaK/PNBP/BEA & CUKAI - - - - - 5. - - - Masukkan Kode Billing - - - - - - - - 1. - - Transaksi Lainnya - - - - 2. - - Pembayaran - - - - 3. - - Lainnya - - - - 4. - - MPN - - - - 5. - - - Masukkan Kode Billing - - - - - - - 1. - - Transaksi Lainnya - - - - 2. - - Penerimaan Negara - - - - 3. - - Pajak/PNBP/Cukai - - - - 4. - - - Masukkan Kode Billing - - - - - 5. - - - Konfirmasi Pembayaran dan klik angka 1 - - - + + ))} @@ -221,418 +228,20 @@ function BillingCodeScreen() { - - - - 1. - - - Masukkan User ID dan M-Pin anda di aplikasi BNI Mobile - - - - - 2. - - - Pilih menu Pembayaran - - - - - 3. - - - Pilih menu Penerimaan Negara - - - - - 4. - - - Masukkan Kode Billing ke kolom nomor tagihan - - - - - 5. - - - Konfirmasi pembayaran dan masukkan password transaksi - - - - - 6. - - - Print bukti transaksi untuk pengambilan paspor - - - - - - - 1. - - - Masuk ke https://ibank.klikbca.com - - - - - 2. - - - Masukkan User ID dan Pin - - - - - 3. - - - Pilih menu Pembayaran - - - - - 4. - - Pilih menu Pajak - - - - 5. - - - Pilih Penerimaan Negara pada kolom jenis pajak - - - - - 6. - - - Masukkan kode billing ke kolom kode billing - - - - - 7. - - - Konfirmasi pembayaran dan masukkan Key BCA Anda - - - - - 8. - - - Print bukti transaksi untuk pengambilan - - - - - - - 1. - - - Masuk ke https://ib.bri.co.id - - - - - 2. - - - Masukkan User ID dan pin - - - - - 3. - - - Pilih menu Pembayaran - - - - - 4. - - Pilih menu MPN - - - - 5. - - - Masukkan nomor MPN G3 - - - - - 6. - - - Konfirmasi pembayaran dan masukkan Password serta M-Token - - - - - 7. - - - Print bukti transaksi untuk pengambilan paspor - - - - - - - 1. - - Login - - - - 2. - - - Masuk ke menu utama - - - - - 3. - - Pilih menu Lainnya - - - - 4. - - - Pilih menu Penerimaan Negara - - - - - 5. - - - Masukkan Kode Billing - - - - - 6. - - - Konfirmasi pembayaran dan masukkan pin - - - - - 7. - - - Print bukti transaksi untuk pengambilan paspor - - - - - - - 1. - - - Masukkan User ID dan Password Anda di aplikasi - - - - - 2. - - Pilih menu Bayar - - - - 3. - - Pilih menu Pajak - - - - 4. - - - Pilih Pajak/PNBP/Cukai di kolom Penyedia Jasa - - - - - 5. - - - Masukkan Kode Billing dan tekan lanjutkan - - - - - 6. - - - Konfirmasi pembayaran dan masukkan pin transaksi - - - - - 7. - - - Print bukti transaksi untuk pengambilan paspor - - - - - - - 1. - - - Buka Aplikasi BSI Mobile Banking, pilih menu Bayar - - - - - 2. - - - Pilih Penerimaan Negara (MPN) - - - - - 3. - - - Pilih Pajak/Cukai/SBSN/Paspor (menu Reinquiry MPN untuk cek - jumlah tagihan pajak yang telah dibuat melalui Web MPN) - - - - - 4. - - - Masukkan No. Nasabah/No. Tagihan, klik Selanjutnya - - - - - 5. - - - Input pin BSI Mobile - - - - - 6. - - - Muncul layar konfirmasi, klik Selanjutnya - - - - - 7. - - Transaksi berhasil - - - - 8. - - - Bukti transaksi akan dikirim ke email yang didaftarkan - notifikasi BSI Mobile - - - - - - - 1. - - - Login ke https:// bankbsi.co.id - - - - - 2. - - - Pilih menu Pembayaran - - - - - 3. - - - Input Aplikasi Pembayaran: Rekening Sumber, Jenis Pembayaran - Penerimaan Negara/Pajak/Cukai/SBN, Nomor Pembayaran - - - - - 4. - - - Klik Verifikasi Aplikasi Pembayaran - - - - - 5. - - - Muncul layar konfirmasi, klik Selanjutnya - - - - - 6. - - - Input token & pin otorisasi, klik Submit - - - - - 7. - - Transaksi berhasil - - - - 8. - - - Bukti transaksi akan dikirim ke email yang didaftarkan - notifikasi BSI Net - - - + {mobileAndInternetBankingDataList.map((bank, bankIndex) => ( + + + {bank.steps.map((step, stepIndex) => ( + + + {stepIndex + 1}. + + {step} + + ))} + + + ))} diff --git a/src/screens/billingCode/styles.tsx b/src/screens/billingCode/styles.tsx index e8a2505..d4d0a57 100644 --- a/src/screens/billingCode/styles.tsx +++ b/src/screens/billingCode/styles.tsx @@ -108,6 +108,9 @@ const styles = StyleSheet.create({ listFlex: { flex: 0, }, + paymentMethodOptionDataWrapper: { + marginBottom: 8, + }, }); export default styles; diff --git a/src/screens/otherMethod/index.tsx b/src/screens/otherMethod/index.tsx index 04ec7bd..f6c404d 100644 --- a/src/screens/otherMethod/index.tsx +++ b/src/screens/otherMethod/index.tsx @@ -1,4 +1,4 @@ -import {StatusBar, View} from 'react-native'; +import {ScrollView, StatusBar, View} from 'react-native'; import {Text} from 'react-native-paper'; import styles from './styles'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; @@ -6,12 +6,105 @@ import Colors from '../../../assets/styles/Colors'; import {useNavigation} from '@react-navigation/native'; import {NativeStackNavigationProp} from '@react-navigation/native-stack'; import {RootStackParamList} from '../../navigation/type'; +import Accordion from '../../components/Accordion'; type OtherMethodScreenNavigationProp = NativeStackNavigationProp< RootStackParamList, 'OtherMethod' >; +const bankPaymentSteps = [ + 'Pilih menu Bayar/Beli/Pembayaran', + 'Pilih menu Bayar Telpon', + 'Pilih menu Telkom', + 'Masukkan 12 digit kode pembayaran (021xxxxxxxxx) yang diterima di kolom Kode Area + No. Telepon', + 'Pilih Ya untuk melanjutkan proses selanjutnya', + 'Muncul konfirmasi permintaan dan pastikan sudah benar', + 'Pilih Ya untuk melanjutkan pembayaran', + 'Transaksi selesai dan Anda menerima notifikasi transaksi berhasil', +]; + +const posPegadaianAlfamartYomartPaymentSteps = [ + 'Customer menginformasikan kepada petugas Modern Retail Channel/ PT. POS/ PEGADAIAN/ALFAMART/YOMART untuk membayar menggunakan Kode Bayar Telkom/Finpay', + 'Petugas akan pilih menu Bayar/Beli/Pembayaran', + 'Petugas pilih menu bayar Telpon/Telkom/Finpay', + 'Customer menginformasikan 12 Digit Kode Pembayaran (021xxxxxxxxx) untuk diinput petugas', + 'Petugas Pilih Ya untuk melanjutkan proses selanjutnya', + 'Muncul konfirmasi permintaan dan pastikan sudah benar', + 'Petugas Pilih "Ya" untuk melanjutkan pembayaran', + 'Transaksi selesai dan Petugas menerima notifikasi transaksi berhasil', +]; + +const virtualAccountDataList = [ + { + title: 'Mandiri', + steps: ['ATM', 'Mobile Banking', 'Internet Banking'], + }, + { + title: 'BRI', + steps: ['ATM', 'Mobile Banking', 'Internet Banking'], + }, + { + title: 'BNI', + steps: [ + 'ATM', + 'Mobile Banking', + 'Internet Banking', + 'Transfer dari Bank Lain', + ], + }, + { + title: 'Permata', + steps: ['ATM', 'Mobile Banking', 'Internet Banking'], + }, + { + title: 'BJB', + steps: [ + 'ATM', + 'Mobile Banking', + 'SMS Banking BJB', + 'Internet Banking BJB', + 'Teller', + ], + }, + { + title: 'BCA', + steps: [ + 'ATM', + 'M-BCA', + 'Klik BCA Individual', + 'Klik BCA Bisnis', + 'M-BCA (Menu SIM card)', + ], + }, + { + title: 'BNC', + steps: ['Neobank Hematpay'], + }, + { + title: 'BSI', + steps: [ + 'BSI Mobile & BSI NET Banking', + 'ATM BSI', + 'Teller', + 'ATM/M-Banking Bank Lain', + ], + }, + { + title: 'BTN', + steps: ['ATM BTN', 'Internet Banking', 'Mobile Banking BTN'], + }, + { + title: 'Mega', + steps: [ + 'ATM Mega', + 'M-Smile Mega', + 'Internet Banking Mega', + 'ATM/Mobile Banking/Internet Banking Bank Lain (ATM Bersama/Prima/BI-FAST)', + ], + }, +]; + function OtherMethodScreen() { const navigation = useNavigation(); return ( @@ -30,6 +123,83 @@ function OtherMethodScreen() { /> Metode Lain + + + Cara Pembayaran + + + 1. + + Bank + + + + {bankPaymentSteps.map((step, index) => ( + + + {index + 1}. + + {step} + + ))} + + + + + 2. + + Pos/Pegadaian/Alfamart/Yomart + + + + {posPegadaianAlfamartYomartPaymentSteps.map((step, index) => ( + + + {index + 1}. + + {step} + + ))} + + + + + 3. + + Virtual Account + + + + {virtualAccountDataList.map((bank, bankIndex) => ( + + + {bank.steps.map((step, stepIndex) => ( + + + {stepIndex + 1}. + + {step} + + ))} + + + ))} + + + + ); } diff --git a/src/screens/otherMethod/styles.tsx b/src/screens/otherMethod/styles.tsx index 60ad96c..b16d8d1 100644 --- a/src/screens/otherMethod/styles.tsx +++ b/src/screens/otherMethod/styles.tsx @@ -23,6 +23,55 @@ const styles = StyleSheet.create({ alignItems: 'center', backgroundColor: Colors.neutral100.color, }, + otherMethodContentContainer: { + marginHorizontal: 16, + gap: 16, + marginBottom: 16, + }, + paymentMethodTitle: { + includeFontPadding: false, + fontSize: 18, + ...FontFamily.notoSansExtraBold, + color: Colors.primary30.color, + }, + paymentMethodContainer: { + gap: 12, + }, + paymentMethodOptionTitleWrapper: { + gap: 6, + flexDirection: 'row', + }, + paymentMethodOptionTitle: { + color: Colors.primary30.color, + includeFontPadding: false, + fontSize: 16, + ...FontFamily.notoSansExtraBold, + }, + paymentMethodOptionTitleFlex: { + flex: 1, + }, + textContentWrapper: { + flexDirection: 'row', + gap: 6, + }, + textContentDesc: { + flex: 1, + color: Colors.primary30.color, + ...FontFamily.notoSansRegular, + fontSize: 12, + textAlign: 'justify', + includeFontPadding: false, + lineHeight: 24, + }, + listFlex: { + flex: 0, + }, + paymentMethodOptionDataContainer: { + marginStart: 24, + }, + paymentMethodOptionDataWrapper: { + marginBottom: 4, + }, }); export default styles;