diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js index cbb5c292..0c7c7ecc 100644 --- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js +++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js @@ -35,7 +35,7 @@ const cashboxStyles = { border: '4px solid' }, emptyPart: { - backgroundColor: 'white', + backgroundColor: 'var(--ghost)', height: ({ percent }) => `${100 - percent}%`, position: 'relative', '& > p': { diff --git a/new-lamassu-admin/src/pages/Notifications/Notifications.styles.js b/new-lamassu-admin/src/pages/Notifications/Notifications.styles.js deleted file mode 100644 index effc5c32..00000000 --- a/new-lamassu-admin/src/pages/Notifications/Notifications.styles.js +++ /dev/null @@ -1,20 +0,0 @@ -export default { - cryptoBalanceAlerts: { - display: 'flex', - marginBottom: 36, - height: 135, - alignItems: 'center' - }, - cryptoBalanceAlertsForm: { - width: 222, - marginRight: 32 - }, - cryptoBalanceAlertsSecondForm: { - marginLeft: 50 - }, - vertSeparator: { - width: 1, - height: '100%', - borderRight: [[1, 'solid', 'black']] - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx b/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx index 2fca1331..79931bc7 100644 --- a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx +++ b/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import React from 'react' import { H4 } from 'src/components/typography' import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react' @@ -6,27 +5,23 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import { Link, IconButton } from 'src/components/buttons' -import styles from './EditHeader.styles' - -const useStyles = makeStyles(styles) - const Header = ({ title, editing, disabled, setEditing }) => { - const classes = useStyles() - return ( -
-

{title}

+
+

+ {title} +

{!editing && ( setEditing(true)} - className={classes.button} + className="border-0 bg-transparent shrink-0 cursor-pointer ml-2" disabled={disabled} size="large"> {disabled ? : } )} {editing && ( -
+
Save @@ -36,7 +31,7 @@ const Header = ({ title, editing, disabled, setEditing }) => {
)}
- ); + ) } export default Header diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.styles.js b/new-lamassu-admin/src/pages/Notifications/components/EditHeader.styles.js deleted file mode 100644 index c15f5910..00000000 --- a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.styles.js +++ /dev/null @@ -1,29 +0,0 @@ -export default { - header: { - display: 'flex', - alignItems: 'center', - marginBottom: 16, - height: 26, - margin: 0 - }, - title: { - flexShrink: 2, - margin: 0, - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis' - }, - button: { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer', - marginLeft: 8 - }, - editingButtons: { - display: 'flex', - flexShrink: 0, - marginLeft: 16, - justifyContent: 'space-between', - width: 110 - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx b/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx index 05cf20f6..6abbcf4b 100644 --- a/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx +++ b/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { useFormikContext, Field as FormikField } from 'formik' import React from 'react' @@ -6,10 +5,6 @@ import { Label1, Info1, TL2 } from 'src/components/typography' import { NumberInput } from 'src/components/inputs/formik' -import styles from './EditableNumber.styles' - -const useStyles = makeStyles(styles) - const EditableNumber = ({ label, name, @@ -20,20 +15,21 @@ const EditableNumber = ({ decimalPlaces = 0, width = 80 }) => { - const classes = useStyles({ width, editing }) const { values } = useFormikContext() const classNames = { - [classes.fieldWrapper]: true, + 'h-13': true, className } return (
- {label && {label}} -
+ {label && {label}} +
{!editing && ( - {displayValue(values[name])} + + {displayValue(values[name])} + )} {editing && ( )} - {decoration} + + {decoration} +
) diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.styles.js b/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.styles.js deleted file mode 100644 index f42de9ee..00000000 --- a/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.styles.js +++ /dev/null @@ -1,18 +0,0 @@ -export default { - text: { - margin: [[7, 0, 7, 1]] - }, - fieldWrapper: { - height: 53 - }, - valueWrapper: { - display: 'flex', - alignItems: 'baseline' - }, - label: { - margin: 0 - }, - decoration: { - margin: [[0, 0, 0, 7]] - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx index 10c105ba..773640eb 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx +++ b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx @@ -1,31 +1,24 @@ -import { makeStyles } from '@mui/styles' import React, { useContext } from 'react' import NotificationsCtx from '../NotificationsContext' import SingleFieldEditableNumber from '../components/SingleFieldEditableNumber' -import styles from './CryptoBalanceAlerts.styles' - const LOW_BALANCE_KEY = 'cryptoLowBalance' const HIGH_BALANCE_KEY = 'cryptoHighBalance' -const useStyles = makeStyles(styles) - const CryptoBalanceAlerts = ({ section, fieldWidth }) => { - const classes = useStyles() - const { data, save, currency, setEditing, isEditing, isDisabled } = useContext(NotificationsCtx) return ( -
+
{ width={fieldWidth} /> -
+
{ section={section} save={save} decoration={currency} - className={classes.cryptoBalanceAlertsSecondForm} title="Default (High balance)" label="Alert me over" editing={isEditing(HIGH_BALANCE_KEY)} diff --git a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.styles.js b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.styles.js deleted file mode 100644 index effc5c32..00000000 --- a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.styles.js +++ /dev/null @@ -1,20 +0,0 @@ -export default { - cryptoBalanceAlerts: { - display: 'flex', - marginBottom: 36, - height: 135, - alignItems: 'center' - }, - cryptoBalanceAlertsForm: { - width: 222, - marginRight: 32 - }, - cryptoBalanceAlertsSecondForm: { - marginLeft: 50 - }, - vertSeparator: { - width: 1, - height: '100%', - borderRight: [[1, 'solid', 'black']] - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx index 86e40da4..d8238d37 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx +++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { Form, Formik } from 'formik' import * as R from 'ramda' import React, { useContext } from 'react' @@ -13,10 +12,6 @@ import NotificationsCtx from '../NotificationsContext' import Header from '../components/EditHeader' import EditableNumber from '../components/EditableNumber' -import styles from './FiatBalanceAlerts.styles' - -const useStyles = makeStyles(styles) - const CASH_IN_KEY = 'fiatBalanceAlertsCashIn' const CASH_OUT_KEY = 'fiatBalanceAlertsCashOut' const RECYCLER_STACKER_KEY = 'fiatBalanceAlertsRecyclerStacker' @@ -34,8 +29,6 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => { save, machines = [] } = useContext(NotificationsCtx) - const classes = useStyles() - const maxNumberOfCassettes = Math.max( ...R.map(it => it.numberOfCassettes, machines), DEFAULT_NUMBER_OF_CASSETTES @@ -97,8 +90,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => { setEditing(CASH_OUT_KEY, false) }}> {({ values }) => ( - <> -
+
+
{ disabled={isDisabled(CASH_IN_KEY)} setEditing={it => setEditing(CASH_IN_KEY, it)} /> -
-
-
-
- (x === '' ? '-' : x)} - decoration="notes" - width={fieldWidth} - /> -
-
-
-
+ (x === '' ? '-' : x)} + decoration="notes" + width={fieldWidth} + /> -
+
{ disabled={isDisabled(CASH_OUT_KEY)} setEditing={it => setEditing(CASH_OUT_KEY, it)} /> -
+
{R.map( it => ( <> -
+
{ omitInnerPercentage cashOut /> -
- Cassette {it + 1} +
+ Cassette {it + 1} { )}
-
+
{ disabled={isDisabled(RECYCLER_STACKER_KEY)} setEditing={it => setEditing(RECYCLER_STACKER_KEY, it)} /> -
+
{R.chain( it => [ <> -
+
{ omitInnerPercentage cashOut /> -
- - Recycler {(it + 1) * 2 - 1} - +
+ Recycler {(it + 1) * 2 - 1} {
, <> -
+
{ omitInnerPercentage cashOut /> -
- - Recycler {(it + 1) * 2} - +
+ Recycler {(it + 1) * 2} { )}
- +
)} ) diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js deleted file mode 100644 index ab4a4450..00000000 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js +++ /dev/null @@ -1,31 +0,0 @@ -import { backgroundColor } from 'src/styling/variables' - -export default { - wrapper: { - display: 'flex' - }, - form: { - marginBottom: 36 - }, - title: { - marginTop: 0 - }, - row: { - width: 236, - display: 'grid', - gridTemplateColumns: 'repeat(2,1fr)', - gridTemplateRows: '1fr', - gridColumnGap: 18, - gridRowGap: 0 - }, - col2: { - width: 136 - }, - cashboxLabel: { - marginRight: 4, - fontSize: 20 - }, - cashboxEmptyPart: { - backgroundColor: `${backgroundColor}` - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx b/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx index 130b7525..82fecb6e 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx +++ b/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import Switch from '@mui/material/Switch' import * as R from 'ramda' import React, { useContext } from 'react' @@ -74,12 +73,6 @@ const Row = ({ ) } -const useStyles = makeStyles({ - wizardTable: { - width: 930 - } -}) - const Setup = ({ wizard, forceDisable }) => { const { data: rawData, @@ -120,9 +113,8 @@ const Setup = ({ wizard, forceDisable }) => { ] const widthAdjust = wizard ? 20 : 0 - const classes = useStyles() return ( - +
{Object.keys(sizes).map(it => ( diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx index 91969087..f8064b34 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx @@ -1,18 +1,11 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import Switch from '@mui/material/Switch' +import { useQuery, useMutation, gql } from '@apollo/client' import React, { memo } from 'react' -import { HelpTooltip } from 'src/components/Tooltip' -import { H4, P, Label2 } from 'src/components/typography' import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { SupportLinkButton } from '../../components/buttons' - -import { global } from './OperatorInfo.styles' - -const useStyles = makeStyles(global) +import SwitchRow from './components/SwitchRow.jsx' +import Header from './components/Header.jsx' const GET_CONFIG = gql` query getData { @@ -26,27 +19,7 @@ const SAVE_CONFIG = gql` } ` -const Row = memo(({ title, disabled = false, checked, save, label }) => { - const classes = useStyles() - - return ( -
-

{title}

-
- save && save(event.target.checked)} - /> - {label && {label}} -
-
- ) -}) - const CoinATMRadar = memo(({ wizard }) => { - const classes = useStyles() - const { data } = useQuery(GET_CONFIG) const [saveConfig] = useMutation(SAVE_CONFIG, { @@ -63,53 +36,34 @@ const CoinATMRadar = memo(({ wizard }) => { if (!coinAtmRadarConfig) return null return ( -
-
-
-

Coin ATM Radar share settings

- -

- For details on configuring this panel, please read the relevant - knowledgebase article{' '} - - here - - . -

- - -
- save({ active: value })} - label={coinAtmRadarConfig.active ? 'Yes' : 'No'} - /> - -
-
+ <> +
+ save({ active: value })} + /> + + ) }) diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx index 2b26b873..99ecc42e 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx @@ -1,70 +1,37 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import Switch from '@mui/material/Switch' -import classnames from 'classnames' +import { useQuery, useMutation, gql } from '@apollo/client' import { Form, Formik, Field as FormikField } from 'formik' import * as R from 'ramda' import React, { useState } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import PromptWhenDirty from 'src/components/PromptWhenDirty' -import { HelpTooltip } from 'src/components/Tooltip' -import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography' +import { H4, Info3, Label3 } from 'src/components/typography' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react' import * as Yup from 'yup' -import { Link, IconButton, SupportLinkButton } from 'src/components/buttons' +import { Link, IconButton } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' -import { fontSize5 } from 'src/styling/variables' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { global } from './OperatorInfo.styles' +import SwitchRow from './components/SwitchRow.jsx' +import InfoMessage from './components/InfoMessage.jsx' +import Header from './components/Header.jsx' const FIELD_WIDTH = 280 -const fieldStyles = { - field: { - position: 'relative', - width: 280, - height: 48, - padding: [[0, 4, 4, 0]] - }, - notEditing: { - display: 'flex', - flexDirection: 'column', - '& > p:first-child': { - height: 16, - lineHeight: '16px', - fontSize: fontSize5, - transformOrigin: 'left', - paddingLeft: 0, - margin: [[3, 0, 3, 0]] - }, - '& > p:last-child': { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - margin: 0 - } - } -} - -const fieldUseStyles = makeStyles(fieldStyles) - const Field = ({ editing, field, displayValue, ...props }) => { - const classes = fieldUseStyles() - - const classNames = { - [classes.field]: true, - [classes.notEditing]: !editing - } - return ( -
+
{!editing && ( <> - {field.label} - {displayValue(field.value)} + + {field.label} + + + {displayValue(field.value)} + )} {editing && ( @@ -95,11 +62,7 @@ const SAVE_CONFIG = gql` } ` -const contactUseStyles = makeStyles(global) - const ContactInfo = ({ wizard }) => { - const classes = contactUseStyles() - const [editing, setEditing] = useState(wizard || false) const [error, setError] = useState(null) @@ -187,42 +150,17 @@ const ContactInfo = ({ wizard }) => { return ( <> -
-

Contact information

- -

- For details on configuring this panel, please read the relevant - knowledgebase article: -

- - -
-
-

Info card enabled?

-
- - save({ - active: event.target.checked - }) - } - /> - {info.active ? 'Yes' : 'No'} -
-
-
-
+
+ +
+

Info card

{!editing && ( - setEditing(true)} - size="large"> + setEditing(true)} size="large"> )} @@ -239,9 +177,9 @@ const ContactInfo = ({ wizard }) => { setError(null) }}> {({ errors }) => ( -
+ -
+
{ onFocus={() => setError(null)} />
-
+
{ onFocus={() => setError(null)} />
-
+
{ />
{editing && !!getErrorMsg(errors) && ( - - {getErrorMsg(errors)} - + {getErrorMsg(errors)} + )} + {editing && ( +
+ + Save + + + Cancel + + {error && Failed to save changes} +
)} -
- {editing && ( - <> - - Save - - - Cancel - - {error && ( - Failed to save changes - )} - - )} -
)}
{!wizard && ( -
- - + <> + Sharing your information with your customers through your machines allows them to contact you in case there's a problem with a machine in your network or a transaction. - -
+ + )} - ); + ) } export default ContactInfo diff --git a/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx b/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx index d66ed288..6a66f783 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx @@ -1,15 +1,11 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import Switch from '@mui/material/Switch' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { memo } from 'react' -import { H4, P, Label2 } from 'src/components/typography' +import { H4 } from 'src/components/typography' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { global } from './OperatorInfo.styles' - -const useStyles = makeStyles(global) +import SwitchRow from './components/SwitchRow.jsx' const GET_CONFIG = gql` query getData { @@ -24,14 +20,26 @@ const SAVE_CONFIG = gql` ` const MachineScreens = memo(({ wizard }) => { - const classes = useStyles() - const { data } = useQuery(GET_CONFIG) const [saveConfig] = useMutation(SAVE_CONFIG, { refetchQueries: () => ['getData'] }) + const save = it => { + const formatConfig = R.compose( + toNamespace(namespaces.MACHINE_SCREENS), + toNamespace('rates'), + R.mergeRight(ratesScreenConfig) + ) + + return saveConfig({ + variables: { + config: formatConfig({ active: it }) + } + }) + } + const machineScreensConfig = data?.config && fromNamespace(namespaces.MACHINE_SCREENS, data.config) @@ -46,32 +54,12 @@ const MachineScreens = memo(({ wizard }) => { return ( <> -
-

Rates screen

-
-
-

Enable rates screen

-
- - saveConfig({ - variables: { - config: R.compose( - toNamespace(namespaces.MACHINE_SCREENS), - toNamespace('rates') - )( - R.merge(ratesScreenConfig, { - active: event.target.checked - }) - ) - } - }) - } - /> - {ratesScreenConfig.active ? 'Yes' : 'No'} -
-
+

Rates screen

+ ) }) diff --git a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js deleted file mode 100644 index 9bdfe706..00000000 --- a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js +++ /dev/null @@ -1,118 +0,0 @@ -import { offColor } from 'src/styling/variables' - -const global = { - content: { - display: 'flex' - }, - header: { - display: 'flex', - alignItems: 'center', - position: 'relative', - flex: 'wrap' - }, - section: { - marginBottom: 52 - }, - row: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: 28, - width: 600, - '&:last-child': { - marginBottom: 0 - } - }, - switchRow: { - display: 'flex', - alignItems: 'center', - position: 'relative', - flex: 'wrap', - justifyContent: 'space-between', - width: 396 - }, - switch: { - display: 'flex', - alignItems: 'center' - }, - submit: { - justifyContent: 'flex-start', - alignItems: 'center', - padding: [[0, 4, 4, 4]], - '& > button': { - marginRight: 40 - } - }, - transparentButton: { - '& > *': { - margin: 'auto 12px' - }, - '& button': { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer' - } - }, - infoMessage: { - display: 'flex', - marginBottom: 52, - '& > p': { - width: 330, - color: offColor, - marginTop: 4, - marginLeft: 16 - } - }, - formErrorMsg: { - margin: [[0, 0, 20, 0]] - } -} - -const fieldStyles = { - field: { - position: 'relative', - width: 280, - padding: [[0, 4, 4, 0]] - }, - notEditing: { - display: 'flex', - flexDirection: 'column' - }, - notEditingSingleLine: { - '& > p:first-child': { - height: 16, - lineHeight: '16px', - transform: 'scale(0.75)', - transformOrigin: 'left', - paddingLeft: 0, - margin: [[1, 0, 6, 0]] - }, - '& > p:last-child': { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - height: 25, - margin: 0 - } - }, - notEditingMultiline: { - '& > p:first-child': { - height: 16, - lineHeight: '16px', - transform: 'scale(0.75)', - transformOrigin: 'left', - paddingLeft: 0, - margin: [[1, 0, 5, 0]] - }, - '& > p:last-child': { - width: 502, - height: 121, - overflowY: 'auto', - lineHeight: '19px', - wordWrap: 'anywhere', - margin: 0 - } - } -} - -export { global, fieldStyles } diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx index 3d22330e..4f0209d9 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx @@ -1,19 +1,12 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import Switch from '@mui/material/Switch' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { memo } from 'react' -import { HelpTooltip } from 'src/components/Tooltip' -import { H4, P, Label2 } from 'src/components/typography' import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { SupportLinkButton } from '../../components/buttons' - -import { global } from './OperatorInfo.styles' - -const useStyles = makeStyles(global) +import Header from './components/Header.jsx' +import SwitchRow from './components/SwitchRow.jsx' const GET_CONFIG = gql` query getData { @@ -28,14 +21,23 @@ const SAVE_CONFIG = gql` ` const ReceiptPrinting = memo(({ wizard }) => { - const classes = useStyles() - const { data } = useQuery(GET_CONFIG) const [saveConfig] = useMutation(SAVE_CONFIG, { refetchQueries: () => ['getData'] }) + const saveSwitch = object => { + return saveConfig({ + variables: { + config: toNamespace( + namespaces.RECEIPT, + R.mergeRight(receiptPrintingConfig, object) + ) + } + }) + } + const save = it => saveConfig({ variables: { config: toNamespace(namespaces.RECEIPT, it) } @@ -47,84 +49,26 @@ const ReceiptPrinting = memo(({ wizard }) => { return ( <> -
-

Receipt options

- -

- For details on configuring this panel, please read the relevant - knowledgebase article: -

- - -
-
-

Enable receipt printing

-
- - saveConfig({ - variables: { - config: toNamespace( - namespaces.RECEIPT, - R.merge(receiptPrintingConfig, { - active: event.target.checked - }) - ) - } - }) - } - /> - {receiptPrintingConfig.active ? 'Yes' : 'No'} -
-
-
-

Automatic receipt printing

-
- - saveConfig({ - variables: { - config: toNamespace( - namespaces.RECEIPT, - R.merge(receiptPrintingConfig, { - automaticPrint: event.target.checked - }) - ) - } - }) - } - /> - {receiptPrintingConfig.automaticPrint ? 'Yes' : 'No'} -
-
-
-

Offer SMS receipt

-
- - saveConfig({ - variables: { - config: toNamespace( - namespaces.RECEIPT, - R.merge(receiptPrintingConfig, { - sms: event.target.checked - }) - ) - } - }) - } - /> - {receiptPrintingConfig.sms ? 'Yes' : 'No'} -
-
+
+ saveSwitch({ active: it })} + /> + saveSwitch({ automaticPrint: it })} + /> + saveSwitch({ sms: it })} + /> { - const classes = useFieldStyles() - - const classNames = { - [classes.field]: true, - [classes.notEditing]: !editing, - [classes.notEditingSingleLine]: !editing && !multiline, - [classes.notEditingMultiline]: !editing && multiline + const info3ClassNames = { + 'overflow-hidden whitespace-nowrap text-ellipsis h-6': !multiline, + 'wrap-anywhere overflow-y-auto h-32 mt-4 leading-[23px]': multiline } return ( -
+
{!editing && ( <> - {label} - {value} + + {label} + + + {value} + )} {editing && ( @@ -81,8 +77,6 @@ const SAVE_CONFIG = gql` } ` -const useTermsConditionsStyles = makeStyles(global) - const TermsConditions = () => { const [error, setError] = useState(null) const [editing, setEditing] = useState(false) @@ -95,8 +89,6 @@ const TermsConditions = () => { onError: e => setError(e) }) - const classes = useTermsConditionsStyles() - const { data } = useQuery(GET_CONFIG) const termsAndConditions = @@ -169,72 +161,30 @@ const TermsConditions = () => { return ( <> -
-

Terms & Conditions

- -

- For details on configuring this panel, please read the relevant - knowledgebase article: -

- - -
-
-

Show on screen

-
- - save({ - active: event.target.checked - }) - } - /> - {showOnScreen ? 'Yes' : 'No'} -
-
-
-

- Capture customer photo on acceptance
of Terms & Conditions - screen -

-
- - save({ - tcPhoto: event.target.checked - }) - } - /> - {tcPhoto ? 'Yes' : 'No'} -
-
-
-

Add 7 seconds delay on screen

-
- - save({ - delay: event.target.checked - }) - } - /> - {addDelayOnScreen ? 'Yes' : 'No'} -
-
-
+
+ save({ active: it })} + /> + save({ tcPhoto: it })} + /> + save({ delay: it })} + /> +
Info card {!editing && ( - setEditing(true)} - size="large"> + setEditing(true)} size="large"> )} @@ -251,10 +201,10 @@ const TermsConditions = () => { setError(null) }}> {({ errors }) => ( -
+ {fields.map((f, idx) => ( -
+
{ />
))} -
+
{editing && ( <> @@ -288,7 +238,7 @@ const TermsConditions = () => { )} - ); + ) } export default TermsConditions diff --git a/new-lamassu-admin/src/pages/OperatorInfo/components/Header.jsx b/new-lamassu-admin/src/pages/OperatorInfo/components/Header.jsx new file mode 100644 index 00000000..d80b96b8 --- /dev/null +++ b/new-lamassu-admin/src/pages/OperatorInfo/components/Header.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import { H4, P } from 'src/components/typography/index.jsx' +import { HelpTooltip } from 'src/components/Tooltip.jsx' +import { SupportLinkButton } from 'src/components/buttons/index.js' + +const Header = ({ title, tooltipText, articleUrl }) => ( +
+

{title}

+ +

{tooltipText}

+ + +
+) + +export default Header diff --git a/new-lamassu-admin/src/pages/OperatorInfo/components/InfoMessage.jsx b/new-lamassu-admin/src/pages/OperatorInfo/components/InfoMessage.jsx new file mode 100644 index 00000000..3f21549d --- /dev/null +++ b/new-lamassu-admin/src/pages/OperatorInfo/components/InfoMessage.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +import { Label1 } from 'src/components/typography' + +const InfoMessage = ({ Icon, children }) => ( +
+ + {children} +
+) + +export default InfoMessage diff --git a/new-lamassu-admin/src/pages/OperatorInfo/components/SwitchRow.jsx b/new-lamassu-admin/src/pages/OperatorInfo/components/SwitchRow.jsx new file mode 100644 index 00000000..317e1d36 --- /dev/null +++ b/new-lamassu-admin/src/pages/OperatorInfo/components/SwitchRow.jsx @@ -0,0 +1,21 @@ +import React, { memo } from 'react' +import { Label2, P } from 'src/components/typography/index.jsx' +import Switch from '@mui/material/Switch' + +const SwitchRow = memo(({ title, disabled = false, checked, save }) => { + return ( +
+

{title}

+
+ save && save(event.target.checked)} + /> + {checked ? 'Yes' : 'No'} +
+
+ ) +}) + +export default SwitchRow diff --git a/new-lamassu-admin/src/pages/Services/FormRenderer.jsx b/new-lamassu-admin/src/pages/Services/FormRenderer.jsx index 599eb8e5..ca4cbf3b 100644 --- a/new-lamassu-admin/src/pages/Services/FormRenderer.jsx +++ b/new-lamassu-admin/src/pages/Services/FormRenderer.jsx @@ -1,5 +1,3 @@ -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Formik, Form, FastField } from 'formik' import * as R from 'ramda' @@ -8,29 +6,7 @@ import ErrorMessage from 'src/components/ErrorMessage' import { Button } from 'src/components/buttons' import { SecretInput } from 'src/components/inputs/formik' -import { spacer } from 'src/styling/variables' -const styles = { - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 4, 0]] - }, - button: { - margin: [['auto', 0, 0, 'auto']] - }, - form: { - flex: 1, - display: 'flex', - flexDirection: 'column' - }, - grid: { - marginBottom: 24, - marginTop: 12 - } -} - -const useStyles = makeStyles(styles) const FormRenderer = ({ validationSchema, elements, @@ -40,8 +16,6 @@ const FormRenderer = ({ buttonClass, xs = 12 }) => { - const classes = useStyles() - const initialValues = R.compose( R.mergeAll, R.map(({ code }) => ({ [code]: (value && value[code]) ?? '' })) @@ -74,11 +48,11 @@ const FormRenderer = ({ validationSchema={validationSchema} onSubmit={saveNonEmptySecret}> {({ errors }) => ( - - + +
{elements.map( ({ component, code, display, settings, inputProps }) => ( - +
- +
) )} - -
+
+
{!R.isEmpty(R.mergeRight(errors, saveError)) && ( {R.head(R.values(R.mergeRight(errors, saveError)))} )} diff --git a/new-lamassu-admin/src/pages/Services/Services.jsx b/new-lamassu-admin/src/pages/Services/Services.jsx index 22b44c92..c5e728f0 100644 --- a/new-lamassu-admin/src/pages/Services/Services.jsx +++ b/new-lamassu-admin/src/pages/Services/Services.jsx @@ -1,6 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' import Modal from 'src/components/Modal' @@ -33,16 +31,6 @@ const SAVE_ACCOUNT = gql` } ` -const styles = { - wrapper: { - // widths + spacing is a little over 1200 on the design - // this adjusts the margin after a small reduction on card size - marginLeft: 1 - } -} - -const useStyles = makeStyles(styles) - const Services = () => { const [editingSchema, setEditingSchema] = useState(null) @@ -57,8 +45,6 @@ const Services = () => { const schemas = _schemas(markets) - const classes = useStyles() - const accounts = data?.accounts ?? {} const getItems = (code, elements) => { @@ -116,20 +102,19 @@ const Services = () => { return ( !loading && ( -
+
- +
{R.values(schemas).map(schema => ( - - setEditingSchema(schema)} - items={getItems(schema.code, schema.elements)} - /> - + setEditingSchema(schema)} + items={getItems(schema.code, schema.elements)} + /> ))} - +
{editingSchema && (
Channel