\n
\n )}\n {InverseIcon && open && (\n \n
\n )}\n \n \n
\n \n \n )\n }\n)\n\nexport default IDButton\n","import { makeStyles, IconButton as IconB } from '@material-ui/core'\nimport React from 'react'\n\nimport { comet } from 'src/styling/variables'\n\nconst styles = {\n label: ({ size }) => ({\n width: size,\n height: size\n }),\n root: {\n '& svg': {\n flex: 1\n },\n '&:hover': {\n backgroundColor: 'inherit'\n },\n '&:hover rect': {\n stroke: comet\n },\n '&:hover polygon': {\n stroke: comet\n },\n '&:hover path': {\n stroke: comet\n }\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst IconButton = ({ size, children, onClick, ...props }) => {\n const classes = useStyles({ size })\n return (\n {children}
\n \n
\n )}\n {InverseIcon && (\n \n {children}\n
\n )\n}\n\nfunction H2({ children, noMargin, className, ...props }) {\n const classes = useStyles()\n const classNames = {\n [classes.h2]: true,\n [classes.noMargin]: noMargin,\n [className]: !!className\n }\n\n return (\n\n {children}\n
\n )\n}\n\nfunction H3({ children, noMargin, className, ...props }) {\n const classes = useStyles()\n const classNames = {\n [classes.h3]: true,\n [classes.noMargin]: noMargin,\n [className]: !!className\n }\n\n return (\n\n {children}\n
\n )\n}\n\nfunction H4({ children, noMargin, className, ...props }) {\n const classes = useStyles()\n const classNames = {\n [classes.h4]: true,\n [classes.noMargin]: noMargin,\n [className]: !!className\n }\n\n return (\n\n {children}\n
\n )\n}\n\nfunction H5({ children, noMargin, className, ...props }) {\n const classes = useStyles()\n const classNames = {\n [classes.h5]: true,\n [classes.noMargin]: noMargin,\n [className]: !!className\n }\n\n return (\n\n {children}\n
\n )\n}\n\nconst P = pBuilder('p')\nconst Info1 = pBuilder('info1')\nconst Info2 = pBuilder('info2')\nconst Info3 = pBuilder('info3')\nconst Mono = pBuilder('mono')\nconst TL1 = pBuilder('tl1')\nconst TL2 = pBuilder('tl2')\nconst Label1 = pBuilder('label1')\nconst Label2 = pBuilder('label2')\nconst Label3 = pBuilder('label3')\n\nfunction pBuilder(elementClass) {\n return ({ inline, noMargin, className, children, ...props }) => {\n const classes = useStyles()\n const classNames = {\n [className]: !!className,\n [classes[elementClass]]: elementClass,\n [classes.inline]: inline,\n [classes.noMargin]: noMargin\n }\n return (\n\n {children}\n
\n )\n }\n}\n\nexport {\n H1,\n H2,\n H3,\n H4,\n H5,\n TL1,\n TL2,\n P,\n Info1,\n Info2,\n Info3,\n Mono,\n Label1,\n Label2,\n Label3\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport React, { memo } from 'react'\n\nimport { spacer } from 'src/styling/variables'\n\nimport { H1 } from './typography'\n\nconst useStyles = makeStyles({\n title: {\n marginTop: spacer * 3,\n marginBottom: spacer * 3\n }\n})\n\nconst Title = memo(({ children }) => {\n const classes = useStyles()\n return{children}
\n})\n\nexport default Title\n","import {\n inputFontSize,\n inputFontSizeLg,\n inputFontSizeSm,\n inputFontWeightBold\n} from './variables'\n\nconst respondTo = breakpoint =>\n `@media only screen and (max-width: ${breakpoint})`\n\nconst bySize = size => {\n switch (size) {\n case 'sm':\n return { fontSize: inputFontSizeSm }\n case 'lg':\n return { fontSize: inputFontSizeLg, fontWeight: inputFontWeightBold }\n default:\n return { fontSize: inputFontSize }\n }\n}\n\nconst bold = {\n fontWeight: inputFontWeightBold\n}\n\nexport { respondTo, bySize, bold }\n","import { bySize, bold } from 'src/styling/helpers'\nimport { secondaryColor } from 'src/styling/variables'\n\nexport default {\n size: ({ size }) => ({\n marginTop: size === 'lg' ? 0 : 2,\n ...bySize(size)\n }),\n bold,\n root: ({ width, textAlign }) => ({\n width,\n '& input': {\n textAlign\n }\n }),\n underline: {\n '&:before': {\n borderBottomColor: secondaryColor\n },\n '&:hover:not(.Mui-disabled)::before': {\n borderBottomColor: secondaryColor\n }\n }\n}\n","import { makeStyles } from '@material-ui/core'\nimport TextField from '@material-ui/core/TextField'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { memo } from 'react'\n\nimport styles from './TextInput.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst TextInput = memo(\n ({\n name,\n onChange,\n onBlur,\n value,\n error,\n suffix,\n textAlign,\n width,\n // lg or sm\n size,\n bold,\n className,\n InputProps,\n ...props\n }) => {\n const classes = useStyles({ textAlign, width, size })\n const filled = !error && !R.isNil(value) && !R.isEmpty(value)\n\n const inputClasses = {\n [classes.bold]: bold\n }\n\n return (\n\n {data &&\n data.map((it, idx) => (\n onClick(it)}>\n {itemRender ? itemRender(it, isSelected(it)) : displayName(it)}\n
\n ))}\n {children}\n \n )\n}\n\nexport default Sidebar\n\nconst Stepper = ({ step, it, idx, steps }) => {\n const classes = useStyles()\n const active = step === idx\n const past = idx < step\n const future = idx > step\n\n return (\n \n \n {it.label}\n \n {active &&
\n )}\n \n )\n}\n\nexport { Stepper }\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"style\", {\n type: \"text/css\"\n}, \"\\n\\t.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1B2559;}\\n\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"color_x2F_primary_x2F_zodiac\",\n transform: \"translate(-0.000000, 0.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Mask\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n id: \"path-1_1_\",\n className: \"st0\",\n d: \"M11.1,9l6.5,6.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.2-1.1-0.4 L9,11.1l-6.5,6.5C2.3,17.8,1.9,18,1.5,18c-0.4,0-0.8-0.2-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1L6.9,9L0.4,2.5C-0.1,2-0.1,1,0.4,0.4 C1-0.1,2-0.1,2.5,0.4L9,6.9l6.5-6.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L11.1,9z\"\n})));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Layer_1\",\n x: \"0px\",\n y: \"0px\",\n viewBox: \"0 0 18 18\",\n style: {\n enableBackground: \"new 0 0 18 18\"\n },\n xmlSpace: \"preserve\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3, _ref4);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.5547e32c.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Symbols\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/warning-icon/comet\"\n}, /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle\",\n stroke: \"#5F668A\",\n strokeWidth: 2,\n x: 1,\n y: 1,\n width: 22,\n height: 22,\n rx: 11\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.2971429,14.4857143 L11.1085714,5.82857143 L13.3714286,5.82857143 L13.2,14.4857143 L11.2971429,14.4857143 Z M11.1942857,18 L11.1942857,15.9771429 L13.3028571,15.9771429 L13.3028571,18 L11.1942857,18 Z\",\n id: \"!\",\n fill: \"#5F668A\",\n fillRule: \"nonzero\"\n})));\n\nfunction SvgComet(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"24px\",\n height: \"24px\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgComet);\nexport default __webpack_public_path__ + \"static/media/comet.9dc291f2.svg\";\nexport { ForwardRef as ReactComponent };","import typographyStyles from 'src/components/typography/styles'\nimport {\n placeholderColor,\n backgroundColor,\n primaryColor,\n mainWidth\n} from 'src/styling/variables'\n\nconst { tl2, p } = typographyStyles\n\nconst fill = '100%'\nconst flexDirection = 'column'\n\nconst styles = {\n dialog: {\n backgroundColor,\n width: fill,\n minHeight: fill,\n display: 'flex',\n flexDirection,\n padding: 0\n },\n wrapper: {\n width: mainWidth,\n height: fill,\n margin: '0 auto',\n flex: 1,\n display: 'flex',\n flexDirection\n },\n contentDiv: {\n display: 'flex',\n flex: 1,\n flexDirection: 'row'\n },\n headerDiv: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center'\n },\n contentWrapper: {\n marginLeft: 48\n },\n button: {\n marginTop: 64\n },\n nameTitle: {\n marginTop: 16,\n marginBottom: 25\n },\n qrTitle: {\n marginTop: 12,\n marginBottom: 40\n },\n qrCodeWrapper: {\n display: 'flex'\n },\n qrTextWrapper: {\n width: 381,\n marginLeft: 80,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center'\n },\n qrTextIcon: {\n marginRight: 16\n },\n qrText: {\n marginTop: 0\n },\n item: {\n position: 'relative',\n margin: '12px 0 12px 0',\n display: 'flex'\n },\n itemText: {\n extend: p,\n color: placeholderColor,\n marginRight: 24\n },\n itemTextActive: {\n extend: tl2,\n color: primaryColor\n },\n itemTextPast: {\n color: primaryColor\n },\n stepperPath: {\n position: 'absolute',\n height: 25,\n width: 1,\n border: [[1, 'solid', placeholderColor]],\n right: 8,\n top: 18\n },\n stepperPast: {\n border: [[1, 'solid', primaryColor]]\n }\n}\n\nexport default styles\n","import { useMutation, useQuery } from '@apollo/react-hooks'\nimport { Dialog, DialogContent, SvgIcon, IconButton } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport { Form, Formik, FastField } from 'formik'\nimport gql from 'graphql-tag'\nimport QRCode from 'qrcode.react'\nimport * as R from 'ramda'\nimport React, { memo, useState } from 'react'\nimport * as Yup from 'yup'\n\nimport Title from 'src/components/Title'\nimport { Button } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\nimport Sidebar from 'src/components/layout/Sidebar'\nimport { Info2, P } from 'src/components/typography'\nimport { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'\nimport { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'\nimport { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'\nimport { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'\nimport { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'\nimport { primaryColor } from 'src/styling/variables'\n\nimport styles from './styles'\n\nconst SAVE_CONFIG = gql`\n mutation createPairingTotem($name: String!) {\n createPairingTotem(name: $name)\n }\n`\nconst GET_MACHINES = gql`\n {\n machines {\n name\n deviceId\n }\n }\n`\n\nconst useStyles = makeStyles(styles)\n\nconst getSize = R.compose(R.length, R.pathOr([], ['machines']))\n\nconst QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => {\n const { data } = useQuery(GET_MACHINES, { pollInterval: 10000 })\n\n const addedMachine = data?.machines?.find(m => m.name === name)\n if (getSize(data) > count && addedMachine) onPaired(addedMachine)\n\n return (\n <>\n \n
\n \n )\n}\n\nconst initialValues = {\n name: ''\n}\n\nconst validationSchema = Yup.object().shape({\n name: Yup.string()\n .required()\n .max(50)\n})\n\nconst MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => {\n const [register] = useMutation(SAVE_CONFIG, {\n onCompleted: ({ createPairingTotem }) => {\n if (process.env.NODE_ENV === 'development') {\n console.log(`totem: \"${createPairingTotem}\" `)\n }\n setQrCode(createPairingTotem)\n nextStep()\n },\n onError: e => console.log(e)\n })\n\n return (\n <>\n \n
\n \n
\n \n
\n \n
\n \n To pair the machine you need scan the QR code with your machine.\n To do this either snap a picture of this QR code or download it\n through the button above and scan it with the scanning bay on your\n machine.\n
\n\n \n {it.label}\n \n {active &&
\n )}\n \n )\n}\n\nconst AddMachine = memo(({ close, onPaired }) => {\n const classes = useStyles()\n const { data } = useQuery(GET_MACHINES)\n const [qrCode, setQrCode] = useState('')\n const [name, setName] = useState('')\n const [step, setStep] = useState(0)\n const count = getSize(data)\n\n const Component = steps[step].component\n\n return (\n \n \n \n \n \n
\n )\n})\n\nexport default AddMachine\n","import AddMachine from './AddMachine'\n\nexport default AddMachine\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M17.8413132,12.8764646 C17.8413132,12.8764646 16.6555879,12.5091919 15.661533,12.2855556 C15.661533,12.2855556 15.3477198,10.3246465 14.8939121,8.23646465 C14.8939121,8.23646465 15.1560495,8.21373737 15.3383242,8.8710101 L16.0223242,12.0219192 C16.0223242,12.0219192 17.2343571,12.2991919 18.1795549,12.6537374 L17.8413132,12.8764646 Z M15.2603407,6.10282828 L15.5328132,5.80555556 C16.0627253,5.87828283 16.3483516,6.02828283 16.3483516,6.02828283 L16.291978,6.11191919 L16.3972088,6.9310101 C16.2440604,6.93646465 16.0091703,7.05919192 16.0091703,7.05919192 L15.8315934,6.95010101 L15.8315934,6.38282828 C15.3026209,6.29919192 15.2556429,6.21828283 15.2556429,6.21828283 L15.2603407,6.10282828 Z M12.4557527,18.2873737 C11.2831813,18.4964646 9.84565385,18.2237374 9.84565385,18.2237374 L9.89732967,17.9991919 C9.89732967,17.9991919 11.6496099,18.1955556 12.6248736,17.8973737 C12.5553462,18.0628283 12.5356154,18.1137374 12.4557527,18.2873737 L12.4557527,18.2873737 Z M9.18984066,14.5464646 C8.379,15.1364646 7.56064286,15.6791919 7.00442308,16.1091919 C6.9705989,16.6955556 6.91516484,17.6464646 6.91516484,17.6464646 L5.46448352,18.5182828 L5.22207692,18.3737374 C5.27845055,17.9219192 5.34891758,17.5882828 5.34891758,17.5882828 L5.55186264,17.4410101 C5.50676374,17.7282828 5.48515385,18.1346465 5.48515385,18.1346465 L6.5928956,17.440101 C6.63705495,16.7019192 6.72443407,15.960101 6.72443407,15.960101 C6.9705989,15.7373737 8.73697253,14.5237374 10.0100803,13.6864646 C10.0100803,13.6864646 10.018533,13.9437374 9.18984066,14.5464646 L9.18984066,14.5464646 Z M14.977533,0.195555556 C15.2612802,0.167373737 15.5065055,0.184646465 15.7103901,0.228282828 L15.7103901,0.228282828 L15.8813901,0.697373737 L16.1003077,0.361919192 C16.2694286,0.447373737 16.3746593,0.547373737 16.4056648,0.624646465 C16.4056648,0.624646465 16.3615055,0.909191919 16.4319725,1.36464646 C16.5005604,1.80373737 16.6988077,2.78191919 16.6988077,2.78191919 C16.9740989,3.00646465 17.2850934,3.51282828 17.2850934,3.51282828 C17.4758242,4.41737374 17.4645495,5.04919192 17.4636099,5.1210101 C16.6734396,4.68646465 15.6173736,4.58555556 15.6173736,4.58555556 L15.6173736,4.58555556 L15.2481264,4.90828283 C15.9753462,5.00828283 16.8792033,5.26555556 17.1122143,5.44555556 C17.2484505,5.74737374 17.3386484,6.22828283 17.3386484,6.22828283 L17.3386484,6.22828283 L17.0445659,6.58919192 L17.3198571,6.8810101 C17.3386484,7.22464646 17.2183846,7.56919192 17.2183846,7.56919192 C17.7905769,7.93010101 17.9512418,8.79373737 18.3101538,10.250101 C18.6700055,11.7064646 18.9903956,12.9055556 18.9903956,12.9055556 L18.9903956,12.9055556 L18.4567253,13.2019192 C19.1623352,15.7282828 18.444511,17.7391919 17.5378352,19.0664646 C16.6320989,20.3946465 16.0862143,21.7137374 16.1031264,22.8910101 L16.1031264,22.8910101 L16.5475385,23.2346465 L16.7749121,23.9491919 L14.3048077,23.9491919 L14.293533,23.2728283 C14.2925934,21.5619192 14.9230385,20.1328283 14.9230385,20.1328283 C15.2857088,20.0473737 15.6596538,19.7628283 15.6596538,19.7628283 C15.0733681,19.8828283 14.3414505,19.7964646 14.3414505,19.7964646 C14.8676044,18.8537374 15.0292088,18.1773737 15.0292088,18.1773737 L15.0292088,18.1773737 L14.7811648,18.1228283 C14.6956648,18.310101 14.6073462,18.4937374 14.5133901,18.6710101 C13.8754286,19.8864646 13.1735769,20.6628283 12.7554725,22.4055556 L12.7554725,22.4055556 L13.1933077,22.7455556 L13.6987912,23.9491919 L10.8509835,23.9491919 C10.8340714,21.8246465 11.495522,20.2273737 11.7341703,19.7628283 C10.2233571,19.9264646 8.42128022,19.1782828 6.99314835,19.4664646 C6.60041209,21.9473737 4.59257143,22.4355556 3.65019231,22.300101 L3.65019231,22.300101 L2.97652747,23.4146465 L3.58724176,23.9491919 L1.33135714,23.9491919 C1.32008242,23.8546465 1.2918956,23.7537374 1.22988462,23.6591919 C1.22988462,23.6591919 1.97401648,22.5882828 2.48231868,21.150101 C2.89008791,21.3255556 3.75166484,20.9928283 3.78736813,20.1055556 C3.82401099,19.2191919 3.67086264,17.8419192 4.46854945,16.7891919 C5.2652967,15.7355556 6.12687363,15.1655556 7.25152747,14.3328283 C7.98250549,13.7910101 9.22084615,12.8755556 9.99974176,12.3010101 L9.99974176,12.3010101 L9.61546154,12.3864646 L6.81087363,14.6491919 L5.82997253,14.6491919 L8.66368681,12.1164646 L8.29725824,12.1091919 L5.33576374,14.6491919 L4.34170879,14.6491919 L7.27313736,11.720101 L6.9208022,11.7173737 L3.88038462,14.6491919 L2.86565934,14.6491919 L5.8093022,11.3037374 L5.46918132,11.3055556 L2.43534066,14.6491919 L1.36706044,14.6491919 L4.22614286,10.8528283 L3.89635714,10.8573737 L0.963989011,14.6491919 L0,14.6491919 C0,14.6491919 4.11809341,8.22464646 4.92893407,7.00737374 C5.73883516,5.79010101 6.6192033,4.62282828 8.06894505,4.38464646 C9.53465934,4.14282828 10.5343516,4.46646465 11.2502967,5.63373737 C11.636456,6.2610101 12.1034176,6.97828283 12.4698462,7.55919192 C12.0968407,8.1510101 11.6298791,8.6110101 11.5857198,9.32282828 C11.534044,10.1419192 12.0921429,10.6373737 12.6558791,10.6773737 C12.2321374,10.5282828 11.8976538,10.0337374 12.0489231,9.37646465 C12.2058297,8.69737374 12.7554725,8.35191919 13.1726374,7.80282828 C13.5315495,7.32828283 13.5371868,6.63282828 13.5108791,6.4010101 C13.4836319,6.16919192 13.2167967,5.98828283 13.2167967,5.98828283 C13.2167967,5.98828283 13.2252527,5.52373737 13.2167967,5.01646465 C13.2083407,4.51010101 13.4300769,4.21828283 13.4300769,4.21828283 C13.4300769,4.21828283 13.4216209,3.4610101 13.3943736,2.57646465 C13.3671264,1.72555556 13.2863242,1.46828283 13.205522,1.35464646 C13.205522,1.35464646 13.2694121,1.10919192 13.5099396,0.844646465 L13.5099396,0.844646465 L13.7542253,1.06282828 L13.8284505,0.571919192 C13.9825385,0.469191919 14.1723297,0.375555556 14.4072198,0.307373737 C14.4325879,0.30010101 14.4570165,0.294646465 14.4823846,0.288282828 L14.4823846,0.288282828 L14.7896209,0.644646465 Z M7.71628243,19.8937938 C8.32897736,19.8402566 9.02386307,19.9393405 9.75797621,20.0432188 L9.75797621,20.0432188 L9.86538462,20.058401 C9.7449004,20.8103202 9.02106112,21.7691969 7.79193531,22.0896215 L7.79193531,22.0896215 L9.01358923,23.5151515 L7.36136769,23.5151515 C7.15589073,23.2226941 6.50396838,22.32135 6.16586538,21.9681638 C6.72065317,21.6525335 7.42954868,21.0388524 7.71628243,19.8937938 Z\",\n id: \"path-1\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Symbols\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"nav-/-primary-/-1440\",\n transform: \"translate(-128.000000, -14.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/lamassu-logo\",\n transform: \"translate(128.000000, 14.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"color/amaz/default\"\n}, /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-2\",\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-1\"\n})), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Mask\",\n fill: \"#16D6D3\",\n xlinkHref: \"#path-1\"\n})))));\n\nfunction SvgLogo(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"19px\",\n height: \"24px\",\n viewBox: \"0 0 19 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3, _ref4);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgLogo);\nexport default __webpack_public_path__ + \"static/media/logo.8ee79eab.svg\";\nexport { ForwardRef as ReactComponent };","import typographyStyles from 'src/components/typography/styles'\nimport {\n version,\n mainWidth,\n spacer,\n white,\n primaryColor,\n placeholderColor,\n subheaderColor,\n fontColor\n} from 'src/styling/variables'\n\nconst { tl2, p } = typographyStyles\n\nlet headerHeight = spacer * 7\nlet subheaderHeight = spacer * 5\n\nif (version === 8) {\n headerHeight = spacer * 8\n subheaderHeight = spacer * 7\n}\n\nexport default {\n header: {\n backgroundColor: primaryColor,\n color: white,\n height: headerHeight,\n display: 'flex'\n },\n content: {\n maxWidth: mainWidth,\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n margin: '0 auto'\n },\n nav: {\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between'\n },\n ul: {\n display: 'flex',\n paddingLeft: spacer * 4.5,\n height: spacer * 7,\n margin: 0\n },\n li: {\n // extend: tl2,\n // height: spacer * 7,\n listStyle: 'none',\n color: white,\n margin: [[spacer * 2.5, spacer * 2.5, 0, spacer * 2.5]],\n '&:hover': {\n color: white\n },\n '&:hover::after': {\n width: '50%',\n marginLeft: '-25%'\n },\n position: 'relative',\n '&:after': {\n content: '\"\"',\n display: 'block',\n background: white,\n width: 0,\n height: 4,\n left: '50%',\n marginLeft: 0,\n bottom: -8,\n position: 'absolute',\n borderRadius: 1000,\n transition: [['all', '0.2s', 'cubic-bezier(0.95, 0.1, 0.45, 0.94)']]\n }\n },\n link: {\n extend: p,\n textDecoration: 'none',\n border: 'none',\n color: white,\n backgroundColor: 'transparent'\n // '&:hover': {\n // color: white\n // },\n // '&:hover::after': {\n // width: '50%',\n // marginLeft: '-25%'\n // },\n // position: 'relative',\n // '&:after': {\n // content: '\"\"',\n // display: 'block',\n // background: white,\n // width: 0,\n // height: 4,\n // left: '50%',\n // marginLeft: 0,\n // bottom: -8,\n // position: 'absolute',\n // borderRadius: 1000,\n // transition: [['all', '0.2s', 'cubic-bezier(0.95, 0.1, 0.45, 0.94)']]\n // }\n },\n forceSize: {\n display: 'inline-block',\n textAlign: 'center',\n '&:after': {\n display: 'block',\n content: 'attr(forcesize)',\n fontWeight: 700,\n height: 0,\n overflow: 'hidden',\n visibility: 'hidden'\n }\n },\n activeLink: {\n color: white,\n '& li::after': {\n width: '50%',\n marginLeft: '-25%'\n }\n },\n addMachine: {\n marginLeft: 'auto'\n },\n subheader: {\n backgroundColor: subheaderColor,\n color: white,\n height: subheaderHeight,\n display: 'flex'\n },\n subheaderUl: {\n display: 'flex',\n paddingLeft: 0\n },\n subheaderLi: {\n extend: tl2,\n display: 'flex',\n alignItems: 'center',\n height: spacer * 3,\n listStyle: 'none',\n padding: [[0, spacer * 2.5]],\n '&:first-child': {\n paddingLeft: 0\n }\n },\n subheaderLink: {\n extend: p,\n textDecoration: 'none',\n border: 'none',\n color: placeholderColor\n },\n activeSubheaderLink: {\n extend: tl2,\n color: fontColor\n },\n white: {\n color: white\n },\n logo: {\n display: 'flex',\n alignItems: 'center',\n '& > svg': {\n marginRight: 16\n }\n }\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo, useState } from 'react'\nimport { NavLink, useHistory } from 'react-router-dom'\n\nimport { Link } from 'src/components/buttons'\nimport { H4 } from 'src/components/typography'\nimport AddMachine from 'src/pages/AddMachine'\nimport { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'\n\nimport styles from './Header.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst Subheader = ({ item, classes }) => {\n return (\n \n
\n \n Add Machine \n \n \n \n \n
\n \n \n {steps.map((it, idx) => renderStepper(step, it, idx, classes))}\n \n
\n \n setStep(1)}\n count={count}\n onPaired={onPaired}\n qrCode={qrCode}\n setQrCode={setQrCode}\n name={name}\n setName={setName}\n />\n
\n \n
\n )\n}\n\nconst Header = memo(({ tree }) => {\n const [open, setOpen] = useState(false)\n const [active, setActive] = useState()\n\n const history = useHistory()\n const classes = useStyles()\n\n const onPaired = machine => {\n setOpen(false)\n history.push('/maintenance/machine-status', { id: machine.deviceId })\n }\n\n return (\n \n \n
\n \n
\n {active && active.children && (\n \n
\n \n
\n \n Lamassu Admin
\n\n \n \n
\n {children}
\n \n \n {children}\n
\n)\n\nconst THead = ({ children, className }) => {\n const classes = useStyles()\n return {children}
\n}\n\nconst TDoubleLevelHead = ({ children, className }) => {\n const classes = useStyles()\n\n return (\n \n {children}\n
\n )\n}\n\nconst TBody = ({ children, className }) => {\n return {children}
\n}\n\nconst Td = ({\n children,\n header,\n className,\n width = 100,\n size,\n bold,\n textAlign,\n action\n}) => {\n const classes = useStyles({ textAlign, width, size })\n const classNames = {\n [classes.td]: true,\n [classes.tdHeader]: header,\n [classes.actionCol]: action,\n [classes.size]: !header,\n [classes.bold]: !header && bold\n }\n\n return {children}
\n}\n\nconst Th = ({ children, ...props }) => {\n return (\n \n
\n )\n}\n\nconst Tr = ({ onClick, error, errorMessage, children, className, size }) => {\n const classes = useStyles({ size })\n const cardClasses = { root: classes.cardContentRoot }\n const classNames = {\n [classes.tr]: true,\n [classes.trError]: error,\n [classes.card]: true,\n className\n }\n\n return (\n <>\n {title}
\n {children}
\n {children}
\n {error && {errorMessage}
}\n \n \n \n
\n )\n}\n\nexport default Select\n","import Chip from '@material-ui/core/Chip'\nimport { withStyles } from '@material-ui/core/styles'\nimport React, { memo } from 'react'\n\nimport {\n fontColor,\n inputFontWeight,\n subheaderColor,\n smallestFontSize,\n inputFontFamily\n} from 'src/styling/variables'\n\nconst styles = theme => ({\n root: {\n backgroundColor: subheaderColor,\n borderRadius: 4,\n margin: theme.spacing(0.5, 0.25),\n height: 18\n },\n label: {\n fontSize: smallestFontSize,\n color: fontColor,\n fontWeight: inputFontWeight,\n fontFamily: inputFontFamily,\n paddingRight: 4,\n paddingLeft: 4\n }\n})\n\nconst LsChip = memo(({ classes, ...props }) => (\n - \n {isOpen &&\n items.map((item, index) => (\n
- \n {startCase(item)}\n \n ))}\n
\n
\n )\n}\n\n// https://support.lamassu.is/hc/en-us/articles/360025595552-Installing-the-Sintra-Forte\n// Sintra and Sintra Forte can have up to 500 notes per cashOut box and up to 1000 per cashIn box\nconst CashIn = ({ capacity = 1000, notes = 0, total = 0 }) => {\n const percent = (100 * notes) / capacity\n const classes = gridClasses()\n return (\n <>\n \n {percent <= threshold && {percent.toFixed(0)}% }\n
\n \n {percent > threshold && {percent.toFixed(0)}% }\n
\n \n
\n \n )\n}\n\nconst CashInFormik = ({\n capacity = 1000,\n onEmpty,\n field: {\n value: { notes, deviceId }\n },\n form: { setFieldValue }\n}) => {\n const classes = gridClasses()\n\n return (\n <>\n \n
\n \n
\n \n {notes} notes \n {total} \n
\n \n
\n \n )\n}\n\nconst CashOut = ({\n capacity = 500,\n denomination = 0,\n currency,\n notes,\n className\n}) => {\n const percent = (100 * notes) / capacity\n const classes = gridClasses()\n return (\n <>\n \n
\n \n
\n \n {\n onEmpty({\n variables: {\n deviceId,\n action: 'emptyCashInBills'\n }\n }).then(() => setFieldValue('cashin.notes', 0))\n }}\n className={classes.link}\n color={'primary'}>\n Empty\n \n
\n \n
\n \n )\n}\n\nconst CashOutFormik = ({ capacity = 500, ...props }) => {\n const {\n name,\n onChange,\n onBlur,\n value: { notes }\n } = props.field\n const { touched, errors } = props.form\n\n const error = !!(touched[name] && errors[name])\n\n const percent = (100 * notes) / capacity\n const classes = gridClasses()\n\n return (\n <>\n \n
\n \n
\n \n {notes} \n
\n \n \n {notes * denomination} {currency.code}\n \n
\n \n
\n \n )\n}\n\nexport { Cashbox, CashIn, CashInFormik, CashOut, CashOutFormik }\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"path\", {\n id: \"a\",\n d: \"M0 0h22v22H0z\"\n}));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"mask\", {\n id: \"b\",\n fill: \"#fff\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#a\"\n})), /*#__PURE__*/React.createElement(\"path\", {\n stroke: \"#9B9B9B\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n mask: \"url(#b)\",\n d: \"M9 9v9M13 9v9\"\n}), /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#b)\",\n stroke: \"#9B9B9B\",\n strokeLinecap: \"round\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"path\", {\n strokeLinejoin: \"round\",\n d: \"M3 6l2 15h12l2-15\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1 5h20M14 4a3 3 0 10-6 0\"\n})));\n\nfunction SvgDisabled(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 22,\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgDisabled);\nexport default __webpack_public_path__ + \"static/media/disabled.347e2b5e.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/delete/enabled\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\"\n}, /*#__PURE__*/React.createElement(\"line\", {\n x1: 9,\n y1: 9,\n x2: 9,\n y2: 18,\n id: \"Stroke-1\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 13,\n y1: 9,\n x2: 13,\n y2: 18,\n id: \"Stroke-2\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n strokeLinejoin: \"round\",\n points: \"3 6 5 21 17 21 19 6\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 1,\n y1: 5,\n x2: 21,\n y2: 5,\n id: \"Stroke-5\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14,4 C14,2.343 12.657,1 11,1 C9.343,1 8,2.343 8,4\",\n id: \"Stroke-7\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}));\n\nfunction SvgEnabled(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"22px\",\n viewBox: \"0 0 22 22\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgEnabled);\nexport default __webpack_public_path__ + \"static/media/enabled.a058fdfc.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/edit/disabled\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1,18 L1,18 C1,19.657 2.343,21 4,21 L18,21 C19.657,21 21,19.657 21,18\",\n id: \"Stroke-1\",\n stroke: \"#9B9B9B\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-3\",\n stroke: \"#9B9B9B\",\n strokeWidth: 2,\n points: \"6 12 17 1 21 5 10 16 6 16\"\n}));\n\nfunction SvgDisabled(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"22px\",\n viewBox: \"0 0 22 22\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgDisabled);\nexport default __webpack_public_path__ + \"static/media/disabled.aede2073.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/edit/enabled\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1,18 L1,18 C1,19.657 2.343,21 4,21 L18,21 C19.657,21 21,19.657 21,18\",\n id: \"Stroke-1\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-3\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n points: \"6 12 17 1 21 5 10 16 6 16\"\n}));\n\nfunction SvgEnabled(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"22px\",\n viewBox: \"0 0 22 22\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgEnabled);\nexport default __webpack_public_path__ + \"static/media/enabled.5aae4510.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"pattern\", {\n id: \"pattern_68JiZ\",\n patternUnits: \"userSpaceOnUse\",\n width: 5.5,\n height: 5.5,\n patternTransform: \"rotate(45)\"\n}, /*#__PURE__*/React.createElement(\"line\", {\n x1: 0,\n y: 0,\n x2: 0,\n y2: 5.5,\n stroke: \"#DBDFED\",\n strokeWidth: 3\n})));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"rect\", {\n width: \"100%\",\n height: \"100%\",\n fill: \"url(#pattern_68JiZ)\",\n opacity: 1\n});\n\nfunction SvgStripes(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"100%\",\n height: \"36px\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, \"{' '}\\n \", _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgStripes);\nexport default __webpack_public_path__ + \"static/media/stripes.876e4081.svg\";\nexport { ForwardRef as ReactComponent };","import { bySize, bold } from 'src/styling/helpers'\n\nexport default {\n saveButton: {\n marginRight: 20\n },\n lastOfGroup: {\n marginBottom: 24\n },\n extraPadding: {\n paddingLeft: 35,\n paddingRight: 30\n },\n extraPaddingRight: {\n paddingRight: 39\n },\n withSuffix: ({ textAlign }) => {\n const justifyContent = textAlign === 'right' ? 'end' : textAlign\n return {\n display: 'flex',\n alignItems: 'baseline',\n justifyContent\n }\n },\n suffix: {\n marginLeft: 7\n },\n size: ({ size }) => bySize(size),\n bold\n}\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { Field, useFormikContext } from 'formik'\nimport * as R from 'ramda'\nimport React, { useContext } from 'react'\n\nimport { Link, IconButton } from 'src/components/buttons'\nimport { Td, Tr } from 'src/components/fake-table/Table'\nimport { Switch } from 'src/components/inputs'\nimport { TL2 } from 'src/components/typography'\nimport { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'\nimport { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'\nimport { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'\nimport { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'\n\nimport TableCtx from './Context'\nimport styles from './Row.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst ActionCol = ({ disabled, editing }) => {\n const classes = useStyles()\n const { values, submitForm, resetForm } = useFormikContext()\n const {\n editWidth,\n onEdit,\n enableEdit,\n enableDelete,\n disableRowEdit,\n onDelete,\n deleteWidth,\n enableToggle,\n onToggle,\n toggleWidth,\n forceAdd,\n clearError,\n actionColSize\n } = useContext(TableCtx)\n\n const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))\n const cancel = () => {\n clearError()\n resetForm()\n }\n\n return (\n <>\n {editing && (\n \n
\n \n
\n \n
\n \n {showButtonOnEmpty && canAdd && (\n {createText} \n )}\n {showTable && (\n <>\n {(title || enableCreate) && (\n \n
\n \n )}\n
\n \n {title && titleLg && (\n {title} \n )}\n {title && !titleLg && (\n {title} \n )}\n {enableCreate && canAdd && (\n \n {createText}\n \n )}\n
\n )}\n \n {children} \n
\n )\n}\n\nexport default ErrorMessage\n","import { makeStyles, Box } from '@material-ui/core'\nimport classnames from 'classnames'\nimport React from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Title from 'src/components/Title'\nimport { Label1 } from 'src/components/typography'\n\nimport styles from './TitleSection.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst TitleSection = ({ className, title, error, labels, children }) => {\n const classes = useStyles()\n return (\n \n \n {(labels ?? []).map(({ icon, label }, idx) => (\n \n {label} \n \n ))}\n \n {children}\n
\n )\n}\n\nexport default TitleSection\n","export default {\n titleWrapper: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'row'\n },\n titleAndButtonsContainer: {\n display: 'flex'\n },\n error: {\n marginLeft: 12\n },\n icon: {\n marginRight: 6\n },\n label: {\n marginRight: 24\n }\n}\n","import { makeStyles, Modal as MaterialModal, Paper } from '@material-ui/core'\nimport classnames from 'classnames'\nimport React from 'react'\n\nimport { IconButton } from 'src/components/buttons'\nimport { H1, H4 } from 'src/components/typography'\nimport { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'\n\nconst styles = {\n modal: {\n display: 'flex',\n justifyContent: 'center',\n flexDirection: 'column',\n alignItems: 'center'\n },\n wrapper: ({ width, height }) => ({\n width,\n height,\n display: 'flex',\n flexDirection: 'column',\n minHeight: height ?? 400,\n maxHeight: '90vh',\n overflowY: 'auto',\n borderRadius: 8,\n outline: 0\n }),\n infoPanelWrapper: ({ width, infoPanelHeight }) => ({\n width,\n height: infoPanelHeight,\n marginTop: 16,\n display: 'flex',\n flexDirection: 'column',\n minHeight: infoPanelHeight ?? 200,\n maxHeight: '90vh',\n overflowY: 'auto',\n borderRadius: 8,\n outline: 0\n }),\n panelContent: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n padding: [[0, 24]]\n },\n content: ({ small, xl }) => ({\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n padding: xl ? [[0, 60 + 28]] : small ? [[0, 16]] : [[0, 32]]\n }),\n button: ({ small, xl }) => ({\n padding: [[0, 0, xl ? 26 : 0, 0]],\n margin: xl\n ? [[0, 0, 'auto', 'auto']]\n : small\n ? [[12, 12, 'auto', 'auto']]\n : [[16, 16, 'auto', 'auto']]\n }),\n header: {\n display: 'flex'\n },\n title: ({ small }) => ({\n margin: small ? [[20, 0, 8, 16]] : [[28, 0, 8, 32]]\n })\n}\n\nconst useStyles = makeStyles(styles)\n\nconst Modal = ({\n width,\n height,\n infoPanelHeight,\n title,\n small,\n xl,\n infoPanel,\n handleClose,\n children,\n secondaryModal,\n className,\n closeOnEscape,\n closeOnBackdropClick,\n ...props\n}) => {\n const classes = useStyles({ width, height, small, infoPanelHeight, xl })\n const TitleCase = small ? H4 : H1\n const closeSize = xl ? 28 : small ? 16 : 20\n\n const innerClose = (evt, reason) => {\n if (!closeOnBackdropClick && reason === 'backdropClick') return\n if (!closeOnEscape && reason === 'escapeKeyDown') return\n handleClose()\n }\n\n return (\n \n {title} \n {error && (\n Failed to save \n )}\n
\n {icon}
\n \n {title && {title} }\n handleClose()}>\n
\n {children}
\n {infoPanel}
\n \n
\n )\n}\n\nexport default WizardSplash\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/stage/spring/complete\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#48F694\",\n strokeWidth: 2,\n transform: \"translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) \",\n cx: 9,\n cy: 9,\n r: 8\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.80983711,12 C7.54819546,12 7.28655382,11.9032616 7.08725647,11.710772 L5.29971255,9.98428824 C4.90009582,9.59832189 4.90009582,8.97445811 5.29971255,8.58849175 C5.69932929,8.2025254 6.34525711,8.2025254 6.74487384,8.58849175 L7.80983711,9.61707728 L11.2551262,6.28947477 C11.6547429,5.90350841 12.3016927,5.90350841 12.7002874,6.28947477 C13.0999042,6.674454 13.0999042,7.2993049 12.7002874,7.68527125 L8.53241776,11.710772 C8.33312041,11.9032616 8.07147876,12 7.80983711,12\",\n id: \"Path\",\n fill: \"#48F694\"\n}));\n\nfunction SvgComplete(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"18px\",\n height: \"18px\",\n viewBox: \"0 0 18 18\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgComplete);\nexport default __webpack_public_path__ + \"static/media/complete.d94d5045.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/stage/spring/current\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-2-Copy\",\n fill: \"#48F694\",\n cx: 9,\n cy: 9,\n r: 4\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-Copy-5\",\n stroke: \"#48F694\",\n strokeWidth: 2,\n transform: \"translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) \",\n cx: 9,\n cy: 9,\n r: 8\n}));\n\nfunction SvgCurrent(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"18px\",\n height: \"18px\",\n viewBox: \"0 0 18 18\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgCurrent);\nexport default __webpack_public_path__ + \"static/media/current.9bbfa93f.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/stage/spring/empty\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-Copy-6\",\n stroke: \"#DDDDDD\",\n strokeWidth: 2,\n transform: \"translate(9.000000, 9.000000) rotate(-270.000000) translate(-9.000000, -9.000000) \",\n cx: 9,\n cy: 9,\n r: 8\n}));\n\nfunction SvgEmpty(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"18px\",\n height: \"18px\",\n viewBox: \"0 0 18 18\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgEmpty);\nexport default __webpack_public_path__ + \"static/media/empty.862ae4bb.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { memo } from 'react'\n\nimport { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.svg'\nimport { ReactComponent as CurrentStageIconSpring } from 'src/styling/icons/stage/spring/current.svg'\nimport { ReactComponent as EmptyStageIconSpring } from 'src/styling/icons/stage/spring/empty.svg'\nimport { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'\nimport { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'\nimport { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'\nimport {\n primaryColor,\n secondaryColor,\n offColor,\n disabledColor\n} from 'src/styling/variables'\n\nconst styles = {\n stages: {\n display: 'flex',\n alignItems: 'center'\n },\n wrapper: {\n display: 'flex',\n alignItems: 'center',\n margin: 0\n },\n stage: {\n display: 'flex',\n height: 28,\n width: 28,\n zIndex: 2,\n '& > svg': {\n height: '100%',\n width: '100%',\n overflow: 'visible'\n }\n },\n separator: {\n width: 28,\n height: 2,\n border: [[2, 'solid']],\n zIndex: 1\n },\n separatorSpring: {\n borderColor: secondaryColor\n },\n separatorZodiac: {\n borderColor: primaryColor\n },\n separatorSpringEmpty: {\n borderColor: disabledColor\n },\n separatorZodiacEmpty: {\n borderColor: offColor\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst Stepper = memo(({ steps, currentStep, color = 'spring', className }) => {\n if (currentStep < 1 || currentStep > steps)\n throw Error('Value of currentStage is invalid')\n if (steps < 1) throw Error('Value of stages is invalid')\n\n const classes = useStyles()\n\n const separatorClasses = {\n [classes.separator]: true,\n [classes.separatorSpring]: color === 'spring',\n [classes.separatorZodiac]: color === 'zodiac'\n }\n\n const separatorEmptyClasses = {\n [classes.separator]: true,\n [classes.separatorSpringEmpty]: color === 'spring',\n [classes.separatorZodiacEmpty]: color === 'zodiac'\n }\n\n return (\n \n \n
\n {name} \n
\n \n \n
\n \n You are about to activate cash-out functionality on your {name}{' '}\n machine which will allow your customers to sell crypto to you.\n
\n\n In order to activate cash-out for this machine, please enter the\n denominations for the machine.\n
\n\n {R.range(1, currentStep).map(idx => (\n
\n )\n})\n\nexport default Stepper\n","export default __webpack_public_path__ + \"static/media/cashout-cassette-1.fac6c691.svg\";","export default __webpack_public_path__ + \"static/media/cashout-cassette-2.34a98cfa.svg\";","import { errorColor, spacer } from 'src/styling/variables'\n\nconst LABEL_WIDTH = 150\n\nexport default {\n title: {\n margin: [[0, 0, 12, 0]]\n },\n titleDiv: {\n paddingBottom: 32\n },\n subtitle: {\n margin: [[32, 0, 21, 0]]\n },\n edit: {\n margin: [[0, 0, 0, 0]]\n },\n error: {\n color: errorColor\n },\n bill: {\n width: 131,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'end'\n },\n billInput: {\n width: '100%'\n },\n suffix: {\n paddingLeft: spacer * 2\n },\n button: {\n marginLeft: 'auto'\n },\n submit: {\n float: 'right'\n },\n picker: {\n width: LABEL_WIDTH\n },\n header: {\n display: 'flex',\n paddingBottom: 95\n },\n thirdStepHeader: {\n display: 'flex',\n paddingBottom: 188\n },\n step: {\n flex: 1\n },\n stepImage: {\n position: 'relative',\n top: -20,\n right: 14\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n flex: 1,\n paddingBottom: 32\n },\n disclaimer: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'space-between'\n },\n disclaimerIcon: {\n float: 'left',\n margin: [[-4, 16, 48, 0]]\n }\n}\n","import { makeStyles } from '@material-ui/core'\nimport { Formik, Form, Field } from 'formik'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Stepper from 'src/components/Stepper'\nimport { Button } from 'src/components/buttons'\nimport { NumberInput } from 'src/components/inputs/formik'\nimport { Info2, H4, P, Info1, Label1 } from 'src/components/typography'\nimport cassetteOne from 'src/styling/icons/cassettes/cashout-cassette-1.svg'\nimport cassetteTwo from 'src/styling/icons/cassettes/cashout-cassette-2.svg'\nimport { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'\n\nimport styles from './WizardStep.styles'\nconst useStyles = makeStyles(styles)\n\nconst WizardStep = ({\n name,\n step,\n schema,\n error,\n lastStep,\n onContinue,\n steps,\n fiatCurrency,\n options\n}) => {\n const classes = useStyles()\n\n const label = lastStep ? 'Finish' : 'Next'\n\n const cassetesArtworks = {\n 1: cassetteOne,\n 2: cassetteTwo\n }\n\n return (\n \n {idx > 1 && }\n
\n ))}\n \n {color === 'spring' &&
\n \n {currentStep > 1 && }\n
\n {R.range(currentStep + 1, steps + 1).map(idx => (\n \n {color === 'spring' &&
\n \n \n
\n ))}\n \n {color === 'spring' &&
\n \n \n \n \n )}\n\n {step === 3 && (\n \n \n \n )}\n\n {lastStep && (\n
\n )\n}\n\nexport default WizardStep\n","import * as Yup from 'yup'\n\nimport { NumberInput } from 'src/components/inputs/formik'\n\nconst currencyMax = 999999999\nconst DenominationsSchema = Yup.object().shape({\n top: Yup.number()\n .label('Cassette 1 (Top)')\n .required()\n .min(0)\n .max(currencyMax),\n bottom: Yup.number()\n .label('Cassette 2 (Bottom)')\n .required()\n .min(0)\n .max(currencyMax),\n zeroConfLimit: Yup.number()\n .label('0-conf Limit')\n .required()\n .min(0)\n .max(currencyMax)\n})\n\nconst getElements = (machines, { fiatCurrency } = {}) => {\n return [\n {\n name: 'id',\n header: 'Machine',\n width: 200,\n view: it => machines.find(({ deviceId }) => deviceId === it).name,\n size: 'sm',\n editable: false\n },\n {\n name: 'top',\n header: 'Cassette 1 (Top)',\n size: 'sm',\n stripe: true,\n width: 200,\n textAlign: 'right',\n input: NumberInput,\n inputProps: {\n decimalPlaces: 0\n },\n suffix: fiatCurrency\n },\n {\n name: 'bottom',\n header: 'Cassette 2 (Bottom)',\n size: 'sm',\n stripe: true,\n textAlign: 'right',\n width: 200,\n input: NumberInput,\n inputProps: {\n decimalPlaces: 0\n },\n suffix: fiatCurrency\n },\n {\n name: 'zeroConfLimit',\n header: '0-conf Limit',\n size: 'sm',\n stripe: true,\n textAlign: 'right',\n width: 200,\n input: NumberInput,\n inputProps: {\n decimalPlaces: 0\n },\n suffix: fiatCurrency\n }\n ]\n}\n\nexport { DenominationsSchema, getElements }\n","import * as R from 'ramda'\nimport React, { useState } from 'react'\nimport * as Yup from 'yup'\n\nimport Modal from 'src/components/Modal'\nimport { Autocomplete } from 'src/components/inputs/formik'\nimport denominations from 'src/utils/bill-denominations'\nimport { toNamespace } from 'src/utils/config'\n\nimport WizardSplash from './WizardSplash'\nimport WizardStep from './WizardStep'\nimport { DenominationsSchema } from './helper'\n\nconst LAST_STEP = 4\nconst MODAL_WIDTH = 554\nconst MODAL_HEIGHT = 520\n\nconst getOptions = R.curry((locale, denomiations) => {\n const currency = R.prop('fiatCurrency')(locale)\n return R.compose(\n R.map(code => ({ code, display: code })),\n R.keys,\n R.path([currency])\n )(denomiations)\n})\n\nconst Wizard = ({ machine, locale, onClose, save, error }) => {\n const [{ step, config }, setState] = useState({\n step: 0,\n config: { active: true }\n })\n\n const options = getOptions(locale, denominations)\n\n const title = `Enable cash-out`\n const isLastStep = step === LAST_STEP\n\n const onContinue = async it => {\n if (isLastStep) {\n return save(\n toNamespace(machine.deviceId, DenominationsSchema.cast(config))\n )\n }\n\n const newConfig = R.merge(config, it)\n\n setState({\n step: step + 1,\n config: newConfig\n })\n }\n\n const steps = [\n {\n type: 'top',\n display: 'Cassette 1 (Top)',\n component: Autocomplete\n },\n {\n type: 'bottom',\n display: 'Cassette 2',\n component: Autocomplete\n },\n {\n type: 'zeroConfLimit',\n display: '0-conf Limit',\n schema: Yup.object().shape({\n zeroConfLimit: Yup.number().required()\n })\n }\n ]\n\n const schema = () =>\n Yup.object().shape({\n top: Yup.number().required(),\n bottom: step >= 2 ? Yup.number().required() : Yup.number()\n })\n\n return (\n \n {name} \n
\n\n {step <= 2 && (\n \n Cash-out Bill Count \n Default Commissions \n
\n )}\n \n
\n
\n {error && Failed to save }\n \n
\n \n {\n save({ fudgeFactorActive: event.target.checked })\n }}\n value={fudgeFactorActive}\n />\n \n {fudgeFactorActive ? 'On' : 'Off'}\n \n \n \n
\n Transaction fudge factor
\n\n Automatically accept customer deposits as complete if their\n received amount is 10 crypto atoms or less.\n
\n\n (Crypto atoms are the smallest unit in each cryptocurrency. E.g.,\n satoshis in Bitcoin, or wei in Ethereum.)\n
\n\n {(title || error) && (\n
\n )\n}\n\nexport default Section\n","export default {\n section: {\n marginBottom: 72\n },\n sectionHeader: {\n display: 'flex',\n alignItems: 'center'\n },\n sectionTitle: {\n margin: [[16, 20, 23, 0]]\n }\n}\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Styleguide\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/direction/cash-in\",\n transform: \"translate(-1.000000, 0.000000)\",\n fill: \"#16D6D3\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.99134364,0.321790399 L10.1430099,4.40569595 C11.0271728,4.99266501 11.2660914,6.1822461 10.6766494,7.06269968 C10.5357408,7.27317585 10.3543728,7.45378298 10.1430099,7.59410043 L3.99134364,11.678006 C3.10718075,12.264975 1.91258801,12.0270588 1.32314609,11.1466052 C1.11243854,10.8318699 1,10.4620686 1,10.0838037 L1,1.91599264 C1,0.857819122 1.86143307,0 2.92406462,0 C3.30392305,0 3.67528233,0.11196683 3.99134364,0.321790399 Z\",\n id: \"Path-3\"\n})));\n\nfunction SvgCashIn(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"10px\",\n height: \"12px\",\n viewBox: \"0 0 10 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgCashIn);\nexport default __webpack_public_path__ + \"static/media/cash-in.c06970a7.svg\";\nexport { ForwardRef as ReactComponent };","import * as R from 'ramda'\nimport React from 'react'\nimport * as Yup from 'yup'\n\nimport { NumberInput } from 'src/components/inputs/formik'\nimport Autocomplete from 'src/components/inputs/formik/Autocomplete.js'\nimport { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'\nimport { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'\n\nconst ALL_MACHINES = {\n name: 'All Machines',\n deviceId: 'ALL_MACHINES'\n}\n\nconst ALL_COINS = {\n display: 'All Coins',\n code: 'ALL_COINS'\n}\n\nconst cashInAndOutHeaderStyle = { marginLeft: 6 }\n\nconst cashInHeader = (\n \n {title} \n {error && Failed to save changes }\n
\n )}\n {children}\n \n
\n)\n\nconst cashOutHeader = (\n \n
\n)\n\nconst getView = (data, code, compare) => it => {\n if (!data) return ''\n\n return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data)\n}\n\nconst displayCodeArray = data => it => {\n if (!it) return it\n\n return R.compose(R.join(', '), R.map(getView(data, 'display')))(it)\n}\n\nconst onCryptoChange = (prev, curr, setValue) => {\n const hasAllCoins = R.includes(ALL_COINS.code)(curr)\n const hadAllCoins = R.includes(ALL_COINS.code)(prev)\n\n if (hasAllCoins && hadAllCoins && R.length(curr) > 1) {\n return setValue(R.reject(R.equals(ALL_COINS.code))(curr))\n }\n\n if (hasAllCoins && !hadAllCoins) {\n return setValue([ALL_COINS.code])\n }\n\n setValue(curr)\n}\n\nconst getOverridesFields = (getData, currency, auxElements) => {\n const machineData = [ALL_MACHINES].concat(getData(['machines']))\n const rawCryptos = getData(['cryptoCurrencies'])\n const cryptoData = [ALL_COINS].concat(\n R.map(it => ({ display: it.code, code: it.code }))(rawCryptos ?? [])\n )\n\n return [\n {\n name: 'machine',\n width: 196,\n size: 'sm',\n view: getView(machineData, 'name', 'deviceId'),\n input: Autocomplete,\n inputProps: {\n options: machineData,\n valueProp: 'deviceId',\n getLabel: R.path(['name'])\n }\n },\n {\n name: 'cryptoCurrencies',\n width: 280,\n size: 'sm',\n view: displayCodeArray(cryptoData),\n input: Autocomplete,\n inputProps: {\n options: cryptoData,\n valueProp: 'code',\n getLabel: R.path(['display']),\n multiple: true,\n onChange: onCryptoChange\n }\n },\n {\n header: cashInHeader,\n name: 'cashIn',\n display: 'Cash-in',\n width: 130,\n input: NumberInput,\n textAlign: 'right',\n suffix: '%',\n inputProps: {\n decimalPlaces: 3\n }\n },\n {\n header: cashOutHeader,\n name: 'cashOut',\n display: 'Cash-out',\n width: 130,\n input: NumberInput,\n textAlign: 'right',\n suffix: '%',\n inputProps: {\n decimalPlaces: 3\n }\n },\n {\n name: 'fixedFee',\n display: 'Fixed fee',\n width: 144,\n input: NumberInput,\n doubleHeader: 'Cash-in only',\n textAlign: 'right',\n suffix: currency,\n inputProps: {\n decimalPlaces: 2\n }\n },\n {\n name: 'minimumTx',\n display: 'Minimun Tx',\n width: 144,\n input: NumberInput,\n doubleHeader: 'Cash-in only',\n textAlign: 'right',\n suffix: currency,\n inputProps: {\n decimalPlaces: 2\n }\n }\n ]\n}\n\nconst mainFields = currency => [\n {\n header: cashInHeader,\n name: 'cashIn',\n display: 'Cash-in',\n width: 169,\n size: 'lg',\n input: NumberInput,\n suffix: '%',\n inputProps: {\n decimalPlaces: 3\n }\n },\n {\n header: cashOutHeader,\n name: 'cashOut',\n display: 'Cash-out',\n width: 169,\n size: 'lg',\n input: NumberInput,\n suffix: '%',\n inputProps: {\n decimalPlaces: 3\n }\n },\n {\n name: 'fixedFee',\n display: 'Fixed fee',\n width: 169,\n size: 'lg',\n doubleHeader: 'Cash-in only',\n textAlign: 'center',\n input: NumberInput,\n suffix: currency,\n inputProps: {\n decimalPlaces: 2\n }\n },\n {\n name: 'minimumTx',\n display: 'Minimun Tx',\n width: 169,\n size: 'lg',\n doubleHeader: 'Cash-in only',\n textAlign: 'center',\n input: NumberInput,\n suffix: currency,\n inputProps: {\n decimalPlaces: 2\n }\n }\n]\n\nconst overrides = (auxData, currency, auxElements) => {\n const getData = R.path(R.__, auxData)\n\n return getOverridesFields(getData, currency, auxElements)\n}\n\nconst percentMax = 100\nconst currencyMax = 9999999\nconst schema = Yup.object().shape({\n cashIn: Yup.number()\n .label('Cash-in')\n .min(0)\n .max(percentMax)\n .required(),\n cashOut: Yup.number()\n .label('Cash-out')\n .min(0)\n .max(percentMax)\n .required(),\n fixedFee: Yup.number()\n .label('Fixed Fee')\n .min(0)\n .max(currencyMax)\n .required(),\n minimumTx: Yup.number()\n .label('Minimum Tx')\n .min(0)\n .max(currencyMax)\n .required()\n})\n\nconst getAlreadyUsed = (id, machine, values) => {\n const getCrypto = R.prop('cryptoCurrencies')\n const getMachineId = R.prop('machine')\n\n const filteredOverrides = R.filter(R.propEq('machine', machine))(values)\n const originalValue = R.find(R.propEq('id', id))(values)\n\n const originalCryptos = getCrypto(originalValue)\n const originalMachineId = getMachineId(originalValue)\n\n const alreadyUsed = R.compose(\n R.uniq,\n R.flatten,\n R.map(getCrypto)\n )(filteredOverrides)\n\n if (machine !== originalMachineId) return alreadyUsed ?? []\n\n return R.difference(alreadyUsed, originalCryptos)\n}\n\nconst getOverridesSchema = (values, rawData) => {\n const getData = R.path(R.__, rawData)\n const machineData = [ALL_MACHINES].concat(getData(['machines']))\n const rawCryptos = getData(['cryptoCurrencies'])\n const cryptoData = [ALL_COINS].concat(\n R.map(it => ({ display: it.code, code: it.code }))(rawCryptos ?? [])\n )\n\n return Yup.object().shape({\n machine: Yup.string()\n .nullable()\n .label('Machine')\n .required(),\n cryptoCurrencies: Yup.array()\n .test({\n test() {\n const { id, machine, cryptoCurrencies } = this.parent\n const alreadyUsed = getAlreadyUsed(id, machine, values)\n\n const isAllMachines = machine === ALL_MACHINES.deviceId\n const isAllCoins = R.includes(ALL_COINS.code, cryptoCurrencies)\n if (isAllMachines && isAllCoins) {\n return this.createError({\n message: `All machines and all coins should be configured in the default setup table`\n })\n }\n\n const repeated = R.intersection(alreadyUsed, cryptoCurrencies)\n if (!R.isEmpty(repeated)) {\n const codes = displayCodeArray(cryptoData)(repeated)\n const machineView = getView(\n machineData,\n 'name',\n 'deviceId'\n )(machine)\n\n const message = `${codes} already overriden for machine: ${machineView}`\n\n return this.createError({ message })\n }\n return true\n }\n })\n .label('Crypto Currencies')\n .required(),\n cashIn: Yup.number()\n .label('Cash-in')\n .min(0)\n .max(percentMax)\n .required(),\n cashOut: Yup.number()\n .label('Cash-out')\n .min(0)\n .max(percentMax)\n .required(),\n fixedFee: Yup.number()\n .label('Fixed Fee')\n .min(0)\n .max(currencyMax)\n .required(),\n minimumTx: Yup.number()\n .label('Minimum Tx')\n .min(0)\n .max(currencyMax)\n .required()\n })\n}\n\nconst defaults = {\n cashIn: '',\n cashOut: '',\n fixedFee: '',\n minimumTx: ''\n}\n\nconst overridesDefaults = {\n machine: null,\n cryptoCurrencies: [],\n cashIn: '',\n cashOut: '',\n fixedFee: '',\n minimumTx: ''\n}\n\nconst getOrder = ({ machine, cryptoCurrencies }) => {\n const isAllMachines = machine === ALL_MACHINES.deviceId\n const isAllCoins = R.contains(ALL_COINS.code, cryptoCurrencies)\n\n if (isAllMachines && isAllCoins) return 0\n if (isAllMachines) return 1\n if (isAllCoins) return 2\n\n return 3\n}\n\nexport {\n mainFields,\n overrides,\n schema,\n getOverridesSchema,\n defaults,\n overridesDefaults,\n getOrder\n}\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { Table as EditableTable } from 'src/components/editableTable'\nimport Section from 'src/components/layout/Section'\nimport TitleSection from 'src/components/layout/TitleSection'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nimport {\n mainFields,\n overrides,\n schema,\n getOverridesSchema,\n defaults,\n overridesDefaults,\n getOrder\n} from './helper'\n\nconst GET_DATA = gql`\n query getData {\n config\n cryptoCurrencies {\n code\n display\n }\n machines {\n name\n deviceId\n }\n }\n`\n\nconst SAVE_CONFIG = gql`\n mutation Save($config: JSONObject) {\n saveConfig(config: $config)\n }\n`\n\nconst Commissions = ({ name: SCREEN_KEY }) => {\n const [isEditingDefault, setEditingDefault] = useState(false)\n const [isEditingOverrides, setEditingOverrides] = useState(false)\n const { data } = useQuery(GET_DATA)\n const [saveConfig, { error }] = useMutation(SAVE_CONFIG, {\n refetchQueries: () => ['getData']\n })\n\n const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)\n const currency = R.path(['fiatCurrency'])(\n fromNamespace(namespaces.LOCALE)(data?.config)\n )\n\n const commission = config && !R.isEmpty(config) ? config : defaults\n const commissionOverrides = commission?.overrides ?? []\n\n const orderedCommissionsOverrides = R.sortWith([\n R.ascend(getOrder),\n R.ascend(R.prop('machine'))\n ])(commissionOverrides)\n\n const save = it => {\n const config = toNamespace(SCREEN_KEY)(it.commissions[0])\n return saveConfig({ variables: { config } })\n }\n\n const saveOverrides = it => {\n const config = toNamespace(SCREEN_KEY)(it)\n return saveConfig({ variables: { config } })\n }\n\n const onEditingDefault = (it, editing) => setEditingDefault(editing)\n const onEditingOverrides = (it, editing) => setEditingOverrides(editing)\n\n return (\n <>\n \n
\n )\n}\n\nexport { Status, MainStatus }\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/authorize/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#FFFFFF\",\n cx: 6,\n cy: 6,\n r: 5\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-13\",\n stroke: \"#FFFFFF\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n points: \"4 6.66666667 5 8 8 4\"\n}));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.51296906.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/authorize/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-9\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n cx: 6,\n cy: 6,\n r: 5\n})), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-13\",\n stroke: \"#1B2559\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n points: \"4 6.66666667 5 8 8 4\"\n}));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.2fe856d5.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/cancel/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\",\n stroke: \"#1B2559\",\n strokeWidth: 1.2\n}, /*#__PURE__*/React.createElement(\"line\", {\n x1: 12,\n y1: 0,\n x2: 0,\n y2: 12,\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 0,\n y1: 0,\n x2: 12,\n y2: 12,\n id: \"Stroke-3\"\n})));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.3b13c0b7.svg\";\nexport { ForwardRef as ReactComponent };","import { white, tomato, spring4, comet } from 'src/styling/variables'\n\nconst propertyCardStyles = {\n label1: {\n display: 'flex',\n marginBottom: 2,\n marginTop: 'auto',\n width: 85\n },\n label1Pending: {\n color: comet\n },\n label1Rejected: {\n color: tomato\n },\n label1Accepted: {\n color: spring4\n },\n cardActionButton: {\n display: 'flex',\n height: 28,\n marginRight: 'auto',\n marginLeft: 12\n },\n propertyCardTopRow: {\n display: 'flex',\n margin: [[0, 10, 5, 0]]\n },\n propertyCardBottomRow: {\n display: 'flex',\n flexDirection: 'row',\n height: 45\n },\n propertyCard: {\n display: 'flex',\n flexDirection: 'column',\n borderRadius: 8,\n width: '100%',\n height: 100,\n padding: [[20]],\n boxSizing: 'border-box',\n boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0.04)',\n border: 'solid 0',\n backgroundColor: white,\n margin: [[20, 0, 0, 0]]\n },\n rowSpaceBetween: {\n display: 'flex',\n flexFlow: 'row nowrap',\n alignItems: 'center',\n justifyContent: 'space-between'\n },\n columnSpaceBetween: {\n display: 'flex',\n flexFlow: 'column nowrap',\n alignItems: 'center',\n justifyContent: 'space-between',\n width: 90\n },\n buttonsWrapper: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'flex-end',\n marginLeft: 'auto',\n marginTop: 'auto'\n }\n}\n\nexport { propertyCardStyles }\n","import { Paper } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport { MainStatus } from 'src/components/Status'\nimport { ActionButton } from 'src/components/buttons'\nimport { H3 } from 'src/components/typography'\nimport { ReactComponent as AuthorizeReversedIcon } from 'src/styling/icons/button/authorize/white.svg'\nimport { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/zodiac.svg'\nimport { ReactComponent as RejectReversedIcon } from 'src/styling/icons/button/cancel/white.svg'\nimport { ReactComponent as RejectIcon } from 'src/styling/icons/button/cancel/zodiac.svg'\n\nimport { propertyCardStyles } from './PropertyCard.styles'\n\nconst useStyles = makeStyles(propertyCardStyles)\n\nconst OVERRIDE_PENDING = 'automatic'\nconst OVERRIDE_AUTHORIZED = 'verified'\nconst OVERRIDE_REJECTED = 'blocked'\n\nconst PropertyCard = memo(\n ({ className, title, state, authorize, reject, children }) => {\n const classes = useStyles()\n\n const label1ClassNames = {\n [classes.label1]: true,\n [classes.label1Pending]: state === OVERRIDE_PENDING,\n [classes.label1Rejected]: state === OVERRIDE_REJECTED,\n [classes.label1Accepted]: state === OVERRIDE_AUTHORIZED\n }\n\n const AuthorizeButton = () => (\n {title}
\n\n
\n \n )\n }\n)\n\nexport {\n PropertyCard,\n OVERRIDE_PENDING,\n OVERRIDE_AUTHORIZED,\n OVERRIDE_REJECTED\n}\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/block/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n cx: 6,\n cy: 6,\n r: 5\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 9,\n y1: 3,\n x2: 3,\n y2: 9,\n id: \"Stroke-3\"\n})));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.e72682b5.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/block/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n cx: 6,\n cy: 6,\n r: 5\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 9,\n y1: 3,\n x2: 3,\n y2: 9,\n id: \"Stroke-3\"\n})));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.bb7722c5.svg\";\nexport { ForwardRef as ReactComponent };","import { comet } from 'src/styling/variables'\n\nexport default {\n labelLink: {\n cursor: 'pointer',\n color: comet\n },\n breadcrumbs: {\n margin: [[20, 0]]\n },\n actionLabel: {\n color: comet,\n margin: [[4, 0]]\n },\n customerDetails: {\n marginBottom: 18\n }\n}\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/search/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.8635238,8.17028571 C15.8635238,12.4198095 12.4187619,15.8645714 8.1692381,15.8645714 C3.92066667,15.8645714 0.475904762,12.4198095 0.475904762,8.17028571 C0.475904762,3.9207619 3.92066667,0.476 8.1692381,0.476 C12.4187619,0.476 15.8635238,3.9207619 15.8635238,8.17028571 Z\",\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 13.7035238,\n y1: 13.7046667,\n x2: 19.4844762,\n y2: 19.485619,\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\"\n}));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.e8851a0a.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/search/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.8635238,8.17028571 C15.8635238,12.4198095 12.4187619,15.8645714 8.1692381,15.8645714 C3.92066667,15.8645714 0.475904762,12.4198095 0.475904762,8.17028571 C0.475904762,3.9207619 3.92066667,0.476 8.1692381,0.476 C12.4187619,0.476 15.8635238,3.9207619 15.8635238,8.17028571 Z\",\n id: \"Stroke-1\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 13.7035238,\n y1: 13.7046667,\n x2: 19.4844762,\n y2: 19.485619,\n id: \"Stroke-3\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n strokeLinecap: \"round\"\n}));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.91792e22.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles, ClickAwayListener } from '@material-ui/core'\nimport classnames from 'classnames'\nimport React, { memo, useState } from 'react'\n\nimport Popper from 'src/components/Popper'\nimport { FeatureButton } from 'src/components/buttons'\nimport { ReactComponent as ZoomIconInverse } from 'src/styling/icons/circle buttons/search/white.svg'\nimport { ReactComponent as ZoomIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg'\n\nimport imagePopperStyles from './ImagePopper.styles'\n\nconst useStyles = makeStyles(imagePopperStyles)\n\nconst ImagePopper = memo(\n ({ className, width, height, popupWidth, popupHeight, src }) => {\n const classes = useStyles({\n width,\n height,\n popupWidth,\n popupHeight\n })\n const [popperAnchorEl, setPopperAnchorEl] = useState(null)\n\n const handleOpenPopper = event => {\n setPopperAnchorEl(popperAnchorEl ? null : event.currentTarget)\n }\n\n const handleClosePopper = () => {\n setPopperAnchorEl(null)\n }\n\n const popperOpen = Boolean(popperAnchorEl)\n\n const Image = ({ className }) => (\n \n
\n {children}\n \n {authorize && state !== OVERRIDE_AUTHORIZED && AuthorizeButton()}\n {reject && state !== OVERRIDE_REJECTED && RejectButton()}\n
\n \n \n \n
\n \n
\n \n
\n )}\n \n )\n}\n\nconst ComplianceDetails = ({ customer, updateCustomer }) => {\n const classes = useStyles({ width: imageWidth })\n\n const sanctions = R.path(['sanctions'])(customer)\n const sanctionsAt = R.path(['sanctionsAt'])(customer)\n const sanctionsDisplay = !sanctionsAt\n ? 'Not checked yet'\n : sanctions\n ? 'Passed'\n : 'Failed'\n\n return (\n \n
\n )\n}\n\nexport default ComplianceDetails\n","const complianceDetailsStyles = {\n complianceDetailsGrid: {\n display: 'flex',\n flexDirection: 'row'\n },\n firstColumn: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n marginRight: 10\n },\n lastColumn: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n marginLeft: 10\n },\n photoWrapper: ({ width }) => ({\n display: 'flex',\n justifyContent: 'center',\n width\n })\n}\n\nexport { complianceDetailsStyles }\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/ID/card/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\",\n stroke: \"#1B2559\",\n strokeWidth: 1.6\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"id-copy\"\n}, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-1\",\n points: \"0 16 22 16 22 0 0 0\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 11.7857143,\n y1: 4,\n x2: 18.8571429,\n y2: 4,\n id: \"Stroke-3\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 11.7857143,\n y1: 7.2,\n x2: 18.8571429,\n y2: 7.2,\n id: \"Stroke-4\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-5\",\n points: \"3.14285714 11.2 8.64285714 11.2 8.64285714 4 3.14285714 4\"\n}))));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"16px\",\n viewBox: \"0 0 22 16\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.05a22c3a.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/law/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"bevel\"\n}, /*#__PURE__*/React.createElement(\"line\", {\n x1: 8.4141,\n y1: 7.4648,\n x2: 14.0711,\n y2: 1.8078,\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 12.6568,\n y1: 0.3936,\n x2: 15.4858,\n y2: 3.2216,\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 7,\n y1: 6.0498,\n x2: 9.829,\n y2: 8.8788,\n id: \"Stroke-6\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 11.2427,\n y1: 4.6357,\n x2: 19.2427,\n y2: 12.6357,\n id: \"Stroke-7\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 3,\n y1: 16.5,\n x2: 10,\n y2: 16.5,\n id: \"Stroke-9\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 0,\n y1: 19.5,\n x2: 13,\n y2: 19.5,\n id: \"Stroke-10\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/sf-small/law/white\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.57984891.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/law/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"bevel\"\n}, /*#__PURE__*/React.createElement(\"line\", {\n x1: 8.4141,\n y1: 7.4648,\n x2: 14.0711,\n y2: 1.8078,\n id: \"Stroke-1\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 12.6568,\n y1: 0.3936,\n x2: 15.4858,\n y2: 3.2216,\n id: \"Stroke-3\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 7,\n y1: 6.0498,\n x2: 9.829,\n y2: 8.8788,\n id: \"Stroke-6\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 11.2427,\n y1: 4.6357,\n x2: 19.2427,\n y2: 12.6357,\n id: \"Stroke-7\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 3,\n y1: 16.5,\n x2: 10,\n y2: 16.5,\n id: \"Stroke-9\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 0,\n y1: 19.5,\n x2: 13,\n y2: 19.5,\n id: \"Stroke-10\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/sf-small/law/zodiac\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.56f832ee.svg\";\nexport { ForwardRef as ReactComponent };","import { fontSize5 } from 'src/styling/variables'\n\nexport default {\n titleWrapper: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'row'\n },\n wrapper: {\n flex: 1,\n display: 'flex',\n flexDirection: 'row',\n height: '100%'\n },\n tableWrapper: {\n flex: 1,\n marginLeft: 40,\n display: 'block',\n overflowX: 'auto',\n width: '100%',\n maxWidth: '78%',\n maxHeight: '70vh'\n },\n table: {\n whiteSpace: 'nowrap',\n display: 'block',\n '& th': {\n position: 'sticky',\n top: 0\n }\n },\n dateColumn: {\n minWidth: 160\n },\n levelColumn: {\n minWidth: 100\n },\n fillColumn: {\n width: '100%'\n },\n shareButton: {\n margin: 8,\n display: 'flex',\n alignItems: 'center',\n fontSize: fontSize5,\n padding: [[0, 12]]\n },\n shareIcon: {\n marginRight: 6\n },\n button: {\n margin: 8\n },\n titleAndButtonsContainer: {\n display: 'flex'\n },\n buttonsWrapper: {\n display: 'flex',\n marginLeft: 16,\n '& > *': {\n margin: 'auto 6px'\n }\n }\n}\n","import typographyStyles from 'src/components/typography/styles'\nimport baseStyles from 'src/pages/Logs.styles'\nimport { zircon, comet, primaryColor, fontSize4 } from 'src/styling/variables'\n\nconst { label1 } = typographyStyles\nconst { titleWrapper, titleAndButtonsContainer } = baseStyles\n\nexport default {\n titleWrapper,\n titleAndButtonsContainer,\n row: {\n display: 'flex',\n flexFlow: 'row nowrap'\n },\n rowSpaceBetween: {\n display: 'flex',\n flexFlow: 'row nowrap',\n alignItems: 'center',\n justifyContent: 'space-between'\n },\n column: {\n display: 'flex',\n flexFlow: 'column nowrap',\n width: '100%',\n height: '100%',\n justifyContent: 'space-between'\n },\n textInput: {\n width: 144\n },\n p: {\n fontFamily: 'MuseoSans',\n fontSize: fontSize4,\n fontWeight: 500,\n fontStretch: 'normal',\n fontStyle: 'normal',\n lineHeight: 1.14,\n letterSpacing: 'normal',\n color: primaryColor\n },\n txId: {\n fontFamily: 'MuseoSans',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n },\n txClassIconLeft: {\n marginRight: 11\n },\n txClassIconRight: {\n marginLeft: 11\n },\n headerLabels: {\n display: 'flex',\n flexDirection: 'row',\n '& div': {\n display: 'flex',\n alignItems: 'center'\n },\n '& > div:first-child': {\n marginRight: 24\n },\n '& span': {\n extend: label1,\n marginLeft: 6\n }\n },\n photo: {\n width: 92,\n height: 92,\n borderRadius: 8,\n backgroundColor: zircon,\n margin: [[0, 28, 0, 0]],\n alignItems: 'center',\n justifyContent: 'center',\n display: 'flex'\n },\n img: {\n width: 80\n },\n customerName: {\n marginBottom: 32\n },\n icon: {\n marginRight: 11\n },\n name: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n value: {\n height: 16\n },\n label: {\n marginBottom: 4,\n color: comet\n },\n idIcon: {\n marginRight: 10\n },\n subpageButton: {\n marginLeft: 16\n }\n}\n","import { parsePhoneNumberFromString } from 'libphonenumber-js'\nimport * as R from 'ramda'\n\nconst CUSTOMER_BLOCKED = 'blocked'\n\nconst getAuthorizedStatus = it =>\n it.authorizedOverride === CUSTOMER_BLOCKED\n ? { label: 'Blocked', type: 'error' }\n : it.daysSuspended > 0\n ? { label: `${it.daysSuspended} day suspension`, type: 'warning' }\n : { label: 'Authorized', type: 'success' }\n\nconst getFormattedPhone = (phone, country) =>\n phone && country\n ? parsePhoneNumberFromString(phone, country).formatInternational()\n : ''\n\nconst getName = it => {\n const idData = R.path(['idCardData'])(it)\n\n return `${R.path(['firstName'])(idData) ?? ''} ${R.path(['lastName'])(\n idData\n ) ?? ''}`.trim()\n}\n\nexport { getAuthorizedStatus, getFormattedPhone, getName }\n","import { Paper } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport React, { memo } from 'react'\n\nimport { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'\nimport { URI } from 'src/utils/apollo'\n\nimport mainStyles from '../CustomersList.styles'\n\nconst useStyles = makeStyles(mainStyles)\n\nconst FrontCameraPhoto = memo(({ frontCameraPath }) => {\n const classes = useStyles()\n\n return (\n Compliance details
\n\n \n \n \n updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED })\n }\n reject={() =>\n updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED })\n }>\n \n updateCustomer({ frontCameraOverride: OVERRIDE_AUTHORIZED })\n }\n reject={() =>\n updateCustomer({ frontCameraOverride: OVERRIDE_REJECTED })\n }>\n \n \n \n updateCustomer({ usSsnOverride: OVERRIDE_AUTHORIZED })\n }\n reject={() =>\n updateCustomer({ usSsnOverride: OVERRIDE_REJECTED })\n }>\n \n updateCustomer({ sanctionsOverride: OVERRIDE_AUTHORIZED })\n }\n reject={() =>\n updateCustomer({ sanctionsOverride: OVERRIDE_REJECTED })\n }>\n {sanctionsDisplay} \n \n \n \n
\n \n \n Compliance details\n \n
\n \n {name.length\n ? name\n : getFormattedPhone(R.path(['phone'])(customer), locale.country)}\n
\n\n
\n )\n}\n\nconst DataTable = ({\n elements = [],\n data = [],\n Details,\n className,\n expandable,\n initialExpanded,\n onClick,\n loading,\n emptyText,\n ...props\n}) => {\n const [expanded, setExpanded] = useState(initialExpanded)\n\n useEffect(() => setExpanded(initialExpanded), [initialExpanded])\n\n const coreWidth = R.compose(R.sum, R.map(R.prop('width')))(elements)\n const expWidth = 1200 - coreWidth\n const width = coreWidth + (expandable ? expWidth : 0)\n\n const classes = useStyles({ width })\n\n const expandRow = id => {\n setExpanded(id === expanded ? null : id)\n }\n\n const cache = new CellMeasurerCache({\n defaultHeight: 62,\n fixedWidth: true\n })\n\n function rowRenderer({ index, key, parent, style }) {\n return (\n \n {\n expandable && expandRow(id)\n onClick && onClick(data)\n }}\n error={data.error}\n errorMessage={data.errorMessage}>\n {elements.map(({ view = it => it?.toString(), ...props }, idx) => (\n \n {view(data)}\n \n ))}\n {expandable && (\n \n expandRow(id)}\n className={classes.expandButton}>\n {expanded && \n )}\n \n
\n {expandable && expanded && (\n \n \n \n \n \n
\n )}\n \n
\n
\n \n )\n }\n\n return (\n | }\n |
|---|
\n {children && (\n <>\n \n
\n )\n}\n\nexport default CopyToClipboard\n","import { makeStyles, Box } from '@material-ui/core'\nimport BigNumber from 'bignumber.js'\nimport moment from 'moment'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport DataTable from 'src/components/tables/DataTable'\nimport { H3, H4, Label1, Label2, P } from 'src/components/typography'\nimport { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'\nimport { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'\nimport { toUnit } from 'src/utils/coin'\nimport { ifNotNull } from 'src/utils/nullCheck'\n\nimport CopyToClipboard from '../../Transactions/CopyToClipboard'\nimport mainStyles from '../CustomersList.styles'\n\nconst useStyles = makeStyles(mainStyles)\n\nconst TransactionsList = ({ customer, data, loading }) => {\n const classes = useStyles()\n const LastTxIcon = customer.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon\n const hasData = !(R.isEmpty(data) || R.isNil(data))\n\n const summaryElements = [\n {\n header: 'Transactions',\n size: 127,\n value: ifNotNull(\n customer.totalTxs,\n `${Number.parseInt(customer.totalTxs)}`\n )\n },\n {\n header: 'Transaction volume',\n size: 167,\n value: ifNotNull(\n customer.totalSpent,\n `${Number.parseFloat(customer.totalSpent)} ${customer.lastTxFiatCode}`\n )\n },\n {\n header: 'Last active',\n size: 142,\n value: ifNotNull(\n customer.lastActive,\n moment.utc(customer.lastActive).format('YYYY-MM-D')\n )\n },\n {\n header: 'Last transaction',\n size: 198,\n value: ifNotNull(\n customer.lastTxFiat,\n <>\n \n {children}\n
\n \n \n handleClick(event)}>\n \n
\n \n
\n \n \n )}\n Copied to clipboard!
\n Transactions
\n\n
\n {hasData && \n
\n \n {loading\n ? 'Loading'\n : hasData\n ? 'All transactions from this customer'\n : 'No transactions so far'}\n
\n\n \n setShowCompliance(!showCompliance)}\n />\n
\n {!showCompliance && (\n \n Actions \n \n updateCustomer({\n authorizedOverride: blocked\n ? OVERRIDE_AUTHORIZED\n : OVERRIDE_REJECTED\n })\n }>\n {`${blocked ? 'Authorize' : 'Block'} customer`}\n \n
\n \n \n {color && (\n {label} \n
\n )\n}\n\nexport default TableLabel\n","import typographyStyles from 'src/components/typography/styles'\nimport {\n disabledColor2,\n spacer,\n subheaderColor,\n errorColor,\n placeholderColor,\n comet\n} from 'src/styling/variables'\n\nconst { label1 } = typographyStyles\n\nexport default {\n wrapper: {\n display: 'flex',\n flex: 1,\n flexDirection: 'row',\n height: '100%'\n },\n main: {\n display: 'flex',\n flex: 1\n },\n firstSide: {\n margin: `0 ${spacer * 8}px 0 ${spacer * 6}px`\n },\n secondSide: {\n marginTop: -29\n },\n error: {\n color: errorColor\n },\n coinTotal: {\n margin: `${spacer * 1.5}px 0`\n },\n leftSpacer: {\n marginLeft: spacer\n },\n topSpacer: {\n marginTop: spacer * 5\n },\n addressWrapper: {\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n backgroundColor: subheaderColor\n },\n address: {\n width: 375,\n margin: `${spacer * 1.5}px ${spacer * 3}px`\n },\n itemWrapper: {\n textAlign: 'end'\n },\n item: {\n extend: label1,\n margin: 2\n },\n inactiveItem: {\n color: comet\n },\n firstItem: {\n fontWeight: 700,\n margin: 2\n },\n total: {\n marginTop: 'auto',\n textAlign: 'right',\n marginRight: 24\n },\n totalPending: {\n marginTop: 2\n },\n totalTitle: {\n color: placeholderColor,\n marginBottom: 2\n },\n table: {\n marginTop: spacer,\n marginLeft: spacer * 6\n },\n tableLabel: {\n justifyContent: 'end',\n marginTop: -38\n },\n pending: {\n backgroundColor: disabledColor2\n },\n copyToClipboard: {\n marginLeft: 'auto',\n paddingTop: 6,\n paddingLeft: 15,\n marginRight: -11\n }\n}\n","import { useQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport BigNumber from 'bignumber.js'\nimport classnames from 'classnames'\nimport gql from 'graphql-tag'\nimport moment from 'moment'\nimport QRCode from 'qrcode.react'\nimport React, { useState } from 'react'\n\nimport TableLabel from 'src/components/TableLabel'\nimport Title from 'src/components/Title'\nimport { Tr, Td, THead, TBody, Table } from 'src/components/fake-table/Table'\nimport Sidebar from 'src/components/layout/Sidebar'\nimport {\n H3,\n Info1,\n Info2,\n Info3,\n Mono,\n Label1,\n Label3\n} from 'src/components/typography'\nimport CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'\nimport { primaryColor } from 'src/styling/variables'\nimport { formatCryptoAddress } from 'src/utils/coin'\n\nimport styles from './Funding.styles'\n\nconst useStyles = makeStyles(styles)\nconst sizes = {\n big: 165,\n time: 140,\n date: 130\n}\n\nconst GET_FUNDING = gql`\n {\n funding {\n cryptoCode\n errorMsg\n fundingAddress\n fundingAddressUrl\n confirmedBalance\n pending\n fiatConfirmedBalance\n fiatPending\n fiatCode\n display\n unitScale\n }\n }\n`\n\nconst formatAddress = (cryptoCode = '', address = '') =>\n formatCryptoAddress(cryptoCode, address).replace(/(.{4})/g, '$1 ')\nconst sumReducer = (acc, value) => acc.plus(value)\nconst formatNumber = it => new BigNumber(it).toFormat(2)\n\nconst getConfirmedTotal = list => {\n return formatNumber(\n list\n .filter(it => !it.errorMsg)\n .map(it => new BigNumber(it.fiatConfirmedBalance))\n .reduce(sumReducer, new BigNumber(0))\n )\n}\n\nconst getPendingTotal = list => {\n return formatNumber(\n list\n .filter(it => !it.errorMsg)\n .map(it => new BigNumber(it.fiatPending))\n .reduce(sumReducer, new BigNumber(0))\n )\n}\n\nconst Funding = () => {\n const [selected, setSelected] = useState(null)\n const [viewHistory] = useState(false)\n const classes = useStyles()\n const fundingHistory = [\n {\n cryptoAmount: 2.0,\n balance: 10.23,\n fiatValue: 1000.0,\n date: new Date(),\n performedBy: null,\n pending: true\n },\n {\n cryptoAmount: 10.0,\n balance: 12.23,\n fiatValue: 12000.0,\n date: new Date(),\n performedBy: null\n },\n {\n cryptoAmount: 5.0,\n balance: 5.0,\n fiatValue: 50000.0,\n date: new Date(),\n performedBy: null\n }\n ]\n\n const isSelected = it => {\n return selected && selected.cryptoCode === it.cryptoCode\n }\n\n const { data: fundingResponse } = useQuery(GET_FUNDING)\n\n if (fundingResponse?.funding?.length && !selected) {\n setSelected(fundingResponse?.funding[0])\n }\n\n const itemRender = (it, active) => {\n const itemClass = {\n [classes.item]: true,\n [classes.inactiveItem]: !active\n }\n const wrapperClass = {\n [classes.itemWrapper]: true,\n [classes.error]: it.errorMsg\n }\n\n return (\n \n
\n )\n }\n\n const pendingTotal = getPendingTotal(fundingResponse?.funding || [])\n const signIfPositive = num => (num >= 0 ? '+' : '')\n\n return (\n <>\n {it.display}
\n {!it.errorMsg && (\n <>\n \n {it.fiatConfirmedBalance} {it.fiatCode}\n
\n \n {it.confirmedBalance} {it.cryptoCode}\n
\n \n )}\n \n Funding \n {/* */}\n
\n \n it.display}\n itemRender={itemRender}>\n {fundingResponse?.funding && fundingResponse?.funding?.length && (\n
\n \n )\n}\n\nexport default Funding\n","import * as Yup from 'yup'\n\nimport {\n TextInput,\n SecretInput,\n Autocomplete\n} from 'src/components/inputs/formik'\n\nconst isDefined = it => it && it.length\n\nexport default {\n code: 'bitgo',\n name: 'BitGo',\n title: 'BitGo (Wallet)',\n elements: [\n {\n code: 'token',\n display: 'API Token',\n component: TextInput,\n face: true,\n long: true\n },\n {\n code: 'environment',\n display: 'Environment',\n component: Autocomplete,\n inputProps: {\n options: ['prod', 'test']\n },\n face: true\n },\n {\n code: 'BTCWalletId',\n display: 'BTC Wallet ID',\n component: TextInput\n },\n {\n code: 'BTCWalletPassphrase',\n display: 'BTC Wallet Passphrase',\n component: SecretInput\n },\n {\n code: 'LTCWalletId',\n display: 'LTC Wallet ID',\n component: TextInput\n },\n {\n code: 'LTCWalletPassphrase',\n display: 'LTC Wallet Passphrase',\n component: SecretInput\n },\n {\n code: 'ZECWalletId',\n display: 'ZEC Wallet ID',\n component: TextInput\n },\n {\n code: 'ZECWalletPassphrase',\n display: 'ZEC Wallet Passphrase',\n component: SecretInput\n },\n {\n code: 'BCHWalletId',\n display: 'BCH Wallet ID',\n component: TextInput\n },\n {\n code: 'BCHWalletPassphrase',\n display: 'BCH Wallet Passphrase',\n component: SecretInput\n },\n {\n code: 'DASHWalletId',\n display: 'DASH Wallet ID',\n component: TextInput\n },\n {\n code: 'DASHWalletPassphrase',\n display: 'DASH Wallet Passphrase',\n component: SecretInput\n }\n ],\n validationSchema: Yup.object().shape({\n token: Yup.string()\n .max(100, 'Too long')\n .required(),\n BTCWalletId: Yup.string().max(100, 'Too long'),\n BTCWalletPassphrase: Yup.string()\n .max(100, 'Too long')\n .when('BTCWalletId', {\n is: isDefined,\n then: Yup.string().required()\n }),\n LTCWalletId: Yup.string().max(100, 'Too long'),\n LTCWalletPassphrase: Yup.string()\n .max(100, 'Too long')\n .when('LTCWalletId', {\n is: isDefined,\n then: Yup.string().required()\n }),\n ZECWalletId: Yup.string().max(100, 'Too long'),\n ZECWalletPassphrase: Yup.string()\n .max(100, 'Too long')\n .when('ZECWalletId', {\n is: isDefined,\n then: Yup.string().required()\n }),\n BCHWalletId: Yup.string().max(100, 'Too long'),\n BCHWalletPassphrase: Yup.string()\n .max(100, 'Too long')\n .when('BCHWalletId', {\n is: isDefined,\n then: Yup.string().required()\n }),\n DASHWalletId: Yup.string().max(100, 'Too long'),\n DASHWalletPassphrase: Yup.string()\n .max(100, 'Too long')\n .when('DASHWalletId', {\n is: isDefined,\n then: Yup.string().required()\n }),\n environment: Yup.string()\n .matches(/(prod|test)/)\n .required()\n })\n}\n","import * as Yup from 'yup'\n\nimport SecretInputFormik from 'src/components/inputs/formik/SecretInput'\nimport TextInputFormik from 'src/components/inputs/formik/TextInput'\n\nexport default {\n code: 'bitstamp',\n name: 'Bitstamp',\n title: 'Bitstamp (Exchange)',\n elements: [\n {\n code: 'clientId',\n display: 'Client ID',\n component: TextInputFormik,\n face: true,\n long: true\n },\n {\n code: 'key',\n display: 'API Key',\n component: TextInputFormik,\n face: true,\n long: true\n },\n {\n code: 'secret',\n display: 'API Secret',\n component: SecretInputFormik\n }\n ],\n\n validationSchema: Yup.object().shape({\n clientId: Yup.string()\n .max(100, 'Too long')\n .required(),\n key: Yup.string()\n .max(100, 'Too long')\n .required(),\n secret: Yup.string()\n .max(100, 'Too long')\n .required()\n })\n}\n","import * as Yup from 'yup'\n\nimport TextInputFormik from 'src/components/inputs/formik/TextInput'\n\nexport default {\n code: 'blockcypher',\n name: 'Blockcypher',\n title: 'Blockcypher (Payments)',\n elements: [\n {\n code: 'token',\n display: 'API Token',\n component: TextInputFormik,\n face: true,\n long: true\n },\n {\n code: 'confidenceFactor',\n display: 'Confidence Factor',\n component: TextInputFormik,\n face: true\n }\n ],\n\n validationSchema: Yup.object().shape({\n token: Yup.string()\n .max(100, 'Too long')\n .required(),\n confidenceFactor: Yup.number()\n .integer('Please input a positive integer')\n .positive('Please input a positive integer')\n .required()\n })\n}\n","import * as Yup from 'yup'\n\nimport SecretInputFormik from 'src/components/inputs/formik/SecretInput'\nimport TextInputFormik from 'src/components/inputs/formik/TextInput'\n\nexport default {\n code: 'infura',\n name: 'Infura',\n title: 'Infura (Wallet)',\n elements: [\n {\n code: 'apiKey',\n display: 'Project ID',\n component: TextInputFormik,\n face: true,\n long: true\n },\n {\n code: 'apiSecret',\n display: 'Project Secret',\n component: SecretInputFormik\n },\n {\n code: 'endpoint',\n display: 'Endpoint',\n component: TextInputFormik,\n face: true\n }\n ],\n validationSchema: Yup.object().shape({\n apiKey: Yup.string()\n .max(100, 'Too long')\n .required(),\n apiSecret: Yup.string()\n .max(100, 'Too long')\n .required(),\n endpoint: Yup.string()\n .max(100, 'Too long')\n .required()\n })\n}\n","import * as Yup from 'yup'\n\nimport SecretInputFormik from 'src/components/inputs/formik/SecretInput'\nimport TextInputFormik from 'src/components/inputs/formik/TextInput'\n\nexport default {\n code: 'itbit',\n name: 'itBit',\n title: 'itBit (Exchange)',\n elements: [\n {\n code: 'userId',\n display: 'User ID',\n component: TextInputFormik,\n face: true,\n long: true\n },\n {\n code: 'walletId',\n display: 'Wallet ID',\n component: TextInputFormik,\n face: true,\n long: true\n },\n {\n code: 'clientKey',\n display: 'Client Key',\n component: TextInputFormik\n },\n {\n code: 'clientSecret',\n display: 'Client Secret',\n component: SecretInputFormik\n }\n ],\n validationSchema: Yup.object().shape({\n userId: Yup.string()\n .max(100, 'Too long')\n .required(),\n walletId: Yup.string()\n .max(100, 'Too long')\n .required(),\n clientKey: Yup.string()\n .max(100, 'Too long')\n .required(),\n clientSecret: Yup.string()\n .max(100, 'Too long')\n .required()\n })\n}\n","import * as Yup from 'yup'\n\nimport SecretInputFormik from 'src/components/inputs/formik/SecretInput'\nimport TextInputFormik from 'src/components/inputs/formik/TextInput'\n\nexport default {\n code: 'kraken',\n name: 'Kraken',\n title: 'Kraken (Exchange)',\n elements: [\n {\n code: 'apiKey',\n display: 'API Key',\n component: TextInputFormik,\n face: true,\n long: true\n },\n {\n code: 'privateKey',\n display: 'Private Key',\n component: SecretInputFormik\n }\n ],\n validationSchema: Yup.object().shape({\n apiKey: Yup.string()\n .max(100, 'Too long')\n .required(),\n privateKey: Yup.string()\n .max(100, 'Too long')\n .required()\n })\n}\n","import * as Yup from 'yup'\n\nimport TextInputFormik from 'src/components/inputs/formik/TextInput'\n\nexport default {\n code: 'mailgun',\n name: 'Mailgun',\n title: 'Mailgun (Email)',\n elements: [\n {\n code: 'apiKey',\n display: 'API Key',\n component: TextInputFormik\n },\n {\n code: 'domain',\n display: 'Domain',\n component: TextInputFormik\n },\n {\n code: 'fromEmail',\n display: 'From Email',\n component: TextInputFormik,\n face: true\n },\n {\n code: 'toEmail',\n display: 'To Email',\n component: TextInputFormik,\n face: true\n }\n ],\n validationSchema: Yup.object().shape({\n apiKey: Yup.string()\n .max(100, 'Too long')\n .required(),\n domain: Yup.string()\n .max(100, 'Too long')\n .required(),\n fromEmail: Yup.string()\n .max(100, 'Too long')\n .email('Please input a valid email address')\n .required(),\n toEmail: Yup.string()\n .max(100, 'Too long')\n .email('Please input a valid email address')\n .required()\n })\n}\n","import * as Yup from 'yup'\n\nimport SecretInputFormik from 'src/components/inputs/formik/SecretInput'\nimport TextInputFormik from 'src/components/inputs/formik/TextInput'\n\nexport default {\n code: 'twilio',\n name: 'Twilio',\n title: 'Twilio (SMS)',\n elements: [\n {\n code: 'accountSid',\n display: 'Account SID',\n component: TextInputFormik\n },\n {\n code: 'authToken',\n display: 'Auth Token',\n component: SecretInputFormik\n },\n {\n code: 'fromNumber',\n display: 'Twilio Number (international format)',\n component: TextInputFormik,\n face: true\n },\n {\n code: 'toNumber',\n display: 'Notifications Number (international format)',\n component: TextInputFormik,\n face: true\n }\n ],\n validationSchema: Yup.object().shape({\n accountSid: Yup.string()\n .max(100, 'Too long')\n .required(),\n authToken: Yup.string()\n .max(100, 'Too long')\n .required(),\n fromNumber: Yup.string()\n .max(100, 'Too long')\n .required(),\n toNumber: Yup.string()\n .max(100, 'Too long')\n .required()\n })\n}\n","import bitgo from './bitgo'\nimport bitstamp from './bitstamp'\nimport blockcypher from './blockcypher'\nimport infura from './infura'\nimport itbit from './itbit'\nimport kraken from './kraken'\nimport mailgun from './mailgun'\nimport twilio from './twilio'\n\nexport default {\n [bitgo.code]: bitgo,\n [bitstamp.code]: bitstamp,\n [blockcypher.code]: blockcypher,\n [infura.code]: infura,\n [itbit.code]: itbit,\n [kraken.code]: kraken,\n [mailgun.code]: mailgun,\n [twilio.code]: twilio\n}\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 52,\n cy: 32,\n r: 32,\n fill: \"#F7931A\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"m66.1 27.4c0.6-4.3-2.6-6.5-7-8.1l1.4-5.8-3.5-0.9-1.4 5.6c-0.9-0.2-1.9-0.4-2.8-0.7l1.4-5.7-3.5-0.9-1.4 5.8c-0.8-0.2-1.5-0.3-2.2-0.5l0 0-4.8-1.2-0.9 3.8s2.6 0.6 2.6 0.6c1.4 0.4 1.7 1.3 1.6 2l-1.6 6.6c0.1 0 0.2 0.1 0.4 0.1-0.1 0-0.2-0.1-0.4-0.1l-2.3 9.2c-0.2 0.4-0.6 1.1-1.6 0.8 0 0.1-2.6-0.6-2.6-0.6l-1.7 4 4.6 1.1c0.9 0.2 1.7 0.4 2.5 0.6l-1.5 5.8 3.5 0.9 1.4-5.8c1 0.3 1.9 0.5 2.8 0.7l-1.4 5.7 3.5 0.9 1.5-5.8c6 1.1 10.5 0.7 12.4-4.7 1.5-4.4-0.1-6.9-3.2-8.5 2.3-0.5 4-2 4.5-5.2zm-8 11.2c-1.1 4.4-8.4 2-10.8 1.4l1.9-7.7c2.4 0.6 10 1.8 8.9 6.3zm1.1-11.3c-1 4-7.1 2-9.1 1.5l1.7-7c2 0.5 8.4 1.4 7.3 5.6z\",\n fill: \"#FFF\"\n});\n\nfunction SvgIconBitcoinColour(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 104,\n height: 64,\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIconBitcoinColour);\nexport default __webpack_public_path__ + \"static/media/icon-bitcoin-colour.bd8da481.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#F7931A\",\n d: \"m0,0l29.7,0a39,39,0,0,0,0,64l-29.7,0zm52,0a32,32,0,0,0,0,64a32,32,0,0,0,0,-64m52,0l-29.7,0a39,39,0,0,1,0,64l29.7,0z\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFF\",\n transform: \"rotate(-28 52 32)\",\n d: \"m66.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z\"\n});\n\nfunction SvgIconBitcoincashColour(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 104,\n height: 64,\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIconBitcoincashColour);\nexport default __webpack_public_path__ + \"static/media/icon-bitcoincash-colour.3b27f3ed.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 1000,\n cy: 1000,\n r: 1000,\n fill: \"#2573c2\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"#fff\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1652.6 736.8a143.65 143.65 0 0 0-19.2-63.6c-10-20-27.8-35.6-48.6-43.6a143.51 143.51 0 0 0-68.4-15H628.8l-63.6 190.6h804.2l-127 389.6h-804l-63.6 190.6h891.8a246.33 246.33 0 0 0 77.8-15c25-14.2 53.6-28.6 77.8-48.6a382.69 382.69 0 0 0 63.6-63.6 432.2 432.2 0 0 0 39.2-73.4l117.8-370.4a137.38 137.38 0 0 0 9.8-77.6z\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M882.2 911.6H409l-63.6 176.2h478z\"\n}));\n\nfunction SvgIconDashColour(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 2000 2000\",\n width: 2500,\n height: 2500,\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIconDashColour);\nexport default __webpack_public_path__ + \"static/media/icon-dash-colour.e01c021b.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", null, /*#__PURE__*/React.createElement(\"polygon\", {\n fill: \"#343434\",\n points: \"127.9611 0 125.1661 9.5 125.1661 285.168 127.9611 287.958 255.9231 212.32\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n fill: \"#8C8C8C\",\n points: \"127.962 0 0 212.32 127.962 287.959 127.962 154.158\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n fill: \"#3C3C3B\",\n points: \"127.9611 312.1866 126.3861 314.1066 126.3861 412.3056 127.9611 416.9066 255.9991 236.5866\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n fill: \"#8C8C8C\",\n points: \"127.962 416.9052 127.962 312.1852 0 236.5852\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n fill: \"#141414\",\n points: \"127.9611 287.9577 255.9211 212.3207 127.9611 154.1587\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n fill: \"#393939\",\n points: \"0.0009 212.3208 127.9609 287.9578 127.9609 154.1588\"\n}));\n\nfunction SvgIconEthereumColour(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"256px\",\n height: \"417px\",\n viewBox: \"0 0 256 417\",\n preserveAspectRatio: \"xMidYMid\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIconEthereumColour);\nexport default __webpack_public_path__ + \"static/media/icon-ethereum-colour.761723a2.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"circle\", {\n fill: \"#989898\",\n cx: 52,\n cy: 32,\n r: 32\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFF\",\n d: \"m46.92598,12.31703l-4.97801,18.8088l-3.42705,1.32711l-1.64691,6.17189l3.42705,-1.29514l-2.8461,10.76083l30.60893,0l2.09993,-7.98401l-18.42505,0l2.09993,-7.82412l3.3631,-1.26316l1.6469,-6.17188l-3.36309,1.29513l3.6509,-13.83611l-12.21053,0z\"\n});\n\nfunction SvgIconLitecoinColour(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 104,\n height: 64,\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIconLitecoinColour);\nexport default __webpack_public_path__ + \"static/media/icon-litecoin-colour.bd861b5e.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"style\", {\n type: \"text/css\"\n}, \"\\n\\t.st0{fill:#231F20;}\\n\\t.st1{fill:#F4B728;}\\n\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n className: \"st0\",\n d: \"M245.4,20C121.1,20,20,121.1,20,245.4s101.1,225.4,225.4,225.4s225.4-101.1,225.4-225.4S369.7,20,245.4,20z M245.4,433.6c-103.8,0-188.2-84.4-188.2-188.2S141.6,57.2,245.4,57.2s188.2,84.4,188.2,188.2S349.2,433.6,245.4,433.6z\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"circle\", {\n className: \"st1\",\n cx: 245.4,\n cy: 245.4,\n r: 177.6\n});\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"polygon\", {\n className: \"st0\",\n points: \"165,315.5 165,349.9 226.5,349.9 226.5,387.6 264.3,387.6 264.3,349.9 325.8,349.9 325.8,304.4 230.4,304.4 325.8,175 325.8,140.6 264.3,140.6 264.3,103 226.5,103 226.5,140.6 165,140.6 165,186.2 260.4,186.2 \"\n});\n\nfunction SvgIconZcashColour(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Layer_1\",\n x: \"0px\",\n y: \"0px\",\n viewBox: \"0 0 493.3 490.2\",\n style: {\n enableBackground: \"new 0 0 493.3 490.2\"\n },\n xmlSpace: \"preserve\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), _ref2, title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"headerArtboard 7\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref3, _ref4, _ref5);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgIconZcashColour);\nexport default __webpack_public_path__ + \"static/media/icon-zcash-colour.68b1c20b.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles } from '@material-ui/core'\nimport React from 'react'\n\nimport { Button } from 'src/components/buttons'\nimport { H1, P } from 'src/components/typography'\nimport { ReactComponent as BitcoinLogo } from 'src/styling/logos/icon-bitcoin-colour.svg'\nimport { ReactComponent as BitcoinCashLogo } from 'src/styling/logos/icon-bitcoincash-colour.svg'\nimport { ReactComponent as DashLogo } from 'src/styling/logos/icon-dash-colour.svg'\nimport { ReactComponent as EthereumLogo } from 'src/styling/logos/icon-ethereum-colour.svg'\nimport { ReactComponent as LitecoinLogo } from 'src/styling/logos/icon-litecoin-colour.svg'\nimport { ReactComponent as ZCashLogo } from 'src/styling/logos/icon-zcash-colour.svg'\n\nconst styles = {\n logo: {\n maxHeight: 80,\n maxWidth: 200\n },\n title: {\n margin: [[24, 0, 32, 0]]\n },\n text: {\n margin: 0\n },\n button: {\n marginTop: 'auto',\n marginBottom: 58\n },\n modalContent: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n padding: [[0, 42]],\n flex: 1\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst getLogo = code => {\n switch (code) {\n case 'BTC':\n return BitcoinLogo\n case 'BCH':\n return BitcoinCashLogo\n case 'DASH':\n return DashLogo\n case 'ETH':\n return EthereumLogo\n case 'LTC':\n return LitecoinLogo\n case 'ZEC':\n return ZCashLogo\n default:\n return null\n }\n}\n\nconst WizardSplash = ({ code, name, onContinue }) => {\n const classes = useStyles()\n const Logo = getLogo(code)\n\n return (\n \n \n Total Crypto Balance\n \n \n {getConfirmedTotal(fundingResponse.funding)}\n {fundingResponse.funding[0].fiatCode}\n \n \n ({signIfPositive(pendingTotal)} {pendingTotal} pending)\n \n
\n )}\n \n {selected && !viewHistory && selected.errorMsg && (\n \n
\n )}\n {selected && !viewHistory && !selected.errorMsg && (\n \n {selected.errorMsg} \n
\n \n
\n )}\n {selected && viewHistory && (\n \n
\n\n Balance ({selected.display})
\n\n \n {`${selected.confirmedBalance} ${selected.cryptoCode}`}\n \n \n {`(${signIfPositive(selected.pending)} ${\n selected.pending\n } pending)`}\n \n
\n\n \n \n {`= ${formatNumber(selected.fiatConfirmedBalance)} ${\n selected.fiatCode\n }`}\n \n \n {`(${signIfPositive(selected.fiatPending)} ${formatNumber(\n selected.fiatPending\n )} pending)`}\n \n
\n\n Address
\n\n \n \n \n {formatAddress(\n selected.cryptoCode,\n selected.fundingAddress\n )}\n \n \n \n
\n \n Scan to send {selected.display} \n
\n \n \n \n
\n
\n )}\n | \n Amount Entered\n | \n\n Balance After\n | \n\n Cash Value\n | \n\n Date\n | \n\n Time (h:m:s)\n | \n\n Performed By\n | \n \n \n {fundingHistory.map((it, idx) => (\n\n {it.cryptoAmount} {selected.cryptoCode}\n | \n\n {it.balance} {selected.cryptoCode}\n | \n\n {it.fiatValue} {selected.fiatCode}\n | \n\n {moment(it.date).format('YYYY-MM-DD')}\n | \n\n {moment(it.date).format('hh:mm:ss')}\n | \nadd | \n \n ))}\n
\n
\n )\n}\n\nexport default WizardSplash\n","import { makeStyles, Grid } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { Formik, Form, FastField } from 'formik'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { Button } from 'src/components/buttons'\n\nconst styles = {\n button: {\n margin: [['auto', 0, 32, 'auto']]\n },\n form: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column'\n },\n grid: {\n marginBottom: 24,\n marginTop: 12\n }\n}\n\nconst useStyles = makeStyles(styles)\nconst FormRenderer = ({\n validationSchema,\n elements,\n value,\n save,\n buttonLabel = 'Save changes',\n buttonClass,\n xs = 12\n}) => {\n const classes = useStyles()\n\n const initialValues = R.compose(\n R.mergeAll,\n R.map(({ code }) => ({ [code]: (value && value[code]) ?? '' }))\n )(elements)\n\n const values = R.merge(initialValues, value)\n\n return (\n Enable {name}
\n\n You are about to enable {name} on your system. This will allow you to\n use this cryptocurrency on your machines. To be able to do that, you’ll\n have to set up all the necessary 3rd party services.\n
\n \n\n Select a {displayName} or set up a new one\n
\n\n {!R.isEmpty(unfilled) && !R.isNil(unfilled) && (\n {\n dispatch({ type: 'new' })\n }}\n labelClassName={classes.radioLabel}\n radioClassName={classes.radio}\n options={[{ display: 'Set up new', code: true }]}\n />\n )}\n {isNew && (\n {\n dispatch({ type: 'form', form: it })\n }}\n />\n )}\n
\n {form && (\n \n {error && Failed to save }\n innerContinue({ [type]: selected })}>\n {label}\n \n
\n )}\n \n )\n}\n\nexport default WizardStep\n","import * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport Modal from 'src/components/Modal'\nimport schema from 'src/pages/Services/schemas'\nimport { toNamespace } from 'src/utils/config'\n\nimport WizardSplash from './WizardSplash'\nimport WizardStep from './WizardStep'\n\nconst LAST_STEP = 4\nconst MODAL_WIDTH = 554\n\nconst contains = crypto => R.compose(R.contains(crypto), R.prop('cryptos'))\nconst sameClass = type => R.propEq('class', type)\nconst filterConfig = (crypto, type) =>\n R.filter(it => sameClass(type)(it) && contains(crypto)(it))\n\nconst getItems = (accountsConfig, accounts, type, crypto) => {\n const fConfig = filterConfig(crypto, type)(accountsConfig)\n const find = code => accounts && accounts[code]\n\n const [filled, unfilled] = R.partition(({ code }) => {\n const account = find(code)\n if (!schema[code]) return true\n\n const { validationSchema } = schema[code]\n return validationSchema.isValidSync(account)\n })(fConfig)\n\n return { filled, unfilled }\n}\n\nconst Wizard = ({ coin, onClose, accountsConfig, accounts, save, error }) => {\n const [{ step, config, accountsToSave }, setState] = useState({\n step: 0,\n config: { active: true },\n accountsToSave: {}\n })\n\n const title = `Enable ${coin.display}`\n const isLastStep = step === LAST_STEP\n\n const tickers = { filled: filterConfig(coin.code, 'ticker')(accountsConfig) }\n const wallets = getItems(accountsConfig, accounts, 'wallet', coin.code)\n const exchanges = getItems(accountsConfig, accounts, 'exchange', coin.code)\n const zeroConfs = getItems(accountsConfig, accounts, 'zeroConf', coin.code)\n\n const getValue = code => R.find(R.propEq('code', code))(accounts)\n\n const onContinue = async (stepConfig, stepAccount) => {\n const newConfig = R.merge(config, stepConfig)\n const newAccounts = stepAccount\n ? R.merge(accountsToSave, stepAccount)\n : accountsToSave\n\n if (isLastStep) {\n return save(toNamespace(coin.code, newConfig), newAccounts)\n }\n\n setState({\n step: step + 1,\n config: newConfig,\n accountsToSave: newAccounts\n })\n }\n\n const getStepData = () => {\n switch (step) {\n case 1:\n return { type: 'ticker', ...tickers }\n case 2:\n return { type: 'wallet', ...wallets }\n case 3:\n return { type: 'exchange', ...exchanges }\n case 4:\n return { type: 'zeroConf', name: 'zero conf', ...zeroConfs }\n default:\n return null\n }\n }\n\n return (\n \n Please note that all values you set that were based on your prior fiat\n currency are still the same. If you need to adjust these to reflect the\n new fiat currency (such as minimum transaction amounts, fixed fees, and\n compliance triggers, for example), please do so now.\n
\n\n Also, if you have cash-out enabled, you must define new dispenser bill\n counts for the new currency for cash-out on the new currency to work.\n
\n\n \n Cancel\n \n \n Save\n \n
\n \n )\n}\n\nconst Locales = ({ name: SCREEN_KEY }) => {\n const [wizard, setWizard] = useState(false)\n const [onChangeFunction, setOnChangeFunction] = useState(null)\n const [isEditingDefault, setEditingDefault] = useState(false)\n const [isEditingOverrides, setEditingOverrides] = useState(false)\n const { data } = useQuery(GET_DATA)\n const [saveConfig, { error }] = useMutation(SAVE_CONFIG, {\n onCompleted: () => setWizard(false),\n refetchQueries: () => ['getData']\n })\n\n const [dataToSave, setDataToSave] = useState(null)\n\n const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)\n const wallets = data?.config && fromNamespace(namespaces.WALLETS)(data.config)\n\n const accountsConfig = data?.accountsConfig\n const accounts = data?.accounts ?? []\n const cryptoCurrencies = data?.cryptoCurrencies ?? []\n const locale = config && !R.isEmpty(config) ? config : localeDefaults\n const localeOverrides = locale.overrides ?? []\n\n const handleSave = it => {\n const newConfig = toNamespace(SCREEN_KEY)(it.locale[0])\n\n if (\n config.fiatCurrency &&\n newConfig.locale_fiatCurrency !== config.fiatCurrency\n )\n return setDataToSave(newConfig)\n\n return save(newConfig)\n }\n\n const save = config => {\n setDataToSave(null)\n return saveConfig({ variables: { config } })\n }\n\n const saveOverrides = it => {\n const config = toNamespace(SCREEN_KEY)(it)\n return saveConfig({ variables: { config } })\n }\n\n const onChangeCoin = (prev, curr, setValue) => {\n const coin = R.difference(curr, prev)[0]\n if (!coin) return setValue(curr)\n\n const namespaced = fromNamespace(coin)(wallets)\n if (!WalletSchema.isValidSync(namespaced)) {\n setOnChangeFunction(() => () => setValue(curr))\n setWizard(coin)\n return\n }\n\n setValue(curr)\n }\n\n const onEditingDefault = (it, editing) => setEditingDefault(editing)\n const onEditingOverrides = (it, editing) => setEditingOverrides(editing)\n\n const wizardSave = it =>\n save(toNamespace(namespaces.WALLETS)(it)).then(it => {\n onChangeFunction()\n setOnChangeFunction(null)\n return it\n })\n\n return (\n <>\n \n \n
\n )\n}\n\nexport default Tile\n","import { makeStyles } from '@material-ui/core/styles'\nimport moment from 'moment'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport typographyStyles from 'src/components/typography/styles'\nimport { ReactComponent as Arrow } from 'src/styling/icons/arrow/month_change.svg'\nimport { ReactComponent as RightArrow } from 'src/styling/icons/arrow/month_change_right.svg'\nimport { primaryColor, zircon } from 'src/styling/variables'\n\nimport Tile from './Tile'\n\nconst { p, label2 } = typographyStyles\n\nconst styles = {\n wrapper: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center'\n },\n button: {\n outline: 'none'\n },\n navbar: {\n extend: p,\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n width: '100%',\n padding: [[15, 15]],\n color: primaryColor,\n '& button': {\n display: 'flex',\n alignItems: 'center',\n padding: 0,\n border: 'none',\n backgroundColor: zircon,\n cursor: 'pointer',\n borderRadius: '50%',\n width: 20,\n height: 20,\n position: 'relative',\n overflow: 'hidden',\n '& svg': {\n position: 'absolute',\n left: 0\n }\n }\n },\n table: {\n borderCollapse: 'collapse',\n width: '100%',\n color: primaryColor,\n '& tr': {\n '&:first-child': {\n paddingLeft: 5\n },\n '&:last-child': {\n paddingRight: 5\n }\n },\n '& th, & td': {\n margin: 0,\n padding: [[3, 0, 3, 0]]\n },\n '& th': {\n extend: label2\n }\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {\n const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(moment())\n\n const classes = useStyles()\n\n const weekdays = moment.weekdaysMin().map(day => day.slice(0, 1))\n const monthLength = month =>\n Number.parseInt(\n moment(month)\n .endOf('month')\n .format('D')\n )\n\n const monthdays = month => {\n const lastMonth = moment(month).subtract(1, 'month')\n const lastMonthRange = R.range(\n 0,\n moment(month)\n .startOf('month')\n .weekday()\n ).reverse()\n const lastMonthDays = R.map(i =>\n moment(lastMonth)\n .endOf('month')\n .subtract(i, 'days')\n )(lastMonthRange)\n\n const thisMonthRange = R.range(0, monthLength(month))\n const thisMonthDays = R.map(i =>\n moment(month)\n .startOf('month')\n .add(i, 'days')\n )(thisMonthRange)\n\n const nextMonth = moment(month).add(1, 'month')\n const nextMonthRange = R.range(\n 0,\n 42 - lastMonthDays.length - thisMonthDays.length\n )\n const nextMonthDays = R.map(i =>\n moment(nextMonth)\n .startOf('month')\n .add(i, 'days')\n )(nextMonthRange)\n\n return R.concat(R.concat(lastMonthDays, thisMonthDays), nextMonthDays)\n }\n\n const getRow = (month, row) => monthdays(month).slice(row * 7 - 7, row * 7)\n\n const handleNavPrev = currentMonth => {\n const prevMonth = moment(currentMonth).subtract(1, 'month')\n if (!minDate) setCurrentDisplayedMonth(prevMonth)\n else {\n setCurrentDisplayedMonth(\n prevMonth.isSameOrAfter(minDate, 'month')\n ? prevMonth\n : currentDisplayedMonth\n )\n }\n }\n const handleNavNext = currentMonth => {\n const nextMonth = moment(currentMonth).add(1, 'month')\n if (!maxDate) setCurrentDisplayedMonth(nextMonth)\n else {\n setCurrentDisplayedMonth(\n nextMonth.isSameOrBefore(maxDate, 'month')\n ? nextMonth\n : currentDisplayedMonth\n )\n }\n }\n\n return (\n \n \n
\n \n \n \n
\n
\n )\n}\n\nexport default Calendar\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { useState, useEffect } from 'react'\n\nimport Calendar from './Calendar'\n\nconst styles = {\n wrapper: {\n backgroundColor: 'white',\n borderRadius: 10\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {\n const [from, setFrom] = useState(null)\n const [to, setTo] = useState(null)\n\n useEffect(() => {\n onRangeChange(from, to)\n }, [from, onRangeChange, to])\n\n const classes = useStyles()\n\n const handleSelect = (day, minDate, maxDate) => {\n if (\n (maxDate && day.isAfter(maxDate, 'day')) ||\n (minDate && day.isBefore(minDate, 'day'))\n )\n return\n\n if (from && !to && day.isBefore(from, 'day')) {\n setTo(from)\n setFrom(day)\n return\n }\n\n if (from && !to && day.isSameOrAfter(from, 'day')) {\n setTo(day)\n return\n }\n\n setFrom(day)\n setTo(null)\n }\n\n return (\n <>\n \n handleNavPrev(currentDisplayedMonth)}>\n handleNavNext(currentDisplayedMonth)}>\n
\n | {day} | \n ))}\n
|---|
\n
\n \n )\n}\n\nexport default DateRangePicker\n","import { useLazyQuery } from '@apollo/react-hooks'\nimport { makeStyles, ClickAwayListener } from '@material-ui/core'\nimport classnames from 'classnames'\nimport FileSaver from 'file-saver'\nimport moment from 'moment'\nimport * as R from 'ramda'\nimport React, { useState, useCallback } from 'react'\n\nimport { FeatureButton, Link } from 'src/components/buttons'\nimport { ReactComponent as Arrow } from 'src/styling/icons/arrow/download_logs.svg'\nimport { ReactComponent as DownloadInverseIcon } from 'src/styling/icons/button/download/white.svg'\nimport { ReactComponent as Download } from 'src/styling/icons/button/download/zodiac.svg'\nimport { primaryColor, offColor, zircon } from 'src/styling/variables'\n\nimport Popper from './Popper'\nimport DateRangePicker from './date-range-picker/DateRangePicker'\nimport { RadioGroup } from './inputs'\nimport typographyStyles from './typography/styles'\n\nconst { info1, label1, label2, h4 } = typographyStyles\n\nconst dateContainerStyles = {\n wrapper: {\n height: 46,\n width: 99\n },\n container: {\n display: 'flex'\n },\n monthWeekDayContainer: {\n display: 'flex',\n flexDirection: 'column'\n },\n label: {\n extend: label1,\n lineHeight: 1.33,\n color: primaryColor\n },\n bigNumber: {\n extend: info1,\n lineHeight: 1,\n marginRight: 7\n },\n monthYear: {\n extend: label2,\n lineHeight: 1.17,\n color: primaryColor\n },\n weekDay: {\n extend: label1,\n lineHeight: 1.33,\n color: offColor\n }\n}\n\nconst dateContainerUseStyles = makeStyles(dateContainerStyles)\n\nconst DateContainer = ({ date, children, ...props }) => {\n const classes = dateContainerUseStyles()\n\n return (\n \n
\n )\n}\n\nconst styles = {\n popoverContent: {\n width: 280\n },\n popoverHeader: {\n extend: h4,\n padding: [[15, 15, 0, 15]]\n },\n radioButtonsContainer: {\n padding: [[5, 15, 5, 15]]\n },\n radioButtons: {\n display: 'flex',\n justifyContent: 'space-between',\n flexDirection: 'row',\n color: primaryColor\n },\n dateRangePickerShowing: {\n display: 'block',\n height: '100%'\n },\n dateRangePickerHidden: {\n display: 'none',\n height: 0\n },\n download: {\n padding: [[10, 15]]\n },\n dateContainerWrapper: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n position: 'relative',\n backgroundColor: zircon,\n padding: [[0, 15]],\n minHeight: 70\n },\n arrowContainer: {\n position: 'absolute',\n left: 125,\n top: 26\n },\n arrow: {\n margin: 'auto'\n }\n}\n\nconst useStyles = makeStyles(styles)\nconst ALL = 'all'\nconst RANGE = 'range'\n\nconst LogsDownloaderPopover = ({ name, query, args, title, getLogs }) => {\n const [selectedRadio, setSelectedRadio] = useState(ALL)\n const [range, setRange] = useState({ from: null, until: null })\n const [anchorEl, setAnchorEl] = useState(null)\n const [fetchLogs] = useLazyQuery(query, {\n onCompleted: data => createLogsFile(getLogs(data), range)\n })\n\n const classes = useStyles()\n\n const dateRangePickerClasses = {\n [classes.dateRangePickerShowing]: selectedRadio === RANGE,\n [classes.dateRangePickerHidden]: selectedRadio === ALL\n }\n\n const handleRadioButtons = evt => {\n const selectedRadio = R.path(['target', 'value'])(evt)\n setSelectedRadio(selectedRadio)\n if (selectedRadio === ALL) setRange({ from: null, until: null })\n }\n\n const handleRangeChange = useCallback(\n (from, until) => {\n setRange({ from, until })\n },\n [setRange]\n )\n\n const downloadLogs = (range, args, fetchLogs) => {\n if (selectedRadio === ALL) {\n fetchLogs({\n variables: {\n ...args\n }\n })\n }\n\n if (!range || !range.from) return\n if (range.from && !range.until) range.until = moment()\n\n if (selectedRadio === RANGE) {\n fetchLogs({\n variables: {\n ...args,\n from: range.from,\n until: range.until\n }\n })\n }\n }\n\n const createLogsFile = (logs, range) => {\n const formatDateFile = date => {\n return moment(date).format('YYYY-MM-DD_HH-mm')\n }\n\n const blob = new window.Blob([logs], {\n type: 'text/plain;charset=utf-8'\n })\n\n FileSaver.saveAs(\n blob,\n selectedRadio === ALL\n ? `${formatDateFile(new Date())}_${name}`\n : `${formatDateFile(range.from)}_${formatDateFile(range.until)}_${name}`\n )\n }\n\n const handleOpenRangePicker = event => {\n setAnchorEl(anchorEl ? null : event.currentTarget)\n }\n\n const handleClickAway = () => {\n setAnchorEl(null)\n }\n\n const radioButtonOptions = [\n { display: 'All logs', code: ALL },\n { display: 'Date range', code: RANGE }\n ]\n\n const open = Boolean(anchorEl)\n const id = open ? 'date-range-popover' : undefined\n\n return (\n {children}
\n {date && (\n <>\n \n
\n \n )}\n {date.format('D')}
\n \n {`${date.format(\n 'MMM'\n )} ${date.format('YYYY')}`}\n {date.format('dddd')}\n
\n \n \n \n
\n \n
\n {title}
\n \n
\n {selectedRadio === RANGE && (\n \n
\n )}\n \n {range && (\n <>\n From \n To \n \n )}\n
\n \n
\n \n downloadLogs(range, args, fetchLogs)}>\n Download\n \n
\n \n
\n \n Machine Logs \n {logsResponse && (\n
\n \n R.path(['machineLogsCsv'])(logs)}\n />\n {saveMessage} \n
\n )}\n \n it.name}\n data={machineResponse?.machines || []}\n isSelected={isSelected}\n onClick={setSelected}\n />\n
\n \n )\n}\n\nexport default Logs\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport gql from 'graphql-tag'\nimport React from 'react'\nimport * as Yup from 'yup'\n\nimport { Table as EditableTable } from 'src/components/editableTable'\nimport { CashOut } from 'src/components/inputs/cashbox/Cashbox'\nimport { NumberInput } from 'src/components/inputs/formik'\nimport TitleSection from 'src/components/layout/TitleSection'\nimport { fromNamespace } from 'src/utils/config'\n\nimport styles from './CashCassettes.styles.js'\n\nconst useStyles = makeStyles(styles)\n\nconst ValidationSchema = Yup.object().shape({\n name: Yup.string().required(),\n cassette1: Yup.number()\n .label('Cassette 1 (top)')\n .required()\n .integer()\n .min(0)\n .max(500),\n cassette2: Yup.number()\n .label('Cassette 2 (bottom)')\n .required()\n .integer()\n .min(0)\n .max(500)\n})\n\nconst GET_MACHINES_AND_CONFIG = gql`\n query getData {\n machines {\n name\n id: deviceId\n cassette1\n cassette2\n }\n config\n }\n`\n\nconst RESET_CASHOUT_BILLS = gql`\n mutation MachineAction(\n $deviceId: ID!\n $action: MachineAction!\n $cassette1: Int!\n $cassette2: Int!\n ) {\n machineAction(\n deviceId: $deviceId\n action: $action\n cassette1: $cassette1\n cassette2: $cassette2\n ) {\n deviceId\n cassette1\n cassette2\n }\n }\n`\n\nconst CashCassettes = () => {\n const classes = useStyles()\n\n const { data } = useQuery(GET_MACHINES_AND_CONFIG)\n\n const [resetCashOut, { error }] = useMutation(RESET_CASHOUT_BILLS, {\n refetchQueries: () => ['getData']\n })\n\n const cashout = data?.config && fromNamespace('cashOut')(data.config)\n const locale = data?.config && fromNamespace('locale')(data.config)\n const fiatCurrency = locale?.fiatCurrency\n\n const onSave = (...[, { id, cassette1, cassette2 }]) => {\n return resetCashOut({\n variables: {\n action: 'resetCashOutBills',\n deviceId: id,\n cassette1,\n cassette2\n }\n })\n }\n\n const getCashoutSettings = id => fromNamespace(id)(cashout)\n const isCashOutDisabled = ({ id }) => !getCashoutSettings(id).active\n\n const elements = [\n {\n name: 'name',\n header: 'Machine',\n width: 254,\n view: name => <>{name},\n input: ({ field: { value: name } }) => <>{name}\n },\n {\n name: 'cassette1',\n header: 'Cassette 1 (Top)',\n width: 265,\n stripe: true,\n view: (value, { id }) => (\n \n \n
\n
\n \n {children}\n {onClose && (\n \n \n )}\n
\n )\n}\n\nexport const ConfirmDialog = memo(\n ({\n title = 'Confirm action',\n errorMessage = 'This action requires confirmation',\n open,\n toBeConfirmed,\n saveButtonAlwaysEnabled = false,\n message,\n confirmationMessage = `Write '${toBeConfirmed}' to confirm this action`,\n onConfirmed,\n onDissmised,\n initialValue = '',\n ...props\n }) => {\n const classes = useStyles()\n const [value, setValue] = useState(initialValue)\n const [error, setError] = useState(false)\n const handleChange = event => setValue(event.target.value)\n\n const innerOnClose = () => {\n setValue('')\n setError(false)\n onDissmised()\n }\n\n const isOnErrorState =\n (!saveButtonAlwaysEnabled && toBeConfirmed !== value) || value === ''\n\n return (\n \n )\n }\n)\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/edit/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0,10 L0,10 C0,10.9942 0.8058,11.8 1.8,11.8 L10.2,11.8 C11.1942,11.8 12,10.9942 12,10\",\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\",\n points: \"3 6.86666667 8.86666667 1 11 3.13333333 5.13333333 9 3 9\"\n}));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.958fe55d.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/edit/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0,10 L0,10 C0,10.9942 0.8058,11.8 1.8,11.8 L10.2,11.8 C11.1942,11.8 12,10.9942 12,10\",\n id: \"Stroke-1\",\n stroke: \"#1B2559\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-3\",\n stroke: \"#1B2559\",\n points: \"3 6.86666667 8.86666667 1 11 3.13333333 5.13333333 9 3 9\"\n}));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.1bc04c23.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/link/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-7\",\n stroke: \"#1B2559\",\n strokeWidth: 1.2\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-1\",\n points: \"12 6.66678 12 12.00018 0 12.00018 0 0.00018 5.3334 0.00018\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"8.66658 0 12.00018 0 12.00018 3.3336\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 6,\n x2: 12,\n y2: 0,\n id: \"Stroke-5\"\n})));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.cdf82496.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/reboot/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-3\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.57419317,11.1560104 C2.91506589,10.8661403 2.29620875,10.4522182 1.75493083,9.91362078 C-0.568892549,7.60089351 -0.587250991,3.86936104 1.71406849,1.57845195 C2.03057585,1.26367293 2.37407977,0.992496226 2.73740775,0.764921841\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"3.37563213 1.84831169 3.36911784 0.595324675 2.18174122 4.15223411e-14\"\n})), /*#__PURE__*/React.createElement(\"line\", {\n x1: 5.92223784,\n y1: 7.57277922,\n x2: 5.92223784,\n y2: 3.98212987,\n id: \"Stroke-9\"\n}), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\",\n transform: \"translate(9.818105, 6.000000) scale(-1, -1) translate(-9.818105, -6.000000) translate(7.636287, 0.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.57419317,11.1560104 C2.91506589,10.8661403 2.29620875,10.4522182 1.75493083,9.91362078 C-0.568892549,7.60089351 -0.587250991,3.86936104 1.71406849,1.57845195 C2.03057585,1.26367293 2.37407977,0.992496226 2.73740775,0.764921841\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"3.37563213 1.84831169 3.36911784 0.595324675 2.18174122 4.15223411e-14\"\n}))));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"-0.493 -0.5 12.993 13\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.fe6ed797.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/reboot/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-3\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.57419317,11.1560104 C2.91506589,10.8661403 2.29620875,10.4522182 1.75493083,9.91362078 C-0.568892549,7.60089351 -0.587250991,3.86936104 1.71406849,1.57845195 C2.03057585,1.26367293 2.37407977,0.992496226 2.73740775,0.764921841\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"3.37563213 1.84831169 3.36911784 0.595324675 2.18174122 4.15223411e-14\"\n})), /*#__PURE__*/React.createElement(\"line\", {\n x1: 5.92223784,\n y1: 7.57277922,\n x2: 5.92223784,\n y2: 3.98212987,\n id: \"Stroke-9\"\n}), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\",\n transform: \"translate(9.818105, 6.000000) scale(-1, -1) translate(-9.818105, -6.000000) translate(7.636287, 0.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.57419317,11.1560104 C2.91506589,10.8661403 2.29620875,10.4522182 1.75493083,9.91362078 C-0.568892549,7.60089351 -0.587250991,3.86936104 1.71406849,1.57845195 C2.03057585,1.26367293 2.37407977,0.992496226 2.73740775,0.764921841\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"3.37563213 1.84831169 3.36911784 0.595324675 2.18174122 4.15223411e-14\"\n}))));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"-0.493 -0.5 12.993 13\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.9cfc97dd.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/shut-down/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\",\n transform: \"translate(1.000000, 0.000000)\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.7735,2 C9.116,2.89710351 10,4.4271328 10,6.16330077 C10,8.92665975 7.7615,11.1666667 5,11.1666667 C2.2385,11.1666667 0,8.92665975 0,6.16330077 C0,4.43663919 0.8745,2.91361461 2.204,2.01450976\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 5,\n y1: 0.75,\n x2: 5,\n y2: 3.25,\n id: \"Stroke-3\"\n})));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.fa4681e8.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/shut-down/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\",\n transform: \"translate(1.000000, 0.000000)\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.7735,2 C9.116,2.89710351 10,4.4271328 10,6.16330077 C10,8.92665975 7.7615,11.1666667 5,11.1666667 C2.2385,11.1666667 0,8.92665975 0,6.16330077 C0,4.43663919 0.8745,2.91361461 2.204,2.01450976\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 5,\n y1: 0.75,\n x2: 5,\n y2: 3.25,\n id: \"Stroke-3\"\n})));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.b27733af.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/unpair/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-12\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-1\",\n points: \"3.75 6 2.25 6 0 3.75 3.75 0 6.75 3\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"8.25 6 9.75 6 12 8.25 8.25 12 5.25 9\"\n})), /*#__PURE__*/React.createElement(\"line\", {\n x1: 8.25,\n y1: 3,\n x2: 8.25,\n y2: 1.5,\n id: \"Stroke-6\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 9.75,\n y1: 3,\n x2: 10.5,\n y2: 2.25,\n id: \"Stroke-7\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 9.75,\n y1: 4.5,\n x2: 11.25,\n y2: 4.5,\n id: \"Stroke-8\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 2.25,\n y1: 7.5,\n x2: 0.75,\n y2: 7.5,\n id: \"Stroke-9\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 2.25,\n y1: 9,\n x2: 1.5,\n y2: 9.75,\n id: \"Stroke-10\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 3.75,\n y1: 9,\n x2: 3.75,\n y2: 10.5,\n id: \"Stroke-11\"\n})));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.f97c75d2.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/button/unpair/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-12\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-1\",\n points: \"3.75 6 2.25 6 0 3.75 3.75 0 6.75 3\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"8.25 6 9.75 6 12 8.25 8.25 12 5.25 9\"\n})), /*#__PURE__*/React.createElement(\"line\", {\n x1: 8.25,\n y1: 3,\n x2: 8.25,\n y2: 1.5,\n id: \"Stroke-6\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 9.75,\n y1: 3,\n x2: 10.5,\n y2: 2.25,\n id: \"Stroke-7\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 9.75,\n y1: 4.5,\n x2: 11.25,\n y2: 4.5,\n id: \"Stroke-8\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 2.25,\n y1: 7.5,\n x2: 0.75,\n y2: 7.5,\n id: \"Stroke-9\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 2.25,\n y1: 9,\n x2: 1.5,\n y2: 9.75,\n id: \"Stroke-10\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 3.75,\n y1: 9,\n x2: 3.75,\n y2: 10.5,\n id: \"Stroke-11\"\n})));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.aa028a2c.svg\";\nexport { ForwardRef as ReactComponent };","import { fade } from '@material-ui/core/styles/colorManipulator'\n\nimport {\n detailsRowStyles,\n labelStyles\n} from 'src/pages/Transactions/Transactions.styles'\nimport { spacer, comet, primaryColor, fontSize4 } from 'src/styling/variables'\n\nconst machineDetailsStyles = {\n ...detailsRowStyles,\n colDivider: {\n width: 1,\n margin: [[spacer * 2, spacer * 4]],\n backgroundColor: comet,\n border: 'none'\n },\n inlineChip: {\n marginInlineEnd: '0.25em'\n },\n stack: {\n display: 'flex',\n flexDirection: 'row'\n },\n wrapper: {\n display: 'flex',\n marginTop: 24,\n marginBottom: 32,\n fontSize: fontSize4\n },\n row: {\n display: 'flex',\n flexDirection: 'row',\n marginBottom: 36\n },\n list: {\n padding: 0,\n margin: 0,\n listStyle: 'none'\n },\n item: {\n height: spacer * 3,\n marginBottom: spacer * 1.5\n },\n link: {\n color: primaryColor,\n textDecoration: 'none'\n },\n divider: {\n margin: '0 1rem'\n },\n mr: {\n marginRight: spacer\n },\n separator: {\n width: 1,\n height: 170,\n zIndex: 1,\n marginRight: 60,\n marginLeft: 'auto',\n background: fade(comet, 0.5)\n }\n}\n\nexport { labelStyles, machineDetailsStyles }\n","import { useMutation } from '@apollo/react-hooks'\nimport { Grid, Divider } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport moment from 'moment'\nimport React, { useState } from 'react'\n\nimport { ConfirmDialog } from 'src/components/ConfirmDialog'\nimport { Status } from 'src/components/Status'\nimport ActionButton from 'src/components/buttons/ActionButton'\nimport { ReactComponent as EditReversedIcon } from 'src/styling/icons/button/edit/white.svg'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/button/edit/zodiac.svg'\nimport { ReactComponent as LinkIcon } from 'src/styling/icons/button/link/zodiac.svg'\nimport { ReactComponent as RebootReversedIcon } from 'src/styling/icons/button/reboot/white.svg'\nimport { ReactComponent as RebootIcon } from 'src/styling/icons/button/reboot/zodiac.svg'\nimport { ReactComponent as ShutdownReversedIcon } from 'src/styling/icons/button/shut down/white.svg'\nimport { ReactComponent as ShutdownIcon } from 'src/styling/icons/button/shut down/zodiac.svg'\nimport { ReactComponent as UnpairReversedIcon } from 'src/styling/icons/button/unpair/white.svg'\nimport { ReactComponent as UnpairIcon } from 'src/styling/icons/button/unpair/zodiac.svg'\n\nimport { labelStyles, machineDetailsStyles } from './MachineDetailsCard.styles'\n\nconst MACHINE_ACTION = gql`\n mutation MachineAction(\n $deviceId: ID!\n $action: MachineAction!\n $newName: String\n ) {\n machineAction(deviceId: $deviceId, action: $action, newName: $newName) {\n deviceId\n }\n }\n`\n\nconst supportArtices = [\n {\n // Default article for non-maped statuses\n code: undefined,\n label: 'Troubleshooting',\n article:\n 'https://support.lamassu.is/hc/en-us/categories/115000075249-Troubleshooting'\n }\n // TODO add Stuck and Fully Functional statuses articles for the new-admins\n]\n\nconst article = ({ code: status }) =>\n supportArtices.find(({ code: article }) => article === status)\n\nconst useLStyles = makeStyles(labelStyles)\n\nconst Label = ({ children }) => {\n const classes = useLStyles()\n\n return {children}
\n}\n\nconst useMDStyles = makeStyles(machineDetailsStyles)\n\nconst Container = ({ children, ...props }) => (\n - \n {machine.statuses.map((status, index) => (\n
- \n
\n \n ))}\n
- \n {machine.statuses\n .map(article)\n .map(({ label, article }, index) => (\n
- \n
\n \n \n ))}\n
\n \n setAction({\n command: 'Rename',\n confirmationMessage: 'Write the new name for this machine'\n })\n }>\n Rename\n \n \n setAction({\n command: 'Unpair'\n })\n }>\n Unpair\n \n \n setAction({\n command: 'Reboot'\n })\n }>\n Reboot\n \n \n setAction({\n command: 'Shutdown',\n message:\n 'In order to bring it back online, the machine will need to be visited and its power reset.'\n })\n }>\n Shutdown\n \n
\n \n
\n \n Machine Status \n
\n \n
\n \n
\n \n
\n \n setEditing(true)}\n className={classes.button}\n disabled={disabled}>\n {disabled ?
\n )\n}\n\nexport default Header\n","export default {\n header: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: 16,\n height: 26,\n margin: 0\n },\n title: {\n flexShrink: 2,\n margin: 0,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n button: {\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer',\n marginLeft: 8\n },\n editingButtons: {\n display: 'flex',\n flexShrink: 0,\n marginLeft: 16,\n justifyContent: 'space-between',\n width: 110\n }\n}\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { useFormikContext, Field as FormikField } from 'formik'\nimport React from 'react'\n\nimport { NumberInput } from 'src/components/inputs/formik'\nimport { Label1, Info1, TL2 } from 'src/components/typography'\n\nimport styles from './EditableNumber.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst EditableNumber = ({\n label,\n name,\n editing,\n displayValue,\n decoration,\n className,\n decimalPlaces = 0,\n width = 80\n}) => {\n const classes = useStyles({ width, editing })\n const { values } = useFormikContext()\n\n const classNames = {\n [classes.fieldWrapper]: true,\n className\n }\n\n return (\n {title}
\n {!editing && (\n\n \n Save\n \n \n Cancel\n \n
\n )}\n \n {label && {label} }\n
\n )\n}\n\nexport default EditableNumber\n","export default {\n text: {\n margin: [[7, 0, 7, 1]]\n },\n fieldWrapper: {\n height: 53\n },\n valueWrapper: {\n display: 'flex',\n alignItems: 'baseline'\n },\n label: {\n margin: 0\n },\n decoration: {\n margin: [[0, 0, 0, 7]]\n }\n}\n","import { Form, Formik } from 'formik'\nimport React, { useContext, useState } from 'react'\nimport * as Yup from 'yup'\n\nimport PromptWhenDirty from 'src/components/PromptWhenDirty'\n\nimport NotificationsCtx from '../NotificationsContext'\nimport { transformNumber } from '../helper'\n\nimport Header from './EditHeader'\nimport EditableNumber from './EditableNumber'\n\nconst SingleFieldEditableNumber = ({\n title,\n label,\n width = 80,\n min = 0,\n max = 9999999,\n name,\n section,\n className\n}) => {\n const [saving, setSaving] = useState(false)\n\n const innerSave = async (section, value) => {\n if (saving) return\n\n setSaving(true)\n\n // no response means the save failed\n await save(section, value)\n\n setSaving(false)\n }\n\n const {\n save,\n data,\n currency,\n isEditing,\n isDisabled,\n setEditing\n } = useContext(NotificationsCtx)\n\n const schema = Yup.object().shape({\n [name]: Yup.number()\n .transform(transformNumber)\n .integer()\n .min(min)\n .max(max)\n .nullable()\n })\n\n return (\n \n {!editing && (\n {displayValue(values[name])} \n )}\n {editing && (\n {decoration} \n
\n \n setEditing(LOW_BALANCE_KEY, it)}\n width={fieldWidth}\n />\n\n \n\n setEditing(HIGH_BALANCE_KEY, it)}\n width={fieldWidth}\n />\n
\n )\n}\n\nexport default CryptoBalanceAlerts\n","export default {\n cryptoBalanceAlerts: {\n display: 'flex',\n marginBottom: 36,\n height: 135,\n alignItems: 'center'\n },\n cryptoBalanceAlertsForm: {\n width: 222,\n marginRight: 32\n },\n cryptoBalanceAlertsSecondForm: {\n marginLeft: 50\n },\n vertSeparator: {\n width: 1,\n height: '100%',\n borderRight: [[1, 'solid', 'black']]\n }\n}\n","import * as R from 'ramda'\nimport React, { useContext } from 'react'\nimport * as Yup from 'yup'\n\nimport { Table as EditableTable } from 'src/components/editableTable'\nimport { NumberInput } from 'src/components/inputs/formik'\nimport Autocomplete from 'src/components/inputs/formik/Autocomplete.js'\n\nimport NotificationsCtx from '../NotificationsContext'\nimport { transformNumber } from '../helper'\n\nconst HIGH_BALANCE_KEY = 'highBalance'\nconst LOW_BALANCE_KEY = 'lowBalance'\nconst CRYPTOCURRENCY_KEY = 'cryptoCurrency'\nconst NAME = 'cryptoBalanceOverrides'\n\nconst CryptoBalanceOverrides = ({ section }) => {\n const {\n cryptoCurrencies = [],\n data,\n save,\n currency,\n isDisabled,\n setEditing\n } = useContext(NotificationsCtx)\n const setupValues = data?.cryptoBalanceOverrides ?? []\n const innerSetEditing = it => setEditing(NAME, it)\n\n const onDelete = id => {\n const newOverrides = {\n cryptoBalanceOverrides: R.reject(it => it.id === id, setupValues)\n }\n return save(newOverrides)\n }\n\n const overridenCryptos = R.map(R.prop(CRYPTOCURRENCY_KEY))(setupValues)\n const suggestionFilter = R.filter(\n it => !R.contains(it.code, overridenCryptos)\n )\n const suggestions = suggestionFilter(cryptoCurrencies)\n\n const findSuggestion = it => {\n const coin = R.compose(R.find(R.propEq('code', it?.cryptoCurrency)))(\n cryptoCurrencies\n )\n return coin ? [coin] : []\n }\n\n const initialValues = {\n [CRYPTOCURRENCY_KEY]: null,\n [LOW_BALANCE_KEY]: '',\n [HIGH_BALANCE_KEY]: ''\n }\n\n const notesMin = 0\n const currencyMax = 9999999\n const validationSchema = Yup.object().shape(\n {\n [CRYPTOCURRENCY_KEY]: Yup.string()\n .label('Cryptocurrency')\n .nullable()\n .required(),\n [LOW_BALANCE_KEY]: Yup.number()\n .label('Low Balance')\n .when(HIGH_BALANCE_KEY, {\n is: HIGH_BALANCE_KEY => !HIGH_BALANCE_KEY,\n then: Yup.number().required()\n })\n .transform(transformNumber)\n .integer()\n .min(notesMin)\n .max(currencyMax)\n .nullable(),\n [HIGH_BALANCE_KEY]: Yup.number()\n .label('High Balance')\n .when(LOW_BALANCE_KEY, {\n is: LOW_BALANCE_KEY => !LOW_BALANCE_KEY,\n then: Yup.number().required()\n })\n .transform(transformNumber)\n .integer()\n .min(notesMin)\n .max(currencyMax)\n .nullable()\n },\n [LOW_BALANCE_KEY, HIGH_BALANCE_KEY]\n )\n\n const viewCrypto = it =>\n R.compose(\n R.path(['display']),\n R.find(R.propEq('code', it))\n )(cryptoCurrencies)\n\n const elements = [\n {\n name: CRYPTOCURRENCY_KEY,\n header: 'Cryptocurrency',\n width: 166,\n size: 'sm',\n view: viewCrypto,\n input: Autocomplete,\n inputProps: {\n options: it => R.concat(suggestions, findSuggestion(it)),\n optionsLimit: null,\n valueProp: 'code',\n getLabel: R.path(['display'])\n }\n },\n {\n name: LOW_BALANCE_KEY,\n width: 155,\n textAlign: 'right',\n bold: true,\n input: NumberInput,\n suffix: currency,\n inputProps: {\n decimalPlaces: 2\n }\n },\n {\n name: HIGH_BALANCE_KEY,\n width: 155,\n textAlign: 'right',\n bold: true,\n input: NumberInput,\n suffix: currency,\n inputProps: {\n decimalPlaces: 2\n }\n }\n ]\n\n return (\n | Channel | \n {Object.keys(sizes).map(it => (\n\n {startCase(it)}\n | \n ))}\n \n \n
|---|
\n {label} }\n
\n )\n})\n\nconst CoinATMRadar = memo(() => {\n const classes = useStyles()\n\n const { data } = useQuery(GET_CONFIG)\n\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n refetchQueries: ['getData']\n })\n\n const save = it =>\n saveConfig({\n variables: { config: toNamespace(namespaces.COIN_ATM_RADAR, it) }\n })\n\n const coinAtmRadarConfig =\n data?.config && fromNamespace(namespaces.COIN_ATM_RADAR, data.config)\n if (!coinAtmRadarConfig) return null\n\n return (\n \n save && save(event.target.checked)}\n />\n
\n {label && {title}
\n\n
\n )\n})\n\nexport default CoinATMRadar\n","import CoinATMRadar from './CoinATMRadar'\n\nexport default CoinATMRadar\n","import { createMuiTheme } from '@material-ui/core/styles'\n\nimport typographyStyles from 'src/components/typography/styles'\n\nimport {\n backgroundColor,\n inputFontFamily,\n secondaryColor,\n fontColor,\n offColor,\n subheaderColor,\n fontSize3,\n fontSize5\n} from './variables'\n\nconst { p } = typographyStyles\n\nexport default createMuiTheme({\n typography: {\n fontFamily: inputFontFamily,\n body1: { ...p }\n },\n MuiButtonBase: {\n disableRipple: true\n },\n palette: {\n primary: {\n light: secondaryColor,\n dark: secondaryColor,\n main: secondaryColor\n },\n secondary: {\n light: secondaryColor,\n dark: secondaryColor,\n main: secondaryColor\n },\n background: {\n default: backgroundColor\n }\n },\n overrides: {\n MuiRadio: {\n colorSecondary: {\n color: secondaryColor\n }\n },\n MuiAutocomplete: {\n root: {\n color: fontColor\n },\n noOptions: {\n padding: [[6, 16]]\n },\n option: {\n '&[data-focus=\"true\"]': {\n backgroundColor: subheaderColor\n }\n },\n paper: {\n color: fontColor,\n margin: 0\n },\n listbox: {\n padding: 0\n },\n tag: {\n '&[data-tag-index=\"0\"]': {\n marginLeft: 0\n },\n margin: 2,\n backgroundColor: subheaderColor,\n borderRadius: 4,\n height: 18\n }\n },\n MuiChip: {\n label: {\n paddingLeft: 4,\n paddingRight: 4,\n color: fontColor,\n fontSize: fontSize5\n }\n },\n MuiInput: {\n root: {\n color: fontColor\n },\n underline: {\n '&:before': {\n borderBottom: [[2, 'solid', fontColor]]\n }\n }\n },\n MuiInputLabel: {\n root: {\n font: 'inherit',\n fontSize: fontSize3,\n color: offColor\n },\n shrink: {\n color: fontColor,\n transform: 'translate(0, 1.7px) scale(0.83)'\n }\n },\n MuiFormLabel: {\n root: {\n '&$focused': {\n color: fontColor\n }\n }\n }\n }\n})\n","import typographyStyles from 'src/components/typography/styles'\nimport theme from 'src/styling/theme'\nimport { offColor } from 'src/styling/variables'\n\nconst { p } = typographyStyles\n\nconst styles = {\n header: {\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n flex: 'wrap'\n },\n transparentButton: {\n '& > *': {\n margin: 'auto 12px'\n },\n '& button': {\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer'\n }\n },\n section: {\n marginBottom: 52\n },\n row: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginBottom: 28,\n width: 600,\n '&:last-child': {\n marginBottom: 0\n }\n },\n switchRow: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: 28,\n width: 600\n },\n switch: {\n display: 'flex',\n alignItems: 'center',\n marginLeft: 120\n },\n submit: {\n justifyContent: 'flex-start',\n alignItems: 'center',\n height: 19,\n padding: [[0, 4, 4, 4]],\n '& > button': {\n marginRight: 40\n }\n },\n singleButton: {\n marginTop: 50,\n paddingLeft: 0\n }\n}\n\nconst contactInfoStyles = {\n infoMessage: {\n display: 'flex',\n marginBottom: 52,\n '& > p': {\n width: 330,\n color: offColor,\n marginTop: 4,\n marginLeft: 16\n }\n },\n radioButtonsRow: {\n height: 60,\n marginBottom: 14\n },\n radioButtons: {\n display: 'flex',\n flexDirection: 'row',\n paddingLeft: 4\n },\n rowWrapper: {\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n flex: 'wrap'\n },\n transparentButton: {\n '& > *': {\n margin: 'auto 12px'\n },\n '& button': {\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer'\n }\n }\n}\n\nconst termsConditionsStyles = {\n enable: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: 22 - theme.spacing(1),\n '& > span:first-child': {\n extend: p,\n marginRight: 116 - theme.spacing(1)\n },\n '& > span:last-child': {\n marginLeft: 4\n }\n }\n}\n\nconst fieldStyles = {\n field: {\n position: 'relative',\n width: 280,\n padding: [[0, 4, 4, 0]]\n },\n notEditing: {\n display: 'flex',\n flexDirection: 'column'\n },\n notEditingSingleLine: {\n '& > p:first-child': {\n height: 16,\n lineHeight: '16px',\n transform: 'scale(0.75)',\n transformOrigin: 'left',\n paddingLeft: 0,\n margin: [[1, 0, 6, 0]]\n },\n '& > p:last-child': {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n height: 25,\n margin: 0\n }\n },\n notEditingMultiline: {\n '& > p:first-child': {\n height: 16,\n lineHeight: '16px',\n transform: 'scale(0.75)',\n transformOrigin: 'left',\n paddingLeft: 0,\n margin: [[1, 0, 5, 0]]\n },\n '& > p:last-child': {\n width: 502,\n height: 121,\n overflowY: 'auto',\n lineHeight: '19px',\n wordWrap: 'anywhere',\n margin: 0\n }\n }\n}\n\nexport { styles, contactInfoStyles, termsConditionsStyles, fieldStyles }\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { Form, Formik, Field as FormikField } from 'formik'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\nimport * as Yup from 'yup'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport PromptWhenDirty from 'src/components/PromptWhenDirty'\nimport { Link, IconButton } from 'src/components/buttons'\nimport Switch from 'src/components/inputs/base/Switch'\nimport { TextInput } from 'src/components/inputs/formik'\nimport { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'\nimport { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'\nimport { fontSize5 } from 'src/styling/variables'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nimport {\n styles as globalStyles,\n contactInfoStyles\n} from './OperatorInfo.styles'\n\nconst FIELD_WIDTH = 280\n\nconst fieldStyles = {\n field: {\n position: 'relative',\n width: 280,\n height: 48,\n padding: [[0, 4, 4, 0]]\n },\n notEditing: {\n display: 'flex',\n flexDirection: 'column',\n '& > p:first-child': {\n height: 16,\n lineHeight: '16px',\n fontSize: fontSize5,\n transformOrigin: 'left',\n paddingLeft: 0,\n margin: [[3, 0, 3, 0]]\n },\n '& > p:last-child': {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n margin: 0\n }\n }\n}\n\nconst fieldUseStyles = makeStyles(fieldStyles)\n\nconst Field = ({ editing, field, displayValue, ...props }) => {\n const classes = fieldUseStyles()\n\n const classNames = {\n [classes.field]: true,\n [classes.notEditing]: !editing\n }\n\n return (\n \n save({ active: value })}\n label={coinAtmRadarConfig.active ? 'Yes' : 'No'}\n />\n save({ commissions: value })}\n />\n save({ limitsAndVerification: value })}\n />\n
\n \n \n \n
\n Coin ATM Radar share settings
\n\n For details on configuring this panel, please read the relevant\n knowledgebase article{' '}\n
{'Machine info'}
\n\n {!editing && (\n <>\n {field.label} \n {displayValue(field.value)} \n \n )}\n {editing && (\n
\n )\n}\n\nconst GET_CONFIG = gql`\n query getData {\n config\n }\n`\n\nconst SAVE_CONFIG = gql`\n mutation Save($config: JSONObject) {\n saveConfig(config: $config)\n }\n`\n\nconst styles = R.merge(globalStyles, contactInfoStyles)\n\nconst contactUseStyles = makeStyles(styles)\n\nconst ContactInfo = ({ wizard }) => {\n const classes = contactUseStyles()\n\n const [editing, setEditing] = useState(wizard || false)\n const [error, setError] = useState(null)\n\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n onCompleted: () => setEditing(false),\n refetchQueries: () => ['getData'],\n onError: e => setError(e)\n })\n\n const { data } = useQuery(GET_CONFIG)\n\n const save = it => {\n return saveConfig({\n variables: { config: toNamespace(namespaces.OPERATOR_INFO, it) }\n })\n }\n\n const info =\n data?.config && fromNamespace(namespaces.OPERATOR_INFO, data.config)\n\n if (!info) return null\n\n const validationSchema = Yup.object().shape({\n active: Yup.boolean(),\n name: Yup.string(),\n phone: Yup.string(),\n email: Yup.string()\n .email('Please enter a valid email address')\n .required(),\n website: Yup.string(),\n companyNumber: Yup.string()\n })\n\n const fields = [\n {\n name: 'name',\n label: 'Full name',\n value: info.name ?? '',\n component: TextInput\n },\n {\n name: 'phone',\n label: 'Phone number',\n value: info.phone,\n component: TextInput\n },\n {\n name: 'email',\n label: 'Email',\n value: info.email ?? '',\n component: TextInput\n },\n {\n name: 'website',\n label: 'Website',\n value: info.website ?? '',\n component: TextInput\n },\n {\n name: 'companyNumber',\n label: 'Company number',\n value: info.companyNumber ?? '',\n component: TextInput\n }\n ]\n\n const findField = name => R.find(R.propEq('name', name))(fields)\n const findValue = name => findField(name).value\n\n const displayTextValue = value => value\n\n const form = {\n initialValues: {\n active: info.active,\n name: findValue('name'),\n phone: findValue('phone'),\n email: findValue('email'),\n website: findValue('website'),\n companyNumber: findValue('companyNumber')\n }\n }\n\n return (\n <>\n \n
\n Contact information
\n\n
\n Info card enabled?
\n\n \n save({\n active: event.target.checked\n })\n }\n />\n {info.active ? 'Yes' : 'No'} \n
\n \n save(validationSchema.cast(values))}\n onReset={() => {\n setEditing(false)\n setError(null)\n }}>\n \n \n
\n {!wizard && (\n \n setEditing(true)}>\n
\n Info card
\n {!editing && (\n\n \n Sharing your information with your customers through your machines\n allows them to contact you in case there's a problem with a machine\n in your network or a transaction.\n \n
\n )}\n \n )\n}\n\nexport default ContactInfo\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/table/false\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-4\",\n stroke: \"#FF584A\",\n strokeWidth: 4\n}, /*#__PURE__*/React.createElement(\"line\", {\n x1: 13.5,\n y1: 0.5,\n x2: 0.995667,\n y2: 13.004333,\n id: \"Line-7\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 13.5,\n y1: 0.5,\n x2: 0.995667,\n y2: 13.004333,\n id: \"Line-7\",\n transform: \"translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) \"\n})));\n\nfunction SvgFalse(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"14px\",\n height: \"14px\",\n viewBox: \"0 0 14 14\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgFalse);\nexport default __webpack_public_path__ + \"static/media/false.7f926859.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/table/true\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4.17451294,13.3251347 L0.599425104,9.29667256 C-0.199808368,8.3960844 -0.199808368,6.94040225 0.599425104,6.03981409 C1.39865858,5.13922593 2.69051421,5.13922593 3.48974768,6.03981409 L5.61967423,8.439847 L12.5102523,0.675441122 C13.3094858,-0.225147041 14.6033855,-0.225147041 15.4005749,0.675441122 C16.1998084,1.57372599 16.1998084,3.03171143 15.4005749,3.93229959 L7.06483552,13.3251347 C6.66624082,13.7742771 6.14295752,14 5.61967423,14 C5.09639093,14 4.57310763,13.7742771 4.17451294,13.3251347 Z\",\n id: \"Fill-1\",\n fill: \"#48F694\"\n}));\n\nfunction SvgTrue(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"16px\",\n height: \"14px\",\n viewBox: \"0 0 16 14\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgTrue);\nexport default __webpack_public_path__ + \"static/media/true.8e532da3.svg\";\nexport { ForwardRef as ReactComponent };","import baseStyles from 'src/pages/Logs.styles'\nimport { backgroundColor, zircon } from 'src/styling/variables'\n\nconst { fillColumn } = baseStyles\n\nconst booleanPropertiesTableStyles = {\n booleanPropertiesTableWrapper: {\n display: 'flex',\n flexDirection: 'column',\n width: 396\n },\n tableRow: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n '&:nth-child(even)': {\n backgroundColor: backgroundColor\n },\n '&:nth-child(odd)': {\n backgroundColor: zircon\n },\n minHeight: 32,\n height: 'auto',\n padding: [[8, 16, 8, 24]],\n boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)'\n },\n leftTableCell: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'left',\n width: 200,\n padding: [0]\n },\n rightTableCell: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'right',\n padding: [0]\n },\n transparentButton: {\n '& > *': {\n margin: 'auto 12px'\n },\n '& button': {\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer'\n }\n },\n rowWrapper: {\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n flex: 'wrap'\n },\n rightAligned: {\n marginLeft: 'auto'\n },\n radioButtons: {\n display: 'flex',\n flexDirection: 'row',\n margin: [-15]\n },\n rightLink: {\n marginLeft: '20px'\n },\n fillColumn,\n popoverContent: {\n width: 272,\n padding: [[10, 15]]\n }\n}\n\nexport { booleanPropertiesTableStyles }\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport { useFormikContext, Form, Formik, Field as FormikField } from 'formik'\nimport _ from 'lodash'\nimport React, { useState, memo } from 'react'\nimport * as Yup from 'yup'\n\nimport PromptWhenDirty from 'src/components/PromptWhenDirty'\nimport { Link, IconButton } from 'src/components/buttons'\nimport { RadioGroup } from 'src/components/inputs/formik'\nimport { Table, TableBody, TableRow, TableCell } from 'src/components/table'\nimport { H4 } from 'src/components/typography'\nimport { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'\nimport { ReactComponent as FalseIcon } from 'src/styling/icons/table/false.svg'\nimport { ReactComponent as TrueIcon } from 'src/styling/icons/table/true.svg'\n\nimport { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles'\n\nconst useStyles = makeStyles(booleanPropertiesTableStyles)\n\nconst BooleanCell = ({ name }) => {\n const { values } = useFormikContext()\n return values[name] === 'true' ? \n \n \n \n
\n )\n }\n)\n\nexport default BooleanPropertiesTable\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { memo } from 'react'\n\nimport { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable'\nimport { Switch } from 'src/components/inputs'\nimport { H4, P, Label2 } from 'src/components/typography'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nimport { mainStyles } from './ReceiptPrinting.styles'\n\nconst useStyles = makeStyles(mainStyles)\n\nconst GET_CONFIG = gql`\n query getData {\n config\n }\n`\n\nconst SAVE_CONFIG = gql`\n mutation Save($config: JSONObject) {\n saveConfig(config: $config)\n }\n`\n\nconst ReceiptPrinting = memo(({ wizard }) => {\n const classes = useStyles()\n\n const { data } = useQuery(GET_CONFIG)\n\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n refetchQueries: () => ['getData']\n })\n\n const save = it =>\n saveConfig({\n variables: { config: toNamespace(namespaces.RECEIPT, it) }\n })\n\n const receiptPrintingConfig =\n data?.config && fromNamespace(namespaces.RECEIPT, data.config)\n if (!receiptPrintingConfig) return null\n\n return (\n <>\n \n
\n Receipt options
\n\n {receiptPrintingConfig.active ? 'Yes' : 'No'} \n
\n Enable receipt printing?
\n\n \n saveConfig({\n variables: {\n config: toNamespace(\n namespaces.RECEIPT,\n R.merge(receiptPrintingConfig, {\n active: event.target.checked\n })\n )\n }\n })\n }\n />\n
\n \n {!editing && (\n <>\n {label} \n {value} \n \n )}\n {editing && (\n
\n )\n}\n\nconst GET_CONFIG = gql`\n query getData {\n config\n }\n`\n\nconst SAVE_CONFIG = gql`\n mutation Save($config: JSONObject) {\n saveConfig(config: $config)\n }\n`\n\nconst styles = R.merge(globalStyles, termsConditionsStyles)\n\nconst useTermsConditionsStyles = makeStyles(styles)\n\nconst TermsConditions = () => {\n const [error, setError] = useState(null)\n const [editing, setEditing] = useState(false)\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n onCompleted: () => {\n setError(null)\n setEditing(false)\n },\n refetchQueries: () => ['getData'],\n onError: e => setError(e)\n })\n\n const classes = useTermsConditionsStyles()\n\n const { data } = useQuery(GET_CONFIG)\n\n const termsAndConditions =\n data?.config && fromNamespace(namespaces.TERMS_CONDITIONS, data.config)\n const formData = termsAndConditions ?? {}\n const showOnScreen = termsAndConditions?.active ?? false\n\n const save = it =>\n saveConfig({\n variables: { config: toNamespace(namespaces.TERMS_CONDITIONS, it) }\n })\n\n const fields = [\n {\n name: 'title',\n label: 'Screen title',\n value: formData.title ?? '',\n width: 282\n },\n {\n name: 'text',\n label: 'Text content',\n value: formData.text ?? '',\n width: 502,\n multiline: true,\n rows: 6\n },\n {\n name: 'acceptButtonText',\n label: 'Accept button text',\n value: formData.acceptButtonText ?? '',\n placeholder: 'I accept',\n width: 282\n },\n {\n name: 'cancelButtonText',\n label: 'Cancel button text',\n value: formData.cancelButtonText ?? '',\n placeholder: 'Cancel',\n width: 282\n }\n ]\n\n const findField = name => R.find(R.propEq('name', name))(fields)\n const findValue = name => findField(name).value\n\n const initialValues = {\n title: findValue('title'),\n text: findValue('text'),\n acceptButtonText: findValue('acceptButtonText'),\n cancelButtonText: findValue('cancelButtonText')\n }\n\n const validationSchema = Yup.object().shape({\n title: Yup.string()\n .required()\n .max(50, 'Too long'),\n text: Yup.string().required(),\n acceptButtonText: Yup.string()\n .required()\n .max(50, 'Too long'),\n cancelButtonText: Yup.string()\n .required()\n .max(50, 'Too long')\n })\n\n return (\n <>\n \n
\n Terms & Conditions
\n\n save(values)}\n onReset={() => {\n setEditing(false)\n setError(null)\n }}>\n \n \n
\n \n )\n}\n\nexport default TermsConditions\n","import { makeStyles } from '@material-ui/core'\nimport Grid from '@material-ui/core/Grid'\nimport React from 'react'\nimport {\n Route,\n Switch,\n Redirect,\n useLocation,\n useHistory\n} from 'react-router-dom'\n\nimport Sidebar from 'src/components/layout/Sidebar'\nimport TitleSection from 'src/components/layout/TitleSection'\n\nimport CoinAtmRadar from './CoinATMRadar'\nimport ContactInfo from './ContactInfo'\nimport ReceiptPrinting from './ReceiptPrinting'\nimport TermsConditions from './TermsConditions'\n\nconst styles = {\n grid: {\n flex: 1,\n height: '100%'\n },\n content: {\n flex: 1,\n marginLeft: 48,\n paddingTop: 15\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst innerRoutes = [\n {\n label: 'Contact information',\n route: '/settings/operator-info/contact-info',\n component: ContactInfo\n },\n {\n label: 'Receipt',\n route: '/settings/operator-info/receipt-printing',\n component: ReceiptPrinting\n },\n {\n label: 'Coin ATM Radar',\n route: '/settings/operator-info/coin-atm-radar',\n component: CoinAtmRadar\n },\n {\n label: 'Terms & Conditions',\n route: '/settings/operator-info/terms-conditions',\n component: TermsConditions\n }\n]\n\nconst Routes = ({ wizard }) => (\n \n Show on screen\n \n save({\n active: event.target.checked\n })\n }\n />\n {showOnScreen ? 'Yes' : 'No'} \n
\n \n Info card \n {!editing && (\n setEditing(true)}>\n
\n \n
\n \n
\n )\n}\n\nexport default Uptime\n","import { useQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport gql from 'graphql-tag'\nimport moment from 'moment'\nimport * as R from 'ramda'\nimport React, { useState, useRef } from 'react'\n\nimport LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'\nimport Title from 'src/components/Title'\nimport Uptime from 'src/components/Uptime'\nimport { Select } from 'src/components/inputs'\nimport {\n Table,\n TableHead,\n TableRow,\n TableHeader,\n TableBody,\n TableCell\n} from 'src/components/table'\nimport { Info3 } from 'src/components/typography'\nimport typographyStyles from 'src/components/typography/styles'\nimport { offColor } from 'src/styling/variables'\n\nimport logsStyles from './Logs.styles'\n\nconst { p } = typographyStyles\nconst { tableWrapper } = logsStyles\n\nconst localStyles = {\n serverTableWrapper: {\n extend: tableWrapper,\n maxWidth: '100%',\n marginLeft: 0\n },\n serverVersion: {\n extend: p,\n color: offColor,\n margin: 'auto 0 auto 0'\n },\n headerLine2: {\n display: 'flex',\n justifyContent: 'space-between',\n marginBottom: 24\n },\n uptimeContainer: {\n margin: 'auto 0 auto 0'\n }\n}\n\nconst styles = R.merge(logsStyles, localStyles)\n\nconst useStyles = makeStyles(styles)\n\nconst SHOW_ALL = 'Show all'\n\nconst formatDate = date => {\n return moment(date).format('YYYY-MM-DD HH:mm')\n}\n\nconst NUM_LOG_RESULTS = 500\n\nconst GET_CSV = gql`\n query ServerData($limit: Int, $from: Date, $until: Date) {\n serverLogsCsv(limit: $limit, from: $from, until: $until)\n }\n`\n\nconst GET_DATA = gql`\n query ServerData($limit: Int, $from: Date, $until: Date) {\n serverVersion\n uptime {\n name\n state\n uptime\n }\n serverLogs(limit: $limit, from: $from, until: $until) {\n logLevel\n id\n timestamp\n message\n }\n }\n`\n\nconst Logs = () => {\n const classes = useStyles()\n\n const tableEl = useRef()\n\n const [saveMessage, setSaveMessage] = useState(null)\n const [logLevel, setLogLevel] = useState(SHOW_ALL)\n\n const { data } = useQuery(GET_DATA, {\n onCompleted: () => setSaveMessage(''),\n variables: {\n limit: NUM_LOG_RESULTS\n }\n })\n\n const serverVersion = data?.serverVersion\n const processStates = data?.uptime ?? []\n\n const getLogLevels = R.compose(\n R.prepend(SHOW_ALL),\n R.uniq,\n R.concat(['error', 'info', 'debug']),\n R.map(R.path(['logLevel'])),\n R.path(['serverLogs'])\n )\n\n const handleLogLevelChange = logLevel => {\n if (tableEl.current) tableEl.current.scrollTo(0, 0)\n\n setLogLevel(logLevel)\n }\n\n return (\n <>\n {R.toLower(process.name)}
\n \n
\n \n Server \n {data && (\n
\n \n R.path(['serverLogsCsv'])(logs)}\n />\n {saveMessage} \n
\n )}\n \n {serverVersion && Server version: v{serverVersion}}\n
\n \n {data && (\n
\n \n {processStates &&\n processStates.map((process, idx) => (\n
\n \n
\n \n )\n}\n\nexport default Logs\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/edit/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1,18 L1,18 C1,19.657 2.343,21 4,21 L18,21 C19.657,21 21,19.657 21,18\",\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n points: \"6 12 17 1 21 5 10 16 6 16\"\n}));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"22px\",\n viewBox: \"0 0 22 22\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.5f161f2c.svg\";\nexport { ForwardRef as ReactComponent };","import typographyStyles from 'src/components/typography/styles'\nimport { offColor } from 'src/styling/variables'\n\nconst { label1, p } = typographyStyles\n\nexport default {\n tr: ({ height }) => ({\n margin: 0,\n height\n }),\n table: ({ width }) => ({\n width\n }),\n head: {\n display: 'flex',\n flex: 1,\n justifyContent: 'space-between',\n alignItems: 'center',\n paddingRight: 12\n },\n button: {\n marginBottom: 1\n },\n itemWrapper: {\n display: 'flex',\n flexDirection: 'column',\n marginTop: 16,\n minHeight: 35\n },\n label: {\n extend: label1,\n color: offColor,\n marginBottom: 4\n },\n item: {\n extend: p,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n }\n}\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport React from 'react'\n\nimport { IconButton } from 'src/components/buttons'\nimport {\n Table,\n THead,\n TBody,\n Td,\n Th,\n Tr\n} from 'src/components/fake-table/Table'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/white.svg'\n\nimport styles from './SingleRowTable.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst SingleRowTable = ({\n width = 378,\n height = 128,\n title,\n items,\n onEdit,\n className\n}) => {\n const classes = useStyles({ width, height })\n\n return (\n <>\n \n \n
\n
\n | \n {title}\n | \n \n \n
|---|
| \n {items && (\n <>\n {items[0] && (\n \n \n )}\n {items[1] && (\n {items[0].label} \n {items[0].value} \n \n \n )}\n \n )}\n {items[1].label} \n {items[1].value} \n | \n
\n \n {R.values(schemas).map(schema => (\n \n setEditingSchema(schema)}\n items={getItems(schema.code, schema.elements)}\n />\n \n ))}\n \n {editingSchema && (\n setEditingSchema(null)}\n open={true}>\n \n saveAccount({\n variables: { accounts: { [editingSchema.code]: it } }\n })\n }\n elements={editingSchema.elements}\n validationSchema={editingSchema.validationSchema}\n value={accounts[editingSchema.code]}\n />\n \n )}\n
\n )\n}\n\nexport default Services\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/ID/card/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.6,\n points: \"0 16 22 16 22 0 0 0\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 11.7857143,\n y1: 4,\n x2: 18.8571429,\n y2: 4,\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.6\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 11.7857143,\n y1: 7.2,\n x2: 18.8571429,\n y2: 7.2,\n id: \"Stroke-4\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.6\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-5\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.6,\n points: \"3.14285714 11.2 8.64285714 11.2 8.64285714 4 3.14285714 4\"\n}));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"16px\",\n viewBox: \"0 0 22 16\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.aa3a2aa4.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/ID/phone/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.47150618,12.52898 C9.939556,15.9970298 13.7804112,16.1146315 15.4756355,15.9586292 C16.0220434,15.9090285 16.5308507,15.6578249 16.9188563,15.2698193 L19.0004862,13.1881894 L17.0220577,11.210561 L15.0436293,10.5505516 L13.7244104,11.8697705 C13.7244104,11.8697705 12.4059914,13.1881894 9.10914407,9.89054208 C5.81229671,6.59449473 7.13071565,5.27527578 7.13071565,5.27527578 L8.4499346,3.95605683 L7.78992512,1.97842842 L5.81229671,0 L3.73066681,2.0816299 C3.34186123,2.46963548 3.09145763,2.97844279 3.04105691,3.52485063 C2.88585468,5.22007499 3.00345637,9.06013015 6.47150618,12.52898 Z\",\n id: \"Stroke-1-Copy\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.6\n}));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"16px\",\n viewBox: \"0 0 22 16\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.d630943a.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/ID/phone/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.47150618,12.52898 C9.939556,15.9970298 13.7804112,16.1146315 15.4756355,15.9586292 C16.0220434,15.9090285 16.5308507,15.6578249 16.9188563,15.2698193 L19.0004862,13.1881894 L17.0220577,11.210561 L15.0436293,10.5505516 L13.7244104,11.8697705 C13.7244104,11.8697705 12.4059914,13.1881894 9.10914407,9.89054208 C5.81229671,6.59449473 7.13071565,5.27527578 7.13071565,5.27527578 L8.4499346,3.95605683 L7.78992512,1.97842842 L5.81229671,0 L3.73066681,2.0816299 C3.34186123,2.46963548 3.09145763,2.97844279 3.04105691,3.52485063 C2.88585468,5.22007499 3.00345637,9.06013015 6.47150618,12.52898 Z\",\n id: \"Stroke-1-Copy\",\n stroke: \"#1B2559\",\n strokeWidth: 1.6\n}));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"16px\",\n viewBox: \"0 0 22 16\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.d95e9bb2.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/ID/photo/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11,13 C8.7912,13 7,11.2088 7,9 C7,6.7912 8.7912,5 11,5 C13.2088,5 15,6.7912 15,9 C15,11.2088 13.2088,13 11,13 Z M15.7142857,2.4 L13.3571429,0 L8.64285714,0 L6.28571429,2.4 L0,2.4 L0,16 L22,16 L22,2.4 L15.7142857,2.4 Z\",\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.6\n}));\n\nfunction SvgWhite(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"16px\",\n viewBox: \"0 0 22 16\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.024587b7.svg\";\nexport { ForwardRef as ReactComponent };","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/ID/photo/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11,13 C8.7912,13 7,11.2088 7,9 C7,6.7912 8.7912,5 11,5 C13.2088,5 15,6.7912 15,9 C15,11.2088 13.2088,13 11,13 Z M15.7142857,2.4 L13.3571429,0 L8.64285714,0 L6.28571429,2.4 L0,2.4 L0,16 L22,16 L22,2.4 L15.7142857,2.4 Z\",\n id: \"Stroke-1\",\n stroke: \"#1B2559\",\n strokeWidth: 1.6\n}));\n\nfunction SvgZodiac(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, [\"title\", \"titleId\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"22px\",\n height: \"16px\",\n viewBox: \"0 0 22 16\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2, _ref3);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.4467d30c.svg\";\nexport { ForwardRef as ReactComponent };","import typographyStyles from 'src/components/typography/styles'\nimport { offColor } from 'src/styling/variables'\n\nconst { p } = typographyStyles\n\nexport default {\n wrapper: {\n display: 'flex',\n flexDirection: 'column',\n marginTop: 24\n },\n row: {\n display: 'flex',\n flexDirection: 'row',\n marginBottom: 36\n },\n secondRow: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n marginBottom: 36\n },\n lastRow: {\n display: 'flex',\n flexDirection: 'row',\n marginBottom: 32\n },\n label: {\n color: offColor,\n margin: [[0, 0, 6, 0]]\n },\n txIcon: {\n marginRight: 10\n },\n popover: {\n height: 164,\n width: 215\n },\n idButton: {\n marginRight: 4\n },\n idCardDataCard: {\n extend: p,\n display: 'flex',\n padding: [[11, 8]],\n // rework this into a proper component\n '& > div': {\n display: 'flex',\n flexDirection: 'column',\n '& > div': {\n width: 144,\n height: 37,\n marginBottom: 15,\n '&:last-child': {\n marginBottom: 0\n }\n }\n }\n },\n bold: {\n fontWeight: 700\n },\n direction: {\n width: 233\n },\n availableIds: {\n width: 232\n },\n exchangeRate: {\n width: 250\n },\n commission: {\n width: 217\n },\n address: {\n width: 280\n },\n transactionId: {\n width: 280\n },\n sessionId: {\n width: 215\n }\n}\n","const getCashOutStatus = it => {\n if (it.hasError) return 'Error'\n if (it.dispense) return 'Success'\n if (it.expired) return 'Expired'\n return 'Pending'\n}\n\nconst getCashInStatus = it => {\n if (it.operatorCompleted) return 'Cancelled'\n if (it.hasError) return 'Error'\n if (it.sendConfirmed) return 'Sent'\n if (it.expired) return 'Expired'\n return 'Pending'\n}\n\nconst getStatus = it => {\n if (it.txClass === 'cashOut') {\n return getCashOutStatus(it)\n }\n return getCashInStatus(it)\n}\n\nexport { getStatus }\n","import { makeStyles, Box } from '@material-ui/core'\nimport BigNumber from 'bignumber.js'\nimport moment from 'moment'\nimport React, { memo } from 'react'\n\nimport { IDButton } from 'src/components/buttons'\nimport { Label1 } from 'src/components/typography'\nimport { ReactComponent as CardIdInverseIcon } from 'src/styling/icons/ID/card/white.svg'\nimport { ReactComponent as CardIdIcon } from 'src/styling/icons/ID/card/zodiac.svg'\nimport { ReactComponent as PhoneIdInverseIcon } from 'src/styling/icons/ID/phone/white.svg'\nimport { ReactComponent as PhoneIdIcon } from 'src/styling/icons/ID/phone/zodiac.svg'\nimport { ReactComponent as CamIdInverseIcon } from 'src/styling/icons/ID/photo/white.svg'\nimport { ReactComponent as CamIdIcon } from 'src/styling/icons/ID/photo/zodiac.svg'\nimport { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'\nimport { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'\nimport { URI } from 'src/utils/apollo'\nimport { toUnit, formatCryptoAddress } from 'src/utils/coin'\nimport { onlyFirstToUpper } from 'src/utils/string'\n\nimport CopyToClipboard from './CopyToClipboard'\nimport styles from './DetailsCard.styles'\nimport { getStatus } from './helper'\n\nconst useStyles = makeStyles(styles)\n\nconst formatAddress = (cryptoCode = '', address = '') =>\n formatCryptoAddress(cryptoCode, address).replace(/(.{5})/g, '$1 ')\n\nconst Label = ({ children }) => {\n const classes = useStyles()\n return \n
\n )\n}\n\nexport default memo(DetailsRow, (prev, next) => prev.id === next.id)\n","import { useQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport BigNumber from 'bignumber.js'\nimport gql from 'graphql-tag'\nimport moment from 'moment'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'\nimport Title from 'src/components/Title'\nimport DataTable from 'src/components/tables/DataTable'\nimport { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'\nimport { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'\nimport { toUnit, formatCryptoAddress } from 'src/utils/coin'\n\nimport DetailsRow from './DetailsCard'\nimport { mainStyles } from './Transactions.styles'\nimport { getStatus } from './helper'\n\nconst useStyles = makeStyles(mainStyles)\n\nconst NUM_LOG_RESULTS = 1000\n\nconst GET_TRANSACTIONS_CSV = gql`\n query transactions($limit: Int, $from: Date, $until: Date) {\n transactionsCsv(limit: $limit, from: $from, until: $until)\n }\n`\n\nconst GET_TRANSACTIONS = gql`\n query transactions($limit: Int, $from: Date, $until: Date) {\n transactions(limit: $limit, from: $from, until: $until) {\n id\n txClass\n txHash\n toAddress\n commissionPercentage\n expired\n machineName\n operatorCompleted\n sendConfirmed\n dispense\n hasError: error\n deviceId\n fiat\n cashInFee\n fiatCode\n cryptoAtoms\n cryptoCode\n toAddress\n created\n customerName\n customerIdCardData\n customerIdCardPhotoPath\n customerFrontCameraPath\n customerPhone\n }\n }\n`\n\nconst Transactions = () => {\n const classes = useStyles()\n\n const { data: txResponse, loading } = useQuery(GET_TRANSACTIONS, {\n variables: {\n limit: NUM_LOG_RESULTS\n }\n })\n\n const formatCustomerName = customer => {\n const { firstName, lastName } = customer\n\n return `${R.o(R.toUpper, R.head)(firstName)}. ${lastName}`\n }\n\n const getCustomerDisplayName = tx => {\n if (tx.customerName) return tx.customerName\n if (tx.customerIdCardData) return formatCustomerName(tx.customerIdCardData)\n return tx.customerPhone\n }\n\n const elements = [\n {\n header: '',\n width: 62,\n size: 'sm',\n view: it => (it.txClass === 'cashOut' ? \n
\n \n \n
\n\n \n \n {tx.txClass === 'cashOut' ?
\n \n \n \n {tx.customerPhone && (\n \n {tx.customerPhone}\n \n )}\n {tx.customerIdCardPhotoPath && !tx.customerIdCardData && (\n \n \n \n \n
\n \n
\n \n )}\n {tx.customerFrontCameraPath && (\n \n
\n \n \n
\n {customer.name}
\n \n \n
\n {customer.age}
\n \n \n
\n {customer.country}
\n \n
\n \n \n
\n {customer.idCardNumber}
\n \n \n
\n {customer.idCardExpirationDate}
\n \n \n
\n {crypto > 0 ? displayExRate : '-'}
\n \n \n
\n \n {`${commission} ${tx.fiatCode} (${commissionPercentage * 100} %)`}\n
\n \n \n
\n \n {tx.txClass === 'cashIn'\n ? `${Number.parseFloat(tx.cashInFee)} ${tx.fiatCode}`\n : 'N/A'}\n
\n \n
\n \n \n
\n \n \n {formatAddress(tx.cryptoCode, tx.toAddress)}\n \n
\n \n \n
\n \n {tx.txClass === 'cashOut' ? (\n 'N/A'\n ) : (\n {tx.txHash} \n )}\n
\n \n \n {tx.id} \n
\n \n
\n \n \n {getStatus(tx)}\n
\n \n
\n \n Transactions \n {txResponse && (\n
\n \n R.path(['transactionsCsv'])(logs)}\n />\n
\n )}\n \n
\n \n
\n \n
\n \n// In which type of transactions will it trigger?\n//
\n//Choose trigger type
\n\n {isThresholdEnabled && (\n
\n \n )\n}\n\nconst type = {\n schema: typeSchema,\n options: typeOptions,\n Component: Type,\n initialValues: { triggerType: '', threshold: '' }\n}\n\nconst requirementSchema = Yup.object().shape({\n requirement\n})\n\nconst requirementOptions = [\n { display: 'SMS verification', code: 'sms' },\n { display: 'ID card image', code: 'idCardPhoto' },\n { display: 'ID data', code: 'idCardData' },\n { display: 'Customer camera', code: 'facephoto' },\n { display: 'Sanctions', code: 'sanctions' },\n { display: 'US SSN', code: 'usSsn' },\n // { display: 'Super user', code: 'superuser' },\n { display: 'Suspend', code: 'suspend' },\n { display: 'Block', code: 'block' }\n]\n\nconst Requirement = () => {\n const classes = useStyles()\n const { errors, values } = useFormikContext()\n\n const titleClass = {\n [classes.error]: errors.requirement\n }\n\n const isSuspend = values?.requirement?.requirement === 'suspend'\n\n return (\n <>\n Choose a requirement
\n\n// {showCashOut &&
\n// )\n// }\n\nconst RequirementInput = () => {\n const { values } = useFormikContext()\n const classes = useStyles()\n\n const requirement = values?.requirement?.requirement\n const isSuspend = requirement === 'suspend'\n\n const display = getView(requirementOptions, 'display')(requirement)\n\n return (\n Trigger overview so far
\nReject reused addresses
\n\n This option requires a user to scan a different cryptocurrency\n address if they attempt to scan one that had been previously\n used for a transaction in your network\n
\n\n It seems there are no active compliance triggers on your network\n
\n \n\n \n \n
\n )\n}\n\nexport default Commissions\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { Table as EditableTable } from 'src/components/editableTable'\nimport Section from 'src/components/layout/Section'\nimport TitleSection from 'src/components/layout/TitleSection'\nimport styles from 'src/pages/AddMachine/styles'\nimport {\n mainFields,\n localeDefaults as defaults,\n LocaleSchema as schema\n} from 'src/pages/Locales/helper'\nimport { toNamespace } from 'src/utils/config'\n\nimport { getConfiguredCoins } from '../helper'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_DATA = gql`\n query getData {\n config\n accounts\n currencies {\n code\n display\n }\n countries {\n code\n display\n }\n cryptoCurrencies {\n code\n display\n }\n languages {\n code\n display\n }\n machines {\n name\n deviceId\n }\n }\n`\n\nconst SAVE_CONFIG = gql`\n mutation Save($config: JSONObject) {\n saveConfig(config: $config)\n }\n`\n\nfunction Locales({ isActive, doContinue }) {\n const classes = useStyles()\n const { data } = useQuery(GET_DATA)\n\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n onCompleted: doContinue\n })\n\n const save = it => {\n const config = toNamespace('locale')(it.locale[0])\n return saveConfig({ variables: { config } })\n }\n\n const cryptoCurrencies = getConfiguredCoins(\n data?.config || {},\n data?.cryptoCurrencies || []\n )\n\n const onChangeCoin = (prev, curr, setValue) => setValue(curr)\n\n return (\n \n \n \n
\n )\n}\n\nexport default Locales\n","import { Box, makeStyles } from '@material-ui/core'\nimport React from 'react'\n\nimport { Label1 } from 'src/components/typography'\nimport { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'\n\nconst useStyles = makeStyles({\n message: ({ width }) => ({\n width,\n marginTop: 4,\n marginLeft: 16\n })\n})\n\nconst InfoMessage = ({ children, width = 330, className }) => {\n const classes = useStyles({ width })\n\n return (\n \n
\n )\n}\n\nexport default Twilio\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { Button } from 'src/components/buttons'\nimport { NamespacedTable as EditableTable } from 'src/components/editableTable'\nimport { P, H4 } from 'src/components/typography'\nimport { getElements, WalletSchema } from 'src/pages/Wallet/helper'\nimport { toNamespace, namespaces } from 'src/utils/config'\n\nimport styles from './Shared.styles'\n\nconst useStyles = makeStyles(styles)\nconst GET_INFO = gql`\n query getData {\n config\n accounts\n accountsConfig {\n code\n display\n class\n cryptos\n }\n cryptoCurrencies {\n code\n display\n }\n }\n`\n\nconst SAVE_CONFIG = gql`\n mutation Save($config: JSONObject, $accounts: JSONObject) {\n saveConfig(config: $config)\n saveAccounts(accounts: $accounts)\n }\n`\n\nconst AllSet = ({ data: currentData, doContinue }) => {\n const classes = useStyles()\n\n const { data } = useQuery(GET_INFO)\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n onCompleted: doContinue\n })\n\n const [error, setError] = useState(false)\n\n const coin = currentData?.coin\n\n const accountsConfig = data?.accountsConfig\n const cryptoCurrencies = data?.cryptoCurrencies ?? []\n\n const save = () => {\n if (!WalletSchema.isValidSync(currentData)) return setError(true)\n\n const withCoin = toNamespace(coin, R.omit('coin', currentData))\n const config = toNamespace(namespaces.WALLETS)(withCoin)\n setError(false)\n return saveConfig({ variables: { config } })\n }\n\n return (\n <>\n \n \n \n \n \n\n \n To set up Twilio please read the instructions from our support portal.\n \n
\n Twilio (SMS service)
\n\n Will you setup a two way machine or compliance?\n
\n\n Two-way machines allow your customers not only to buy (cash-in)\n but also sell cryptocurrencies (cash-out).\n
\n\n You’ll need an SMS service for cash-out transactions and for any\n compliance triggers\n
\nEnter credentials
\nAll set
\n\n These are your wallet settings. You can later edit these and add\n additional coins.\n
\nBlockcypher
\n\n If you are enabling cash-out services, create a Blockcypher account.\n
\n\n {selected === 'disable' && (\n addData({ zeroConf: 'all-zero-conf' })}\n className={classes.button}>\n Continue\n \n )}\n {selected === 'enable' && (\n
\n \n )\n}\n\nexport default Blockcypher\n","import { useQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport { Formik, Form, Field } from 'formik'\nimport gql from 'graphql-tag'\nimport React, { useState } from 'react'\nimport * as Yup from 'yup'\n\nimport PromptWhenDirty from 'src/components/PromptWhenDirty'\nimport { Button } from 'src/components/buttons'\nimport { RadioGroup } from 'src/components/inputs/formik'\nimport { H4 } from 'src/components/typography'\n\nimport styles from './Shared.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_CONFIG = gql`\n {\n cryptoCurrencies {\n code\n display\n }\n }\n`\n\nconst schema = Yup.object().shape({\n coin: Yup.string().required()\n})\n\nconst ChooseCoin = ({ addData }) => {\n const classes = useStyles()\n const [error, setError] = useState(false)\n\n const { data } = useQuery(GET_CONFIG)\n const cryptoCurrencies = data?.cryptoCurrencies ?? []\n\n const onSubmit = it => {\n if (!schema.isValidSync(it)) return setError(true)\n\n if (it.coin !== 'BTC') {\n return addData({ coin: it.coin, zeroConf: 'all-zero-conf' })\n }\n\n addData(it)\n }\n\n return (\n <>\n \n Choose your first cryptocurrency\n
\n\n\n
\n )\n}\n\nexport default ChooseExchange\n","import { useQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { Button } from 'src/components/buttons'\nimport { RadioGroup } from 'src/components/inputs'\nimport { H4 } from 'src/components/typography'\n\nimport styles from './Shared.styles'\nimport { getItems } from './getItems'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_CONFIG = gql`\n {\n accountsConfig {\n code\n display\n class\n cryptos\n }\n }\n`\n\nconst ChooseTicker = ({ data: currentData, addData }) => {\n const classes = useStyles()\n const { data } = useQuery(GET_CONFIG)\n\n const [selected, setSelected] = useState(null)\n const [error, setError] = useState(false)\n\n const accounts = data?.accounts ?? []\n const accountsConfig = data?.accountsConfig ?? []\n\n const coin = currentData.coin\n const tickers = getItems(accountsConfig, accounts, 'ticker', coin)\n\n const submit = () => {\n if (!selected) return setError(true)\n addData({ ticker: selected })\n }\n\n const onSelect = e => {\n setSelected(e.target.value)\n setError(false)\n }\n\n return (\n Choose your exchange
\n\n \n Make sure you set up {schema[selected].name} to enter the\n necessary information below. Please follow the instructions on our\n support page if you haven’t.\n \n
\n Enter exchange information
\n\n
\n )\n}\n\nexport default ChooseTicker\n","import * as Yup from 'yup'\n\nimport {\n TextInput,\n SecretInput,\n Autocomplete\n} from 'src/components/inputs/formik'\n\nexport default code => ({\n code: 'bitgo',\n name: 'BitGo',\n title: 'BitGo (Wallet)',\n elements: [\n {\n code: 'token',\n display: 'API Token',\n component: TextInput,\n face: true,\n long: true\n },\n {\n code: 'environment',\n display: 'Environment',\n component: Autocomplete,\n inputProps: {\n options: ['prod', 'test']\n },\n face: true\n },\n {\n code: `${code}WalletId`,\n display: `${code} Wallet ID`,\n component: TextInput\n },\n {\n code: `${code}WalletPassphrase`,\n display: `${code} Wallet Passphrase`,\n component: SecretInput\n }\n ],\n validationSchema: Yup.object().shape({\n token: Yup.string()\n .max(100, 'Too long')\n .required(),\n environment: Yup.string()\n .matches(/(prod|test)/)\n .required(),\n [`${code}WalletId`]: Yup.string()\n .max(100, 'Too long')\n .required(),\n [`${code}WalletPassphrase`]: Yup.string()\n .max(100, 'Too long')\n .required()\n })\n})\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { Button, SupportLinkButton } from 'src/components/buttons'\nimport { RadioGroup } from 'src/components/inputs'\nimport { H4, Info3 } from 'src/components/typography'\nimport FormRenderer from 'src/pages/Services/FormRenderer'\nimport schema from 'src/pages/Services/schemas'\nimport bitgo from 'src/pages/Services/schemas/singlebitgo'\nimport { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'\n\nimport styles from './Shared.styles'\nimport { getItems } from './getItems'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_CONFIG = gql`\n {\n accounts\n accountsConfig {\n code\n display\n class\n cryptos\n }\n cryptoCurrencies {\n code\n display\n }\n }\n`\n\nconst SAVE_ACCOUNTS = gql`\n mutation Save($accounts: JSONObject) {\n saveAccounts(accounts: $accounts)\n }\n`\n\nconst isConfigurable = it => R.contains(it)(['infura', 'bitgo'])\n\nconst isLocalHosted = it =>\n R.contains(it)([\n 'bitcoind',\n 'geth',\n 'litecoind',\n 'dashd',\n 'zcashd',\n 'bitcoincashd'\n ])\n\nconst ChooseWallet = ({ data: currentData, addData }) => {\n const classes = useStyles()\n const { data } = useQuery(GET_CONFIG)\n const [saveAccounts] = useMutation(SAVE_ACCOUNTS, {\n onCompleted: () => submit()\n })\n\n const [selected, setSelected] = useState(null)\n const [error, setError] = useState(false)\n\n const accounts = data?.accounts ?? []\n const accountsConfig = data?.accountsConfig ?? []\n\n const coin = currentData.coin\n const wallets = getItems(accountsConfig, accounts, 'wallet', coin)\n\n const saveWallet = name => wallet => {\n const accounts = { [name]: wallet }\n return saveAccounts({ variables: { accounts } })\n }\n\n const submit = () => {\n if (!selected) return setError(true)\n addData({ wallet: selected })\n }\n\n const onSelect = e => {\n setSelected(e.target.value)\n setError(false)\n }\n\n return (\n Choose your ticker
\n\n
\n )\n}\n\nexport default ChooseWallet\n","import { makeStyles } from '@material-ui/core'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport Sidebar, { Stepper } from 'src/components/layout/Sidebar'\nimport TitleSection from 'src/components/layout/TitleSection'\nimport styles from 'src/pages/AddMachine/styles'\n\nimport AllSet from './AllSet'\nimport Blockcypher from './Blockcypher'\nimport ChooseCoin from './ChooseCoin'\nimport ChooseExchange from './ChooseExchange'\nimport ChooseTicker from './ChooseTicker'\nimport ChooseWallet from './ChooseWallet'\n\nconst useStyles = makeStyles(styles)\n\nconst steps = [\n {\n label: 'Choose cryptocurrency',\n component: ChooseCoin\n },\n {\n label: 'Choose wallet',\n component: ChooseWallet\n },\n {\n label: 'Choose ticker',\n component: ChooseTicker\n },\n {\n label: 'Exchange',\n component: ChooseExchange\n },\n {\n label: 'Blockcypher',\n component: Blockcypher\n },\n {\n label: 'All set',\n component: AllSet\n }\n]\n\nconst Wallet = ({ doContinue }) => {\n const [step, setStep] = useState(0)\n const [data, setData] = useState({})\n\n const classes = useStyles()\n const mySteps = data?.coin === 'BTC' ? steps : R.remove(4, 1, steps)\n\n const Component = mySteps[step].component\n\n const addData = it => {\n setData(R.merge(data, it))\n setStep(step + 1)\n }\n\n return (\n Choose your wallet
\n\n \n To set up {selected} please read the node wallet instructions from\n our support portal.\n \n
\n \n \n Make sure you set up a BitGo wallet to enter the necessary\n information below. Please follow the instructions on our support\n page if you haven’t.\n \n
\n Enter wallet information
\nEnter wallet information
\n\n
\n )\n}\n\nexport default Wallet\n","import { makeStyles } from '@material-ui/core'\nimport React from 'react'\n\nimport { Button } from 'src/components/buttons'\nimport { H1, P } from 'src/components/typography'\nimport { comet } from 'src/styling/variables'\n\nconst styles = {\n welcome: {\n textAlign: 'center',\n paddingTop: 256\n },\n title: {\n lineHeight: 1,\n fontSize: 48\n },\n getStarted: {\n fontSize: 24,\n fontWeight: 500,\n marginBottom: 54,\n color: comet\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nfunction Welcome({ doContinue }) {\n const classes = useStyles()\n\n return (\n \n
\n \n \n {mySteps.map((it, idx) => (\n \n
\n \n
\n \n
\n )\n}\n\nexport default Welcome\n","import * as R from 'ramda'\nimport React from 'react'\n\nimport { schema as CommissionsSchema } from 'src/pages/Commissions/helper'\nimport { LocaleSchema } from 'src/pages/Locales/helper'\nimport { WalletSchema } from 'src/pages/Wallet/helper'\nimport { fromNamespace, namespaces } from 'src/utils/config'\n\nimport Commissions from './components/Commissions'\nimport Locale from './components/Locales'\n// import Notifications from './components/Notifications'\n// import WizardOperatorInfo from './components/OperatorInfo'\nimport Twilio from './components/Twilio'\nimport Wallet from './components/Wallet/Wallet'\nimport Welcome from './components/Welcome'\n\nconst getConfiguredCoins = (config, crypto) => {\n const wallet = fromNamespace(namespaces.WALLETS, config)\n return R.filter(it =>\n WalletSchema.isValidSync(fromNamespace(it.code, wallet))\n )(crypto)\n}\n\nconst hasValidWallet = (config, crypto) => {\n const wallet = fromNamespace(namespaces.WALLETS, config)\n const coins = R.map(it => fromNamespace(it.code, wallet))(crypto)\n\n const hasValidConfig = R.compose(\n R.any(R.identity),\n R.map(it => WalletSchema.isValidSync(it))\n )(coins)\n\n return hasValidConfig\n}\n\nconst hasValidLocale = config => {\n const locale = fromNamespace(namespaces.LOCALE, config)\n return LocaleSchema.isValidSync(locale)\n}\n\nconst hasValidCommissions = config => {\n const commission = fromNamespace(namespaces.COMMISSIONS, config)\n return CommissionsSchema.isValidSync(commission)\n}\n\nconst getWizardStep = (config, crypto) => {\n if (!config) return 0\n\n const validWallet = hasValidWallet(config, crypto)\n if (!validWallet) return 1\n\n const validLocale = hasValidLocale(config)\n if (!validLocale) return 2\n\n const validCommission = hasValidCommissions(config)\n if (!validCommission) return 3\n\n return 0\n}\n\nconst STEPS = [\n {\n id: 'welcome',\n Component: Welcome\n },\n {\n id: 'wallet',\n Component: Wallet,\n exImage: '/assets/wizard/fullexample.wallet.png',\n subtitle: 'Wallet settings',\n text: `Your wallet settings are the first step for this wizard. \n We'll start by setting up one of cryptocurrencies to get you up and running,\n but you can later set up as many as you want.`\n },\n {\n id: 'locale',\n Component: Locale,\n exImage: '/assets/wizard/fullexample.locale.png',\n subtitle: 'Locales',\n text: `From the Locales page, you can define some important default settings\n of your machines. These values will be the default values of all\n machines you'll later add to your network. Default settings keep you\n from having to enther the same values everytime you add a new machine.\n Once a machine is added, you may override some of these values in the\n overrides section.`\n },\n {\n id: 'twilio',\n Component: Twilio,\n exImage: '/assets/wizard/fullexample.twilio.png',\n subtitle: 'Twilio (SMS service)',\n text: (\n <>\n Twilio is used for SMS operator notifications, phone number collection\n for compliance, and 1-confirmation redemptions on cash-out transactions.\n Welcome to Lamassu Admin
\n\n To get started, we’ve put together wizard that will\n
\n help set up you need before start adding machines.\n
\n You'll need to configure Twilio if you're offering cash-out or any\n compliance options\n \n )\n },\n {\n id: 'commissions',\n Component: Commissions,\n exImage: '/assets/wizard/fullexample.commissions.png',\n subtitle: 'Commissions',\n text: `From the Commissions page, you can define all the commissions of your\n machines. The values set here will be default values of all machines\n you'll later add to your network. Default settings keep you from\n having to enter the same values everytime you add a new machine. Once\n a machine is added, you may override these values per machine and per\n cryptocurrency in the overrides section.`\n }\n // {\n // id: 'notifications',\n // Component: Notifications,\n // exImage: '/assets/wizard/fullexample.notifications.png',\n // subtitle: 'Notifications',\n // text: `Your notification settings will allow customize what notifications you\n // get and where. You can later override all default balance alerts setup\n // here.`\n // },\n // {\n // id: 'operatorInfo',\n // Component: WizardOperatorInfo,\n // exImage: '/assets/wizard/fullexample.operatorinfo.png',\n // subtitle: 'Operator info',\n // text: `Your contact information is important for your customer to be able\n // to contact you in case there’s a problem with one of your machines.\n // In this page, you also be able to set up what you want to share with\n // Coin ATM Radar and add the Terms & Services text that is displayed by your machines.`\n // }\n]\n\nexport { getWizardStep, STEPS, getConfiguredCoins }\n","import { makeStyles, Drawer, Grid } from '@material-ui/core'\nimport classnames from 'classnames'\nimport React, { useState } from 'react'\n\nimport Modal from 'src/components/Modal'\nimport Stepper from 'src/components/Stepper'\nimport { Button, Link } from 'src/components/buttons'\nimport { P, H2, Info2 } from 'src/components/typography'\nimport { spacer } from 'src/styling/variables'\n\nconst useStyles = makeStyles(() => ({\n drawer: {\n borderTop: 'none',\n boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)'\n },\n wrapper: {\n padding: '32px 0',\n flexGrow: 1,\n height: 264\n },\n smallWrapper: {\n height: 84\n },\n title: {\n margin: [[0, spacer * 4, 0, 0]]\n },\n subtitle: {\n marginTop: spacer,\n marginBottom: 6,\n lineHeight: 1.25,\n display: 'inline'\n },\n modal: {\n background: 'none',\n boxShadow: 'none'\n }\n}))\n\nfunction Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {\n const classes = useStyles()\n const [fullExample, setFullExample] = useState(false)\n\n const wrapperClassNames = {\n [classes.wrapper]: true,\n [classes.smallWrapper]: !open\n }\n\n return (\n
\n \n \n {subtitle} \n {open && \n \n \n {steps && currentStep && (\n \n \n \n {open && (\n \n \n {\n setFullExample(true)\n }}>\n See full example\n \n \n \n \n \n \n \n \n )}\n
\n Setup Lamassu Admin
\n{text}
}\n\n {!is404 && wizardTested && \n \n
\n )\n}\n\nconst App = () => {\n const [wizardTested, setWizardTested] = useState(false)\n\n return (\n