157 lines
3.8 KiB
JavaScript
157 lines
3.8 KiB
JavaScript
import { useMutation, useQuery } from '@apollo/react-hooks'
|
||
import { makeStyles, Box } from '@material-ui/core'
|
||
import classnames from 'classnames'
|
||
import gql from 'graphql-tag'
|
||
import React, { useState } from 'react'
|
||
|
||
import InfoMessage from 'src/components/InfoMessage'
|
||
import { HoverableTooltip } from 'src/components/Tooltip'
|
||
import { Button, SupportLinkButton } from 'src/components/buttons'
|
||
import { RadioGroup } from 'src/components/inputs'
|
||
import { H1, H4, P } from 'src/components/typography'
|
||
import FormRenderer from 'src/pages/Services/FormRenderer'
|
||
import twilio from 'src/pages/Services/schemas/twilio'
|
||
|
||
import styles from './Wallet/Shared.styles'
|
||
|
||
const GET_CONFIG = gql`
|
||
{
|
||
config
|
||
accounts
|
||
}
|
||
`
|
||
|
||
const SAVE_ACCOUNTS = gql`
|
||
mutation Save($accounts: JSONObject) {
|
||
saveAccounts(accounts: $accounts)
|
||
}
|
||
`
|
||
|
||
const useStyles = makeStyles({
|
||
...styles,
|
||
content: {
|
||
width: 820
|
||
},
|
||
radioLabel: {
|
||
...styles.radioLabel,
|
||
width: 280
|
||
},
|
||
wrapper: {
|
||
width: 1200,
|
||
height: 100,
|
||
margin: [[0, 'auto']]
|
||
},
|
||
title: {
|
||
marginLeft: 8,
|
||
marginBottom: 5
|
||
},
|
||
info: {
|
||
marginTop: 20,
|
||
marginBottom: 20
|
||
}
|
||
})
|
||
|
||
const options = [
|
||
{
|
||
code: 'enable',
|
||
display: 'Yes, I will'
|
||
},
|
||
{
|
||
code: 'disable',
|
||
display: 'No, not for now'
|
||
}
|
||
]
|
||
|
||
function Twilio({ doContinue }) {
|
||
const classes = useStyles()
|
||
const [selected, setSelected] = useState(null)
|
||
const [error, setError] = useState(false)
|
||
|
||
const { data, refetch } = useQuery(GET_CONFIG)
|
||
const [saveAccounts] = useMutation(SAVE_ACCOUNTS, {
|
||
onCompleted: doContinue
|
||
})
|
||
|
||
const accounts = data?.accounts ?? []
|
||
|
||
const onSelect = e => {
|
||
setSelected(e.target.value)
|
||
setError(false)
|
||
}
|
||
|
||
const clickContinue = () => {
|
||
if (!selected) return setError(true)
|
||
doContinue()
|
||
}
|
||
|
||
const save = twilio => {
|
||
const accounts = { twilio }
|
||
return saveAccounts({ variables: { accounts } }).then(() => refetch())
|
||
}
|
||
|
||
const titleClasses = {
|
||
[classes.title]: true,
|
||
[classes.error]: error
|
||
}
|
||
|
||
return (
|
||
<div className={classes.wrapper}>
|
||
<div className={classes.content}>
|
||
<H1>Twilio (SMS service)</H1>
|
||
<Box display="flex" alignItems="end">
|
||
<H4 noMargin className={classnames(titleClasses)}>
|
||
Will you setup a two way machine or compliance?
|
||
</H4>
|
||
<HoverableTooltip width={304}>
|
||
<P>
|
||
Two-way machines allow your customers not only to buy (cash-in)
|
||
but also sell cryptocurrencies (cash-out).
|
||
</P>
|
||
<P>
|
||
You’ll need an SMS service for cash-out transactions and for any
|
||
compliance triggers
|
||
</P>
|
||
</HoverableTooltip>
|
||
</Box>
|
||
|
||
<RadioGroup
|
||
labelClassName={classes.radioLabel}
|
||
className={classes.radioGroup}
|
||
options={options}
|
||
value={selected}
|
||
onChange={onSelect}
|
||
/>
|
||
|
||
<InfoMessage className={classes.info}>
|
||
To set up Twilio please read the instructions from our support portal.
|
||
</InfoMessage>
|
||
<SupportLinkButton
|
||
link="https://support.lamassu.is/hc/en-us/articles/115001203951-Twilio-for-SMS"
|
||
label="Twilio for SMS"
|
||
/>
|
||
|
||
{selected === 'enable' && (
|
||
<>
|
||
<H4 noMargin>Enter credentials</H4>
|
||
<FormRenderer
|
||
xs={6}
|
||
save={save}
|
||
value={accounts.twilio}
|
||
elements={twilio.elements}
|
||
validationSchema={twilio.validationSchema}
|
||
buttonLabel={'Continue'}
|
||
buttonClass={classes.formButton}
|
||
/>
|
||
</>
|
||
)}
|
||
{selected !== 'enable' && (
|
||
<Button size="lg" onClick={clickContinue} className={classes.button}>
|
||
Continue
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Twilio
|