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