partial: cashout css migration
This commit is contained in:
Rafael Taranto
parent
b07a3d9ad6
commit
f9103bd1ba
6 changed files with 32 additions and 158 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import { useQuery, useMutation, gql } from "@apollo/client";
|
||||
import { makeStyles } from '@mui/styles'
|
||||
import { useQuery, useMutation, gql } from '@apollo/client'
|
||||
import Switch from '@mui/material/Switch'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
|
|
@ -15,20 +14,6 @@ import { fromNamespace, toNamespace } from 'src/utils/config'
|
|||
import Wizard from './Wizard'
|
||||
import { DenominationsSchema, getElements } from './helper'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
fudgeFactor: {
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
},
|
||||
switchLabel: {
|
||||
margin: 6,
|
||||
width: 24
|
||||
},
|
||||
autoComplete: {
|
||||
width: '100%'
|
||||
}
|
||||
})
|
||||
|
||||
const SAVE_CONFIG = gql`
|
||||
mutation Save($config: JSONObject) {
|
||||
saveConfig(config: $config)
|
||||
|
|
@ -61,7 +46,6 @@ const GET_INFO = gql`
|
|||
`
|
||||
|
||||
const CashOut = ({ name: SCREEN_KEY }) => {
|
||||
const classes = useStyles()
|
||||
const [wizard, setWizard] = useState(false)
|
||||
const { data, loading } = useQuery(GET_INFO)
|
||||
|
||||
|
|
@ -107,7 +91,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
|
|||
/>
|
||||
</HelpTooltip>
|
||||
}>
|
||||
<div className={classes.fudgeFactor}>
|
||||
<div className="flex items-center">
|
||||
<P>Transaction fudge factor</P>
|
||||
<Switch
|
||||
checked={fudgeFactorActive}
|
||||
|
|
@ -116,7 +100,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
|
|||
}}
|
||||
value={fudgeFactorActive}
|
||||
/>
|
||||
<Label2 className={classes.switchLabel}>
|
||||
<Label2 className="m-1 w-6">
|
||||
{fudgeFactorActive ? 'On' : 'Off'}
|
||||
</Label2>
|
||||
<HelpTooltip width={304}>
|
||||
|
|
@ -150,7 +134,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
|
|||
error={error?.message}
|
||||
validationSchema={DenominationsSchema}
|
||||
disableRowEdit={R.compose(R.not, R.path(['active']))}
|
||||
elements={getElements(machines, locale, classes)}
|
||||
elements={getElements(machines, locale)}
|
||||
/>
|
||||
{R.isEmpty(machines) && <EmptyTable message="No machines so far" />}
|
||||
{wizard && (
|
||||
|
|
|
|||
|
|
@ -1,64 +1,20 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import React from 'react'
|
||||
import { H1, P, Info2 } from 'src/components/typography'
|
||||
import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'
|
||||
|
||||
import { Button } from 'src/components/buttons'
|
||||
import { neon, spacer } from 'src/styling/variables'
|
||||
|
||||
const styles = {
|
||||
logo: {
|
||||
maxHeight: 80,
|
||||
maxWidth: 200
|
||||
},
|
||||
subtitle: {
|
||||
margin: 0,
|
||||
marginBottom: 42,
|
||||
textAlign: 'center'
|
||||
},
|
||||
text: {
|
||||
margin: 0
|
||||
},
|
||||
button: {
|
||||
margin: [[0, 'auto']]
|
||||
},
|
||||
modalContent: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
flex: 1,
|
||||
padding: [[0, 34, 107, 34]]
|
||||
},
|
||||
innerContent: {
|
||||
paddingBottom: 72
|
||||
},
|
||||
title: {
|
||||
color: neon,
|
||||
marginBottom: 12,
|
||||
marginTop: 30,
|
||||
textAlign: 'center'
|
||||
},
|
||||
titleDecorator: {
|
||||
verticalAlign: 'bottom',
|
||||
marginRight: spacer * 1.5,
|
||||
width: spacer * 3,
|
||||
height: spacer * 3.25
|
||||
}
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const WizardSplash = ({ name, onContinue }) => {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<div className={classes.modalContent}>
|
||||
<div className={classes.innerContent}>
|
||||
<H1 className={classes.title}>
|
||||
<TxOutIcon className={classes.titleDecorator} />
|
||||
<div className="flex flex-col flex-1 px-8 gap-18">
|
||||
<div>
|
||||
<H1 className="text-neon text-center mb-3 mt-8">
|
||||
<TxOutIcon className="align-bottom mr-3 w-6 h-7" />
|
||||
<span>Enable cash-out</span>
|
||||
</H1>
|
||||
<Info2 className={classes.subtitle}>{name}</Info2>
|
||||
<Info2 noMargin className="mb-10 text-center">
|
||||
{name}
|
||||
</Info2>
|
||||
<P>
|
||||
You are about to activate cash-out functionality on your {name}{' '}
|
||||
machine which will allow your customers to sell crypto to you.
|
||||
|
|
@ -68,7 +24,7 @@ const WizardSplash = ({ name, onContinue }) => {
|
|||
denominations for the machine.
|
||||
</P>
|
||||
</div>
|
||||
<Button className={classes.button} onClick={onContinue}>
|
||||
<Button className="mx-auto" onClick={onContinue}>
|
||||
Start configuration
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import { Formik, Form, Field } from 'formik'
|
||||
import React from 'react'
|
||||
import ErrorMessage from 'src/components/ErrorMessage'
|
||||
|
|
@ -18,9 +17,6 @@ import tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cas
|
|||
import tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg'
|
||||
import tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.svg'
|
||||
|
||||
import styles from './WizardStep.styles'
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const getCassetesArtworks = () => ({
|
||||
1: {
|
||||
1: cassetteOne
|
||||
|
|
@ -54,14 +50,12 @@ const WizardStep = ({
|
|||
options,
|
||||
numberOfCassettes
|
||||
}) => {
|
||||
const classes = useStyles()
|
||||
|
||||
const label = isLastStep ? 'Finish' : 'Next'
|
||||
const cassetteIcon = getCassetesArtworks()[numberOfCassettes]
|
||||
return (
|
||||
<>
|
||||
<div className={classes.titleDiv}>
|
||||
<Info2 className={classes.title}>{name}</Info2>
|
||||
<div className="pb-8">
|
||||
<Info2 className="m-0 mb-3">{name}</Info2>
|
||||
<Stepper steps={steps.length + 1} currentStep={step} />
|
||||
</div>
|
||||
|
||||
|
|
@ -78,18 +72,18 @@ const WizardStep = ({
|
|||
}}
|
||||
enableReinitialize
|
||||
validationSchema={schema}>
|
||||
<Form className={classes.column}>
|
||||
<div className={classes.header}>
|
||||
<Form className="flex flex-col justify-between grow-2 pb-8">
|
||||
<div className="flex">
|
||||
{steps.map(
|
||||
({ type, display, component }, idx) =>
|
||||
1 + idx === step && (
|
||||
<div key={idx} className={classes.step}>
|
||||
<H4 className={classes.edit}>Edit {display}</H4>
|
||||
<div key={idx} className="flex-1">
|
||||
<H4 noMargin>Edit {display}</H4>
|
||||
|
||||
<Label1>Choose bill denomination</Label1>
|
||||
<div className={classes.bill}>
|
||||
<div className="flex items-center justify-end w-33">
|
||||
<Field
|
||||
className={classes.billInput}
|
||||
className="w-full"
|
||||
type="text"
|
||||
size="lg"
|
||||
autoFocus={1 + idx === step}
|
||||
|
|
@ -102,7 +96,7 @@ const WizardStep = ({
|
|||
options={options}
|
||||
valueProp={'code'}
|
||||
labelProp={'display'}></Field>
|
||||
<Info1 noMargin className={classes.suffix}>
|
||||
<Info1 noMargin className="pl-4">
|
||||
{fiatCurrency}
|
||||
</Info1>
|
||||
</div>
|
||||
|
|
@ -110,14 +104,14 @@ const WizardStep = ({
|
|||
)
|
||||
)}
|
||||
<img
|
||||
className={classes.stepImage}
|
||||
className="relative -top-5 right-4"
|
||||
alt="cassette"
|
||||
width="148"
|
||||
height="205"
|
||||
src={cassetteIcon ? cassetteIcon[step] : null}></img>
|
||||
</div>
|
||||
|
||||
<Button className={classes.submit} type="submit">
|
||||
<Button className="self-end" type="submit">
|
||||
{label}
|
||||
</Button>
|
||||
</Form>
|
||||
|
|
@ -125,11 +119,11 @@ const WizardStep = ({
|
|||
)}
|
||||
|
||||
{isLastStep && (
|
||||
<div className={classes.column}>
|
||||
<div className="flex flex-col justify-between grow-2 pb-8">
|
||||
<div>
|
||||
<Info2 className={classes.title}>Cash Cassette Bill Count</Info2>
|
||||
<Info2 className="m-0 mb-3">Cash Cassette Bill Count</Info2>
|
||||
<P>
|
||||
<WarningIcon className={classes.disclaimerIcon} />
|
||||
<WarningIcon className="float-left mr-4 mb-12" />
|
||||
When enabling cash-out, your bill count will be automatically set
|
||||
to zero. Make sure you physically put cash inside the cash
|
||||
cassettes to allow the machine to dispense it to your users. If
|
||||
|
|
@ -137,9 +131,9 @@ const WizardStep = ({
|
|||
count for this machine on your Cash boxes & cassettes tab under
|
||||
Maintenance.
|
||||
</P>
|
||||
<Info2 className={classes.title}>Default Commissions</Info2>
|
||||
<Info2 className="m-0 mb-3">Default Commissions</Info2>
|
||||
<P>
|
||||
<WarningIcon className={classes.disclaimerIcon} />
|
||||
<WarningIcon className="float-left mr-4 mb-12" />
|
||||
When enabling cash-out, default commissions will be set. To change
|
||||
commissions for this machine, please go to the Commissions tab
|
||||
under Settings where you can set exceptions for each of the
|
||||
|
|
@ -147,7 +141,7 @@ const WizardStep = ({
|
|||
</P>
|
||||
</div>
|
||||
{error && <ErrorMessage>Failed to save</ErrorMessage>}
|
||||
<Button className={classes.submit} onClick={() => onContinue()}>
|
||||
<Button className="self-end" onClick={() => onContinue()}>
|
||||
{label}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
import { errorColor, spacer } from 'src/styling/variables'
|
||||
|
||||
const LABEL_WIDTH = 150
|
||||
|
||||
export default {
|
||||
title: {
|
||||
margin: [[0, 0, 12, 0]]
|
||||
},
|
||||
titleDiv: {
|
||||
paddingBottom: 32
|
||||
},
|
||||
subtitle: {
|
||||
margin: [[32, 0, 21, 0]]
|
||||
},
|
||||
edit: {
|
||||
margin: [[0, 0, 0, 0]]
|
||||
},
|
||||
error: {
|
||||
color: errorColor
|
||||
},
|
||||
bill: {
|
||||
width: 131,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'end'
|
||||
},
|
||||
billInput: {
|
||||
width: '100%'
|
||||
},
|
||||
suffix: {
|
||||
paddingLeft: spacer * 2
|
||||
},
|
||||
submit: {
|
||||
alignSelf: 'flex-end'
|
||||
},
|
||||
picker: {
|
||||
width: LABEL_WIDTH
|
||||
},
|
||||
header: {
|
||||
display: 'flex'
|
||||
},
|
||||
column: {
|
||||
display: 'flex',
|
||||
flexGrow: 2,
|
||||
flexDirection: 'column',
|
||||
paddingBottom: 32,
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
step: {
|
||||
flex: 1
|
||||
},
|
||||
stepImage: {
|
||||
position: 'relative',
|
||||
top: -20,
|
||||
right: 14
|
||||
},
|
||||
disclaimerIcon: {
|
||||
float: 'left',
|
||||
margin: [[2, 16, 48, 0]]
|
||||
}
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@ const DenominationsSchema = Yup.object()
|
|||
})
|
||||
)
|
||||
|
||||
const getElements = (machines, locale = {}, classes) => {
|
||||
const getElements = (machines, locale = {}) => {
|
||||
const fiatCurrency = R.prop('fiatCurrency')(locale)
|
||||
const maxNumberOfCassettes = Math.max(
|
||||
...R.map(it => it.numberOfCassettes, machines),
|
||||
|
|
@ -122,7 +122,7 @@ const getElements = (machines, locale = {}, classes) => {
|
|||
options: options,
|
||||
labelProp: 'display',
|
||||
valueProp: 'code',
|
||||
className: classes.autoComplete
|
||||
className: 'w-full'
|
||||
}
|
||||
: { decimalPlaces: 0 }
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
--color-tomato: var(--tomato);
|
||||
--color-ghost: var(--ghost);
|
||||
--color-zircon: var(--zircon);
|
||||
--color-neon: var(--neon);
|
||||
--color-malachite: var(--malachite);
|
||||
--color-orange-yellow: var(--orange-yellow);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue