feat: added an alert to confirm fiat currency changes on locales

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

@@ -1,13 +1,18 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
-import React from 'react'
+import React, { useState } from 'react'
 
+import Modal from 'src/components/Modal'
+import { Link } from 'src/components/buttons'
 import { Table as EditableTable } from 'src/components/editableTable'
 import Section from 'src/components/layout/Section'
 import TitleSection from 'src/components/layout/TitleSection'
+import { P } from 'src/components/typography'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
+import { styles } from './Locales.styles'
 import {
   mainFields,
   overrides,
@@ -17,6 +22,8 @@ import {
   overridesDefaults
 } from './helper'
 
+const useStyles = makeStyles(styles)
+
 const GET_DATA = gql`
   query getData {
     config
@@ -49,20 +56,62 @@ const SAVE_CONFIG = gql`
   }
 `
 
+const FiatCurrencyChangeAlert = ({ open, close, save }) => {
+  const classes = useStyles()
+
+  return (
+    <Modal
+      title={'Change fiat currency?'}
+      handleClose={close}
+      width={450}
+      height={310}
+      open={open}>
+      <P>
+        Please note that all values you set that were based on your prior fiat
+        currency are still the same. If you need to adjust these to reflect the
+        new fiat currency (such as minimum transaction amounts, fixed fees, and
+        compliance triggers, for example), please do so now.
+      </P>
+      <P>
+        Also, if you have cash-out enabled, you must define new dispenser bill
+        counts for the new currency for cash-out on the new currency to work.
+      </P>
+      <div className={classes.rightAligned}>
+        <Link onClick={close} color="secondary">
+          Cancel
+        </Link>
+        <Link className={classes.rightLink} onClick={save} color="primary">
+          Save
+        </Link>
+      </div>
+    </Modal>
+  )
+}
+
 const Locales = ({ name: SCREEN_KEY }) => {
   const { data } = useQuery(GET_DATA)
   const [saveConfig] = useMutation(SAVE_CONFIG, {
     refetchQueries: () => ['getData']
   })
 
+  const [dataToSave, setDataToSave] = useState(null)
+
   const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)
 
   const locale = config && !R.isEmpty(config) ? config : localeDefaults
   const localeOverrides = locale.overrides ?? []
 
-  const save = it => {
-    const config = toNamespace(SCREEN_KEY)(it.locale[0])
-    return saveConfig({ variables: { config } })
+  const handleSave = it => {
+    const newConfig = toNamespace(SCREEN_KEY)(it.locale[0])
+
+    if (newConfig.locale_fiatCurrency !== config.fiatCurrency)
+      setDataToSave(newConfig)
+    else save(newConfig)
+  }
+
+  const save = config => {
+    setDataToSave(null)
+    saveConfig({ variables: { config } })
   }
 
   const saveOverrides = it => {
@@ -72,6 +121,11 @@ const Locales = ({ name: SCREEN_KEY }) => {
 
   return (
     <>
+      <FiatCurrencyChangeAlert
+        open={dataToSave}
+        close={() => setDataToSave(null)}
+        save={() => dataToSave && save(dataToSave)}
+      />
       <TitleSection title="Locales" />
       <Section>
         <EditableTable
@@ -80,7 +134,7 @@ const Locales = ({ name: SCREEN_KEY }) => {
           name="locale"
           enableEdit
           initialValues={locale}
-          save={save}
+          save={handleSave}
           validationSchema={LocaleSchema}
           data={R.of(locale)}
           elements={mainFields(data)}

new-lamassu-admin/src/pages/Locales/Locales.styles.js

@@ -0,0 +1,12 @@
+const styles = {
+  rightAligned: {
+    marginTop: '20px',
+    marginLeft: 'auto',
+    marginBottom: '20px'
+  },
+  rightLink: {
+    marginLeft: '20px'
+  }
+}
+
+export { styles }