feat: twilio setup in notifications

new-lamassu-admin/src/pages/Notifications/Notifications.js

@@ -3,7 +3,11 @@ 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'
@@ -28,6 +32,7 @@ const GET_INFO = gql`
       code
       display
     }
+    accounts
   }
 `
 
@@ -37,6 +42,12 @@ const SAVE_CONFIG = gql`
   }
 `
 
+const SAVE_ACCOUNT = gql`
+  mutation Save($accounts: JSONObject) {
+    saveAccounts(accounts: $accounts)
+  }
+`
+
 const FIELDS_WIDTH = 130
 
 const Notifications = ({
@@ -52,6 +63,7 @@ const Notifications = ({
   const [section, setSection] = useState(null)
   const [error, setError] = useState(null)
   const [editingKey, setEditingKey] = useState(null)
+  const [smsSetupPopup, setSmsSetupPopup] = useState(false)
 
   const { data, loading } = useQuery(GET_INFO)
 
@@ -61,9 +73,16 @@ const Notifications = ({
     onError: error => setError(error)
   })
 
+  const [saveAccount] = useMutation(SAVE_ACCOUNT, {
+    onCompleted: () => setSmsSetupPopup(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 currency = R.path(['fiatCurrency'])(
     fromNamespace(namespaces.LOCALE)(data?.config)
@@ -83,6 +102,14 @@ const Notifications = ({
     setEditingKey(state ? key : null)
   }
 
+  const twilioSave = it => {
+    setError(null)
+    R.compose(save(null), toNamespace('sms'))({ active: true })
+    return saveAccount({
+      variables: { accounts: { twilio: it } }
+    })
+  }
+
   const isEditing = key => editingKey === key
   const isDisabled = key => editingKey && editingKey !== key
 
@@ -97,7 +124,9 @@ const Notifications = ({
     setEditing,
     setSection,
     machines,
-    cryptoCurrencies
+    cryptoCurrencies,
+    twilioAvailable,
+    setSmsSetupPopup
   }
 
   return (
@@ -140,6 +169,23 @@ const Notifications = ({
             )}
           </Section>
         )}
+        {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>
+        )}
       </NotificationsCtx.Provider>
     )
   )

new-lamassu-admin/src/pages/Notifications/sections/Setup.js

@@ -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,40 @@ const useStyles = makeStyles({
     width: 930
   }
 })
+
 const Setup = ({ wizard, forceDisable }) => {
+  const {
+    data: rawData,
+    save: rawSave,
+    twilioAvailable,
+    setSmsSetupPopup
+  } = useContext(NotificationsCtx)
+
+  const namespaces = [
+    {
+      name: 'email',
+      forceDisable: forceDisable,
+      shouldUpperCase: false,
+      onActivation: () => true
+    },
+    {
+      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 +126,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>
   )