diff --git a/new-lamassu-admin/src/components/inputs/base/Autocomplete.js b/new-lamassu-admin/src/components/inputs/base/Autocomplete.js index 829e1542..38baeba5 100644 --- a/new-lamassu-admin/src/components/inputs/base/Autocomplete.js +++ b/new-lamassu-admin/src/components/inputs/base/Autocomplete.js @@ -82,6 +82,7 @@ const Autocomplete = ({ return ( { onClose={() => setWizard(false)} save={save} error={error} + locale={locale} /> )} diff --git a/new-lamassu-admin/src/pages/Cashout/Wizard.js b/new-lamassu-admin/src/pages/Cashout/Wizard.js index 2411f7f8..6c83b090 100644 --- a/new-lamassu-admin/src/pages/Cashout/Wizard.js +++ b/new-lamassu-admin/src/pages/Cashout/Wizard.js @@ -3,6 +3,8 @@ import React, { useState } from 'react' import * as Yup from 'yup' import Modal from 'src/components/Modal' +import { Autocomplete } from 'src/components/inputs/formik' +import denominations from 'src/utils/bill-denominations' import { toNamespace } from 'src/utils/config' import WizardSplash from './WizardSplash' @@ -11,13 +13,25 @@ import { DenominationsSchema } from './helper' const LAST_STEP = 3 const MODAL_WIDTH = 554 +const MODAL_HEIGHT = 520 -const Wizard = ({ machine, onClose, save, error }) => { +const getOptions = R.curry((locale, denomiations) => { + const currency = R.prop('fiatCurrency')(locale) + return R.compose( + R.map(code => ({ code, display: code })), + R.keys, + R.path([currency]) + )(denomiations) +}) + +const Wizard = ({ machine, locale, onClose, save, error }) => { const [{ step, config }, setState] = useState({ step: 0, config: { active: true } }) + const options = getOptions(locale, denominations) + const title = `Enable cash-out` const isLastStep = step === LAST_STEP @@ -36,30 +50,31 @@ const Wizard = ({ machine, onClose, save, error }) => { }) } - const getStepData = () => { - switch (step) { - case 1: - return { - type: 'top', - display: 'Cassete 1 (Top)', - schema: Yup.object().shape({ top: Yup.number().required() }) - } - case 2: - return { - type: 'bottom', - display: 'Cassete 2', - schema: Yup.object().shape({ bottom: Yup.number().required() }) - } - default: - return null + const steps = [ + { + type: 'top', + display: 'Cassette 1 (Top)', + component: Autocomplete + }, + { + type: 'bottom', + display: 'Cassette 2', + component: Autocomplete } - } + ] + + const schema = () => + Yup.object().shape({ + top: Yup.number().required(), + bottom: step >= 2 ? Yup.number().required() : Yup.number() + }) return ( {step === 0 && ( onContinue()} /> @@ -70,7 +85,10 @@ const Wizard = ({ machine, onClose, save, error }) => { name={machine.name} error={error} lastStep={isLastStep} - {...getStepData()} + steps={steps} + fiatCurrency={locale.fiatCurrency} + options={options} + schema={schema()} onContinue={onContinue} /> )} diff --git a/new-lamassu-admin/src/pages/Cashout/WizardSplash.js b/new-lamassu-admin/src/pages/Cashout/WizardSplash.js index 1a410bab..47b01e18 100644 --- a/new-lamassu-admin/src/pages/Cashout/WizardSplash.js +++ b/new-lamassu-admin/src/pages/Cashout/WizardSplash.js @@ -2,7 +2,9 @@ import { makeStyles } from '@material-ui/core' import React from 'react' import { Button } from 'src/components/buttons' -import { H1, P } from 'src/components/typography' +import { H1, P, Info2 } from 'src/components/typography' +import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg' +import { neon, spacer } from 'src/styling/variables' const styles = { logo: { @@ -10,21 +12,37 @@ const styles = { maxWidth: 200 }, title: { - margin: [[24, 0, 32, 0]] + margin: 0, + marginBottom: 42, + textAlign: 'center' }, text: { margin: 0 }, button: { - marginTop: 'auto', - marginBottom: 58 + margin: [[0, 'auto']] }, modalContent: { display: 'flex', flexDirection: 'column', - alignItems: 'center', - padding: [[0, 42]], - flex: 1 + justifyContent: 'space-between', + flex: 1, + padding: [[0, 34, 107, 34]], + '& > div': { + paddingBottom: 72, + '& > h1': { + color: neon, + marginBottom: 12, + marginTop: 30, + textAlign: 'center', + '& > svg': { + verticalAlign: 'bottom', + marginRight: spacer * 1.5, + width: spacer * 3, + height: spacer * 3.25 + } + } + } } } @@ -35,14 +53,21 @@ const WizardSplash = ({ name, onContinue }) => { return (
-

Enable cash-out

-

- You are about to activate cash-out functionality on your {name} machine - which will allow your customers to sell crypto to you. -
- In order to activate cash-out for this machine, please enter the - denominations for the machine. -

+
+

+ + Enable cash-out +

+ {name} +

+ You are about to activate cash-out functionality on your {name}{' '} + machine which will allow your customers to sell crypto to you. +

+

+ In order to activate cash-out for this machine, please enter the + denominations for the machine. +

+
diff --git a/new-lamassu-admin/src/pages/Cashout/WizardStep.js b/new-lamassu-admin/src/pages/Cashout/WizardStep.js index cd59f98b..bf78e2c1 100644 --- a/new-lamassu-admin/src/pages/Cashout/WizardStep.js +++ b/new-lamassu-admin/src/pages/Cashout/WizardStep.js @@ -1,88 +1,125 @@ import { makeStyles } from '@material-ui/core' -import classnames from 'classnames' import { Formik, Form, Field } from 'formik' +import * as R from 'ramda' import React from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Stepper from 'src/components/Stepper' import { Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' -import { Info2, H4, P } from 'src/components/typography' +import { Info2, H4, P, Info1, Label1 } from 'src/components/typography' +import cassetteOne from 'src/styling/icons/cassettes/cashout-cassette-1.svg' +import cassetteTwo from 'src/styling/icons/cassettes/cashout-cassette-2.svg' +import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg' import styles from './WizardStep.styles' const useStyles = makeStyles(styles) const WizardStep = ({ - type, name, step, schema, error, lastStep, onContinue, - display + steps, + fiatCurrency, + options }) => { const classes = useStyles() const label = lastStep ? 'Finish' : 'Next' - const subtitleClass = { - [classes.subtitle]: true, - [classes.error]: error + + const cassetesArtworks = { + 1: cassetteOne, + 2: cassetteTwo } return ( - <> - {name} - - {display &&

Edit {display}

} +
+
+ {name} + +
{!lastStep && (
- -
- +
+ {steps.map( + ({ type, display, component }, idx) => + 1 + idx === step && ( +
+

Edit {display}

+ + Choose bill denomination +
+ 0 ? component : TextInput + } + fullWidth + name={type} + options={options} + valueProp={'code'} + getLabel={R.path(['display'])}> + + {fiatCurrency} + +
+
+ ) + )} + cassette
+ + )} {lastStep && ( - <> +
+ Cashout Bill Count

+ When enabling cash out, your bill count will be automatically set to zero. Make sure you physically put cash inside the cashboxes to allow the machine to dispense it to your users. If you already did, make sure you set the correct cash out bill count for this machine on your Cashboxes tab under Maintenance.

+ + Default Commissions

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

-
+
{error && Failed to save} -
- +
)} - +
) } diff --git a/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js b/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js index d143ab4f..98ad5a03 100644 --- a/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js +++ b/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js @@ -1,4 +1,4 @@ -import { errorColor } from 'src/styling/variables' +import { errorColor, spacer } from 'src/styling/variables' const LABEL_WIDTH = 150 @@ -6,21 +6,65 @@ 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' + }, + suffix: { + paddingLeft: spacer * 2 + }, button: { marginLeft: 'auto' }, submit: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, 24]] + float: 'right' }, picker: { width: LABEL_WIDTH + }, + header: { + display: 'flex', + paddingBottom: 96, + '& div': { + flex: 1 + }, + '& img': { + position: 'relative', + top: -20, + right: 14 + } + }, + content: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + flex: 1, + paddingBottom: 32 + }, + disclaimer: { + display: 'flex', + flex: 1, + flexDirection: 'column', + justifyContent: 'space-between', + '& > p': { + '& > svg': { + float: 'left', + margin: [[-4, 16, 48, 0]] + } + } } } diff --git a/new-lamassu-admin/src/pages/Cashout/helper.js b/new-lamassu-admin/src/pages/Cashout/helper.js index 3b306d92..e1ba0f48 100644 --- a/new-lamassu-admin/src/pages/Cashout/helper.js +++ b/new-lamassu-admin/src/pages/Cashout/helper.js @@ -21,7 +21,6 @@ const getElements = (machines, { fiatCurrency } = {}) => { { name: 'top', header: 'Cassette 1 (Top)', - view: it => `${it} ${fiatCurrency}`, size: 'sm', stripe: true, width: 200, @@ -29,12 +28,12 @@ const getElements = (machines, { fiatCurrency } = {}) => { input: NumberInput, inputProps: { decimalPlaces: 0 - } + }, + suffix: fiatCurrency }, { name: 'bottom', header: 'Cassette 2 (Bottom)', - view: it => `${it} ${fiatCurrency}`, size: 'sm', stripe: true, textAlign: 'right', @@ -42,7 +41,8 @@ const getElements = (machines, { fiatCurrency } = {}) => { input: NumberInput, inputProps: { decimalPlaces: 0 - } + }, + suffix: fiatCurrency }, { name: 'zeroConfLimit', @@ -54,7 +54,8 @@ const getElements = (machines, { fiatCurrency } = {}) => { input: NumberInput, inputProps: { decimalPlaces: 0 - } + }, + suffix: fiatCurrency } ] } diff --git a/new-lamassu-admin/src/styling/icons/cassettes/cashout-cassette-1.svg b/new-lamassu-admin/src/styling/icons/cassettes/cashout-cassette-1.svg new file mode 100644 index 00000000..e0067b7c --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/cassettes/cashout-cassette-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/icons/cassettes/cashout-cassette-2.svg b/new-lamassu-admin/src/styling/icons/cassettes/cashout-cassette-2.svg new file mode 100644 index 00000000..d58ba026 --- /dev/null +++ b/new-lamassu-admin/src/styling/icons/cassettes/cashout-cassette-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/new-lamassu-admin/src/utils/bill-denominations.js b/new-lamassu-admin/src/utils/bill-denominations.js new file mode 100644 index 00000000..44df0190 --- /dev/null +++ b/new-lamassu-admin/src/utils/bill-denominations.js @@ -0,0 +1,189 @@ +const denomiations = { + AUD: { + 5: 130, + 10: 137, + 20: 144, + 50: 151, + 100: 158 + }, + BBD: { + 2: 150, + 5: 150, + 10: 150, + 20: 150, + 50: 150, + 100: 150 + }, + CAD: { + 5: 152, + 10: 152, + 20: 152, + 50: 152, + 100: 152 + }, + CHF: { + 10: 126, + 20: 137, + 50: 148, + 100: 159, + 200: 170, + 1000: 181 + }, + DKK: { + 50: 125, + 100: 135, + 200: 145, + 500: 155, + 1000: 165 + }, + EUR: { + 5: 120, + 10: 127, + 20: 133, + 50: 140, + 100: 147, + 200: 153, + 500: 160 + }, + GBP: { + 5: 135, + 10: 142, + 20: 149, + 50: 156 + }, + HKD: { + 10: 134, + 20: 143, + 50: 148, + 100: 153, + 500: 158, + 1000: 163 + }, + HUF: { + 200: 154, + 500: 154, + 1000: 154, + 2000: 154, + 5000: 154, + 10000: 154, + 20000: 154 + }, + ILS: { + 20: 129, + 50: 136, + 100: 143, + 200: 150 + }, + JMD: { + 50: 145, + 100: 145, + 500: 145, + 1000: 145, + 5000: 145 + }, + JPY: { + 1000: 150, + 2000: 154, + 5000: 156, + 10000: 160 + }, + KZT: { + 200: 126, + 500: 130, + 1000: 134, + 2000: 139, + 5000: 144, + 10000: 155, + 20000: 155 + }, + MXN: { + 20: 120, + 50: 127, + 100: 134, + 200: 141, + 500: 148, + 1000: 155 + }, + MYR: { + 1: 120, + 5: 135, + 10: 140, + 20: 145, + 50: 145, + 100: 150 + }, + NZD: { + 5: 135, + 10: 140, + 20: 145, + 50: 150, + 100: 155 + }, + PHP: { + 20: 160, + 50: 160, + 100: 160, + 200: 160, + 500: 160, + 1000: 160 + }, + PLN: { + 10: 120, + 20: 126, + 50: 132, + 100: 138, + 200: 144, + 500: 150 + }, + SGD: { + 2: 126, + 5: 133, + 10: 141, + 50: 156, + 100: 162, + 1000: 170 + }, + TWD: { + 100: 145, + 200: 150, + 500: 155, + 1000: 160, + 2000: 165 + }, + UAH: { + 1: 118, + 2: 118, + 5: 118, + 10: 124, + 20: 130, + 50: 136, + 100: 142, + 200: 148, + 500: 154 + }, + USD: { + 1: 156, + 5: 156, + 10: 156, + 20: 156, + 50: 156, + 100: 156 + }, + VND: { + 10000: 132, + 20000: 136, + 50000: 140, + 100000: 144, + 200000: 148, + 500000: 152 + }, + ZAR: { + 10: 128, + 20: 134, + 50: 140, + 100: 146, + 200: 152 + } +} + +export default denomiations