Skip to content

Commit

Permalink
Merge branch 'master' of github.com:worknenjoy/gitpay
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexanmtz
alexanmtz committed Nov 17, 2024
2 parents 34a157a + ab506e9 commit b81d5b5
Show file tree
Hide file tree
Showing 17 changed files with 570 additions and 296 deletions.
45 changes: 45 additions & 0 deletions frontend/src/actions/userActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ const FETCH_USER_ACCOUNT_REQUESTED = 'FETCH_USER_ACCOUNT_REQUESTED'
const FETCH_USER_ACCOUNT_SUCCESS = 'FETCH_USER_ACCOUNT_SUCCESS'
const FETCH_USER_ACCOUNT_ERROR = 'FETCH_USER_ACCOUNT_ERROR'

const FETCH_USER_ACCOUNT_COUNTRIES_REQUESTED = 'FETCH_USER_ACCOUNT_COUNTRIES_REQUESTED'
const FETCH_USER_ACCOUNT_COUNTRIES_SUCCESS = 'FETCH_USER_ACCOUNT_COUNTRIES_SUCCESS'
const FETCH_USER_ACCOUNT_COUNTRIES_ERROR = 'FETCH_USER_ACCOUNT_COUNTRIES_ERROR'

const CREATE_USER_ACCOUNT_REQUESTED = 'CREATE_USER_ACCOUNT'
const CREATE_USER_ACCOUNT_SUCCESS = 'CREATE_USER_ACCOUNT_SUCCESS'
const CREATE_USER_ACCOUNT_ERROR = 'CREATE_USER_ACCOUNT_ERROR'
Expand Down Expand Up @@ -72,6 +76,26 @@ const fetchUserAccountError = error => {
return { type: FETCH_USER_ACCOUNT_ERROR, completed: true, error: error }
}

/*
* Account fetch countries
*/

const fetchUserAccountCountriesRequested = () => {
return { type: FETCH_USER_ACCOUNT_COUNTRIES_REQUESTED, completed: false }
}

const fetchUserAccountCountriesSuccess = countries => {
return {
type: FETCH_USER_ACCOUNT_COUNTRIES_SUCCESS,
completed: true,
data: countries.data
}
}

const fetchUserAccountCountriesError = error => {
return { type: FETCH_USER_ACCOUNT_COUNTRIES_ERROR, completed: true, error: error }
}

/*
* Account create
*/
Expand Down Expand Up @@ -382,6 +406,23 @@ const fetchAccount = () => {
}
}

const fetchAccountCountries = () => {
validToken()
return (dispatch) => {
dispatch(fetchUserAccountCountriesRequested())
return axios
.get(api.API_URL + '/user/account/countries')
.then(countries => {
return dispatch(fetchUserAccountCountriesSuccess(countries))
})
.catch(e => {
// eslint-disable-next-line no-console
console.log('fetch user account countries error', e)
return dispatch(fetchUserAccountCountriesError(e))
})
}
}

const createAccount = (country) => {
validToken()
return (dispatch, getState) => {
Expand Down Expand Up @@ -606,6 +647,9 @@ export {
FETCH_USER_ACCOUNT_REQUESTED,
FETCH_USER_ACCOUNT_SUCCESS,
FETCH_USER_ACCOUNT_ERROR,
FETCH_USER_ACCOUNT_COUNTRIES_REQUESTED,
FETCH_USER_ACCOUNT_COUNTRIES_SUCCESS,
FETCH_USER_ACCOUNT_COUNTRIES_ERROR,
CREATE_USER_ACCOUNT_REQUESTED,
CREATE_USER_ACCOUNT_SUCCESS,
CREATE_USER_ACCOUNT_ERROR,
Expand Down Expand Up @@ -640,6 +684,7 @@ export {
UPDATE_BANKACCOUNT_SUCCESS,
UPDATE_BANKACCOUNT_ERROR,
fetchAccount,
fetchAccountCountries,
createAccount,
updateAccount,
fetchCustomer,
Expand Down
177 changes: 114 additions & 63 deletions frontend/src/components/profile/account-details.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import React, { useEffect, useState } from 'react'
import { injectIntl, FormattedMessage, FormattedDate } from 'react-intl'
import ReactPlaceholder from 'react-placeholder'
import {
Expand All @@ -17,7 +17,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'
import Switch from '@material-ui/core/Switch'

import CountryPicker from './country-picker'
import { countryCodes } from './country-codes'
import { countryCodes, countryCurrencies } from './country-codes'
import Field from '../design-library/atoms/field/field'
import Alert from '../design-library/atoms/alert/alert'

Expand All @@ -38,10 +38,12 @@ const styles = (theme) => ({
const AccountDetails = ({
intl,
account,
countries,
updateAccount,
user,
createAccount,
fetchAccount,
fetchAccountCountries,
setActiveStep,
classes
}) => {
Expand Down Expand Up @@ -85,7 +87,7 @@ const AccountDetails = ({
}
setAccountData(formData)
const accountUpdated = await updateAccount(userId, formData)
if(!accountUpdated.error) setActiveStep(1)
if (!accountUpdated.error) setActiveStep(1)
setEditIdNumber(false)
}

Expand Down Expand Up @@ -115,6 +117,7 @@ const AccountDetails = ({
if (user.user.id) {
const userId = user.user.id
fetchAccount(userId)
fetchAccountCountries()
}
}, [])

Expand All @@ -138,73 +141,121 @@ const AccountDetails = ({
</Typography>
</Grid>
<Grid item xs={12} md={12}>
<ReactPlaceholder
showLoadingAnimation
type='media'
rows={1}
ready={account.completed}
>
<fieldset className={classes.fieldset}>
<legend className={classes.legend}>
<Typography>
<FormattedMessage id='account-details-country-information-title' defaultMessage='Country' />
</Typography>
</legend>
<Grid container spacing={2}>
{displayCurrentCountry.country &&
<Grid item xs={12} md={12}>
<Alert severity='info'>
<FormattedMessage id='account-details-country-information-desc' defaultMessage='Please make sure you have bank account on the country selected before continue.' />
</Alert>
</Grid>
}
{account && account.data.country
? <Grid item xs={12} md={12}>
<div style={{ display: 'flex', alignItems: 'center', padding: 20 }}>
<img width='48' src={require(`../../images/countries/${countryCodes.find(c => c.code === account.data.country).image}.png`).default || require(`../../images/countries/${countryCodes.find(c => c.code === account.data.country).image}.png`)} />
<Typography component='span' style={{ marginLeft: 10 }}>
{countryCodes.find(c => c.code === account.data.country).country}
</Typography>
</div>
</Grid>
: <div>
<Button variant='outlined' onClick={() => setOpenCountryPicker(true)} style={{ margin: 20 }}>
<FormattedMessage id='account-details-country-information-action' defaultMessage='Select Country' />
</Button>
<CountryPicker open={openCountryPicker} onClose={closeCountryPicker} classes={classes} />
</div>
}
<code style={{ display: 'none' }}>{account && JSON.stringify(account.data)}</code>
</Grid>
{displayCurrentCountry.country ? (
<Grid container spacing={2}>
<Grid item xs={12} md={12}>
<div style={{ display: 'flex', alignItems: 'center', padding: 20 }}>
<img width='48' src={require(`../../images/countries/${countryCodes.find(c => c.code === displayCurrentCountry.code).image}.png`).default || require(`../../images/countries/${countryCodes.find(c => c.code === displayCurrentCountry.code).image}.png`)} />
<Typography component='span' style={{ marginLeft: 10 }}>
{countryCodes.find(c => c.code === displayCurrentCountry.code).country}
</Typography>
</div>
</Grid>
<Grid item xs={12} md={12} justifyContent='flex-end' alignContent='flex-end' style={{ display: 'flex' }}>
<Button variant='contained' color='secondary' onClick={() => {
displayCurrentCountry.code && createAccount(displayCurrentCountry.code)
setDisplayCurrentCountry({ country: '', code: '' })
}} style={{ margin: 20 }}>
<FormattedMessage id='account-details-country-information-save' defaultMessage='Save Country and continue' />
</Button>
<Grid container spacing={2}>
<Grid item xs={12} md={account && account.data.country ? 6 : 12}>
<ReactPlaceholder
showLoadingAnimation
type='media'
rows={1}
ready={account.completed}
>
<fieldset className={classes.fieldset}>
<legend className={classes.legend}>
<Typography>
<FormattedMessage id='account-details-country-information-title' defaultMessage='Country' />
</Typography>
</legend>
<Grid container spacing={2}>
{displayCurrentCountry.country &&
<Grid item xs={12} md={12}>
<Alert severity='info'>
<FormattedMessage id='account-details-country-information-desc' defaultMessage='Please make sure you have bank account on the country selected before continue.' />
</Alert>
</Grid>
}
{account && account.data.country
? <>
<Grid item xs={12} md={6}>
<div style={{ display: 'flex', alignItems: 'center', padding: 20 }}>
<img width='48' src={require(`../../images/countries/${countryCodes.find(c => c.code === account.data.country).image}.png`).default || require(`../../images/countries/${countryCodes.find(c => c.code === account.data.country).image}.png`)} />
<Typography component='span' style={{ marginLeft: 10 }}>
{countryCodes.find(c => c.code === account.data.country).country}
</Typography>
</div>
</Grid>
</>
: <div>
<Button variant='outlined' onClick={() => setOpenCountryPicker(true)} style={{ margin: 20 }}>
<FormattedMessage id='account-details-country-information-action' defaultMessage='Select Country' />
</Button>
<CountryPicker open={openCountryPicker} onClose={closeCountryPicker} classes={classes} />
</div>
}
<code style={{ display: 'none' }}>{account && JSON.stringify(account.data)}</code>
</Grid>
</Grid>
) : ('')}
</fieldset>
</ReactPlaceholder>
{displayCurrentCountry.country ? (
<Grid container spacing={2}>
<Grid item xs={12} md={12}>
<div style={{ display: 'flex', alignItems: 'center', padding: 20 }}>
<img width='48' src={require(`../../images/countries/${countryCodes.find(c => c.code === displayCurrentCountry.code).image}.png`).default || require(`../../images/countries/${countryCodes.find(c => c.code === displayCurrentCountry.code).image}.png`)} />
<Typography component='span' style={{ marginLeft: 10 }}>
{countryCodes.find(c => c.code === displayCurrentCountry.code).country}
</Typography>
</div>
</Grid>
<Grid item xs={12} md={12} justifyContent='flex-end' alignContent='flex-end' style={{ display: 'flex' }}>
<Button variant='contained' color='secondary' onClick={() => {
displayCurrentCountry.code && createAccount(displayCurrentCountry.code)
setDisplayCurrentCountry({ country: '', code: '' })
}} style={{ margin: 20 }}>
<FormattedMessage id='account-details-country-information-save' defaultMessage='Save Country and continue' />
</Button>
</Grid>
</Grid>
) : ('')}
</fieldset>
</ReactPlaceholder>
</Grid>
{account && account.data.country &&
<Grid item xs={12} md={6}>
<fieldset className={classes.fieldset} style={{height: 108, display: 'flex', alignItems: 'center'}}>
<legend className={classes.legend}>
<Typography>
<FormattedMessage id='account.details.currency.title' defaultMessage='Currency' />
</Typography>
</legend>
<ReactPlaceholder
showLoadingAnimation
type='text'
rows={1}
ready={countries.completed}
>
<FormControl style={{ width: '100%' }}>
<Select
native
value={countries.data.default_currency}
disabled={true}
onChange={(e) => {

}}
inputProps={{
name: 'country',
id: 'country-native-simple',
}}
>
<option aria-label="None" value="" />
<option value={countries.data.default_currency}>
{`${countryCurrencies.find(c => c.code.toLowerCase() === countries.data.default_currency)?.currency} - ${countryCurrencies.find(c => c.code.toLowerCase() === countries.data.default_currency)?.symbol}` || countries.data.default_currency}
</option>
{countries.data?.supported_bank_account_currencies &&
Object.keys(countries.data.supported_bank_account_currencies).map((currency, index) => (
<option key={currency} value={currency}>
{`${countryCurrencies.find(c => c.code.toLowerCase() === currency)?.currency} - ${countryCurrencies.find(c => c.code.toLowerCase() === currency)?.symbol}` || currency}
</option>
))}
</Select>
</FormControl>
</ReactPlaceholder>
</fieldset>
</Grid>}
</Grid>
</Grid>
{account.data.country && (
<Grid item xs={12} md={12}>
<form
onSubmit={handleSubmit}
onChange={onChange}
style={{ marginTop: 20, marginBottom: 20 }}
style={{ marginBottom: 20 }}
>
<fieldset className={classes.fieldset}>
<legend className={classes.legend}>
Expand Down
Loading

0 comments on commit b81d5b5

Please sign in to comment.