162 lines
4.1 KiB
JavaScript
162 lines
4.1 KiB
JavaScript
import * as R from 'ramda'
|
|
import React, { memo, useState } from 'react'
|
|
import {
|
|
overridesDefaults,
|
|
getCommissions,
|
|
getListCommissionsSchema,
|
|
commissionsList,
|
|
} from 'src/pages/Commissions/helper'
|
|
|
|
import { Table as EditableTable } from 'src/components/editableTable'
|
|
import { Select } from 'src/components/inputs'
|
|
|
|
const SHOW_ALL = {
|
|
code: 'SHOW_ALL',
|
|
display: 'Show all',
|
|
}
|
|
|
|
const ORDER_OPTIONS = [
|
|
{
|
|
code: 'machine',
|
|
display: 'Machine name',
|
|
},
|
|
{
|
|
code: 'cryptoCurrencies',
|
|
display: 'Cryptocurrency',
|
|
},
|
|
{
|
|
code: 'cashIn',
|
|
display: 'Cash-in',
|
|
},
|
|
{
|
|
code: 'cashOut',
|
|
display: 'Cash-out',
|
|
},
|
|
{
|
|
code: 'fixedFee',
|
|
display: 'Fixed fee',
|
|
},
|
|
{
|
|
code: 'minimumTx',
|
|
display: 'Minimum Tx',
|
|
},
|
|
]
|
|
|
|
const getElement = (code, display) => ({
|
|
code: code,
|
|
display: display || code,
|
|
})
|
|
|
|
const sortCommissionsBy = prop => {
|
|
switch (prop) {
|
|
case ORDER_OPTIONS[0]:
|
|
return R.sortBy(R.find(R.propEq('code', R.prop('machine'))))
|
|
case ORDER_OPTIONS[1]:
|
|
return R.sortBy(R.path(['cryptoCurrencies', 0]))
|
|
default:
|
|
return R.sortBy(R.prop(prop.code))
|
|
}
|
|
}
|
|
|
|
const filterCommissions = (coinFilter, machineFilter) =>
|
|
R.compose(
|
|
R.filter(
|
|
it => (machineFilter === SHOW_ALL) | (machineFilter.code === it.machine),
|
|
),
|
|
R.filter(
|
|
it =>
|
|
(coinFilter === SHOW_ALL) |
|
|
(coinFilter.code === it.cryptoCurrencies[0]),
|
|
),
|
|
)
|
|
|
|
const CommissionsList = memo(
|
|
({ config, localeConfig, currency, data, error, saveOverrides }) => {
|
|
const [machineFilter, setMachineFilter] = useState(SHOW_ALL)
|
|
const [coinFilter, setCoinFilter] = useState(SHOW_ALL)
|
|
const [orderProp, setOrderProp] = useState(ORDER_OPTIONS[0])
|
|
|
|
const coins = R.prop('cryptoCurrencies', localeConfig) ?? []
|
|
|
|
const getMachineCoins = deviceId => {
|
|
const override = R.prop('overrides', localeConfig)?.find(
|
|
R.propEq('machine', deviceId),
|
|
)
|
|
|
|
const machineCoins = override
|
|
? R.prop('cryptoCurrencies', override)
|
|
: coins
|
|
|
|
return R.xprod([deviceId], machineCoins)
|
|
}
|
|
|
|
const getMachineElement = it =>
|
|
getElement(R.prop('deviceId', it), R.prop('name', it))
|
|
|
|
const cryptoData = R.map(getElement)(coins)
|
|
|
|
const machineData = R.sortBy(
|
|
R.prop('display'),
|
|
R.map(getMachineElement)(R.prop('machines', data)),
|
|
)
|
|
|
|
const machinesCoinsTuples = R.unnest(
|
|
R.map(getMachineCoins)(machineData.map(R.prop('code'))),
|
|
)
|
|
|
|
const commissions = R.map(([deviceId, cryptoCode]) =>
|
|
getCommissions(cryptoCode, deviceId, config),
|
|
)(machinesCoinsTuples)
|
|
|
|
const tableData = R.compose(
|
|
sortCommissionsBy(orderProp),
|
|
filterCommissions(coinFilter, machineFilter),
|
|
)(commissions)
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex mb-6">
|
|
<Select
|
|
className="mr-5"
|
|
onSelectedItemChange={setMachineFilter}
|
|
label="Machines"
|
|
default={SHOW_ALL}
|
|
items={[SHOW_ALL].concat(machineData)}
|
|
selectedItem={machineFilter}
|
|
/>
|
|
<Select
|
|
className="mr-5"
|
|
onSelectedItemChange={setCoinFilter}
|
|
label="Cryptocurrency"
|
|
default={SHOW_ALL}
|
|
items={[SHOW_ALL].concat(cryptoData)}
|
|
selectedItem={coinFilter}
|
|
/>
|
|
<Select
|
|
onSelectedItemChange={setOrderProp}
|
|
label="Sort by"
|
|
default={ORDER_OPTIONS[0]}
|
|
items={ORDER_OPTIONS}
|
|
selectedItem={orderProp}
|
|
defaultAsFilter
|
|
/>
|
|
</div>
|
|
<div className="flex-1 w-full max-h-[70vh] overflow-y-auto">
|
|
<EditableTable
|
|
error={error?.message}
|
|
name="comissionsList"
|
|
enableEdit
|
|
save={saveOverrides}
|
|
initialValues={overridesDefaults}
|
|
validationSchema={getListCommissionsSchema(localeConfig)}
|
|
data={tableData}
|
|
elements={commissionsList(data, currency)}
|
|
orderedBy={orderProp}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
)
|
|
|
|
export default CommissionsList
|