138 lines
2.9 KiB
JavaScript
138 lines
2.9 KiB
JavaScript
import React, { memo } from 'react'
|
|
import * as Yup from 'yup'
|
|
|
|
import TextInputFormik from 'src/components/inputs/formik/TextInput'
|
|
import SecretInputFormik from 'src/components/inputs/formik/SecretInput'
|
|
|
|
import { Card, getValue as getValueAux } from './aux'
|
|
import EditService from './EditService'
|
|
|
|
const schema = {
|
|
accountSid: {
|
|
code: 'accountSid',
|
|
display: 'Account SID'
|
|
},
|
|
authToken: {
|
|
code: 'authToken',
|
|
display: 'Auth Token'
|
|
},
|
|
fromNumber: {
|
|
code: 'fromNumber',
|
|
display: 'From Number'
|
|
},
|
|
toNumber: {
|
|
code: 'toNumber',
|
|
display: 'To Number'
|
|
}
|
|
}
|
|
|
|
const TwilioCard = memo(({ account, onEdit, ...props }) => {
|
|
const getValue = getValueAux(account)
|
|
|
|
const fromNumber = schema.fromNumber
|
|
const toNumber = schema.toNumber
|
|
|
|
const fromNumberValue = getValue(fromNumber.code)
|
|
const toNumberValue = getValue(toNumber.code)
|
|
|
|
const items = [
|
|
{
|
|
label: fromNumber.display,
|
|
value: fromNumberValue
|
|
},
|
|
{
|
|
label: toNumber.display,
|
|
value: toNumberValue
|
|
}
|
|
]
|
|
|
|
return (
|
|
<Card
|
|
account={account}
|
|
title="Twilio (SMS)"
|
|
items={items}
|
|
onEdit={onEdit}
|
|
/>
|
|
)
|
|
})
|
|
|
|
const getTwilioFormik = account => {
|
|
const getValue = getValueAux(account)
|
|
|
|
const accountSid = getValue(schema.accountSid.code)
|
|
const authToken = getValue(schema.authToken.code)
|
|
const fromNumber = getValue(schema.fromNumber.code)
|
|
const toNumber = getValue(schema.toNumber.code)
|
|
|
|
return {
|
|
initialValues: {
|
|
accountSid: accountSid,
|
|
authToken: authToken,
|
|
fromNumber: fromNumber,
|
|
toNumber: toNumber
|
|
},
|
|
validationSchema: Yup.object().shape({
|
|
accountSid: Yup.string()
|
|
.max(100, 'Too long')
|
|
.required('Required'),
|
|
authToken: Yup.string()
|
|
.max(100, 'Too long')
|
|
.required('Required'),
|
|
fromNumber: Yup.string()
|
|
.max(100, 'Too long')
|
|
.required('Required'),
|
|
toNumber: Yup.string()
|
|
.max(100, 'Too long')
|
|
.required('Required')
|
|
})
|
|
}
|
|
}
|
|
|
|
const getTwilioFields = () => [
|
|
{
|
|
name: schema.accountSid.code,
|
|
label: schema.accountSid.display,
|
|
type: 'text',
|
|
component: TextInputFormik
|
|
},
|
|
{
|
|
name: schema.authToken.code,
|
|
label: schema.authToken.display,
|
|
type: 'text',
|
|
component: SecretInputFormik
|
|
},
|
|
{
|
|
name: schema.fromNumber.code,
|
|
label: schema.fromNumber.display,
|
|
type: 'text',
|
|
component: TextInputFormik
|
|
},
|
|
{
|
|
name: schema.toNumber.code,
|
|
label: schema.toNumber.display,
|
|
type: 'text',
|
|
component: TextInputFormik
|
|
}
|
|
]
|
|
|
|
const TwilioForm = ({ account, ...props }) => {
|
|
const { code } = account
|
|
|
|
const formik = getTwilioFormik(account)
|
|
|
|
const fields = getTwilioFields()
|
|
|
|
return (
|
|
<>
|
|
<EditService
|
|
title="Twilio"
|
|
formik={formik}
|
|
code={code}
|
|
fields={fields}
|
|
{...props}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export { TwilioCard, TwilioForm, getTwilioFormik, getTwilioFields }
|