fix: make all fields required on the Terms & Conditions page if Show on

screen is enabled

fix: enable/disable the Terms & Conditions form based on the Show on
screen toggle

fix: replaced deactivated field with plain text when not editing

fix: make de non editable text content field scrollable

style: make it follow the same style as the other screens, with the edit
button and links to save and cancel

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

@@ -95,4 +95,51 @@ const termsConditionsStyles = {
   }
 }
 
-export { styles, contactInfoStyles, termsConditionsStyles }
+const fieldStyles = {
+  field: {
+    position: 'relative',
+    width: 280,
+    padding: [[0, 4, 4, 0]]
+  },
+  notEditing: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  notEditingSingleLine: {
+    '& > p:first-child': {
+      height: 16,
+      lineHeight: '16px',
+      transform: 'scale(0.75)',
+      transformOrigin: 'left',
+      paddingLeft: 0,
+      margin: [[1, 0, 6, 0]]
+    },
+    '& > p:last-child': {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      height: 25,
+      margin: 0
+    }
+  },
+  notEditingMultiline: {
+    '& > p:first-child': {
+      height: 16,
+      lineHeight: '16px',
+      transform: 'scale(0.75)',
+      transformOrigin: 'left',
+      paddingLeft: 0,
+      margin: [[1, 0, 5, 0]]
+    },
+    '& > p:last-child': {
+      width: 502,
+      height: 121,
+      overflowY: 'auto',
+      lineHeight: '19px',
+      wordWrap: 'anywhere',
+      margin: 0
+    }
+  }
+}
+
+export { styles, contactInfoStyles, termsConditionsStyles, fieldStyles }

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

@@ -1,24 +1,77 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
-import { Form, Formik, Field } from 'formik'
+import { Form, Formik, Field as FormikField } from 'formik'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
-import { Button } from 'src/components/buttons'
+import { Link } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import { TextInput } from 'src/components/inputs/formik'
-import { Info2, Label2 } from 'src/components/typography'
+import { Info2, Info3, Label2, Label3 } from 'src/components/typography'
+import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
 import {
   styles as globalStyles,
-  termsConditionsStyles
+  termsConditionsStyles,
+  fieldStyles
 } from './OperatorInfo.styles'
 
+const useFieldStyles = makeStyles(fieldStyles)
+
+const Field = ({
+  editing,
+  name,
+  width,
+  placeholder,
+  label,
+  value,
+  multiline = false,
+  rows,
+  onFocus,
+  ...props
+}) => {
+  const classes = useFieldStyles()
+
+  const classNames = {
+    [classes.field]: true,
+    [classes.notEditing]: !editing,
+    [classes.notEditingSingleLine]: !editing && !multiline,
+    [classes.notEditingMultiline]: !editing && multiline
+  }
+
+  return (
+    <div className={classnames(classNames)}>
+      {!editing && (
+        <>
+          <Label3>{label}</Label3>
+          <Info3 className={classes.multiLineText}>{value}</Info3>
+        </>
+      )}
+      {editing && (
+        <FormikField
+          id={name}
+          name={name}
+          component={TextInput}
+          width={width}
+          placeholder={placeholder}
+          type="text"
+          label={label}
+          multiline={multiline}
+          rows={rows}
+          rowsMax="6"
+          onFocus={onFocus}
+          {...props}
+        />
+      )}
+    </div>
+  )
+}
+
 const GET_CONFIG = gql`
   {
     config
@@ -33,12 +86,13 @@ const SAVE_CONFIG = gql`
 
 const styles = R.merge(globalStyles, termsConditionsStyles)
 
-const useStyles = makeStyles(styles)
+const useTermsConditionsStyles = makeStyles(styles)
 
 const TermsConditions = () => {
   const [showOnScreen, setShowOnScreen] = useState(false)
   const [formData, setFormData] = useState(null)
   const [error, setError] = useState(null)
+  const [editing, setEditing] = useState(false)
   const [saveConfig] = useMutation(SAVE_CONFIG, {
     onCompleted: data => {
       const termsAndConditions = fromNamespace(
@@ -48,11 +102,12 @@ const TermsConditions = () => {
       setFormData(termsAndConditions)
       setShowOnScreen(termsAndConditions.active)
       setError(null)
+      setEditing(false)
     },
     onError: e => setError(e)
   })
 
-  const classes = useStyles()
+  const classes = useTermsConditionsStyles()
 
   useQuery(GET_CONFIG, {
     onCompleted: data => {
@@ -121,9 +176,16 @@ const TermsConditions = () => {
   }
 
   const validationSchema = Yup.object().shape({
-    title: Yup.string().max(50, 'Too long'),
-    acceptButtonText: Yup.string().max(15, 'Too long'),
-    cancelButtonText: Yup.string().max(15, 'Too long')
+    title: Yup.string()
+      .required()
+      .max(50, 'Too long'),
+    text: Yup.string().required(),
+    acceptButtonText: Yup.string()
+      .required()
+      .max(15, 'Too long'),
+    cancelButtonText: Yup.string()
+      .required()
+      .max(15, 'Too long')
   })
 
   return (
@@ -137,42 +199,56 @@ const TermsConditions = () => {
           <Switch checked={showOnScreen} onChange={handleEnable} value="show" />
           <Label2>{showOnScreen ? 'Yes' : 'No'}</Label2>
         </div>
+        <div className={classes.header}>
+          <Info2>Info card</Info2>
+          {!editing && (
+            <div className={classes.transparentButton}>
+              <button onClick={() => setEditing(true)}>
+                <EditIcon />
+              </button>
+            </div>
+          )}
+        </div>
         <Formik
           initialValues={initialValues}
           validationSchema={validationSchema}
-          onSubmit={values => {
-            save(values)
+          onSubmit={values => save(values)}
+          onReset={() => {
+            setEditing(false)
+            setError(null)
           }}>
           <Form>
             {fields.map((f, idx) => (
               <div className={classes.row} key={idx}>
                 <Field
-                  id={f.name}
+                  editing={editing}
                   name={f.name}
-                  component={TextInput}
                   width={f.width}
                   placeholder={f.placeholder}
-                  type="text"
                   label={f.label}
+                  value={f.value}
                   multiline={f.multiline}
                   rows={f.rows}
-                  rowsMax="6"
                   onFocus={() => setError(null)}
                 />
               </div>
             ))}
-            <div
-              className={classnames(
-                classes.row,
-                classes.submit,
-                classes.singleButton
-              )}>
-              <Button type="submit">Submit</Button>
+            <div className={classnames(classes.row, classes.submit)}>
+              {editing && (
+                <>
+                  <Link color="primary" type="submit">
+                    Save
+                  </Link>
+                  <Link color="secondary" type="reset">
+                    Cancel
+                  </Link>
                   {error && (
                     <ErrorMessage className={classes.errorMessage}>
                       Failed to save changes
                     </ErrorMessage>
                   )}
+                </>
+              )}
             </div>
           </Form>
         </Formik>