lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

partial: Loyalty, Machines CSS rework

Browse source
This commit is contained in:
Rafael Taranto 2025-05-06 14:50:11 +01:00
parent 5f81487dcc
commit b95dd5cbbf
17 changed files with 134 additions and 459 deletions
Download patch file Download diff file Expand all files Collapse all files

58
new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js
View file

@ -1,58 +0,0 @@
import { spacer, errorColor } from 'src/styling/variables'
const styles = {
identification: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
'& > *:first-child': {
marginLeft: 0
},
'& > *': {
marginLeft: 6
},
'& > *:nth-child(3)': {
marginLeft: 15
}
},
form: {
display: 'flex',
flexDirection: 'column',
height: '100%',
'& > *:first-child': {
marginTop: 10
},
'& > *': {
marginBottom: 20
}
},
customerAutocomplete: {
width: 350
},
discountRateWrapper: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
discountInput: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
footer: {
display: 'flex',
flexDirection: 'row',
margin: [['auto', 0, spacer * 3, 0]]
},
submit: {
margin: [['auto', 0, 0, 'auto']]
},
error: {
color: errorColor
},
disabled: {
cursor: 'wait'
}
}
export default styles

28
new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx
View file

@ -1,20 +1,15 @@
import { makeStyles } from '@mui/styles'
import { Form, Formik, Field } from 'formik'
import * as R from 'ramda'
import React from 'react'
import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal'
import { HelpTooltip } from 'src/components/Tooltip'
import { H3, TL1, P } from 'src/components/typography'
import { H1, H3, P } from 'src/components/typography'
import * as Yup from 'yup'
import { Button } from 'src/components/buttons'
import { NumberInput, Autocomplete } from 'src/components/inputs/formik'
import styles from './IndividualDiscount.styles'
const useStyles = makeStyles(styles)
const initialValues = {
customer: '',
discount: ''
@ -46,8 +41,6 @@ const IndividualDiscountModal = ({
addDiscount,
customers
}) => {
const classes = useStyles()
const handleAddDiscount = (customer, discount) => {
addDiscount({
variables: {
@ -77,8 +70,10 @@ const IndividualDiscountModal = ({
handleAddDiscount(customer, discount)
}}>
{({ errors, touched }) => (
<Form id="individual-discount-form" className={classes.form}>
<div className={classes.customerAutocomplete}>
<Form
id="individual-discount-form"
className="flex flex-col h-full gap-5">
<div className="mt-2 w-88">
<Field
name="customer"
label="Select a customer"
@ -97,7 +92,7 @@ const IndividualDiscountModal = ({
/>
</div>
<div>
<div className={classes.discountRateWrapper}>
<div className="flex items-center">
<H3>Define discount rate</H3>
<HelpTooltip width={304}>
<P>
@ -112,22 +107,19 @@ const IndividualDiscountModal = ({
</P>
</HelpTooltip>
</div>
<div className={classes.discountInput}>
<div className="flex items-center">
<Field
name="discount"
size="lg"
autoComplete="off"
width={50}
decimalScale={0}
className={classes.discountInputField}
component={NumberInput}
/>
<TL1 inline className={classes.inputLabel}>
%
</TL1>
<H1 className="ml-2 mt-4 font-bold inline">%</H1>
</div>
</div>
<div className={classes.footer}>
<div className="flex mt-auto mb-6">
{getErrorMsg(errors, touched, creationError) && (
<ErrorMessage>
{getErrorMsg(errors, touched, creationError)}
@ -136,7 +128,7 @@ const IndividualDiscountModal = ({
<Button
type="submit"
form="individual-discount-form"
className={classes.submit}>
className="ml-auto">
Add discount
</Button>
</div>

14
new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx
View file

@ -1,21 +1,17 @@
import { useQuery, useMutation, gql } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import { Link, Button, IconButton } from 'src/components/buttons'
import { DeleteDialog } from 'src/components/DeleteDialog'
import DataTable from 'src/components/tables/DataTable'
import { Label3, TL1 } from 'src/components/typography'
import PhoneIdIcon from 'src/styling/icons/ID/phone/zodiac.svg?react'
import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
import { Link, Button, IconButton } from 'src/components/buttons'
import styles from './IndividualDiscount.styles'
import IndividualDiscountModal from './IndividualDiscountModal'
import classnames from 'classnames'
const useStyles = makeStyles(styles)
const GET_INDIVIDUAL_DISCOUNTS = gql`
query individualDiscounts {
individualDiscounts {
@ -57,8 +53,6 @@ const GET_CUSTOMERS = gql`
`
const IndividualDiscounts = () => {
const classes = useStyles()
const [deleteDialog, setDeleteDialog] = useState(false)
const [toBeDeleted, setToBeDeleted] = useState()
@ -94,7 +88,7 @@ const IndividualDiscounts = () => {
size: 'sm',
view: t => {
return (
<div className={classes.identification}>
<div className="flex items-center gap-2">
<PhoneIdIcon />
<span>{t.customer.phone}</span>
</div>
@ -158,7 +152,7 @@ const IndividualDiscounts = () => {
<Link
color="primary"
onClick={toggleModal}
className={classnames({ [classes.disabled]: customerLoading })}
className={classnames({ 'cursor-wait': customerLoading })}
disabled={customerLoading}>
Add new code
</Link>

7
new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx
View file

@ -1,7 +0,0 @@
import React from 'react'
const LoyaltyDiscounts = () => {
return <></>
}
export default LoyaltyDiscounts

6
new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx
View file

@ -1,5 +1,4 @@
import { useQuery, useMutation, gql } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import * as R from 'ramda'
import React, { useState } from 'react'
import { DeleteDialog } from 'src/components/DeleteDialog'
@ -9,11 +8,8 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
import { Link, Button, IconButton } from 'src/components/buttons'
import styles from './PromoCodes.styles'
import PromoCodesModal from './PromoCodesModal'
const useStyles = makeStyles(styles)
const DUPLICATE_ERROR_MSG = 'There is already a promotion with that code!'
const DEFAULT_ERROR_MSG = 'Failed to save'
@ -46,8 +42,6 @@ const CREATE_CODE = gql`
`
const PromoCodes = () => {
const classes = useStyles()
const [deleteDialog, setDeleteDialog] = useState(false)
const [toBeDeleted, setToBeDeleted] = useState()

51
new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js
View file

@ -1,51 +0,0 @@
import {
spacer,
fontPrimary,
primaryColor,
errorColor
} from 'src/styling/variables'
const styles = {
footer: {
display: 'flex',
flexDirection: 'row',
margin: [['auto', 0, spacer * 3, 0]]
},
modalLabel1: {
marginTop: 20
},
modalLabel2Wrapper: {
marginTop: 40,
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start'
},
discountInput: {
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-start'
},
inputLabel: {
color: primaryColor,
fontFamily: fontPrimary,
fontSize: 24,
marginLeft: 8,
marginTop: 15
},
tableWidth: {
width: 620
},
error: {
color: errorColor
},
form: {
display: 'flex',
flexDirection: 'column',
height: '100%'
},
submit: {
margin: [['auto', 0, 0, 'auto']]
}
}
export default styles

103
new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx
View file

@ -1,33 +1,30 @@
import { makeStyles } from '@mui/styles'
import { Form, Formik, Field } from 'formik'
import * as R from 'ramda'
import React from 'react'
import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal'
import { HelpTooltip } from 'src/components/Tooltip'
import { H3, TL1, P } from 'src/components/typography'
import { H3, P, H1 } from 'src/components/typography'
import * as Yup from 'yup'
import { Button } from 'src/components/buttons'
import { TextInput, NumberInput } from 'src/components/inputs/formik'
import styles from './PromoCodes.styles'
const useStyles = makeStyles(styles)
const initialValues = {
code: '',
discount: ''
}
const validationSchema = Yup.object().shape({
code: Yup.string().required().trim().max(25).matches(/^\S*$/, 'No whitespace allowed'),
code: Yup.string()
.required()
.trim()
.max(25)
.matches(/^\S*$/, 'No whitespace allowed'),
discount: Yup.number().required().min(0).max(100)
})
const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
const classes = useStyles()
const handleAddCode = (code, discount) => {
addCode(R.toUpper(code), parseInt(discount))
}
@ -51,58 +48,52 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
handleAddCode(code, discount)
}}>
{({ errors }) => (
<Form id="promo-form" className={classes.form}>
<H3 className={classes.modalLabel1}>Promo code name</H3>
<Form id="promo-form" className="flex flex-col h-full">
<H3 className="mt-5">Promo code name</H3>
<Field
name="code"
autoFocus
size="lg"
autoComplete="off"
width={338}
inputProps={{ style: { textTransform: 'uppercase' } }}
component={TextInput}
/>
<div className={classes.modalLabel2Wrapper}>
<H3 className={classes.modalLabel2}>Define discount rate</H3>
<HelpTooltip width={304}>
<P>
This is a percentage discount off of your existing
commission rates for a customer entering this code at the
machine.
</P>
<P>
For instance, if you charge 8% commissions, and this code is
set for 50%, then you'll instead be charging 4% on
transactions using the code.
</P>
</HelpTooltip>
</div>
<div className={classes.discountInput}>
<Field
name="discount"
autoFocus
size="lg"
autoComplete="off"
width={50}
decimalScale={0}
className={classes.discountInputField}
component={NumberInput}
width={338}
inputProps={{ style: { textTransform: 'uppercase' } }}
component={TextInput}
/>
<TL1 inline className={classes.inputLabel}>
%
</TL1>
</div>
<div className={classes.footer}>
{(errorMsg || !R.isEmpty(errors)) && (
<ErrorMessage>
{errorMsg || R.head(R.values(errors))}
</ErrorMessage>
)}
<Button
type="submit"
form="promo-form"
className={classes.submit}>
Add code
</Button>
<div className="flex justify-start mt-10">
<H3>Define discount rate</H3>
<HelpTooltip width={304}>
<P>
This is a percentage discount off of your existing
commission rates for a customer entering this code at the
machine.
</P>
<P>
For instance, if you charge 8% commissions, and this code
is set for 50%, then you'll instead be charging 4% on
transactions using the code.
</P>
</HelpTooltip>
</div>
<div className="flex items-start">
<Field
name="discount"
size="lg"
autoComplete="off"
width={50}
decimalScale={0}
component={NumberInput}
/>
<H1 className="ml-2 mt-4 font-bold inline">%</H1>
</div>
<div className="flex mt-auto mb-6">
{(errorMsg || !R.isEmpty(errors)) && (
<ErrorMessage>
{errorMsg || R.head(R.values(errors))}
</ErrorMessage>
)}
<Button type="submit" form="promo-form" className="ml-auto">
Add code
</Button>
</div>
</Form>
)}

13
new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx
View file

@ -1,5 +1,4 @@
import { useMutation, gql } from "@apollo/client";
import { makeStyles } from '@mui/styles'
import { useMutation, gql } from '@apollo/client'
import * as R from 'ramda'
import React, { useState } from 'react'
import DataTable from 'src/components/tables/DataTable'
@ -9,10 +8,6 @@ import helper from 'src/pages/Maintenance/helper'
import { fromNamespace } from 'src/utils/config'
import styles from './Cassettes.styles'
const useStyles = makeStyles(styles)
const SET_CASSETTE_BILLS = gql`
mutation MachineAction(
$deviceId: ID!
@ -46,8 +41,6 @@ const widths = {
}
const CashCassettes = ({ machine, config, refetchData, bills }) => {
const classes = useStyles()
const [wizard, setWizard] = useState(false)
const cashout = config && fromNamespace('cashOut')(config)
@ -57,7 +50,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => {
const getCashoutSettings = deviceId => fromNamespace(deviceId)(cashout)
const elements = R.filter(it => it.name !== 'name')(
helper.getElements(classes, config, bills, setWizard, widths)
helper.getElements(config, bills, setWizard, widths)
)
const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, {
@ -92,7 +85,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => {
Details={InnerCashUnitDetails}
emptyText="No machines so far"
initialExpanded={0}
tableClassName={classes.dataTable}
tableClassName="min-h-72"
/>
{wizard && (
<Wizard

35
new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js
View file

@ -1,35 +0,0 @@
import { offDarkColor } from 'src/styling/variables'
const styles = {
unitsRow: {
display: 'flex',
flexDirection: 'row',
margin: [[10, 0]],
'& > *': {
marginRight: 30
},
'& > *:last-child': {
marginRight: 0
}
},
units: {
display: 'flex',
flexDirection: 'row',
'& > *': {
marginRight: 10
},
'& > *:last-child': {
marginRight: 0
}
},
verticalLine: {
height: '100%',
width: 1,
backgroundColor: offDarkColor
},
dataTable: {
minHeight: 290
}
}
export default styles

21
new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx
View file

@ -1,31 +1,26 @@
import { makeStyles } from '@mui/styles'
import React from 'react'
import { Label3, P } from 'src/components/typography'
import { Label1, P } from 'src/components/typography'
import { modelPrettifier } from 'src/utils/machine'
import { formatDate } from 'src/utils/timezones'
import styles from '../Machines.styles'
const useStyles = makeStyles(styles)
const Details = ({ data, timezone }) => {
const classes = useStyles()
return (
<div className={classes.row}>
<div className={classes.rowItem}>
<Label3 className={classes.label3}>Paired at</Label3>
<div className="flex gap-30">
<div>
<Label1 className="text-comet mt-0">Paired at</Label1>
<P>
{data.pairedAt
? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')
: ''}
</P>
</div>
<div className={classes.rowItem}>
<Label3 className={classes.label3}>Machine model</Label3>
<div>
<Label1 className="text-comet mt-0">Machine model</Label1>
<P>{modelPrettifier[data.model]}</P>
</div>
<div className={classes.rowItem}>
<Label3 className={classes.label3}>Software version</Label3>
<div>
<Label1 className="text-comet mt-0">Software version</Label1>
<P>{data.version}</P>
</div>
</div>

48
new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx
View file

@ -1,4 +1,3 @@
import { makeStyles } from '@mui/styles'
import BigNumber from 'bignumber.js'
import { formatDistance } from 'date-fns'
import React from 'react'
@ -7,36 +6,25 @@ import MachineActions from 'src/components/machineActions/MachineActions'
import { H3, Label1, P } from 'src/components/typography'
import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
import styles from '../Machines.styles'
const useStyles = makeStyles(styles)
const Overview = ({ data, onActionSuccess }) => {
const classes = useStyles()
return (
<div className={classes.contentContainer}>
<div className={classes.row}>
<div className={classes.rowItem}>
<H3>{data.name}</H3>
</div>
<div className="flex flex-col gap-8">
<H3>{data.name}</H3>
<div>
<Label1 className="text-comet mt-0">Status</Label1>
{data && data.statuses ? <Status status={data.statuses[0]} /> : null}
</div>
<div className={classes.row}>
<div className={classes.rowItem}>
<Label1 className={classes.label3}>Status</Label1>
{data && data.statuses ? <Status status={data.statuses[0]} /> : null}
</div>
</div>
<div className={classes.row}>
<div className={classes.rowItem}>
<Label1 className={classes.label3}>Ping</Label1>
<div className="flex gap-6">
<div>
<Label1 className="text-comet mt-0">Ping</Label1>
<P noMargin>
{data.responseTime
? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms'
: 'unavailable'}
</P>
</div>
<div className={classes.rowItem}>
<Label1 className={classes.label3}>Last ping</Label1>
<div>
<Label1 className="text-comet mt-0">Last ping</Label1>
<P noMargin>
{data.lastPing
? formatDistance(new Date(data.lastPing), new Date(), {
@ -45,8 +33,8 @@ const Overview = ({ data, onActionSuccess }) => {
: 'unknown'}
</P>
</div>
<div className={classes.rowItem}>
<Label1 className={classes.label3}>Network speed</Label1>
<div>
<Label1 className="text-comet mt-0">Network speed</Label1>
<P noMargin>
{data.downloadSpeed
? new BigNumber(data.downloadSpeed)
@ -56,17 +44,15 @@ const Overview = ({ data, onActionSuccess }) => {
</P>
</div>
</div>
<div className={classes.row}>
<div className={classes.rowItem}>
<Label1 className={classes.label3}>Device ID</Label1>
<div>
<div>
<Label1 className="text-comet mt-0">Device ID</Label1>
<P noMargin>
<CopyToClipboard buttonClassname={classes.copyToClipboard}>
{data.deviceId}
</CopyToClipboard>
<CopyToClipboard>{data.deviceId}</CopyToClipboard>
</P>
</div>
</div>
<div className={classes.row}>
<div>
<MachineActions
machine={data}
onActionSuccess={onActionSuccess}></MachineActions>

6
new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx
View file

@ -1,15 +1,11 @@
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemText from '@mui/material/ListItemText'
import { makeStyles } from '@mui/styles'
import React from 'react'
import styles from './Machines.styles'
const useStyles = makeStyles(styles)
const MachineSidebar = ({ data, getText, getKey, isSelected, selectItem }) => {
const classes = useStyles()
return (
<List className={classes.sidebarContainer}>
<List className="h-100 overflow-y-auto">
{data.map((item, idx) => {
return (
<ListItem

90
new-lamassu-admin/src/pages/Machines/Machines.jsx
View file

@ -1,9 +1,6 @@
import { useQuery, gql } from "@apollo/client";
import { useQuery, gql } from '@apollo/client'
import Breadcrumbs from '@mui/material/Breadcrumbs'
import Grid from '@mui/material/Grid'
import { makeStyles } from '@mui/styles'
import NavigateNextIcon from '@mui/icons-material/NavigateNext'
import classnames from 'classnames'
import * as R from 'ramda'
import React, { useState } from 'react'
import { Link, useLocation, useHistory } from 'react-router-dom'
@ -14,8 +11,6 @@ import Commissions from './MachineComponents/Commissions'
import Details from './MachineComponents/Details'
import Overview from './MachineComponents/Overview'
import Transactions from './MachineComponents/Transactions'
import styles from './Machines.styles'
const useStyles = makeStyles(styles)
const GET_INFO = gql`
query getMachine($deviceId: ID!, $billFilters: JSONObject) {
@ -101,8 +96,6 @@ const MachineRoute = () => {
}
const Machines = ({ data, refetch, reload }) => {
const classes = useStyles()
const timezone = R.path(['config', 'locale_timezone'], data) ?? {}
const machine = R.path(['machine'])(data) ?? {}
@ -113,51 +106,44 @@ const Machines = ({ data, refetch, reload }) => {
const machineID = R.path(['deviceId'])(machine) ?? null
return (
<Grid container className={classes.grid}>
<Grid item xs={3}>
<Grid item xs={12}>
<div className={classes.breadcrumbsContainer}>
<Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
<Link to="/dashboard" className={classes.breadcrumbLink}>
<Label3 noMargin className={classes.subtitle}>
Dashboard
</Label3>
</Link>
<TL2 noMargin className={classes.subtitle}>
{machineName}
</TL2>
</Breadcrumbs>
<Overview data={machine} onActionSuccess={reload} />
</div>
</Grid>
</Grid>
<Grid item xs={9}>
<div className={classes.content}>
<div
className={classnames(classes.detailItem, classes.detailsMargin)}>
<TL1 className={classes.subtitle}>{'Details'}</TL1>
<Details data={machine} timezone={timezone} />
</div>
<div className={classes.detailItem}>
<TL1 className={classes.subtitle}>{'Cash box & cassettes'}</TL1>
<Cassettes
refetchData={refetch}
machine={machine}
config={config ?? false}
bills={bills}
/>
</div>
<div className={classes.transactionsItem}>
<TL1 className={classes.subtitle}>{'Latest transactions'}</TL1>
<Transactions id={machineID} />
</div>
<div className={classes.detailItem}>
<TL1 className={classes.subtitle}>{'Commissions'}</TL1>
<Commissions name={'commissions'} id={machineID} />
</div>
<div className="flex flex-1 h-full gap-12">
<div className="basis-1/4 min-w-1/4 pt-8">
<Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
<Link to="/dashboard" className="no-underline">
<Label3 noMargin className="text-comet mt-[1px]">
Dashboard
</Label3>
</Link>
<TL2 noMargin className="text-comet">
{machineName}
</TL2>
</Breadcrumbs>
<Overview data={machine} onActionSuccess={reload} />
</div>
<div className="basis-3/4 max-w-3/4 flex flex-col mt-6">
<div>
<TL1 className="text-comet">Details</TL1>
<Details data={machine} timezone={timezone} />
</div>
</Grid>
</Grid>
<div>
<TL1 className="text-comet">Cash box & cassettes</TL1>
<Cassettes
refetchData={refetch}
machine={machine}
config={config ?? false}
bills={bills}
/>
</div>
<div>
<TL1 className="text-comet">Latest transactions</TL1>
<Transactions id={machineID} />
</div>
<div>
<TL1 className="text-comet">Commissions</TL1>
<Commissions name={'commissions'} id={machineID} />
</div>
</div>
</div>
)
}

66
new-lamassu-admin/src/pages/Machines/Machines.styles.js
View file

@ -1,66 +0,0 @@
import { spacer, comet } from 'src/styling/variables'
const styles = {
grid: {
flex: 1,
height: '100%'
},
content: {
display: 'flex',
flexDirection: 'column',
flex: 1,
marginLeft: spacer * 6,
maxWidth: 900
},
subtitle: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
color: comet
},
label3: {
color: comet,
marginTop: 0,
fontSize: 12
},
row: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around'
},
rowItem: {
flex: 1,
marginBottom: spacer * 2
},
detailItem: {
marginBottom: spacer * 4
},
actionButtonsContainer: {
display: 'flex',
flexDirection: 'row'
},
breadcrumbsContainer: {
marginTop: 32
},
breadcrumbLink: {
textDecoration: 'none'
},
detailsMargin: {
marginTop: 24
},
sidebarContainer: {
height: 400,
overflowY: 'auto'
},
contentContainer: {
'& > *': {
marginTop: 26
},
'& > *:first-child': {
marginTop: 0
}
}
}
export default styles

1
new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx
View file

@ -188,7 +188,6 @@ const CashCassettes = () => {
}
const elements = helper.getElements(
classes,
config,
bills,
setWizard,

26
new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js
View file

@ -27,32 +27,6 @@ export default {
downloadLogsButton: {
marginLeft: 13
},
unitsRow: {
display: 'flex',
flexDirection: 'row',
margin: [[10, 0]],
'& > *': {
marginRight: 30
},
'& > *:last-child': {
marginRight: 0
}
},
units: {
display: 'flex',
flexDirection: 'row',
'& > *': {
marginRight: 10
},
'& > *:last-child': {
marginRight: 0
}
},
verticalLine: {
height: '100%',
width: 1,
backgroundColor: offDarkColor
},
dataTable: {
marginBottom: 80
}

20
new-lamassu-admin/src/pages/Maintenance/helper.jsx
View file

@ -7,14 +7,7 @@ import { IconButton } from 'src/components/buttons'
import { fromNamespace } from 'src/utils/config'
import { getCashUnitCapacity } from 'src/utils/machine'
const getElements = (
classes,
config,
bills,
setWizard,
widths,
setMachineId
) => {
const getElements = (config, bills, setWizard, widths, setMachineId) => {
const fillingPercentageSettings = fromNamespace('notifications', config)
const locale = fromNamespace('locale')(config)
const cashout = fromNamespace('cashOut')(config)
@ -42,7 +35,6 @@ const getElements = (
width={25}
height={45}
omitInnerPercentage
className={classes.padding}
/>
),
inputProps: {
@ -55,8 +47,8 @@ const getElements = (
width: widths.cassettes,
view: m => {
return (
<div className={classes.unitsRow}>
<div className={classes.units}>
<div className="flex my-2 mx-0 gap-8">
<div className="flex gap-2">
{R.range(1, m.numberOfCassettes + 1).map((it, idx) => (
<CashOutLite
key={idx}
@ -73,7 +65,7 @@ const getElements = (
/>
))}
</div>
<div className={classes.units}>
<div className="flex gap-2">
{R.map(it => (
<>
<CashOutLite
@ -109,7 +101,7 @@ const getElements = (
capacity={getCashUnitCapacity(m.model, 'recycler')}
/>
{it !== m.numberOfRecyclers / 2 && (
<span className={classes.verticalLine} />
<span className="h-full w-[1px] bg-comet2" />
)}
</>
))(R.range(1, m.numberOfRecyclers / 2 + 1))}
@ -136,7 +128,7 @@ const getElements = (
size="large">
<EditIcon />
</IconButton>
);
)
}
}
]