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

Finalized Billing Code screen UI components

Browse Source
This commit is contained in:
Mochammad Adhi Buchori
2025-04-24 10:02:03 +07:00
parent 0287887302
commit 76abc6010e
2 changed files with 533 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

536
src/screens/billingCode/index.tsx
View File

@ -70,23 +70,141 @@ function BillingCodeScreen() {
</View> </View>
<View style={styles.paymentMethodOptionAccordionContainer}> <View style={styles.paymentMethodOptionAccordionContainer}>
<Accordion title="BCA" titleRegular> <Accordion title="BCA" titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <Text style={[styles.textContentDesc, styles.listFlex]}>
1.
</Text>
<Text style={styles.textContentDesc}>Pembayaran</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> </View>
</Accordion> </Accordion>
<Accordion title="BNI" titleRegular> <Accordion title="BNI" titleRegular>
<View> <View>
<Text>Content</Text> <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> </View>
</Accordion> </Accordion>
<Accordion title="BRI" titleRegular> <Accordion title="BRI" titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <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> </View>
</Accordion> </Accordion>
<Accordion title="Mandiri" titleRegular> <Accordion title="Mandiri" titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <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> </View>
</Accordion> </Accordion>
</View> </View>
@ -104,35 +222,415 @@ function BillingCodeScreen() {
</View> </View>
<View style={styles.paymentMethodOptionAccordionContainer}> <View style={styles.paymentMethodOptionAccordionContainer}>
<Accordion title="BNI (Mobile Banking)" titleRegular> <Accordion title="BNI (Mobile Banking)" titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <Text style={[styles.textContentDesc, styles.listFlex]}>
1.
</Text>
<Text style={styles.textContentDesc}>
Masukkan User ID dan M-Pin anda di aplikasi BNI Mobile
</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> </View>
</Accordion> </Accordion>
<Accordion title="BCA (Internet Banking)" titleRegular> <Accordion title="BCA (Internet Banking)" titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <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> </View>
</Accordion> </Accordion>
<Accordion title="BRI (Internet Banking)" titleRegular> <Accordion title="BRI (Internet Banking)" titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <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> </View>
</Accordion> </Accordion>
<Accordion title="BRImo (Mobile Banking)" titleRegular> <Accordion title="BRImo (Mobile Banking)" titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <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> </View>
</Accordion> </Accordion>
<Accordion <Accordion
title="Livin’ by Mandiri (Mobile Banking)" title="Livin’ by Mandiri (Mobile Banking)"
titleRegular> titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <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> </View>
</Accordion> </Accordion>
<Accordion title="BSI Mobile (Mobile Banking)" titleRegular> <Accordion title="BSI Mobile (Mobile Banking)" titleRegular>
<View> <View style={styles.textContentWrapper}>
<Text>Content</Text> <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> </View>
</Accordion> </Accordion>
</View> </View>

16
src/screens/billingCode/styles.tsx
View File

@ -92,6 +92,22 @@ const styles = StyleSheet.create({
paymentMethodOptionAccordionContainer: { paymentMethodOptionAccordionContainer: {
marginStart: 24, marginStart: 24,
}, },
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,
},
}); });
export default styles; export default styles;