feat: mailgun setup in notifications

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

@@ -11,6 +11,7 @@ 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'
@@ -64,6 +65,7 @@ const Notifications = ({
   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)
 
@@ -74,7 +76,10 @@ const Notifications = ({
   })
 
   const [saveAccount] = useMutation(SAVE_ACCOUNT, {
-    onCompleted: () => setSmsSetupPopup(false),
+    onCompleted: () => {
+      setSmsSetupPopup(false)
+      setEmailSetupPopup(false)
+    },
     refetchQueries: ['getData'],
     onError: error => setError(error)
   })
@@ -83,6 +88,7 @@ const Notifications = ({
   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)
@@ -110,6 +116,14 @@ const Notifications = ({
     })
   }
 
+  const mailgunSave = it => {
+    setError(null)
+    R.compose(save(null), toNamespace('email'))({ active: true })
+    return saveAccount({
+      variables: { accounts: { mailgun: it } }
+    })
+  }
+
   const isEditing = key => editingKey === key
   const isDisabled = key => editingKey && editingKey !== key
 
@@ -126,11 +140,14 @@ const Notifications = ({
     machines,
     cryptoCurrencies,
     twilioAvailable,
-    setSmsSetupPopup
+    setSmsSetupPopup,
+    mailgunAvailable,
+    setEmailSetupPopup
   }
 
   return (
     !loading && (
+      <>
         <NotificationsCtx.Provider value={contextValue}>
           {displayTitle && <TitleSection title="Notifications" />}
           {displaySetup && (
@@ -139,7 +156,9 @@ const Notifications = ({
             </Section>
           )}
           {displayTransactionAlerts && (
-          <Section title="Transaction alerts" error={error && section === 'tx'}>
+            <Section
+              title="Transaction alerts"
+              error={error && section === 'tx'}>
               <TransactionAlerts section="tx" fieldWidth={FIELDS_WIDTH} />
             </Section>
           )}
@@ -169,6 +188,7 @@ const Notifications = ({
               )}
             </Section>
           )}
+        </NotificationsCtx.Provider>
         {smsSetupPopup && (
           <Modal
             title={`Configure Twilio`}
@@ -186,7 +206,24 @@ const Notifications = ({
             />
           </Modal>
         )}
-      </NotificationsCtx.Provider>
+        {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>
+        )}
+      </>
     )
   )
 }

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

@@ -85,7 +85,9 @@ const Setup = ({ wizard, forceDisable }) => {
     data: rawData,
     save: rawSave,
     twilioAvailable,
-    setSmsSetupPopup
+    setSmsSetupPopup,
+    mailgunAvailable,
+    setEmailSetupPopup
   } = useContext(NotificationsCtx)
 
   const namespaces = [
@@ -93,7 +95,11 @@ const Setup = ({ wizard, forceDisable }) => {
       name: 'email',
       forceDisable: forceDisable,
       shouldUpperCase: false,
-      onActivation: () => true
+      onActivation: () => {
+        if (mailgunAvailable) return true
+        setEmailSetupPopup(true)
+        return false
+      }
     },
     {
       name: 'sms',