feat: add terms and conditions page

feat: add modal preview

feat: remove preview

fix: increase space between switch and fields

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

@@ -9,6 +9,7 @@ import logsStyles from '../Logs.styles'
 
 import CoinAtmRadar from './CoinATMRadar'
 import ContactInfo from './ContactInfo'
+import TermsConditions from './TermsConditions'
 
 const localStyles = {
   contentWrapper: {
@@ -50,6 +51,7 @@ const OperatorInfo = () => {
         />
         <div className={classes.contentWrapper}>
           {isSelected(CONTACT_INFORMATION) && <ContactInfo />}
+          {isSelected(TERMS_CONDITIONS) && <TermsConditions />}
           {isSelected(COIN_ATM_RADAR) && <CoinAtmRadar />}
         </div>
       </div>

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

@@ -1,4 +1,8 @@
 import { offColor } from 'src/styling/variables'
+import typographyStyles from 'src/components/typography/styles'
+import theme from 'src/styling/theme'
+
+const { p } = typographyStyles
 
 const styles = {
   header: {
@@ -17,10 +21,7 @@ const styles = {
   },
   section: {
     marginBottom: 52
-  }
+  },
-}
-
-const contactInfoStyles = {
   row: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -30,6 +31,21 @@ const contactInfoStyles = {
       marginBottom: 0
     }
   },
+  submit: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    padding: [[0, 4, 4, 4]],
+    '& > button': {
+      marginRight: 40
+    }
+  },
+  singleButton: {
+    marginTop: 50,
+    paddingLeft: 0
+  }
+}
+
+const contactInfoStyles = {
   infoMessage: {
     display: 'flex',
     marginBottom: 52,
@@ -48,15 +64,22 @@ const contactInfoStyles = {
     display: 'flex',
     flexDirection: 'row',
     paddingLeft: 4
+  }
+}
+
+const termsConditionsStyles = {
+  enable: {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: 22 - theme.spacing(1),
+    '& > span:first-child': {
+      extend: p,
+      marginRight: 116 - theme.spacing(1)
     },
-  submit: {
+    '& > span:last-child': {
-    justifyContent: 'flex-start',
+      marginLeft: 4
-    padding: [[0, 4, 4, 4]],
-    height: 20,
-    '& > button': {
-      marginRight: 40
     }
   }
 }
 
-export { styles, contactInfoStyles }
+export { styles, contactInfoStyles, termsConditionsStyles }

new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js

@@ -0,0 +1,170 @@
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import * as R from 'ramda'
+import * as Yup from 'yup'
+import { Form, Formik, Field } from 'formik'
+import { gql } from 'apollo-boost'
+import { makeStyles } from '@material-ui/core'
+import { useQuery, useMutation } from '@apollo/react-hooks'
+
+import { Info2, Label2 } from 'src/components/typography'
+import { Switch } from 'src/components/inputs'
+import TextInputFormik from 'src/components/inputs/formik/TextInput'
+import { Button } from 'src/components/buttons'
+import ErrorMessage from 'src/components/ErrorMessage'
+
+import {
+  styles as globalStyles,
+  termsConditionsStyles
+} from './OperatorInfo.styles'
+
+const GET_CONFIG = gql`
+  {
+    config
+  }
+`
+
+const SAVE_CONFIG = gql`
+  mutation Save($config: JSONObject) {
+    saveConfig(config: $config)
+  }
+`
+
+const styles = R.merge(globalStyles, termsConditionsStyles)
+
+const useStyles = makeStyles(styles)
+
+const TermsConditions = () => {
+  const [showOnScreen, setShowOnScreen] = useState(false)
+  const [formData, setFormData] = useState(null)
+  const [error, setError] = useState(null)
+  const [saveConfig] = useMutation(SAVE_CONFIG, {
+    onCompleted: data => {
+      const { termsAndConditions } = data.saveConfig
+      setFormData(termsAndConditions)
+      setShowOnScreen(termsAndConditions.show)
+      setError(null)
+    },
+    onError: e => setError(e)
+  })
+
+  const classes = useStyles()
+
+  useQuery(GET_CONFIG, {
+    onCompleted: data => {
+      const { termsAndConditions } = data.config
+      setFormData(termsAndConditions ?? {})
+      setShowOnScreen(termsAndConditions?.show ?? false)
+    }
+  })
+
+  const save = it => {
+    setError(null)
+    return saveConfig({
+      variables: { config: { termsAndConditions: it } }
+    })
+  }
+
+  const handleEnable = () => {
+    const s = !showOnScreen
+    save({ show: s })
+  }
+
+  if (!formData) return null
+
+  const fields = [
+    {
+      name: 'screenTitle',
+      label: 'Screen title',
+      value: formData.screenTitle ?? ''
+    },
+    {
+      name: 'textContent',
+      label: 'Text content',
+      value: formData.textContent ?? '',
+      multiline: true
+    },
+    {
+      name: 'acceptButtonText',
+      label: 'Accept button text',
+      value: formData.acceptButtonText ?? '',
+      placeholder: 'I accept'
+    },
+    {
+      name: 'cancelButtonText',
+      label: 'Cancel button text',
+      value: formData.cancelButtonText ?? '',
+      placeholder: 'Cancel'
+    }
+  ]
+
+  const findField = name => R.find(R.propEq('name', name))(fields)
+  const findValue = name => findField(name).value
+
+  const initialValues = {
+    screenTitle: findValue('screenTitle'),
+    textContent: findValue('textContent'),
+    acceptButtonText: findValue('acceptButtonText'),
+    cancelButtonText: findValue('cancelButtonText')
+  }
+
+  const validationSchema = Yup.object().shape({
+    screenTitle: Yup.string().max(50, 'Too long'),
+    acceptButtonText: Yup.string().max(15, 'Too long'),
+    cancelButtonText: Yup.string().max(15, 'Too long')
+  })
+
+  return (
+    <>
+      <div className={classes.header}>
+        <Info2>Terms &amp; Conditions</Info2>
+      </div>
+      <div className={classes.section}>
+        <div className={classes.enable}>
+          <span>Show on screen</span>
+          <Switch checked={showOnScreen} onChange={handleEnable} value="show" />
+          <Label2>{showOnScreen ? 'Yes' : 'No'}</Label2>
+        </div>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={values => {
+            save(values)
+          }}>
+          <Form>
+            {fields.map((f, idx) => (
+              <div className={classes.row} key={idx}>
+                <Field
+                  id={f.name}
+                  name={f.name}
+                  component={TextInputFormik}
+                  placeholder={f.placeholder}
+                  type="text"
+                  label={f.label}
+                  multiline={f.multiline}
+                  rowsMax="6"
+                  onFocus={() => setError(null)}
+                />
+              </div>
+            ))}
+            <div
+              className={classnames(
+                classes.row,
+                classes.submit,
+                classes.singleButton
+              )}>
+              <Button type="submit">Submit</Button>
+              {error && (
+                <ErrorMessage className={classes.errorMessage}>
+                  Failed to save changes
+                </ErrorMessage>
+              )}
+            </div>
+          </Form>
+        </Formik>
+      </div>
+    </>
+  )
+}
+
+export default TermsConditions