diff --git a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js
index 2e7c45b8..16574e2e 100644
--- a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js
+++ b/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 = () => {
/>
{isSelected(CONTACT_INFORMATION) && }
+ {isSelected(TERMS_CONDITIONS) && }
{isSelected(COIN_ATM_RADAR) && }
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
index ed8f6648..eb69f5eb 100644
--- a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
+++ b/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
- },
- submit: {
- justifyContent: 'flex-start',
- padding: [[0, 4, 4, 4]],
- height: 20,
- '& > button': {
- marginRight: 40
+ }
+}
+
+const termsConditionsStyles = {
+ enable: {
+ display: 'flex',
+ alignItems: 'center',
+ marginBottom: 22 - theme.spacing(1),
+ '& > span:first-child': {
+ extend: p,
+ marginRight: 116 - theme.spacing(1)
+ },
+ '& > span:last-child': {
+ marginLeft: 4
}
}
}
-export { styles, contactInfoStyles }
+export { styles, contactInfoStyles, termsConditionsStyles }
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js b/new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.js
new file mode 100644
index 00000000..a15e3724
--- /dev/null
+++ b/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 (
+ <>
+
+ Terms & Conditions
+
+
+
+ Show on screen
+
+ {showOnScreen ? 'Yes' : 'No'}
+
+
{
+ save(values)
+ }}>
+
+
+
+ >
+ )
+}
+
+export default TermsConditions