Imporve code quality of Billing Code screen and finalized Other Method screen UI components
This commit is contained in:
Mochammad Adhi Buchori
@ -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<BillingCodeScreenNavigationProp>();
|
||||
|
||||
@ -69,144 +200,20 @@ function BillingCodeScreen() {
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.paymentMethodOptionAccordionContainer}>
|
||||
<Accordion title="BCA" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
{atmDataList.map((atm, atmIndex) => (
|
||||
<Accordion key={atmIndex} title={atm.title} titleRegular>
|
||||
<View style={styles.paymentMethodOptionDataWrapper}>
|
||||
{atm.steps.map((step, stepIndex) => (
|
||||
<View key={stepIndex} style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
{stepIndex + 1}.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pembayaran</Text>
|
||||
<Text style={styles.textContentDesc}>{step}</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>MPN/Pajak</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Penerimaan Negara</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan Kode Billing
|
||||
</Text>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion title="BNI" titleRegular>
|
||||
<View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Menu Lainnya</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pembayaran</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pajak/Penerimaan Negara
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
PajaK/PNBP/BEA & CUKAI
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan Kode Billing
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion title="BRI" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Transaksi Lainnya</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pembayaran</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Lainnya</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>MPN</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan Kode Billing
|
||||
</Text>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion title="Mandiri" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Transaksi Lainnya</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Penerimaan Negara</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pajak/PNBP/Cukai</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan Kode Billing
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Konfirmasi Pembayaran dan klik angka 1
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
</Accordion>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.paymentMethodContainer}>
|
||||
@ -221,418 +228,20 @@ function BillingCodeScreen() {
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.paymentMethodOptionAccordionContainer}>
|
||||
<Accordion title="BNI (Mobile Banking)" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
{mobileAndInternetBankingDataList.map((bank, bankIndex) => (
|
||||
<Accordion key={bankIndex} title={bank.title} titleRegular>
|
||||
<View style={styles.paymentMethodOptionDataWrapper}>
|
||||
{bank.steps.map((step, stepIndex) => (
|
||||
<View key={stepIndex} style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan User ID dan M-Pin anda di aplikasi BNI Mobile
|
||||
{stepIndex + 1}.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>{step}</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih menu Pembayaran
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih menu Penerimaan Negara
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan Kode Billing ke kolom nomor tagihan
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Konfirmasi pembayaran dan masukkan password transaksi
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
6.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Print bukti transaksi untuk pengambilan paspor
|
||||
</Text>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion title="BCA (Internet Banking)" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masuk ke https://ibank.klikbca.com
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan User ID dan Pin
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih menu Pembayaran
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pilih menu Pajak</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih Penerimaan Negara pada kolom jenis pajak
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
6.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan kode billing ke kolom kode billing
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
7.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Konfirmasi pembayaran dan masukkan Key BCA Anda
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
8.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Print bukti transaksi untuk pengambilan
|
||||
</Text>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion title="BRI (Internet Banking)" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masuk ke https://ib.bri.co.id
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan User ID dan pin
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih menu Pembayaran
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pilih menu MPN</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan nomor MPN G3
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
6.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Konfirmasi pembayaran dan masukkan Password serta M-Token
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
7.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Print bukti transaksi untuk pengambilan paspor
|
||||
</Text>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion title="BRImo (Mobile Banking)" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Login</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masuk ke menu utama
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pilih menu Lainnya</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih menu Penerimaan Negara
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan Kode Billing
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
6.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Konfirmasi pembayaran dan masukkan pin
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
7.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Print bukti transaksi untuk pengambilan paspor
|
||||
</Text>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion
|
||||
title="Livin’ by Mandiri (Mobile Banking)"
|
||||
titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan User ID dan Password Anda di aplikasi
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pilih menu Bayar</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Pilih menu Pajak</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih Pajak/PNBP/Cukai di kolom Penyedia Jasa
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan Kode Billing dan tekan lanjutkan
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
6.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Konfirmasi pembayaran dan masukkan pin transaksi
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
7.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Print bukti transaksi untuk pengambilan paspor
|
||||
</Text>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion title="BSI Mobile (Mobile Banking)" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Buka Aplikasi BSI Mobile Banking, pilih menu Bayar
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih Penerimaan Negara (MPN)
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih Pajak/Cukai/SBSN/Paspor (menu Reinquiry MPN untuk cek
|
||||
jumlah tagihan pajak yang telah dibuat melalui Web MPN)
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Masukkan No. Nasabah/No. Tagihan, klik Selanjutnya
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Input pin BSI Mobile
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
6.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Muncul layar konfirmasi, klik Selanjutnya
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
7.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Transaksi berhasil</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
8.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Bukti transaksi akan dikirim ke email yang didaftarkan
|
||||
notifikasi BSI Mobile
|
||||
</Text>
|
||||
</View>
|
||||
</Accordion>
|
||||
<Accordion title="BSI Net" titleRegular>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
1.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Login ke https:// bankbsi.co.id
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
2.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Pilih menu Pembayaran
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
3.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Input Aplikasi Pembayaran: Rekening Sumber, Jenis Pembayaran
|
||||
Penerimaan Negara/Pajak/Cukai/SBN, Nomor Pembayaran
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
4.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Klik Verifikasi Aplikasi Pembayaran
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Muncul layar konfirmasi, klik Selanjutnya
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
6.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Input token & pin otorisasi, klik Submit
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
7.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>Transaksi berhasil</Text>
|
||||
</View>
|
||||
<View style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
8.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>
|
||||
Bukti transaksi akan dikirim ke email yang didaftarkan
|
||||
notifikasi BSI Net
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
</Accordion>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@ -108,6 +108,9 @@ const styles = StyleSheet.create({
|
||||
listFlex: {
|
||||
flex: 0,
|
||||
},
|
||||
paymentMethodOptionDataWrapper: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
});
|
||||
|
||||
export default styles;
|
||||
|
||||
@ -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<OtherMethodScreenNavigationProp>();
|
||||
return (
|
||||
@ -30,6 +123,83 @@ function OtherMethodScreen() {
|
||||
/>
|
||||
<Text style={styles.appBarTitle}>Metode Lain</Text>
|
||||
</View>
|
||||
<ScrollView>
|
||||
<View style={styles.otherMethodContentContainer}>
|
||||
<Text style={styles.paymentMethodTitle}>Cara Pembayaran</Text>
|
||||
<View style={styles.paymentMethodContainer}>
|
||||
<View style={styles.paymentMethodOptionTitleWrapper}>
|
||||
<Text style={styles.paymentMethodOptionTitle}>1.</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.paymentMethodOptionTitle,
|
||||
styles.paymentMethodOptionTitleFlex,
|
||||
]}>
|
||||
Bank
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.paymentMethodOptionDataContainer}>
|
||||
{bankPaymentSteps.map((step, index) => (
|
||||
<View key={index} style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>{step}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.paymentMethodContainer}>
|
||||
<View style={styles.paymentMethodOptionTitleWrapper}>
|
||||
<Text style={styles.paymentMethodOptionTitle}>2.</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.paymentMethodOptionTitle,
|
||||
styles.paymentMethodOptionTitleFlex,
|
||||
]}>
|
||||
Pos/Pegadaian/Alfamart/Yomart
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.paymentMethodOptionDataContainer}>
|
||||
{posPegadaianAlfamartYomartPaymentSteps.map((step, index) => (
|
||||
<View key={index} style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
{index + 1}.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>{step}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.paymentMethodContainer}>
|
||||
<View style={styles.paymentMethodOptionTitleWrapper}>
|
||||
<Text style={styles.paymentMethodOptionTitle}>3.</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.paymentMethodOptionTitle,
|
||||
styles.paymentMethodOptionTitleFlex,
|
||||
]}>
|
||||
Virtual Account
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.paymentMethodOptionDataContainer}>
|
||||
{virtualAccountDataList.map((bank, bankIndex) => (
|
||||
<Accordion key={bankIndex} title={bank.title} titleRegular>
|
||||
<View style={styles.paymentMethodOptionDataWrapper}>
|
||||
{bank.steps.map((step, stepIndex) => (
|
||||
<View key={stepIndex} style={styles.textContentWrapper}>
|
||||
<Text style={[styles.textContentDesc, styles.listFlex]}>
|
||||
{stepIndex + 1}.
|
||||
</Text>
|
||||
<Text style={styles.textContentDesc}>{step}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</Accordion>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user