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

Imporve code quality of Billing Code screen and finalized Other Method screen UI components

Browse Source
This commit is contained in:
Mochammad Adhi Buchori
2025-04-24 10:43:15 +07:00
parent 76abc6010e
commit 01c55e2fe6
4 changed files with 381 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,137 @@ type BillingCodeScreenNavigationProp = NativeStackNavigationProp<
'BillingCode' '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() { function BillingCodeScreen() {
const navigation = useNavigation<BillingCodeScreenNavigationProp>(); const navigation = useNavigation<BillingCodeScreenNavigationProp>();
@ -69,144 +200,20 @@ function BillingCodeScreen() {
</Text> </Text>
</View> </View>
<View style={styles.paymentMethodOptionAccordionContainer}> <View style={styles.paymentMethodOptionAccordionContainer}>
<Accordion title="BCA" titleRegular> {atmDataList.map((atm, atmIndex) => (
<View style={styles.textContentWrapper}> <Accordion key={atmIndex} title={atm.title} titleRegular>
<Text style={[styles.textContentDesc, styles.listFlex]}> <View style={styles.paymentMethodOptionDataWrapper}>
1. {atm.steps.map((step, stepIndex) => (
</Text> <View key={stepIndex} style={styles.textContentWrapper}>
<Text style={styles.textContentDesc}>Pembayaran</Text> <Text style={[styles.textContentDesc, styles.listFlex]}>
</View> {stepIndex + 1}.
<View style={styles.textContentWrapper}> </Text>
<Text style={[styles.textContentDesc, styles.listFlex]}> <Text style={styles.textContentDesc}>{step}</Text>
2. </View>
</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>
<View style={styles.textContentWrapper}> </Accordion>
<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> </View>
<View style={styles.paymentMethodContainer}> <View style={styles.paymentMethodContainer}>
@ -221,418 +228,20 @@ function BillingCodeScreen() {
</Text> </Text>
</View> </View>
<View style={styles.paymentMethodOptionAccordionContainer}> <View style={styles.paymentMethodOptionAccordionContainer}>
<Accordion title="BNI (Mobile Banking)" titleRegular> {mobileAndInternetBankingDataList.map((bank, bankIndex) => (
<View style={styles.textContentWrapper}> <Accordion key={bankIndex} title={bank.title} titleRegular>
<Text style={[styles.textContentDesc, styles.listFlex]}> <View style={styles.paymentMethodOptionDataWrapper}>
1. {bank.steps.map((step, stepIndex) => (
</Text> <View key={stepIndex} style={styles.textContentWrapper}>
<Text style={styles.textContentDesc}> <Text style={[styles.textContentDesc, styles.listFlex]}>
Masukkan User ID dan M-Pin anda di aplikasi BNI Mobile {stepIndex + 1}.
</Text> </Text>
</View> <Text style={styles.textContentDesc}>{step}</Text>
<View style={styles.textContentWrapper}> </View>
<Text style={[styles.textContentDesc, styles.listFlex]}> ))}
2. </View>
</Text> </Accordion>
<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> </View>
</View> </View>

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

@ -108,6 +108,9 @@ const styles = StyleSheet.create({
listFlex: { listFlex: {
flex: 0, flex: 0,
}, },
paymentMethodOptionDataWrapper: {
marginBottom: 8,
},
}); });
export default styles; export default styles;

172
src/screens/otherMethod/index.tsx
View File

@ -1,4 +1,4 @@
import {StatusBar, View} from 'react-native'; import {ScrollView, StatusBar, View} from 'react-native';
import {Text} from 'react-native-paper'; import {Text} from 'react-native-paper';
import styles from './styles'; import styles from './styles';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 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 {useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack'; import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {RootStackParamList} from '../../navigation/type'; import {RootStackParamList} from '../../navigation/type';
import Accordion from '../../components/Accordion';
type OtherMethodScreenNavigationProp = NativeStackNavigationProp< type OtherMethodScreenNavigationProp = NativeStackNavigationProp<
RootStackParamList, RootStackParamList,
'OtherMethod' '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() { function OtherMethodScreen() {
const navigation = useNavigation<OtherMethodScreenNavigationProp>(); const navigation = useNavigation<OtherMethodScreenNavigationProp>();
return ( return (
@ -30,6 +123,83 @@ function OtherMethodScreen() {
/> />
<Text style={styles.appBarTitle}>Metode Lain</Text> <Text style={styles.appBarTitle}>Metode Lain</Text>
</View> </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> </View>
); );
} }

49
src/screens/otherMethod/styles.tsx
View File

@ -23,6 +23,55 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: Colors.neutral100.color, 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; export default styles;