lamassu-server/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.js
2024-11-28 11:16:22 +00:00

117 lines
3.2 KiB
JavaScript

import { useQuery, useMutation } from '@apollo/react-hooks'
import { makeStyles } from '@material-ui/core/styles'
import gql from 'graphql-tag'
import React, { memo } from 'react'
import { HelpTooltip } from 'src/components/Tooltip'
import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
import { Switch } from 'src/components/inputs'
import { H4, P, Label2 } from 'src/components/typography'
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
import { SupportLinkButton } from '../../components/buttons'
import { global } from './OperatorInfo.styles'
const useStyles = makeStyles(global)
const GET_CONFIG = gql`
query getData {
config
}
`
const SAVE_CONFIG = gql`
mutation Save($config: JSONObject) {
saveConfig(config: $config)
}
`
const Row = memo(({ title, disabled = false, checked, save, label }) => {
const classes = useStyles()
return (
<div className={classes.switchRow}>
<P>{title}</P>
<div className={classes.switch}>
<Switch
disabled={disabled}
checked={checked}
onChange={event => save && save(event.target.checked)}
/>
{label && <Label2>{label}</Label2>}
</div>
</div>
)
})
const CoinATMRadar = memo(({ wizard }) => {
const classes = useStyles()
const { data } = useQuery(GET_CONFIG)
const [saveConfig] = useMutation(SAVE_CONFIG, {
refetchQueries: ['getData']
})
const save = it =>
saveConfig({
variables: { config: toNamespace(namespaces.COIN_ATM_RADAR, it) }
})
const coinAtmRadarConfig =
data?.config && fromNamespace(namespaces.COIN_ATM_RADAR, data.config)
if (!coinAtmRadarConfig) return null
return (
<div className={classes.content}>
<div>
<div className={classes.header}>
<H4>Coin ATM Radar share settings</H4>
<HelpTooltip width={320}>
<P>
For details on configuring this panel, please read the relevant
knowledgebase article{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar">
here
</a>
.
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360023720472-Coin-ATM-Radar"
label="Lamassu Support Article"
bottomSpace="1"
/>
</HelpTooltip>
</div>
<Row
title={'Share information?'}
checked={coinAtmRadarConfig.active}
save={value => save({ active: value })}
label={coinAtmRadarConfig.active ? 'Yes' : 'No'}
/>
<BooleanPropertiesTable
editing={wizard}
title="Machine info"
data={coinAtmRadarConfig}
elements={[
{
name: 'commissions',
display: 'Commissions'
},
{
name: 'limitsAndVerification',
display: 'Limits and verification'
}
]}
save={save}
/>
</div>
</div>
)
})
export default CoinATMRadar