Notes

import React, { Component, Fragment } from 'react';
import Modal from 'react-modal';
import PropTypes from 'prop-types';
import axios from 'axios'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import { Button, ButtonGroup } from 'reactstrap'

import Loading from '../Loading'
import LoadingTime from '../Loading/indexTime'
import { setIsLoading } from '../../../actions/'
import { setIsLoadingTime } from '../../../actions/'
import { refreshToken } from '../../../actions/userAction'
import envChecker from '../../../utils/envChecker'
import FormatRupiah from '../../../utils/formatRupiah'
import { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } from 'constants';

class ModalPayment extends Component{
static propTypes = {
toggle: PropTypes.func,
isOpen: PropTypes.bool,
setIsLoading: PropTypes.func,
setIsLoadingTime: PropTypes.func,
data: PropTypes.string
}

state = {
bank: '',
notif: '',
disabledCancel: false,
disabledButton: false,
disabled: true
}
// bs pake react jaman now (es7)
// tydac perlu pakai constructor, tapi sesuai selera sih
// la kbiasoan pake constructor super dll, sikat kalo ck t wkwkk, idak bermasalah sih itu

createObj() {
const { text } = this.props

if (text === 'buy wallet') {
return {
amount: parseInt(this.props.data, 10),
bankCode: this.state.bank
}
} else if (text === 'buy key'){
return {
keyId: parseInt(this.props.data, 10),
bankCode: this.state.bank
}
} else if (text === 'buy pulsa' || text === 'buy pulsa 10k'){
return {
productId: this.props.productId.id,
phoneNumber: this.props.phone,
bankCode: this.state.bank,
amount: this.props.amount
}
}
}

componentDidMount() {
this.props.refreshToken()
}

hab = ({ warning, url }, callback) => {
this.props.setIsLoading(false)

if(warning) {
alert(warning)
}
if(url) {
this.props.history.pushurl)
}
if(callback) {
callback();
//callback ini buat ap ?
// oh kelewat, ak blm bales yg ini
// seandainy ak ad ngasih parameter berupa callback, ak bakal jalani callback
// ini kalo2 bae sih, jaga2, andai ak mau buat custom sequence function habis hab()
// lipo ak, jangan apus la e comment ny
// wkwkwkwk ok
}
}

getTransaction = async (axiosUrl, transactionType) => {
const dataValue = this.createObj();
const { fixedendpoint, walletendpoint, retailendpoint, push, refreshToken, setIsLoading, history } = this.props
// axios bs dipendikin, kan sering pake, bikin helper
//sebenerny ini masih hectic, cuma ak rada bingung wkwkwkwk
//bingung np ?, enak kto apoke kwwkwk, tebel jg if ny, tapi mendingan la, btw ini bs dipecain deh tanpa pake type
// yg data.message dijadiin 1, result.data jadi 1, cuma dk jauh beda
//
this.helpernyAxios('POST', axiosUrl, dataValue)
.then(result => {
if (result.data.message === 'not verified user'){
hab({ warning: 'Silahkan Verifikasi Email Anda' })
} else if (result.data.error_code === "DUPLICATE_CALLBACK_VIRTUAL_ACCOUNT_ERROR") {
hab()
//dsini manggil function atas, trus ad if lgi


// simple ny sih fungsi ini dk bakal tepanggil kalo bukan alfamart
// dio cm bakal jalan kalo alfamart, lupakan dia kalo bkn alfamart
// ok, fungsi atas cuma buat setloading wkwkwk
if (transactionType === 'Alfamart') {
this.setState({
notif: true
})
}
} else if (result.data === 'saldo limited') {
hab({ warning: 'Masukkan Jumlah Sesuai Range Saldo' })
} else if (result.data === 'not verified user') {
hab({ warning: 'Silahkan Verifikasi Email Anda' })
} else if (result.data === 'maksimum limit wallet') {
hab({ warning: 'Saldo Wallet Tidak Boleh Melebihi Rp. 2.000.000'})
} else if (result.status === 200){
hab({ url: `/${push}/${result.data.dataFinal.id}` })
}
if (transactionType === 'Wallet') {
if (result.data.message === 'saldo tidak mencukupi'){
hab(
{
warning: `saldo tidak mencukupi, saldo anda ${FormatRupiah(result.data.wallet)}`
callback: this.setState({ disabledButton: true, bank: '' });
}
)
} else if (result.data.message === 'topup sukses'){
await refreshToken()
setIsLoading(false)
window.location.reload();
} else if (result.data.message === 'sukses pulsa'){
await refreshToken()
history.push(`/tabsinvoice`)
}
}
})
.catch(err => console.log(err))
}

// jadi bersih nih axiosTransaction
//asli bersih nn wkwkwkwkwk

// khusus fungsi global macam envChecker sm axios({ blabla }) mending dibuat helepr
// ak raso kamu sangat banyak pake itu
// aplg envChecker
// yg envchecker kan la jdi helper
//axios iy bnyak nn wkwkkwkw

// karena dio pass hal yg sm, mending dibuat helper ny wkwkwk
// kalo envChecker itu oke udah jadi, tapi ujung2 dio dipake berulang2 envChecker + /api + wkwkwk
// jadi rada nanggung wwkwk, sekalian buat fungsi buat generate envChecker/api sekalian wkwkwk
// ngoce ap ak cb
//wkwkwkw1


axiosTransaction = () => {
const { bank } = this.state
if ( bank !== 'Alfamart' && bank !== 'Wallet') {
this.getTransaction(fixedendpoint, '')
} else if ( bank === 'Alfamart') {
this.getTransaction(retailendpoint, 'Alfamart')
} else if ( bank === 'Wallet') {
this.getTransaction(walletendpoint, 'Wallet')
}
}

handleToggle = () => {
this.setState({
notif: '',
bank: '',
disabled: true
},
() => this.props.toggle()
)
}


// empty div bs diganti dengan Fragment
// cakny react ak blom support fragment
// pernah tes, dk mau, wah, let si
// udah react 16 weh wkwkwk
// raso ak pernah cobo pake fragment, dy error ap cak i
//
// kw pake <> </> ato <Fragment></Fragment> ?
//nah la dk inget lagi, kalo


// ngapoi kw undo wkwkw
// ini file berbeda wkwk
//bukan ak
//ak pker kw
// neh ilang galo yg tdi
// ad wong k3 ap ?
// idk ilang oo wkwkwk masih ad kok
// btw yg bawah ini contoh nyata mending pake &&
//fragment bukanny buat div yg isi dk ad aneh2 kan ?
// dk jadi, button biaso, onclickny yg aneh2
// fragment itu pengganti <div></div>
// kalo kw return <div></div>, DOM ny kurang cantik, ad siso2 div kosong, kalo pake Fragment katek div kosong
// contoh div dk kosong yg cak mn ?

//kw insepct element halaman ini (sblm diganti, di bagian Pembayaran Anda Dengan No VA ini Belum diselesaikan)

// itu di dom ny ad render <div> .....isi </div> kek itu
// macam <div></div> sia2, <div></div> ny tek guno, cuma buat ngelabui render wkwkw
// ohh cak it, okok, ini bs di simplify
// cek ad notif dk ee ?, men ad baru kluari it
// tes


// kw dk perlu if2 ke sbnrny, && itu udah if, if statement kiri === true, maka jalanin kanan, kalo salah matila sano, dk jalan galo2
// btw kalo keno serangan apus2 dk jelas, pindah tab, terus masuk tab ini




notifDuplicate = () => {
return this.state.notif && (
<Fragment>
<b>Pembayaran Anda Dengan No VA ini Belum diselesaikan</b>
<br />
<LoadingTime
{...this.props.TimerLoading}
/>
<button className="modal__method__content__button" onClick={() => this.cancelInvoice()} disabled = {this.state.disabledCancel}>Hapus</button>
<button className="modal__method__content__button" ><a href="/tabsinvoice" target="_blank" rel="noopener noreferrer" className="bidding__notif">Invoice</a></button>
</Fragment>
)
}



// bs bikin helper buat axios ini hab
//wkwkkwkwkw jdi bingung ak lantak loncat2 dri tdi kw gaweny
// set is loading ini banyak nn wkkwkw
// btw bs bikin helper kek dibawah
//biar lebih pendek b, helperny pisah file e coy
// terus ini nih, fungsi global kek ini jg mestiny jadi helper
//ok coy gek la t


