chore: use monorepo organization

packages/admin-ui/src/pages/Wizard/components/Mailgun.jsx

@@ -0,0 +1,123 @@
+import { useMutation, useQuery, gql } from "@apollo/client";
+import React, { useState, useEffect } from 'react'
+import { H4, Info3 } from 'src/components/typography'
+import FormRenderer from 'src/pages/Services/FormRenderer'
+import InverseLinkIcon from 'src/styling/icons/action/external link/white.svg?react'
+import LinkIcon from 'src/styling/icons/action/external link/zodiac.svg?react'
+import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
+
+import { ActionButton } from 'src/components/buttons'
+import { RadioGroup } from 'src/components/inputs'
+import mailgunSchema from 'src/pages/Services/schemas/mailgun'
+import classes from 'src/pages/Wizard/Radio.module.css'
+import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
+
+const GET_CONFIG = gql`
+  {
+    config
+    accounts
+  }
+`
+
+const SAVE_CONFIG = gql`
+  mutation Save($config: JSONObject) {
+    saveConfig(config: $config)
+  }
+`
+const SAVE_ACCOUNTS = gql`
+  mutation Save($accounts: JSONObject) {
+    saveAccounts(accounts: $accounts)
+  }
+`
+
+const options = [
+  {
+    code: 'enabled',
+    display: 'Yes, send notifications to my email'
+  },
+  {
+    code: 'disabled',
+    display: "No, don't send email notifications"
+  }
+]
+
+const Mailgun = () => {
+  const { data } = useQuery(GET_CONFIG)
+  const [saveConfig] = useMutation(SAVE_CONFIG)
+  const [saveAccounts] = useMutation(SAVE_ACCOUNTS)
+  const [emailActive, setEmailActive] = useState(false)
+  const accounts = data?.accounts ?? []
+
+  const emailConfig =
+    data?.config &&
+    fromNamespace(namespaces.NOTIFICATIONS + '_email')(data.config)
+
+  useEffect(() => {
+    if (emailActive) return
+    emailConfig && setEmailActive(emailConfig?.active ? 'enabled' : 'disabled')
+  }, [emailActive, emailConfig])
+
+  const handleRadio = enabled => {
+    setEmailActive(enabled)
+    save(enabled === 'enabled')
+  }
+
+  const save = active => {
+    const config = toNamespace(`notifications_email`)({ active })
+    return saveConfig({ variables: { config } })
+  }
+
+  const saveAccount = mailgun => {
+    const accounts = { mailgun }
+    return saveAccounts({ variables: { accounts } })
+  }
+
+  return (
+    <div className={classes.mdForm}>
+      <H4>Do you want to get notifications via email?</H4>
+      <RadioGroup
+        labelClassName={classes.mailgunRadioLabel}
+        className={classes.mailgunRadioGroup}
+        options={options}
+        value={emailActive}
+        onChange={event => handleRadio(event.target.value)}
+      />
+
+      <div className={classes.infoMessage}>
+        <WarningIcon />
+        <Info3>
+          To get email notifications, you’ll need to set up Mailgun. Check out
+          our article on how to set it up.
+        </Info3>
+      </div>
+      <ActionButton
+        className={classes.actionButton}
+        color="primary"
+        Icon={LinkIcon}
+        InverseIcon={InverseLinkIcon}>
+        <a
+          className={classes.actionButtonLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://support.lamassu.is/hc/en-us/articles/115001203991-Email-notifications-with-Mailgun">
+          Email notifications with Mailgun
+        </a>
+      </ActionButton>
+
+      {emailActive === 'enabled' && (
+        <>
+          <H4>Mailgun credentials</H4>
+          <FormRenderer
+            value={accounts.mailgun}
+            save={saveAccount}
+            elements={mailgunSchema.elements}
+            validationSchema={mailgunSchema.getValidationSchema(accounts.mailgun)}
+            buttonLabel={'Save'}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+export default Mailgun