fix: added missing lodash dependency to accounts lib
fix: made the properties table editable even when the receipt printing is off fix: change company registration to company number on the receipt printing page fix: refetch config after saving fix: set fixed height for the editable property row fix: remove debug log fix: placed the options of the BooleanPropertiesTable in a TableCell to avoid raising an error caused by having an <svg> inside a <td> fix: change the receipt options to a switch fix: copied style instead of importing from other component
This commit is contained in:
Liordino Neto
Josh Harvey
parent
fbb72e9562
commit
78f3cfd5c1
5 changed files with 84 additions and 126 deletions
|
|
@ -84,6 +84,7 @@ const BooleanPropertiesTable = memo(
|
|||
<TableCell className={classes.leftTableCell}>
|
||||
{element.display}
|
||||
</TableCell>
|
||||
<TableCell className={classes.rightTableCell}>
|
||||
{editing && (
|
||||
<RadioGroup
|
||||
options={radioButtonOptions}
|
||||
|
|
@ -106,6 +107,7 @@ const BooleanPropertiesTable = memo(
|
|||
value={element.value}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<EditableProperty
|
||||
title={'Receipt options'}
|
||||
prefixText={'Receipt printing'}
|
||||
disabled={false}
|
||||
options={receiptPrintingOptions}
|
||||
code={receiptPrintingConfig.active}
|
||||
save={it =>
|
||||
<div className={classes.rowWrapper}>
|
||||
<H4>Receipt options</H4>
|
||||
</div>
|
||||
<div className={classes.rowWrapper}>
|
||||
<P>Share information?</P>
|
||||
<div className={classes.switchWrapper}>
|
||||
<Switch
|
||||
checked={receiptPrintingConfig.active}
|
||||
onChange={event =>
|
||||
saveConfig({
|
||||
variables: {
|
||||
config: toNamespace(
|
||||
namespaces.RECEIPT,
|
||||
R.merge(receiptPrintingConfig, { active: it })
|
||||
R.merge(receiptPrintingConfig, {
|
||||
active: event.target.checked
|
||||
})
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Label2>{receiptPrintingConfig.active ? 'Yes' : 'No'}</Label2>
|
||||
</div>
|
||||
<BooleanPropertiesTable
|
||||
title={'Visible on the receipt (optionals)'}
|
||||
disabled={receiptPrintingConfig.active === 'off'}
|
||||
data={receiptPrintingConfig}
|
||||
elements={[
|
||||
// {
|
||||
// name: 'logo',
|
||||
// display: (
|
||||
// <>
|
||||
// {'Logo'}
|
||||
// <ActionButton
|
||||
// className={classes.actionButton}
|
||||
// Icon={UploadIcon}
|
||||
// InverseIcon={UploadIconInverse}
|
||||
// color={'primary'}
|
||||
// onClick={() => {
|
||||
// // TODO: make the replace logo feature
|
||||
// }}>
|
||||
// Replace logo
|
||||
// </ActionButton>
|
||||
// </>
|
||||
// ),
|
||||
// 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 */}
|
||||
{/* <TextInput
|
||||
className={classes.textInput}
|
||||
label={'Custom text content'}
|
||||
multiline
|
||||
rows="4"
|
||||
defaultValue={receiptPrintingConfig.customTextContent}
|
||||
/> */}
|
||||
{/* TODO: add receipt preview on the right side of the page */}
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
4
test/fixtures/new-settings.json
vendored
4
test/fixtures/new-settings.json
vendored
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue