Credit Manager
Mon May 03 2021 09:36:59 GMT+0000 (Coordinated Universal Time)
Saved by @georeyff #react.js #allowuserchangehisphone
import React, {useState, useEffect} from 'react' import {connect} from 'react-redux' import { FormattedMessage } from 'react-intl' import {getCreditMatrix, getCreditBalance, purchaseCredit} from './actions' import StripeContainer from 'containers/Stripe/StripeContainer' import {Paper, Slider, CircularProgress, Typography, Divider, Button} from '@material-ui/core' import Credit from '../../components/Icons/Credit' function CreditManager(props) { const { matrix, balance, isRequesting, isRequestingPurchase, paymentOptions, showSuccess } = props const { getCreditMatrix, getCreditBalance, purchaseCredit} = props const [creditAmount, setCreditAmount] = useState(null) useEffect(() => { getCreditMatrix() getCreditBalance() }, []) useEffect(() => { if (matrix.length > 0) setCreditAmount(matrix[0][0]) }, [matrix]) if (matrix.length === 0 || balance === null) return null const min = matrix[0][0] const max = matrix[matrix.length - 1][0] const sliderMarks = matrix.map(pair => ({ value: pair[0] })) const realAmount = _.get(_.find(matrix, pair => pair[0] === creditAmount), 1) return ( <div style={{width:'100%'}}> <Paper className="row" classes={{root: 'paperContainer'}}> <Credit style={{fontSize:'36', padding: '1rem'}}/> <div className="row" style={{justifyContent:'space-between'}}> <Typography aria-label="credit balance" style={{padding: '1rem'}}> <FormattedMessage id="credit.balance" values={{balance}} /> </Typography> <Button variant="outlined" color="primary" style={{margin: '1rem'}} > Acheter des crédits </Button> </div> </Paper> <Paper classes={{root: 'paperContainer'}}> <div className="column" style={{alignItems: 'center'}}> <Typography style={{padding: '1rem'}}> <FormattedMessage id="credit.buyWithDiscount" values={{ creditAmount, price: realAmount, currency: _.get(paymentOptions, 'currency') }} /> </Typography> <div className="row" style={{width: '100%', alignItems: 'center', justifyContent: 'space-between', padding: '1rem'}}> <Typography style={{padding: '1rem'}}>{min}</Typography> <Slider defaultValue={min} step={null} marks={sliderMarks} onChange={(e, v) => setCreditAmount(v)} min={min} max={max} valueLabelDisplay="auto" /> <Typography style={{padding: '1rem'}}>{max}</Typography> </div> </div> </Paper> { /* this condition is a little hack for refreshing the form after success (more UX friendly) */ !showSuccess && <div className="paperContainer"> <StripeContainer validate={data => purchaseCredit(creditAmount, realAmount, { method: 'STRIPE', data })} totalPrice={realAmount} isRequesting={isRequesting} buttonLabel="purchase credit with creditcard" /> </div> } </div> ) } const mapStateToProps = (state) => { const credit = state.credit const territory = _.get(state, 'territory.locals', []).find(t => t.territory_key === state.territory.current) return { matrix: credit.matrix, balance: credit.balance, isRequesting: credit.isRequestingMatrix || credit.isRequestingBalance || credit.isRequestingPurchase, isRequestingPurchase: credit.isRequestingPurchase, paymentOptions: _.get(territory, 'payment', {}) } } const mapDispatchToProps = dispatch => ({ getCreditMatrix: () => dispatch(getCreditMatrix()), getCreditBalance: () => dispatch(getCreditBalance()), purchaseCredit: (creditAmount, realAmount, payment) => dispatch(purchaseCredit(creditAmount, realAmount, payment)), }) export default connect(mapStateToProps, mapDispatchToProps)(CreditManager)
Comments