// kyk ini cuy
// ini kan bs kw isi object fetchData ny
//fetch data isi object ?
// ini contohnya

helpernyAxios = (fetchMethod, fetchUrl, fetchData) => {
return axios({
method: fetchMethod,
url: `${envChecker('api')}${fetchUrl}`,
headers: {
token: localStorage.getItem('token')
},
data: fetchData
})
}
// better diliat hmm
//cancel cuma dipake disini sih, dk ad lagi d tmpat laen
cancelInvoice() {
const { setIsLoading }
this.props.setIsLoading(true);
// tesonsingny mati
//awalny kan rame t response
// entah kenapa ini hectic setLoading wkwkwk
//ak bkenny ssuai yg d bayangan ak wkwkwkkwkw
//ab
//teundo smpe mano ni
this.helpernyAxios('DELETE', `/virtualaccount`, { bank: this.state.bank })
.then(data => {
setIsLoading(false);
setIsLoadingTime(true, 0)
this.timer = setInterval(() => {
setIsLoadingTime(true, this.props.TimerLoading.timer + Math.floor(100 / 45))
this.setState({
disabledCancel: true
})

if (this.props.TimerLoading.timer >= 100) {
clearInterval(this.timer);
this.props.setIsLoadingTime(false)
this.setState({
notif : false
})
}
}, 1000);
})
.catch(err => {
console.log(err)
setIsLoading(false)
})
}

handleChangeBank = (e) => {
this.setState({
bank: e.target.value,
disabled: false
})
}

bankChoice = () => {
let bank = [] // mending buat template, terus di spread
if (this.props.text === 'buy wallet'){
bank = [
{value:'BNI', onClick: this.handleChangeBank},
{value:'BRI', onClick: this.handleChangeBank},
{value:'MANDIRI', onClick: this.handleChangeBank},
{value:'Alfamart', onClick: this.handleChangeBank},
]
} else if (this.props.text === 'buy pulsa' || this.props.text === 'buy key'){
bank = [
{value:'BNI', onClick: this.handleChangeBank, disabled: false},
{value:'BRI', onClick: this.handleChangeBank, disabled: false},
{value:'MANDIRI', onClick: this.handleChangeBank, disabled: false},
{value:'Alfamart', onClick: this.handleChangeBank, disabled: false},
{value:'Wallet', onClick: this.handleChangeBank , disabled: this.state.disabledButton }
]
} else if (this.props.text === 'buy pulsa 10k'){
bank = [
{value:'Wallet', onClick: this.handleChangeBank , disabled: false }
]
}
// fragment mas
return(

<Fragment>
<label>Silahkan Pilih Salah Satu Bank Untuk Metode Pembayaran Virtual Account</label>
<div className="modal__method__content__container">
<ButtonGroup className="modal__method__ButtonGroup" vertical>
{bank.map((data, idx) => (
<Button key={idx} disabled={data.disabled} value={data.value} className="modal__method__Button" onClick={data.onClick}>{data.value}</Button>
))
}
</ButtonGroup>
</div>
</Fragment>
)
}

render() {
console.log(this.props.text)
return (
<Modal ariaHideApp={false} isOpen={this.props.isOpen} className="modal__method">
<div className="modal__method__container">
<div className="modal__method__header">
<button className="modal__method__header__button" onClick={this.handleToggle}>X</button>
</div>
{this.bankChoice()}
<div>
<label className="alert__invoice"><b>{this.notifDuplicate()}</b></label>
</div>
<button disabled={this.state.disabled} className="modal__method__content__button" onClick={this.axiosTransaction}>Submit</button>
<Loading isLoading={ this.props.isLoading } />
</div>
</Modal>
)
}
}


const mapStateToProps = ({ loadingReducer, loadingTimeReducer}) => {
return {
isLoading: loadingReducer.isLoading,
TimerLoading: loadingTimeReducer
}
}

const mapDispatchToProps = (dispatch) => {
return {
setIsLoading: (bool) => dispatch(setIsLoading(bool)),
setIsLoadingTime: (bool, timer) => dispatch(setIsLoadingTime(bool, timer)),
refreshToken: () => dispatch(refreshToken()),
}
}

const enhance = connect(mapStateToProps, mapDispatchToProps);
const connectComponent = enhance(withRouter(ModalPayment))

export default connectComponent