diff --git a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js index 20dba5c2..66045266 100644 --- a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js +++ b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js @@ -84,28 +84,30 @@ const BooleanPropertiesTable = memo( {element.display} - {editing && ( - - handleRadioButtons( - element.name, - event.target.value === 'true' - ) - } - className={classnames( - classes.radioButtons, - classes.rightTableCell - )} - /> - )} - {!editing && ( - - )} + + {editing && ( + + handleRadioButtons( + element.name, + event.target.value === 'true' + ) + } + className={classnames( + classes.radioButtons, + classes.rightTableCell + )} + /> + )} + {!editing && ( + + )} + ))} diff --git a/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js b/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js index ed6d88f4..91ebb25b 100644 --- a/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js +++ b/new-lamassu-admin/src/components/editableProperty/EditableProperty.styles.js @@ -1,3 +1,5 @@ +const optionsRowHeigth = 43 + const editablePropertyStyles = { transparentButton: { '& > *': { @@ -13,7 +15,8 @@ const editablePropertyStyles = { display: 'flex', alignItems: 'center', position: 'relative', - flex: 'wrap' + flex: 'wrap', + height: optionsRowHeigth }, rightAligned: { display: 'flex', @@ -22,7 +25,8 @@ const editablePropertyStyles = { }, radioButtons: { display: 'flex', - flexDirection: 'row' + flexDirection: 'row', + height: optionsRowHeigth }, leftSpace: { marginLeft: '20px' diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js index 386ab8ab..54b1ecb0 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js @@ -1,35 +1,28 @@ -// import { makeStyles } from '@material-ui/core/styles' import { useQuery, useMutation } from '@apollo/react-hooks' +import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState, memo } from 'react' import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable' -import { EditableProperty } from 'src/components/editableProperty' +import { Switch } from 'src/components/inputs' +import { H4, P, Label2 } from 'src/components/typography' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -// 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' +import { mainStyles } from './ReceiptPrinting.styles' -// const useStyles = makeStyles(mainStyles) +const useStyles = makeStyles(mainStyles) const initialValues = { active: 'off', - // logo: false, operatorWebsite: false, operatorEmail: false, operatorPhone: false, - companyRegistration: false, + companyNumber: false, machineLocation: false, customerNameOrPhoneNumber: false, - // commission: false, exchangeRate: false, addressQRCode: false - // customText: false, - // customTextContent: '' } const GET_CONFIG = gql` @@ -44,34 +37,12 @@ const SAVE_CONFIG = gql` } ` -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() + const classes = useStyles() - const [saveConfig] = useMutation(SAVE_CONFIG, { - onCompleted: configResponse => { - return setReceiptPrintingConfig( - fromNamespace(namespaces.RECEIPT, configResponse.saveConfig) - ) - } - }) - useQuery(GET_CONFIG, { + const { refetch: getReceiptPrintingConfig } = useQuery(GET_CONFIG, { onCompleted: configResponse => { const response = fromNamespace(namespaces.RECEIPT, configResponse.config) const values = R.merge(initialValues, response) @@ -79,6 +50,16 @@ const ReceiptPrinting = memo(() => { } }) + const [saveConfig] = useMutation(SAVE_CONFIG, { + onCompleted: configResponse => { + setReceiptPrintingConfig( + fromNamespace(namespaces.RECEIPT, configResponse.saveConfig) + ) + + getReceiptPrintingConfig() + } + }) + const save = it => saveConfig({ variables: { config: toNamespace(namespaces.RECEIPT, it) } @@ -88,47 +69,34 @@ const ReceiptPrinting = memo(() => { return ( <> - - saveConfig({ - variables: { - config: toNamespace( - namespaces.RECEIPT, - R.merge(receiptPrintingConfig, { active: it }) - ) +
+

Receipt options

+
+
+

Share information?

+
+ + saveConfig({ + variables: { + config: toNamespace( + namespaces.RECEIPT, + R.merge(receiptPrintingConfig, { + active: event.target.checked + }) + ) + } + }) } - }) - } - /> + /> +
+ {receiptPrintingConfig.active ? 'Yes' : 'No'} +
- // {'Logo'} - // { - // // TODO: make the replace logo feature - // }}> - // Replace logo - // - // - // ), - // value: receiptPrintingConfig.logo - // }, { name: 'operatorWebsite', display: 'Operator website', @@ -145,9 +113,9 @@ const ReceiptPrinting = memo(() => { value: receiptPrintingConfig.operatorPhone }, { - name: 'companyRegistration', - display: 'Company registration', - value: receiptPrintingConfig.companyRegistration + name: 'companyNumber', + display: 'Company number', + value: receiptPrintingConfig.companyNumber }, { name: 'machineLocation', @@ -159,11 +127,6 @@ const ReceiptPrinting = memo(() => { display: 'Customer name or phone number (if known)', value: receiptPrintingConfig.customerNameOrPhoneNumber }, - // { - // name: 'commission', - // display: 'Commission', - // value: receiptPrintingConfig.commission - // }, { name: 'exchangeRate', display: 'Exchange rate', @@ -174,23 +137,9 @@ const ReceiptPrinting = memo(() => { 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 */} ) }) diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js index a14b759c..3a8e05d6 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.styles.js @@ -1,10 +1,13 @@ const mainStyles = { - textInput: { - margin: [[28, 20]], - width: 304 + rowWrapper: { + display: 'flex', + alignItems: 'center', + position: 'relative', + flex: 'wrap' }, - actionButton: { - margin: [[0, 24]] + switchWrapper: { + display: 'flex', + marginLeft: 120 } } diff --git a/test/fixtures/new-settings.json b/test/fixtures/new-settings.json index 2376ff9a..b73d0442 100644 --- a/test/fixtures/new-settings.json +++ b/test/fixtures/new-settings.json @@ -35,7 +35,7 @@ "operatorWebsite": true, "operatorEmail": false, "operatorPhone": false, - "companyRegistration": false, + "companyNumber": false, "machineLocation": true, "customerNameOrPhoneNumber": true, "exchangeRate": false, @@ -120,7 +120,7 @@ "receipt_operatorWebsite": false, "receipt_operatorEmail": false, "receipt_operatorPhone": false, - "receipt_companyRegistration": true, + "receipt_companyNumber": true, "receipt_machineLocation": false, "receipt_customerNameOrPhoneNumber": true, "receipt_exchangeRate": false,