From 76abc6010e1c1cccde632745178ef665bcef4f2c Mon Sep 17 00:00:00 2001
From: Mochammad Adhi Buchori <adhi.buchori@gmail.com>
Date: Thu, 24 Apr 2025 10:02:03 +0700
Subject: [PATCH] Finalized Billing Code screen UI components

---
 src/screens/billingCode/index.tsx  | 536 ++++++++++++++++++++++++++++-
 src/screens/billingCode/styles.tsx |  16 +
 2 files changed, 533 insertions(+), 19 deletions(-)

diff --git a/src/screens/billingCode/index.tsx b/src/screens/billingCode/index.tsx
index ae4f760..fe7f5b4 100644
--- a/src/screens/billingCode/index.tsx
+++ b/src/screens/billingCode/index.tsx
@@ -70,23 +70,141 @@ function BillingCodeScreen() {
             </View>
             <View style={styles.paymentMethodOptionAccordionContainer}>
               <Accordion title="BCA" titleRegular>
-                <View>
-                  <Text>Content</Text>
+                <View style={styles.textContentWrapper}>
+                  <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>
               </Accordion>
               <Accordion title="BNI" titleRegular>
                 <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>
               </Accordion>
               <Accordion title="BRI" titleRegular>
-                <View>
-                  <Text>Content</Text>
+                <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>
-                  <Text>Content</Text>
+                <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>
@@ -104,35 +222,415 @@ function BillingCodeScreen() {
             </View>
             <View style={styles.paymentMethodOptionAccordionContainer}>
               <Accordion title="BNI (Mobile Banking)" titleRegular>
-                <View>
-                  <Text>Content</Text>
+                <View 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
+                  </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>
-                  <Text>Content</Text>
+                <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>
-                  <Text>Content</Text>
+                <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>
-                  <Text>Content</Text>
+                <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>
-                  <Text>Content</Text>
+                <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>
-                  <Text>Content</Text>
+                <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>
diff --git a/src/screens/billingCode/styles.tsx b/src/screens/billingCode/styles.tsx
index 6a31241..e8a2505 100644
--- a/src/screens/billingCode/styles.tsx
+++ b/src/screens/billingCode/styles.tsx
@@ -92,6 +92,22 @@ const styles = StyleSheet.create({
   paymentMethodOptionAccordionContainer: {
     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;