Merge pull request #926 from ubavic/feat/twilio_config_popup
feat: add Twilio set-up to the Compliance and to the Notifications
This commit is contained in:
Rafael Taranto
GitHub
commit
1b382bcd06
3 changed files with 237 additions and 52 deletions
|
|
@ -3,10 +3,15 @@ import gql from 'graphql-tag'
|
|||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import Modal from 'src/components/Modal'
|
||||
import TitleSection from 'src/components/layout/TitleSection'
|
||||
import { P } from 'src/components/typography'
|
||||
import FormRenderer from 'src/pages/Services/FormRenderer'
|
||||
import twilioSchema from 'src/pages/Services/schemas/twilio'
|
||||
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
|
||||
|
||||
import Section from '../../components/layout/Section'
|
||||
import mailgunSchema from '../Services/schemas/mailgun'
|
||||
|
||||
import NotificationsCtx from './NotificationsContext'
|
||||
import CryptoBalanceAlerts from './sections/CryptoBalanceAlerts'
|
||||
|
|
@ -28,6 +33,7 @@ const GET_INFO = gql`
|
|||
code
|
||||
display
|
||||
}
|
||||
accounts
|
||||
}
|
||||
`
|
||||
|
||||
|
|
@ -37,6 +43,12 @@ const SAVE_CONFIG = gql`
|
|||
}
|
||||
`
|
||||
|
||||
const SAVE_ACCOUNT = gql`
|
||||
mutation Save($accounts: JSONObject) {
|
||||
saveAccounts(accounts: $accounts)
|
||||
}
|
||||
`
|
||||
|
||||
const FIELDS_WIDTH = 130
|
||||
|
||||
const Notifications = ({
|
||||
|
|
@ -52,6 +64,8 @@ const Notifications = ({
|
|||
const [section, setSection] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
const [editingKey, setEditingKey] = useState(null)
|
||||
const [smsSetupPopup, setSmsSetupPopup] = useState(false)
|
||||
const [emailSetupPopup, setEmailSetupPopup] = useState(false)
|
||||
|
||||
const { data, loading } = useQuery(GET_INFO)
|
||||
|
||||
|
|
@ -61,9 +75,20 @@ const Notifications = ({
|
|||
onError: error => setError(error)
|
||||
})
|
||||
|
||||
const [saveAccount] = useMutation(SAVE_ACCOUNT, {
|
||||
onCompleted: () => {
|
||||
setSmsSetupPopup(false)
|
||||
setEmailSetupPopup(false)
|
||||
},
|
||||
refetchQueries: ['getData'],
|
||||
onError: error => setError(error)
|
||||
})
|
||||
|
||||
const config = fromNamespace(SCREEN_KEY)(data?.config)
|
||||
const machines = data?.machines
|
||||
const cryptoCurrencies = data?.cryptoCurrencies
|
||||
const twilioAvailable = R.has('twilio', data?.accounts || {})
|
||||
const mailgunAvailable = R.has('mailgun', data?.accounts || {})
|
||||
|
||||
const currency = R.path(['fiatCurrency'])(
|
||||
fromNamespace(namespaces.LOCALE)(data?.config)
|
||||
|
|
@ -83,6 +108,20 @@ const Notifications = ({
|
|||
setEditingKey(state ? key : null)
|
||||
}
|
||||
|
||||
const twilioSave = it => {
|
||||
setError(null)
|
||||
return saveAccount({
|
||||
variables: { accounts: { twilio: it } }
|
||||
}).then(() => R.compose(save(null), toNamespace('sms'))({ active: true }))
|
||||
}
|
||||
|
||||
const mailgunSave = it => {
|
||||
setError(null)
|
||||
return saveAccount({
|
||||
variables: { accounts: { mailgun: it } }
|
||||
}).then(() => R.compose(save(null), toNamespace('email'))({ active: true }))
|
||||
}
|
||||
|
||||
const isEditing = key => editingKey === key
|
||||
const isDisabled = key => editingKey && editingKey !== key
|
||||
|
||||
|
|
@ -97,50 +136,92 @@ const Notifications = ({
|
|||
setEditing,
|
||||
setSection,
|
||||
machines,
|
||||
cryptoCurrencies
|
||||
cryptoCurrencies,
|
||||
twilioAvailable,
|
||||
setSmsSetupPopup,
|
||||
mailgunAvailable,
|
||||
setEmailSetupPopup
|
||||
}
|
||||
|
||||
return (
|
||||
!loading && (
|
||||
<NotificationsCtx.Provider value={contextValue}>
|
||||
{displayTitle && <TitleSection title="Notifications" />}
|
||||
{displaySetup && (
|
||||
<Section title="Setup" error={error && !section}>
|
||||
<Setup forceDisable={!!editingKey} wizard={wizard} />
|
||||
</Section>
|
||||
<>
|
||||
<NotificationsCtx.Provider value={contextValue}>
|
||||
{displayTitle && <TitleSection title="Notifications" />}
|
||||
{displaySetup && (
|
||||
<Section title="Setup" error={error && !section}>
|
||||
<Setup forceDisable={!!editingKey} wizard={wizard} />
|
||||
</Section>
|
||||
)}
|
||||
{displayTransactionAlerts && (
|
||||
<Section
|
||||
title="Transaction alerts"
|
||||
error={error && section === 'tx'}>
|
||||
<TransactionAlerts section="tx" fieldWidth={FIELDS_WIDTH} />
|
||||
</Section>
|
||||
)}
|
||||
{displayFiatAlerts && (
|
||||
<Section
|
||||
title="Fiat balance alerts"
|
||||
error={error && section === 'fiat'}>
|
||||
<FiatBalanceAlerts section="fiat" max={100} fieldWidth={50} />
|
||||
{displayOverrides && (
|
||||
<FiatBalanceOverrides
|
||||
config={fromNamespace(namespaces.CASH_OUT)(data?.config)}
|
||||
section="fiat"
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
{displayCryptoAlerts && (
|
||||
<Section
|
||||
title="Crypto balance alerts"
|
||||
error={error && section === 'crypto'}>
|
||||
<CryptoBalanceAlerts section="crypto" fieldWidth={FIELDS_WIDTH} />
|
||||
{displayOverrides && (
|
||||
<CryptoBalanceOverrides
|
||||
section="crypto"
|
||||
fieldWidth={FIELDS_WIDTH}
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
</NotificationsCtx.Provider>
|
||||
{smsSetupPopup && (
|
||||
<Modal
|
||||
title={`Configure Twilio`}
|
||||
width={478}
|
||||
handleClose={() => setSmsSetupPopup(false)}
|
||||
open={true}>
|
||||
<P>
|
||||
In order for the SMS notifications to work, you'll first need to
|
||||
configure Twilio.
|
||||
</P>
|
||||
<FormRenderer
|
||||
save={twilioSave}
|
||||
elements={twilioSchema.elements}
|
||||
validationSchema={twilioSchema.getValidationSchema}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
{displayTransactionAlerts && (
|
||||
<Section title="Transaction alerts" error={error && section === 'tx'}>
|
||||
<TransactionAlerts section="tx" fieldWidth={FIELDS_WIDTH} />
|
||||
</Section>
|
||||
{emailSetupPopup && (
|
||||
<Modal
|
||||
title={`Configure Mailgun`}
|
||||
width={478}
|
||||
handleClose={() => setEmailSetupPopup(false)}
|
||||
open={true}>
|
||||
<P>
|
||||
In order for the mail notifications to work, you'll first need to
|
||||
configure Mailgun.
|
||||
</P>
|
||||
<FormRenderer
|
||||
save={mailgunSave}
|
||||
elements={mailgunSchema.elements}
|
||||
validationSchema={mailgunSchema.getValidationSchema}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
{displayFiatAlerts && (
|
||||
<Section
|
||||
title="Fiat balance alerts"
|
||||
error={error && section === 'fiat'}>
|
||||
<FiatBalanceAlerts section="fiat" max={100} fieldWidth={50} />
|
||||
{displayOverrides && (
|
||||
<FiatBalanceOverrides
|
||||
config={fromNamespace(namespaces.CASH_OUT)(data?.config)}
|
||||
section="fiat"
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
{displayCryptoAlerts && (
|
||||
<Section
|
||||
title="Crypto balance alerts"
|
||||
error={error && section === 'crypto'}>
|
||||
<CryptoBalanceAlerts section="crypto" fieldWidth={FIELDS_WIDTH} />
|
||||
{displayOverrides && (
|
||||
<CryptoBalanceOverrides
|
||||
section="crypto"
|
||||
fieldWidth={FIELDS_WIDTH}
|
||||
/>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
</NotificationsCtx.Provider>
|
||||
</>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,25 +26,33 @@ const sizes = {
|
|||
active: 263
|
||||
}
|
||||
|
||||
const Row = ({ namespace, forceDisable, shouldUpperCase }) => {
|
||||
const { data: rawData, save: rawSave } = useContext(NotificationsCtx)
|
||||
|
||||
const save = R.compose(rawSave(null), toNamespace(namespace))
|
||||
const data = fromNamespace(namespace)(rawData)
|
||||
|
||||
const Row = ({
|
||||
namespace,
|
||||
data,
|
||||
forceDisable,
|
||||
save,
|
||||
shouldUpperCase,
|
||||
onActivation
|
||||
}) => {
|
||||
const disabled = forceDisable || !data || !data.active
|
||||
|
||||
const Cell = ({ name, disabled }) => {
|
||||
const value = !!(data && data[name])
|
||||
|
||||
const onChange = event => {
|
||||
if (name === 'active' && value === false) {
|
||||
if (!onActivation()) return
|
||||
}
|
||||
|
||||
save({ [name]: event.target.checked })
|
||||
}
|
||||
|
||||
return (
|
||||
<Td width={sizes[name]} textAlign="center">
|
||||
<Switch
|
||||
disabled={disabled}
|
||||
checked={value}
|
||||
onChange={event => {
|
||||
save({ [name]: event.target.checked })
|
||||
}}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
/>
|
||||
</Td>
|
||||
|
|
@ -71,7 +79,46 @@ const useStyles = makeStyles({
|
|||
width: 930
|
||||
}
|
||||
})
|
||||
|
||||
const Setup = ({ wizard, forceDisable }) => {
|
||||
const {
|
||||
data: rawData,
|
||||
save: rawSave,
|
||||
twilioAvailable,
|
||||
setSmsSetupPopup,
|
||||
mailgunAvailable,
|
||||
setEmailSetupPopup
|
||||
} = useContext(NotificationsCtx)
|
||||
|
||||
const namespaces = [
|
||||
{
|
||||
name: 'email',
|
||||
forceDisable: forceDisable,
|
||||
shouldUpperCase: false,
|
||||
onActivation: () => {
|
||||
if (mailgunAvailable) return true
|
||||
setEmailSetupPopup(true)
|
||||
return false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'sms',
|
||||
forceDisable: forceDisable,
|
||||
shouldUpperCase: true,
|
||||
onActivation: () => {
|
||||
if (twilioAvailable) return true
|
||||
setSmsSetupPopup(true)
|
||||
return false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'notificationCenter',
|
||||
forceDisable: forceDisable,
|
||||
shouldUpperCase: false,
|
||||
onActivation: () => true
|
||||
}
|
||||
]
|
||||
|
||||
const widthAdjust = wizard ? 20 : 0
|
||||
const classes = useStyles()
|
||||
return (
|
||||
|
|
@ -85,9 +132,16 @@ const Setup = ({ wizard, forceDisable }) => {
|
|||
))}
|
||||
</THead>
|
||||
<TBody>
|
||||
<Row namespace="email" forceDisable={forceDisable} />
|
||||
<Row namespace="sms" shouldUpperCase forceDisable={forceDisable} />
|
||||
<Row namespace="notificationCenter" forceDisable={forceDisable} />
|
||||
{namespaces.map(namespace => (
|
||||
<Row
|
||||
namespace={namespace.name}
|
||||
forceDisable={namespace.forceDisable}
|
||||
save={R.compose(rawSave(null), toNamespace(namespace.name))}
|
||||
data={fromNamespace(namespace.name)(rawData)}
|
||||
shouldUpperCase={namespace.shouldUpperCase}
|
||||
onActivation={namespace.onActivation}
|
||||
/>
|
||||
))}
|
||||
</TBody>
|
||||
</Table>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,11 +5,14 @@ import gql from 'graphql-tag'
|
|||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import Modal from 'src/components/Modal'
|
||||
import { HoverableTooltip } from 'src/components/Tooltip'
|
||||
import { Link } from 'src/components/buttons'
|
||||
import { Link, SupportLinkButton } from 'src/components/buttons'
|
||||
import { Switch } from 'src/components/inputs'
|
||||
import TitleSection from 'src/components/layout/TitleSection'
|
||||
import { P, Label2 } from 'src/components/typography'
|
||||
import FormRenderer from 'src/pages/Services/FormRenderer'
|
||||
import twilioSchema from 'src/pages/Services/schemas/twilio'
|
||||
import { ReactComponent as ReverseCustomInfoIcon } from 'src/styling/icons/circle buttons/filter/white.svg'
|
||||
import { ReactComponent as CustomInfoIcon } from 'src/styling/icons/circle buttons/filter/zodiac.svg'
|
||||
import { ReactComponent as ReverseSettingsIcon } from 'src/styling/icons/circle buttons/settings/white.svg'
|
||||
|
|
@ -23,6 +26,12 @@ import AdvancedTriggers from './components/AdvancedTriggers'
|
|||
import { fromServer } from './helper'
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const SAVE_ACCOUNT = gql`
|
||||
mutation Save($accounts: JSONObject) {
|
||||
saveAccounts(accounts: $accounts)
|
||||
}
|
||||
`
|
||||
|
||||
const SAVE_CONFIG = gql`
|
||||
mutation Save($config: JSONObject) {
|
||||
saveConfig(config: $config)
|
||||
|
|
@ -32,6 +41,7 @@ const SAVE_CONFIG = gql`
|
|||
const GET_CONFIG = gql`
|
||||
query getData {
|
||||
config
|
||||
accounts
|
||||
}
|
||||
`
|
||||
|
||||
|
|
@ -55,6 +65,8 @@ const Triggers = () => {
|
|||
const [error, setError] = useState(null)
|
||||
const [subMenu, setSubMenu] = useState(false)
|
||||
|
||||
const [twilioSetupPopup, setTwilioSetupPopup] = useState(false)
|
||||
|
||||
const customInfoRequests =
|
||||
R.path(['customInfoRequests'])(customInfoReqData) ?? []
|
||||
const enabledCustomInfoRequests = R.filter(R.propEq('enabled', true))(
|
||||
|
|
@ -72,6 +84,12 @@ const Triggers = () => {
|
|||
onError: error => setError(error)
|
||||
})
|
||||
|
||||
const [saveAccount] = useMutation(SAVE_ACCOUNT, {
|
||||
onCompleted: () => setTwilioSetupPopup(false),
|
||||
refetchQueries: () => ['getData'],
|
||||
onError: error => setError(error)
|
||||
})
|
||||
|
||||
const addressReuseSave = rawConfig => {
|
||||
const config = toNamespace('compliance')(rawConfig)
|
||||
return saveConfig({ variables: { config } })
|
||||
|
|
@ -98,6 +116,17 @@ const Triggers = () => {
|
|||
|
||||
const loading = configLoading || customInfoLoading
|
||||
|
||||
const twilioSave = it => {
|
||||
setError(null)
|
||||
return saveAccount({
|
||||
variables: { accounts: { twilio: it } }
|
||||
})
|
||||
}
|
||||
const addNewTriger = () => {
|
||||
if (!R.has('twilio', data?.accounts || {})) setTwilioSetupPopup(true)
|
||||
else toggleWizard('newTrigger')()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<TitleSection
|
||||
|
|
@ -163,7 +192,7 @@ const Triggers = () => {
|
|||
)}
|
||||
{!loading && !subMenu && !R.isEmpty(triggers) && (
|
||||
<Box display="flex" justifyContent="flex-end">
|
||||
<Link color="primary" onClick={() => toggleWizard('newTrigger')()}>
|
||||
<Link color="primary" onClick={addNewTriger}>
|
||||
+ Add new trigger
|
||||
</Link>
|
||||
</Box>
|
||||
|
|
@ -191,6 +220,27 @@ const Triggers = () => {
|
|||
save={saveConfig}
|
||||
data={data}></AdvancedTriggers>
|
||||
)}
|
||||
{twilioSetupPopup && (
|
||||
<Modal
|
||||
title={`Configure SMS`}
|
||||
width={478}
|
||||
handleClose={() => setTwilioSetupPopup(false)}
|
||||
open={true}>
|
||||
<P>
|
||||
In order for compliance triggers to work, you'll first need to
|
||||
configure Twilio.
|
||||
</P>
|
||||
<SupportLinkButton
|
||||
link="https://support.lamassu.is/hc/en-us/articles/115001203951-Twilio-for-SMS"
|
||||
label="Lamassu Support Article"
|
||||
/>
|
||||
<FormRenderer
|
||||
save={twilioSave}
|
||||
elements={twilioSchema.elements}
|
||||
validationSchema={twilioSchema.getValidationSchema}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue