diff --git a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js
index 296648c4..20dba5c2 100644
--- a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js
+++ b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js
@@ -1,4 +1,5 @@
import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
import React, { useState, memo } from 'react'
import { Link } from 'src/components/buttons'
@@ -30,6 +31,7 @@ const BooleanPropertiesTable = memo(
}
const innerCancel = () => {
+ setRadioGroupValues(elements)
setEditing(false)
}
@@ -79,23 +81,31 @@ const BooleanPropertiesTable = memo(
{radioGroupValues &&
radioGroupValues.map((element, idx) => (
-
+
{element.display}
- {editing && (
-
- handleRadioButtons(
- element.name,
- event.target.value === 'true'
- )
- }
- className={classes.radioButtons}
- />
- )}
- {!editing && }
+ {editing && (
+
+ handleRadioButtons(
+ element.name,
+ event.target.value === 'true'
+ )
+ }
+ className={classnames(
+ classes.radioButtons,
+ classes.rightTableCell
+ )}
+ />
+ )}
+ {!editing && (
+
+ )}
))}
diff --git a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.styles.js b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.styles.js
index 6ce6f04e..f6a5c1b9 100644
--- a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.styles.js
+++ b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.styles.js
@@ -1,5 +1,5 @@
import baseStyles from 'src/pages/Logs.styles'
-import { tableCellColor, zircon } from 'src/styling/variables'
+import { backgroundColor, zircon } from 'src/styling/variables'
const { fillColumn } = baseStyles
@@ -14,20 +14,28 @@ const booleanPropertiesTableStyles = {
alignItems: 'center',
justifyContent: 'space-between',
'&:nth-child(even)': {
- backgroundColor: tableCellColor
+ backgroundColor: backgroundColor
},
'&:nth-child(odd)': {
backgroundColor: zircon
},
+ minHeight: 32,
+ height: 'auto',
+ padding: [[8, 16, 8, 24]],
boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)'
},
- tableCell: {
+ leftTableCell: {
display: 'flex',
alignItems: 'center',
- justifyContent: 'space-between',
- width: '100%',
- height: 32,
- padding: [[5, 14, 5, 20]]
+ justifyContent: 'left',
+ width: 200,
+ padding: [0]
+ },
+ rightTableCell: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'right',
+ padding: [0]
},
transparentButton: {
'& > *': {
@@ -51,7 +59,7 @@ const booleanPropertiesTableStyles = {
radioButtons: {
display: 'flex',
flexDirection: 'row',
- marginRight: -15
+ margin: [-15]
},
rightLink: {
marginLeft: '20px'
diff --git a/new-lamassu-admin/src/components/editableProperty/EditableProperty.js b/new-lamassu-admin/src/components/editableProperty/EditableProperty.js
new file mode 100644
index 00000000..d3d822ab
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableProperty/EditableProperty.js
@@ -0,0 +1,74 @@
+import { makeStyles } from '@material-ui/core/styles'
+import React, { useState, memo } from 'react'
+
+import { Link } from 'src/components/buttons'
+import { RadioGroup } from 'src/components/inputs'
+import { H4, P } from 'src/components/typography'
+import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
+import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
+
+import { editablePropertyStyles } from './EditableProperty.styles'
+
+const useStyles = makeStyles(editablePropertyStyles)
+
+const EditableProperty = memo(
+ ({ title, prefixText, disabled, options, code, save }) => {
+ const [editing, setEditing] = useState(false)
+ const [currentCode, setCurrentCode] = useState(code)
+
+ const classes = useStyles()
+
+ const innerSave = () => {
+ save(currentCode)
+ setEditing(false)
+ }
+
+ const innerCancel = () => setEditing(false)
+
+ return (
+ <>
+
+
{title}
+ {editing ? (
+
+
+ Cancel
+
+
+ Save
+
+
+ ) : (
+
+
+
+ )}
+
+ {editing ? (
+ setCurrentCode(event.target.value)}
+ className={classes.radioButtons}
+ />
+ ) : (
+
+ {`${prefixText} ${options
+ .find(it => it.code === currentCode)
+ .display.toLowerCase()}`}
+
+ )}
+ >
+ )
+ }
+)
+
+export default EditableProperty
diff --git a/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js b/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js
new file mode 100644
index 00000000..ed6d88f4
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js
@@ -0,0 +1,32 @@
+const editablePropertyStyles = {
+ transparentButton: {
+ '& > *': {
+ margin: 'auto 12px'
+ },
+ '& button': {
+ border: 'none',
+ backgroundColor: 'transparent',
+ cursor: 'pointer'
+ }
+ },
+ rowWrapper: {
+ display: 'flex',
+ alignItems: 'center',
+ position: 'relative',
+ flex: 'wrap'
+ },
+ rightAligned: {
+ display: 'flex',
+ position: 'absolute',
+ right: 0
+ },
+ radioButtons: {
+ display: 'flex',
+ flexDirection: 'row'
+ },
+ leftSpace: {
+ marginLeft: '20px'
+ }
+}
+
+export { editablePropertyStyles }
diff --git a/new-lamassu-admin/src/components/editableProperty/index.js b/new-lamassu-admin/src/components/editableProperty/index.js
new file mode 100644
index 00000000..00091dd2
--- /dev/null
+++ b/new-lamassu-admin/src/components/editableProperty/index.js
@@ -0,0 +1,3 @@
+import EditableProperty from './EditableProperty'
+
+export { EditableProperty }
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js
index dcdfa80c..e38be6c7 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 ReceiptPrinting from './ReceiptPrinting'
import TermsConditions from './TermsConditions'
const localStyles = {
@@ -52,6 +53,7 @@ const OperatorInfo = () => {
/>
{isSelected(CONTACT_INFORMATION) && }
+ {isSelected(RECEIPT) && }
{isSelected(TERMS_CONDITIONS) && }
{isSelected(COIN_ATM_RADAR) && }
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js
new file mode 100644
index 00000000..dc5e8565
--- /dev/null
+++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js
@@ -0,0 +1,187 @@
+// import { makeStyles } from '@material-ui/core/styles'
+import { useQuery, useMutation } from '@apollo/react-hooks'
+import { gql } from 'apollo-boost'
+import React, { useState, memo } from 'react'
+
+import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'
+import { EditableProperty } from 'src/components/editableProperty'
+// import { ActionButton } from 'src/components/buttons'
+// import { ReactComponent as UploadIcon } from 'src/styling/icons/button/upload/zodiac.svg'
+// import { ReactComponent as UploadIconInverse } from 'src/styling/icons/button/upload/white.svg'
+// import { TextInput } from 'src/components/inputs'
+
+// import { mainStyles } from './ReceiptPrinting.styles'
+
+// const useStyles = makeStyles(mainStyles)
+
+const initialValues = {
+ active: 'off',
+ // logo: false,
+ operatorWebsite: false,
+ operatorEmail: false,
+ operatorPhone: false,
+ companyRegistration: false,
+ machineLocation: false,
+ customerNameOrPhoneNumber: false,
+ // commission: false,
+ exchangeRate: false,
+ addressQRCode: false
+ // customText: false,
+ // customTextContent: ''
+}
+
+const GET_CONFIG = gql`
+ {
+ config
+ }
+`
+
+const SAVE_CONFIG = gql`
+ mutation Save($config: JSONObject) {
+ saveConfig(config: $config)
+ }
+`
+
+const receiptPrintingOptions = [
+ {
+ code: 'off',
+ display: 'Off'
+ },
+ {
+ code: 'optional',
+ display: 'Optional (ask user)'
+ },
+ {
+ code: 'on',
+ display: 'On'
+ }
+]
+
+const ReceiptPrinting = memo(() => {
+ const [receiptPrintingConfig, setReceiptPrintingConfig] = useState(null)
+
+ // const classes = useStyles()
+
+ // TODO: treat errors on useMutation and useQuery
+ const [saveConfig] = useMutation(SAVE_CONFIG, {
+ onCompleted: configResponse =>
+ setReceiptPrintingConfig(configResponse.saveConfig.receiptPrinting)
+ })
+ useQuery(GET_CONFIG, {
+ onCompleted: configResponse => {
+ setReceiptPrintingConfig(
+ configResponse?.config?.receiptPrinting ?? initialValues
+ )
+ }
+ })
+
+ const save = it =>
+ saveConfig({ variables: { config: { receiptPrinting: it } } })
+
+ if (!receiptPrintingConfig) return null
+
+ return (
+ <>
+
+ saveConfig({
+ variables: { config: { receiptPrinting: { active: it } } }
+ })
+ }
+ />
+
+ // {'Logo'}
+ // {
+ // // TODO: make the replace logo feature
+ // }}>
+ // Replace logo
+ //
+ // >
+ // ),
+ // value: receiptPrintingConfig.logo
+ // },
+ {
+ name: 'operatorWebsite',
+ display: 'Operator website',
+ value: receiptPrintingConfig.operatorWebsite
+ },
+ {
+ name: 'operatorEmail',
+ display: 'Operator email',
+ value: receiptPrintingConfig.operatorEmail
+ },
+ {
+ name: 'operatorPhone',
+ display: 'Operator phone',
+ value: receiptPrintingConfig.operatorPhone
+ },
+ {
+ name: 'companyRegistration',
+ display: 'Company registration',
+ value: receiptPrintingConfig.companyRegistration
+ },
+ {
+ name: 'machineLocation',
+ display: 'Machine location',
+ value: receiptPrintingConfig.machineLocation
+ },
+ {
+ name: 'customerNameOrPhoneNumber',
+ display: 'Customer name or phone number (if known)',
+ value: receiptPrintingConfig.customerNameOrPhoneNumber
+ },
+ // {
+ // name: 'commission',
+ // display: 'Commission',
+ // value: receiptPrintingConfig.commission
+ // },
+ {
+ name: 'exchangeRate',
+ display: 'Exchange rate',
+ value: receiptPrintingConfig.exchangeRate
+ },
+ {
+ name: 'addressQRCode',
+ display: 'Address QR code',
+ value: receiptPrintingConfig.addressQRCode
+ }
+ // {
+ // name: 'customText',
+ // display: 'Custom text',
+ // value: receiptPrintingConfig.customText
+ // }
+ ]}
+ save={save}
+ />
+ {/* TODO: textInput should appear only when table is in edit mode, and have it's value saved along with the table values */}
+ {/* */}
+ {/* TODO: add receipt preview on the right side of the page */}
+ >
+ )
+})
+
+export default ReceiptPrinting
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js
new file mode 100644
index 00000000..a14b759c
--- /dev/null
+++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js
@@ -0,0 +1,11 @@
+const mainStyles = {
+ textInput: {
+ margin: [[28, 20]],
+ width: 304
+ },
+ actionButton: {
+ margin: [[0, 24]]
+ }
+}
+
+export { mainStyles }
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/index.js b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/index.js
new file mode 100644
index 00000000..44876242
--- /dev/null
+++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/index.js
@@ -0,0 +1,3 @@
+import ReceiptPrinting from './ReceiptPrinting'
+
+export default ReceiptPrinting