From b95dd5cbbf5f3c36f193c16852d87fcb05447c85 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Tue, 6 May 2025 14:50:11 +0100 Subject: [PATCH] partial: Loyalty, Machines CSS rework --- .../LoyaltyPanel/IndividualDiscount.styles.js | 58 ---------- .../LoyaltyPanel/IndividualDiscountModal.jsx | 28 ++--- .../LoyaltyPanel/IndividualDiscounts.jsx | 14 +-- .../pages/LoyaltyPanel/LoyaltyDiscounts.jsx | 7 -- .../src/pages/LoyaltyPanel/PromoCodes.jsx | 6 - .../pages/LoyaltyPanel/PromoCodes.styles.js | 51 --------- .../pages/LoyaltyPanel/PromoCodesModal.jsx | 103 ++++++++---------- .../MachineComponents/Cassettes/Cassettes.jsx | 13 +-- .../Cassettes/Cassettes.styles.js | 35 ------ .../Machines/MachineComponents/Details.jsx | 21 ++-- .../Machines/MachineComponents/Overview.jsx | 48 +++----- .../src/pages/Machines/MachineSidebar.jsx | 6 +- .../src/pages/Machines/Machines.jsx | 90 +++++++-------- .../src/pages/Machines/Machines.styles.js | 66 ----------- .../src/pages/Maintenance/CashUnits.jsx | 1 - .../src/pages/Maintenance/CashUnits.styles.js | 26 ----- .../src/pages/Maintenance/helper.jsx | 20 +--- 17 files changed, 134 insertions(+), 459 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js delete mode 100644 new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx delete mode 100644 new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js delete mode 100644 new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js delete mode 100644 new-lamassu-admin/src/pages/Machines/Machines.styles.js diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js deleted file mode 100644 index 68951bfc..00000000 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js +++ /dev/null @@ -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 diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx index 6868330d..840964ab 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx @@ -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 }) => ( -
-
+ +
-
+

Define discount rate

@@ -112,22 +107,19 @@ const IndividualDiscountModal = ({

-
+
- - % - +

%

-
+
{getErrorMsg(errors, touched, creationError) && ( {getErrorMsg(errors, touched, creationError)} @@ -136,7 +128,7 @@ const IndividualDiscountModal = ({
diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx index d6940a65..7f1d63fc 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx @@ -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 ( -
+
{t.customer.phone}
@@ -158,7 +152,7 @@ const IndividualDiscounts = () => { Add new code diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx deleted file mode 100644 index cf4e9335..00000000 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -const LoyaltyDiscounts = () => { - return <> -} - -export default LoyaltyDiscounts diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx index 6c3afcf0..6a239742 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx @@ -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() diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js deleted file mode 100644 index 6332a4c3..00000000 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js +++ /dev/null @@ -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 diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx index 25556f6e..15d064e5 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx @@ -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 }) => ( - -

Promo code name

+ +

Promo code name

-
-

Define discount rate

- -

- This is a percentage discount off of your existing - commission rates for a customer entering this code at the - machine. -

-

- 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. -

- -
-
- - - % - -
-
- {(errorMsg || !R.isEmpty(errors)) && ( - - {errorMsg || R.head(R.values(errors))} - - )} - +
+

Define discount rate

+ +

+ This is a percentage discount off of your existing + commission rates for a customer entering this code at the + machine. +

+

+ 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. +

+ +
+
+ +

%

+
+
+ {(errorMsg || !R.isEmpty(errors)) && ( + + {errorMsg || R.head(R.values(errors))} + + )} +
)} diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx index 04dfb6b6..0dd0b5a4 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx @@ -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 && ( *': { - 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 diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx index 7b9105da..7ca96a36 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx @@ -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 ( -
-
- Paired at +
+
+ Paired at

{data.pairedAt ? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss') : ''}

-
- Machine model +
+ Machine model

{modelPrettifier[data.model]}

-
- Software version +
+ Software version

{data.version}

diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx index a9f42060..db9730c6 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx @@ -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 ( -
-
-
-

{data.name}

-
+
+

{data.name}

+
+ Status + {data && data.statuses ? : null}
-
-
- Status - {data && data.statuses ? : null} -
-
-
-
- Ping +
+
+ Ping

{data.responseTime ? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms' : 'unavailable'}

-
- Last ping +
+ Last ping

{data.lastPing ? formatDistance(new Date(data.lastPing), new Date(), { @@ -45,8 +33,8 @@ const Overview = ({ data, onActionSuccess }) => { : 'unknown'}

-
- Network speed +
+ Network speed

{data.downloadSpeed ? new BigNumber(data.downloadSpeed) @@ -56,17 +44,15 @@ const Overview = ({ data, onActionSuccess }) => {

-
-
- Device ID +
+
+ Device ID

- - {data.deviceId} - + {data.deviceId}

-
+
diff --git a/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx b/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx index 1181d615..a9f1851b 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx @@ -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 ( - + {data.map((item, idx) => { return ( { } 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 ( - - - -
- }> - - - Dashboard - - - - {machineName} - - - -
- - - -
-
- {'Details'} -
-
-
- {'Cash box & cassettes'} - -
-
- {'Latest transactions'} - -
-
- {'Commissions'} - -
+
+
+ }> + + + Dashboard + + + + {machineName} + + + +
+
+
+ Details +
- - +
+ Cash box & cassettes + +
+
+ Latest transactions + +
+
+ Commissions + +
+
+
) } diff --git a/new-lamassu-admin/src/pages/Machines/Machines.styles.js b/new-lamassu-admin/src/pages/Machines/Machines.styles.js deleted file mode 100644 index 2a524939..00000000 --- a/new-lamassu-admin/src/pages/Machines/Machines.styles.js +++ /dev/null @@ -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 diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx index 8f3fa94b..16aaad7c 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx @@ -188,7 +188,6 @@ const CashCassettes = () => { } const elements = helper.getElements( - classes, config, bills, setWizard, diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js index 389968bc..2c46a149 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js @@ -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 } diff --git a/new-lamassu-admin/src/pages/Maintenance/helper.jsx b/new-lamassu-admin/src/pages/Maintenance/helper.jsx index 19e21f60..e63e8ac4 100644 --- a/new-lamassu-admin/src/pages/Maintenance/helper.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/helper.jsx @@ -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 ( -
-
+
+
{R.range(1, m.numberOfCassettes + 1).map((it, idx) => ( ))}
-
+
{R.map(it => ( <> {it !== m.numberOfRecyclers / 2 && ( - + )} ))(R.range(1, m.numberOfRecyclers / 2 + 1))} @@ -136,7 +128,7 @@ const getElements = ( size="large"> - ); + ) } } ]