\n
\n {icon}
\n \n \n {notificationTitle}\n \n {message} \n {age} \n
\n \n toggleClear(id)}\n className={classnames(iconClass)}\n />\n
\n \n )\n}\n\nexport default NotificationRow\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, { useState, useEffect } from 'react'\n\nimport ActionButton from 'src/components/buttons/ActionButton'\nimport { H5 } from 'src/components/typography'\nimport { ReactComponent as NotificationIconZodiac } from 'src/styling/icons/menu/notification-zodiac.svg'\nimport { ReactComponent as ClearAllIconInverse } from 'src/styling/icons/stage/spring/empty.svg'\nimport { ReactComponent as ClearAllIcon } from 'src/styling/icons/stage/zodiac/empty.svg'\nimport { ReactComponent as ShowUnreadIcon } from 'src/styling/icons/stage/zodiac/full.svg'\n\nimport styles from './NotificationCenter.styles'\nimport NotificationRow from './NotificationRow'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_NOTIFICATIONS = gql`\n query getNotifications {\n notifications {\n id\n type\n detail\n message\n created\n read\n valid\n }\n hasUnreadNotifications\n machines {\n deviceId\n name\n }\n }\n`\n\nconst TOGGLE_CLEAR_NOTIFICATION = gql`\n mutation toggleClearNotification($id: ID!, $read: Boolean!) {\n toggleClearNotification(id: $id, read: $read) {\n id\n read\n }\n }\n`\n\nconst CLEAR_ALL_NOTIFICATIONS = gql`\n mutation clearAllNotifications {\n clearAllNotifications {\n id\n }\n }\n`\n\nconst NotificationCenter = ({\n close,\n hasUnreadProp,\n buttonCoords,\n popperRef,\n refetchHasUnreadHeader\n}) => {\n const { data, loading } = useQuery(GET_NOTIFICATIONS, {\n pollInterval: 60000\n })\n const [xOffset, setXoffset] = useState(300)\n\n const [showingUnread, setShowingUnread] = useState(false)\n const classes = useStyles({ buttonCoords, xOffset })\n const machines = R.compose(\n R.map(R.prop('name')),\n R.indexBy(R.prop('deviceId'))\n )(R.path(['machines'])(data) ?? [])\n const notifications = R.path(['notifications'])(data) ?? []\n const [hasUnread, setHasUnread] = useState(hasUnreadProp)\n\n const [toggleClearNotification] = useMutation(TOGGLE_CLEAR_NOTIFICATION, {\n onError: () => console.error('Error while clearing notification'),\n refetchQueries: () => ['getNotifications']\n })\n const [clearAllNotifications] = useMutation(CLEAR_ALL_NOTIFICATIONS, {\n onError: () => console.error('Error while clearing all notifications'),\n refetchQueries: () => ['getNotifications']\n })\n\n useEffect(() => {\n setXoffset(popperRef.current.getBoundingClientRect().x)\n if (data && data.hasUnreadNotifications !== hasUnread) {\n refetchHasUnreadHeader()\n setHasUnread(!hasUnread)\n }\n }, [popperRef, data, hasUnread, refetchHasUnreadHeader])\n\n const buildNotifications = () => {\n const notificationsToShow =\n !showingUnread || !hasUnread\n ? notifications\n : R.filter(R.propEq('read', false))(notifications)\n return notificationsToShow.map(n => {\n return (\n \n
\n \n )\n}\n\nexport default NotificationCenter\n","import NotificationCenter from './NotificationCenter'\nexport default NotificationCenter\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 \n
\n Notifications
\n \n\n {hasUnread && (\n setShowingUnread(!showingUnread)}>\n {showingUnread ? 'Show all' : 'Show unread'}\n \n )}\n {hasUnread && (\n \n Mark all as read\n \n )}\n
\n \n {!loading && buildNotifications()}\n
\n {children}
\n})\n\nexport default Title\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/add/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.5384615,6 C11.5384615,9.05815385 9.05815385,11.5384615 6,11.5384615 C2.94184615,11.5384615 0.461538462,9.05815385 0.461538462,6 C0.461538462,2.94184615 2.94184615,0.461538462 6,0.461538462 C9.05815385,0.461538462 11.5384615,2.94184615 11.5384615,6 Z\",\n id: \"Stroke-1\",\n stroke: \"#1B2559\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 3.69230769,\n x2: 6,\n y2: 8.30769231,\n id: \"Stroke-3\",\n stroke: \"#1B2559\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 3.69230769,\n y1: 6,\n x2: 8.30769231,\n y2: 6,\n id: \"Stroke-5\",\n stroke: \"#1B2559\"\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.a976fef2.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport typographyStyles from 'src/components/typography/styles'\nimport { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'\nimport { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'\n\nconst { p } = typographyStyles\n\nconst styles = {\n button: {\n extend: p,\n border: 'none',\n backgroundColor: zircon,\n cursor: 'pointer',\n outline: 0,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: 167,\n height: 48,\n color: fontColor,\n '&:hover': {\n backgroundColor: zircon2\n },\n '&:active': {\n backgroundColor: comet,\n color: white,\n '& svg g *': {\n stroke: white\n }\n },\n '& svg': {\n marginRight: 8\n }\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst SimpleButton = memo(({ className, children, ...props }) => {\n const classes = useStyles()\n\n return (\n \n )\n})\n\nexport default SimpleButton\n","import typographyStyles from 'src/components/typography/styles'\nimport {\n white,\n disabledColor,\n secondaryColor,\n secondaryColorDark,\n secondaryColorDarker,\n offColor,\n offDarkColor,\n offDarkerColor,\n spacer\n} from 'src/styling/variables'\n\nconst { h1, h3 } = typographyStyles\n\nconst pickSize = size => {\n switch (size) {\n case 'xl':\n return spacer * 7.625\n case 'sm':\n return spacer * 4\n case 'lg':\n default:\n return spacer * 5\n }\n}\n\nexport default {\n wrapper: ({ size }) => {\n const height = pickSize(size)\n const shadowSize = height / 12\n return { height: height + shadowSize / 2 }\n },\n button: ({ size, backgroundColor }) => {\n const height = pickSize(size)\n const shadowSize = size === 'xl' ? 3 : height / 12\n const padding = size === 'xl' ? 20 : height / 2\n const isGrey = backgroundColor === 'grey'\n\n return {\n extend: size === 'xl' ? h1 : h3,\n border: 'none',\n color: white,\n cursor: 'pointer',\n fontWeight: 900,\n outline: 0,\n backgroundColor: isGrey ? offDarkColor : secondaryColor,\n '&:disabled': {\n backgroundColor: disabledColor,\n boxShadow: 'none',\n '&:hover': {\n backgroundColor: disabledColor,\n boxShadow: 'none'\n },\n '&:active': {\n marginTop: 0\n }\n },\n shadowSize,\n height,\n padding: `0 ${padding}px`,\n borderRadius: height / 4,\n boxShadow: `0 ${shadowSize}px ${isGrey ? offColor : secondaryColorDark}`,\n '&:hover': {\n backgroundColor: isGrey ? offColor : secondaryColorDark,\n boxShadow: `0 ${shadowSize}px ${\n isGrey ? offDarkerColor : secondaryColorDarker\n }`\n },\n '&:active': {\n marginTop: shadowSize / 2,\n backgroundColor: isGrey ? offDarkColor : secondaryColorDark,\n boxShadow: `0 ${shadowSize / 2}px ${\n isGrey ? offDarkerColor : secondaryColorDarker\n }`\n }\n }\n }\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport styles from './Button.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst ActionButton = memo(\n ({\n size = 'lg',\n children,\n className,\n buttonClassName,\n backgroundColor,\n ...props\n }) => {\n const classes = useStyles({ size, backgroundColor })\n return (\n\n \n {children}\n \n
\n )\n }\n)\n\nexport default ActionButton\n","import {\n white,\n fontColor,\n subheaderColor,\n subheaderDarkColor,\n offColor,\n offDarkColor\n} from 'src/styling/variables'\n\nconst colors = (color1, color2, color3) => {\n return {\n backgroundColor: color1,\n '&:hover': {\n backgroundColor: color2\n },\n '&:active': {\n backgroundColor: color3\n }\n }\n}\n\nconst buttonHeight = 32\n\nexport default {\n baseButton: {\n extend: colors(subheaderColor, subheaderDarkColor, offColor),\n cursor: 'pointer',\n border: 'none',\n outline: 0,\n height: buttonHeight,\n color: fontColor,\n '&:active': {\n color: white\n }\n },\n primary: {\n extend: colors(subheaderColor, subheaderDarkColor, offColor),\n '&:active': {\n color: white,\n '& $buttonIcon': {\n display: 'none'\n },\n '& $buttonIconActive': {\n display: 'block'\n }\n },\n '& $buttonIconActive': {\n display: 'none'\n }\n },\n secondary: {\n extend: colors(offColor, offDarkColor, white),\n color: white,\n '&:active': {\n color: fontColor,\n '& $buttonIcon': {\n display: 'flex'\n },\n '& $buttonIconActive': {\n display: 'none'\n }\n },\n '& $buttonIcon': {\n display: 'none'\n },\n '& $buttonIconActive': {\n display: 'flex'\n }\n }\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport baseButtonStyles from './BaseButton.styles'\n\nconst { baseButton, primary } = baseButtonStyles\n\nconst styles = {\n featureButton: {\n extend: baseButton,\n width: baseButton.height,\n borderRadius: baseButton.height / 2,\n display: 'flex',\n padding: 0\n },\n primary,\n buttonIcon: {\n margin: 'auto',\n '& svg': {\n width: 16,\n height: 16,\n overflow: 'visible',\n '& g': {\n strokeWidth: 1.8\n }\n }\n },\n buttonIconActive: {} // required to extend primary\n}\n\nconst useStyles = makeStyles(styles)\n\nconst FeatureButton = memo(\n ({ className, Icon, InverseIcon, children, ...props }) => {\n const classes = useStyles()\n\n const classNames = {\n [classes.featureButton]: true,\n [classes.primary]: true\n }\n\n return (\n \n )\n }\n)\n\nexport default FeatureButton\n","import { makeStyles, Popper as MaterialPopper, Paper } from '@material-ui/core'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { white } from 'src/styling/variables'\n\nconst Popover = ({\n children,\n bgColor = white,\n arrowSize = 6,\n className,\n ...props\n}) => {\n const [arrowRef, setArrowRef] = useState(null)\n\n const styles = {\n popover: {\n zIndex: 3000,\n backgroundColor: bgColor,\n borderRadius: 4\n },\n arrow: {\n position: 'absolute',\n fontSize: arrowSize,\n width: '3em',\n height: '3em'\n },\n arrowBottom: {\n top: 0,\n width: 0,\n height: 0,\n borderLeft: [['2em', 'solid', 'transparent']],\n borderRight: [['2em', 'solid', 'transparent']],\n borderBottom: [['2em', 'solid', bgColor]],\n marginTop: '-1.9em',\n '&:after': {\n zIndex: -10,\n content: '\"\"',\n position: 'absolute',\n width: arrowSize * 3,\n height: arrowSize * 3,\n marginLeft: 0,\n bottom: 0,\n top: 'calc(50% - 0px)',\n left: 0,\n border: '5px solid #fff',\n borderColor: 'transparent transparent #fff #fff',\n transformOrigin: '0 0',\n transform: 'rotate(45deg)',\n boxShadow:\n '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)'\n }\n },\n arrowTop: {\n bottom: 0,\n width: 0,\n height: 0,\n borderLeft: [['2em', 'solid', 'transparent']],\n borderRight: [['2em', 'solid', 'transparent']],\n borderTop: [['2em', 'solid', bgColor]],\n marginBottom: '-1.9em',\n '&:after': {\n zIndex: -10,\n content: '\"\"',\n position: 'absolute',\n width: arrowSize * 3,\n height: arrowSize * 3,\n marginLeft: 0,\n bottom: 0,\n top: -(arrowSize * 4 + 2),\n left: 0,\n border: '5px solid #fff',\n borderColor: 'transparent transparent #fff #fff',\n transformOrigin: '0 0',\n transform: 'rotate(45deg)',\n boxShadow:\n '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)'\n }\n },\n arrowRight: {\n left: 0,\n width: 0,\n height: 0,\n borderTop: [['2em', 'solid', 'transparent']],\n borderBottom: [['2em', 'solid', 'transparent']],\n borderRight: [['2em', 'solid', bgColor]],\n marginLeft: '-1.9em'\n },\n arrowLeft: {\n right: 0,\n width: 0,\n height: 0,\n borderTop: [['2em', 'solid', 'transparent']],\n borderBottom: [['2em', 'solid', 'transparent']],\n borderLeft: [['2em', 'solid', bgColor]],\n marginRight: '-1.9em'\n },\n root: {\n backgroundColor: bgColor\n }\n }\n\n const useStyles = makeStyles(styles)\n\n const classes = useStyles()\n\n const arrowClasses = {\n [classes.arrow]: true,\n [classes.arrowBottom]: props.placement === 'bottom',\n [classes.arrowTop]: props.placement === 'top',\n [classes.arrowRight]: props.placement === 'right',\n [classes.arrowLeft]: props.placement === 'left'\n }\n\n const modifiers = R.merge(props.modifiers, {\n flip: {\n enabled: false\n },\n preventOverflow: {\n enabled: true,\n boundariesElement: 'scrollParent'\n },\n offset: {\n enabled: true,\n offset: '0, 10'\n },\n arrow: {\n enabled: true,\n element: arrowRef\n },\n computeStyle: {\n gpuAcceleration: false\n }\n })\n\n return (\n <>\n \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 {children}
\n\n {!rightSideLabel && {label} }\n {label} }\n
\n ) : (\n \n {disabledMessage} \n
\n )}\n \n )\n}\n\nexport default CheckboxInput\n","import { primaryColor, zircon, errorColor } from 'src/styling/variables'\n\nconst styles = {\n input: {\n width: '3.5rem !important',\n height: '5rem',\n border: '2px solid',\n borderColor: zircon,\n borderRadius: '4px'\n },\n focus: {\n border: '2px solid',\n borderColor: primaryColor,\n borderRadius: '4px',\n '&:focus': {\n outline: 'none'\n }\n },\n error: {\n borderColor: errorColor\n },\n container: {\n justifyContent: 'space-evenly'\n }\n}\n\nexport default styles\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport React from 'react'\nimport OtpInput from 'react-otp-input'\n\nimport typographyStyles from 'src/components/typography/styles'\n\nimport styles from './CodeInput.styles'\n\nconst useStyles = makeStyles(styles)\nconst useTypographyStyles = makeStyles(typographyStyles)\n\nconst CodeInput = ({\n name,\n value,\n onChange,\n numInputs,\n error,\n inputStyle,\n containerStyle,\n ...props\n}) => {\n const classes = useStyles()\n const typographyClasses = useTypographyStyles()\n\n return (\n \n {option.subtitle} \n )}\n
\n \n
\n \n )\n })}\n \n )\n}\n\nexport default ToggleButtonGroup\n","import { useFormikContext } from 'formik'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { Autocomplete } from '../base'\n\nconst AutocompleteFormik = ({ options, onChange, ...props }) => {\n const [open, setOpen] = useState(false)\n\n const { name, onBlur, value } = props.field\n const { touched, errors, setFieldValue, setFieldTouched } = props.form\n const error = !!(touched[name] && errors[name])\n const { initialValues, values } = useFormikContext()\n\n const innerOptions =\n R.type(options) === 'Function' ? options(initialValues, values) : options\n\n const innerOnBlur = event => {\n name && setFieldTouched(name, true)\n onBlur && onBlur(event)\n }\n\n const onChangeHandler = value => setFieldValue(name, value)\n const shouldStayOpen = !!props.shouldStayOpen\n\n return (\n \n
\n {option.title}
\n{option.description}
\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 = ({ currency, notes, total }) => {\n const classes = gridClasses()\n return (\n <>\n \n {!omitInnerPercentage && ltHalf && (\n {percent.toFixed(0)}% \n )}\n
\n \n {!omitInnerPercentage && !ltHalf && (\n {percent.toFixed(0)}% \n )}\n
\n \n
\n \n )\n}\n\nconst CashOut = ({\n capacity = 500,\n denomination = 0,\n currency,\n notes,\n className,\n editingMode = false,\n threshold,\n width\n}) => {\n const percent = (100 * notes) / capacity\n const isLow = percent < threshold\n const classes = gridClasses()\n return (\n <>\n \n
\n \n {notes} notes \n
\n \n \n {total} {currency.code}\n \n
\n \n
\n \n )\n}\n\nexport { Cashbox, CashIn, CashOut }\n","import { makeStyles } from '@material-ui/core'\nimport classNames from 'classnames'\nimport React, { memo, useState } from 'react'\n\nimport { CashOut } from 'src/components/inputs/cashbox/Cashbox'\n\nimport { NumberInput } from '../base'\nconst useStyles = makeStyles({\n flex: {\n display: 'flex'\n },\n cashCassette: {\n height: 36,\n marginRight: 14\n }\n})\n\nconst CashCassetteInput = memo(\n ({ decimalPlaces, width, threshold, inputClassName, ...props }) => {\n const classes = useStyles()\n const { name, onChange, onBlur, value } = props.field\n const { touched, errors } = props.form\n const [notes, setNotes] = useState(value)\n const error = !!(touched[name] && errors[name])\n return (\n \n
\n {!editingMode && (\n \n
\n )}\n \n {notes} \n
\n \n \n {numberToFiatAmount(notes * denomination)} {currency.code}\n \n
\n \n {\n setNotes(e.target.value)\n return onChange(e)\n }}\n onBlur={onBlur}\n value={value}\n error={error}\n decimalPlaces={decimalPlaces}\n {...props}\n />\n
\n )\n }\n)\n\nexport default CashCassetteInput\n","import React, { memo } from 'react'\n\nimport { Checkbox } from '../base'\n\nconst CheckboxInput = memo(\n ({\n label,\n textAlign,\n fullWidth,\n enabled = true,\n disabledMessage = '',\n ...props\n }) => {\n const { name, onChange, value = true } = props.field\n\n const settings = {\n enabled: enabled,\n label: label,\n disabledMessage: disabledMessage\n }\n\n return (\n \n {loading &&
\n ))}\n {!loading && 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 Loading...
}\n {!loading &&\n data?.map((it, idx) => (\n onClick(it)}>\n \n {itemRender ? itemRender(it, isSelected(it)) : displayName(it)}\n
\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(\"g\", {\n id: \"icon/ID/photo/new/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: \"M12,14 C9.7912,14 8,12.2088 8,10 C8,7.7912 9.7912,6 12,6 C14.2088,6 16,7.7912 16,10 C16,12.2088 14.2088,14 12,14 Z M16.7142857,3.4 L14.3571429,1 L9.64285714,1 L7.28571429,3.4 L1,3.4 L1,17 L23,17 L23,3.4 L16.7142857,3.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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/photo/new/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.088002a2.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-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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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: \"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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","import typographyStyles from 'src/components/typography/styles'\nimport {\n placeholderColor,\n backgroundColor,\n primaryColor,\n mainWidth,\n spring2,\n spring3,\n errorColor\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 qrTextInfoWrapper: {\n display: 'flex',\n flexDirection: 'row'\n },\n qrTextWrapper: {\n width: 381,\n marginLeft: 80,\n display: 'flex',\n flexDirection: 'column'\n },\n textWrapper: {\n display: 'flex',\n flexDirection: 'column'\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 successMessageWrapper: {\n backgroundColor: spring3,\n display: 'flex',\n flexDirection: 'row',\n padding: '0px 10px',\n borderRadius: '8px'\n },\n successMessage: {\n color: spring2,\n margin: '8px 0px'\n },\n successMessageIcon: {\n marginRight: 16,\n marginBottom: 2,\n display: 'flex',\n flexDirection: 'col',\n alignItems: 'center'\n },\n errorMessage: {\n color: errorColor\n },\n qrCodeImageWrapper: {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: 'white',\n border: `5px solid ${primaryColor}`,\n padding: 5,\n borderRadius: 15\n },\n qrCodeScanMessage: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n margin: [[0, 0, 20, 20]],\n '& > p': {\n marginLeft: 10\n }\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, useEffect, useRef } 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 CameraIcon } from 'src/styling/icons/ID/photo/zodiac.svg'\nimport { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'\nimport { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.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 timeout = useRef(null)\n const CLOSE_SCREEN_TIMEOUT = 2000\n const { data } = useQuery(GET_MACHINES, { pollInterval: 10000 })\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current)\n }\n }\n }, [])\n\n const addedMachine = data?.machines?.find(m => m.name === name)\n const hasNewMachine = getSize(data) > count && addedMachine\n if (hasNewMachine) {\n timeout.current = setTimeout(\n () => onPaired(addedMachine),\n CLOSE_SCREEN_TIMEOUT\n )\n }\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('Machine name is required.')\n .max(50)\n .test(\n 'unique-name',\n 'Machine name is already in use.',\n (value, context) => !context.options.context.machineNames.includes(value)\n )\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 const { data } = useQuery(GET_MACHINES)\n const machineNames = R.map(R.prop('name'), data?.machines || {})\n\n const uniqueNameValidator = value => {\n try {\n validationSchema.validateSync(value, {\n context: { machineNames: machineNames }\n })\n } catch (error) {\n return error\n }\n }\n\n return (\n <>\n \n
\n \n
\n Snap a picture and scan
\n\n
\n \n
\n {hasNewMachine && (\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\n your machine.\n
\n\n \n Machine has been successfully paired!\n \n
\n )}\n \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(\"g\", {\n id: \"icon/button/add/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.5384615,6 C11.5384615,9.05815385 9.05815385,11.5384615 6,11.5384615 C2.94184615,11.5384615 0.461538462,9.05815385 0.461538462,6 C0.461538462,2.94184615 2.94184615,0.461538462 6,0.461538462 C9.05815385,0.461538462 11.5384615,2.94184615 11.5384615,6 Z\",\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 3.69230769,\n x2: 6,\n y2: 8.30769231,\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 3.69230769,\n y1: 6,\n x2: 8.30769231,\n y2: 6,\n id: \"Stroke-5\",\n stroke: \"#FFFFFF\"\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.cc7667ff.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(\"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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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: \"nav-/-primary-/-1440\",\n transform: \"translate(-1295.000000, -19.000000)\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/menu/notification\",\n transform: \"translate(1296.000000, 20.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.1052632,14.3157895 C10.1052632,15.2454737 9.35073684,16 8.42105263,16 C7.49136842,16 6.73684211,15.2454737 6.73684211,14.3157895\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1.6,14.3157895 C0.7168,14.3157895 0,13.6031813 0,12.7251462 C0,11.8471111 0.7168,11.1345029 1.6,11.1345029 L1.6,6.3625731 C1.6,2.84884211 4.4656,0 8,0 C11.5344,0 14.4,2.84884211 14.4,6.3625731 L14.4,11.1345029 C15.2832,11.1345029 16,11.8471111 16,12.7251462 C16,13.6031813 15.2832,14.3157895 14.4,14.3157895 L1.6,14.3157895 Z\",\n id: \"Stroke-3\",\n strokeLinejoin: \"round\"\n}))));\n\nfunction SvgNotification(_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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgNotification);\nexport default __webpack_public_path__ + \"static/media/notification.a9712ffd.svg\";\nexport { ForwardRef as ReactComponent };","import typographyStyles from 'src/components/typography/styles'\nimport {\n version,\n mainWidth,\n spacer,\n white,\n primaryColor,\n secondaryColor,\n placeholderColor,\n subheaderColor,\n fontColor\n} from 'src/styling/variables'\n\nconst { 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\nconst styles = {\n headerContainer: {\n position: 'relative'\n },\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 },\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 margin: 0\n },\n subheaderLi: {\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 textShadow: '0.2px 0 0 currentColor',\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 logoLink: {\n cursor: 'pointer'\n },\n actionButtonsContainer: {\n zIndex: 1,\n position: 'relative',\n display: 'flex',\n justifyContent: 'space-between',\n minWidth: 200,\n transform: 'translateZ(0)'\n },\n notificationIcon: {\n marginTop: spacer / 2,\n cursor: 'pointer',\n background: 'transparent',\n boxShadow: '0px 0px 0px transparent',\n border: '0px solid transparent',\n textShadow: '0px 0px 0px transparent',\n outline: 'none'\n },\n hasUnread: {\n position: 'absolute',\n top: 4,\n left: 186,\n width: '9px',\n height: '9px',\n backgroundColor: secondaryColor,\n borderRadius: '50%'\n },\n popper: {\n zIndex: 1\n }\n}\n\nexport default styles\n","import { useQuery } from '@apollo/react-hooks'\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener'\nimport Popper from '@material-ui/core/Popper'\nimport { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { memo, useState, useEffect, useRef } from 'react'\nimport { NavLink, useHistory } from 'react-router-dom'\n\nimport NotificationCenter from 'src/components/NotificationCenter'\nimport ActionButton from 'src/components/buttons/ActionButton'\nimport { H4 } from 'src/components/typography'\nimport AddMachine from 'src/pages/AddMachine'\nimport { ReactComponent as AddIconReverse } from 'src/styling/icons/button/add/white.svg'\nimport { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'\nimport { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'\nimport { ReactComponent as NotificationIcon } from 'src/styling/icons/menu/notification.svg'\n\nimport styles from './Header.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst HAS_UNREAD = gql`\n query getUnread {\n hasUnreadNotifications\n }\n`\n\nconst Subheader = ({ item, classes, user }) => {\n const [prev, setPrev] = useState(null)\n\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 notNil = R.compose(R.not, R.isNil)\n\nconst Header = memo(({ tree, user }) => {\n const [open, setOpen] = useState(false)\n const [anchorEl, setAnchorEl] = useState(null)\n const [notifButtonCoords, setNotifButtonCoords] = useState({ x: 0, y: 0 })\n const [active, setActive] = useState()\n const [hasUnread, setHasUnread] = useState(false)\n\n const { data, refetch, startPolling, stopPolling } = useQuery(HAS_UNREAD)\n const notifCenterButtonRef = useRef()\n const popperRef = useRef()\n const history = useHistory()\n const classes = useStyles()\n\n useEffect(() => {\n if (data?.hasUnreadNotifications) return setHasUnread(true)\n // if not true, make sure it's false and not undefined\n if (notNil(data?.hasUnreadNotifications)) return setHasUnread(false)\n }, [data])\n\n useEffect(() => {\n startPolling(60000)\n return stopPolling\n })\n\n const onPaired = machine => {\n setOpen(false)\n history.push('/maintenance/machine-status', { id: machine.deviceId })\n }\n\n // these inline styles prevent scroll bubbling: when the user reaches the bottom of the notifications list and keeps scrolling,\n // the body scrolls, stealing the focus from the notification center, preventing the admin from scrolling the notifications back up\n // on the first scroll, needing to move the mouse to recapture the focus on the notification center\n // it also disables the scrollbars caused by the notification center's background to the right of the page, but keeps the scrolling on the body enabled\n const onClickAway = () => {\n setAnchorEl(null)\n document.querySelector('#root').classList.remove('root-notifcenter-open')\n document.querySelector('body').classList.remove('body-notifcenter-open')\n }\n\n const handleClick = event => {\n const coords = notifCenterButtonRef.current.getBoundingClientRect()\n setNotifButtonCoords({ x: coords.x, y: coords.y + 5 })\n\n setAnchorEl(anchorEl ? null : event.currentTarget)\n document.querySelector('#root').classList.add('root-notifcenter-open')\n document.querySelector('body').classList.add('body-notifcenter-open')\n }\n\n const popperOpen = Boolean(anchorEl)\n const id = popperOpen ? 'notifications-popper' : undefined\n return (\n \n \n
\n \n
\n \n {active && active.children && (\n \n {\n setActive(false)\n history.push('/dashboard')\n }}\n className={classnames(classes.logo, classes.logoLink)}>\n
\n \n Lamassu Admin
\n\n setOpen(true)}>\n Add machine\n \n \n \n
\n \n \n \n
\n \n {children} \n
\n )\n}\n\nexport default ErrorMessage\n","import { backgroundColor } from 'src/styling/variables'\n\nexport default {\n titleWrapper: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'row'\n },\n titleAndButtonsContainer: {\n display: 'flex',\n alignItems: 'center'\n },\n error: {\n marginLeft: 12\n },\n subpageButton: {\n marginLeft: 12\n },\n buttonText: {\n color: backgroundColor,\n fontFamily: 'Mont',\n fontSize: 15\n },\n icon: {\n marginRight: 6\n },\n label: {\n marginRight: 24\n }\n}\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 { SubpageButton } from 'src/components/buttons'\nimport { Info1, Label1 } from 'src/components/typography'\n\nimport styles from './TitleSection.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst TitleSection = ({\n className,\n title,\n error,\n labels,\n buttons = [],\n children,\n appendix,\n appendixRight\n}) => {\n const classes = useStyles()\n return (\n \n \n {(labels ?? []).map(({ icon, label }, idx) => (\n \n {label} \n \n ))}\n {appendixRight}\n \n {children}\n
\n )\n}\n\nexport default TitleSection\n","import { backgroundColor, errorColor } from 'src/styling/variables'\n\nconst styles = {\n title: {\n paddingTop: 8\n },\n input: {\n marginBottom: 25,\n marginTop: -15\n },\n wrapper: {\n padding: '2.5em 4em',\n width: 575,\n display: 'flex',\n flexDirection: 'column'\n },\n titleWrapper: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n marginBottom: 30\n },\n rememberMeWrapper: {\n marginTop: 35,\n display: 'flex',\n flexDirection: 'row'\n },\n icon: {\n transform: 'scale(1.5)',\n marginRight: 25\n },\n checkbox: {\n transform: 'scale(1.5)',\n marginRight: 5,\n marginLeft: -5\n },\n footer: {\n marginTop: '10vh'\n },\n twofaFooter: {\n marginTop: '6vh'\n },\n fidoLoginButtonWrapper: {\n marginBottom: 12\n },\n loginButton: {\n display: 'block',\n width: '100%'\n },\n welcomeBackground: {\n background: 'url(/wizard-background.svg) no-repeat center center fixed',\n backgroundColor: backgroundColor,\n backgroundSize: 'cover',\n height: '100vh',\n width: '100vw',\n position: 'relative',\n left: '50%',\n right: '50%',\n marginLeft: '-50vw',\n marginRight: '-50vw',\n minHeight: '100vh'\n },\n info: {\n marginBottom: '5vh'\n },\n info2: {\n textAlign: 'justify'\n },\n infoWrapper: {\n marginBottom: '3vh'\n },\n errorMessage: {\n color: errorColor\n },\n qrCodeWrapper: {\n display: 'flex',\n justifyContent: 'center',\n marginBottom: '3vh'\n },\n secretWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n secretLabel: {\n marginRight: 15\n },\n secret: {\n marginRight: 35\n },\n hiddenSecret: {\n marginRight: 35,\n filter: 'blur(8px)'\n },\n confirm2FAInput: {\n marginTop: 25\n },\n confirmPassword: {\n marginTop: 25\n },\n error: {\n color: errorColor\n },\n enterButton: {\n display: 'none'\n }\n}\n\nexport default styles\n","const STATES = {\n LOGIN: 'LOGIN',\n SETUP_2FA: 'SETUP2FA',\n INPUT_2FA: 'INPUT2FA',\n FIDO: 'FIDO'\n}\n\nexport { STATES }\n","import { useMutation, useLazyQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport base64 from 'base-64'\nimport { Form, Formik } from 'formik'\nimport gql from 'graphql-tag'\nimport React, { useContext, useState } from 'react'\nimport { useHistory } from 'react-router-dom'\n\nimport AppContext from 'src/AppContext'\nimport { Button } from 'src/components/buttons'\nimport { CodeInput } from 'src/components/inputs/base'\nimport { TL1, P } from 'src/components/typography'\n\nimport styles from './shared.styles'\nimport { STATES } from './states'\n\nconst useStyles = makeStyles(styles)\n\nconst INPUT_2FA = gql`\n mutation input2FA(\n $username: String!\n $password: String!\n $code: String!\n $rememberMe: Boolean!\n ) {\n input2FA(\n username: $username\n password: $password\n code: $code\n rememberMe: $rememberMe\n )\n }\n`\n\nconst GET_USER_DATA = gql`\n {\n userData {\n id\n username\n role\n }\n }\n`\n\nconst Input2FAState = ({ state, dispatch }) => {\n const classes = useStyles()\n const history = useHistory()\n const { setUserData } = useContext(AppContext)\n\n const [invalidToken, setInvalidToken] = useState(false)\n\n const [getUserData, { error: queryError }] = useLazyQuery(GET_USER_DATA, {\n onCompleted: ({ userData }) => {\n setUserData(userData)\n history.push('/')\n }\n })\n\n const [input2FA, { error: mutationError }] = useMutation(INPUT_2FA, {\n onCompleted: ({ input2FA: success }) => {\n if (success) {\n const options = {\n context: {\n headers: {\n 'Pazuz-Operator-Identifier': base64.encode(state.clientField)\n }\n }\n }\n return getUserData(options)\n }\n return setInvalidToken(true)\n }\n })\n\n const handle2FAChange = value => {\n dispatch({\n type: STATES.INPUT_2FA,\n payload: {\n twoFAField: value\n }\n })\n setInvalidToken(false)\n }\n\n const handleSubmit = () => {\n if (state.twoFAField.length !== 6) {\n setInvalidToken(true)\n return\n }\n\n const options = {\n variables: {\n username: state.clientField,\n password: state.passwordField,\n code: state.twoFAField,\n rememberMe: state.rememberMeField\n },\n context: {\n headers: {\n 'Pazuz-Operator-Identifier': base64.encode(state.clientField)\n }\n }\n }\n\n input2FA(options)\n }\n\n const getErrorMsg = () => {\n if (queryError) return 'Internal server error'\n if (state.twoFAField.length !== 6 && invalidToken)\n return 'The code should have 6 characters!'\n if (mutationError || invalidToken)\n return 'Code is invalid. Please try again.'\n return null\n }\n\n const errorMessage = getErrorMsg()\n\n return (\n <>\n \n {title} \n {!!appendix && appendix}\n {error && (\n Failed to save \n )}\n {buttons.length > 0 && (\n <>\n {buttons.map((button, idx) => (\n \n {button.text} \n \n ))}\n \n )}\n
\n {icon}
\n \n {errorMessage &&
\n \n )\n}\n\nexport default Input2FAState\n","import { useMutation, useLazyQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport { startAssertion } from '@simplewebauthn/browser'\nimport { Field, Form, Formik } from 'formik'\nimport gql from 'graphql-tag'\nimport React, { useState, useContext } from 'react'\nimport { useHistory } from 'react-router-dom'\nimport * as Yup from 'yup'\n\nimport AppContext from 'src/AppContext'\nimport { Button } from 'src/components/buttons'\nimport { Checkbox, TextInput } from 'src/components/inputs/formik'\nimport { H2, Label2, P } from 'src/components/typography'\n\nimport styles from './shared.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_USER_DATA = gql`\n {\n userData {\n id\n username\n role\n }\n }\n`\n\nconst validationSchema = Yup.object().shape({\n localClient: Yup.string()\n .required('Client field is required!')\n .email('Username field should be in an email format!'),\n localRememberMe: Yup.boolean()\n})\n\nconst initialValues = {\n localClient: '',\n localRememberMe: false\n}\n\nconst InputFIDOState = ({ state, strategy }) => {\n const GENERATE_ASSERTION = gql`\n query generateAssertionOptions($username: String!${\n strategy === 'FIDO2FA' ? `, $password: String!` : ``\n }, $domain: String!) {\n generateAssertionOptions(username: $username${\n strategy === 'FIDO2FA' ? `, password: $password` : ``\n }, domain: $domain)\n }\n `\n\n const VALIDATE_ASSERTION = gql`\n mutation validateAssertion(\n $username: String!\n ${strategy === 'FIDO2FA' ? `, $password: String!` : ``}\n $rememberMe: Boolean!\n $assertionResponse: JSONObject!\n $domain: String!\n ) {\n validateAssertion(\n username: $username\n ${strategy === 'FIDO2FA' ? `password: $password` : ``}\n rememberMe: $rememberMe\n assertionResponse: $assertionResponse\n domain: $domain\n )\n }\n `\n\n const classes = useStyles()\n const history = useHistory()\n const { setUserData } = useContext(AppContext)\n\n const [localClientField, setLocalClientField] = useState('')\n const [localRememberMeField, setLocalRememberMeField] = useState(false)\n const [invalidUsername, setInvalidUsername] = useState(false)\n const [invalidToken, setInvalidToken] = useState(false)\n\n const [validateAssertion, { error: mutationError }] = useMutation(\n VALIDATE_ASSERTION,\n {\n onCompleted: ({ validateAssertion: success }) => {\n success ? getUserData() : setInvalidToken(true)\n }\n }\n )\n\n const [assertionOptions, { error: assertionQueryError }] = useLazyQuery(\n GENERATE_ASSERTION,\n {\n variables:\n strategy === 'FIDO2FA'\n ? {\n username: state.clientField,\n password: state.passwordField,\n domain: window.location.hostname\n }\n : {\n username: localClientField,\n domain: window.location.hostname\n },\n onCompleted: ({ generateAssertionOptions: options }) => {\n startAssertion(options)\n .then(res => {\n const variables =\n strategy === 'FIDO2FA'\n ? {\n username: state.clientField,\n password: state.passwordField,\n rememberMe: state.rememberMeField,\n assertionResponse: res,\n domain: window.location.hostname\n }\n : {\n username: localClientField,\n rememberMe: localRememberMeField,\n assertionResponse: res,\n domain: window.location.hostname\n }\n validateAssertion({\n variables\n })\n })\n .catch(err => {\n console.error(err)\n setInvalidToken(true)\n })\n }\n }\n )\n\n const [getUserData, { error: queryError }] = useLazyQuery(GET_USER_DATA, {\n onCompleted: ({ userData }) => {\n setUserData(userData)\n history.push('/')\n }\n })\n\n const getErrorMsg = (formikErrors, formikTouched) => {\n if (!formikErrors || !formikTouched) return null\n if (assertionQueryError || queryError || mutationError)\n return 'Internal server error'\n if (formikErrors.client && formikTouched.client) return formikErrors.client\n if (invalidUsername) return 'Invalid login.'\n if (invalidToken) return 'Code is invalid. Please try again.'\n return null\n }\n\n return (\n <>\n {strategy === 'FIDOPasswordless' && (\n {errorMessage}
}\n \n\n Insert your hardware key and follow the instructions\n
\n\n \n This account does not yet have two-factor authentication enabled. To\n secure the admin, two-factor authentication is required.\n \n \n To complete the registration process, scan the following QR code or\n insert the secret below on a 2FA app, such as Google Authenticator\n or AndOTP.\n \n
\n \n
\n \n Your secret: \n \n {secret}\n \n {\n setShowing(!isShowing)\n }}>\n {isShowing ? 'Hide' : 'Show'}\n \n
\n \n {/* TODO: refactor the 2FA CodeInput to properly use Formik */}\n {}} initialValues={{}}>\n \n \n
\n \n {getErrorMsg() && (\n
\n \n )\n )\n}\n\nexport default Setup2FAState\n","import Paper from '@material-ui/core/Paper'\nimport { makeStyles } from '@material-ui/core/styles'\nimport React, { useReducer } from 'react'\n\nimport { H5 } from 'src/components/typography'\nimport { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'\n\nimport Input2FAState from './Input2FAState'\nimport InputFIDOState from './InputFIDOState'\nimport LoginState from './LoginState'\nimport Setup2FAState from './Setup2FAState'\nimport styles from './shared.styles'\nimport { STATES } from './states'\n\n// FIDO2FA, FIDOPasswordless or FIDOUsernameless\nconst AUTHENTICATION_STRATEGY = 'FIDO2FA'\n\nconst useStyles = makeStyles(styles)\n\nconst initialState = {\n twoFAField: '',\n clientField: '',\n passwordField: '',\n rememberMeField: false,\n loginState: STATES.LOGIN\n}\n\nconst reducer = (state, action) => {\n const { type, payload } = action\n return { ...state, ...payload, loginState: type }\n}\n\nconst LoginCard = () => {\n const classes = useStyles()\n\n const [state, dispatch] = useReducer(reducer, initialState)\n\n const renderState = () => {\n switch (state.loginState) {\n case STATES.LOGIN:\n return (\n {getErrorMsg()}
\n )}\n \n\n
\n \n
\n {renderState()}\n Lamassu Admin
\n\n \n \n
\n \n {\n register({\n variables: {\n token: token,\n username: state.username,\n password: values.password,\n role: state.role\n }\n })\n }}>\n {({ errors, touched }) => (\n \n )}\n \n )}\n {!loading && state.result === 'failure' && (\n <>\n Link has expired \n \n To obtain a new link, run the command{' '}\n lamassu-register in your server’s terminal.\n \n \n )}\n
\n \n
\n {!loading && state.result === 'success' && (\n Lamassu Admin
\n\n \n \n
\n \n Link has expired \n \n )}\n
\n \n
\n {!loading && state.result === 'success' && (\n <>\n Lamassu Admin
\n\n \n To finish this process, please scan the following QR code\n or insert the secret further below on an authentication\n app of your choice, such Google Authenticator or Authy.\n \n
\n \n
\n \n \n Your secret:\n \n \n {state.secret}\n \n {\n setShowing(!isShowing)\n }}>\n {isShowing ? 'Hide' : 'Show'}\n \n
\n \n {/* TODO: refactor the 2FA CodeInput to properly use Formik */}\n {}} initialValues={{}}>\n \n \n
\n \n {getErrorMsg() && (\n \n Done\n \n
\n \n )}\n {!loading && state.result === 'failure' && (\n <>\n {getErrorMsg()}
\n )}\n\n \n \n
\n \n {\n resetPassword({\n variables: {\n token: token,\n userID: userID,\n newPassword: values.confirmPassword\n }\n })\n }}>\n {({ errors, touched }) => (\n \n )}\n \n )}\n {!isLoading && !wasSuccessful && (\n <>\n Link has expired \n \n )}\n
\n \n
\n {!isLoading && wasSuccessful && (\n Lamassu Admin
\n\n
\n \n {` ${cashIn} ${localeFiatCurrency}`} \n
\n \n {` ${cashOut} ${localeFiatCurrency}`} \n
\n \n
\n )\n}\n\nexport default Footer\n","import Footer from './Footer'\nexport default Footer\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(\"circle\", {\n id: \"path-100\",\n cx: 80,\n cy: 80,\n r: 80\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-300\",\n x: 28,\n y: 44,\n width: 104,\n height: 116,\n rx: 4\n}), /*#__PURE__*/React.createElement(\"filter\", {\n x: \"-23.1%\",\n y: \"-20.7%\",\n width: \"146.2%\",\n height: \"141.4%\",\n filterUnits: \"objectBoundingBox\",\n id: \"filter-4\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dx: 0,\n dy: 0,\n in: \"SourceAlpha\",\n result: \"shadowOffsetOuter1\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 8,\n in: \"shadowOffsetOuter1\",\n result: \"shadowBlurOuter1\"\n}), /*#__PURE__*/React.createElement(\"feColorMatrix\", {\n values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0\",\n type: \"matrix\",\n in: \"shadowBlurOuter1\"\n})), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-5\",\n x: 37,\n y: 66,\n width: 84,\n height: 8,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-6\",\n maskContentUnits: \"userSpaceOnUse\",\n maskUnits: \"objectBoundingBox\",\n x: 0,\n y: 0,\n width: 84,\n height: 8,\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-5\"\n})), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-7\",\n x: 37,\n y: 78,\n width: 84,\n height: 8,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-8\",\n maskContentUnits: \"userSpaceOnUse\",\n maskUnits: \"objectBoundingBox\",\n x: 0,\n y: 0,\n width: 84,\n height: 8,\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-7\"\n})), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-9\",\n x: 37,\n y: 90,\n width: 84,\n height: 8,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-10\",\n maskContentUnits: \"userSpaceOnUse\",\n maskUnits: \"objectBoundingBox\",\n x: 0,\n y: 0,\n width: 84,\n height: 8,\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-9\"\n})), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-11\",\n x: 37,\n y: 102,\n width: 84,\n height: 8,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-12\",\n maskContentUnits: \"userSpaceOnUse\",\n maskUnits: \"objectBoundingBox\",\n x: 0,\n y: 0,\n width: 84,\n height: 8,\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-11\"\n})));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"\\\\u21B3-v13a\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"transactions_v13a#1-(empty-table)\",\n transform: \"translate(-640.000000, -220.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\",\n transform: \"translate(640.000000, 220.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Rectangle\"\n}, /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-200\",\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-100\"\n})), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Mask\",\n fill: \"#EBEFFF\",\n xlinkHref: \"#path-100\"\n}), /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#mask-200)\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n fill: \"black\",\n fillOpacity: 1,\n filter: \"url(#filter-4)\",\n xlinkHref: \"#path-300\"\n}), /*#__PURE__*/React.createElement(\"use\", {\n fill: \"#FFFFFF\",\n fillRule: \"evenodd\",\n xlinkHref: \"#path-300\"\n}))), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Rectangle\",\n stroke: \"#5F668A\",\n mask: \"url(#mask-6)\",\n strokeDasharray: 1,\n xlinkHref: \"#path-5\"\n}), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Rectangle-Copy\",\n stroke: \"#5F668A\",\n mask: \"url(#mask-8)\",\n strokeDasharray: 1,\n xlinkHref: \"#path-7\"\n}), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Rectangle-Copy-2\",\n stroke: \"#5F668A\",\n mask: \"url(#mask-10)\",\n strokeDasharray: 1,\n xlinkHref: \"#path-9\"\n}), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Rectangle-Copy-3\",\n stroke: \"#5F668A\",\n mask: \"url(#mask-12)\",\n strokeDasharray: 1,\n xlinkHref: \"#path-11\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle\",\n fill: \"#EBEFFF\",\n x: 37,\n y: 56,\n width: 84,\n height: 6,\n rx: 2\n}))));\n\nfunction SvgEmptyTable(_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: \"160px\",\n height: \"160px\",\n viewBox: \"0 0 160 160\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgEmptyTable);\nexport default __webpack_public_path__ + \"static/media/empty-table.250884a9.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles } from '@material-ui/core'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\n\nimport { H4 } from 'src/components/typography'\nimport { ReactComponent as EmptyTableIcon } from 'src/styling/icons/table/empty-table.svg'\n\nconst styles = {\n emptyTable: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n marginTop: 52\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst EmptyTable = memo(({ message, className }) => {\n const classes = useStyles()\n\n return (\n \n \n \n {R.keys(withCommissions).map(key => renderFooterItem(key))}\n \n \n
\n \n
\n )\n})\n\nexport default EmptyTable\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nconst useStyles = makeStyles({\n table: {\n // backgroundColor: tableHeaderColor,\n tableLayout: 'fixed',\n borderCollapse: 'separate',\n borderSpacing: '0 0'\n }\n})\n\nconst Table = memo(({ className, children, ...props }) => {\n const classes = useStyles()\n return (\n {message}
\n\n \n {buildPercentageView(value, 'cashIn')}\n
\n \n
\n )}\n \n )\n}\n\nexport default Nav\n","import { useQuery } from '@apollo/react-hooks'\nimport Grid from '@material-ui/core/Grid'\nimport { makeStyles } from '@material-ui/core/styles'\nimport BigNumber from 'bignumber.js'\nimport classnames from 'classnames'\nimport { isAfter, sub } from 'date-fns/fp'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { EmptyTable } from 'src/components/table'\nimport { Label1, Label2, P } from 'src/components/typography/index'\nimport { ReactComponent as PercentDownIcon } from 'src/styling/icons/dashboard/down.svg'\nimport { ReactComponent as PercentNeutralIcon } from 'src/styling/icons/dashboard/equal.svg'\nimport { ReactComponent as PercentUpIcon } from 'src/styling/icons/dashboard/up.svg'\nimport { java, neon } from 'src/styling/variables'\nimport { fromNamespace } from 'src/utils/config'\nimport { timezones } from 'src/utils/timezone-list'\nimport { toTimezone } from 'src/utils/timezones'\n\nimport PercentageChart from './Graphs/PercentageChart'\nimport LineChart from './Graphs/RefLineChart'\nimport Scatterplot from './Graphs/RefScatterplot'\nimport InfoWithLabel from './InfoWithLabel'\nimport Nav from './Nav'\nimport styles from './SystemPerformance.styles'\n\nBigNumber.config({ ROUNDING_MODE: BigNumber.ROUND_HALF_UP })\n\nconst getFiats = R.map(R.prop('fiat'))\nconst useStyles = makeStyles(styles)\nconst mapToFee = R.map(R.prop('cashInFee'))\n\nconst getDateSecondsAgo = (seconds = 0, startDate = null) => {\n const date = startDate ? new Date(startDate) : new Date()\n return sub({ seconds: seconds }, date)\n}\n\nconst ranges = {\n Day: {\n left: getDateSecondsAgo(2 * 24 * 3600, new Date()),\n right: getDateSecondsAgo(24 * 3600, new Date())\n },\n Week: {\n left: getDateSecondsAgo(14 * 24 * 3600, new Date()),\n right: getDateSecondsAgo(7 * 24 * 3600, new Date())\n },\n Month: {\n left: getDateSecondsAgo(60 * 24 * 3600, new Date()),\n right: getDateSecondsAgo(30 * 24 * 3600, new Date())\n }\n}\n\nconst GET_DATA = gql`\n query getData($excludeTestingCustomers: Boolean) {\n transactions(excludeTestingCustomers: $excludeTestingCustomers) {\n fiatCode\n fiat\n cashInFee\n commissionPercentage\n created\n txClass\n error\n }\n fiatRates {\n code\n name\n rate\n }\n config\n }\n`\n\nconst reducer = (acc, it) =>\n (acc +=\n Number.parseFloat(it.commissionPercentage) * Number.parseFloat(it.fiat))\n\nconst SystemPerformance = () => {\n const classes = useStyles()\n const [selectedRange, setSelectedRange] = useState('Day')\n const { data, loading } = useQuery(GET_DATA, {\n variables: { excludeTestingCustomers: true }\n })\n const fiatLocale = fromNamespace('locale')(data?.config).fiatCurrency\n const timezone = fromNamespace('locale')(data?.config).timezone\n\n const isInRangeAndNoError = getLastTimePeriod => t => {\n if (t.error !== null) return false\n if (!getLastTimePeriod) {\n return (\n t.error === null &&\n isAfter(ranges[selectedRange].right, toTimezone(t.created, timezone)) &&\n isAfter(toTimezone(t.created, timezone), new Date())\n )\n }\n return (\n t.error === null &&\n isAfter(ranges[selectedRange].left, toTimezone(t.created, timezone)) &&\n isAfter(toTimezone(t.created, timezone), ranges[selectedRange].right)\n )\n }\n\n const convertFiatToLocale = item => {\n if (item.fiatCode === fiatLocale) return item\n const itemRate = R.find(R.propEq('code', item.fiatCode))(data.fiatRates)\n const localeRate = R.find(R.propEq('code', fiatLocale))(data.fiatRates)\n const multiplier = localeRate.rate / itemRate.rate\n return { ...item, fiat: parseFloat(item.fiat) * multiplier }\n }\n\n const transactionsToShow = R.map(convertFiatToLocale)(\n R.filter(isInRangeAndNoError(false), data?.transactions ?? [])\n )\n const transactionsLastTimePeriod = R.map(convertFiatToLocale)(\n R.filter(isInRangeAndNoError(true), data?.transactions ?? [])\n )\n\n const getNumTransactions = () => {\n return R.length(transactionsToShow)\n }\n\n const getFiatVolume = () =>\n new BigNumber(R.sum(getFiats(transactionsToShow))).toFormat(2)\n\n const getProfit = transactions => {\n const cashInFees = R.sum(mapToFee(transactions))\n const commissionFees = R.reduce(reducer, 0, transactions)\n\n return new BigNumber(commissionFees + cashInFees)\n }\n\n const getPercentChange = () => {\n const thisTimePeriodProfit = getProfit(transactionsToShow)\n const previousTimePeriodProfit = getProfit(transactionsLastTimePeriod)\n\n if (thisTimePeriodProfit.eq(previousTimePeriodProfit)) return 0\n if (previousTimePeriodProfit.eq(0)) return 100\n\n return thisTimePeriodProfit\n .minus(previousTimePeriodProfit)\n .times(100)\n .div(previousTimePeriodProfit)\n .toNumber()\n }\n\n const getDirectionPercent = () => {\n const [cashIn, cashOut] = R.partition(R.propEq('txClass', 'cashIn'))(\n transactionsToShow\n )\n const totalLength = cashIn.length + cashOut.length\n if (totalLength === 0) {\n return { cashIn: 0, cashOut: 0 }\n }\n\n return {\n cashIn: Math.round((cashIn.length / totalLength) * 100),\n cashOut: Math.round((cashOut.length / totalLength) * 100)\n }\n }\n\n const percentChange = getPercentChange()\n\n const percentageClasses = {\n [classes.percentDown]: percentChange < 0,\n [classes.percentUp]: percentChange > 0,\n [classes.percentNeutral]: percentChange === 0\n }\n\n const getPercentageIcon = () => {\n if (percentChange === 0)\n return \n
\n {showPicker && (\n {'System performance'}
\n\n {ranges.map((it, idx) => {\n return (\n handleClick(e.target.innerText)}\n className={\n isSelected(it)\n ? classnames(classes.newHighlightedLabel, classes.navButton)\n : classnames(classes.label, classes.navButton)\n }>\n {it}\n
\n )\n })}\n \n Transactions \n
\n \n
\n \n {timezones[timezone].short ?? timezones[timezone].long}{' '}\n timezone\n
\n \n\n \n In \n
\n \n \n Out \n
\n \n
\n \n {`${getProfit(transactionsToShow).toFormat(2)} ${\n data?.config.locale_fiatCurrency\n }`}\n
\n \n {getPercentageIcon()}\n {`${new BigNumber(percentChange).toFormat(2)}%`}\n
\n \n
\n \n \n In \n
\n \n \n Out \n
\n \n
\n - \n {alertsToRender.map((alert, idx) => {\n return (\n
{alertMessage(alert)}
\n\n \n \n {'Show less'}\n \n \n )}\n
\n {`Alerts (${alertsLength})`}
\n {showAllItems && (\n\n
\n )\n}\n\nexport { Status, MainStatus }\n","import {\n backgroundColor,\n offColor,\n errorColor,\n primaryColor\n} from 'src/styling/variables'\n\nconst styles = {\n container: {\n display: 'flex',\n justifyContent: 'space-between'\n },\n label: {\n margin: 0,\n color: offColor\n },\n row: {\n backgroundColor: backgroundColor,\n borderBottom: 'none'\n },\n clickableRow: {\n cursor: 'pointer'\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n whiteSpace: 'pre'\n },\n error: {\n color: errorColor\n },\n button: {\n color: primaryColor,\n minHeight: 0,\n minWidth: 0,\n padding: 0,\n textTransform: 'none',\n '&:hover': {\n backgroundColor: 'transparent'\n },\n marginBottom: -40\n },\n buttonLabel: {\n position: 'absolute',\n bottom: 160,\n marginBottom: 0\n },\n upperButtonLabel: {\n textAlign: 'center',\n marginBottom: 0,\n marginTop: 0\n },\n statusHeader: {\n marginLeft: 2\n },\n table: {\n maxHeight: 440,\n '&::-webkit-scrollbar': {\n width: 7\n },\n '&::-webkit-scrollbar-thumb': {\n backgroundColor: offColor,\n borderRadius: 5\n }\n },\n tableBody: {\n overflow: 'auto'\n },\n h4: {\n marginTop: 0\n },\n tl2: {\n display: 'inline'\n },\n label1: {\n display: 'inline'\n },\n machinesTableContainer: {\n marginTop: 10,\n height: 220\n },\n expandedMachinesTableContainer: {\n marginTop: 10,\n height: 414\n },\n centerLabel: {\n marginBottom: 0,\n padding: 0,\n textAlign: 'center'\n },\n machineNameWrapper: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n machineRedirectIcon: {\n marginLeft: 10\n }\n}\n\nexport default styles\n","import { useQuery } from '@apollo/react-hooks'\nimport { makeStyles, withStyles } from '@material-ui/core'\nimport Table from '@material-ui/core/Table'\nimport TableBody from '@material-ui/core/TableBody'\nimport TableCell from '@material-ui/core/TableCell'\nimport TableContainer from '@material-ui/core/TableContainer'\nimport TableHead from '@material-ui/core/TableHead'\nimport TableRow from '@material-ui/core/TableRow'\nimport classnames from 'classnames'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React from 'react'\nimport { useHistory } from 'react-router-dom'\n\nimport { Status } from 'src/components/Status'\nimport { Label2, TL2 } from 'src/components/typography'\n// import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'\nimport { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'\nimport { ReactComponent as MachineLinkIcon } from 'src/styling/icons/month arrows/right.svg'\nimport { fromNamespace } from 'src/utils/config'\n\nimport styles from './MachinesTable.styles'\n\n// percentage threshold where below this number the text in the cash cassettes percentage turns red\nconst PERCENTAGE_THRESHOLD = 20\n\nconst GET_CONFIG = gql`\n query getConfig {\n config\n }\n`\n\nconst useStyles = makeStyles(styles)\n\nconst StyledCell = withStyles({\n root: {\n borderBottom: '4px solid white',\n padding: 0,\n paddingLeft: 15\n }\n})(TableCell)\n\nconst HeaderCell = withStyles({\n root: {\n borderBottom: '4px solid white',\n padding: 0,\n paddingLeft: 15,\n backgroundColor: 'white'\n }\n})(TableCell)\n\nconst MachinesTable = ({ machines = [], numToRender }) => {\n const classes = useStyles()\n const history = useHistory()\n\n const { data } = useQuery(GET_CONFIG)\n const fillingPercentageSettings = fromNamespace(\n 'notifications',\n R.path(['config'], data) ?? {}\n )\n\n const getPercent = (notes, capacity = 500) => {\n return Math.round((notes / capacity) * 100)\n }\n\n const makePercentageText = (cassetteIdx, notes, capacity = 500) => {\n const percent = getPercent(notes, capacity)\n const percentageThreshold = R.pipe(\n R.path([`fillingPercentageCassette${cassetteIdx}`]),\n R.defaultTo(PERCENTAGE_THRESHOLD)\n )(fillingPercentageSettings)\n return percent < percentageThreshold ? (\n \n \n \n {'Show less'}\n \n \n )}\n
\n {!loading && (\n <>\n System status
{' '}\n {showAllItems && (\n\n \n \n {buttonName}\n \n \n
\n )\n}\n\nconst RightSide = () => {\n const classes = useStyles()\n const [systemStatusSize, setSystemStatusSize] = useState(cardState.DEFAULT)\n const [alertsSize, setAlertsSize] = useState(cardState.DEFAULT)\n\n const onReset = () => {\n setAlertsSize(cardState.DEFAULT)\n setSystemStatusSize(cardState.DEFAULT)\n }\n return (\n {title}
\n\n <>\n {\n setAlertsSize(cardState.EXPANDED)\n setSystemStatusSize(cardState.SHRUNK)\n }}\n onReset={onReset}\n size={alertsSize}\n />\n \n {\n setSystemStatusSize(cardState.EXPANDED)\n setAlertsSize(cardState.SHRUNK)\n }}\n onReset={onReset}\n size={systemStatusSize}\n />\n \n \n
\n \n
\n \n
\n \n
\n \n \n Action Required\n
\n \n \n \n \n \n \n \n
\n \n \n ) : (\n <>\n {open && (\n \n \n {data?.serverVersion} {' '}\n server version \n \n
\n \n
\n \n \n )\n ) : (\n <>\n )\n}\n\nexport default Dashboard\n","import Dashboard from './Dashboard'\nexport default Dashboard\n","import { useFormikContext } from 'formik'\nimport React, { useEffect } from 'react'\nimport { Prompt } from 'react-router-dom'\n\nconst PROMPT_DEFAULT_MESSAGE =\n 'You have unsaved changes on this page. Are you sure you want to leave?'\n\nconst PromptWhenDirty = ({ message = PROMPT_DEFAULT_MESSAGE }) => {\n const formik = useFormikContext()\n\n const hasChanges = formik.dirty && formik.submitCount === 0\n\n useEffect(() => {\n if (hasChanges) {\n window.onbeforeunload = confirmExit\n } else {\n window.onbeforeunload = undefined\n }\n }, [hasChanges])\n\n const confirmExit = () => {\n return PROMPT_DEFAULT_MESSAGE\n }\n\n return \n \n To fully take advantage of Lamassu Admin, add a new machine to\n your system\n \n \n
\n No machines on your system yet
\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 return {children}
\n}\n\nconst Th = ({ children, ...props }) => {\n return (\n \n
\n )\n}\n\nconst Tr = ({\n onClick,\n error,\n errorMessage,\n shouldShowError,\n children,\n className,\n size,\n newRow\n}) => {\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 [classes.trAdding]: newRow,\n className\n }\n\n return (\n <>\n {title}
\n {children}
\n {children}
\n {error && shouldShowError && (\n {errorMessage}
\n )}\n \r\n {children}\r\n {close && (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport const DeleteDialog = ({\r\n title = 'Confirm Delete',\r\n open = false,\r\n onConfirmed,\r\n onDismissed,\r\n item = 'item',\r\n confirmationMessage = `Are you sure you want to delete this ${item}?`,\r\n errorMessage = ''\r\n}) => {\r\n const classes = useStyles()\r\n\r\n return (\r\n \r\n )\r\n}\r\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 id: \"arrow-path\",\n d: \"M5.3501239,7.53208616 L0.473798314,2.73082122 C-0.158421727,2.1051411 -0.158421727,1.0952488 0.476737158,0.466675069 C1.11220338,-0.155816755 2.1378971,-0.155816755 2.77494316,0.468226909 L6.49990857,4.13723769 L10.2264532,0.466675069 C10.8619195,-0.155816755 11.8876132,-0.155816755 12.5260183,0.469568675 C13.1582383,1.0952488 13.1582383,2.1051411 12.5245507,2.73226987 L7.64673876,7.53497972 C7.33802629,7.83583835 6.92590837,8 6.49990828,8 C6.0739082,8 5.66179027,7.83583835 5.3501239,7.53208616 Z\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Styleguide\",\n stroke: \"none\",\n strokeWidth: 1,\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/arrow/regular\"\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 fillRule: \"nonzero\",\n xlinkHref: \"#arrow-path\"\n})));\n\nfunction SvgRegular(_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: \"13px\",\n height: \"8px\",\n viewBox: \"0 0 13 8\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgRegular);\nexport default __webpack_public_path__ + \"static/media/regular.3140e691.svg\";\nexport { ForwardRef as ReactComponent };","import { subheaderColor, offColor, white } from '../../../styling/variables'\nimport typographyStyles from '../../typography/styles'\n\nconst { p, label1 } = typographyStyles\n\nconst WIDTH = 152\n\nexport default {\n selectedItem: {\n width: WIDTH - 41,\n display: 'block',\n whiteSpace: 'nowrap',\n overflow: 'hidden'\n },\n select: {\n width: WIDTH,\n zIndex: 1,\n '& label': {\n extend: label1,\n color: offColor,\n paddingLeft: 10\n },\n '& button': {\n extend: p,\n position: 'relative',\n border: 0,\n backgroundColor: subheaderColor,\n width: WIDTH,\n padding: [[6, 0, 6, 12]],\n borderRadius: 20,\n lineHeight: '1.14',\n textAlign: 'left',\n color: offColor,\n cursor: 'pointer',\n outline: '0 none'\n },\n '& ul': {\n maxHeight: '200px',\n width: WIDTH,\n overflowY: 'auto',\n position: 'absolute',\n margin: 0,\n borderTop: 0,\n padding: 0,\n borderRadius: [[0, 0, 8, 8]],\n backgroundColor: subheaderColor,\n outline: '0 none',\n '& li': {\n extend: p,\n listStyleType: 'none',\n padding: [[6, 12]],\n cursor: 'pointer',\n '& span': {\n width: '100%',\n display: 'block',\n overflow: 'hidden',\n whiteSpace: 'nowrap'\n }\n },\n '& li:hover': {\n backgroundColor: offColor,\n color: white\n }\n },\n '& svg': {\n position: 'absolute',\n top: 12,\n right: 14,\n fill: offColor\n }\n },\n selectFiltered: {\n '& button': {\n backgroundColor: offColor,\n color: white\n },\n '& ul': {\n '& li': {\n backgroundColor: offColor,\n color: white\n },\n '& li:hover': {\n backgroundColor: subheaderColor,\n color: offColor\n }\n },\n '& svg': {\n fill: [[white], '!important']\n }\n },\n open: {\n '& button': {\n borderRadius: [[8, 8, 0, 0]]\n }\n }\n}\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { useSelect } from 'downshift'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { ReactComponent as Arrowdown } from 'src/styling/icons/action/arrow/regular.svg'\n\nimport styles from './Select.styles'\n\nconst useStyles = makeStyles(styles)\n\nfunction Select({ className, label, items, ...props }) {\n const classes = useStyles()\n\n const {\n isOpen,\n selectedItem,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getItemProps\n } = useSelect({\n items,\n selectedItem: props.selectedItem,\n onSelectedItemChange: item => {\n props.onSelectedItemChange(item.selectedItem)\n }\n })\n\n const selectClassNames = {\n [classes.select]: true,\n [classes.selectFiltered]: props.defaultAsFilter\n ? true\n : !R.equals(selectedItem, props.default),\n [classes.open]: isOpen\n }\n\n return (\n \n \n \n
\n )\n}\n\nexport default Select\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\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' ? 'flex-end' : textAlign\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent\n }\n },\n suffix: {\n margin: [[0, 0, 0, 7]]\n },\n size: ({ size }) => bySize(size),\n bold\n}\n","import { makeStyles } from '@material-ui/core'\r\nimport classnames from 'classnames'\r\nimport { Field, useFormikContext } from 'formik'\r\nimport * as R from 'ramda'\r\nimport React, { useContext, useState } from 'react'\r\n\r\nimport { DeleteDialog } from 'src/components/DeleteDialog'\r\nimport { Link, IconButton } from 'src/components/buttons'\r\nimport { Td, Tr } from 'src/components/fake-table/Table'\r\nimport { Switch } from 'src/components/inputs'\r\nimport { Label2 } from 'src/components/typography'\r\nimport { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'\r\nimport { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'\r\nimport { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'\r\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'\r\nimport { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'\r\n\r\nimport TableCtx from './Context'\r\nimport styles from './Row.styles'\r\n\r\nconst useStyles = makeStyles(styles)\r\n\r\nconst ActionCol = ({ disabled, editing }) => {\r\n const classes = useStyles()\r\n const { values, submitForm, resetForm } = useFormikContext()\r\n const {\r\n editWidth,\r\n onEdit,\r\n enableEdit,\r\n enableDelete,\r\n disableRowEdit,\r\n onDelete,\r\n deleteWidth,\r\n enableToggle,\r\n onToggle,\r\n toggleWidth,\r\n forceAdd,\r\n clearError,\r\n actionColSize,\r\n error\r\n } = useContext(TableCtx)\r\n\r\n const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))\r\n const cancel = () => {\r\n clearError()\r\n resetForm()\r\n }\r\n\r\n const [deleteDialog, setDeleteDialog] = useState(false)\r\n\r\n const onConfirmed = () => {\r\n onDelete(values.id).then(res => {\r\n if (!R.isNil(res)) setDeleteDialog(false)\r\n })\r\n }\r\n\r\n return (\r\n <>\r\n {editing && (\r\n - \n {isOpen &&\n items.map(({ code, display }, index) => (\n
- \n {display}\n \n ))}\n
\r\n {view(values[name], values)}\r\n
\r\n )}\r\n {suffix && !isHidden(values) && (\r\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 {title && {title} }\n handleClose()}>\n
\n {children}
\n {infoPanel}
\n \n 
\n \n {name}\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/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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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 Update counts\n
\n\n
\n \n Before updating counts on Lamassu Admin, make sure you've done it\n before on the machines.\n
\n\n
\n \n \n For cash cassettes, please make sure you've removed the remaining\n bills before adding the new ones.\n
\n\n {R.range(1, currentStep).map(idx => (\n
\n )\n})\n\nexport default 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(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/help/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20.0004,11 C20.0004,6.03028475 15.9701153,2 11.0004,2 C6.03004556,2 2.0004,6.02992391 2.0004,11 C2.0004,15.9700761 6.03004556,20 11.0004,20 C15.9701153,20 20.0004,15.9697153 20.0004,11 Z M22.0004,11 C22.0004,17.0742847 17.0746847,22 11.0004,22 C4.92544514,22 0.000400000001,17.0746147 0.000400000001,11 C0.000400000001,4.92538534 4.92544514,0 11.0004,0 C17.0746847,0 22.0004,4.92571525 22.0004,11 Z\",\n id: \"Stroke-1\",\n fill: \"#1B2559\",\n fillRule: \"nonzero\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.9164,8.9063 C9.9164,9.45858475 9.46868475,9.9063 8.9164,9.9063 C8.36411525,9.9063 7.9164,9.45858475 7.9164,8.9063 C7.9164,6.89094438 9.72972438,5.35290249 11.7463843,5.7072003 C13.0663562,5.93764844 14.1348314,7.00654285 14.3652323,8.32479116 C14.6130182,9.7312185 13.941375,11.0876584 12.732214,11.7545735 C12.370484,11.9534687 12.1664,12.2664153 12.1664,12.5913 L12.1664,12.6563 C12.1664,13.2085847 11.7186847,13.6563 11.1664,13.6563 C10.6141153,13.6563 10.1664,13.2085847 10.1664,12.6563 L10.1664,12.5913 C10.1664,11.5009567 10.7946963,10.5375141 11.7674377,10.0026589 C12.2360927,9.74417086 12.493064,9.22519581 12.3953326,8.67046887 C12.3098185,8.1811985 11.8915858,7.76280177 11.4013649,7.67721566 C10.6126181,7.53864454 9.9164,8.1291691 9.9164,8.9063 Z\",\n id: \"Stroke-3\",\n fill: \"#1B2559\",\n fillRule: \"nonzero\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.1039,15.2188 C10.1039,14.6318 10.5799,14.1568 11.1659,14.1568 C11.7529,14.1568 12.2289,14.6318 12.2289,15.2188 C12.2289,15.8058 11.7529,16.2808 11.1659,16.2808 C10.5799,16.2808 10.1039,15.8058 10.1039,15.2188\",\n id: \"Fill-5\",\n fill: \"#1B2559\"\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: \"22px\",\n viewBox: \"0 0 22 22\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.1bd00dea.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles, ClickAwayListener } from '@material-ui/core'\nimport * as R from 'ramda'\nimport React, { useState, memo } from 'react'\n\nimport Popper from 'src/components/Popper'\nimport { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'\n\nconst useStyles = makeStyles({\n transparentButton: {\n border: 'none',\n backgroundColor: 'transparent',\n outline: 'none',\n cursor: 'pointer',\n marginTop: 4\n },\n popoverContent: ({ width }) => ({\n width,\n padding: [[10, 15]]\n })\n})\n\nconst usePopperHandler = width => {\n const classes = useStyles({ width })\n const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)\n\n const handleOpenHelpPopper = event => {\n setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)\n }\n\n const handleCloseHelpPopper = () => {\n setHelpPopperAnchorEl(null)\n }\n\n const helpPopperOpen = Boolean(helpPopperAnchorEl)\n\n return {\n classes,\n helpPopperAnchorEl,\n helpPopperOpen,\n handleOpenHelpPopper,\n handleCloseHelpPopper\n }\n}\n\nconst Tooltip = memo(({ children, width, Icon = HelpIcon }) => {\n const handler = usePopperHandler(width)\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 {children}
\n \n \n {!R.isNil(parentElements) && (\n \n {parentElements}\n
\n )}\n {R.isNil(parentElements) && (\n {children}
\n \n \n )\n})\n\nexport { Tooltip, HoverableTooltip }\n","export default __webpack_public_path__ + \"static/media/acceptor-left.f37bcb1a.svg\";","export default __webpack_public_path__ + \"static/media/dispenser-1.e4200f4e.svg\";","export default __webpack_public_path__ + \"static/media/dispenser-2.9f7807a5.svg\";","export default __webpack_public_path__ + \"static/media/3-cassettes-open-1-left.d6d9aa73.svg\";","export default __webpack_public_path__ + \"static/media/3-cassettes-open-2-left.a9ee8d4c.svg\";","export default __webpack_public_path__ + \"static/media/3-cassettes-open-3-left.08fed660.svg\";","export default __webpack_public_path__ + \"static/media/4-cassettes-open-1-left.7b00c51f.svg\";","export default __webpack_public_path__ + \"static/media/4-cassettes-open-2-left.b3d9541c.svg\";","export default __webpack_public_path__ + \"static/media/4-cassettes-open-3-left.e8f1667c.svg\";","export default __webpack_public_path__ + \"static/media/4-cassettes-open-4-left.bc1a9829.svg\";","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { Formik, Form, Field } from 'formik'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport Stepper from 'src/components/Stepper'\nimport { HoverableTooltip } from 'src/components/Tooltip'\nimport { Button } from 'src/components/buttons'\nimport { Cashbox } from 'src/components/inputs/cashbox/Cashbox'\nimport { NumberInput, RadioGroup } from 'src/components/inputs/formik'\nimport { Info2, H4, P, Info1 } from 'src/components/typography'\nimport cashbox from 'src/styling/icons/cassettes/acceptor-left.svg'\nimport cassetteOne from 'src/styling/icons/cassettes/dispenser-1.svg'\nimport cassetteTwo from 'src/styling/icons/cassettes/dispenser-2.svg'\nimport tejo3CassetteOne from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-1-left.svg'\nimport tejo3CassetteTwo from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-2-left.svg'\nimport tejo3CassetteThree from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-3-left.svg'\nimport tejo4CassetteOne from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-1-left.svg'\nimport tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-2-left.svg'\nimport tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg'\nimport tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.svg'\nimport { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'\nimport { comet, errorColor } from 'src/styling/variables'\nimport { numberToFiatAmount } from 'src/utils/number'\n\nconst styles = {\n content: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n flex: 1,\n paddingBottom: 32\n },\n titleDiv: {\n marginBottom: 32\n },\n title: {\n margin: [[0, 0, 12, 0]],\n color: comet\n },\n stepImage: {\n width: 148,\n height: 196\n },\n form: {\n paddingBottom: 95\n },\n verticalAlign: {\n display: 'flex',\n flexDirection: 'column'\n },\n horizontalAlign: {\n display: 'flex',\n flexDirection: 'row'\n },\n centerAlignment: {\n alignItems: 'center'\n },\n lineAlignment: {\n alignItems: 'baseline'\n },\n fullWidth: {\n margin: [[0, 'auto']],\n flexBasis: 'auto'\n },\n formWrapper: {\n flexBasis: '100%',\n display: 'flex',\n justifyContent: 'center'\n },\n submit: {\n float: 'right'\n },\n cashboxBills: {\n marginRight: 5\n },\n cassetteCashbox: {\n width: 40,\n height: 35\n },\n cassetteFormTitle: {\n marginTop: 18\n },\n cassetteFormTitleContent: {\n marginLeft: 10,\n marginRight: 25\n },\n smBottomMargin: {\n marginBottom: 25\n },\n fiatTotal: {\n color: comet\n },\n errorMessage: {\n color: errorColor\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst cassetesArtworks = (numberOfCassettes, step) =>\n [\n [cassetteOne, cassetteTwo],\n [tejo3CassetteOne, tejo3CassetteTwo, tejo3CassetteThree],\n [tejo4CassetteOne, tejo4CassetteTwo, tejo4CassetteThree, tejo4CassetteFour]\n ][numberOfCassettes - 2][step - 2]\n\nconst WizardStep = ({\n step,\n name,\n machine,\n cashoutSettings,\n cassetteCapacity,\n error,\n lastStep,\n steps,\n fiatCurrency,\n onContinue,\n initialValues\n}) => {\n const classes = useStyles()\n\n const label = lastStep ? 'Finish' : 'Confirm'\n\n const stepOneRadioOptions = [\n { display: 'Yes', code: 'YES' },\n { display: 'No', code: 'NO' }\n ]\n\n const cassetteField = `cassette${step - 1}`\n const numberOfCassettes = machine.numberOfCassettes\n const originalCassetteCount = machine?.[cassetteField]\n const cassetteDenomination = cashoutSettings?.[cassetteField]\n\n const cassetteCount = values => values[cassetteField] || originalCassetteCount\n const cassetteTotal = values => cassetteCount(values) * cassetteDenomination\n const getPercentage = R.pipe(\n cassetteCount,\n count => 100 * (count / cassetteCapacity),\n R.clamp(0, 100)\n )\n\n return (\n \n \n {({ values, errors }) => (\n
\n \n \n \n \n \n )}\n \n )}\n\n {step > 1 && (\n \n {name} \n
\n\n {step === 1 && (\n \n
\n)\n\nconst cashOutHeader = (\n \n
\n)\n\nconst getOverridesFields = currency => {\n return [\n {\n name: 'name',\n width: 280,\n size: 'sm',\n view: it => `${it}`\n },\n {\n header: cashInHeader,\n name: 'cashIn',\n display: 'Cash-in',\n width: 130,\n textAlign: 'right',\n suffix: '%'\n },\n {\n header: cashOutHeader,\n name: 'cashOut',\n display: 'Cash-out',\n width: 130,\n textAlign: 'right',\n suffix: '%',\n inputProps: {\n decimalPlaces: 3\n }\n },\n {\n name: 'fixedFee',\n display: 'Fixed fee',\n width: 155,\n doubleHeader: 'Cash-in only',\n textAlign: 'right',\n suffix: currency\n },\n {\n name: 'minimumTx',\n display: 'Minimun Tx',\n width: 155,\n doubleHeader: 'Cash-in only',\n textAlign: 'right',\n suffix: currency\n }\n ]\n}\n\nconst overrides = currency => {\n return getOverridesFields(currency)\n}\n\nexport { overrides }\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { Table as EditableTable } from 'src/components/editableTable'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nimport { overrides } 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, id: deviceId }) => {\n const { data, loading } = useQuery(GET_DATA)\n const [saveConfig] = 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 saveOverrides = it => {\n const config = toNamespace(SCREEN_KEY)(it)\n return saveConfig({ variables: { config } })\n }\n\n const getMachineCommissions = () => {\n if (loading || !deviceId || !config) {\n return []\n }\n const commissions = {}\n\n // first, get general non overridden commissions\n const makeInfo = x =>\n (commissions[R.prop('code')(x)] = {\n code: x.code,\n name: x.display,\n cashIn: config.cashIn,\n cashOut: config.cashOut,\n fixedFee: config.fixedFee,\n minimumTx: config.minimumTx\n })\n R.forEach(makeInfo)(data.cryptoCurrencies)\n\n // second, get overrides for all machines\n const isId = id => R.propEq('machine', id)\n const generalOverrides = config.overrides\n ? R.filter(isId('ALL_MACHINES'))(config.overrides)\n : []\n\n const overrideInfo = o => {\n commissions[o.cryptoCurrencies[0]].cashIn = o.cashIn\n commissions[o.cryptoCurrencies[0]].cashOut = o.cashOut\n commissions[o.cryptoCurrencies[0]].fixedFee = o.fixedFee\n commissions[o.cryptoCurrencies[0]].minimumTx = o.minimumTx\n }\n R.forEach(overrideInfo)(generalOverrides)\n\n // third, get overrides for this machine\n const machineOverrides = config.overrides\n ? R.filter(isId(deviceId))(config.overrides)\n : []\n R.forEach(overrideInfo)(machineOverrides)\n\n // in the end, the machine specific overrides overwrite the less general ALL_MACHINE overrides or the general overrides\n return R.values(commissions)\n }\n\n const machineCommissions = getMachineCommissions()\n\n return (\n \n
\n )\n}\n\nexport default Details\n","import {\n Dialog,\n DialogActions,\n DialogContent,\n makeStyles,\n InputLabel\n} from '@material-ui/core'\nimport React, { memo, useState } from 'react'\n\nimport { Button, IconButton } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs'\nimport { H4, P } from 'src/components/typography'\nimport { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'\nimport { spacer } from 'src/styling/variables'\n\nimport ErrorMessage from './ErrorMessage'\n\nconst useStyles = makeStyles({\n dialogContent: {\n width: 434,\n padding: spacer * 2,\n paddingRight: spacer * 3.5\n },\n dialogTitle: {\n padding: spacer * 2,\n paddingRight: spacer * 1.5,\n display: 'flex',\n 'justify-content': 'space-between',\n '& > h4': {\n margin: 0\n },\n '& > button': {\n padding: 0,\n marginTop: -(spacer / 2)\n }\n },\n dialogActions: {\n padding: spacer * 4,\n paddingTop: spacer * 2\n }\n})\n\nexport const DialogTitle = ({ children, onClose }) => {\n const classes = useStyles()\n return (\n \n Paired at \n
\n \n {data.pairedAt\n ? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')\n : ''}\n
\n\n Machine model \n
\n {modelPrettifier[data.model]}
\n\n Software version \n
\n {data.version}
\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 onDismissed,\n initialValue = '',\n disabled = false,\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 onDismissed()\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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/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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 typographyStyles from 'src/components/typography/styles'\nimport { offColor, spacer, errorColor } from 'src/styling/variables'\n\nconst { label1 } = typographyStyles\n\nconst machineActionsStyles = {\n label: {\n extend: label1,\n color: offColor,\n marginBottom: 4\n },\n inlineChip: {\n marginInlineEnd: '0.25em'\n },\n stack: {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n justifyContent: 'start'\n },\n mr: {\n marginRight: spacer,\n marginBottom: spacer\n },\n warning: {\n color: errorColor\n }\n}\n\nexport { machineActionsStyles }\n","import { useMutation, useLazyQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport React, { memo, useState } from 'react'\n\nimport { ConfirmDialog } from 'src/components/ConfirmDialog'\nimport ActionButton from 'src/components/buttons/ActionButton'\nimport { H3 } from 'src/components/typography'\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 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 { machineActionsStyles } from './MachineActions.styles'\n\nconst useStyles = makeStyles(machineActionsStyles)\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 MACHINE = gql`\n query getMachine($deviceId: ID!) {\n machine(deviceId: $deviceId) {\n latestEvent {\n note\n }\n }\n }\n`\n\nconst isStaticState = machineState => {\n if (!machineState) {\n return true\n }\n const staticStates = [\n 'chooseCoin',\n 'idle',\n 'pendingIdle',\n 'dualIdle',\n 'networkDown',\n 'unpaired',\n 'maintenance',\n 'virgin',\n 'wifiList'\n ]\n return staticStates.includes(machineState)\n}\n\nconst getState = machineEventsLazy =>\n JSON.parse(machineEventsLazy.machine.latestEvent?.note ?? '{\"state\": null}')\n .state\n\nconst MachineActions = memo(({ machine, onActionSuccess }) => {\n const [action, setAction] = useState({ command: null })\n const [preflightOptions, setPreflightOptions] = useState({})\n const [errorMessage, setErrorMessage] = useState(null)\n const classes = useStyles()\n\n const warningMessage = (\n \n A user may be in the middle of a transaction and they could lose their\n funds if you continue.\n \n )\n\n const [fetchMachineEvents, { loading: loadingEvents }] = useLazyQuery(\n MACHINE,\n preflightOptions\n )\n\n const [machineAction, { loading }] = useMutation(MACHINE_ACTION, {\n onError: ({ message }) => {\n const errorMessage = message ?? 'An error ocurred'\n setErrorMessage(errorMessage)\n },\n onCompleted: () => {\n onActionSuccess && onActionSuccess()\n setAction({ display: action.display, command: null })\n }\n })\n\n const confirmDialogOpen = Boolean(action.command)\n const disabled = !!(action?.command === 'restartServices' && loadingEvents)\n\n const machineStatusPreflight = actionToDo => {\n setPreflightOptions({\n variables: { deviceId: machine.deviceId },\n onCompleted: machineEventsLazy => {\n const message = !isStaticState(getState(machineEventsLazy))\n ? warningMessage\n : null\n setAction({ ...actionToDo, message })\n }\n })\n fetchMachineEvents()\n }\n\n return (\n \n {\n setErrorMessage(null)\n machineAction({\n variables: {\n deviceId: machine.deviceId,\n action: `${action?.command}`,\n ...(action?.command === 'rename' && { newName: value })\n }\n })\n }}\n onDismissed={() => {\n setAction({ display: action.display, command: null })\n setErrorMessage(null)\n }}\n />\n
\n )\n})\n\nexport default MachineActions\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 strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/copy\",\n transform: \"translate(1.000000, 1.000000)\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5-Copy-2\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-1\",\n strokeWidth: 2,\n points: \"6 1.2 6 -0.00024 16 -0.00024 16 13.06376 12 13.06376\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-3\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n points: \"0 15.9368 10 15.9368 10 2.9368 0 2.9368\"\n}))));\n\nfunction SvgCopy(_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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgCopy);\nexport default __webpack_public_path__ + \"static/media/copy.f4cea549.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 {\n offColor,\n white,\n primaryColor,\n zircon,\n smallestFontSize,\n inputFontFamily,\n inputFontWeight,\n spacer\n} from 'src/styling/variables'\n\nconst { label1, mono, p } = typographyStyles\nconst { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles\n\nconst cpcStyles = {\n wrapper: {\n extend: mono,\n display: 'flex',\n alignItems: 'center'\n },\n address: {\n lineBreak: 'anywhere'\n },\n buttonWrapper: {\n '& button': {\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer'\n }\n },\n popoverContent: {\n extend: label1,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n color: white,\n borderRadius: 4,\n padding: [[5, 9]]\n }\n}\n\nconst detailsRowStyles = {\n idCardDataCard: {\n extend: p,\n display: 'flex',\n padding: [[11, 8]],\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}\n\nconst labelStyles = {\n label: {\n extend: label1,\n color: offColor,\n marginBottom: 4\n }\n}\n\nconst mainStyles = {\n titleWrapper,\n titleAndButtonsContainer,\n buttonsWrapper,\n headerLabels: {\n display: 'flex',\n flexDirection: 'row',\n '& div': {\n display: 'flex',\n alignItems: 'center'\n },\n '& > div': {\n marginLeft: 24\n },\n '& > div:first-child': {\n marginLeft: 0\n },\n '& span': {\n extend: label1,\n marginLeft: 6\n }\n },\n overflowTd: {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n flexWrapper: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginRight: 16\n },\n customerLinkIcon: {\n marginLeft: 2\n },\n flexRow: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n machineRedirectContainer: {\n marginLeft: 10,\n paddingLeft: 5,\n paddingRight: 5\n }\n}\n\nconst chipStyles = {\n root: {\n borderRadius: spacer / 2,\n marginTop: spacer / 2,\n marginRight: spacer / 4,\n marginBottom: spacer / 2,\n marginLeft: spacer / 4,\n height: spacer * 3,\n backgroundColor: zircon,\n '&:hover, &:focus, &:active': {\n backgroundColor: zircon\n }\n },\n label: {\n fontSize: smallestFontSize,\n fontWeight: inputFontWeight,\n fontFamily: inputFontFamily,\n paddingRight: spacer / 2,\n paddingLeft: spacer / 2,\n color: primaryColor\n }\n}\n\nexport { cpcStyles, detailsRowStyles, labelStyles, mainStyles, chipStyles }\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { useState, useEffect } from 'react'\nimport { CopyToClipboard as ReactCopyToClipboard } from 'react-copy-to-clipboard'\n\nimport Popover from 'src/components/Popper'\nimport { ReactComponent as CopyIcon } from 'src/styling/icons/action/copy/copy.svg'\nimport { comet } from 'src/styling/variables'\n\nimport { cpcStyles } from './Transactions.styles'\n\nconst useStyles = makeStyles(cpcStyles)\n\nconst CopyToClipboard = ({\n className,\n buttonClassname,\n children,\n wrapperClassname,\n ...props\n}) => {\n const [anchorEl, setAnchorEl] = useState(null)\n\n useEffect(() => {\n if (anchorEl) setTimeout(() => setAnchorEl(null), 3000)\n }, [anchorEl])\n\n const classes = useStyles()\n\n const handleClick = event => {\n setAnchorEl(anchorEl ? null : event.currentTarget)\n }\n\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n const open = Boolean(anchorEl)\n const id = open ? 'simple-popper' : undefined\n\n return (\n Actions
\n\n \n setAction({\n command: 'rename',\n display: 'Rename',\n confirmationMessage: 'Write the new name for this machine'\n })\n }>\n Rename\n \n \n setAction({\n command: 'unpair',\n display: 'Unpair'\n })\n }>\n Unpair\n \n \n setAction({\n command: 'reboot',\n display: 'Reboot'\n })\n }>\n Reboot\n \n \n setAction({\n command: 'shutdown',\n display: '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 machineStatusPreflight({\n command: 'restartServices',\n display: 'Restart services for'\n })\n }}>\n Restart Services\n \n
\n \n {children && (\n <>\n \n
\n )\n}\n\nexport default CopyToClipboard\n","import { makeStyles } from '@material-ui/core/styles'\nimport BigNumber from 'bignumber.js'\nimport { formatDistance } from 'date-fns'\nimport React from 'react'\n\nimport { Status } from 'src/components/Status'\nimport MachineActions from 'src/components/machineActions/MachineActions'\nimport { H3, Label1, P } from 'src/components/typography'\nimport CopyToClipboard from 'src/pages/Transactions/CopyToClipboard.js'\n\nimport styles from '../Machines.styles'\nconst useStyles = makeStyles(styles)\n\nconst Overview = ({ data, onActionSuccess }) => {\n const classes = useStyles()\n\n return (\n \n {children}\n
\n \n \n handleClick(event)}>\n \n
\n \n
\n \n \n )}\n Copied to clipboard!
\n \n
\n )\n}\n\nexport default Overview\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(\"g\", {\n id: \"icon/ID/card/new/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: \"1 17 23 17 23 1 1 1\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 12.7857143,\n y1: 5,\n x2: 19.8571429,\n y2: 5,\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.6\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 12.7857143,\n y1: 8.2,\n x2: 19.8571429,\n y2: 8.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: \"4.14285714 12.2 9.64285714 12.2 9.64285714 5 4.14285714 5\"\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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/card/new/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.bd0d7dca.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/ID/card/new/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 transform: \"translate(1.000000, 1.000000)\",\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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/card/new/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.8c7b512b.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/ID/phone/new/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: \"M7.47150618,13.52898 C10.939556,16.9970298 14.7804112,17.1146315 16.4756355,16.9586292 C17.0220434,16.9090285 17.5308507,16.6578249 17.9188563,16.2698193 L20.0004862,14.1881894 L18.0220577,12.210561 L16.0436293,11.5505516 L14.7244104,12.8697705 C14.7244104,12.8697705 13.4059914,14.1881894 10.1091441,10.8905421 C6.81229671,7.59449473 8.13071565,6.27527578 8.13071565,6.27527578 L9.4499346,4.95605683 L8.78992512,2.97842842 L6.81229671,1 L4.73066681,3.0816299 C4.34186123,3.46963548 4.09145763,3.97844279 4.04105691,4.52485063 C3.88585468,6.22007499 4.00345637,10.0601301 7.47150618,13.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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/phone/new/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.341f0eae.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/ID/phone/new/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: \"M7.47150618,13.52898 C10.939556,16.9970298 14.7804112,17.1146315 16.4756355,16.9586292 C17.0220434,16.9090285 17.5308507,16.6578249 17.9188563,16.2698193 L20.0004862,14.1881894 L18.0220577,12.210561 L16.0436293,11.5505516 L14.7244104,12.8697705 C14.7244104,12.8697705 13.4059914,14.1881894 10.1091441,10.8905421 C6.81229671,7.59449473 8.13071565,6.27527578 8.13071565,6.27527578 L9.4499346,4.95605683 L8.78992512,2.97842842 L6.81229671,1 L4.73066681,3.0816299 C4.34186123,3.46963548 4.09145763,3.97844279 4.04105691,4.52485063 C3.88585468,6.22007499 4.00345637,10.0601301 7.47150618,13.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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/phone/new/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.594ae9e7.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/ID/photo/new/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: \"M12,14 C9.7912,14 8,12.2088 8,10 C8,7.7912 9.7912,6 12,6 C14.2088,6 16,7.7912 16,10 C16,12.2088 14.2088,14 12,14 Z M16.7142857,3.4 L14.3571429,1 L9.64285714,1 L7.28571429,3.4 L1,3.4 L1,17 L23,17 L23,3.4 L16.7142857,3.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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/photo/new/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.e53d9d4a.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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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/download/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: \"icon/sf-small/wizzard\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Path-3\",\n points: \"3.6 5.4 6 7.8 8.4 5.4\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 0.5,\n x2: 6,\n y2: 7.4,\n id: \"Path-4\"\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})));\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.81edd31f.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/download/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: \"icon/sf-small/wizzard\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Path-3\",\n points: \"3.6 5.4 6 7.8 8.4 5.4\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 0.5,\n x2: 6,\n y2: 7.4,\n id: \"Path-4\"\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})));\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.13543418.svg\";\nexport { ForwardRef as ReactComponent };","import { ApolloProvider } from '@apollo/react-hooks'\nimport { InMemoryCache } from 'apollo-cache-inmemory'\nimport { ApolloClient } from 'apollo-client'\nimport { ApolloLink } from 'apollo-link'\nimport { onError } from 'apollo-link-error'\nimport { createUploadLink } from 'apollo-upload-client'\nimport React, { useContext } from 'react'\nimport { useHistory, useLocation } from 'react-router-dom'\n\nimport AppContext from 'src/AppContext'\n\nconst URI =\n process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''\n\nconst ALT_URI =\n process.env.NODE_ENV === 'development' ? 'http://localhost:4001' : ''\n\nconst uploadLink = createUploadLink({\n credentials: 'include',\n uri: `${URI}/graphql`\n})\n\nconst uploadLinkALT = createUploadLink({\n credentials: 'include',\n uri: `${ALT_URI}/graphql`\n})\n\nconst getClient = (history, location, getUserData, setUserData, setRole) =>\n new ApolloClient({\n link: ApolloLink.from([\n onError(({ graphQLErrors, networkError }) => {\n if (graphQLErrors)\n graphQLErrors.forEach(({ message, locations, path, extensions }) => {\n if (extensions?.code === 'UNAUTHENTICATED') {\n setUserData(null)\n if (location.pathname !== '/login') history.push('/login')\n }\n console.log(\n `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`\n )\n })\n if (networkError) console.log(`[Network error]: ${networkError}`)\n }),\n new ApolloLink((operation, forward) => {\n return forward(operation).map(response => {\n const context = operation.getContext()\n const {\n response: { headers }\n } = context\n\n if (headers) {\n const role = headers.get('lamassu_role')\n setRole(role)\n }\n\n return response\n })\n }),\n ApolloLink.split(\n operation => operation.getContext().clientName === 'pazuz',\n uploadLinkALT,\n uploadLink\n )\n ]),\n cache: new InMemoryCache(),\n defaultOptions: {\n watchQuery: {\n fetchPolicy: 'no-cache',\n errorPolicy: 'ignore'\n },\n query: {\n fetchPolicy: 'no-cache',\n errorPolicy: 'all'\n },\n mutate: {\n errorPolicy: 'all'\n }\n }\n })\n\nconst Provider = ({ children }) => {\n const history = useHistory()\n const location = useLocation()\n const { userData, setUserData, setRole } = useContext(AppContext)\n const client = getClient(\n history,\n location,\n () => userData,\n setUserData,\n setRole\n )\n\n return \n
\n \n
\n {data.name}
\n\n
\n \n Status \n {data && data.statuses ?
\n \n
\n \n Ping \n
\n \n {data.responseTime\n ? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms'\n : 'unavailable'}\n
\n\n Last ping \n
\n \n {data.lastPing\n ? formatDistance(new Date(data.lastPing), new Date(), {\n addSuffix: true\n })\n : 'unknown'}\n
\n\n Network speed \n
\n \n {data.downloadSpeed\n ? new BigNumber(data.downloadSpeed).toFixed(4).toString() +\n ' MB/s'\n : 'unavailable'}\n
\n\n
\n \n Device ID \n
\n \n
\n \n
\n \n \n \n {tx.walletScore}\n \n
\n )\n\n const getCancelMessage = () => {\n const cashInMessage = `The user will not be able to redeem the inserted bills, even if they subsequently confirm the transaction. If they've already deposited bills, you'll need to reconcile this transaction with them manually.`\n const cashOutMessage = `The user will not be able to redeem the cash, even if they subsequently send the required coins. If they've already sent you coins, you'll need to reconcile this transaction with them manually.`\n\n return isCashIn ? cashInMessage : cashOutMessage\n }\n\n return (\n \n {\n setErrorMessage(null)\n setAction({ command: null })\n cancelTransaction({\n variables: {\n id: tx.id\n }\n })\n }}\n onDismissed={() => {\n setAction({ command: null })\n setErrorMessage(null)\n }}\n />\n
\n )\n}\n\nexport default memo(\n DetailsRow,\n (prev, next) =>\n prev.it.id === next.it.id &&\n prev.it.hasError === next.it.hasError &&\n prev.it.batchError === next.it.batchError &&\n getStatus(prev.it) === getStatus(next.it)\n)\n","import { zircon } from 'src/styling/variables'\n\nexport default {\n expandButton: {\n outline: 'none',\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer',\n padding: 4\n },\n rowWrapper: {\n // workaround to shadows cut by r-virtualized when scroll is visible\n padding: 1\n },\n row: {\n border: [[2, 'solid', 'transparent']],\n borderRadius: 0\n },\n expanded: {\n border: [[2, 'solid', zircon]],\n boxShadow: '0 0 8px 0 rgba(0,0,0,0.08)'\n },\n before: {\n paddingTop: 12\n },\n after: {\n paddingBottom: 12\n },\n pointer: {\n cursor: 'pointer'\n },\n body: {\n flex: [[1, 1, 'auto']]\n },\n table: ({ width }) => ({\n marginBottom: 30,\n minHeight: 200,\n width,\n flex: 1,\n display: 'flex',\n flexDirection: 'column'\n }),\n emptyTable: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n marginTop: 52\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/action/expand/closed\",\n transform: \"translate(1.000000, 1.000000)\",\n stroke: \"#1B2559\",\n strokeWidth: 1.5\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4\",\n cx: 14,\n cy: 2,\n r: 2\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4-Copy\",\n cx: 8,\n cy: 2,\n r: 2\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4-Copy-2\",\n cx: 2,\n cy: 2,\n r: 2\n})));\n\nfunction SvgClosed(_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: \"6px\",\n viewBox: \"0 0 18 6\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgClosed);\nexport default __webpack_public_path__ + \"static/media/closed.b853a619.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: \"Styleguide\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/expand/open\",\n transform: \"translate(1.000000, 1.000000)\",\n fill: \"#1B2559\",\n stroke: \"#1B2559\",\n strokeWidth: 1.5\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4\",\n cx: 14,\n cy: 2,\n r: 2\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4-Copy\",\n cx: 8,\n cy: 2,\n r: 2\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4-Copy-2\",\n cx: 2,\n cy: 2,\n r: 2\n})));\n\nfunction SvgOpen(_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: \"6px\",\n viewBox: \"0 0 18 6\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgOpen);\nexport default __webpack_public_path__ + \"static/media/open.7196c113.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles, Box } from '@material-ui/core'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { useState, useEffect } from 'react'\nimport {\n AutoSizer,\n List,\n CellMeasurer,\n CellMeasurerCache\n} from 'react-virtualized'\n\nimport {\n Table,\n TBody,\n THead,\n Tr,\n Td,\n Th\n} from 'src/components/fake-table/Table'\nimport styles from 'src/components/tables/DataTable.styles'\nimport { H4 } from 'src/components/typography'\nimport { ReactComponent as ExpandClosedIcon } from 'src/styling/icons/action/expand/closed.svg'\nimport { ReactComponent as ExpandOpenIcon } from 'src/styling/icons/action/expand/open.svg'\n\nconst useStyles = makeStyles(styles)\n\nconst Row = ({\n id,\n elements,\n data,\n width,\n Details,\n expanded,\n expandRow,\n expWidth,\n expandable,\n onClick\n}) => {\n const classes = useStyles()\n\n const hasPointer = onClick || expandable\n const trClasses = {\n [classes.pointer]: hasPointer,\n [classes.row]: true,\n [classes.expanded]: expanded\n }\n\n return (\n \n
\n \n \n
\n\n \n \n {!isCashIn ?
\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} %)`}\n {discount && (\n
\n \n {discount} \n
\n )}\n \n \n
\n {isCashIn ? `${cashInFee} ${tx.fiatCode}` : 'N/A'}
\n \n
\n \n
\n \n \n {!R.isNil(tx.walletScore) && (\n \n {`CipherTrace score: ${tx.walletScore}/10`}\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 {getStatusDetails(tx) ? (\n \n \n ) : (\n errorElements\n )}\n {tx.txClass === 'cashOut' && getStatus(tx) === 'Pending' && (\n \n setAction({\n command: 'cancelTx'\n })\n }>\n Cancel transaction\n \n )}\n
\n {getStatusDetails(tx)}
\n\n \n
\n \n downloadRawLogs(tx, timezone)}>\n Download raw logs\n \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 extraHeight,\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 = 850 - 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 \n Dashboard\n \n \n \n {machineName}\n \n \n
\n \n \n {'Details'} \n
\n \n
\n {'Cash box & cassettes'} \n
\n \n {'Latest transactions'} \n
\n \n {'Commissions'} \n
\n \n \n
\n)\n\nconst cashOutHeader = (\n \n
\n)\n\nconst getView = (data, code, compare) => it => {\n if (!data) return ''\n\n // The following boolean should come undefined if it is rendering an unpaired machine\n const attribute = R.find(R.propEq(compare ?? 'code', it))(data)\n\n return attribute ? R.prop(code, attribute) : 'Unpaired machine'\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 labelProp: '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 labelProp: 'display',\n multiple: true,\n onChange: onCryptoChange,\n shouldStayOpen: true\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 bold: bold,\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 bold: bold,\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 bold: bold,\n inputProps: {\n decimalPlaces: 2\n }\n },\n {\n name: 'minimumTx',\n display: 'Minimun Tx',\n width: 169,\n doubleHeader: 'Cash-in only',\n textAlign: 'center',\n editingAlign: 'right',\n input: NumberInput,\n suffix: currency,\n bold: bold,\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 editingAlign: 'right',\n input: NumberInput,\n suffix: '%',\n bold: bold,\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 editingAlign: 'right',\n input: NumberInput,\n suffix: '%',\n bold: bold,\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 editingAlign: 'right',\n input: NumberInput,\n suffix: currency,\n bold: bold,\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 editingAlign: 'right',\n input: NumberInput,\n suffix: currency,\n bold: bold,\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 getSchema = locale => {\n const bills = getBillOptions(locale, denominations).map(it =>\n parseInt(it.code)\n )\n const highestBill = R.isEmpty(bills) ? CURRENCY_MAX : Math.max(...bills)\n\n return 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(highestBill)\n .required(),\n minimumTx: Yup.number()\n .label('Minimum Tx')\n .min(0)\n .max(highestBill)\n .required()\n })\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, locale) => {\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 const bills = getBillOptions(locale, denominations).map(it =>\n parseInt(it.code)\n )\n const highestBill = R.isEmpty(bills) ? CURRENCY_MAX : Math.max(...bills)\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 .min(1),\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(highestBill)\n .required(),\n minimumTx: Yup.number()\n .label('Minimum Tx')\n .min(0)\n .max(highestBill)\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\nconst createCommissions = (cryptoCode, deviceId, isDefault, config) => {\n return {\n minimumTx: config.minimumTx,\n fixedFee: config.fixedFee,\n cashOut: config.cashOut,\n cashIn: config.cashIn,\n machine: deviceId,\n cryptoCurrencies: [cryptoCode],\n default: isDefault,\n id: v4()\n }\n}\n\nconst getCommissions = (cryptoCode, deviceId, config) => {\n const overrides = R.prop('overrides', config) ?? []\n\n if (!overrides && R.isEmpty(overrides)) {\n return createCommissions(cryptoCode, deviceId, true, config)\n }\n\n const specificOverride = R.find(\n it => it.machine === deviceId && _.includes(cryptoCode)(it.cryptoCurrencies)\n )(overrides)\n\n if (specificOverride !== undefined)\n return createCommissions(cryptoCode, deviceId, false, specificOverride)\n\n const machineOverride = R.find(\n it =>\n it.machine === deviceId && _.includes('ALL_COINS')(it.cryptoCurrencies)\n )(overrides)\n\n if (machineOverride !== undefined)\n return createCommissions(cryptoCode, deviceId, false, machineOverride)\n\n const coinOverride = R.find(\n it =>\n it.machine === 'ALL_MACHINES' &&\n _.includes(cryptoCode)(it.cryptoCurrencies)\n )(overrides)\n\n if (coinOverride !== undefined)\n return createCommissions(cryptoCode, deviceId, false, coinOverride)\n\n return createCommissions(cryptoCode, deviceId, true, config)\n}\n\nconst getListCommissionsSchema = locale => {\n const bills = getBillOptions(locale, denominations).map(it =>\n parseInt(it.code)\n )\n const highestBill = R.isEmpty(bills) ? CURRENCY_MAX : Math.max(...bills)\n\n return Yup.object().shape({\n machine: Yup.string()\n .label('Machine')\n .required(),\n cryptoCurrencies: Yup.array()\n .label('Crypto Currency')\n .required()\n .min(1),\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(highestBill)\n .required(),\n minimumTx: Yup.number()\n .label('Minimum Tx')\n .min(0)\n .max(highestBill)\n .required()\n })\n}\n\nconst getTextStyle = (obj, isEditing) => {\n return { color: obj.default ? primaryColor : secondaryColorDark }\n}\n\nconst commissionsList = (auxData, currency, auxElements) => {\n const getData = R.path(R.__, auxData)\n\n return getListCommissionsFields(getData, currency, defaults)\n}\n\nconst getListCommissionsFields = (getData, currency, defaults) => {\n const machineData = [ALL_MACHINES].concat(getData(['machines']))\n\n return [\n {\n name: 'machine',\n width: 196,\n size: 'sm',\n view: getView(machineData, 'name', 'deviceId'),\n editable: false\n },\n {\n name: 'cryptoCurrencies',\n display: 'Crypto Currency',\n width: 255,\n view: R.prop(0),\n size: 'sm',\n editable: false\n },\n {\n header: cashInHeader,\n name: 'cashIn',\n display: 'Cash-in',\n width: 130,\n input: NumberInput,\n textAlign: 'right',\n suffix: '%',\n textStyle: obj => getTextStyle(obj),\n inputProps: {\n decimalPlaces: 3\n }\n },\n {\n header: cashOutHeader,\n name: 'cashOut',\n display: 'Cash-out',\n width: 140,\n input: NumberInput,\n textAlign: 'right',\n greenText: true,\n suffix: '%',\n textStyle: obj => getTextStyle(obj),\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 textStyle: obj => getTextStyle(obj),\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 textStyle: obj => getTextStyle(obj),\n inputProps: {\n decimalPlaces: 2\n }\n }\n ]\n}\n\nexport {\n mainFields,\n overrides,\n getSchema,\n getOverridesSchema,\n defaults,\n overridesDefaults,\n getOrder,\n getCommissions,\n getListCommissionsSchema,\n commissionsList\n}\n","import * as R from 'ramda'\nimport * as Yup from 'yup'\n\nimport Autocomplete from 'src/components/inputs/formik/Autocomplete.js'\nimport { labels as timezoneList } from 'src/utils/timezone-list'\n\nconst getFields = (getData, names, onChange, auxElements = []) => {\n return R.filter(\n it => R.includes(it.name, names),\n allFields(getData, onChange, auxElements)\n )\n}\n\nconst allFields = (getData, onChange, auxElements = []) => {\n const getView = (data, code, compare) => it => {\n if (!data) return ''\n\n return R.compose(\n R.prop(code),\n R.find(R.propEq(compare ?? 'code', it))\n )(data)\n }\n\n const displayCodeArray = data => it => {\n if (!it) return it\n\n return R.compose(R.join(', '), R.map(getView(data, 'code')))(it)\n }\n\n const overridenMachines = R.map(override => override.machine, auxElements)\n\n const suggestionFilter = it =>\n R.differenceWith((x, y) => x.deviceId === y, it, overridenMachines)\n\n const machineData = getData(['machines'])\n const countryData = getData(['countries'])\n const currencyData = getData(['currencies'])\n const languageData = getData(['languages'])\n const cryptoData = getData(['cryptoCurrencies'])\n const timezonesData = timezoneList\n\n const findSuggestion = it => {\n const machine = R.find(R.propEq('deviceId', it.machine))(machineData)\n return machine ? [machine] : []\n }\n\n return [\n {\n name: 'machine',\n width: 200,\n size: 'sm',\n view: getView(machineData, 'name', 'deviceId'),\n input: Autocomplete,\n inputProps: {\n options: it =>\n R.concat(findSuggestion(it))(suggestionFilter(machineData)),\n valueProp: 'deviceId',\n labelProp: 'name'\n }\n },\n {\n name: 'country',\n width: 200,\n size: 'sm',\n view: getView(countryData, 'display'),\n input: Autocomplete,\n inputProps: {\n options: countryData,\n valueProp: 'code',\n labelProp: 'display'\n }\n },\n {\n name: 'fiatCurrency',\n width: 150,\n size: 'sm',\n view: getView(currencyData, 'code'),\n input: Autocomplete,\n inputProps: {\n options: currencyData,\n valueProp: 'code',\n labelProp: 'code'\n }\n },\n {\n name: 'languages',\n width: 200,\n size: 'sm',\n view: displayCodeArray(languageData),\n input: Autocomplete,\n inputProps: {\n options: languageData,\n valueProp: 'code',\n labelProp: 'display',\n multiple: true\n }\n },\n {\n name: 'cryptoCurrencies',\n width: 170,\n size: 'sm',\n view: displayCodeArray(cryptoData),\n input: Autocomplete,\n inputProps: {\n options: cryptoData,\n valueProp: 'code',\n labelProp: 'code',\n multiple: true,\n optionsLimit: null,\n onChange\n }\n },\n {\n name: 'timezone',\n width: 320,\n size: 'sm',\n view: getView(timezonesData, 'label'),\n input: Autocomplete,\n inputProps: {\n options: timezonesData,\n valueProp: 'code',\n labelProp: 'label'\n }\n }\n ]\n}\n\nconst mainFields = (auxData, configureCoin) => {\n const getData = R.path(R.__, auxData)\n\n return getFields(\n getData,\n ['country', 'fiatCurrency', 'languages', 'cryptoCurrencies', 'timezone'],\n configureCoin,\n undefined\n )\n}\n\nconst overrides = (auxData, auxElements, configureCoin) => {\n const getData = R.path(R.__, auxData)\n\n return getFields(\n getData,\n ['machine', 'country', 'languages', 'cryptoCurrencies'],\n configureCoin,\n auxElements\n )\n}\n\nconst LocaleSchema = Yup.object().shape({\n country: Yup.string()\n .label('Country')\n .required(),\n fiatCurrency: Yup.string()\n .label('Fiat Currency')\n .required(),\n languages: Yup.array()\n .label('Languages')\n .required()\n .min(1)\n .max(4),\n cryptoCurrencies: Yup.array()\n .label('Crypto Currencies')\n .required()\n .min(1),\n timezone: Yup.string()\n .label('Timezone')\n .required()\n})\n\nconst OverridesSchema = Yup.object().shape({\n machine: Yup.string()\n .label('Machine')\n .required(),\n country: Yup.string()\n .label('Country')\n .required(),\n languages: Yup.array()\n .label('Languages')\n .required()\n .min(1)\n .max(4),\n cryptoCurrencies: Yup.array()\n .label('Crypto Currencies')\n .required()\n .min(1)\n})\n\nconst localeDefaults = {\n country: '',\n fiatCurrency: '',\n languages: [],\n cryptoCurrencies: [],\n timezone: ''\n}\n\nconst overridesDefaults = {\n machine: '',\n country: '',\n languages: [],\n cryptoCurrencies: []\n}\n\nexport {\n mainFields,\n overrides,\n LocaleSchema,\n OverridesSchema,\n localeDefaults,\n overridesDefaults\n}\n","import * as R from 'ramda'\nimport * as Yup from 'yup'\n\nimport {\n Autocomplete,\n Checkbox,\n NumberInput\n} from 'src/components/inputs/formik'\nimport { disabledColor } from 'src/styling/variables'\nimport { CURRENCY_MAX } from 'src/utils/constants'\nimport { transformNumber } from 'src/utils/number'\n\nconst classes = {\n editDisabled: {\n color: disabledColor\n }\n}\nconst filterClass = type => R.filter(it => it.class === type)\nconst filterCoins = ({ id }) => R.filter(it => R.contains(id)(it.cryptos))\n\nconst WalletSchema = Yup.object().shape({\n ticker: Yup.string().required(),\n wallet: Yup.string().required(),\n exchange: Yup.string().required(),\n zeroConf: Yup.string().required(),\n zeroConfLimit: Yup.number()\n .integer()\n .required('Zero Conf Limit is a required field')\n .min(0)\n .max(CURRENCY_MAX)\n .transform(transformNumber)\n})\n\nconst AdvancedWalletSchema = Yup.object().shape({\n cryptoUnits: Yup.string().required(),\n feeMultiplier: Yup.string().required(),\n allowTransactionBatching: Yup.boolean()\n})\n\nconst OverridesSchema = Yup.object().shape({\n cryptoUnits: Yup.string().required(),\n feeMultiplier: Yup.string().required(),\n cryptoCurrency: Yup.string().required(),\n allowTransactionBatching: Yup.boolean()\n})\n\nconst OverridesDefaults = {\n cryptoUnits: '',\n feeMultiplier: '',\n cryptoCurrency: '',\n allowTransactionBatching: null\n}\n\nconst viewFeeMultiplier = it =>\n R.compose(R.prop(['display']), R.find(R.propEq('code', it)))(feeOptions)\n\nconst feeOptions = [\n { display: '+20%', code: '1.2' },\n { display: 'Default', code: '1' },\n { display: '-20%', code: '0.8' },\n { display: '-40%', code: '0.6' },\n { display: '-60%', code: '0.4' }\n]\n\nconst cryptoUnitsDefaultOptions = [\n { display: 'mili', code: 'mili' },\n { display: 'full', code: 'full' }\n]\n\nconst getCryptoUnitsOptions = R.curry((coinUtils, it) => {\n if (R.isNil(it.cryptoCurrency)) return cryptoUnitsDefaultOptions\n const options = R.keys(coinUtils.getCryptoCurrency(it.cryptoCurrency).units)\n return R.map(option => {\n return { code: option, display: option }\n })(options)\n})\n\nconst getAdvancedWalletElements = () => {\n return [\n {\n name: 'cryptoUnits',\n size: 'sm',\n stripe: true,\n width: 190,\n input: Autocomplete,\n inputProps: {\n options: cryptoUnitsDefaultOptions,\n valueProp: 'code',\n labelProp: 'display'\n }\n },\n {\n name: 'allowTransactionBatching',\n size: 'sm',\n stripe: true,\n width: 250,\n view: (_, ite) => {\n return ite.allowTransactionBatching ? 'Yes' : `No`\n },\n input: Checkbox\n },\n {\n name: 'feeMultiplier',\n header: `Miner's Fee`,\n size: 'sm',\n stripe: true,\n width: 250,\n view: viewFeeMultiplier,\n input: Autocomplete,\n inputProps: {\n options: feeOptions,\n valueProp: 'code',\n labelProp: 'display'\n }\n }\n ]\n}\n\nconst getAdvancedWalletElementsOverrides = (\n coinSuggestions,\n findSuggestion,\n coinUtils\n) => {\n return [\n {\n name: 'cryptoCurrency',\n width: 180,\n input: Autocomplete,\n inputProps: {\n options: it => R.concat(coinSuggestions, findSuggestion(it)),\n optionsLimit: null,\n valueProp: 'code',\n labelProp: 'display'\n },\n size: 'sm'\n },\n {\n name: 'cryptoUnits',\n size: 'sm',\n stripe: true,\n width: 190,\n input: Autocomplete,\n inputProps: {\n options: getCryptoUnitsOptions(coinUtils),\n valueProp: 'code',\n labelProp: 'display'\n }\n },\n {\n name: 'allowTransactionBatching',\n size: 'sm',\n stripe: true,\n width: 250,\n view: (_, ite) => {\n if (ite.cryptoCurrency !== 'BTC')\n return {`No`}\n return ite.allowTransactionBatching ? 'Yes' : 'No'\n },\n input: Checkbox,\n editable: it => it.cryptoCurrency === 'BTC'\n },\n {\n name: 'feeMultiplier',\n header: `Miner's Fee`,\n size: 'sm',\n stripe: true,\n width: 250,\n view: viewFeeMultiplier,\n input: Autocomplete,\n inputProps: {\n options: feeOptions,\n valueProp: 'code',\n labelProp: 'display'\n }\n }\n ]\n}\n\nconst getElements = (cryptoCurrencies, accounts, onChange, wizard = false) => {\n const widthAdjust = wizard ? 11 : 0\n const viewCryptoCurrency = it => {\n const currencyDisplay = R.compose(\n R.prop(['display']),\n R.find(R.propEq('code', it))\n )(cryptoCurrencies)\n return currencyDisplay\n }\n const filterOptions = type => filterClass(type)(accounts || [])\n\n const getDisplayName = type => it =>\n R.compose(\n R.prop('display'),\n R.find(R.propEq('code', it))\n )(filterOptions(type))\n\n const getOptions = R.curry((option, it) =>\n filterCoins(it)(filterOptions(option))\n )\n\n return [\n {\n name: 'id',\n header: 'Cryptocurrency',\n width: 150 - widthAdjust,\n view: viewCryptoCurrency,\n size: 'sm',\n editable: false\n },\n {\n name: 'ticker',\n size: 'sm',\n stripe: true,\n view: getDisplayName('ticker'),\n width: 175 - widthAdjust,\n input: Autocomplete,\n inputProps: {\n options: getOptions('ticker'),\n valueProp: 'code',\n labelProp: 'display',\n optionsLimit: null\n }\n },\n {\n name: 'wallet',\n size: 'sm',\n stripe: true,\n view: getDisplayName('wallet'),\n width: 175 - widthAdjust,\n input: Autocomplete,\n inputProps: {\n options: getOptions('wallet'),\n valueProp: 'code',\n labelProp: 'display',\n optionsLimit: null,\n onChange\n }\n },\n {\n name: 'exchange',\n size: 'sm',\n stripe: true,\n view: getDisplayName('exchange'),\n width: 175 - widthAdjust,\n input: Autocomplete,\n inputProps: {\n options: getOptions('exchange'),\n valueProp: 'code',\n labelProp: 'display',\n optionsLimit: null,\n onChange\n }\n },\n {\n name: 'zeroConf',\n header: 'Confidence Checking',\n size: 'sm',\n stripe: true,\n view: getDisplayName('zeroConf'),\n input: Autocomplete,\n width: 210 - widthAdjust,\n inputProps: {\n options: getOptions('zeroConf'),\n valueProp: 'code',\n labelProp: 'display',\n optionsLimit: null,\n onChange\n }\n },\n {\n name: 'zeroConfLimit',\n header: '0-conf Limit',\n size: 'sm',\n stripe: true,\n view: (it, row) =>\n row.id === 'ETH' ? {it} : it,\n input: NumberInput,\n width: 145 - widthAdjust,\n inputProps: {\n decimalPlaces: 0\n },\n editable: row => row.id !== 'ETH'\n }\n ]\n}\n\nexport {\n WalletSchema,\n AdvancedWalletSchema,\n getElements,\n filterClass,\n getAdvancedWalletElements,\n getAdvancedWalletElementsOverrides,\n OverridesDefaults,\n OverridesSchema\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport { spacer, offColor } from 'src/styling/variables'\n\nimport { TL1 } from './typography'\n\nconst useStyles = makeStyles({\n subtitle: {\n color: offColor,\n marginTop: spacer * 2,\n marginBottom: spacer * 2\n },\n extraMarginTop: {\n marginTop: spacer * 9\n }\n})\n\nconst Subtitle = memo(({ children, className, extraMarginTop }) => {\n const classes = useStyles()\n const classNames = {\n [classes.subtitle]: true,\n [classes.extraMarginTop]: extraMarginTop\n }\n\n return \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","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 { mainFields, defaults, getSchema } from 'src/pages/Commissions/helper'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nconst useStyles = makeStyles(styles)\nconst useCommissionStyles = makeStyles({\n autoComplete: {\n width: '100%'\n }\n})\n\nconst GET_DATA = gql`\n query getData {\n config\n }\n`\nconst SAVE_CONFIG = gql`\n mutation Save($config: JSONObject) {\n saveConfig(config: $config)\n }\n`\n\nfunction Commissions({ isActive, doContinue }) {\n const classes = useStyles()\n const commissionClasses = useCommissionStyles()\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('commissions')(it.commissions[0])\n return saveConfig({ variables: { config } })\n }\n\n const currency = R.path(['fiatCurrency'])(\n fromNamespace(namespaces.LOCALE)(data?.config)\n )\n\n const locale = fromNamespace(namespaces.LOCALE)(data?.config)\n\n return (\n \n {title} \n {error && Failed to save changes }\n
\n )}\n {children}\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 { utils as coinUtils } from 'lamassu-coins'\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 const defaultCryptoUnit = R.head(\n R.keys(coinUtils.getCryptoCurrency(coin).units)\n )\n const adjustedData = {\n zeroConfLimit: 0,\n ...currentData,\n cryptoUnits: defaultCryptoUnit\n }\n if (!WalletSchema.isValidSync(adjustedData)) return setError(true)\n\n const withCoin = toNamespace(coin, R.omit('coin', adjustedData))\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: 'none', zeroConfLimit: 0 })}\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: 'none', zeroConfLimit: 0 })\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\nconst singleBitgo = 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: [\n { code: 'prod', display: 'prod' },\n { code: 'test', display: 'test' }\n ],\n labelProp: 'display',\n valueProp: 'code'\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('The token must be a string')\n .max(100, 'The token is too long')\n .required('The token is required'),\n environment: Yup.string('The environment must be a string')\n .matches(/(prod|test)/)\n .required('The environment is required'),\n [`${code}WalletId`]: Yup.string(`The ${code} wallet ID must be a string`)\n .max(100, `The ${code} wallet ID is too long`)\n .required(`The ${code} wallet ID is required`),\n [`${code}WalletPassphrase`]: Yup.string(\n `The ${code} passphrase must be a string`\n )\n .max(100, `The ${code} wallet passphrase is too long`)\n .required(`The ${code} wallet passphrase is required`)\n })\n})\n\nexport default singleBitgo\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 { getSchema 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 const locale = fromNamespace(namespaces.LOCALE, config)\n return CommissionsSchema(locale).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 panel, you can define default settings\n that will be applied to all machines you add to your network later on.\n These settings may be overridden for specific machines in the 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 the Lamassu Admin
\n\n To get you started, we’ve put together a wizard that will\n
\n help set up what you need before pairing your 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{label}
\n \n )\n}\n\nexport default LegendEntry\n","import { comet } from 'src/styling/variables'\n\nconst styles = {\n dotOtWrapper: {\n position: 'absolute',\n top: coords => coords?.y ?? 0,\n left: coords => coords?.x ?? 0,\n width: 150,\n padding: 12,\n borderRadius: 8\n },\n dotOtTransactionAmount: {\n margin: [[8, 0, 8, 0]]\n },\n dotOtTransactionVolume: {\n color: comet\n },\n dotOtTransactionClasses: {\n marginTop: 15,\n '& p > span': {\n marginLeft: 5\n },\n '& p:last-child': {\n marginTop: 5\n }\n }\n}\n\nexport default styles\n","import { Paper } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport * as R from 'ramda'\nimport React, { memo } from 'react'\n\nimport { Info2, Label3, 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 { numberToFiatAmount } from 'src/utils/number'\nimport { singularOrPlural } from 'src/utils/string'\nimport { formatDate, formatDateNonUtc } from 'src/utils/timezones'\n\nimport styles from './GraphTooltip.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst GraphTooltip = ({\n coords,\n data,\n dateInterval,\n period,\n currency,\n representing\n}) => {\n const classes = useStyles(coords)\n\n const formattedDateInterval = !R.includes('hourOfDay', representing.code)\n ? [\n formatDate(\n dateInterval[1],\n null,\n period.code === 'day' ? 'MMM d, HH:mm' : 'MMM d'\n ),\n formatDate(\n dateInterval[0],\n null,\n period.code === 'day' ? 'HH:mm' : 'MMM d'\n )\n ]\n : [\n formatDateNonUtc(dateInterval[1], 'HH:mm'),\n formatDateNonUtc(dateInterval[0], 'HH:mm')\n ]\n\n const transactions = R.reduce(\n (acc, value) => {\n acc.volume += parseInt(value.fiat)\n if (value.txClass === 'cashIn') acc.cashIn++\n if (value.txClass === 'cashOut') acc.cashOut++\n return acc\n },\n { volume: 0, cashIn: 0, cashOut: 0 },\n data\n )\n\n return (\n\n {R.length(data)}{' '}\n {singularOrPlural(R.length(data), 'transaction', 'transactions')}\n
\n\n {numberToFiatAmount(transactions.volume)} {currency} in volume\n
\n\n \n \n \n \n
\n \n {!R.isNil(selectionCoords) && (\n
\n )\n}\n\nexport default memo(GraphWrapper)\n","import { Box } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { getTimezoneOffset } from 'date-fns-tz'\nimport { format, add, startOfWeek } from 'date-fns/fp'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { RadioGroup, Select } from 'src/components/inputs'\nimport { H2 } from 'src/components/typography'\nimport { MINUTE } from 'src/utils/time'\n\nimport styles from '../../Analytics.styles'\nimport Graph from '../../graphs/Graph'\nimport LegendEntry from '../LegendEntry'\n\nconst useStyles = makeStyles(styles)\n\nconst options = [\n { code: 'hourOfDayTransactions', display: 'Transactions' },\n { code: 'hourOfDayVolume', display: 'Volume' }\n]\n\nconst dayOptions = R.map(\n it => ({\n code: R.toLower(it),\n display: it\n }),\n Array.from(Array(7)).map((_, i) =>\n format('EEEE', add({ days: i }, startOfWeek(new Date())))\n )\n)\n\nconst HourOfDayBarGraphHeader = ({\n title,\n period,\n data,\n machines,\n selectedMachine,\n handleMachineChange,\n timezone,\n currency\n}) => {\n const classes = useStyles()\n\n const [graphType, setGraphType] = useState(options[0].code)\n const [selectedDay, setSelectedDay] = useState(dayOptions[0])\n\n const legend = {\n cashIn: ,\n cashOut: \n }\n\n const offset = getTimezoneOffset(timezone)\n\n const txsPerWeekday = R.reduce(\n (acc, value) => {\n const created = new Date(value.created)\n created.setTime(\n created.getTime() + created.getTimezoneOffset() * MINUTE + offset\n )\n switch (created.getDay()) {\n case 0:\n acc.sunday.push(value)\n break\n case 1:\n acc.monday.push(value)\n break\n case 2:\n acc.tuesday.push(value)\n break\n case 3:\n acc.wednesday.push(value)\n break\n case 4:\n acc.thursday.push(value)\n break\n case 5:\n acc.friday.push(value)\n break\n case 6:\n acc.saturday.push(value)\n break\n default:\n throw new Error('Day of week not recognized')\n }\n return acc\n },\n R.fromPairs(R.map(it => [it.code, []], dayOptions)),\n data\n )\n\n return (\n <>\n \n
\n \n \n \n
\n {title}
\n\n setGraphType(e.target.value)}\n />\n
\n \n
\n \n \n \n
\n {title}
\n\n
\n \n
\n \n \n \n
\n {title}
\n\n setGraphType(e.target.value)}\n />\n
\n \n \n {numberToFiatAmount(value)}\n {!!currency && ` ${currency}`}\n \n \n {R.gt(growthRate, 0) &&
\n )\n}\n\nconst Analytics = () => {\n const classes = useStyles()\n\n const { data: txResponse, loading: txLoading } = useQuery(GET_TRANSACTIONS, {\n variables: {\n from: subDays(65, endOfToday()),\n until: endOfToday(),\n excludeTestingCustomers: true\n }\n })\n const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)\n\n const [representing, setRepresenting] = useState(REPRESENTING_OPTIONS[0])\n const [period, setPeriod] = useState(PERIOD_OPTIONS[0])\n const [machine, setMachine] = useState(MACHINE_OPTIONS[0])\n\n const loading = txLoading || configLoading\n\n const transactions = R.path(['transactions'])(txResponse) ?? []\n const machines = R.path(['machines'])(configResponse) ?? []\n const config = R.path(['config'])(configResponse) ?? []\n const rates = R.path(['fiatRates'])(configResponse) ?? []\n const fiatLocale = fromNamespace('locale')(config).fiatCurrency\n\n const timezone = config?.locale_timezone\n\n const convertFiatToLocale = item => {\n if (item.fiatCode === fiatLocale) return item\n const itemRate = R.find(R.propEq('code', item.fiatCode))(rates)\n const localeRate = R.find(R.propEq('code', fiatLocale))(rates)\n const multiplier = localeRate?.rate / itemRate?.rate\n return { ...item, fiat: parseFloat(item.fiat) * multiplier }\n }\n\n const data =\n R.map(convertFiatToLocale)(\n transactions?.filter(\n tx =>\n (!tx.dispensed || !tx.expired) && (tx.sendConfirmed || tx.dispense)\n )\n ) ?? []\n\n const machineOptions = R.clone(MACHINE_OPTIONS)\n\n R.forEach(\n m => machineOptions.push({ code: m.deviceId, display: m.name }),\n machines\n )\n\n const machineTxs = R.filter(\n tx => (machine.code === 'all' ? true : tx.deviceId === machine.code),\n data\n )\n\n const filteredData = timeInterval => ({\n current:\n machineTxs.filter(\n d => new Date(d.created) >= Date.now() - TIME_OPTIONS[timeInterval]\n ) ?? [],\n previous:\n machineTxs.filter(\n d =>\n new Date(d.created) < Date.now() - TIME_OPTIONS[timeInterval] &&\n new Date(d.created) >= Date.now() - 2 * TIME_OPTIONS[timeInterval]\n ) ?? []\n })\n\n const txs = {\n current: filteredData(period.code).current.length,\n previous: filteredData(period.code).previous.length\n }\n\n const avgAmount = {\n current:\n R.sum(R.map(d => d.fiat, filteredData(period.code).current)) /\n (txs.current === 0 ? 1 : txs.current),\n previous:\n R.sum(R.map(d => d.fiat, filteredData(period.code).previous)) /\n (txs.previous === 0 ? 1 : txs.previous)\n }\n\n const txVolume = {\n current: R.sum(R.map(d => d.fiat, filteredData(period.code).current)),\n previous: R.sum(R.map(d => d.fiat, filteredData(period.code).previous))\n }\n\n const commissions = {\n current: R.sum(\n R.map(\n d => d.fiat * d.commissionPercentage,\n filteredData(period.code).current\n )\n ),\n previous: R.sum(\n R.map(\n d => d.fiat * d.commissionPercentage,\n filteredData(period.code).previous\n )\n )\n }\n\n const getGraphInfo = representing => {\n switch (representing.code) {\n case 'overTime':\n return (\n {label}
\n\n {numberToFiatAmount(growthRate)}%\n
\n \n\n
\n {getGraphInfo(representing)}\n \n )\n )\n}\n\nexport default Analytics\n","import { spacer, white } from 'src/styling/variables'\nconst styles = {\n grid: {\n flex: 1,\n height: '100%'\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n marginLeft: spacer * 6\n },\n footer: {\n margin: [['auto', 0, spacer * 3, 'auto']]\n },\n modalTitle: {\n margin: [['auto', 0, 8.5, 'auto']]\n },\n subtitle: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'row'\n },\n white: {\n color: white\n },\n deleteButton: {\n paddingLeft: 13\n },\n addressRow: {\n marginLeft: 8\n },\n error: {\n marginTop: 20\n },\n closeButton: {\n display: 'flex',\n padding: [[spacer * 2, spacer * 2, 0, spacer * 2]],\n paddingRight: spacer * 1.5,\n justifyContent: 'end'\n },\n dialogTitle: {\n margin: [[0, spacer * 2, spacer, spacer * 4 + spacer]]\n },\n dialogContent: {\n width: 615,\n marginLeft: 16\n },\n dialogActions: {\n padding: spacer * 4,\n paddingTop: spacer * 2\n },\n cancelButton: {\n marginRight: 8,\n padding: 0\n }\n}\n\nexport default styles\n","import { Box } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { Formik, Form, Field } from 'formik'\nimport * as R from 'ramda'\nimport React from 'react'\nimport * as Yup from 'yup'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport { Link } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\nimport { H3 } from 'src/components/typography'\n\nimport styles from './Blacklist.styles'\nconst useStyles = makeStyles(styles)\n\nconst BlackListModal = ({\n onClose,\n selectedCoin,\n addToBlacklist,\n errorMsg\n}) => {\n const classes = useStyles()\n const handleAddToBlacklist = address => {\n if (selectedCoin.code === 'BCH' && !address.startsWith('bitcoincash:')) {\n address = 'bitcoincash:' + address\n }\n addToBlacklist(selectedCoin.code, address)\n }\n const placeholderAddress = {\n BTC: '1ADwinnimZKGgQ3dpyfoUZvJh4p1UWSSpD',\n ETH: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',\n LTC: 'LPKvbjwV1Kaksktzkr7TMK3FQtQEEe6Wqa',\n DASH: 'XqQ7gU8eM76rEfey726cJpT2RGKyJyBrcn',\n ZEC: 't1KGyyv24eL354C9gjveBGEe8Xz9UoPKvHR',\n BCH: 'qrd6za97wm03lfyg82w0c9vqgc727rhemg5yd9k3dm',\n USDT: '0x5754284f345afc66a98fbb0a0afe71e0f007b949',\n XMR:\n '888tNkZrPN6JsEgekjMnABU4TBzc2Dt29EPAvkRxbANsAnjyPbb3iQ1YBRk1UXcdRsiKc9dhwMVgN5S9cQUiyoogDavup3H'\n }\n\n return (\n \n
\n \n
\n \n \n \n Blacklist address\n \n \n
\n \n )\n}\n\nexport default BlackListModal\n","import { makeStyles, Box } from '@material-ui/core'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { useState, useEffect } from 'react'\nimport {\n AutoSizer,\n List,\n CellMeasurer,\n CellMeasurerCache\n} from 'react-virtualized'\n\nimport {\n Table,\n TBody,\n THead,\n Tr,\n Td,\n Th\n} from 'src/components/fake-table/Table'\nimport { EmptyTable } from 'src/components/table'\nimport { H4 } from 'src/components/typography'\nimport { ReactComponent as ExpandClosedIcon } from 'src/styling/icons/action/expand/closed.svg'\nimport { ReactComponent as ExpandOpenIcon } from 'src/styling/icons/action/expand/open.svg'\n\nimport styles from './DataTable.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst Row = ({\n id,\n index,\n elements,\n data,\n width,\n Details,\n expanded,\n expandRow,\n expWidth,\n expandable,\n onClick,\n size,\n ...props\n}) => {\n const classes = useStyles()\n\n const hasPointer = onClick || expandable\n const trClasses = {\n [classes.pointer]: hasPointer,\n [classes.row]: true,\n [classes.expanded]: expanded\n }\n\n return (\n \n \n {\n expandable && expandRow(id, data)\n onClick && onClick(data)\n }}\n error={data.error || data.hasError || data.batchError}\n shouldShowError={false}\n errorMessage={data.errorMessage || data.hasError || data.batchError}>\n {elements.map(({ view = it => it?.toString(), ...props }, idx) => (\n \n {view(data)}\n \n ))}\n {expandable && (\n \n expandRow(id, data)}\n className={classes.expandButton}>\n {expanded && \n )}\n \n
\n {expandable && expanded && (\n \n \n \n \n \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 rowSize,\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, data) => {\n if (data.id) {\n cache.clear(data.id)\n setExpanded(data.id === expanded ? null : data.id)\n } else {\n cache.clear(id)\n setExpanded(id === expanded ? null : id)\n }\n }\n\n const cache = new CellMeasurerCache({\n defaultHeight: 58,\n fixedWidth: true\n })\n\n function rowRenderer({ index, key, parent, style }) {\n return (\n \n
\n
\n )}\n \n )\n }\n\n return (\n | }\n |
|---|
\n {R.path(['address'], it)} \n
\n )\n },\n {\n name: 'deleteButton',\n header: \n \n \n
\n \n {'Are you sure you want to enable this?'}\n
\n\n \n \n \n enablePaperWalletOnly\n ? addressReuseSave({\n enablePaperWalletOnly: e.target.checked\n })\n : setConfirmDialog(true)\n }\n value={enablePaperWalletOnly}\n />\n {enablePaperWalletOnly ? 'On' : 'Off'} \n \n \n \n \n {\n addressReuseSave({ rejectAddressReuse: event.target.checked })\n }}\n value={rejectAddressReuse}\n />\n {rejectAddressReuse ? 'On' : 'Off'} \n \n \n \n \n
\n \n {clickedItem.display\n ? `${clickedItem.display} blacklisted addresses`\n : ''}{' '}\n
\nEnable paper wallet (only)
\n\n The \"Enable paper wallet (only)\" option means that only paper\n wallets will be printed for users, and they won't be permitted\n to scan an address from their own wallet.\n
\nReject reused addresses
\n\n The \"Reject reused addresses\" option means that all addresses\n that are used once will be automatically rejected if there's\n an attempt to use them again on a new transaction.\n
\n\n
\n )\n}\n\nexport default WizardSplash\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 marginBottom: 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 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 tejo3CassetteOne from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-1-left.svg'\nimport tejo3CassetteTwo from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-2-left.svg'\nimport tejo3CassetteThree from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-3-left.svg'\nimport tejo4CassetteOne from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-1-left.svg'\nimport tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-2-left.svg'\nimport tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg'\nimport tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.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 getCassetesArtworks = () => ({\n 2: {\n 1: cassetteOne,\n 2: cassetteTwo\n },\n 3: {\n 1: tejo3CassetteOne,\n 2: tejo3CassetteTwo,\n 3: tejo3CassetteThree\n },\n 4: {\n 1: tejo4CassetteOne,\n 2: tejo4CassetteTwo,\n 3: tejo4CassetteThree,\n 4: tejo4CassetteFour\n }\n})\n\nconst WizardStep = ({\n name,\n step,\n schema,\n error,\n lastStep,\n onContinue,\n steps,\n fiatCurrency,\n options,\n numberOfCassettes\n}) => {\n const classes = useStyles()\n\n const label = lastStep ? 'Finish' : 'Next'\n\n return (\n <>\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 {name} \n
\n\n {step <= numberOfCassettes && (\n \n Cash Cassette Bill Count \n Default Commissions \n
\n )}\n \n )\n}\n\nexport default WizardStep\n","import * as R from 'ramda'\nimport * as Yup from 'yup'\n\nimport { Autocomplete, NumberInput } from 'src/components/inputs/formik'\nimport { bold } from 'src/styling/helpers'\nimport denominations from 'src/utils/bill-denominations'\nimport { getBillOptions } from 'src/utils/bill-options'\nimport { CURRENCY_MAX } from 'src/utils/constants'\nimport { transformNumber } from 'src/utils/number'\n\nconst widthsByNumberOfCassettes = {\n 2: { machine: 300, cassette: 225, zeroConf: 200 },\n 3: { machine: 210, cassette: 180, zeroConf: 200 },\n 4: { machine: 200, cassette: 150, zeroConf: 150 }\n}\n\nconst DenominationsSchema = Yup.object().shape({\n cassette1: Yup.number()\n .label('Cassette 1')\n .required()\n .min(1)\n .max(CURRENCY_MAX),\n cassette2: Yup.number()\n .label('Cassette 2')\n .required()\n .min(1)\n .max(CURRENCY_MAX),\n cassette3: Yup.number()\n .label('Cassette 3')\n .min(1)\n .max(CURRENCY_MAX)\n .nullable()\n .transform(transformNumber),\n cassette4: Yup.number()\n .label('Cassette 4')\n .min(1)\n .max(CURRENCY_MAX)\n .nullable()\n .transform(transformNumber)\n})\n\nconst getElements = (machines, locale = {}, classes) => {\n const fiatCurrency = R.prop('fiatCurrency')(locale)\n const maxNumberOfCassettes = Math.max(\n ...R.map(it => it.numberOfCassettes, machines),\n 0\n )\n\n const options = getBillOptions(locale, denominations)\n const cassetteProps =\n options?.length > 0\n ? {\n options: options,\n labelProp: 'display',\n valueProp: 'code',\n className: classes.autoComplete\n }\n : { decimalPlaces: 0 }\n\n const elements = [\n {\n name: 'id',\n header: 'Machine',\n width: widthsByNumberOfCassettes[maxNumberOfCassettes]?.machine,\n view: it => machines.find(({ deviceId }) => deviceId === it).name,\n size: 'sm',\n editable: false\n }\n ]\n\n R.until(\n R.gt(R.__, maxNumberOfCassettes),\n it => {\n elements.push({\n name: `cassette${it}`,\n header: `Cassette ${it}`,\n size: 'sm',\n stripe: true,\n textAlign: 'right',\n width: widthsByNumberOfCassettes[maxNumberOfCassettes]?.cassette,\n suffix: fiatCurrency,\n bold: bold,\n view: it => it,\n input: options?.length > 0 ? Autocomplete : NumberInput,\n inputProps: cassetteProps,\n doubleHeader: 'Denominations',\n isHidden: machine =>\n it >\n machines.find(({ deviceId }) => deviceId === machine.id)\n .numberOfCassettes\n })\n return R.add(1, it)\n },\n 1\n )\n\n return elements\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 { getBillOptions } from 'src/utils/bill-options'\nimport { toNamespace } from 'src/utils/config'\nimport { transformNumber } from 'src/utils/number'\n\nimport WizardSplash from './WizardSplash'\nimport WizardStep from './WizardStep'\nimport { DenominationsSchema } from './helper'\n\nconst MODAL_WIDTH = 554\nconst MODAL_HEIGHT = 520\n\nconst Wizard = ({ machine, locale, onClose, save, error }) => {\n const LAST_STEP = machine.numberOfCassettes + 2\n const [{ step, config }, setState] = useState({\n step: 0,\n config: { active: true }\n })\n\n const options = getBillOptions(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(\n machine.deviceId,\n DenominationsSchema.cast(config, { assert: false })\n )\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 R.until(\n R.gt(R.__, machine.numberOfCassettes),\n it => {\n steps.push({\n type: `cassette${it}`,\n display: `Cassette ${it}`,\n component: Autocomplete,\n inputProps: {\n options: R.map(it => ({ code: it, display: it }))(options),\n labelProp: 'display',\n valueProp: 'code'\n }\n })\n return R.add(1, it)\n },\n 1\n )\n\n steps.push({\n type: 'zeroConfLimit',\n display: '0-conf Limit',\n schema: Yup.object().shape({\n zeroConfLimit: Yup.number().required()\n })\n })\n\n const schema = () =>\n Yup.object().shape({\n cassette1: Yup.number().required(),\n cassette2:\n machine.numberOfCassettes > 1 && step >= 2\n ? Yup.number().required()\n : Yup.number()\n .transform(transformNumber)\n .nullable(),\n cassette3:\n machine.numberOfCassettes > 2 && step >= 3\n ? Yup.number().required()\n : Yup.number()\n .transform(transformNumber)\n .nullable(),\n cassette4:\n machine.numberOfCassettes > 3 && step >= 4\n ? Yup.number().required()\n : Yup.number()\n .transform(transformNumber)\n .nullable()\n })\n\n return (\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 100 crypto atoms or less.\n
\n\n (Crypto atoms are the smallest unit in each cryptocurrency.\n E.g., satoshis in Bitcoin, or wei in Ethereum.)\n
\n\n
\n )\n }\n)\n\nexport default CommissionsList\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 TitleSection from 'src/components/layout/TitleSection'\nimport { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg'\nimport { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg'\nimport { ReactComponent as OverrideLabelIcon } from 'src/styling/icons/status/spring2.svg'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nimport CommissionsDetails from './components/CommissionsDetails'\nimport CommissionsList from './components/CommissionsList'\n\nconst styles = {\n listViewButton: {\n marginLeft: 4\n }\n}\n\nconst useStyles = makeStyles(styles)\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`\nconst removeCoinFromOverride = crypto => override =>\n R.mergeRight(override, {\n cryptoCurrencies: R.without([crypto], override.cryptoCurrencies)\n })\n\nconst Commissions = ({ name: SCREEN_KEY }) => {\n const classes = useStyles()\n const [showMachines, setShowMachines] = useState(false)\n const [error, setError] = useState(null)\n const { data, loading } = useQuery(GET_DATA)\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n refetchQueries: () => ['getData'],\n onError: error => setError(error)\n })\n\n const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)\n const localeConfig =\n data?.config && fromNamespace(namespaces.LOCALE)(data.config)\n\n const currency = R.prop('fiatCurrency')(localeConfig)\n const overrides = R.prop('overrides')(config)\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 setError(null)\n return saveConfig({ variables: { config } })\n }\n\n const saveOverridesFromList = it => (_, override) => {\n const cryptoOverriden = R.path(['cryptoCurrencies', 0], override)\n\n const sameMachine = R.eqProps('machine', override)\n const notSameOverride = it => !R.eqProps('cryptoCurrencies', override, it)\n\n const filterMachine = R.filter(R.both(sameMachine, notSameOverride))\n const removeCoin = removeCoinFromOverride(cryptoOverriden)\n\n const machineOverrides = R.map(removeCoin)(filterMachine(it))\n\n const overrides = machineOverrides.concat(\n R.filter(it => !sameMachine(it), it)\n )\n\n const config = {\n commissions_overrides: R.prepend(override, overrides)\n }\n\n return saveConfig({ variables: { config } })\n }\n\n const labels = showMachines\n ? [\n {\n label: 'Override value',\n icon: \n
\n \n
\n {title}
\n\n
\n )}\n {children}\n \n {authorize && state !== OVERRIDE_AUTHORIZED && AuthorizeButton()}\n {reject && state !== OVERRIDE_REJECTED && RejectButton()}\n {edit && !isEditing && EditButton()}\n {confirm && isEditing && ConfirmButton()}\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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/button/data/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Data-icon---small\",\n transform: \"translate(0.500000, 0.500000)\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11,2.44444444 L11,5.5 C11,6.85002939 8.53756612,7.94444444 5.5,7.94444444 C2.521994,7.94444444 0.0939612041,6.81341452 1.11160464e-12,5.5 L0.00282594991,2.44444444\",\n id: \"oval-3\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11,5.5 L11,8.55555556 C11,9.90558494 8.53756612,11 5.5,11 C2.521994,11 0.0939612041,9.86897007 1.11160464e-12,8.55555556 L0.00282594991,5.5\",\n id: \"oval-2\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"oval-1\",\n cx: 5.5,\n cy: 2.44444444,\n rx: 5.5,\n ry: 2.44444444\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-9\",\n transform: \"translate(0.000000, 4.000000)\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#FFFFFF\",\n fill: \"#5F668A\",\n cx: 4,\n cy: 4,\n r: 3.5\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Path\",\n fill: \"#FFFFFF\",\n fillRule: \"nonzero\",\n points: \"4.33333333 3.66666667 6 3.66666667 6 4.33333333 4.33333333 4.33333333 4.33333333 6 3.66666667 6 3.66666667 4.33333333 2 4.33333333 2 3.66666667 3.66666667 3.66666667 3.66666667 2 4.33333333 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: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.4676bf59.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/button/data/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Data-icon---small\",\n transform: \"translate(1.500000, 0.500000)\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10,2 L10,4.77777778 C10,6.00507722 7.76142375,7 5,7 C2.29272181,7 0.0854192765,5.97179097 0,4.77777778 L0.00256904537,2\",\n id: \"oval-3\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10,5 L10,7.77777778 C10,9.00507722 7.76142375,10 5,10 C2.29272181,10 0.0854192765,8.97179097 0,7.77777778 L0.00256904537,5\",\n id: \"oval-2\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"oval-1\",\n cx: 5,\n cy: 2,\n rx: 5,\n ry: 2\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-9\",\n transform: \"translate(0.000000, 4.000000)\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#1B2559\",\n fill: \"#EBEFFF\",\n cx: 4,\n cy: 4,\n r: 3.5\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Path\",\n fill: \"#1B2559\",\n fillRule: \"nonzero\",\n points: \"4.33333333 3.66666667 6 3.66666667 6 4.33333333 4.33333333 4.33333333 4.33333333 6 3.66666667 6 3.66666667 4.33333333 2 4.33333333 2 3.66666667 3.66666667 3.66666667 3.66666667 2 4.33333333 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: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.cfe5467c.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/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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(\"g\", {\n id: \"icon/search/dark02\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group\",\n transform: \"translate(1.000000, 1.000000)\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.2771714,7.35325714 C14.2771714,11.1778286 11.1768857,14.2781143 7.35231429,14.2781143 C3.5286,14.2781143 0.428314286,11.1778286 0.428314286,7.35325714 C0.428314286,3.52868571 3.5286,0.4284 7.35231429,0.4284 C11.1768857,0.4284 14.2771714,3.52868571 14.2771714,7.35325714 Z\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 12.3331714,\n y1: 12.3342,\n x2: 17.5360286,\n y2: 17.5370571,\n id: \"Stroke-3\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/search/dark02\") : 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.eea12e4f.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 \n
\n \n
\n Type of entry
\n\n \n \n
\n )}\n {displayRequirementOptions && (\n Type of data
\n\n \n \n
\n )}\n \n )\n}\n\nconst ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {\n const classes = useStyles()\n\n const typeOfEntrySelected = selectedValues?.entryType\n const dataTypeSelected = selectedValues?.dataType\n const requirementSelected = selectedValues?.requirement\n\n const displayRequirements = typeOfEntrySelected === 'requirement'\n\n const isCustomInfoRequirement = requirementSelected === CUSTOM\n\n const updatedRequirementOptions = !R.isEmpty(customInfoRequirementOptions)\n ? updateRequirementOptions(requirementOptions)\n : requirementOptions\n\n const requirementName = displayRequirements\n ? R.find(R.propEq('code', requirementSelected))(updatedRequirementOptions)\n .display\n : ''\n\n const title = displayRequirements\n ? `Requirement ${requirementName}`\n : `Custom ${dataTypeSelected} entry`\n\n const elements = displayRequirements\n ? requirementElements[requirementSelected]\n : customElements[dataTypeSelected]\n\n const upload = displayRequirements\n ? requirementSelected === 'idCardPhoto' ||\n requirementSelected === 'frontCamera'\n : dataTypeSelected === 'file' || dataTypeSelected === 'image'\n\n return (\n <>\n Requirements
\n{title}
\n\n {!upload &&\n !isCustomInfoRequirement &&\n elements.options.map(({ label, name }) => (\n
\n {upload && (\n \n {children}\n {onClose && (\n \n \n )}\n
\n )\n}\n\nexport const InformativeDialog = memo(\n ({ title = '', open, onDissmised, disabled = false, data, ...props }) => {\n const classes = useStyles()\n\n const innerOnClose = () => {\n onDissmised()\n }\n\n return (\n \n \n \n
\n {title}
\n\n
\n ))}\n \n \n )\n})\n","import typographyStyles from 'src/components/typography/styles'\nimport { offColor } from 'src/styling/variables'\n\nconst { p } = typographyStyles\n\nexport default {\n label: {\n color: offColor,\n margin: [[0, 0, 6, 0]]\n },\n firstRow: {\n padding: [[8]],\n display: 'flex',\n flexDirection: 'column'\n },\n secondRow: {\n extend: p,\n display: 'flex',\n padding: [[8]],\n '& > div': {\n display: 'flex',\n flexDirection: 'column',\n '& > div': {\n height: 37,\n marginBottom: 15,\n marginRight: 55\n }\n }\n }\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport * as R from 'ramda'\nimport React, { memo, useState } from 'react'\n\nimport { Carousel } from 'src/components/Carousel'\nimport { Label1 } from 'src/components/typography'\n\nimport CopyToClipboard from '../../Transactions/CopyToClipboard'\n\nimport styles from './PhotosCarousel.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst PhotosCarousel = memo(({ photosData }) => {\n const classes = useStyles()\n const [currentIndex, setCurrentIndex] = useState(0)\n\n const Label = ({ children }) => {\n const classes = useStyles()\n return \n
\n \n \n \n {photosData && photosData[currentIndex]?.id}\n \n
\n )}\n \n
\n \n )\n})\n\nexport default PhotosCarousel\n","import ButtonBase from '@material-ui/core/ButtonBase'\nimport Paper from '@material-ui/core/Card'\nimport { makeStyles } from '@material-ui/core/styles'\nimport * as R from 'ramda'\nimport React, { memo, useState } from 'react'\n\nimport { InformativeDialog } from 'src/components/InformativeDialog'\nimport { Info2 } from 'src/components/typography'\nimport { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'\nimport { URI } from 'src/utils/apollo'\n\nimport styles from './PhotosCard.styles'\nimport PhotosCarousel from './PhotosCarousel'\n\nconst useStyles = makeStyles(styles)\n\nconst PhotosCard = memo(({ photosData }) => {\n const classes = useStyles()\n\n const [photosDialog, setPhotosDialog] = useState(false)\n\n const singlePhoto = R.head(photosData)\n\n return (\n <>\n \n
\n \n \n
\n {photosData && photosData[currentIndex]?.date}
\n \n \n
\n \n {!isFaceCustomerPhoto ? 'Acceptance of T&C' : 'Compliance scan'}\n
\n \n \n \n
\n ) : (\n \n {photosData.length} \n
\n \n
\n \n {name.length\n ? name\n : getFormattedPhone(R.path(['phone'])(customer), locale.country)}\n
\n\n {sideBarOptions?.map(({ Icon, InverseIcon, display, code }) => (\n onClick(code)}>\n
\n ))}\n \n )\n}\n\nexport default CustomerSidebar\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(\"rect\", {\n id: \"path-1\",\n x: 0,\n y: 0,\n width: 22,\n height: 22\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/delete/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\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(\"g\", {\n id: \"Background\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 9,\n y1: 9,\n x2: 9,\n y2: 18,\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n mask: \"url(#mask-2)\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 13,\n y1: 9,\n x2: 13,\n y2: 18,\n id: \"Stroke-2\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n mask: \"url(#mask-2)\"\n}), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-9\",\n mask: \"url(#mask-2)\",\n stroke: \"#FFFFFF\",\n strokeLinecap: \"round\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(1.000000, 1.000000)\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n strokeLinejoin: \"round\",\n points: \"2 5 4 20 16 20 18 5\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 0,\n y1: 4,\n x2: 20,\n y2: 4,\n id: \"Stroke-5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13,3 C13,1.343 11.657,0 10,0 C8.343,0 7,1.343 7,3\",\n id: \"Stroke-7\"\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.144118ff.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/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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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/button/replace/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 transform: \"translate(0.500000, 0.500000)\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.27636475,10.2264084 C2.67216087,9.96069246 2.10487152,9.58126145 1.60869691,9.087544 C-0.521488181,6.9675304 -0.538316861,3.54693703 1.57123953,1.44692357 C1.86137314,1.15837428 2.17625375,0.909794042 2.50930653,0.701182852\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"3.0943493 1.69429658 3.08837783 0.545717786 1.99994228 0\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\",\n transform: \"translate(8.999987, 5.500035) scale(-1, -1) translate(-8.999987, -5.500035) translate(6.999974, 0.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.27636475,10.2264084 C2.67216087,9.96069246 2.10487152,9.58126145 1.60869691,9.087544 C-0.521488181,6.9675304 -0.538316861,3.54693703 1.57123953,1.44692357 C1.86137314,1.15837428 2.17625375,0.909794042 2.50930653,0.701182852\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"3.0943493 1.69429658 3.08837783 0.545717786 1.99994228 3.80623901e-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 0 12 12\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.16f4b162.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(\"defs\", null, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"path-1\",\n points: \"0 21 21 21 21 0 0 0\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/save/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group\"\n}, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n points: \"20.5 20.5 0.5 20.5 0.5 0.5 16.75 0.5 20.5 4.25\"\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(\"g\", {\n id: \"Clip-4\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-5\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n mask: \"url(#mask-2)\",\n points: \"4.25 7.5 16.75 7.5 16.75 0.5 4.25 0.5\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n mask: \"url(#mask-2)\",\n cx: 11,\n cy: 14,\n r: 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: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.8ccc4767.svg\";\nexport { ForwardRef as ReactComponent };","import { tomato, spring4, comet } from 'src/styling/variables'\n\nexport default {\n label1: {\n display: 'flex',\n width: 85,\n justifyContent: 'right'\n },\n label1Pending: {\n color: comet\n },\n label1Rejected: {\n color: tomato\n },\n label1Accepted: {\n color: spring4\n },\n editButton: {\n marginTop: 20,\n display: 'flex',\n justifyContent: 'right'\n },\n deleteButton: {\n marginRight: 8\n },\n headerWrapper: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n height: 40\n },\n editingWrapper: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n marginTop: 20\n },\n replace: {\n marginRight: 5\n },\n input: {\n display: 'none'\n },\n button: {\n marginRight: 5\n },\n editingButtons: {\n display: 'flex',\n justifyContent: 'right'\n },\n card: {\n borderRadius: 10,\n marginRight: 15,\n marginBottom: 15\n },\n cardHeader: {\n display: 'flex',\n flexDirection: 'row',\n marginBottom: 15\n },\n editIcon: {\n marginTop: 5\n },\n cardIcon: {\n marginTop: 7\n },\n cardTitle: {\n margin: [[8, 15, 15, 15]]\n }\n}\n","import { CardContent, Card, Grid } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport { Form, Formik, Field as FormikField } from 'formik'\nimport * as R from 'ramda'\nimport { useState, React } from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport PromptWhenDirty from 'src/components/PromptWhenDirty'\nimport { MainStatus } from 'src/components/Status'\n// import { HoverableTooltip } from 'src/components/Tooltip'\nimport { ActionButton } from 'src/components/buttons'\nimport { Label1, P, H3 } from 'src/components/typography'\nimport {\n OVERRIDE_AUTHORIZED,\n OVERRIDE_REJECTED,\n OVERRIDE_PENDING\n} from 'src/pages/Customers/components/propertyCard'\nimport { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'\nimport { ReactComponent as DeleteReversedIcon } from 'src/styling/icons/action/delete/white.svg'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'\nimport { ReactComponent as EditReversedIcon } from 'src/styling/icons/action/edit/white.svg'\nimport { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/white.svg'\nimport { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/white.svg'\nimport { ReactComponent as CancelReversedIcon } from 'src/styling/icons/button/cancel/white.svg'\nimport { ReactComponent as DataReversedIcon } from 'src/styling/icons/button/data/white.svg'\nimport { ReactComponent as DataIcon } from 'src/styling/icons/button/data/zodiac.svg'\nimport { ReactComponent as ReplaceReversedIcon } from 'src/styling/icons/button/replace/white.svg'\nimport { ReactComponent as SaveReversedIcon } from 'src/styling/icons/circle buttons/save/white.svg'\nimport { comet } from 'src/styling/variables'\n\nimport styles from './EditableCard.styles.js'\n\nconst useStyles = makeStyles(styles)\n\nconst fieldStyles = {\n field: {\n position: 'relative',\n width: 280,\n height: 48,\n padding: [[0, 4, 4, 0]],\n marginTop: 2\n },\n label: {\n color: comet,\n margin: [[0, 0, 0, 0]]\n },\n notEditing: {\n display: 'flex',\n flexDirection: 'column',\n '& > p:first-child': {\n height: 16,\n lineHeight: '16px',\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 editing: {\n '& > div': {\n '& > input': {\n padding: 0,\n fontSize: 14\n }\n }\n },\n readOnlyLabel: {\n color: comet,\n margin: [[3, 0, 3, 0]]\n },\n readOnlyValue: {\n margin: 0\n }\n}\n\nconst fieldUseStyles = makeStyles(fieldStyles)\n\nconst EditableField = ({ editing, field, value, size, ...props }) => {\n const classes = fieldUseStyles()\n const classNames = {\n [classes.field]: true,\n [classes.notEditing]: !editing\n }\n\n return (\n \n {isSelected(code) ?
\n {display}\n \n {!editing && (\n <>\n {field.label} \n {field.label} \n
\n )\n}\n\nconst ReadOnlyField = ({ field, value, ...props }) => {\n const classes = fieldUseStyles()\n const classNames = {\n [classes.field]: true,\n [classes.notEditing]: true\n }\n\n return (\n <>\n {value}
\n \n )}\n {editing && (\n <>\n\n {field.label} \n
\n \n )\n}\n\nconst EditableCard = ({\n fields,\n save,\n authorize,\n hasImage,\n reject,\n state,\n title,\n titleIcon,\n children,\n validationSchema,\n initialValues,\n deleteEditedData,\n retrieveAdditionalData,\n hasAdditionalData = true\n}) => {\n const classes = useStyles()\n\n const [editing, setEditing] = useState(false)\n const [input, setInput] = useState(null)\n const [error, setError] = useState(null)\n\n const triggerInput = () => input.click()\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 const authorized =\n state === OVERRIDE_PENDING\n ? { label: 'Pending', type: 'neutral' }\n : state === OVERRIDE_REJECTED\n ? { label: 'Rejected', type: 'error' }\n : { label: 'Accepted', type: 'success' }\n\n return (\n {value}
\n\n \n \n {\n save(values)\n setEditing(false)\n }}\n onReset={() => {\n setEditing(false)\n setError(false)\n }}>\n {({ setFieldValue }) => (\n \n )}\n \n \n \n
\n )\n}\n\nexport default EditableCard\n","import * as R from 'ramda'\n\nconst ifNotNull = (value, valueIfNotNull) => {\n return R.isNil(value) ? '' : valueIfNotNull\n}\n\nexport { ifNotNull }\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport { Info3, Label1 } from 'src/components/typography'\nimport { comet } from 'src/styling/variables'\n\nconst useStyles = makeStyles({\n field: {\n height: 46\n },\n label: {\n color: comet,\n margin: [[0, 3]]\n },\n value: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n margin: 0,\n paddingLeft: 4\n }\n})\n\nconst Field = memo(({ label, display, size, className }) => {\n const classes = useStyles()\n\n return (\n \n
\n {children}\n \n {titleIcon}\n
\n {state && authorize && (\n {title}
\n {\n // TODO: Enable for next release\n /*\n
\n )}\n Transactions
\n\n
\n {hasData && \n {loading ? (\n
\n Loading
\n ) : hasData ? (\n ''\n ) : (\nNo transactions so far
\n )}\n\n {R.isEmpty(data) && (\n
\n \n )\n}\n\nexport default Upload\n","import { DialogActions, DialogContent, Dialog } from '@material-ui/core'\nimport Grid from '@material-ui/core/Grid'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { parse, format } from 'date-fns/fp'\nimport * as R from 'ramda'\nimport { useState, React } from 'react'\nimport * as Yup from 'yup'\n\nimport ImagePopper from 'src/components/ImagePopper'\nimport { FeatureButton, Button, IconButton } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\nimport { H3, Info3, H2 } from 'src/components/typography'\nimport {\n OVERRIDE_AUTHORIZED,\n OVERRIDE_REJECTED\n} from 'src/pages/Customers/components/propertyCard'\nimport { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg'\nimport { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg'\nimport { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'\nimport { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/comet.svg'\nimport { ReactComponent as CustomerListViewReversedIcon } from 'src/styling/icons/circle buttons/customer-list-view/white.svg'\nimport { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg'\nimport { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg'\nimport { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg'\nimport { URI } from 'src/utils/apollo'\nimport { onlyFirstToUpper } from 'src/utils/string'\n\nimport styles from './CustomerData.styles.js'\nimport { EditableCard } from './components'\nimport {\n customerDataElements,\n customerDataSchemas,\n formatDates,\n getFormattedPhone\n} from './helper.js'\n\nconst useStyles = makeStyles(styles)\n\nconst IMAGE_WIDTH = 165\nconst IMAGE_HEIGHT = 32\nconst POPUP_IMAGE_WIDTH = 360\nconst POPUP_IMAGE_HEIGHT = 240\n\nconst Photo = ({ show, src }) => {\n const classes = useStyles({ width: IMAGE_WIDTH })\n\n return (\n <>\n {show ? (\n \n \n
\n )}\n {!R.isEmpty(data) && isImage && (\n \n {isImage ? (\n {`Drag and drop ${\n isImage ? 'an image' : 'a file'\n } or click to open the explorer`} \n
\n \n 
\n
\n )}\n {!R.isEmpty(data) && !isImage && (\n \n
\n )}\n {data.preview}
\n\n
\n )}\n \n )\n}\n\nconst CustomerData = ({\n locale,\n customer,\n updateCustomer,\n replacePhoto,\n editCustomer,\n deleteEditedData,\n updateCustomRequest,\n authorizeCustomRequest,\n updateCustomEntry,\n retrieveAdditionalData\n}) => {\n const classes = useStyles()\n const [listView, setListView] = useState(false)\n const [retrieve, setRetrieve] = useState(false)\n\n const idData = R.path(['idCardData'])(customer)\n const rawExpirationDate = R.path(['expirationDate'])(idData)\n const rawDob = R.path(['dateOfBirth'])(idData)\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 const sortByName = R.sortBy(\n R.compose(R.toLower, R.path(['customInfoRequest', 'customRequest', 'name']))\n )\n\n const customFields = []\n const customRequirements = []\n const customInfoRequests = sortByName(\n R.path(['customInfoRequests'])(customer) ?? []\n )\n\n const phone = R.path(['phone'])(customer)\n const smsData = R.path(['subscriberInfo', 'result'])(customer)\n\n const isEven = elem => elem % 2 === 0\n\n const getVisibleCards = R.filter(elem => elem.isAvailable)\n\n const initialValues = {\n idCardData: {\n firstName: R.path(['firstName'])(idData) ?? '',\n lastName: R.path(['lastName'])(idData) ?? '',\n documentNumber: R.path(['documentNumber'])(idData) ?? '',\n dateOfBirth:\n (rawDob &&\n format('yyyy-MM-dd')(parse(new Date(), 'yyyyMMdd', rawDob))) ??\n '',\n gender: R.path(['gender'])(idData) ?? '',\n country: R.path(['country'])(idData) ?? '',\n expirationDate:\n (rawExpirationDate &&\n format('yyyy-MM-dd')(\n parse(new Date(), 'yyyyMMdd', rawExpirationDate)\n )) ??\n ''\n },\n usSsn: {\n usSsn: customer.usSsn ?? ''\n },\n frontCamera: {\n frontCamera: null\n },\n idCardPhoto: {\n idCardPhoto: null\n },\n smsData: {\n phoneNumber: getFormattedPhone(phone, locale.country)\n }\n }\n\n const smsDataElements = [\n {\n name: 'phoneNumber',\n label: 'Phone number',\n component: TextInput,\n editable: false\n }\n ]\n\n const smsDataSchema = {\n smsData: Yup.lazy(values => {\n const additionalData = R.omit(['phoneNumber'])(values)\n const fields = R.keys(additionalData)\n if (R.length(fields) === 2) {\n return Yup.object().shape({\n [R.head(fields)]: Yup.string().required(),\n [R.last(fields)]: Yup.string().required()\n })\n }\n })\n }\n\n const cards = [\n {\n fields: customerDataElements.idCardData,\n title: 'ID Scan',\n titleIcon: \n \n
\n )\n}\n\nconst RetrieveDataDialog = ({\n setRetrieve,\n retrieveAdditionalData,\n open,\n props\n}) => {\n const classes = useStyles()\n\n return (\n \n setListView(false)}\n />\n setListView(true)}>\n \n )}\n
\n {'Customer data'}
\n {// TODO: Remove false condition for next release\n false && (\n <>\n\n {!listView && customer && (\n \n \n {visibleCards.map((elem, idx) => {\n return isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n {visibleCards.map((elem, idx) => {\n return !isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n )}\n {!R.isEmpty(customFields) && (\n
\n \n Custom data entry\n \n \n {customFields.map((elem, idx) => {\n return isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n {customFields.map((elem, idx) => {\n return !isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n
\n )}\n {!R.isEmpty(customRequirements) && (\n \n Custom requirements\n \n \n {customRequirements.map((elem, idx) => {\n return isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n {customRequirements.map((elem, idx) => {\n return !isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n
\n )}\n \n setRetrieve(false)}>\n
\n {'Retrieve API data from Twilio'}
\n setOpenModal(true)}>\n \n \n
\n )\n}\n\nexport default NewNoteCard\n","import { spacer } from 'src/styling/variables'\n\nconst styles = {\n form: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n '& > *': {\n marginTop: 20\n },\n '& > *:last-child': {\n marginTop: 'auto'\n }\n },\n submit: {\n margin: [['auto', 0, 0, 'auto']]\n },\n footer: {\n display: 'flex',\n flexDirection: 'row',\n margin: [['auto', 0, spacer * 3, 0]]\n }\n}\n\nexport default styles\n","import { makeStyles } from '@material-ui/core/styles'\nimport { Form, Formik, Field } from 'formik'\nimport { React } from 'react'\nimport * as Yup from 'yup'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport { Button } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\n\nimport styles from './NewNoteModal.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst initialValues = {\n title: '',\n content: ''\n}\n\nconst validationSchema = Yup.object().shape({\n title: Yup.string()\n .required()\n .trim()\n .max(25),\n content: Yup.string().required()\n})\n\nconst NewNoteModal = ({ showModal, onClose, onSubmit, errorMsg }) => {\n const classes = useStyles()\n\n return (\n <>\n Add new
\n\n \n )\n }, fragments)\n}\n\nconst NoteCard = ({ note, deleteNote, handleClick, timezone }) => {\n const classes = useStyles()\n\n return (\n
\n handleClick(note)}>\n \n
\n )\n}\n\nexport default NoteCard\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(\"polygon\", {\n id: \"path-1\",\n points: \"0 21 21 21 21 0 0 0\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/save/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-10\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-6\"\n}, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-1\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n points: \"20.5 20.5 0.5 20.5 0.5 0.5 16.75 0.5 20.5 4.25\"\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(\"g\", {\n id: \"Clip-4\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-5\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n mask: \"url(#mask-2)\",\n points: \"4.25 7.5 16.75 7.5 16.75 0.5 4.25 0.5\"\n}))), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n cx: 11,\n cy: 14,\n r: 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: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.9be6e999.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles, Paper } from '@material-ui/core'\nimport { formatDurationWithOptions, intervalToDuration } from 'date-fns/fp'\nimport { Form, Formik, Field } from 'formik'\nimport { React, useRef } from 'react'\nimport * as Yup from 'yup'\n\nimport { ActionButton } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\nimport { P } from 'src/components/typography'\nimport { ReactComponent as CancelIconInverse } from 'src/styling/icons/button/cancel/white.svg'\nimport { ReactComponent as CancelIcon } from 'src/styling/icons/button/cancel/zodiac.svg'\nimport { ReactComponent as SaveIconInverse } from 'src/styling/icons/circle buttons/save/white.svg'\nimport { ReactComponent as SaveIcon } from 'src/styling/icons/circle buttons/save/zodiac.svg'\nimport { toTimezone } from 'src/utils/timezones'\n\nimport styles from './NoteCard.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst NoteEdit = ({ note, cancel, edit, timezone }) => {\n const formRef = useRef()\n const classes = useStyles()\n\n const validationSchema = Yup.object().shape({\n content: Yup.string()\n })\n\n const initialValues = {\n content: note.content\n }\n\n return (\n \n
\n \n
\n {note?.title}
\n{formatDate(note?.created, timezone, 'yyyy-MM-dd')}
\n\n {\n e.stopPropagation()\n deleteNote({ noteId: note.id })\n }}\n />\n
\n \n {formatContent(note?.content)}\n
\n\n
\n \n {`Last edited `}\n {formatDurationWithOptions(\n { delimited: ', ' },\n intervalToDuration({\n start: toTimezone(new Date(note.lastEditedAt), timezone),\n end: toTimezone(new Date(), timezone)\n })\n )}\n {` ago`}\n
\n\n \n {`Cancel`}\n \n \n {`Save changes`}\n \n formRef.current.setFieldValue('content', '')}>\n {`Clear content`}\n \n
\n \n
\n )\n}\n\nexport default CustomerNotes\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(\"g\", {\n id: \"icon/ID/photo/new/comet\",\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: \"M12,14 C9.7912,14 8,12.2088 8,10 C8,7.7912 9.7912,6 12,6 C14.2088,6 16,7.7912 16,10 C16,12.2088 14.2088,14 12,14 Z M16.7142857,3.4 L14.3571429,1 L9.64285714,1 L7.28571429,3.4 L1,3.4 L1,17 L23,17 L23,3.4 L16.7142857,3.4 Z\",\n id: \"Stroke-1\",\n stroke: \"#5F668A\",\n strokeWidth: 1.6\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: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/photo/new/comet\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgComet);\nexport default __webpack_public_path__ + \"static/media/comet.8877f6c3.svg\";\nexport { ForwardRef as ReactComponent };","const styles = {\n header: {\n display: 'flex',\n flexDirection: 'row'\n },\n title: {\n marginTop: 7,\n marginRight: 24,\n marginBottom: 32\n },\n photosChipList: {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap'\n },\n image: {\n objectFit: 'cover',\n objectPosition: 'center',\n width: 224,\n height: 200,\n borderTopLeftRadius: 4,\n borderTopRightRadius: 4\n },\n photoCardChip: {\n margin: [[0, 16, 0, 0]]\n },\n footer: {\n display: 'flex',\n flexDirection: 'row',\n margin: [[8, 0, 0, 8]]\n },\n date: {\n margin: [[0, 0, 8, 12]]\n }\n}\n\nexport default styles\n","import { makeStyles, Paper } from '@material-ui/core'\nimport { format } from 'date-fns/fp'\nimport * as R from 'ramda'\nimport { React, useState } from 'react'\n\nimport { InformativeDialog } from 'src/components/InformativeDialog'\nimport { Label2, H3 } from 'src/components/typography'\nimport { ReactComponent as CameraIcon } from 'src/styling/icons/ID/photo/comet.svg'\nimport { URI } from 'src/utils/apollo'\n\nimport styles from './CustomerPhotos.styles'\nimport PhotosCarousel from './components/PhotosCarousel'\n\nconst useStyles = makeStyles(styles)\n\nconst CustomerPhotos = ({ photosData }) => {\n const classes = useStyles()\n\n const [photosDialog, setPhotosDialog] = useState(false)\n const [photoClickedIndex, setPhotoClickIndex] = useState(null)\n const orderedPhotosData = !R.isNil(photoClickedIndex)\n ? R.compose(R.flatten, R.reverse, R.splitAt(photoClickedIndex))(photosData)\n : photosData\n\n return (\n \n
\n {R.isNil(editing) && (\n {'Notes'}
\n\n
\n )}\n {!R.isNil(editing) && (\n \n
\n )\n}\n\nexport const PhotoCard = ({\n idx,\n date,\n src,\n setPhotosDialog,\n setPhotoClickIndex\n}) => {\n const classes = useStyles()\n\n return (\n \n
\n {'Photos & files'}
\n\n {photosData.map((elem, idx) => (\n
\n \n \n {format('yyyy-MM-dd', new Date(date))}\n \n
\n \n )\n}\n\nexport default CustomerPhotos\n","import { comet, subheaderColor } 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 actionButton: {\n margin: [[0, 0, 4, 0]],\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center'\n },\n actionBar: {\n display: 'flex',\n flexDirection: 'column',\n width: 219\n },\n panels: {\n display: 'flex'\n },\n rightSidePanel: {\n display: 'block',\n width: 1100\n },\n leftSidePanel: {\n width: 300,\n '& > *': {\n marginBottom: 25\n },\n '& > *:last-child': {\n marginBottom: 0\n },\n '& > *:first-child': {\n marginBottom: 50\n }\n },\n userStatusAction: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n backgroundColor: subheaderColor,\n borderRadius: 8,\n padding: [[0, 5]]\n }\n}\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles, Breadcrumbs, Box } from '@material-ui/core'\nimport NavigateNextIcon from '@material-ui/icons/NavigateNext'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { memo, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\n\nimport { ActionButton } from 'src/components/buttons'\nimport { Switch } from 'src/components/inputs'\nimport { Label1, Label2 } from 'src/components/typography'\nimport {\n OVERRIDE_AUTHORIZED,\n OVERRIDE_REJECTED\n} from 'src/pages/Customers/components/propertyCard'\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 BlockReversedIcon } from 'src/styling/icons/button/block/white.svg'\nimport { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/zodiac.svg'\nimport { ReactComponent as DataReversedIcon } from 'src/styling/icons/button/data/white.svg'\nimport { ReactComponent as DataIcon } from 'src/styling/icons/button/data/zodiac.svg'\n// TODO: Enable for next release\n// import { ReactComponent as DiscountReversedIcon } from 'src/styling/icons/button/discount/white.svg'\n// import { ReactComponent as Discount } from 'src/styling/icons/button/discount/zodiac.svg'\nimport { fromNamespace, namespaces } from 'src/utils/config'\n\nimport CustomerData from './CustomerData'\nimport CustomerNotes from './CustomerNotes'\nimport CustomerPhotos from './CustomerPhotos'\nimport styles from './CustomerProfile.styles'\nimport {\n CustomerDetails,\n TransactionsList,\n CustomerSidebar,\n Wizard\n} from './components'\nimport { getFormattedPhone, getName, formatPhotosData } from './helper'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_CUSTOMER = gql`\n query customer($customerId: ID!) {\n config\n customer(customerId: $customerId) {\n id\n authorizedOverride\n frontCameraPath\n frontCameraAt\n frontCameraOverride\n phone\n isAnonymous\n smsOverride\n idCardData\n idCardDataOverride\n idCardDataExpiration\n idCardPhotoPath\n idCardPhotoOverride\n usSsn\n usSsnOverride\n sanctions\n sanctionsAt\n sanctionsOverride\n totalTxs\n totalSpent\n lastActive\n lastTxFiat\n lastTxFiatCode\n lastTxClass\n daysSuspended\n isSuspended\n isTestCustomer\n subscriberInfo\n phoneOverride\n customFields {\n id\n label\n value\n }\n notes {\n id\n customerId\n title\n content\n created\n lastEditedAt\n }\n transactions {\n txClass\n id\n fiat\n fiatCode\n cryptoAtoms\n cryptoCode\n created\n machineName\n errorMessage: error\n error: errorCode\n txCustomerPhotoAt\n txCustomerPhotoPath\n }\n customInfoRequests {\n customerId\n override\n overrideBy\n overrideAt\n customerData\n customInfoRequest {\n id\n enabled\n customRequest\n }\n }\n }\n }\n`\n\nconst SET_CUSTOMER = gql`\n mutation setCustomer($customerId: ID!, $customerInput: CustomerInput) {\n setCustomer(customerId: $customerId, customerInput: $customerInput) {\n id\n authorizedOverride\n frontCameraPath\n frontCameraOverride\n phone\n smsOverride\n idCardData\n idCardDataOverride\n idCardDataExpiration\n idCardPhotoPath\n idCardPhotoOverride\n usSsn\n usSsnOverride\n sanctions\n sanctionsAt\n sanctionsOverride\n totalTxs\n totalSpent\n lastActive\n lastTxFiat\n lastTxFiatCode\n lastTxClass\n subscriberInfo\n phoneOverride\n }\n }\n`\nconst EDIT_CUSTOMER = gql`\n mutation editCustomer($customerId: ID!, $customerEdit: CustomerEdit) {\n editCustomer(customerId: $customerId, customerEdit: $customerEdit) {\n id\n idCardData\n usSsn\n }\n }\n`\n\nconst REPLACE_CUSTOMER_PHOTO = gql`\n mutation replacePhoto(\n $customerId: ID!\n $photoType: String\n $newPhoto: Upload\n ) {\n replacePhoto(\n customerId: $customerId\n photoType: $photoType\n newPhoto: $newPhoto\n ) {\n id\n newPhoto\n photoType\n }\n }\n`\n\nconst DELETE_EDITED_CUSTOMER = gql`\n mutation deleteEditedData($customerId: ID!, $customerEdit: CustomerEdit) {\n deleteEditedData(customerId: $customerId, customerEdit: $customerEdit) {\n id\n frontCameraPath\n idCardData\n idCardPhotoPath\n usSsn\n }\n }\n`\n\nconst SET_AUTHORIZED_REQUEST = gql`\n mutation setAuthorizedCustomRequest(\n $customerId: ID!\n $infoRequestId: ID!\n $override: String!\n ) {\n setAuthorizedCustomRequest(\n customerId: $customerId\n infoRequestId: $infoRequestId\n override: $override\n )\n }\n`\n\nconst SET_CUSTOMER_CUSTOM_INFO_REQUEST = gql`\n mutation setCustomerCustomInfoRequest(\n $customerId: ID!\n $infoRequestId: ID!\n $data: JSON!\n ) {\n setCustomerCustomInfoRequest(\n customerId: $customerId\n infoRequestId: $infoRequestId\n data: $data\n )\n }\n`\n\nconst CREATE_NOTE = gql`\n mutation createCustomerNote(\n $customerId: ID!\n $title: String!\n $content: String!\n ) {\n createCustomerNote(\n customerId: $customerId\n title: $title\n content: $content\n )\n }\n`\n\nconst DELETE_NOTE = gql`\n mutation deleteCustomerNote($noteId: ID!) {\n deleteCustomerNote(noteId: $noteId)\n }\n`\n\nconst EDIT_NOTE = gql`\n mutation editCustomerNote($noteId: ID!, $newContent: String!) {\n editCustomerNote(noteId: $noteId, newContent: $newContent)\n }\n`\n\nconst ENABLE_TEST_CUSTOMER = gql`\n mutation enableTestCustomer($customerId: ID!) {\n enableTestCustomer(customerId: $customerId)\n }\n`\n\nconst DISABLE_TEST_CUSTOMER = gql`\n mutation disableTestCustomer($customerId: ID!) {\n disableTestCustomer(customerId: $customerId)\n }\n`\n\nconst GET_DATA = gql`\n query getData {\n config\n }\n`\n\nconst SET_CUSTOM_ENTRY = gql`\n mutation addCustomField($customerId: ID!, $label: String!, $value: String!) {\n addCustomField(customerId: $customerId, label: $label, value: $value)\n }\n`\n\nconst EDIT_CUSTOM_ENTRY = gql`\n mutation saveCustomField($customerId: ID!, $fieldId: ID!, $value: String!) {\n saveCustomField(customerId: $customerId, fieldId: $fieldId, value: $value)\n }\n`\n\nconst GET_ACTIVE_CUSTOM_REQUESTS = gql`\n query customInfoRequests($onlyEnabled: Boolean) {\n customInfoRequests(onlyEnabled: $onlyEnabled) {\n id\n customRequest\n }\n }\n`\n\nconst CustomerProfile = memo(() => {\n const history = useHistory()\n\n const [showCompliance, setShowCompliance] = useState(false)\n const [wizard, setWizard] = useState(false)\n const [error] = useState(null)\n const [clickedItem, setClickedItem] = useState('overview')\n const { id: customerId } = useParams()\n\n const {\n data: customerResponse,\n refetch: getCustomer,\n loading: customerLoading\n } = useQuery(GET_CUSTOMER, {\n variables: { customerId }\n })\n\n const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)\n\n const { data: activeCustomRequests } = useQuery(GET_ACTIVE_CUSTOM_REQUESTS, {\n variables: {\n onlyEnabled: true\n }\n })\n\n const [setCustomEntry] = useMutation(SET_CUSTOM_ENTRY, {\n onCompleted: () => getCustomer()\n })\n\n const [editCustomEntry] = useMutation(EDIT_CUSTOM_ENTRY, {\n onCompleted: () => getCustomer()\n })\n\n const [replaceCustomerPhoto] = useMutation(REPLACE_CUSTOMER_PHOTO, {\n onCompleted: () => getCustomer()\n })\n\n const [editCustomerData] = useMutation(EDIT_CUSTOMER, {\n onCompleted: () => getCustomer()\n })\n\n const [deleteCustomerEditedData] = useMutation(DELETE_EDITED_CUSTOMER, {\n onCompleted: () => getCustomer()\n })\n\n const [setCustomer] = useMutation(SET_CUSTOMER, {\n onCompleted: () => getCustomer()\n })\n\n const [authorizeCustomRequest] = useMutation(SET_AUTHORIZED_REQUEST, {\n onCompleted: () => getCustomer()\n })\n\n const [setCustomerCustomInfoRequest] = useMutation(\n SET_CUSTOMER_CUSTOM_INFO_REQUEST,\n {\n onCompleted: () => getCustomer()\n }\n )\n\n const [createNote] = useMutation(CREATE_NOTE, {\n onCompleted: () => getCustomer()\n })\n\n const [deleteNote] = useMutation(DELETE_NOTE, {\n onCompleted: () => getCustomer()\n })\n\n const [editNote] = useMutation(EDIT_NOTE, {\n onCompleted: () => getCustomer()\n })\n\n const saveCustomEntry = it => {\n setCustomEntry({\n variables: {\n customerId,\n label: it.title,\n value: it.data\n }\n })\n setWizard(null)\n }\n\n const updateCustomEntry = it => {\n editCustomEntry({\n variables: {\n customerId,\n fieldId: it.fieldId,\n value: it.value\n }\n })\n }\n\n const [enableTestCustomer] = useMutation(ENABLE_TEST_CUSTOMER, {\n variables: { customerId },\n onCompleted: () => getCustomer()\n })\n\n const [disableTestCustomer] = useMutation(DISABLE_TEST_CUSTOMER, {\n variables: { customerId },\n onCompleted: () => getCustomer()\n })\n\n const updateCustomer = it =>\n setCustomer({\n variables: {\n customerId,\n customerInput: it\n }\n })\n\n const replacePhoto = it => {\n replaceCustomerPhoto({\n variables: {\n customerId,\n newPhoto: it.newPhoto,\n photoType: it.photoType\n }\n })\n setWizard(null)\n }\n\n const editCustomer = it => {\n editCustomerData({\n variables: {\n customerId,\n customerEdit: it\n }\n })\n setWizard(null)\n }\n\n const deleteEditedData = it =>\n deleteCustomerEditedData({\n variables: {\n customerId,\n customerEdit: it\n }\n })\n\n const createCustomerNote = it =>\n createNote({\n variables: {\n customerId,\n title: it.title,\n content: it.content\n }\n })\n\n const deleteCustomerNote = it =>\n deleteNote({\n variables: {\n noteId: it.noteId\n }\n })\n\n const editCustomerNote = it =>\n editNote({\n variables: {\n noteId: it.noteId,\n newContent: it.newContent\n }\n })\n\n const retrieveAdditionalData = () =>\n setCustomer({\n variables: {\n customerId,\n customerInput: {\n subscriberInfo: true\n }\n }\n })\n\n const onClickSidebarItem = code => setClickedItem(code)\n\n const configData = R.path(['config'])(customerResponse) ?? []\n const locale = configData && fromNamespace(namespaces.LOCALE, configData)\n const customerData = R.path(['customer'])(customerResponse) ?? []\n const rawTransactions = R.path(['transactions'])(customerData) ?? []\n const sortedTransactions = R.sort(R.descend(R.prop('cryptoAtoms')))(\n rawTransactions\n )\n const name = getName(customerData)\n const blocked =\n R.path(['authorizedOverride'])(customerData) === OVERRIDE_REJECTED\n\n const isSuspended = customerData.isSuspended\n const isCustomerData = clickedItem === 'customerData'\n const isOverview = clickedItem === 'overview'\n const isNotes = clickedItem === 'notes'\n const isPhotos = clickedItem === 'photos'\n\n const frontCameraData = R.pick(['frontCameraPath', 'frontCameraAt'])(\n customerData\n )\n const txPhotosData =\n sortedTransactions &&\n R.map(R.pick(['id', 'txCustomerPhotoPath', 'txCustomerPhotoAt']))(\n sortedTransactions\n )\n\n const photosData = formatPhotosData(R.append(frontCameraData, txPhotosData))\n\n const loading = customerLoading || configLoading\n\n const timezone = R.path(['config', 'locale_timezone'], configResponse)\n\n const customInfoRequirementOptions =\n activeCustomRequests?.customInfoRequests?.map(it => ({\n value: it.id,\n display: it.customRequest.name\n })) ?? []\n\n const classes = useStyles()\n\n return (\n <>\n \n setWizard(null)}\n customInfoRequirementOptions={customInfoRequirementOptions}\n />\n )}\n
\n \n )\n})\n\nexport default CustomerProfile\n","import baseButtonStyles from 'src/components/buttons/BaseButton.styles'\nimport { bySize, bold } from 'src/styling/helpers'\nimport { zircon, comet, primaryColor } from 'src/styling/variables'\n\nconst { baseButton } = baseButtonStyles\n\nconst searchBoxBorderRadius = baseButton.height / 2\nconst searchBoxHeight = 32\nconst popupBorderRadiusFocus = baseButton.height / 4\n\nconst hoverColor = 'rgba(0, 0, 0, 0.08)'\nconst boxShadow = `0 4px 4px 0 ${hoverColor}`\n\nconst styles = {\n size: ({ size }) => ({\n marginTop: size === 'lg' ? 0 : 2,\n ...bySize(size)\n }),\n bold,\n autocomplete: {\n '&[data-focus=\"true\"]': {\n backgroundColor: hoverColor\n }\n },\n popup: {\n display: 'flex',\n flexDirection: 'column',\n borderRadius: [[0, 0, popupBorderRadiusFocus, popupBorderRadiusFocus]],\n backgroundColor: zircon,\n boxShadow\n },\n separator: {\n width: '88%',\n height: 1,\n margin: '0 auto',\n border: 'solid 0.5px',\n borderColor: comet\n },\n item: {\n display: 'flex',\n flexDirection: 'row',\n width: '100%',\n height: 36,\n alignItems: 'center'\n },\n itemLabel: {\n margin: [0],\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n },\n itemType: {\n marginLeft: 'auto',\n fontSize: 12,\n color: comet,\n margin: [0]\n },\n input: {\n display: 'flex',\n flex: 1,\n width: 273,\n padding: [[8, 12]],\n alignItems: 'center',\n height: searchBoxHeight,\n borderRadius: searchBoxBorderRadius,\n backgroundColor: zircon,\n color: primaryColor\n },\n inputWithPopup: {\n borderRadius: [[popupBorderRadiusFocus, popupBorderRadiusFocus, 0, 0]],\n boxShadow\n },\n iconButton: {\n marginRight: 12\n }\n}\n\nexport default styles\n","import InputBase from '@material-ui/core/InputBase'\nimport Paper from '@material-ui/core/Paper'\nimport { makeStyles } from '@material-ui/core/styles'\nimport MAutocomplete from '@material-ui/lab/Autocomplete'\nimport classnames from 'classnames'\nimport React, { memo, useState } from 'react'\n\nimport { P } from 'src/components/typography'\nimport { ReactComponent as SearchIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg'\n\nimport styles from './SearchBox.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst SearchBox = memo(\n ({\n loading = false,\n filters = [],\n options = [],\n inputPlaceholder = '',\n size,\n onChange,\n ...props\n }) => {\n const classes = useStyles({ size })\n\n const [popupOpen, setPopupOpen] = useState(false)\n\n const inputClasses = {\n [classes.input]: true,\n [classes.inputWithPopup]: popupOpen\n }\n\n const innerOnChange = filters => onChange(filters)\n\n return (\n \n {!loading && !customerData.isAnonymous && (\n <>\n code === clickedItem}\n onClick={onClickSidebarItem}\n />\n
\n \n Actions \n
\n \n setWizard(true)}>\n {`Manual data entry`}\n \n {/* {}}>\n {`Add individual discount`}\n */}\n {isSuspended && (\n \n updateCustomer({\n suspendedUntil: null\n })\n }>\n {`Unsuspend customer`}\n \n )}\n \n updateCustomer({\n authorizedOverride: blocked\n ? OVERRIDE_AUTHORIZED\n : OVERRIDE_REJECTED\n })\n }>\n {`${blocked ? 'Authorize' : 'Block'} customer`}\n \n
\n \n \n {`Special user status`}\n \n
\n \n )}\n \n
\n \n \n R.path(['isTestCustomer'])(customerData)\n ? disableTestCustomer()\n : enableTestCustomer()\n }\n />\n {`Test user`}\n
\n \n {isOverview && (\n
\n {wizard && (\n \n \n setShowCompliance(!showCompliance)}\n />\n \n
\n )}\n {isCustomerData && (\n \n
\n \n \n
\n )}\n {isNotes && (\n \n \n
\n )}\n {isPhotos && (\n \n
\n )}\n \n
\n )}\n autoHighlight\n disableClearable\n clearOnEscape\n multiple\n filterSelectedOptions\n getOptionSelected={(option, value) => option.type === value.type}\n PaperComponent={({ children }) => (\n {it.value}
\n{it.type}
\n{'Filters:'}
\n\n
\n \n )\n}\n\nexport default SearchFilter\n","import { makeStyles } from '@material-ui/core/styles'\nimport { format } from 'date-fns/fp'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { MainStatus } from 'src/components/Status'\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'\n\nimport styles from './CustomersList.styles'\nimport { getAuthorizedStatus, getFormattedPhone, getName } from './helper'\n\nconst useStyles = makeStyles(styles)\n\nconst CustomersList = ({\n data,\n locale,\n onClick,\n loading,\n triggers,\n customRequests\n}) => {\n const classes = useStyles()\n\n const elements = [\n {\n header: 'Phone',\n width: 199,\n view: it => getFormattedPhone(it.phone, locale.country)\n },\n {\n header: 'Name',\n width: 241,\n view: getName\n },\n {\n header: 'Total TXs',\n width: 126,\n textAlign: 'right',\n view: it => `${Number.parseInt(it.totalTxs)}`\n },\n {\n header: 'Total spent',\n width: 152,\n textAlign: 'right',\n view: it =>\n `${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode ?? ''}`\n },\n {\n header: 'Last active',\n width: 133,\n view: it =>\n (it.lastActive && format('yyyy-MM-dd', new Date(it.lastActive))) ?? ''\n },\n {\n header: 'Last transaction',\n width: 161,\n textAlign: 'right',\n view: it => {\n const hasLastTx = !R.isNil(it.lastTxFiatCode)\n const LastTxIcon = it.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon\n const lastIcon = \n {filters.map((f, idx) => (\n onFilterDelete(f)}\n deleteIcon={
\n \n {\n {`${entries ??\n 0} entries`} \n }\n \n Delete filters\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, mono } = 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 mono: {\n extend: mono,\n width: 375,\n margin: `${spacer * 1.5}px ${spacer * 3}px`\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 { format } from 'date-fns/fp'\nimport gql from 'graphql-tag'\nimport { utils as coinUtils } from 'lamassu-coins'\nimport QRCode from 'qrcode.react'\nimport * as R from 'ramda'\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 Label1,\n Label3\n} from 'src/components/typography'\nimport CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'\nimport { primaryColor } from 'src/styling/variables'\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 coinUtils.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, loading } = useQuery(GET_FUNDING)\n const funding = R.path(['funding'])(fundingResponse) ?? []\n\n if (funding.length && !selected) {\n setSelected(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(funding)\n const signIfPositive = num => (num >= 0 ? '+' : '')\n\n return (\n <>\n {it.display}
\n {!it.errorMsg && (\n <>\n \n {formatNumber(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 loading={loading}>\n {funding.length && (\n
\n \n )\n}\n\nexport default Funding\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 xmlns: \"http://www.w3.org/2000/svg\",\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: \"#0AC18E\",\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 xmlns: \"http://www.w3.org/2000/svg\",\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.ed917caa.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 xmlns: \"http://www.w3.org/2000/svg\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\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(\"path\", {\n d: \"M127.998 0C57.318 0 0 57.317 0 127.999c0 14.127 2.29 27.716 6.518 40.43H44.8V60.733l83.2 83.2 83.198-83.2v107.695h38.282c4.231-12.714 6.521-26.303 6.521-40.43C256 57.314 198.681 0 127.998 0\",\n fill: \"#F60\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M108.867 163.062l-36.31-36.311v67.765H18.623c22.47 36.863 63.051 61.48 109.373 61.48s86.907-24.617 109.374-61.48h-53.933V126.75l-36.31 36.31-19.13 19.129-19.128-19.128h-.002z\",\n fill: \"#4C4C4C\"\n});\n\nfunction SvgIconMoneroColour(_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: 2500,\n height: 2500,\n viewBox: \"0 0 256 256\",\n xmlns: \"http://www.w3.org/2000/svg\",\n preserveAspectRatio: \"xMidYMid\",\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(SvgIconMoneroColour);\nexport default __webpack_public_path__ + \"static/media/icon-monero-colour.650b7bd1.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 d: \"M1000 0c552.26 0 1000 447.74 1000 1000s-447.76 1000-1000 1000S0 1552.38 0 1000 447.68 0 1000 0\",\n fill: \"#53ae94\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1123.42 866.76V718h340.18V491.34H537.28V718H877.5v148.64C601 879.34 393.1 934.1 393.1 999.7s208 120.36 484.4 133.14v476.5h246V1132.8c276-12.74 483.48-67.46 483.48-133s-207.48-120.26-483.48-133m0 225.64v-.12c-6.94.44-42.6 2.58-122 2.58-63.48 0-108.14-1.8-123.88-2.62v.2C633.34 1081.66 451 1039.12 451 988.22S633.36 894.84 877.62 884v166.1c16 1.1 61.76 3.8 124.92 3.8 75.86 0 114-3.16 121-3.8V884c243.8 10.86 425.72 53.44 425.72 104.16s-182 93.32-425.72 104.18\",\n fill: \"#fff\"\n});\n\nfunction SvgIconTetherColour(_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 xmlns: \"http://www.w3.org/2000/svg\",\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(SvgIconTetherColour);\nexport default __webpack_public_path__ + \"static/media/icon-tether-colour.92d7fda4.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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 MoneroLogo } from 'src/styling/logos/icon-monero-colour.svg'\nimport { ReactComponent as TetherLogo } from 'src/styling/logos/icon-tether-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 case 'USDT':\n return TetherLogo\n case 'XMR':\n return MoneroLogo\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(funding)}\n {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 \n {formatAddress(\n selected.cryptoCode,\n selected.fundingAddress\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{format('yyyy-MM-dd', it.date)} | \n{format('hh:mm:ss', it.date)} | \nadd | \n \n ))}\n
\n
\n )\n}\n\nexport default WizardSplash\n","import { errorColor, fontSize1, fontPrimary } from 'src/styling/variables'\n\nconst LABEL_WIDTH = 150\n\nexport default {\n title: {\n margin: [[0, 0, 12, 0]]\n },\n subtitle: {\n margin: [[32, 0, 21, 0]]\n },\n error: {\n color: errorColor\n },\n button: {\n marginLeft: 'auto'\n },\n submit: {\n display: 'flex',\n flexDirection: 'row',\n margin: [['auto', 0, 24]]\n },\n radioGroup: {\n flexDirection: 'row'\n },\n radioLabel: {\n width: LABEL_WIDTH,\n height: 48\n },\n radio: {\n padding: 4,\n margin: 4\n },\n setupNew: {\n display: 'flex',\n alignItems: 'center',\n height: 48\n },\n picker: {\n width: LABEL_WIDTH\n },\n horizontalAlign: {\n display: 'flex',\n flexDirection: 'row'\n },\n centerAlignment: {\n alignItems: 'center'\n },\n zeroConfLimit: {\n marginRight: 5,\n '& > div': {\n fontSize: fontSize1,\n fontFamily: fontPrimary,\n fontWeight: 300,\n '& > input': {\n padding: [[6, 0, 2]]\n }\n }\n }\n}\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { Formik, Form, Field } from 'formik'\nimport * as R from 'ramda'\nimport React, { useReducer, useEffect } from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Stepper from 'src/components/Stepper'\nimport { Button } from 'src/components/buttons'\nimport { RadioGroup, Autocomplete } from 'src/components/inputs'\nimport { NumberInput } from 'src/components/inputs/formik'\nimport { H4, Info2 } from 'src/components/typography'\nimport FormRenderer from 'src/pages/Services/FormRenderer'\nimport schema from 'src/pages/Services/schemas'\nimport { startCase } from 'src/utils/string'\n\nimport styles from './WizardStep.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst initialState = {\n form: null,\n selected: null,\n isNew: false,\n iError: false\n}\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case 'select':\n return {\n form: null,\n selected: action.selected,\n isNew: null,\n iError: false\n }\n case 'new':\n return { form: state.form, selected: null, isNew: true, iError: false }\n case 'form':\n return {\n form: action.form,\n selected: action.form.code,\n isNew: true,\n iError: false\n }\n case 'error':\n return R.merge(state, { innerError: true })\n case 'reset':\n return initialState\n default:\n throw new Error()\n }\n}\n\nconst WizardStep = ({\n type,\n schema: stepSchema,\n coin,\n name,\n step,\n error,\n lastStep,\n onContinue,\n fiatCurrency,\n filled,\n unfilled,\n getValue\n}) => {\n const classes = useStyles()\n const [{ innerError, selected, form, isNew }, dispatch] = useReducer(\n reducer,\n initialState\n )\n\n useEffect(() => {\n dispatch({ type: 'reset' })\n }, [step])\n\n const innerContinue = (config, account) => {\n if (!config || !config[type]) {\n return dispatch({ type: 'error' })\n }\n onContinue(config, account)\n }\n\n const label = lastStep ? 'Finish' : 'Next'\n const displayName = name ?? type\n const subtitleClass = {\n [classes.subtitle]: true,\n [classes.error]: innerError\n }\n return (\n <>\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 {step < 4\n ? `Select a ${displayName} or set up a new one`\n : `Select ${displayName} for ${coin}`}\n
\n {step !== 5 && (\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 { utils as coinUtils } from 'lamassu-coins'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\nimport * as Yup from 'yup'\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 = 5\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))\nconst removeDeprecated = R.filter(({ deprecated }) => !deprecated)\n\nconst getItems = (accountsConfig, accounts, type, crypto) => {\n const fConfig = removeDeprecated(filterConfig(crypto, type)(accountsConfig))\n\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 { getValidationSchema } = schema[code]\n return getValidationSchema(account).isValidSync(account)\n })(fConfig)\n\n return { filled, unfilled }\n}\n\nconst Wizard = ({\n coin,\n onClose,\n accountsConfig,\n accounts,\n fiatCurrency,\n save,\n error\n}) => {\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 const defaultCryptoUnit = R.head(\n R.keys(coinUtils.getCryptoCurrency(coin.code).units)\n )\n const configToSave = {\n ...newConfig,\n cryptoUnits: defaultCryptoUnit\n }\n return save(toNamespace(coin.code, configToSave), 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 {\n type: 'zeroConf',\n name: 'confidence checking',\n schema: Yup.object().shape({\n zeroConfLimit: Yup.number().required()\n }),\n ...zeroConfs\n }\n case 5:\n return { type: 'zeroConfLimit', name: '0-conf limit', ...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 [error, setError] = useState(null)\n const [isEditingDefault, setEditingDefault] = useState(false)\n const [isEditingOverrides, setEditingOverrides] = useState(false)\n const { data } = useQuery(GET_DATA)\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n onCompleted: () => setWizard(false),\n refetchQueries: () => ['getData'],\n onError: error => setError(error)\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 setError(null)\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 {\n header: 'Name',\n width: 300,\n textAlign: 'left',\n size: 'sm',\n view: t => {\n const customer = getCustomer(t.customerId)\n if (R.isNil(customer.idCardData)) {\n return <>{'-'}\n }\n\n return (\n <>{`${customer.idCardData.firstName ?? ``}${\n customer.idCardData.firstName && customer.idCardData.lastName\n ? ` `\n : ``\n }${customer.idCardData.lastName ?? ``}`}\n )\n }\n },\n {\n header: 'Discount rate',\n width: 220,\n textAlign: 'left',\n size: 'sm',\n view: t => (\n <>\n \n \n
\n )\n}\n\nexport default Tile\n","import { makeStyles } from '@material-ui/core/styles'\nimport {\n add,\n differenceInMonths,\n format,\n getDay,\n getDaysInMonth,\n isAfter,\n isSameDay,\n isSameMonth,\n lastDayOfMonth,\n startOfMonth,\n startOfWeek,\n sub\n} from 'date-fns/fp'\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(new Date())\n\n const classes = useStyles()\n\n const weekdays = Array.from(Array(7)).map((_, i) =>\n format('EEEEE', add({ days: i }, startOfWeek(new Date())))\n )\n\n const monthLength = month => getDaysInMonth(month)\n\n const monthdays = month => {\n const lastMonth = sub({ months: 1 }, month)\n const lastMonthRange = R.range(0, getDay(startOfMonth(month))).reverse()\n const lastMonthDays = R.map(i =>\n sub({ days: i }, lastDayOfMonth(lastMonth))\n )(lastMonthRange)\n\n const thisMonthRange = R.range(0, monthLength(month))\n const thisMonthDays = R.map(i => add({ days: i }, startOfMonth(month)))(\n thisMonthRange\n )\n\n const nextMonth = add({ months: 1 }, month)\n const nextMonthRange = R.range(\n 0,\n 42 - lastMonthDays.length - thisMonthDays.length\n )\n const nextMonthDays = R.map(i => add({ days: i }, startOfMonth(nextMonth)))(\n nextMonthRange\n )\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 = sub({ months: 1 }, currentMonth)\n if (!minDate) setCurrentDisplayedMonth(prevMonth)\n else {\n setCurrentDisplayedMonth(\n isSameMonth(minDate, prevMonth) ||\n differenceInMonths(minDate, prevMonth) > 0\n ? prevMonth\n : currentDisplayedMonth\n )\n }\n }\n const handleNavNext = currentMonth => {\n const nextMonth = add({ months: 1 }, currentMonth)\n if (!maxDate) setCurrentDisplayedMonth(nextMonth)\n else {\n setCurrentDisplayedMonth(\n isSameMonth(maxDate, nextMonth) ||\n differenceInMonths(nextMonth, maxDate) > 0\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 {\n differenceInDays,\n differenceInMonths,\n isSameMonth,\n set\n} from 'date-fns/fp'\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 && differenceInDays(maxDate, day) > 0) ||\n (minDate && differenceInDays(day, minDate) > 0)\n )\n return\n\n if (from && !to && differenceInDays(day, from) > 0) {\n setTo(from)\n setFrom(day)\n return\n }\n\n if (\n from &&\n !to &&\n (isSameMonth(from, day) || differenceInMonths(from, day) > 0)\n ) {\n setTo(\n set({ hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }, day)\n )\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 { format } from 'date-fns/fp'\nimport FileSaver from 'file-saver'\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'\nimport { formatDate } from 'src/utils/timezones'\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'\nconst ADVANCED = 'advanced'\nconst SIMPLIFIED = 'simplified'\n\nconst LogsDownloaderPopover = ({\n name,\n query,\n args,\n title,\n getLogs,\n timezone,\n simplified\n}) => {\n const [selectedRadio, setSelectedRadio] = useState(ALL)\n const [selectedAdvancedRadio, setSelectedAdvancedRadio] = useState(ADVANCED)\n\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 handleAdvancedRadioButtons = evt => {\n const selectedAdvancedRadio = R.path(['target', 'value'])(evt)\n setSelectedAdvancedRadio(selectedAdvancedRadio)\n }\n\n const handleRangeChange = useCallback(\n (from, until) => {\n setRange({ from, until })\n },\n [setRange]\n )\n\n const downloadLogs = (range, args) => {\n if (selectedRadio === ALL) {\n fetchLogs({\n variables: {\n ...args,\n simplified: selectedAdvancedRadio === SIMPLIFIED,\n excludeTestingCustomers: true\n }\n })\n }\n\n if (!range || !range.from) return\n if (range.from && !range.until) range.until = new Date()\n\n if (selectedRadio === RANGE) {\n fetchLogs({\n variables: {\n ...args,\n from: range.from,\n until: range.until,\n simplified: selectedAdvancedRadio === SIMPLIFIED,\n excludeTestingCustomers: true\n }\n })\n }\n }\n\n const createLogsFile = (logs, range) => {\n const formatDateFile = date => {\n return formatDate(date, timezone, '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}.csv`\n : `${formatDateFile(range.from)}_${formatDateFile(\n range.until\n )}_${name}.csv`\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 advancedRadioButtonOptions = [\n { display: 'Advanced logs', code: ADVANCED },\n { display: 'Simplified logs', code: SIMPLIFIED }\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 {format('d', date)}
\n \n {`${format(\n 'MMM',\n date\n )} ${format('yyyy', date)}`}\n {format('EEEE', date)}\n
\n \n \n \n
\n \n
\n {title}
\n \n
\n {selectedRadio === RANGE && (\n \n
\n )}\n {simplified && (\n \n {range && (\n <>\n From \n To \n \n )}\n
\n \n
\n \n
\n )}\n \n downloadLogs(range, args)}>\n Download\n \n
\n \n
\n \n Machine Logs \n {logsResponse && (\n
\n \n R.path(['machineLogsCsv'])(logs)}\n timezone={timezone}\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","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/clock/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-7\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0,10 C0,15.522 4.478,20 10,20 C15.522,20 20,15.522 20,10 C20,4.478 15.522,0 10,0 C7.749,0 5.671,0.744 4,1.999\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"13 11 10 11.063 10 7\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-5\",\n points: \"3 0 3 3 5 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: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.5750bfd1.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/clock/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: 2\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0,10 C0,15.522 4.478,20 10,20 C15.522,20 20,15.522 20,10 C20,4.478 15.522,0 10,0 C7.749,0 5.671,0.744 4,1.999\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"13 11 10 11.063 10 7\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-5\",\n points: \"3 0 3 3 5 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: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.ce4a1545.svg\";\nexport { ForwardRef as ReactComponent };","import { offColor } from 'src/styling/variables'\n\nexport default {\n cashbox: {\n height: 36\n },\n tBody: {\n maxHeight: '65vh',\n overflow: 'auto'\n },\n tableWidth: {\n display: 'flex',\n alignItems: 'center',\n marginRight: 1\n },\n descriptions: {\n color: offColor,\n marginTop: 0\n },\n cashboxReset: {\n color: offColor,\n margin: [[13, 0, -5, 20]]\n },\n selection: {\n marginRight: 12\n }\n}\n","import { comet } from 'src/styling/variables'\n\nexport default {\n footerLabel: {\n color: comet,\n alignSelf: 'center'\n },\n footerContent: {\n width: 1200,\n maxHeight: 64,\n display: 'flex',\n justifyContent: 'space-around',\n position: 'fixed'\n },\n footerContainer: {\n position: 'fixed',\n height: 64,\n left: 0,\n bottom: 0,\n width: '100vw',\n backgroundColor: 'white',\n display: 'flex',\n justifyContent: 'space-around',\n boxShadow: [[0, -1, 10, 0, 'rgba(50, 50, 50, 0.1)']]\n },\n flex: {\n display: 'flex'\n },\n icon: {\n alignSelf: 'center',\n height: 20,\n width: 20,\n marginRight: 8\n },\n iconLabel: {\n alignSelf: 'center',\n marginRight: 8\n },\n valueDisplay: {\n alignSelf: 'center'\n }\n}\n","import { makeStyles } from '@material-ui/core'\nimport BigNumber from 'bignumber.js'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { Info1, Info2, Info3 } from 'src/components/typography/index'\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 { fromNamespace } from 'src/utils/config'\nimport { numberToFiatAmount } from 'src/utils/number.js'\n\nimport styles from './CashCassettesFooter.styles.js'\nconst useStyles = makeStyles(styles)\n\nconst CashCassettesFooter = ({\n machines,\n config,\n currencyCode,\n bills,\n deviceIds\n}) => {\n const classes = useStyles()\n const cashout = config && fromNamespace('cashOut')(config)\n const getCashoutSettings = id => fromNamespace(id)(cashout)\n const reducerFn = (\n acc,\n { cassette1, cassette2, cassette3, cassette4, id }\n ) => {\n const cassette1Denomination = getCashoutSettings(id).cassette1 ?? 0\n const cassette2Denomination = getCashoutSettings(id).cassette2 ?? 0\n const cassette3Denomination = getCashoutSettings(id).cassette3 ?? 0\n const cassette4Denomination = getCashoutSettings(id).cassette4 ?? 0\n return [\n (acc[0] += cassette1 * cassette1Denomination),\n (acc[1] += cassette2 * cassette2Denomination),\n (acc[2] += cassette3 * cassette3Denomination),\n (acc[3] += cassette4 * cassette4Denomination)\n ]\n }\n\n const totalInCassettes = R.sum(R.reduce(reducerFn, [0, 0, 0, 0], machines))\n\n const totalInCashBox = R.sum(R.map(it => it.fiat)(bills))\n\n const total = new BigNumber(totalInCassettes + totalInCashBox).toFormat(0)\n\n return (\n \n \n
\n {loading &&
\n {'Loading...'}
}\n {!loading && !logsResponse?.machineLogs?.length && (\n{'No activity so far'}
\n )}\n\n
\n )\n}\n\nexport default CashCassettesFooter\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 from 'react'\n// import * as Yup from 'yup'\n\n// import { Link, IconButton } from 'src/components/buttons'\n// import { TextInput } from 'src/components/inputs'\nimport { NumberInput } from 'src/components/inputs/formik'\nimport DataTable from 'src/components/tables/DataTable'\n// import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'\n// import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.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 { formatDate } from 'src/utils/timezones'\n\nconst GET_BATCHES = gql`\n query cashboxBatches {\n cashboxBatches {\n id\n deviceId\n created\n operationType\n customBillCount\n performedBy\n bills {\n fiat\n deviceId\n created\n }\n }\n }\n`\n\n/* const EDIT_BATCH = gql`\n mutation editBatch($id: ID, $performedBy: String) {\n editBatch(id: $id, performedBy: $performedBy) {\n id\n }\n }\n` */\n\nconst GET_DATA = gql`\n query getData {\n config\n }\n`\n\nconst styles = {\n operationType: {\n marginLeft: 8\n },\n operationTypeWrapper: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n saveAndCancel: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between'\n }\n}\n\n/* const schema = Yup.object().shape({\n performedBy: Yup.string().nullable()\n}) */\n\nconst useStyles = makeStyles(styles)\n\nconst CashboxHistory = ({ machines, currency }) => {\n const classes = useStyles()\n\n /* const [error, setError] = useState(false)\n const [field, setField] = useState(null)\n const [editing, setEditing] = useState(false) */\n\n const { data: batchesData, loading: batchesLoading } = useQuery(GET_BATCHES)\n\n /* const [editBatch] = useMutation(EDIT_BATCH, {\n refetchQueries: () => ['cashboxBatches']\n }) */\n\n const { data: configData, loading: configLoading } = useQuery(GET_DATA)\n const timezone = R.path(['config', 'locale_timezone'], configData)\n\n const loading = batchesLoading || configLoading\n\n const batches = R.path(['cashboxBatches'])(batchesData)\n\n const getOperationRender = R.reduce(\n (ret, i) =>\n R.pipe(\n R.assoc(\n `cash-cassette-${i}-refill`,\n <>\n \n Cash value in System \n
\n \n Cash-in: \n \n {numberToFiatAmount(totalInCashBox)} {currencyCode}\n \n
\n \n Cash-out: \n \n {numberToFiatAmount(totalInCassettes)} {currencyCode}\n \n
\n \n Total: \n \n {numberToFiatAmount(total)} {currencyCode}\n \n
\n \n {getOperationRender[it.operationType]}\n
\n )\n },\n {\n name: 'machine',\n header: 'Machine',\n width: 200,\n textAlign: 'left',\n view: it => {\n return R.find(R.propEq('id', it.deviceId))(machines).name\n }\n },\n {\n name: 'billCount',\n header: 'Bill Count',\n width: 115,\n textAlign: 'left',\n input: NumberInput,\n inputProps: {\n decimalPlaces: 0\n },\n view: it =>\n R.isNil(it.customBillCount) ? it.bills.length : it.customBillCount\n },\n {\n name: 'total',\n header: 'Total',\n width: 180,\n textAlign: 'right',\n view: it => (\n \n {R.sum(R.map(b => R.prop('fiat', b), it.bills))} {currency}\n \n )\n },\n {\n name: 'date',\n header: 'Date',\n width: 135,\n textAlign: 'right',\n view: it => formatDate(it.created, timezone, 'yyyy-MM-dd')\n },\n {\n name: 'time',\n header: 'Time (h:m)',\n width: 125,\n textAlign: 'right',\n view: it => formatDate(it.created, timezone, 'HH:mm')\n }\n /* {\n name: 'performedBy',\n header: 'Performed by',\n width: 180,\n textAlign: 'left',\n view: it => {\n if (notEditing(it.id))\n return R.isNil(it.performedBy) ? 'Unknown entity' : it.performedBy\n return (\n \n save(it)}>\n Save\n \n \n Cancel\n \n
\n )\n }\n } */\n ]\n\n return (\n \n {onlyFirstToUpper(cashboxReset)}\n
\n )}\n\n We can automatically assume you emptied a bill validator's cash\n box when the machine detects that it has been removed.\n
\n\n Assume the cash box is emptied whenever it's removed, creating a\n new batch on the history screen and setting its current balance to\n zero.\n
\n\n Cash boxes won't be assumed emptied when removed, nor their counts\n modified. Instead, to update the count and create a new batch,\n you'll click the 'Edit' button on this panel.\n
\n{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 {m.name}\n {\n history.push(`/machines/${m.deviceId}`)\n }}>\n
\n \n )\n },\n {\n header: 'Status',\n width: 350,\n size: 'sm',\n textAlign: 'left',\n view: m => \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'\nimport { transformNumber } from 'src/utils/number'\n\nimport NotificationsCtx from '../NotificationsContext'\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'\nimport { CURRENCY_MAX } from 'src/utils/constants'\nimport { transformNumber } from 'src/utils/number'\n\nimport NotificationsCtx from '../NotificationsContext'\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 error,\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 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(CURRENCY_MAX)\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(CURRENCY_MAX)\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 labelProp: '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 \n {({ resetForm }) => {\n return (\n \n )\n }}\n \n
\n )\n }\n)\n\nexport default BooleanPropertiesTable\n","import { offColor } from 'src/styling/variables'\n\nconst global = {\n content: {\n display: 'flex'\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n position: 'relative',\n flex: 'wrap'\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 position: 'relative',\n flex: 'wrap',\n justifyContent: 'space-between',\n width: 396\n },\n switch: {\n display: 'flex',\n alignItems: 'center'\n },\n submit: {\n justifyContent: 'flex-start',\n alignItems: 'center',\n padding: [[0, 4, 4, 4]],\n '& > button': {\n marginRight: 40\n }\n },\n transparentButton: {\n '& > *': {\n margin: 'auto 12px'\n },\n '& button': {\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer'\n }\n },\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 formErrorMsg: {\n margin: [[0, 0, 20, 0]]\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 { global, fieldStyles }\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport React, { memo } from 'react'\n\nimport { HoverableTooltip } from 'src/components/Tooltip'\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 { global } from './OperatorInfo.styles'\n\nconst useStyles = makeStyles(global)\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 Row = memo(({ title, disabled = false, checked, save, label }) => {\n const classes = useStyles()\n\n return (\n \n
\n )\n})\n\nconst CoinATMRadar = 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.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 {title}
\n\n save && save(event.target.checked)}\n />\n {label && {label} }\n
\n \n
\n )\n})\n\nexport default CoinATMRadar\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 { global } 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
\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
\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 contactUseStyles = makeStyles(global)\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('An email is 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 const getErrorMsg = formikErrors =>\n !R.isNil(formikErrors.email) ? formikErrors.email : null\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 {({ errors }) => (\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","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 { global } from './OperatorInfo.styles'\n\nconst useStyles = makeStyles(global)\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
\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 {receiptPrintingConfig.active ? 'Yes' : 'No'} \n
\n \n
\n Offer SMS receipt
\n\n \n saveConfig({\n variables: {\n config: toNamespace(\n namespaces.RECEIPT,\n R.merge(receiptPrintingConfig, {\n sms: event.target.checked\n })\n )\n }\n })\n }\n />\n {receiptPrintingConfig.sms ? 'Yes' : 'No'} \n
\n \n \n )\n }, fragments)\n}\n\nconst TOOLTIPS = {\n smsCode: ``,\n cashOutDispenseReady: ``,\n smsReceipt: formatContent(`The contents of this notice will be appended to the end of the SMS receipt sent, and not replace it.\\n\n To edit the contents of the SMS receipt, please go to the 'Receipt' tab`)\n}\n\nconst SMSPreview = ({ sms, coords }) => {\n const classes = useStyles(coords)\n\n const matches = {\n '#code': 123,\n '#timestamp': format('HH:mm', new Date())\n }\n\n return (\n
\n
\n )\n}\n\nconst SMSNotices = () => {\n const classes = useStyles()\n\n const [showModal, setShowModal] = useState(false)\n const [selectedSMS, setSelectedSMS] = useState(null)\n const [previewOpen, setPreviewOpen] = useState(false)\n const [previewCoords, setPreviewCoords] = useState({ x: 0, y: 0 })\n const [errorMsg, setErrorMsg] = useState('')\n\n const { data: messagesData, loading: messagesLoading } = useQuery(\n GET_SMS_NOTICES\n )\n\n const [editMessage] = useMutation(EDIT_SMS_NOTICE, {\n onError: ({ msg }) => setErrorMsg(msg),\n refetchQueries: () => ['SMSNotices']\n })\n\n const [enableMessage] = useMutation(ENABLE_SMS_NOTICE, {\n onError: ({ msg }) => setErrorMsg(msg),\n refetchQueries: () => ['SMSNotices']\n })\n\n const [disableMessage] = useMutation(DISABLE_SMS_NOTICE, {\n onError: ({ msg }) => setErrorMsg(msg),\n refetchQueries: () => ['SMSNotices']\n })\n\n const loading = messagesLoading\n\n const handleClose = () => {\n setShowModal(false)\n setSelectedSMS(null)\n }\n\n const elements = [\n {\n header: 'Message name',\n width: 500,\n size: 'sm',\n textAlign: 'left',\n view: it =>\n !R.isEmpty(TOOLTIPS[it.event]) ? (\n \n \n \n {format('HH:mm', new Date())} \n
\n \n
\n \n {R.isEmpty(sms?.message) ? (\n No content available\n ) : (\n formatContent(multiReplace(sms?.message, matches))\n )}\n
\n\n {R.prop('messageName', it)}\n \n \n
\n ) : (\n R.prop('messageName', it)\n )\n },\n {\n header: 'Edit',\n width: 100,\n size: 'sm',\n textAlign: 'center',\n view: it => (\n {TOOLTIPS[it.event]}
\n\n
\n {showModal && (\n SMS notices
\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 useTermsConditionsStyles = makeStyles(global)\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 const addDelayOnScreen = termsAndConditions?.delay ?? 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
\n Show on screen
\n\n \n save({\n active: event.target.checked\n })\n }\n />\n {showOnScreen ? 'Yes' : 'No'} \n
\n \n
\n Add 7 seconds delay on screen
\n\n \n save({\n delay: event.target.checked\n })\n }\n />\n {addDelayOnScreen ? 'Yes' : 'No'} \n
\n \n Info card \n {!editing && (\n setEditing(true)}>\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 * 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, H4 } from 'src/components/typography'\nimport typographyStyles from 'src/components/typography/styles'\nimport { offColor } from 'src/styling/variables'\nimport { startCase } from 'src/utils/string'\nimport { formatDate } from 'src/utils/timezones'\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 = { code: 'SHOW_ALL', display: 'Show all' }\n\nconst NUM_LOG_RESULTS = 500\n\nconst GET_CSV = gql`\n query ServerData($limit: Int, $from: Date, $until: Date, $timezone: String) {\n serverLogsCsv(\n limit: $limit\n from: $from\n until: $until\n timezone: $timezone\n )\n }\n`\n\nconst GET_SERVER_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 GET_DATA = gql`\n query getData {\n config\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, loading: dataLoading } = useQuery(GET_SERVER_DATA, {\n onCompleted: () => setSaveMessage(''),\n variables: {\n limit: NUM_LOG_RESULTS\n }\n })\n const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)\n const timezone = R.path(['config', 'locale_timezone'], configResponse)\n\n const defaultLogLevels = [\n { code: 'error', display: 'Error' },\n { code: 'info', display: 'Info' },\n { code: 'debug', display: 'Debug' }\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(defaultLogLevels),\n R.map(it => ({\n code: R.path(['logLevel'])(it),\n display: startCase(R.path(['logLevel'])(it))\n })),\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 const loading = dataLoading || configLoading\n\n return (\n <>\n {R.toLower(process.name)}
\n \n
\n \n Server \n {data && (\n
\n \n R.path(['serverLogsCsv'])(logs)}\n timezone={timezone}\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","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 {loading &&
\n {'Loading...'}
}\n {!loading && !data?.serverLogs?.length && (\n{'No activity so far'}
\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={getElements(editingSchema)}\n validationSchema={getValidationSchema(editingSchema)}\n value={getAccounts(editingSchema)}\n />\n \n )}\n
\n )\n}\n\nexport default Services\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React from 'react'\nimport parser from 'ua-parser-js'\n\nimport { IconButton } from 'src/components/buttons'\nimport TitleSection from 'src/components/layout/TitleSection'\nimport DataTable from 'src/components/tables/DataTable'\nimport { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'\nimport { formatDate } from 'src/utils/timezones'\n\nconst GET_SESSIONS = gql`\n query sessions {\n sessions {\n sid\n sess\n expire\n }\n }\n`\n\nconst DELETE_SESSION = gql`\n mutation deleteSession($sid: String!) {\n deleteSession(sid: $sid) {\n sid\n }\n }\n`\n\nconst GET_DATA = gql`\n query getData {\n config\n }\n`\n\nconst isLocalhost = ip => {\n return ip === 'localhost' || ip === '::1' || ip === '127.0.0.1'\n}\n\nconst SessionManagement = () => {\n const { data: tknResponse, loading: sessionsLoading } = useQuery(GET_SESSIONS)\n\n const [deleteSession] = useMutation(DELETE_SESSION, {\n refetchQueries: () => ['sessions']\n })\n\n const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)\n const timezone = R.path(['config', 'locale_timezone'], configResponse)\n\n const loading = sessionsLoading || configLoading\n\n const elements = [\n {\n header: 'Login',\n width: 207,\n textAlign: 'left',\n size: 'sm',\n view: s => s.sess.user.username\n },\n {\n header: 'Last known use',\n width: 305,\n textAlign: 'left',\n size: 'sm',\n view: s => {\n if (R.isNil(s.sess.ua)) return 'No Record'\n const ua = parser(s.sess.ua)\n return `${ua.browser.name} ${ua.browser.version} on ${ua.os.name} ${ua.os.version}`\n }\n },\n {\n header: 'Last known location',\n width: 250,\n textAlign: 'left',\n size: 'sm',\n view: s => {\n return isLocalhost(s.sess.ipAddress) ? 'This device' : s.sess.ipAddress\n }\n },\n {\n header: 'Expiration date',\n width: 290,\n textAlign: 'right',\n size: 'sm',\n view: s =>\n `${formatDate(s.expire, timezone, 'yyyy-MM-dd')} ${formatDate(\n s.expire,\n timezone,\n 'HH:mm:ss'\n )}`\n },\n {\n header: '',\n width: 80,\n textAlign: 'center',\n size: 'sm',\n view: s => (\n \n
\n )\n },\n {\n header: 'Cash',\n width: 144,\n textAlign: 'right',\n size: 'sm',\n view: it => `${Number.parseFloat(it.fiat)} ${it.fiatCode}`\n },\n {\n header: 'Crypto',\n width: 150,\n textAlign: 'right',\n size: 'sm',\n view: it =>\n `${coinUtils.toUnit(new BigNumber(it.cryptoAtoms), it.cryptoCode)} ${\n it.cryptoCode\n }`\n },\n {\n header: 'Address',\n view: it => coinUtils.formatCryptoAddress(it.cryptoCode, it.toAddress),\n className: classes.overflowTd,\n size: 'sm',\n width: 140\n },\n {\n header: 'Date',\n view: it =>\n timezone && formatDate(it.created, timezone, 'yyyy-MM-dd HH:mm'),\n textAlign: 'right',\n size: 'sm',\n width: 195\n },\n {\n header: 'Status',\n view: it => getStatus(it),\n textAlign: 'left',\n size: 'sm',\n width: 80\n }\n ]\n\n const onFilterChange = filters => {\n const filtersObject = getFiltersObj(filters)\n\n setFilters(filters)\n\n setVariables({\n limit: NUM_LOG_RESULTS,\n txClass: filtersObject.type,\n machineName: filtersObject.machine,\n customerName: filtersObject.customer,\n fiatCode: filtersObject.fiat,\n cryptoCode: filtersObject.crypto,\n toAddress: filtersObject.address,\n status: filtersObject.status\n })\n\n refetch && refetch()\n }\n\n const onFilterDelete = filter => {\n const newFilters = R.filter(\n f => !R.whereEq(R.pick(['type', 'value'], f), filter)\n )(filters)\n\n setFilters(newFilters)\n\n const filtersObject = getFiltersObj(newFilters)\n\n setVariables({\n limit: NUM_LOG_RESULTS,\n txClass: filtersObject.type,\n machineName: filtersObject.machine,\n customerName: filtersObject.customer,\n fiatCode: filtersObject.fiat,\n cryptoCode: filtersObject.crypto,\n toAddress: filtersObject.address,\n status: filtersObject.status\n })\n\n refetch && refetch()\n }\n\n const deleteAllFilters = () => {\n setFilters([])\n const filtersObject = getFiltersObj([])\n\n setVariables({\n limit: NUM_LOG_RESULTS,\n txClass: filtersObject.type,\n machineName: filtersObject.machine,\n customerName: filtersObject.customer,\n fiatCode: filtersObject.fiat,\n cryptoCode: filtersObject.crypto,\n toAddress: filtersObject.address,\n status: filtersObject.status\n })\n\n refetch && refetch()\n }\n\n const filterOptions = R.path(['transactionFilters'])(filtersResponse)\n\n const loading = transactionsLoading || filtersLoading || configLoading\n\n const errorLabel = (\n \n )\n\n return (\n <>\n {getCustomerDisplayName(it)}
\n {!it.isAnonymous && (\n redirect(it.customerId)}>\n {it.hasError || it.batchError ? (\n
\n )}\n \n
\n {filters.length > 0 && (\n \n Transactions \n
\n \n
\n {txList && (\n \n R.path(['transactionsCsv'])(logs)}\n simplified\n timezone={timezone}\n args={{ timezone }}\n />\n
\n )}\n \n
\n \n
\n \n
\n \n {errorLabel}\n Transaction error\n
\n \n {label1Display} \n {customRequest.input.label1} \n
\n {customRequest.input.constraintType === 'spaceSeparation' && (\n \n Second word label \n {customRequest.input.label2} \n
\n )}\n \n )\n default:\n return (\n <>\n \n Screen 2 input title \n {customRequest.screen2.title} \n
\n \n Screen 2 input description \n {customRequest.screen2.text} \n
\n \n )\n }\n }\n\n const getInputData = () => {\n return (\n <>\n {customRequest.input.choiceList && (\n <>\n \n \n
\n \n )\n}\n\nexport default DetailsCard\n","import React, { memo } from 'react'\n\nimport { ToggleButtonGroup } from '../base'\n\nconst ToggleButtonGroupFormik = memo(({ enforceValueSet = true, ...props }) => {\n const { name, value } = props.field\n const { setFieldValue } = props.form\n return (\n \n
\n \n Screen 1 title \n {customRequest.screen1.title} \n
\n \n {getScreen2Data()}\n
\n \n Screen 1 text \n {customRequest.screen1.text} \n
\n {getInputData()}
\n Choose the type of data entry
\nName of the requirement
{/* TODO Add ? icon */}\n\n The name of the requirement will only be visible to you on the dashboard\n on the requirement list, as well as on the custom information request\n list. The user won't see this name. Make sure to make it distinguishable\n and short.\n
\nScreen 1 Information
{/* TODO Add ? icon */}\n\n On screen 1 you will request the user if he agrees on providing this\n information, or if he wishes to terminate the transaction instead.\n
\nScreen 2 Information
{/* TODO Add ? icon */}\n\n If the user agrees, on screen 2 is where the user will enter the custom\n information.\n
\nChoice list constraints
\n\n {\n e.preventDefault()\n return push({ text: '' })\n }}>\n Add choice\n \n
\n )\n }}\n Choices
\n\n {listChoices.map((choice, idx) => {\n return (\n
\n \n
\n )\n })}\n \n Numerical entry constraints\n
\n\n digits \n
\n )}\n \n )\n}\n\nexport default NumericalEntry\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { Field, useFormikContext } from 'formik'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport RadioGroup from 'src/components/inputs/formik/RadioGroup'\nimport TextInput from 'src/components/inputs/formik/TextInput'\nimport { H4 } from 'src/components/typography'\n\nimport styles from './formStyles.styles'\nconst useStyles = makeStyles(styles)\n\nconst options = [\n { display: 'None', code: 'none' },\n { display: 'Email', code: 'email' },\n {\n display: 'Space separation',\n subtitle: '(e.g. first and last name)',\n code: 'spaceSeparation'\n }\n]\n\nconst TextEntry = () => {\n const classes = useStyles()\n const context = useFormikContext()\n const showErrorColor = {\n [classes.radioSubtitle]: true,\n [classes.error]:\n !R.path(['values', 'constraintType'])(context) &&\n R.path(['errors', 'constraintType'])(context)\n }\n\n const getLabelInputs = () => {\n switch (context.values.constraintType) {\n case 'spaceSeparation':\n return (\n \n
\n )\n default:\n return (\n Text entry constraints
\n\n
\n )\n}\n\nexport default WizardSplash\n","import { makeStyles } from '@material-ui/core'\nimport { Form, Formik } from 'formik'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport Stepper from 'src/components/Stepper'\nimport { Button } from 'src/components/buttons'\n\nimport ChooseType, {\n validationSchema as chooseTypeSchema,\n defaultValues as chooseTypeDefaults\n} from './Forms/ChooseType'\nimport NameOfRequirement, {\n validationSchema as nameOfReqSchema,\n defaultValues as nameOfReqDefaults\n} from './Forms/NameOfRequirement'\nimport Screen1Information, {\n validationSchema as screen1InfoSchema,\n defaultValues as screen1InfoDefaults\n} from './Forms/Screen1Information'\nimport Screen2Information, {\n validationSchema as screen2InfoSchema,\n defaultValues as screen2InfoDefaults\n} from './Forms/Screen2Information'\nimport TypeFields, {\n defaultValues as typeFieldsDefaults,\n validationSchema as typeFieldsValidationSchema\n} from './Forms/TypeFields'\nimport WizardSplash from './WizardSplash'\n\nconst LAST_STEP = 5\n\nconst styles = {\n stepper: {\n margin: [[16, 0, 14, 0]]\n },\n submit: {\n display: 'flex',\n flexDirection: 'row',\n margin: [['auto', 0, 24]]\n },\n button: {\n marginLeft: 'auto'\n },\n form: {\n height: '100%',\n display: 'flex',\n flexDirection: 'column'\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst getStep = step => {\n switch (step) {\n case 1:\n return {\n schema: nameOfReqSchema,\n Component: NameOfRequirement\n }\n case 2:\n return {\n schema: screen1InfoSchema,\n Component: Screen1Information\n }\n case 3:\n return { schema: chooseTypeSchema, Component: ChooseType }\n case 4:\n return {\n schema: screen2InfoSchema,\n Component: Screen2Information\n }\n case 5:\n return {\n schema: typeFieldsValidationSchema,\n Component: TypeFields\n }\n default:\n return {\n schema: {},\n Component: () => {\n return Custom information request
\n\n A custom information request allows you to have an extra option to ask\n specific information about your customers when adding a trigger that\n isn't an option on the default requirements list.\n
\n\n Note that adding a custom information request isn't the same as adding\n triggers. You will still need to add a trigger with the new requirement\n to get this information from your customers.\n
\n \nDefault component step
\n }\n }\n }\n}\n\nconst nonEmptyStr = obj => obj.text && obj.text.length\n\nconst formatValues = (values, isEditing) => {\n const isChoiceList = values.inputType === 'choiceList'\n const choices = isChoiceList\n ? isEditing\n ? R.path(['listChoices'])(values)\n : R.map(o => o.text)(R.filter(nonEmptyStr)(values.listChoices) ?? [])\n : []\n\n const hasInputLength = values.constraintType === 'length'\n const inputLength = hasInputLength ? values.inputLength : ''\n\n let resObj = {\n name: values.requirementName,\n screen1: {\n text: values.screen1Text,\n title: values.screen1Title\n },\n screen2: {\n title: values.screen2Title,\n text: values.screen2Text\n },\n input: {\n type: values.inputType,\n constraintType: values.constraintType\n }\n }\n\n if (isChoiceList) {\n resObj = R.assocPath(['input', 'choiceList'], choices, resObj)\n }\n\n if (hasInputLength) {\n resObj = R.assocPath(['input', 'numDigits'], inputLength, resObj)\n }\n\n if (values.inputLabel1) {\n resObj = R.assocPath(['input', 'label1'], values.inputLabel1, resObj)\n }\n\n if (values.inputLabel2) {\n resObj = R.assocPath(['input', 'label2'], values.inputLabel2, resObj)\n }\n\n if (isEditing) {\n resObj = R.assocPath(['id'], values.id, resObj)\n }\n\n return resObj\n}\n\nconst makeEditingValues = it => {\n const { customRequest } = it\n return {\n id: it.id,\n requirementName: customRequest.name,\n screen1Title: customRequest.screen1.title,\n screen1Text: customRequest.screen1.text,\n screen2Title: customRequest.screen2.title,\n screen2Text: customRequest.screen2.text,\n inputType: customRequest.input.type,\n inputLabel1: customRequest.input.label1,\n inputLabel2: customRequest.input.label2,\n listChoices: customRequest.input.choiceList,\n constraintType: customRequest.input.constraintType,\n inputLength: customRequest.input.numDigits\n }\n}\n\nconst chooseNotNull = (a, b) => {\n if (!R.isNil(b)) return b\n return a\n}\n\nconst Wizard = ({ onClose, error = false, toBeEdited, onSave, hasError }) => {\n const classes = useStyles()\n const isEditing = !R.isNil(toBeEdited)\n const [step, setStep] = useState(isEditing ? 1 : 0)\n const stepOptions = getStep(step)\n const isLastStep = step === LAST_STEP\n\n const onContinue = (values, actions) => {\n const showScreen2 =\n values.inputType === 'numerical' || values.inputType === 'choiceList'\n if (isEditing && step === 2) {\n return showScreen2\n ? setStep(4)\n : onSave(formatValues(values, isEditing), isEditing)\n }\n if (isEditing && step === 4) {\n return onSave(formatValues(values, isEditing), isEditing)\n }\n if (step === 3) {\n return showScreen2 ? setStep(step + 1) : setStep(step + 2)\n }\n if (!isLastStep) {\n return setStep(step + 1)\n }\n return onSave(formatValues(values, isEditing), isEditing)\n }\n\n const editingValues = isEditing ? makeEditingValues(toBeEdited) : {}\n const wizardTitle = isEditing\n ? 'Editing custom requirement'\n : 'New custom requirement'\n return (\n\n \n It seems you haven't added any custom information requests yet.\n \n \n Please read our{' '}\n \n Support Article\n {' '}\n on Compliance before adding new information requests.\n \n \n
\n )}\n {showWizard && (\n \n// In which type of transactions will it trigger?\n//
\n//Choose trigger type
\n\n {isRadioGroupActive() && (\n
\n \n )\n}\n\nconst type = currency => ({\n schema: typeSchema,\n options: typeOptions,\n Component: Type,\n props: { currency },\n initialValues: {\n triggerType: '',\n threshold: { threshold: '', thresholdDays: '' }\n }\n})\n\nconst requirementSchema = Yup.object()\n .shape({\n requirement: Yup.object({\n requirement: Yup.string().required(),\n suspensionDays: Yup.number().when('requirement', {\n is: value => value === 'suspend',\n then: Yup.number()\n .nullable()\n .transform(transformNumber),\n otherwise: Yup.number()\n .nullable()\n .transform(() => null)\n }),\n customInfoRequestId: Yup.string().when('requirement', {\n is: value => value === 'custom',\n then: Yup.string(),\n otherwise: Yup.string()\n .nullable()\n .transform(() => '')\n })\n }).required()\n })\n .test(({ requirement }, context) => {\n const requirementValidator = (requirement, type) => {\n switch (type) {\n case 'suspend':\n return requirement.requirement === type\n ? requirement.suspensionDays > 0\n : true\n case 'custom':\n return requirement.requirement === type\n ? !R.isNil(requirement.customInfoRequestId)\n : true\n default:\n return true\n }\n }\n\n if (requirement && !requirementValidator(requirement, 'suspend'))\n return context.createError({\n path: 'requirement',\n message: 'Suspension days must be greater than 0'\n })\n\n if (requirement && !requirementValidator(requirement, 'custom'))\n return context.createError({\n path: 'requirement',\n message: 'You must select an item'\n })\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 hasRequirementError = (errors, touched, values) =>\n !!errors.requirement &&\n !!touched.requirement?.suspensionDays &&\n (!values.requirement?.suspensionDays ||\n values.requirement?.suspensionDays < 0)\n\nconst hasCustomRequirementError = (errors, touched, values) =>\n !!errors.requirement &&\n !!touched.requirement?.customInfoRequestId &&\n (!values.requirement?.customInfoRequestId ||\n !R.isNil(values.requirement?.customInfoRequestId))\n\nconst Requirement = ({ customInfoRequests }) => {\n const classes = useStyles()\n const {\n touched,\n errors,\n values,\n handleChange,\n setTouched\n } = useFormikContext()\n\n const isSuspend = values?.requirement?.requirement === 'suspend'\n const isCustom = values?.requirement?.requirement === 'custom'\n const makeCustomReqOptions = () =>\n customInfoRequests.map(it => ({\n value: it.id,\n display: it.customRequest.name\n }))\n\n const enableCustomRequirement = customInfoRequests?.length > 0\n const customInfoOption = {\n display: 'Custom information requirement',\n code: 'custom'\n }\n const options = enableCustomRequirement\n ? [...requirementOptions, customInfoOption]\n : [...requirementOptions]\n const titleClass = {\n [classes.error]:\n (!!errors.requirement && !isSuspend && !isCustom) ||\n (isSuspend && hasRequirementError(errors, touched, values)) ||\n (isCustom && hasCustomRequirementError(errors, touched, values))\n }\n\n return (\n <>\n \n Threshold\n
\n )}\n\n {isThresholdCurrencyEnabled && (\n <>\n \n {props.currency}\n \n \n )}\n {isTransactionAmountEnabled && (\n <>\n \n transactions\n \n \n )}\n {isThresholdDaysEnabled && (\n <>\n \n in\n \n days \n \n )}\n {isConsecutiveDaysEnabled && (\n <>\n \n consecutive days\n \n \n )}\n
\n Choose a requirement
\n\n
\n )}\n \n )\n}\n\nconst requirements = customInfoRequests => ({\n schema: requirementSchema,\n options: requirementOptions,\n Component: Requirement,\n props: { customInfoRequests },\n hasRequirementError: hasRequirementError,\n hasCustomRequirementError: hasCustomRequirementError,\n initialValues: {\n requirement: {\n requirement: '',\n suspensionDays: '',\n customInfoRequestId: ''\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\n// const DirectionDisplay = ({ code }) => {\n// const classes = useStyles()\n// const displayName = getView(directionOptions, 'display')(code)\n// const showCashIn = code === 'cashIn' || code === 'both'\n// const showCashOut = code === 'cashOut' || code === 'both'\n\n// return (\n// \n// {showCashOut &&
\n// )\n// }\n\nconst customReqIdMatches = customReqId => it => {\n return it.id === customReqId\n}\n\nconst RequirementInput = ({ customInfoRequests }) => {\n const { values } = useFormikContext()\n const classes = useStyles()\n\n const requirement = values?.requirement?.requirement\n const customRequestId =\n R.path(['requirement', 'customInfoRequestId'])(values) ?? ''\n const isSuspend = requirement === 'suspend'\n const display = customRequestId\n ? R.path(['customRequest', 'name'])(\n R.find(customReqIdMatches(customRequestId))(customInfoRequests)\n ) ?? ''\n : getView(requirementOptions, 'display')(requirement)\n\n return (\n Trigger overview so far
\n\n It seems there are no active compliance triggers on your network\n
\n \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 To make changes on this user, please confirm this action by entering\n your two-factor authentication code below.\n
\n {/* TODO: refactor the 2FA CodeInput to properly use Formik */}\n{getErrorMsg()}
\n )}\n\n \n
\n \n )\n )\n}\n\nexport default Input2FAModal\n","import { useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport React, { useState } from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport { Button } from 'src/components/buttons'\nimport { Info2, P } from 'src/components/typography'\n\nimport styles from '../UserManagement.styles'\n\nimport Input2FAModal from './Input2FAModal'\n\nconst CHANGE_USER_ROLE = gql`\n mutation changeUserRole(\n $confirmationCode: String\n $id: ID!\n $newRole: String!\n ) {\n changeUserRole(\n confirmationCode: $confirmationCode\n id: $id\n newRole: $newRole\n ) {\n id\n }\n }\n`\n\nconst useStyles = makeStyles(styles)\n\nconst ChangeRoleModal = ({ state, dispatch, user, requiresConfirmation }) => {\n const classes = useStyles()\n\n const [changeUserRole, { error }] = useMutation(CHANGE_USER_ROLE, {\n onCompleted: () => handleClose(),\n refetchQueries: () => ['users']\n })\n\n const [confirmation, setConfirmation] = useState(null)\n\n const submit = () => {\n changeUserRole({\n variables: {\n confirmationCode: confirmation,\n id: user.id,\n newRole: user.role === 'superuser' ? 'user' : 'superuser'\n }\n })\n }\n\n const handleClose = () => {\n setConfirmation(null)\n dispatch({\n type: 'close',\n payload: 'showRoleModal'\n })\n }\n\n return (\n (state.showRoleModal && requiresConfirmation && !confirmation && (\n \n You are about to alter {user.username}'s role. This will change this\n user's permission to access certain resources.\n
\nDo you wish to proceed?
\n\n {error && {error} }\n \n
\n \n ))\n )\n}\n\nexport default ChangeRoleModal\n","const url = `https://${\n process.env.NODE_ENV === 'development'\n ? window.location.host\n : window.location.hostname\n}`\n\nconst urlResolver = content => `${url}${content}`\n\nexport { urlResolver }\n","import { useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport base64 from 'base-64'\nimport classnames from 'classnames'\nimport { Field, Form, Formik } from 'formik'\nimport gql from 'graphql-tag'\nimport React, { useState } from 'react'\nimport * as Yup from 'yup'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport { Button } from 'src/components/buttons'\nimport { TextInput, RadioGroup } from 'src/components/inputs/formik'\nimport { H1, H3, Info2, P, Mono } from 'src/components/typography'\nimport CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'\nimport { urlResolver } from 'src/utils/urlResolver'\n\nimport styles from '../UserManagement.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst CREATE_USER = gql`\n mutation createRegisterToken($username: String!, $role: String!) {\n createRegisterToken(username: $username, role: $role) {\n token\n expire\n }\n }\n`\n\nconst validationSchema = Yup.object().shape({\n username: Yup.string()\n .email('Username field should be in an email format!')\n .required('Username field is required!'),\n role: Yup.string().required('Role field is required!')\n})\n\nconst initialValues = {\n username: '',\n role: ''\n}\n\nconst radioOptions = [\n {\n code: 'user',\n display: 'Regular user'\n },\n {\n code: 'superuser',\n display: 'Superuser'\n }\n]\n\nconst getErrorMsg = (formikErrors, formikTouched, mutationError) => {\n if (!formikErrors || !formikTouched) return null\n if (mutationError) return 'Internal server error'\n if (formikErrors.username && formikTouched.username)\n return formikErrors.username\n return null\n}\n\nconst CreateUserModal = ({ state, dispatch }) => {\n const classes = useStyles()\n\n const [usernameField, setUsernameField] = useState('')\n const [createUserURL, setCreateUserURL] = useState(null)\n\n const handleClose = () => {\n setCreateUserURL(null)\n dispatch({\n type: 'close',\n payload: 'showCreateUserModal'\n })\n }\n\n const [createUser, { error }] = useMutation(CREATE_USER, {\n onCompleted: ({ createRegisterToken: token }) => {\n const queryParams =\n // Pazuz-created register tokens add a field to identify the creator\n process.env.REACT_APP_BUILD_TARGET === 'LAMASSU'\n ? `t=${token.token}`\n : `t=${token.token}&id=${base64.encode(usernameField)}`\n setCreateUserURL(urlResolver(`/register?${queryParams}`))\n }\n })\n\n const roleClass = (formikErrors, formikTouched) => ({\n [classes.error]: formikErrors.role && formikTouched.role\n })\n\n return (\n <>\n {state.showCreateUserModal && !createUserURL && (\n \n Safely share this link with {usernameField} to finish the\n registration process.\n
\n\n \n \n \n {createUserURL}\n \n \n \n
\n \n )}\n \n )\n}\n\nexport default CreateUserModal\n","import { useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport React, { useState } from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport { Button } from 'src/components/buttons'\nimport { Info2, P } from 'src/components/typography'\n\nimport styles from '../UserManagement.styles'\n\nimport Input2FAModal from './Input2FAModal'\n\nconst ENABLE_USER = gql`\n mutation enableUser($confirmationCode: String, $id: ID!) {\n enableUser(confirmationCode: $confirmationCode, id: $id) {\n id\n }\n }\n`\n\nconst DISABLE_USER = gql`\n mutation disableUser($confirmationCode: String, $id: ID!) {\n disableUser(confirmationCode: $confirmationCode, id: $id) {\n id\n }\n }\n`\n\nconst useStyles = makeStyles(styles)\n\nconst EnableUserModal = ({ state, dispatch, user, requiresConfirmation }) => {\n const classes = useStyles()\n\n const [enableUser, { error: enableError }] = useMutation(ENABLE_USER, {\n onCompleted: () => handleClose(),\n refetchQueries: () => ['users']\n })\n\n const [disableUser, { error: disableError }] = useMutation(DISABLE_USER, {\n onCompleted: () => handleClose(),\n refetchQueries: () => ['users']\n })\n\n const [confirmation, setConfirmation] = useState(null)\n\n const disable = () => {\n disableUser({\n variables: {\n confirmationCode: confirmation,\n id: user.id\n }\n })\n }\n\n const enable = () => {\n enableUser({\n variables: {\n confirmationCode: confirmation,\n id: user.id\n }\n })\n }\n\n const submit = () => {\n user?.enabled ? disable() : enable()\n }\n\n const handleClose = () => {\n setConfirmation(null)\n dispatch({\n type: 'close',\n payload: 'showEnableUserModal'\n })\n }\n\n return (\n (state.showEnableUserModal && requiresConfirmation && !confirmation && (\n \n You are about to enable {user.username} into the system,\n activating previous eligible sessions and grant permissions to\n access the system.\n
\nDo you wish to proceed?
\n \n )}\n {user.enabled && (\n <>\n\n You are about to disable {user.username} from the system,\n deactivating previous eligible sessions and removing permissions\n to access the system.\n
\nDo you wish to proceed?
\n \n )}\n\n {disableError && {disableError} }\n {enableError && {enableError} }\n \n
\n \n ))\n )\n}\n\nexport default EnableUserModal\n","import { makeStyles } from '@material-ui/core/styles'\nimport React from 'react'\n\nimport Modal from 'src/components/Modal'\nimport { Button } from 'src/components/buttons'\nimport { Info2, P } from 'src/components/typography'\n\nimport styles from '../UserManagement.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst ChangeRoleModal = ({ state, dispatch }) => {\n const classes = useStyles()\n\n const handleClose = () => {\n dispatch({\n type: 'close',\n payload: 'showFIDOModal'\n })\n }\n\n return (\n \n This feature is only available for websites with configured domains, and\n we detected that a domain is not configured at the moment.\n
\n\n Make sure that a domain is configured for this website and try again\n later.\n
\n\n \n
\n \n )\n}\n\nexport default ChangeRoleModal\n","import { useMutation } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport React, { useEffect, useState } from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport { Info2, P, Mono } from 'src/components/typography'\nimport CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'\nimport { urlResolver } from 'src/utils/urlResolver'\n\nimport styles from '../UserManagement.styles'\n\nimport Input2FAModal from './Input2FAModal'\n\nconst CREATE_RESET_2FA_TOKEN = gql`\n mutation createReset2FAToken($confirmationCode: String, $userID: ID!) {\n createReset2FAToken(confirmationCode: $confirmationCode, userID: $userID) {\n token\n user_id\n expire\n }\n }\n`\n\nconst useStyles = makeStyles(styles)\n\nconst Reset2FAModal = ({ state, dispatch, user, requiresConfirmation }) => {\n const classes = useStyles()\n const [reset2FAUrl, setReset2FAUrl] = useState('')\n\n const [createReset2FAToken, { loading, error }] = useMutation(\n CREATE_RESET_2FA_TOKEN,\n {\n onCompleted: ({ createReset2FAToken: token }) => {\n setReset2FAUrl(urlResolver(`/reset2fa?t=${token.token}`))\n }\n }\n )\n\n const [confirmation, setConfirmation] = useState(null)\n\n useEffect(() => {\n state.showReset2FAModal &&\n (confirmation || !requiresConfirmation) &&\n createReset2FAToken({\n variables: {\n confirmationCode: confirmation,\n userID: user?.id\n }\n })\n }, [\n confirmation,\n createReset2FAToken,\n requiresConfirmation,\n state.showReset2FAModal,\n user?.id\n ])\n\n const handleClose = () => {\n setConfirmation(null)\n dispatch({\n type: 'close',\n payload: 'showReset2FAModal'\n })\n }\n\n return (\n (state.showReset2FAModal && requiresConfirmation && !confirmation && (\n \n Safely share this link with {user.username} for a two-factor\n authentication reset.\n
\n {!error && (\n\n \n \n \n {reset2FAUrl}\n \n \n \n
\n )}\n {error && \n Safely share this link with {user.username} for a password reset.\n
\n {!error && (\n\n \n \n \n {resetPasswordUrl}\n \n \n \n
\n )}\n {error && \n {u.username}\n
\n )\n return {u.username}\n }\n },\n {\n header: 'Role',\n width: 160,\n textAlign: 'left',\n size: 'sm',\n view: u => (\n \n {roleMapper[u.role]}\n {\n setUserInfo(u)\n dispatch({\n type: 'open',\n payload: 'showRoleModal'\n })\n }}\n value={u.role === 'superuser'}\n />\n
\n )\n },\n {\n header: 'Actions',\n width: 565,\n textAlign: 'left',\n size: 'sm',\n view: u => {\n return (\n \n {\n setUserInfo(u)\n dispatch({\n type: 'open',\n payload: 'showResetPasswordModal'\n })\n }}>\n Reset password\n \n {\n setUserInfo(u)\n dispatch({\n type: 'open',\n payload: 'showReset2FAModal'\n })\n }}>\n Reset 2FA\n \n {\n if (IP_CHECK_REGEX.test(window.location.hostname)) {\n dispatch({\n type: 'open',\n payload: 'showFIDOModal'\n })\n } else {\n setUserInfo(u)\n generateAttestationOptions({\n variables: {\n userID: u.id,\n domain: window.location.hostname\n }\n })\n }\n }}>\n Add FIDO\n \n
\n )\n }\n },\n {\n header: 'Enabled',\n width: 100,\n textAlign: 'center',\n size: 'sm',\n view: u => (\n \n
\n {!advancedSettings && (\n <>\n \n + \n = \n
\n )\n}\n\nconst WalletInfoChip = ({ wallet, currency }) => {\n const classes = useStyles({ numberOfChips: CHIPS_PER_ROW })\n\n const getLogo = cryptoCode => {\n switch (cryptoCode) {\n case 'BTC':\n return \n
\n Available balance
\n\n \n {numberToFiatAmount(balance)}\n \n \n {R.toUpper(currency)}\n \n
\n \n
\n Total balance in wallets
\n\n \n {numberToFiatAmount(walletFiatSum())}\n \n \n {R.toUpper(currency)}\n \n
\n \n
\n Total assets
\n\n \n {numberToFiatAmount(balance)}\n \n \n {R.toUpper(currency)}\n \n
\n \n \n \n
\n )\n}\n\nconst ATMWallet = () => {\n const classes = useStyles({ numberOfChips: CHIPS_PER_ROW })\n const { userData } = useContext(AppContext)\n\n const { data, loading } = useQuery(GET_OPERATOR_BY_USERNAME, {\n context: { clientName: 'pazuz' },\n variables: { username: userData?.username }\n })\n\n const operatorData = R.path(['operatorByUsername'], data)\n\n const wallets = [\n {\n cryptoCode: 'BTC',\n name: 'Bitcoin',\n amount: operatorData?.cryptoBalances.xbt ?? 0,\n fiatValue: 0,\n isHedged: true\n },\n {\n cryptoCode: 'ETH',\n name: 'Ethereum',\n amount: operatorData?.cryptoBalances.eth ?? 0,\n fiatValue: 0,\n isHedged: true\n },\n {\n cryptoCode: 'LTC',\n name: 'Litecoin',\n amount: operatorData?.cryptoBalances.ltc ?? 0,\n fiatValue: 0,\n isHedged: true\n },\n {\n cryptoCode: 'ZEC',\n name: 'Z-Cash',\n amount: operatorData?.cryptoBalances.zec ?? 0,\n fiatValue: 0,\n isHedged: false\n },\n {\n cryptoCode: 'BCH',\n name: 'Bitcoin Cash',\n amount: operatorData?.cryptoBalances.bch ?? 0,\n fiatValue: 0,\n isHedged: true\n },\n {\n cryptoCode: 'DASH',\n name: 'Dash',\n amount: operatorData?.cryptoBalances.dash ?? 0,\n fiatValue: 0,\n isHedged: false\n }\n ]\n\n return (\n !loading && (\n <>\n \n {getLogo(wallet.cryptoCode)}\n \n {wallet.isHedged ? 'Hedged' : 'Not hedged'}\n \n
\n \n {wallet.name} value \n \n {numberToFiatAmount(wallet.amount.toFixed(1))} {wallet.cryptoCode}\n \n Hedged value \n \n {numberToFiatAmount(wallet.fiatValue)} {currency}\n \n
\n ATM Wallets
\n\n {R.map(\n it => (\n
\n \n )\n )\n}\n\nexport default ATMWallet\n","import {\n white,\n offColor,\n backgroundColor,\n subheaderColor\n} from 'src/styling/variables'\n\nconst styles = () => ({\n card: {\n wordWrap: 'break-word',\n boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)',\n borderRadius: 12,\n padding: 24,\n backgroundColor: white\n },\n h4: {\n marginTop: 0\n },\n label: {\n margin: 0,\n color: offColor\n },\n asset: {\n float: 'left'\n },\n amount: {\n float: 'right'\n },\n row: {\n backgroundColor: backgroundColor,\n borderBottom: 'none'\n },\n totalRow: {\n backgroundColor: subheaderColor,\n borderBottom: 'none'\n },\n leftSide: {\n margin: [[0, 10, 20, 0]]\n },\n rightSide: {\n margin: [[0, 0, 0, 10]]\n }\n})\n\nexport default styles\n","import { useQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { useContext } from 'react'\n\nimport AppContext from 'src/AppContext'\nimport { HoverableTooltip } from 'src/components/Tooltip'\nimport TitleSection from 'src/components/layout/TitleSection'\nimport DataTable from 'src/components/tables/DataTable'\nimport { H4, Info2, P } from 'src/components/typography'\nimport { numberToFiatAmount } from 'src/utils/number'\nimport { formatDate } from 'src/utils/timezones'\n\nimport styles from './Accounting.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_OPERATOR_BY_USERNAME = gql`\n query operatorByUsername($username: String) {\n operatorByUsername(username: $username) {\n id\n entityId\n name\n fiatBalances\n cryptoBalances\n machines\n joined\n assetValue\n preferredFiatCurrency\n contactInfo {\n name\n email\n }\n fundings {\n id\n origin\n destination\n fiatAmount\n fiatBalanceAfter\n fiatCurrency\n created\n status\n description\n }\n }\n }\n`\n\nconst GET_DATA = gql`\n query getData {\n config\n }\n`\n\nconst Assets = ({ balance, hedgingReserve, currency }) => {\n const classes = useStyles()\n\n return (\n \n - \n = \n
\n )\n}\n\nconst Accounting = () => {\n const classes = useStyles()\n const { userData } = useContext(AppContext)\n\n const { data: opData, loading: operatorLoading } = useQuery(\n GET_OPERATOR_BY_USERNAME,\n {\n context: { clientName: 'pazuz' },\n variables: { username: userData?.username }\n }\n )\n\n const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)\n const timezone = R.path(['config', 'locale_timezone'], configResponse)\n\n const loading = operatorLoading || configLoading\n\n const operatorData = R.path(['operatorByUsername'], opData)\n\n const elements = [\n {\n header: 'Operation',\n width: 500,\n size: 'sm',\n textAlign: 'left',\n view: it => {\n return (\n \n {it.description}\n {!!it.extraInfo && (\n \n
\n Pazuz fiat balance
\n\n \n {numberToFiatAmount(balance)}\n \n \n {R.toUpper(currency)}\n \n
\n \n
\n Hedging reserve
\n\n \n {numberToFiatAmount(hedgingReserve)}\n \n \n {R.toUpper(currency)}\n \n
\n \n
\n Available balance
\n\n \n {numberToFiatAmount(balance - hedgingReserve)}\n \n \n {R.toUpper(currency)}\n \n
\n {it.extraInfo}
\nFiat balance history
\n{title}
\n\n \n \n \n \n \n \n \n \n \n \n
\n \n )\n )\n}\n\nexport default Assets\n","import Fade from '@material-ui/core/Fade'\nimport Slide from '@material-ui/core/Slide'\nimport { makeStyles } from '@material-ui/core/styles'\nimport * as R from 'ramda'\nimport React, { useContext } from 'react'\nimport {\n matchPath,\n Redirect,\n Switch,\n useHistory,\n useLocation\n} from 'react-router-dom'\n\nimport AppContext from 'src/AppContext'\nimport Login from 'src/pages/Authentication/Login'\nimport Register from 'src/pages/Authentication/Register'\nimport Reset2FA from 'src/pages/Authentication/Reset2FA'\nimport ResetPassword from 'src/pages/Authentication/ResetPassword'\nimport Dashboard from 'src/pages/Dashboard'\nimport Machines from 'src/pages/Machines'\nimport Wizard from 'src/pages/Wizard'\n\nimport PrivateRoute from './PrivateRoute'\nimport PublicRoute from './PublicRoute'\nimport getLamassuRoutes from './lamassu.routes'\nimport getPazuzRoutes from './pazuz.routes'\n\nconst useStyles = makeStyles({\n wrapper: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n height: '100%'\n }\n})\n\nconst getTree = () => {\n const buildTarget = process.env.REACT_APP_BUILD_TARGET\n\n if (buildTarget === 'LAMASSU') {\n return getLamassuRoutes()\n }\n\n if (buildTarget === 'PAZUZ') {\n return getPazuzRoutes()\n }\n}\n\nconst tree = getTree()\n\nconst map = R.map(R.when(R.has('children'), R.prop('children')))\nconst mappedRoutes = R.compose(R.flatten, map)(tree)\nconst parentRoutes = R.filter(R.has('children'))(mappedRoutes).concat(\n R.filter(R.has('children'))(tree)\n)\nconst leafRoutes = R.compose(R.flatten, map)(mappedRoutes)\n\nconst flattened = R.concat(leafRoutes, parentRoutes)\n\nconst hasSidebar = route =>\n R.any(r => r.route === route)(\n R.compose(\n R.flatten,\n R.map(R.prop('children')),\n R.filter(R.has('children'))\n )(mappedRoutes)\n )\n\nconst getParent = route =>\n R.find(\n R.propEq(\n 'route',\n R.dropLast(\n 1,\n R.dropLastWhile(x => x !== '/', route)\n )\n )\n )(flattened)\n\nconst Routes = () => {\n const classes = useStyles()\n\n const history = useHistory()\n const location = useLocation()\n const { wizardTested, userData } = useContext(AppContext)\n\n const dontTriggerPages = [\n '/404',\n '/register',\n '/wizard',\n '/login',\n '/register',\n '/resetpassword',\n '/reset2fa'\n ]\n\n if (!wizardTested && !R.contains(location.pathname)(dontTriggerPages)) {\n history.push('/wizard')\n return null\n }\n\n const getFilteredRoutes = () => {\n if (!userData) return []\n\n return flattened.filter(value => {\n const keys = value.allowedRoles\n return R.includes(userData.role, keys)\n })\n }\n\n const Transition = location.state ? Slide : Fade\n\n const transitionProps =\n Transition === Slide\n ? {\n direction:\n R.findIndex(R.propEq('route', location.state.prev))(leafRoutes) >\n R.findIndex(R.propEq('route', location.pathname))(leafRoutes)\n ? 'right'\n : 'left'\n }\n : { timeout: 400 }\n\n return (\n \n
\n \n
\n \n
\n \n {!is404 && wizardTested && userData && (\n \n {sidebar && !is404 && wizardTested && (\n \n
\n }\n />\n )}\n\n {!loading &&
\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","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: \"nav-/-primary-/-1440\",\n transform: \"translate(-1295.000000, -19.000000)\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/menu/notification\",\n transform: \"translate(1296.000000, 20.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.1052632,14.3157895 C10.1052632,15.2454737 9.35073684,16 8.42105263,16 C7.49136842,16 6.73684211,15.2454737 6.73684211,14.3157895\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1.6,14.3157895 C0.7168,14.3157895 0,13.6031813 0,12.7251462 C0,11.8471111 0.7168,11.1345029 1.6,11.1345029 L1.6,6.3625731 C1.6,2.84884211 4.4656,0 8,0 C11.5344,0 14.4,2.84884211 14.4,6.3625731 L14.4,11.1345029 C15.2832,11.1345029 16,11.8471111 16,12.7251462 C16,13.6031813 15.2832,14.3157895 14.4,14.3157895 L1.6,14.3157895 Z\",\n id: \"Stroke-3\",\n strokeLinejoin: \"round\"\n}))));\n\nfunction SvgNotificationZodiac(_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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgNotificationZodiac);\nexport default __webpack_public_path__ + \"static/media/notification-zodiac.e2897b39.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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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/zodiac/empty\",\n stroke: \"none\",\n strokeWidth: 2,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-Copy-6\",\n stroke: \"#5F668A\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.631601f2.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/zodiac/full\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-2-Copy\",\n fill: \"#1B2559\",\n cx: 9,\n cy: 9,\n r: 8\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-Copy-5\",\n stroke: \"#1B2559\",\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 SvgFull(_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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgFull);\nexport default __webpack_public_path__ + \"static/media/full.67b8cd67.svg\";\nexport { ForwardRef as ReactComponent };","import {\n spacer,\n white,\n zircon,\n secondaryColor,\n spring3,\n comet\n} from 'src/styling/variables'\n\nconst styles = {\n container: {\n '@media only screen and (max-width: 1920px)': {\n width: '30vw'\n },\n width: '40vw',\n height: '110vh',\n right: 0,\n backgroundColor: white,\n boxShadow: '0 0 14px 0 rgba(0, 0, 0, 0.24)'\n },\n header: {\n display: 'flex',\n justifyContent: 'space-between'\n },\n headerText: {\n marginTop: spacer * 2.5,\n marginLeft: spacer * 3\n },\n actionButtons: {\n display: 'flex',\n marginLeft: spacer * 2,\n height: 0\n },\n notificationIcon: ({ buttonCoords, xOffset }) => ({\n position: 'absolute',\n top: buttonCoords ? buttonCoords.y : 0,\n left: buttonCoords ? buttonCoords.x - xOffset : 0,\n cursor: 'pointer',\n background: 'transparent',\n boxShadow: '0px 0px 0px transparent',\n border: '0px solid transparent',\n textShadow: '0px 0px 0px transparent',\n outline: 'none'\n }),\n clearAllButton: {\n marginTop: -spacer * 2,\n marginLeft: spacer,\n backgroundColor: zircon\n },\n notificationsList: {\n height: '90vh',\n maxHeight: '100vh',\n marginTop: spacer * 3,\n marginLeft: 0,\n overflowY: 'auto',\n overflowX: 'hidden',\n backgroundColor: white,\n zIndex: 10\n },\n notificationRow: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'flex-start',\n position: 'relative',\n marginBottom: spacer / 2,\n paddingTop: spacer * 1.5,\n '& > *:first-child': {\n marginRight: 24\n },\n '& > *': {\n marginRight: 10\n },\n '& > *:last-child': {\n marginRight: 0\n }\n },\n notificationContent: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n width: 300\n },\n unread: {\n backgroundColor: spring3\n },\n notificationRowIcon: {\n alignSelf: 'center',\n '& > *': {\n marginLeft: spacer * 3\n }\n },\n readIconWrapper: {\n flexGrow: 1\n },\n unreadIcon: {\n marginTop: 2,\n width: '12px',\n height: '12px',\n backgroundColor: secondaryColor,\n borderRadius: '50%',\n cursor: 'pointer',\n zIndex: 1\n },\n readIcon: {\n marginLeft: spacer,\n marginTop: 5,\n width: '12px',\n height: '12px',\n border: [[1, 'solid', comet]],\n borderRadius: '50%',\n cursor: 'pointer',\n zIndex: 1\n },\n notificationTitle: {\n margin: 0,\n color: comet\n },\n notificationBody: {\n margin: 0\n },\n notificationSubtitle: {\n margin: 0,\n marginBottom: spacer,\n color: comet\n },\n stripes: {\n position: 'absolute',\n height: '100%',\n top: '0px',\n opacity: '60%'\n },\n hasUnread: {\n position: 'absolute',\n top: 0,\n left: 16,\n width: '9px',\n height: '9px',\n backgroundColor: secondaryColor,\n borderRadius: '50%'\n }\n}\n\nexport default styles\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(\"g\", {\n id: \"\\\\u21B3-notification-center\",\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: \"notification-center_v01a#2-(open)\",\n transform: \"translate(-1023.000000, -459.000000)\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\",\n transform: \"translate(1000.000000, 0.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/wrench\",\n transform: \"translate(24.000000, 460.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.7602493,3.10720971 L13.1962412,5.67121772 L10.3290323,5.67121772 L10.3290323,2.80400876 L12.8930403,0.24000075 C12.4378389,0.0872002725 11.9506373,0 11.4434358,0 C8.9282279,0 6.88822153,2.04000637 6.88822153,4.55681424 C6.88822153,5.08081588 6.98102182,5.58321745 7.14422233,6.05201891 L0.580201813,12.6168394 C-0.193400604,13.3904418 -0.193400604,14.6456458 0.580201813,15.4200482 C1.35460423,16.1936506 2.60980816,16.1936506 3.38341057,15.4200482 L9.94823109,8.85602767 C10.4170326,9.01922818 10.9186341,9.11202847 11.4434358,9.11202847 C13.9602436,9.11202847 16.00025,7.0720221 16.00025,4.55681424 C16.00025,4.04961265 15.9130497,3.56241113 15.7602493,3.10720971 Z\",\n id: \"Stroke-1\"\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: \"32px\",\n height: \"32px\",\n viewBox: \"0 0 18 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.1806a875.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: \"\\\\u21B3-notification-center\",\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: \"notification-center_v01a#1-(marked-one-as-read)\",\n transform: \"translate(-1023.000000, -123.000000)\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5\",\n transform: \"translate(1000.000000, 0.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-4\",\n transform: \"translate(24.000000, 124.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-3\"\n}, /*#__PURE__*/React.createElement(\"line\", {\n x1: 0,\n y1: 4,\n x2: 16,\n y2: 4,\n id: \"Path-2\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Path-3\",\n points: \"12 0 16 4 12 8\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\",\n transform: \"translate(8.000000, 12.000000) scale(-1, 1) translate(-8.000000, -12.000000) translate(0.000000, 8.000000)\"\n}, /*#__PURE__*/React.createElement(\"line\", {\n x1: 0,\n y1: 4,\n x2: 16,\n y2: 4,\n id: \"Path-2-Copy\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Path-3-Copy\",\n points: \"12 0 16 4 12 8\"\n}))))));\n\nfunction SvgTransaction(_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 18 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgTransaction);\nexport default __webpack_public_path__ + \"static/media/transaction.d1309f34.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/tomato\"\n}, /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle\",\n stroke: \"#FF584A\",\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: \"#FF584A\",\n fillRule: \"nonzero\"\n})));\n\nfunction SvgTomato(_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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgTomato);\nexport default __webpack_public_path__ + \"static/media/tomato.4b561f6f.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport prettyMs from 'pretty-ms'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { Label1, Label2, TL2 } from 'src/components/typography'\nimport { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg'\nimport { ReactComponent as Transaction } from 'src/styling/icons/arrow/transaction.svg'\nimport { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/tomato.svg'\n\nimport styles from './NotificationCenter.styles'\nconst useStyles = makeStyles(styles)\n\nconst types = {\n transaction: {\n display: 'Transactions',\n icon:\n
\n {icon}
\n \n \n {notificationTitle}\n \n {message} \n {age} \n
\n \n toggleClear(id)}\n className={classnames(iconClass)}\n />\n
\n \n )\n}\n\nexport default NotificationRow\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, { useState, useEffect } from 'react'\n\nimport ActionButton from 'src/components/buttons/ActionButton'\nimport { H5 } from 'src/components/typography'\nimport { ReactComponent as NotificationIconZodiac } from 'src/styling/icons/menu/notification-zodiac.svg'\nimport { ReactComponent as ClearAllIconInverse } from 'src/styling/icons/stage/spring/empty.svg'\nimport { ReactComponent as ClearAllIcon } from 'src/styling/icons/stage/zodiac/empty.svg'\nimport { ReactComponent as ShowUnreadIcon } from 'src/styling/icons/stage/zodiac/full.svg'\n\nimport styles from './NotificationCenter.styles'\nimport NotificationRow from './NotificationRow'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_NOTIFICATIONS = gql`\n query getNotifications {\n notifications {\n id\n type\n detail\n message\n created\n read\n valid\n }\n hasUnreadNotifications\n machines {\n deviceId\n name\n }\n }\n`\n\nconst TOGGLE_CLEAR_NOTIFICATION = gql`\n mutation toggleClearNotification($id: ID!, $read: Boolean!) {\n toggleClearNotification(id: $id, read: $read) {\n id\n read\n }\n }\n`\n\nconst CLEAR_ALL_NOTIFICATIONS = gql`\n mutation clearAllNotifications {\n clearAllNotifications {\n id\n }\n }\n`\n\nconst NotificationCenter = ({\n close,\n hasUnreadProp,\n buttonCoords,\n popperRef,\n refetchHasUnreadHeader\n}) => {\n const { data, loading } = useQuery(GET_NOTIFICATIONS, {\n pollInterval: 60000\n })\n const [xOffset, setXoffset] = useState(300)\n\n const [showingUnread, setShowingUnread] = useState(false)\n const classes = useStyles({ buttonCoords, xOffset })\n const machines = R.compose(\n R.map(R.prop('name')),\n R.indexBy(R.prop('deviceId'))\n )(R.path(['machines'])(data) ?? [])\n const notifications = R.path(['notifications'])(data) ?? []\n const [hasUnread, setHasUnread] = useState(hasUnreadProp)\n\n const [toggleClearNotification] = useMutation(TOGGLE_CLEAR_NOTIFICATION, {\n onError: () => console.error('Error while clearing notification'),\n refetchQueries: () => ['getNotifications']\n })\n const [clearAllNotifications] = useMutation(CLEAR_ALL_NOTIFICATIONS, {\n onError: () => console.error('Error while clearing all notifications'),\n refetchQueries: () => ['getNotifications']\n })\n\n useEffect(() => {\n setXoffset(popperRef.current.getBoundingClientRect().x)\n if (data && data.hasUnreadNotifications !== hasUnread) {\n refetchHasUnreadHeader()\n setHasUnread(!hasUnread)\n }\n }, [popperRef, data, hasUnread, refetchHasUnreadHeader])\n\n const buildNotifications = () => {\n const notificationsToShow =\n !showingUnread || !hasUnread\n ? notifications\n : R.filter(R.propEq('read', false))(notifications)\n return notificationsToShow.map(n => {\n return (\n \n
\n \n )\n}\n\nexport default NotificationCenter\n","import NotificationCenter from './NotificationCenter'\nexport default NotificationCenter\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 \n
\n Notifications
\n \n\n {hasUnread && (\n setShowingUnread(!showingUnread)}>\n {showingUnread ? 'Show all' : 'Show unread'}\n \n )}\n {hasUnread && (\n \n Mark all as read\n \n )}\n
\n \n {!loading && buildNotifications()}\n
\n {children}
\n})\n\nexport default Title\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/add/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.5384615,6 C11.5384615,9.05815385 9.05815385,11.5384615 6,11.5384615 C2.94184615,11.5384615 0.461538462,9.05815385 0.461538462,6 C0.461538462,2.94184615 2.94184615,0.461538462 6,0.461538462 C9.05815385,0.461538462 11.5384615,2.94184615 11.5384615,6 Z\",\n id: \"Stroke-1\",\n stroke: \"#1B2559\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 3.69230769,\n x2: 6,\n y2: 8.30769231,\n id: \"Stroke-3\",\n stroke: \"#1B2559\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 3.69230769,\n y1: 6,\n x2: 8.30769231,\n y2: 6,\n id: \"Stroke-5\",\n stroke: \"#1B2559\"\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.a976fef2.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport typographyStyles from 'src/components/typography/styles'\nimport { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'\nimport { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'\n\nconst { p } = typographyStyles\n\nconst styles = {\n button: {\n extend: p,\n border: 'none',\n backgroundColor: zircon,\n cursor: 'pointer',\n outline: 0,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: 167,\n height: 48,\n color: fontColor,\n '&:hover': {\n backgroundColor: zircon2\n },\n '&:active': {\n backgroundColor: comet,\n color: white,\n '& svg g *': {\n stroke: white\n }\n },\n '& svg': {\n marginRight: 8\n }\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst SimpleButton = memo(({ className, children, ...props }) => {\n const classes = useStyles()\n\n return (\n \n )\n})\n\nexport default SimpleButton\n","import typographyStyles from 'src/components/typography/styles'\nimport {\n white,\n disabledColor,\n secondaryColor,\n secondaryColorDark,\n secondaryColorDarker,\n offColor,\n offDarkColor,\n offDarkerColor,\n spacer\n} from 'src/styling/variables'\n\nconst { h1, h3 } = typographyStyles\n\nconst pickSize = size => {\n switch (size) {\n case 'xl':\n return spacer * 7.625\n case 'sm':\n return spacer * 4\n case 'lg':\n default:\n return spacer * 5\n }\n}\n\nexport default {\n wrapper: ({ size }) => {\n const height = pickSize(size)\n const shadowSize = height / 12\n return { height: height + shadowSize / 2 }\n },\n button: ({ size, backgroundColor }) => {\n const height = pickSize(size)\n const shadowSize = size === 'xl' ? 3 : height / 12\n const padding = size === 'xl' ? 20 : height / 2\n const isGrey = backgroundColor === 'grey'\n\n return {\n extend: size === 'xl' ? h1 : h3,\n border: 'none',\n color: white,\n cursor: 'pointer',\n fontWeight: 900,\n outline: 0,\n backgroundColor: isGrey ? offDarkColor : secondaryColor,\n '&:disabled': {\n backgroundColor: disabledColor,\n boxShadow: 'none',\n '&:hover': {\n backgroundColor: disabledColor,\n boxShadow: 'none'\n },\n '&:active': {\n marginTop: 0\n }\n },\n shadowSize,\n height,\n padding: `0 ${padding}px`,\n borderRadius: height / 4,\n boxShadow: `0 ${shadowSize}px ${isGrey ? offColor : secondaryColorDark}`,\n '&:hover': {\n backgroundColor: isGrey ? offColor : secondaryColorDark,\n boxShadow: `0 ${shadowSize}px ${\n isGrey ? offDarkerColor : secondaryColorDarker\n }`\n },\n '&:active': {\n marginTop: shadowSize / 2,\n backgroundColor: isGrey ? offDarkColor : secondaryColorDark,\n boxShadow: `0 ${shadowSize / 2}px ${\n isGrey ? offDarkerColor : secondaryColorDarker\n }`\n }\n }\n }\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport styles from './Button.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst ActionButton = memo(\n ({\n size = 'lg',\n children,\n className,\n buttonClassName,\n backgroundColor,\n ...props\n }) => {\n const classes = useStyles({ size, backgroundColor })\n return (\n\n \n {children}\n \n
\n )\n }\n)\n\nexport default ActionButton\n","import {\n white,\n fontColor,\n subheaderColor,\n subheaderDarkColor,\n offColor,\n offDarkColor\n} from 'src/styling/variables'\n\nconst colors = (color1, color2, color3) => {\n return {\n backgroundColor: color1,\n '&:hover': {\n backgroundColor: color2\n },\n '&:active': {\n backgroundColor: color3\n }\n }\n}\n\nconst buttonHeight = 32\n\nexport default {\n baseButton: {\n extend: colors(subheaderColor, subheaderDarkColor, offColor),\n cursor: 'pointer',\n border: 'none',\n outline: 0,\n height: buttonHeight,\n color: fontColor,\n '&:active': {\n color: white\n }\n },\n primary: {\n extend: colors(subheaderColor, subheaderDarkColor, offColor),\n '&:active': {\n color: white,\n '& $buttonIcon': {\n display: 'none'\n },\n '& $buttonIconActive': {\n display: 'block'\n }\n },\n '& $buttonIconActive': {\n display: 'none'\n }\n },\n secondary: {\n extend: colors(offColor, offDarkColor, white),\n color: white,\n '&:active': {\n color: fontColor,\n '& $buttonIcon': {\n display: 'flex'\n },\n '& $buttonIconActive': {\n display: 'none'\n }\n },\n '& $buttonIcon': {\n display: 'none'\n },\n '& $buttonIconActive': {\n display: 'flex'\n }\n }\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport baseButtonStyles from './BaseButton.styles'\n\nconst { baseButton, primary } = baseButtonStyles\n\nconst styles = {\n featureButton: {\n extend: baseButton,\n width: baseButton.height,\n borderRadius: baseButton.height / 2,\n display: 'flex',\n padding: 0\n },\n primary,\n buttonIcon: {\n margin: 'auto',\n '& svg': {\n width: 16,\n height: 16,\n overflow: 'visible',\n '& g': {\n strokeWidth: 1.8\n }\n }\n },\n buttonIconActive: {} // required to extend primary\n}\n\nconst useStyles = makeStyles(styles)\n\nconst FeatureButton = memo(\n ({ className, Icon, InverseIcon, children, ...props }) => {\n const classes = useStyles()\n\n const classNames = {\n [classes.featureButton]: true,\n [classes.primary]: true\n }\n\n return (\n \n )\n }\n)\n\nexport default FeatureButton\n","import { makeStyles, Popper as MaterialPopper, Paper } from '@material-ui/core'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { white } from 'src/styling/variables'\n\nconst Popover = ({\n children,\n bgColor = white,\n arrowSize = 6,\n className,\n ...props\n}) => {\n const [arrowRef, setArrowRef] = useState(null)\n\n const styles = {\n popover: {\n zIndex: 3000,\n backgroundColor: bgColor,\n borderRadius: 4\n },\n arrow: {\n position: 'absolute',\n fontSize: arrowSize,\n width: '3em',\n height: '3em'\n },\n arrowBottom: {\n top: 0,\n width: 0,\n height: 0,\n borderLeft: [['2em', 'solid', 'transparent']],\n borderRight: [['2em', 'solid', 'transparent']],\n borderBottom: [['2em', 'solid', bgColor]],\n marginTop: '-1.9em',\n '&:after': {\n zIndex: -10,\n content: '\"\"',\n position: 'absolute',\n width: arrowSize * 3,\n height: arrowSize * 3,\n marginLeft: 0,\n bottom: 0,\n top: 'calc(50% - 0px)',\n left: 0,\n border: '5px solid #fff',\n borderColor: 'transparent transparent #fff #fff',\n transformOrigin: '0 0',\n transform: 'rotate(45deg)',\n boxShadow:\n '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)'\n }\n },\n arrowTop: {\n bottom: 0,\n width: 0,\n height: 0,\n borderLeft: [['2em', 'solid', 'transparent']],\n borderRight: [['2em', 'solid', 'transparent']],\n borderTop: [['2em', 'solid', bgColor]],\n marginBottom: '-1.9em',\n '&:after': {\n zIndex: -10,\n content: '\"\"',\n position: 'absolute',\n width: arrowSize * 3,\n height: arrowSize * 3,\n marginLeft: 0,\n bottom: 0,\n top: -(arrowSize * 4 + 2),\n left: 0,\n border: '5px solid #fff',\n borderColor: 'transparent transparent #fff #fff',\n transformOrigin: '0 0',\n transform: 'rotate(45deg)',\n boxShadow:\n '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)'\n }\n },\n arrowRight: {\n left: 0,\n width: 0,\n height: 0,\n borderTop: [['2em', 'solid', 'transparent']],\n borderBottom: [['2em', 'solid', 'transparent']],\n borderRight: [['2em', 'solid', bgColor]],\n marginLeft: '-1.9em'\n },\n arrowLeft: {\n right: 0,\n width: 0,\n height: 0,\n borderTop: [['2em', 'solid', 'transparent']],\n borderBottom: [['2em', 'solid', 'transparent']],\n borderLeft: [['2em', 'solid', bgColor]],\n marginRight: '-1.9em'\n },\n root: {\n backgroundColor: bgColor\n }\n }\n\n const useStyles = makeStyles(styles)\n\n const classes = useStyles()\n\n const arrowClasses = {\n [classes.arrow]: true,\n [classes.arrowBottom]: props.placement === 'bottom',\n [classes.arrowTop]: props.placement === 'top',\n [classes.arrowRight]: props.placement === 'right',\n [classes.arrowLeft]: props.placement === 'left'\n }\n\n const modifiers = R.merge(props.modifiers, {\n flip: {\n enabled: false\n },\n preventOverflow: {\n enabled: true,\n boundariesElement: 'scrollParent'\n },\n offset: {\n enabled: true,\n offset: '0, 10'\n },\n arrow: {\n enabled: true,\n element: arrowRef\n },\n computeStyle: {\n gpuAcceleration: false\n }\n })\n\n return (\n <>\n \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 {children}
\n\n {!rightSideLabel && {label} }\n {label} }\n
\n ) : (\n \n {disabledMessage} \n
\n )}\n \n )\n}\n\nexport default CheckboxInput\n","import { primaryColor, zircon, errorColor } from 'src/styling/variables'\n\nconst styles = {\n input: {\n width: '3.5rem !important',\n height: '5rem',\n border: '2px solid',\n borderColor: zircon,\n borderRadius: '4px'\n },\n focus: {\n border: '2px solid',\n borderColor: primaryColor,\n borderRadius: '4px',\n '&:focus': {\n outline: 'none'\n }\n },\n error: {\n borderColor: errorColor\n },\n container: {\n justifyContent: 'space-evenly'\n }\n}\n\nexport default styles\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport React from 'react'\nimport OtpInput from 'react-otp-input'\n\nimport typographyStyles from 'src/components/typography/styles'\n\nimport styles from './CodeInput.styles'\n\nconst useStyles = makeStyles(styles)\nconst useTypographyStyles = makeStyles(typographyStyles)\n\nconst CodeInput = ({\n name,\n value,\n onChange,\n numInputs,\n error,\n inputStyle,\n containerStyle,\n ...props\n}) => {\n const classes = useStyles()\n const typographyClasses = useTypographyStyles()\n\n return (\n \n {option.subtitle} \n )}\n
\n \n
\n \n )\n })}\n \n )\n}\n\nexport default ToggleButtonGroup\n","import { useFormikContext } from 'formik'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { Autocomplete } from '../base'\n\nconst AutocompleteFormik = ({ options, onChange, ...props }) => {\n const [open, setOpen] = useState(false)\n\n const { name, onBlur, value } = props.field\n const { touched, errors, setFieldValue, setFieldTouched } = props.form\n const error = !!(touched[name] && errors[name])\n const { initialValues, values } = useFormikContext()\n\n const innerOptions =\n R.type(options) === 'Function' ? options(initialValues, values) : options\n\n const innerOnBlur = event => {\n name && setFieldTouched(name, true)\n onBlur && onBlur(event)\n }\n\n const onChangeHandler = value => setFieldValue(name, value)\n const shouldStayOpen = !!props.shouldStayOpen\n\n return (\n \n
\n {option.title}
\n{option.description}
\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 = ({ currency, notes, total }) => {\n const classes = gridClasses()\n return (\n <>\n \n {!omitInnerPercentage && ltHalf && (\n {percent.toFixed(0)}% \n )}\n
\n \n {!omitInnerPercentage && !ltHalf && (\n {percent.toFixed(0)}% \n )}\n
\n \n
\n \n )\n}\n\nconst CashOut = ({\n capacity = 500,\n denomination = 0,\n currency,\n notes,\n className,\n editingMode = false,\n threshold,\n width\n}) => {\n const percent = (100 * notes) / capacity\n const isLow = percent < threshold\n const classes = gridClasses()\n return (\n <>\n \n
\n \n {notes} notes \n
\n \n \n {total} {currency.code}\n \n
\n \n
\n \n )\n}\n\nexport { Cashbox, CashIn, CashOut }\n","import { makeStyles } from '@material-ui/core'\nimport classNames from 'classnames'\nimport React, { memo, useState } from 'react'\n\nimport { CashOut } from 'src/components/inputs/cashbox/Cashbox'\n\nimport { NumberInput } from '../base'\nconst useStyles = makeStyles({\n flex: {\n display: 'flex'\n },\n cashCassette: {\n height: 36,\n marginRight: 14\n }\n})\n\nconst CashCassetteInput = memo(\n ({ decimalPlaces, width, threshold, inputClassName, ...props }) => {\n const classes = useStyles()\n const { name, onChange, onBlur, value } = props.field\n const { touched, errors } = props.form\n const [notes, setNotes] = useState(value)\n const error = !!(touched[name] && errors[name])\n return (\n \n
\n {!editingMode && (\n \n
\n )}\n \n {notes} \n
\n \n \n {numberToFiatAmount(notes * denomination)} {currency.code}\n \n
\n \n {\n setNotes(e.target.value)\n return onChange(e)\n }}\n onBlur={onBlur}\n value={value}\n error={error}\n decimalPlaces={decimalPlaces}\n {...props}\n />\n
\n )\n }\n)\n\nexport default CashCassetteInput\n","import React, { memo } from 'react'\n\nimport { Checkbox } from '../base'\n\nconst CheckboxInput = memo(\n ({\n label,\n textAlign,\n fullWidth,\n enabled = true,\n disabledMessage = '',\n ...props\n }) => {\n const { name, onChange, value = true } = props.field\n\n const settings = {\n enabled: enabled,\n label: label,\n disabledMessage: disabledMessage\n }\n\n return (\n \n {loading &&
\n ))}\n {!loading && 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 Loading...
}\n {!loading &&\n data?.map((it, idx) => (\n onClick(it)}>\n \n {itemRender ? itemRender(it, isSelected(it)) : displayName(it)}\n
\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(\"g\", {\n id: \"icon/ID/photo/new/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: \"M12,14 C9.7912,14 8,12.2088 8,10 C8,7.7912 9.7912,6 12,6 C14.2088,6 16,7.7912 16,10 C16,12.2088 14.2088,14 12,14 Z M16.7142857,3.4 L14.3571429,1 L9.64285714,1 L7.28571429,3.4 L1,3.4 L1,17 L23,17 L23,3.4 L16.7142857,3.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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/photo/new/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.088002a2.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-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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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: \"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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","import typographyStyles from 'src/components/typography/styles'\nimport {\n placeholderColor,\n backgroundColor,\n primaryColor,\n mainWidth,\n spring2,\n spring3,\n errorColor\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 qrTextInfoWrapper: {\n display: 'flex',\n flexDirection: 'row'\n },\n qrTextWrapper: {\n width: 381,\n marginLeft: 80,\n display: 'flex',\n flexDirection: 'column'\n },\n textWrapper: {\n display: 'flex',\n flexDirection: 'column'\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 successMessageWrapper: {\n backgroundColor: spring3,\n display: 'flex',\n flexDirection: 'row',\n padding: '0px 10px',\n borderRadius: '8px'\n },\n successMessage: {\n color: spring2,\n margin: '8px 0px'\n },\n successMessageIcon: {\n marginRight: 16,\n marginBottom: 2,\n display: 'flex',\n flexDirection: 'col',\n alignItems: 'center'\n },\n errorMessage: {\n color: errorColor\n },\n qrCodeImageWrapper: {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: 'white',\n border: `5px solid ${primaryColor}`,\n padding: 5,\n borderRadius: 15\n },\n qrCodeScanMessage: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n margin: [[0, 0, 20, 20]],\n '& > p': {\n marginLeft: 10\n }\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, useEffect, useRef } 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 CameraIcon } from 'src/styling/icons/ID/photo/zodiac.svg'\nimport { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'\nimport { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.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 timeout = useRef(null)\n const CLOSE_SCREEN_TIMEOUT = 2000\n const { data } = useQuery(GET_MACHINES, { pollInterval: 10000 })\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current)\n }\n }\n }, [])\n\n const addedMachine = data?.machines?.find(m => m.name === name)\n const hasNewMachine = getSize(data) > count && addedMachine\n if (hasNewMachine) {\n timeout.current = setTimeout(\n () => onPaired(addedMachine),\n CLOSE_SCREEN_TIMEOUT\n )\n }\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('Machine name is required.')\n .max(50)\n .test(\n 'unique-name',\n 'Machine name is already in use.',\n (value, context) => !context.options.context.machineNames.includes(value)\n )\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 const { data } = useQuery(GET_MACHINES)\n const machineNames = R.map(R.prop('name'), data?.machines || {})\n\n const uniqueNameValidator = value => {\n try {\n validationSchema.validateSync(value, {\n context: { machineNames: machineNames }\n })\n } catch (error) {\n return error\n }\n }\n\n return (\n <>\n \n
\n \n
\n Snap a picture and scan
\n\n
\n \n
\n {hasNewMachine && (\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\n your machine.\n
\n\n \n Machine has been successfully paired!\n \n
\n )}\n \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(\"g\", {\n id: \"icon/button/add/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.5384615,6 C11.5384615,9.05815385 9.05815385,11.5384615 6,11.5384615 C2.94184615,11.5384615 0.461538462,9.05815385 0.461538462,6 C0.461538462,2.94184615 2.94184615,0.461538462 6,0.461538462 C9.05815385,0.461538462 11.5384615,2.94184615 11.5384615,6 Z\",\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 3.69230769,\n x2: 6,\n y2: 8.30769231,\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 3.69230769,\n y1: 6,\n x2: 8.30769231,\n y2: 6,\n id: \"Stroke-5\",\n stroke: \"#FFFFFF\"\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.cc7667ff.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(\"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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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: \"nav-/-primary-/-1440\",\n transform: \"translate(-1295.000000, -19.000000)\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/menu/notification\",\n transform: \"translate(1296.000000, 20.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.1052632,14.3157895 C10.1052632,15.2454737 9.35073684,16 8.42105263,16 C7.49136842,16 6.73684211,15.2454737 6.73684211,14.3157895\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1.6,14.3157895 C0.7168,14.3157895 0,13.6031813 0,12.7251462 C0,11.8471111 0.7168,11.1345029 1.6,11.1345029 L1.6,6.3625731 C1.6,2.84884211 4.4656,0 8,0 C11.5344,0 14.4,2.84884211 14.4,6.3625731 L14.4,11.1345029 C15.2832,11.1345029 16,11.8471111 16,12.7251462 C16,13.6031813 15.2832,14.3157895 14.4,14.3157895 L1.6,14.3157895 Z\",\n id: \"Stroke-3\",\n strokeLinejoin: \"round\"\n}))));\n\nfunction SvgNotification(_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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgNotification);\nexport default __webpack_public_path__ + \"static/media/notification.a9712ffd.svg\";\nexport { ForwardRef as ReactComponent };","import typographyStyles from 'src/components/typography/styles'\nimport {\n version,\n mainWidth,\n spacer,\n white,\n primaryColor,\n secondaryColor,\n placeholderColor,\n subheaderColor,\n fontColor\n} from 'src/styling/variables'\n\nconst { 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\nconst styles = {\n headerContainer: {\n position: 'relative'\n },\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 },\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 margin: 0\n },\n subheaderLi: {\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 textShadow: '0.2px 0 0 currentColor',\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 logoLink: {\n cursor: 'pointer'\n },\n actionButtonsContainer: {\n zIndex: 1,\n position: 'relative',\n display: 'flex',\n justifyContent: 'space-between',\n minWidth: 200,\n transform: 'translateZ(0)'\n },\n notificationIcon: {\n marginTop: spacer / 2,\n cursor: 'pointer',\n background: 'transparent',\n boxShadow: '0px 0px 0px transparent',\n border: '0px solid transparent',\n textShadow: '0px 0px 0px transparent',\n outline: 'none'\n },\n hasUnread: {\n position: 'absolute',\n top: 4,\n left: 186,\n width: '9px',\n height: '9px',\n backgroundColor: secondaryColor,\n borderRadius: '50%'\n },\n popper: {\n zIndex: 1\n }\n}\n\nexport default styles\n","import { useQuery } from '@apollo/react-hooks'\nimport ClickAwayListener from '@material-ui/core/ClickAwayListener'\nimport Popper from '@material-ui/core/Popper'\nimport { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { memo, useState, useEffect, useRef } from 'react'\nimport { NavLink, useHistory } from 'react-router-dom'\n\nimport NotificationCenter from 'src/components/NotificationCenter'\nimport ActionButton from 'src/components/buttons/ActionButton'\nimport { H4 } from 'src/components/typography'\nimport AddMachine from 'src/pages/AddMachine'\nimport { ReactComponent as AddIconReverse } from 'src/styling/icons/button/add/white.svg'\nimport { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'\nimport { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'\nimport { ReactComponent as NotificationIcon } from 'src/styling/icons/menu/notification.svg'\n\nimport styles from './Header.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst HAS_UNREAD = gql`\n query getUnread {\n hasUnreadNotifications\n }\n`\n\nconst Subheader = ({ item, classes, user }) => {\n const [prev, setPrev] = useState(null)\n\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 notNil = R.compose(R.not, R.isNil)\n\nconst Header = memo(({ tree, user }) => {\n const [open, setOpen] = useState(false)\n const [anchorEl, setAnchorEl] = useState(null)\n const [notifButtonCoords, setNotifButtonCoords] = useState({ x: 0, y: 0 })\n const [active, setActive] = useState()\n const [hasUnread, setHasUnread] = useState(false)\n\n const { data, refetch, startPolling, stopPolling } = useQuery(HAS_UNREAD)\n const notifCenterButtonRef = useRef()\n const popperRef = useRef()\n const history = useHistory()\n const classes = useStyles()\n\n useEffect(() => {\n if (data?.hasUnreadNotifications) return setHasUnread(true)\n // if not true, make sure it's false and not undefined\n if (notNil(data?.hasUnreadNotifications)) return setHasUnread(false)\n }, [data])\n\n useEffect(() => {\n startPolling(60000)\n return stopPolling\n })\n\n const onPaired = machine => {\n setOpen(false)\n history.push('/maintenance/machine-status', { id: machine.deviceId })\n }\n\n // these inline styles prevent scroll bubbling: when the user reaches the bottom of the notifications list and keeps scrolling,\n // the body scrolls, stealing the focus from the notification center, preventing the admin from scrolling the notifications back up\n // on the first scroll, needing to move the mouse to recapture the focus on the notification center\n // it also disables the scrollbars caused by the notification center's background to the right of the page, but keeps the scrolling on the body enabled\n const onClickAway = () => {\n setAnchorEl(null)\n document.querySelector('#root').classList.remove('root-notifcenter-open')\n document.querySelector('body').classList.remove('body-notifcenter-open')\n }\n\n const handleClick = event => {\n const coords = notifCenterButtonRef.current.getBoundingClientRect()\n setNotifButtonCoords({ x: coords.x, y: coords.y + 5 })\n\n setAnchorEl(anchorEl ? null : event.currentTarget)\n document.querySelector('#root').classList.add('root-notifcenter-open')\n document.querySelector('body').classList.add('body-notifcenter-open')\n }\n\n const popperOpen = Boolean(anchorEl)\n const id = popperOpen ? 'notifications-popper' : undefined\n return (\n \n \n
\n \n
\n \n {active && active.children && (\n \n {\n setActive(false)\n history.push('/dashboard')\n }}\n className={classnames(classes.logo, classes.logoLink)}>\n
\n \n Lamassu Admin
\n\n setOpen(true)}>\n Add machine\n \n \n \n
\n \n \n \n
\n \n {children} \n
\n )\n}\n\nexport default ErrorMessage\n","import { backgroundColor } from 'src/styling/variables'\n\nexport default {\n titleWrapper: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'row'\n },\n titleAndButtonsContainer: {\n display: 'flex',\n alignItems: 'center'\n },\n error: {\n marginLeft: 12\n },\n subpageButton: {\n marginLeft: 12\n },\n buttonText: {\n color: backgroundColor,\n fontFamily: 'Mont',\n fontSize: 15\n },\n icon: {\n marginRight: 6\n },\n label: {\n marginRight: 24\n }\n}\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 { SubpageButton } from 'src/components/buttons'\nimport { Info1, Label1 } from 'src/components/typography'\n\nimport styles from './TitleSection.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst TitleSection = ({\n className,\n title,\n error,\n labels,\n buttons = [],\n children,\n appendix,\n appendixRight\n}) => {\n const classes = useStyles()\n return (\n \n \n {(labels ?? []).map(({ icon, label }, idx) => (\n \n {label} \n \n ))}\n {appendixRight}\n \n {children}\n
\n )\n}\n\nexport default TitleSection\n","import { backgroundColor, errorColor } from 'src/styling/variables'\n\nconst styles = {\n title: {\n paddingTop: 8\n },\n input: {\n marginBottom: 25,\n marginTop: -15\n },\n wrapper: {\n padding: '2.5em 4em',\n width: 575,\n display: 'flex',\n flexDirection: 'column'\n },\n titleWrapper: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n marginBottom: 30\n },\n rememberMeWrapper: {\n marginTop: 35,\n display: 'flex',\n flexDirection: 'row'\n },\n icon: {\n transform: 'scale(1.5)',\n marginRight: 25\n },\n checkbox: {\n transform: 'scale(1.5)',\n marginRight: 5,\n marginLeft: -5\n },\n footer: {\n marginTop: '10vh'\n },\n twofaFooter: {\n marginTop: '6vh'\n },\n fidoLoginButtonWrapper: {\n marginBottom: 12\n },\n loginButton: {\n display: 'block',\n width: '100%'\n },\n welcomeBackground: {\n background: 'url(/wizard-background.svg) no-repeat center center fixed',\n backgroundColor: backgroundColor,\n backgroundSize: 'cover',\n height: '100vh',\n width: '100vw',\n position: 'relative',\n left: '50%',\n right: '50%',\n marginLeft: '-50vw',\n marginRight: '-50vw',\n minHeight: '100vh'\n },\n info: {\n marginBottom: '5vh'\n },\n info2: {\n textAlign: 'justify'\n },\n infoWrapper: {\n marginBottom: '3vh'\n },\n errorMessage: {\n color: errorColor\n },\n qrCodeWrapper: {\n display: 'flex',\n justifyContent: 'center',\n marginBottom: '3vh'\n },\n secretWrapper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n secretLabel: {\n marginRight: 15\n },\n secret: {\n marginRight: 35\n },\n hiddenSecret: {\n marginRight: 35,\n filter: 'blur(8px)'\n },\n confirm2FAInput: {\n marginTop: 25\n },\n confirmPassword: {\n marginTop: 25\n },\n error: {\n color: errorColor\n },\n enterButton: {\n display: 'none'\n }\n}\n\nexport default styles\n","const STATES = {\n LOGIN: 'LOGIN',\n SETUP_2FA: 'SETUP2FA',\n INPUT_2FA: 'INPUT2FA',\n FIDO: 'FIDO'\n}\n\nexport { STATES }\n","import { useMutation, useLazyQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport base64 from 'base-64'\nimport { Form, Formik } from 'formik'\nimport gql from 'graphql-tag'\nimport React, { useContext, useState } from 'react'\nimport { useHistory } from 'react-router-dom'\n\nimport AppContext from 'src/AppContext'\nimport { Button } from 'src/components/buttons'\nimport { CodeInput } from 'src/components/inputs/base'\nimport { TL1, P } from 'src/components/typography'\n\nimport styles from './shared.styles'\nimport { STATES } from './states'\n\nconst useStyles = makeStyles(styles)\n\nconst INPUT_2FA = gql`\n mutation input2FA(\n $username: String!\n $password: String!\n $code: String!\n $rememberMe: Boolean!\n ) {\n input2FA(\n username: $username\n password: $password\n code: $code\n rememberMe: $rememberMe\n )\n }\n`\n\nconst GET_USER_DATA = gql`\n {\n userData {\n id\n username\n role\n }\n }\n`\n\nconst Input2FAState = ({ state, dispatch }) => {\n const classes = useStyles()\n const history = useHistory()\n const { setUserData } = useContext(AppContext)\n\n const [invalidToken, setInvalidToken] = useState(false)\n\n const [getUserData, { error: queryError }] = useLazyQuery(GET_USER_DATA, {\n onCompleted: ({ userData }) => {\n setUserData(userData)\n history.push('/')\n }\n })\n\n const [input2FA, { error: mutationError }] = useMutation(INPUT_2FA, {\n onCompleted: ({ input2FA: success }) => {\n if (success) {\n const options = {\n context: {\n headers: {\n 'Pazuz-Operator-Identifier': base64.encode(state.clientField)\n }\n }\n }\n return getUserData(options)\n }\n return setInvalidToken(true)\n }\n })\n\n const handle2FAChange = value => {\n dispatch({\n type: STATES.INPUT_2FA,\n payload: {\n twoFAField: value\n }\n })\n setInvalidToken(false)\n }\n\n const handleSubmit = () => {\n if (state.twoFAField.length !== 6) {\n setInvalidToken(true)\n return\n }\n\n const options = {\n variables: {\n username: state.clientField,\n password: state.passwordField,\n code: state.twoFAField,\n rememberMe: state.rememberMeField\n },\n context: {\n headers: {\n 'Pazuz-Operator-Identifier': base64.encode(state.clientField)\n }\n }\n }\n\n input2FA(options)\n }\n\n const getErrorMsg = () => {\n if (queryError) return 'Internal server error'\n if (state.twoFAField.length !== 6 && invalidToken)\n return 'The code should have 6 characters!'\n if (mutationError || invalidToken)\n return 'Code is invalid. Please try again.'\n return null\n }\n\n const errorMessage = getErrorMsg()\n\n return (\n <>\n \n {title} \n {!!appendix && appendix}\n {error && (\n Failed to save \n )}\n {buttons.length > 0 && (\n <>\n {buttons.map((button, idx) => (\n \n {button.text} \n \n ))}\n \n )}\n
\n {icon}
\n \n {errorMessage &&
\n \n )\n}\n\nexport default Input2FAState\n","import { useMutation, useLazyQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core'\nimport { startAssertion } from '@simplewebauthn/browser'\nimport { Field, Form, Formik } from 'formik'\nimport gql from 'graphql-tag'\nimport React, { useState, useContext } from 'react'\nimport { useHistory } from 'react-router-dom'\nimport * as Yup from 'yup'\n\nimport AppContext from 'src/AppContext'\nimport { Button } from 'src/components/buttons'\nimport { Checkbox, TextInput } from 'src/components/inputs/formik'\nimport { H2, Label2, P } from 'src/components/typography'\n\nimport styles from './shared.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_USER_DATA = gql`\n {\n userData {\n id\n username\n role\n }\n }\n`\n\nconst validationSchema = Yup.object().shape({\n localClient: Yup.string()\n .required('Client field is required!')\n .email('Username field should be in an email format!'),\n localRememberMe: Yup.boolean()\n})\n\nconst initialValues = {\n localClient: '',\n localRememberMe: false\n}\n\nconst InputFIDOState = ({ state, strategy }) => {\n const GENERATE_ASSERTION = gql`\n query generateAssertionOptions($username: String!${\n strategy === 'FIDO2FA' ? `, $password: String!` : ``\n }, $domain: String!) {\n generateAssertionOptions(username: $username${\n strategy === 'FIDO2FA' ? `, password: $password` : ``\n }, domain: $domain)\n }\n `\n\n const VALIDATE_ASSERTION = gql`\n mutation validateAssertion(\n $username: String!\n ${strategy === 'FIDO2FA' ? `, $password: String!` : ``}\n $rememberMe: Boolean!\n $assertionResponse: JSONObject!\n $domain: String!\n ) {\n validateAssertion(\n username: $username\n ${strategy === 'FIDO2FA' ? `password: $password` : ``}\n rememberMe: $rememberMe\n assertionResponse: $assertionResponse\n domain: $domain\n )\n }\n `\n\n const classes = useStyles()\n const history = useHistory()\n const { setUserData } = useContext(AppContext)\n\n const [localClientField, setLocalClientField] = useState('')\n const [localRememberMeField, setLocalRememberMeField] = useState(false)\n const [invalidUsername, setInvalidUsername] = useState(false)\n const [invalidToken, setInvalidToken] = useState(false)\n\n const [validateAssertion, { error: mutationError }] = useMutation(\n VALIDATE_ASSERTION,\n {\n onCompleted: ({ validateAssertion: success }) => {\n success ? getUserData() : setInvalidToken(true)\n }\n }\n )\n\n const [assertionOptions, { error: assertionQueryError }] = useLazyQuery(\n GENERATE_ASSERTION,\n {\n variables:\n strategy === 'FIDO2FA'\n ? {\n username: state.clientField,\n password: state.passwordField,\n domain: window.location.hostname\n }\n : {\n username: localClientField,\n domain: window.location.hostname\n },\n onCompleted: ({ generateAssertionOptions: options }) => {\n startAssertion(options)\n .then(res => {\n const variables =\n strategy === 'FIDO2FA'\n ? {\n username: state.clientField,\n password: state.passwordField,\n rememberMe: state.rememberMeField,\n assertionResponse: res,\n domain: window.location.hostname\n }\n : {\n username: localClientField,\n rememberMe: localRememberMeField,\n assertionResponse: res,\n domain: window.location.hostname\n }\n validateAssertion({\n variables\n })\n })\n .catch(err => {\n console.error(err)\n setInvalidToken(true)\n })\n }\n }\n )\n\n const [getUserData, { error: queryError }] = useLazyQuery(GET_USER_DATA, {\n onCompleted: ({ userData }) => {\n setUserData(userData)\n history.push('/')\n }\n })\n\n const getErrorMsg = (formikErrors, formikTouched) => {\n if (!formikErrors || !formikTouched) return null\n if (assertionQueryError || queryError || mutationError)\n return 'Internal server error'\n if (formikErrors.client && formikTouched.client) return formikErrors.client\n if (invalidUsername) return 'Invalid login.'\n if (invalidToken) return 'Code is invalid. Please try again.'\n return null\n }\n\n return (\n <>\n {strategy === 'FIDOPasswordless' && (\n {errorMessage}
}\n \n\n Insert your hardware key and follow the instructions\n
\n\n \n This account does not yet have two-factor authentication enabled. To\n secure the admin, two-factor authentication is required.\n \n \n To complete the registration process, scan the following QR code or\n insert the secret below on a 2FA app, such as Google Authenticator\n or AndOTP.\n \n
\n \n
\n \n Your secret: \n \n {secret}\n \n {\n setShowing(!isShowing)\n }}>\n {isShowing ? 'Hide' : 'Show'}\n \n
\n \n {/* TODO: refactor the 2FA CodeInput to properly use Formik */}\n {}} initialValues={{}}>\n \n \n
\n \n {getErrorMsg() && (\n
\n \n )\n )\n}\n\nexport default Setup2FAState\n","import Paper from '@material-ui/core/Paper'\nimport { makeStyles } from '@material-ui/core/styles'\nimport React, { useReducer } from 'react'\n\nimport { H5 } from 'src/components/typography'\nimport { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'\n\nimport Input2FAState from './Input2FAState'\nimport InputFIDOState from './InputFIDOState'\nimport LoginState from './LoginState'\nimport Setup2FAState from './Setup2FAState'\nimport styles from './shared.styles'\nimport { STATES } from './states'\n\n// FIDO2FA, FIDOPasswordless or FIDOUsernameless\nconst AUTHENTICATION_STRATEGY = 'FIDO2FA'\n\nconst useStyles = makeStyles(styles)\n\nconst initialState = {\n twoFAField: '',\n clientField: '',\n passwordField: '',\n rememberMeField: false,\n loginState: STATES.LOGIN\n}\n\nconst reducer = (state, action) => {\n const { type, payload } = action\n return { ...state, ...payload, loginState: type }\n}\n\nconst LoginCard = () => {\n const classes = useStyles()\n\n const [state, dispatch] = useReducer(reducer, initialState)\n\n const renderState = () => {\n switch (state.loginState) {\n case STATES.LOGIN:\n return (\n {getErrorMsg()}
\n )}\n \n\n
\n \n
\n {renderState()}\n Lamassu Admin
\n\n \n \n
\n \n {\n register({\n variables: {\n token: token,\n username: state.username,\n password: values.password,\n role: state.role\n }\n })\n }}>\n {({ errors, touched }) => (\n \n )}\n \n )}\n {!loading && state.result === 'failure' && (\n <>\n Link has expired \n \n To obtain a new link, run the command{' '}\n lamassu-register in your server’s terminal.\n \n \n )}\n
\n \n
\n {!loading && state.result === 'success' && (\n Lamassu Admin
\n\n \n \n
\n \n Link has expired \n \n )}\n
\n \n
\n {!loading && state.result === 'success' && (\n <>\n Lamassu Admin
\n\n \n To finish this process, please scan the following QR code\n or insert the secret further below on an authentication\n app of your choice, such Google Authenticator or Authy.\n \n
\n \n
\n \n \n Your secret:\n \n \n {state.secret}\n \n {\n setShowing(!isShowing)\n }}>\n {isShowing ? 'Hide' : 'Show'}\n \n
\n \n {/* TODO: refactor the 2FA CodeInput to properly use Formik */}\n {}} initialValues={{}}>\n \n \n
\n \n {getErrorMsg() && (\n \n Done\n \n
\n \n )}\n {!loading && state.result === 'failure' && (\n <>\n {getErrorMsg()}
\n )}\n\n \n \n
\n \n {\n resetPassword({\n variables: {\n token: token,\n userID: userID,\n newPassword: values.confirmPassword\n }\n })\n }}>\n {({ errors, touched }) => (\n \n )}\n \n )}\n {!isLoading && !wasSuccessful && (\n <>\n Link has expired \n \n )}\n
\n \n
\n {!isLoading && wasSuccessful && (\n Lamassu Admin
\n\n
\n \n {` ${cashIn} ${localeFiatCurrency}`} \n
\n \n {` ${cashOut} ${localeFiatCurrency}`} \n
\n \n
\n )\n}\n\nexport default Footer\n","import Footer from './Footer'\nexport default Footer\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(\"circle\", {\n id: \"path-100\",\n cx: 80,\n cy: 80,\n r: 80\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-300\",\n x: 28,\n y: 44,\n width: 104,\n height: 116,\n rx: 4\n}), /*#__PURE__*/React.createElement(\"filter\", {\n x: \"-23.1%\",\n y: \"-20.7%\",\n width: \"146.2%\",\n height: \"141.4%\",\n filterUnits: \"objectBoundingBox\",\n id: \"filter-4\"\n}, /*#__PURE__*/React.createElement(\"feOffset\", {\n dx: 0,\n dy: 0,\n in: \"SourceAlpha\",\n result: \"shadowOffsetOuter1\"\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 8,\n in: \"shadowOffsetOuter1\",\n result: \"shadowBlurOuter1\"\n}), /*#__PURE__*/React.createElement(\"feColorMatrix\", {\n values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0\",\n type: \"matrix\",\n in: \"shadowBlurOuter1\"\n})), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-5\",\n x: 37,\n y: 66,\n width: 84,\n height: 8,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-6\",\n maskContentUnits: \"userSpaceOnUse\",\n maskUnits: \"objectBoundingBox\",\n x: 0,\n y: 0,\n width: 84,\n height: 8,\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-5\"\n})), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-7\",\n x: 37,\n y: 78,\n width: 84,\n height: 8,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-8\",\n maskContentUnits: \"userSpaceOnUse\",\n maskUnits: \"objectBoundingBox\",\n x: 0,\n y: 0,\n width: 84,\n height: 8,\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-7\"\n})), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-9\",\n x: 37,\n y: 90,\n width: 84,\n height: 8,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-10\",\n maskContentUnits: \"userSpaceOnUse\",\n maskUnits: \"objectBoundingBox\",\n x: 0,\n y: 0,\n width: 84,\n height: 8,\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-9\"\n})), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"path-11\",\n x: 37,\n y: 102,\n width: 84,\n height: 8,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-12\",\n maskContentUnits: \"userSpaceOnUse\",\n maskUnits: \"objectBoundingBox\",\n x: 0,\n y: 0,\n width: 84,\n height: 8,\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-11\"\n})));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"\\\\u21B3-v13a\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"transactions_v13a#1-(empty-table)\",\n transform: \"translate(-640.000000, -220.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\",\n transform: \"translate(640.000000, 220.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Rectangle\"\n}, /*#__PURE__*/React.createElement(\"mask\", {\n id: \"mask-200\",\n fill: \"white\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n xlinkHref: \"#path-100\"\n})), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Mask\",\n fill: \"#EBEFFF\",\n xlinkHref: \"#path-100\"\n}), /*#__PURE__*/React.createElement(\"g\", {\n mask: \"url(#mask-200)\"\n}, /*#__PURE__*/React.createElement(\"use\", {\n fill: \"black\",\n fillOpacity: 1,\n filter: \"url(#filter-4)\",\n xlinkHref: \"#path-300\"\n}), /*#__PURE__*/React.createElement(\"use\", {\n fill: \"#FFFFFF\",\n fillRule: \"evenodd\",\n xlinkHref: \"#path-300\"\n}))), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Rectangle\",\n stroke: \"#5F668A\",\n mask: \"url(#mask-6)\",\n strokeDasharray: 1,\n xlinkHref: \"#path-5\"\n}), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Rectangle-Copy\",\n stroke: \"#5F668A\",\n mask: \"url(#mask-8)\",\n strokeDasharray: 1,\n xlinkHref: \"#path-7\"\n}), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Rectangle-Copy-2\",\n stroke: \"#5F668A\",\n mask: \"url(#mask-10)\",\n strokeDasharray: 1,\n xlinkHref: \"#path-9\"\n}), /*#__PURE__*/React.createElement(\"use\", {\n id: \"Rectangle-Copy-3\",\n stroke: \"#5F668A\",\n mask: \"url(#mask-12)\",\n strokeDasharray: 1,\n xlinkHref: \"#path-11\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Rectangle\",\n fill: \"#EBEFFF\",\n x: 37,\n y: 56,\n width: 84,\n height: 6,\n rx: 2\n}))));\n\nfunction SvgEmptyTable(_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: \"160px\",\n height: \"160px\",\n viewBox: \"0 0 160 160\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgEmptyTable);\nexport default __webpack_public_path__ + \"static/media/empty-table.250884a9.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles } from '@material-ui/core'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\n\nimport { H4 } from 'src/components/typography'\nimport { ReactComponent as EmptyTableIcon } from 'src/styling/icons/table/empty-table.svg'\n\nconst styles = {\n emptyTable: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n marginTop: 52\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst EmptyTable = memo(({ message, className }) => {\n const classes = useStyles()\n\n return (\n \n \n \n {R.keys(withCommissions).map(key => renderFooterItem(key))}\n \n \n
\n \n
\n )\n})\n\nexport default EmptyTable\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nconst useStyles = makeStyles({\n table: {\n // backgroundColor: tableHeaderColor,\n tableLayout: 'fixed',\n borderCollapse: 'separate',\n borderSpacing: '0 0'\n }\n})\n\nconst Table = memo(({ className, children, ...props }) => {\n const classes = useStyles()\n return (\n {message}
\n\n \n {buildPercentageView(value, 'cashIn')}\n
\n \n
\n )}\n \n )\n}\n\nexport default Nav\n","import { useQuery } from '@apollo/react-hooks'\nimport Grid from '@material-ui/core/Grid'\nimport { makeStyles } from '@material-ui/core/styles'\nimport BigNumber from 'bignumber.js'\nimport classnames from 'classnames'\nimport { isAfter, sub } from 'date-fns/fp'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { EmptyTable } from 'src/components/table'\nimport { Label1, Label2, P } from 'src/components/typography/index'\nimport { ReactComponent as PercentDownIcon } from 'src/styling/icons/dashboard/down.svg'\nimport { ReactComponent as PercentNeutralIcon } from 'src/styling/icons/dashboard/equal.svg'\nimport { ReactComponent as PercentUpIcon } from 'src/styling/icons/dashboard/up.svg'\nimport { java, neon } from 'src/styling/variables'\nimport { fromNamespace } from 'src/utils/config'\nimport { timezones } from 'src/utils/timezone-list'\nimport { toTimezone } from 'src/utils/timezones'\n\nimport PercentageChart from './Graphs/PercentageChart'\nimport LineChart from './Graphs/RefLineChart'\nimport Scatterplot from './Graphs/RefScatterplot'\nimport InfoWithLabel from './InfoWithLabel'\nimport Nav from './Nav'\nimport styles from './SystemPerformance.styles'\n\nBigNumber.config({ ROUNDING_MODE: BigNumber.ROUND_HALF_UP })\n\nconst getFiats = R.map(R.prop('fiat'))\nconst useStyles = makeStyles(styles)\nconst mapToFee = R.map(R.prop('cashInFee'))\n\nconst getDateSecondsAgo = (seconds = 0, startDate = null) => {\n const date = startDate ? new Date(startDate) : new Date()\n return sub({ seconds: seconds }, date)\n}\n\nconst ranges = {\n Day: {\n left: getDateSecondsAgo(2 * 24 * 3600, new Date()),\n right: getDateSecondsAgo(24 * 3600, new Date())\n },\n Week: {\n left: getDateSecondsAgo(14 * 24 * 3600, new Date()),\n right: getDateSecondsAgo(7 * 24 * 3600, new Date())\n },\n Month: {\n left: getDateSecondsAgo(60 * 24 * 3600, new Date()),\n right: getDateSecondsAgo(30 * 24 * 3600, new Date())\n }\n}\n\nconst GET_DATA = gql`\n query getData($excludeTestingCustomers: Boolean) {\n transactions(excludeTestingCustomers: $excludeTestingCustomers) {\n fiatCode\n fiat\n cashInFee\n commissionPercentage\n created\n txClass\n error\n }\n fiatRates {\n code\n name\n rate\n }\n config\n }\n`\n\nconst reducer = (acc, it) =>\n (acc +=\n Number.parseFloat(it.commissionPercentage) * Number.parseFloat(it.fiat))\n\nconst SystemPerformance = () => {\n const classes = useStyles()\n const [selectedRange, setSelectedRange] = useState('Day')\n const { data, loading } = useQuery(GET_DATA, {\n variables: { excludeTestingCustomers: true }\n })\n const fiatLocale = fromNamespace('locale')(data?.config).fiatCurrency\n const timezone = fromNamespace('locale')(data?.config).timezone\n\n const isInRangeAndNoError = getLastTimePeriod => t => {\n if (t.error !== null) return false\n if (!getLastTimePeriod) {\n return (\n t.error === null &&\n isAfter(ranges[selectedRange].right, toTimezone(t.created, timezone)) &&\n isAfter(toTimezone(t.created, timezone), new Date())\n )\n }\n return (\n t.error === null &&\n isAfter(ranges[selectedRange].left, toTimezone(t.created, timezone)) &&\n isAfter(toTimezone(t.created, timezone), ranges[selectedRange].right)\n )\n }\n\n const convertFiatToLocale = item => {\n if (item.fiatCode === fiatLocale) return item\n const itemRate = R.find(R.propEq('code', item.fiatCode))(data.fiatRates)\n const localeRate = R.find(R.propEq('code', fiatLocale))(data.fiatRates)\n const multiplier = localeRate.rate / itemRate.rate\n return { ...item, fiat: parseFloat(item.fiat) * multiplier }\n }\n\n const transactionsToShow = R.map(convertFiatToLocale)(\n R.filter(isInRangeAndNoError(false), data?.transactions ?? [])\n )\n const transactionsLastTimePeriod = R.map(convertFiatToLocale)(\n R.filter(isInRangeAndNoError(true), data?.transactions ?? [])\n )\n\n const getNumTransactions = () => {\n return R.length(transactionsToShow)\n }\n\n const getFiatVolume = () =>\n new BigNumber(R.sum(getFiats(transactionsToShow))).toFormat(2)\n\n const getProfit = transactions => {\n const cashInFees = R.sum(mapToFee(transactions))\n const commissionFees = R.reduce(reducer, 0, transactions)\n\n return new BigNumber(commissionFees + cashInFees)\n }\n\n const getPercentChange = () => {\n const thisTimePeriodProfit = getProfit(transactionsToShow)\n const previousTimePeriodProfit = getProfit(transactionsLastTimePeriod)\n\n if (thisTimePeriodProfit.eq(previousTimePeriodProfit)) return 0\n if (previousTimePeriodProfit.eq(0)) return 100\n\n return thisTimePeriodProfit\n .minus(previousTimePeriodProfit)\n .times(100)\n .div(previousTimePeriodProfit)\n .toNumber()\n }\n\n const getDirectionPercent = () => {\n const [cashIn, cashOut] = R.partition(R.propEq('txClass', 'cashIn'))(\n transactionsToShow\n )\n const totalLength = cashIn.length + cashOut.length\n if (totalLength === 0) {\n return { cashIn: 0, cashOut: 0 }\n }\n\n return {\n cashIn: Math.round((cashIn.length / totalLength) * 100),\n cashOut: Math.round((cashOut.length / totalLength) * 100)\n }\n }\n\n const percentChange = getPercentChange()\n\n const percentageClasses = {\n [classes.percentDown]: percentChange < 0,\n [classes.percentUp]: percentChange > 0,\n [classes.percentNeutral]: percentChange === 0\n }\n\n const getPercentageIcon = () => {\n if (percentChange === 0)\n return \n
\n {showPicker && (\n {'System performance'}
\n\n {ranges.map((it, idx) => {\n return (\n handleClick(e.target.innerText)}\n className={\n isSelected(it)\n ? classnames(classes.newHighlightedLabel, classes.navButton)\n : classnames(classes.label, classes.navButton)\n }>\n {it}\n
\n )\n })}\n \n Transactions \n
\n \n
\n \n {timezones[timezone].short ?? timezones[timezone].long}{' '}\n timezone\n
\n \n\n \n In \n
\n \n \n Out \n
\n \n
\n \n {`${getProfit(transactionsToShow).toFormat(2)} ${\n data?.config.locale_fiatCurrency\n }`}\n
\n \n {getPercentageIcon()}\n {`${new BigNumber(percentChange).toFormat(2)}%`}\n
\n \n
\n \n \n In \n
\n \n \n Out \n
\n \n
\n - \n {alertsToRender.map((alert, idx) => {\n return (\n
{alertMessage(alert)}
\n\n \n \n {'Show less'}\n \n \n )}\n
\n {`Alerts (${alertsLength})`}
\n {showAllItems && (\n\n
\n )\n}\n\nexport { Status, MainStatus }\n","import {\n backgroundColor,\n offColor,\n errorColor,\n primaryColor\n} from 'src/styling/variables'\n\nconst styles = {\n container: {\n display: 'flex',\n justifyContent: 'space-between'\n },\n label: {\n margin: 0,\n color: offColor\n },\n row: {\n backgroundColor: backgroundColor,\n borderBottom: 'none'\n },\n clickableRow: {\n cursor: 'pointer'\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n whiteSpace: 'pre'\n },\n error: {\n color: errorColor\n },\n button: {\n color: primaryColor,\n minHeight: 0,\n minWidth: 0,\n padding: 0,\n textTransform: 'none',\n '&:hover': {\n backgroundColor: 'transparent'\n },\n marginBottom: -40\n },\n buttonLabel: {\n position: 'absolute',\n bottom: 160,\n marginBottom: 0\n },\n upperButtonLabel: {\n textAlign: 'center',\n marginBottom: 0,\n marginTop: 0\n },\n statusHeader: {\n marginLeft: 2\n },\n table: {\n maxHeight: 440,\n '&::-webkit-scrollbar': {\n width: 7\n },\n '&::-webkit-scrollbar-thumb': {\n backgroundColor: offColor,\n borderRadius: 5\n }\n },\n tableBody: {\n overflow: 'auto'\n },\n h4: {\n marginTop: 0\n },\n tl2: {\n display: 'inline'\n },\n label1: {\n display: 'inline'\n },\n machinesTableContainer: {\n marginTop: 10,\n height: 220\n },\n expandedMachinesTableContainer: {\n marginTop: 10,\n height: 414\n },\n centerLabel: {\n marginBottom: 0,\n padding: 0,\n textAlign: 'center'\n },\n machineNameWrapper: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n machineRedirectIcon: {\n marginLeft: 10\n }\n}\n\nexport default styles\n","import { useQuery } from '@apollo/react-hooks'\nimport { makeStyles, withStyles } from '@material-ui/core'\nimport Table from '@material-ui/core/Table'\nimport TableBody from '@material-ui/core/TableBody'\nimport TableCell from '@material-ui/core/TableCell'\nimport TableContainer from '@material-ui/core/TableContainer'\nimport TableHead from '@material-ui/core/TableHead'\nimport TableRow from '@material-ui/core/TableRow'\nimport classnames from 'classnames'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React from 'react'\nimport { useHistory } from 'react-router-dom'\n\nimport { Status } from 'src/components/Status'\nimport { Label2, TL2 } from 'src/components/typography'\n// import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'\nimport { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'\nimport { ReactComponent as MachineLinkIcon } from 'src/styling/icons/month arrows/right.svg'\nimport { fromNamespace } from 'src/utils/config'\n\nimport styles from './MachinesTable.styles'\n\n// percentage threshold where below this number the text in the cash cassettes percentage turns red\nconst PERCENTAGE_THRESHOLD = 20\n\nconst GET_CONFIG = gql`\n query getConfig {\n config\n }\n`\n\nconst useStyles = makeStyles(styles)\n\nconst StyledCell = withStyles({\n root: {\n borderBottom: '4px solid white',\n padding: 0,\n paddingLeft: 15\n }\n})(TableCell)\n\nconst HeaderCell = withStyles({\n root: {\n borderBottom: '4px solid white',\n padding: 0,\n paddingLeft: 15,\n backgroundColor: 'white'\n }\n})(TableCell)\n\nconst MachinesTable = ({ machines = [], numToRender }) => {\n const classes = useStyles()\n const history = useHistory()\n\n const { data } = useQuery(GET_CONFIG)\n const fillingPercentageSettings = fromNamespace(\n 'notifications',\n R.path(['config'], data) ?? {}\n )\n\n const getPercent = (notes, capacity = 500) => {\n return Math.round((notes / capacity) * 100)\n }\n\n const makePercentageText = (cassetteIdx, notes, capacity = 500) => {\n const percent = getPercent(notes, capacity)\n const percentageThreshold = R.pipe(\n R.path([`fillingPercentageCassette${cassetteIdx}`]),\n R.defaultTo(PERCENTAGE_THRESHOLD)\n )(fillingPercentageSettings)\n return percent < percentageThreshold ? (\n \n \n \n {'Show less'}\n \n \n )}\n
\n {!loading && (\n <>\n System status
{' '}\n {showAllItems && (\n\n \n \n {buttonName}\n \n \n
\n )\n}\n\nconst RightSide = () => {\n const classes = useStyles()\n const [systemStatusSize, setSystemStatusSize] = useState(cardState.DEFAULT)\n const [alertsSize, setAlertsSize] = useState(cardState.DEFAULT)\n\n const onReset = () => {\n setAlertsSize(cardState.DEFAULT)\n setSystemStatusSize(cardState.DEFAULT)\n }\n return (\n {title}
\n\n <>\n {\n setAlertsSize(cardState.EXPANDED)\n setSystemStatusSize(cardState.SHRUNK)\n }}\n onReset={onReset}\n size={alertsSize}\n />\n \n {\n setSystemStatusSize(cardState.EXPANDED)\n setAlertsSize(cardState.SHRUNK)\n }}\n onReset={onReset}\n size={systemStatusSize}\n />\n \n \n
\n \n
\n \n
\n \n
\n \n \n Action Required\n
\n \n \n \n \n \n \n \n
\n \n \n ) : (\n <>\n {open && (\n \n \n {data?.serverVersion} {' '}\n server version \n \n
\n \n
\n \n \n )\n ) : (\n <>\n )\n}\n\nexport default Dashboard\n","import Dashboard from './Dashboard'\nexport default Dashboard\n","import { useFormikContext } from 'formik'\nimport React, { useEffect } from 'react'\nimport { Prompt } from 'react-router-dom'\n\nconst PROMPT_DEFAULT_MESSAGE =\n 'You have unsaved changes on this page. Are you sure you want to leave?'\n\nconst PromptWhenDirty = ({ message = PROMPT_DEFAULT_MESSAGE }) => {\n const formik = useFormikContext()\n\n const hasChanges = formik.dirty && formik.submitCount === 0\n\n useEffect(() => {\n if (hasChanges) {\n window.onbeforeunload = confirmExit\n } else {\n window.onbeforeunload = undefined\n }\n }, [hasChanges])\n\n const confirmExit = () => {\n return PROMPT_DEFAULT_MESSAGE\n }\n\n return \n \n To fully take advantage of Lamassu Admin, add a new machine to\n your system\n \n \n
\n No machines on your system yet
\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 return {children}
\n}\n\nconst Th = ({ children, ...props }) => {\n return (\n \n
\n )\n}\n\nconst Tr = ({\n onClick,\n error,\n errorMessage,\n shouldShowError,\n children,\n className,\n size,\n newRow\n}) => {\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 [classes.trAdding]: newRow,\n className\n }\n\n return (\n <>\n {title}
\n {children}
\n {children}
\n {error && shouldShowError && (\n {errorMessage}
\n )}\n \r\n {children}\r\n {close && (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport const DeleteDialog = ({\r\n title = 'Confirm Delete',\r\n open = false,\r\n onConfirmed,\r\n onDismissed,\r\n item = 'item',\r\n confirmationMessage = `Are you sure you want to delete this ${item}?`,\r\n errorMessage = ''\r\n}) => {\r\n const classes = useStyles()\r\n\r\n return (\r\n \r\n )\r\n}\r\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 id: \"arrow-path\",\n d: \"M5.3501239,7.53208616 L0.473798314,2.73082122 C-0.158421727,2.1051411 -0.158421727,1.0952488 0.476737158,0.466675069 C1.11220338,-0.155816755 2.1378971,-0.155816755 2.77494316,0.468226909 L6.49990857,4.13723769 L10.2264532,0.466675069 C10.8619195,-0.155816755 11.8876132,-0.155816755 12.5260183,0.469568675 C13.1582383,1.0952488 13.1582383,2.1051411 12.5245507,2.73226987 L7.64673876,7.53497972 C7.33802629,7.83583835 6.92590837,8 6.49990828,8 C6.0739082,8 5.66179027,7.83583835 5.3501239,7.53208616 Z\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Styleguide\",\n stroke: \"none\",\n strokeWidth: 1,\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/arrow/regular\"\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 fillRule: \"nonzero\",\n xlinkHref: \"#arrow-path\"\n})));\n\nfunction SvgRegular(_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: \"13px\",\n height: \"8px\",\n viewBox: \"0 0 13 8\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgRegular);\nexport default __webpack_public_path__ + \"static/media/regular.3140e691.svg\";\nexport { ForwardRef as ReactComponent };","import { subheaderColor, offColor, white } from '../../../styling/variables'\nimport typographyStyles from '../../typography/styles'\n\nconst { p, label1 } = typographyStyles\n\nconst WIDTH = 152\n\nexport default {\n selectedItem: {\n width: WIDTH - 41,\n display: 'block',\n whiteSpace: 'nowrap',\n overflow: 'hidden'\n },\n select: {\n width: WIDTH,\n zIndex: 1,\n '& label': {\n extend: label1,\n color: offColor,\n paddingLeft: 10\n },\n '& button': {\n extend: p,\n position: 'relative',\n border: 0,\n backgroundColor: subheaderColor,\n width: WIDTH,\n padding: [[6, 0, 6, 12]],\n borderRadius: 20,\n lineHeight: '1.14',\n textAlign: 'left',\n color: offColor,\n cursor: 'pointer',\n outline: '0 none'\n },\n '& ul': {\n maxHeight: '200px',\n width: WIDTH,\n overflowY: 'auto',\n position: 'absolute',\n margin: 0,\n borderTop: 0,\n padding: 0,\n borderRadius: [[0, 0, 8, 8]],\n backgroundColor: subheaderColor,\n outline: '0 none',\n '& li': {\n extend: p,\n listStyleType: 'none',\n padding: [[6, 12]],\n cursor: 'pointer',\n '& span': {\n width: '100%',\n display: 'block',\n overflow: 'hidden',\n whiteSpace: 'nowrap'\n }\n },\n '& li:hover': {\n backgroundColor: offColor,\n color: white\n }\n },\n '& svg': {\n position: 'absolute',\n top: 12,\n right: 14,\n fill: offColor\n }\n },\n selectFiltered: {\n '& button': {\n backgroundColor: offColor,\n color: white\n },\n '& ul': {\n '& li': {\n backgroundColor: offColor,\n color: white\n },\n '& li:hover': {\n backgroundColor: subheaderColor,\n color: offColor\n }\n },\n '& svg': {\n fill: [[white], '!important']\n }\n },\n open: {\n '& button': {\n borderRadius: [[8, 8, 0, 0]]\n }\n }\n}\n","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { useSelect } from 'downshift'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { ReactComponent as Arrowdown } from 'src/styling/icons/action/arrow/regular.svg'\n\nimport styles from './Select.styles'\n\nconst useStyles = makeStyles(styles)\n\nfunction Select({ className, label, items, ...props }) {\n const classes = useStyles()\n\n const {\n isOpen,\n selectedItem,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getItemProps\n } = useSelect({\n items,\n selectedItem: props.selectedItem,\n onSelectedItemChange: item => {\n props.onSelectedItemChange(item.selectedItem)\n }\n })\n\n const selectClassNames = {\n [classes.select]: true,\n [classes.selectFiltered]: props.defaultAsFilter\n ? true\n : !R.equals(selectedItem, props.default),\n [classes.open]: isOpen\n }\n\n return (\n \n \n \n
\n )\n}\n\nexport default Select\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\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' ? 'flex-end' : textAlign\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent\n }\n },\n suffix: {\n margin: [[0, 0, 0, 7]]\n },\n size: ({ size }) => bySize(size),\n bold\n}\n","import { makeStyles } from '@material-ui/core'\r\nimport classnames from 'classnames'\r\nimport { Field, useFormikContext } from 'formik'\r\nimport * as R from 'ramda'\r\nimport React, { useContext, useState } from 'react'\r\n\r\nimport { DeleteDialog } from 'src/components/DeleteDialog'\r\nimport { Link, IconButton } from 'src/components/buttons'\r\nimport { Td, Tr } from 'src/components/fake-table/Table'\r\nimport { Switch } from 'src/components/inputs'\r\nimport { Label2 } from 'src/components/typography'\r\nimport { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'\r\nimport { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'\r\nimport { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'\r\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'\r\nimport { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'\r\n\r\nimport TableCtx from './Context'\r\nimport styles from './Row.styles'\r\n\r\nconst useStyles = makeStyles(styles)\r\n\r\nconst ActionCol = ({ disabled, editing }) => {\r\n const classes = useStyles()\r\n const { values, submitForm, resetForm } = useFormikContext()\r\n const {\r\n editWidth,\r\n onEdit,\r\n enableEdit,\r\n enableDelete,\r\n disableRowEdit,\r\n onDelete,\r\n deleteWidth,\r\n enableToggle,\r\n onToggle,\r\n toggleWidth,\r\n forceAdd,\r\n clearError,\r\n actionColSize,\r\n error\r\n } = useContext(TableCtx)\r\n\r\n const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))\r\n const cancel = () => {\r\n clearError()\r\n resetForm()\r\n }\r\n\r\n const [deleteDialog, setDeleteDialog] = useState(false)\r\n\r\n const onConfirmed = () => {\r\n onDelete(values.id).then(res => {\r\n if (!R.isNil(res)) setDeleteDialog(false)\r\n })\r\n }\r\n\r\n return (\r\n <>\r\n {editing && (\r\n - \n {isOpen &&\n items.map(({ code, display }, index) => (\n
- \n {display}\n \n ))}\n
\r\n {view(values[name], values)}\r\n
\r\n )}\r\n {suffix && !isHidden(values) && (\r\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 {title && {title} }\n handleClose()}>\n
\n {children}
\n {infoPanel}
\n \n \n \n {name}\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/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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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 Update counts\n
\n\n
\n \n Before updating counts on Lamassu Admin, make sure you've done it\n before on the machines.\n
\n\n
\n \n \n For cash cassettes, please make sure you've removed the remaining\n bills before adding the new ones.\n
\n\n {R.range(1, currentStep).map(idx => (\n
\n )\n})\n\nexport default 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(\"desc\", null, \"Created with Sketch.\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/help/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20.0004,11 C20.0004,6.03028475 15.9701153,2 11.0004,2 C6.03004556,2 2.0004,6.02992391 2.0004,11 C2.0004,15.9700761 6.03004556,20 11.0004,20 C15.9701153,20 20.0004,15.9697153 20.0004,11 Z M22.0004,11 C22.0004,17.0742847 17.0746847,22 11.0004,22 C4.92544514,22 0.000400000001,17.0746147 0.000400000001,11 C0.000400000001,4.92538534 4.92544514,0 11.0004,0 C17.0746847,0 22.0004,4.92571525 22.0004,11 Z\",\n id: \"Stroke-1\",\n fill: \"#1B2559\",\n fillRule: \"nonzero\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.9164,8.9063 C9.9164,9.45858475 9.46868475,9.9063 8.9164,9.9063 C8.36411525,9.9063 7.9164,9.45858475 7.9164,8.9063 C7.9164,6.89094438 9.72972438,5.35290249 11.7463843,5.7072003 C13.0663562,5.93764844 14.1348314,7.00654285 14.3652323,8.32479116 C14.6130182,9.7312185 13.941375,11.0876584 12.732214,11.7545735 C12.370484,11.9534687 12.1664,12.2664153 12.1664,12.5913 L12.1664,12.6563 C12.1664,13.2085847 11.7186847,13.6563 11.1664,13.6563 C10.6141153,13.6563 10.1664,13.2085847 10.1664,12.6563 L10.1664,12.5913 C10.1664,11.5009567 10.7946963,10.5375141 11.7674377,10.0026589 C12.2360927,9.74417086 12.493064,9.22519581 12.3953326,8.67046887 C12.3098185,8.1811985 11.8915858,7.76280177 11.4013649,7.67721566 C10.6126181,7.53864454 9.9164,8.1291691 9.9164,8.9063 Z\",\n id: \"Stroke-3\",\n fill: \"#1B2559\",\n fillRule: \"nonzero\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.1039,15.2188 C10.1039,14.6318 10.5799,14.1568 11.1659,14.1568 C11.7529,14.1568 12.2289,14.6318 12.2289,15.2188 C12.2289,15.8058 11.7529,16.2808 11.1659,16.2808 C10.5799,16.2808 10.1039,15.8058 10.1039,15.2188\",\n id: \"Fill-5\",\n fill: \"#1B2559\"\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: \"22px\",\n viewBox: \"0 0 22 22\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.1bd00dea.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles, ClickAwayListener } from '@material-ui/core'\nimport * as R from 'ramda'\nimport React, { useState, memo } from 'react'\n\nimport Popper from 'src/components/Popper'\nimport { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'\n\nconst useStyles = makeStyles({\n transparentButton: {\n border: 'none',\n backgroundColor: 'transparent',\n outline: 'none',\n cursor: 'pointer',\n marginTop: 4\n },\n popoverContent: ({ width }) => ({\n width,\n padding: [[10, 15]]\n })\n})\n\nconst usePopperHandler = width => {\n const classes = useStyles({ width })\n const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)\n\n const handleOpenHelpPopper = event => {\n setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)\n }\n\n const handleCloseHelpPopper = () => {\n setHelpPopperAnchorEl(null)\n }\n\n const helpPopperOpen = Boolean(helpPopperAnchorEl)\n\n return {\n classes,\n helpPopperAnchorEl,\n helpPopperOpen,\n handleOpenHelpPopper,\n handleCloseHelpPopper\n }\n}\n\nconst Tooltip = memo(({ children, width, Icon = HelpIcon }) => {\n const handler = usePopperHandler(width)\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 {children}
\n \n \n {!R.isNil(parentElements) && (\n \n {parentElements}\n
\n )}\n {R.isNil(parentElements) && (\n {children}
\n \n \n )\n})\n\nexport { Tooltip, HoverableTooltip }\n","export default __webpack_public_path__ + \"static/media/acceptor-left.f37bcb1a.svg\";","export default __webpack_public_path__ + \"static/media/dispenser-1.e4200f4e.svg\";","export default __webpack_public_path__ + \"static/media/dispenser-2.9f7807a5.svg\";","export default __webpack_public_path__ + \"static/media/3-cassettes-open-1-left.d6d9aa73.svg\";","export default __webpack_public_path__ + \"static/media/3-cassettes-open-2-left.a9ee8d4c.svg\";","export default __webpack_public_path__ + \"static/media/3-cassettes-open-3-left.08fed660.svg\";","export default __webpack_public_path__ + \"static/media/4-cassettes-open-1-left.7b00c51f.svg\";","export default __webpack_public_path__ + \"static/media/4-cassettes-open-2-left.b3d9541c.svg\";","export default __webpack_public_path__ + \"static/media/4-cassettes-open-3-left.e8f1667c.svg\";","export default __webpack_public_path__ + \"static/media/4-cassettes-open-4-left.bc1a9829.svg\";","import { makeStyles } from '@material-ui/core'\nimport classnames from 'classnames'\nimport { Formik, Form, Field } from 'formik'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport Stepper from 'src/components/Stepper'\nimport { HoverableTooltip } from 'src/components/Tooltip'\nimport { Button } from 'src/components/buttons'\nimport { Cashbox } from 'src/components/inputs/cashbox/Cashbox'\nimport { NumberInput, RadioGroup } from 'src/components/inputs/formik'\nimport { Info2, H4, P, Info1 } from 'src/components/typography'\nimport cashbox from 'src/styling/icons/cassettes/acceptor-left.svg'\nimport cassetteOne from 'src/styling/icons/cassettes/dispenser-1.svg'\nimport cassetteTwo from 'src/styling/icons/cassettes/dispenser-2.svg'\nimport tejo3CassetteOne from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-1-left.svg'\nimport tejo3CassetteTwo from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-2-left.svg'\nimport tejo3CassetteThree from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-3-left.svg'\nimport tejo4CassetteOne from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-1-left.svg'\nimport tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-2-left.svg'\nimport tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg'\nimport tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.svg'\nimport { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'\nimport { comet, errorColor } from 'src/styling/variables'\nimport { numberToFiatAmount } from 'src/utils/number'\n\nconst styles = {\n content: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n flex: 1,\n paddingBottom: 32\n },\n titleDiv: {\n marginBottom: 32\n },\n title: {\n margin: [[0, 0, 12, 0]],\n color: comet\n },\n stepImage: {\n width: 148,\n height: 196\n },\n form: {\n paddingBottom: 95\n },\n verticalAlign: {\n display: 'flex',\n flexDirection: 'column'\n },\n horizontalAlign: {\n display: 'flex',\n flexDirection: 'row'\n },\n centerAlignment: {\n alignItems: 'center'\n },\n lineAlignment: {\n alignItems: 'baseline'\n },\n fullWidth: {\n margin: [[0, 'auto']],\n flexBasis: 'auto'\n },\n formWrapper: {\n flexBasis: '100%',\n display: 'flex',\n justifyContent: 'center'\n },\n submit: {\n float: 'right'\n },\n cashboxBills: {\n marginRight: 5\n },\n cassetteCashbox: {\n width: 40,\n height: 35\n },\n cassetteFormTitle: {\n marginTop: 18\n },\n cassetteFormTitleContent: {\n marginLeft: 10,\n marginRight: 25\n },\n smBottomMargin: {\n marginBottom: 25\n },\n fiatTotal: {\n color: comet\n },\n errorMessage: {\n color: errorColor\n }\n}\n\nconst useStyles = makeStyles(styles)\n\nconst cassetesArtworks = (numberOfCassettes, step) =>\n [\n [cassetteOne, cassetteTwo],\n [tejo3CassetteOne, tejo3CassetteTwo, tejo3CassetteThree],\n [tejo4CassetteOne, tejo4CassetteTwo, tejo4CassetteThree, tejo4CassetteFour]\n ][numberOfCassettes - 2][step - 2]\n\nconst WizardStep = ({\n step,\n name,\n machine,\n cashoutSettings,\n cassetteCapacity,\n error,\n lastStep,\n steps,\n fiatCurrency,\n onContinue,\n initialValues\n}) => {\n const classes = useStyles()\n\n const label = lastStep ? 'Finish' : 'Confirm'\n\n const stepOneRadioOptions = [\n { display: 'Yes', code: 'YES' },\n { display: 'No', code: 'NO' }\n ]\n\n const cassetteField = `cassette${step - 1}`\n const numberOfCassettes = machine.numberOfCassettes\n const originalCassetteCount = machine?.[cassetteField]\n const cassetteDenomination = cashoutSettings?.[cassetteField]\n\n const cassetteCount = values => values[cassetteField] || originalCassetteCount\n const cassetteTotal = values => cassetteCount(values) * cassetteDenomination\n const getPercentage = R.pipe(\n cassetteCount,\n count => 100 * (count / cassetteCapacity),\n R.clamp(0, 100)\n )\n\n return (\n \n \n {({ values, errors }) => (\n
\n \n \n \n \n \n )}\n \n )}\n\n {step > 1 && (\n \n {name} \n
\n\n {step === 1 && (\n \n
\n)\n\nconst cashOutHeader = (\n \n
\n)\n\nconst getOverridesFields = currency => {\n return [\n {\n name: 'name',\n width: 280,\n size: 'sm',\n view: it => `${it}`\n },\n {\n header: cashInHeader,\n name: 'cashIn',\n display: 'Cash-in',\n width: 130,\n textAlign: 'right',\n suffix: '%'\n },\n {\n header: cashOutHeader,\n name: 'cashOut',\n display: 'Cash-out',\n width: 130,\n textAlign: 'right',\n suffix: '%',\n inputProps: {\n decimalPlaces: 3\n }\n },\n {\n name: 'fixedFee',\n display: 'Fixed fee',\n width: 155,\n doubleHeader: 'Cash-in only',\n textAlign: 'right',\n suffix: currency\n },\n {\n name: 'minimumTx',\n display: 'Minimun Tx',\n width: 155,\n doubleHeader: 'Cash-in only',\n textAlign: 'right',\n suffix: currency\n }\n ]\n}\n\nconst overrides = currency => {\n return getOverridesFields(currency)\n}\n\nexport { overrides }\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { Table as EditableTable } from 'src/components/editableTable'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nimport { overrides } 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, id: deviceId }) => {\n const { data, loading } = useQuery(GET_DATA)\n const [saveConfig] = 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 saveOverrides = it => {\n const config = toNamespace(SCREEN_KEY)(it)\n return saveConfig({ variables: { config } })\n }\n\n const getMachineCommissions = () => {\n if (loading || !deviceId || !config) {\n return []\n }\n const commissions = {}\n\n // first, get general non overridden commissions\n const makeInfo = x =>\n (commissions[R.prop('code')(x)] = {\n code: x.code,\n name: x.display,\n cashIn: config.cashIn,\n cashOut: config.cashOut,\n fixedFee: config.fixedFee,\n minimumTx: config.minimumTx\n })\n R.forEach(makeInfo)(data.cryptoCurrencies)\n\n // second, get overrides for all machines\n const isId = id => R.propEq('machine', id)\n const generalOverrides = config.overrides\n ? R.filter(isId('ALL_MACHINES'))(config.overrides)\n : []\n\n const overrideInfo = o => {\n commissions[o.cryptoCurrencies[0]].cashIn = o.cashIn\n commissions[o.cryptoCurrencies[0]].cashOut = o.cashOut\n commissions[o.cryptoCurrencies[0]].fixedFee = o.fixedFee\n commissions[o.cryptoCurrencies[0]].minimumTx = o.minimumTx\n }\n R.forEach(overrideInfo)(generalOverrides)\n\n // third, get overrides for this machine\n const machineOverrides = config.overrides\n ? R.filter(isId(deviceId))(config.overrides)\n : []\n R.forEach(overrideInfo)(machineOverrides)\n\n // in the end, the machine specific overrides overwrite the less general ALL_MACHINE overrides or the general overrides\n return R.values(commissions)\n }\n\n const machineCommissions = getMachineCommissions()\n\n return (\n \n
\n )\n}\n\nexport default Details\n","import {\n Dialog,\n DialogActions,\n DialogContent,\n makeStyles,\n InputLabel\n} from '@material-ui/core'\nimport React, { memo, useState } from 'react'\n\nimport { Button, IconButton } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs'\nimport { H4, P } from 'src/components/typography'\nimport { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'\nimport { spacer } from 'src/styling/variables'\n\nimport ErrorMessage from './ErrorMessage'\n\nconst useStyles = makeStyles({\n dialogContent: {\n width: 434,\n padding: spacer * 2,\n paddingRight: spacer * 3.5\n },\n dialogTitle: {\n padding: spacer * 2,\n paddingRight: spacer * 1.5,\n display: 'flex',\n 'justify-content': 'space-between',\n '& > h4': {\n margin: 0\n },\n '& > button': {\n padding: 0,\n marginTop: -(spacer / 2)\n }\n },\n dialogActions: {\n padding: spacer * 4,\n paddingTop: spacer * 2\n }\n})\n\nexport const DialogTitle = ({ children, onClose }) => {\n const classes = useStyles()\n return (\n \n Paired at \n
\n \n {data.pairedAt\n ? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')\n : ''}\n
\n\n Machine model \n
\n {modelPrettifier[data.model]}
\n\n Software version \n
\n {data.version}
\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 onDismissed,\n initialValue = '',\n disabled = false,\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 onDismissed()\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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/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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 typographyStyles from 'src/components/typography/styles'\nimport { offColor, spacer, errorColor } from 'src/styling/variables'\n\nconst { label1 } = typographyStyles\n\nconst machineActionsStyles = {\n label: {\n extend: label1,\n color: offColor,\n marginBottom: 4\n },\n inlineChip: {\n marginInlineEnd: '0.25em'\n },\n stack: {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n justifyContent: 'start'\n },\n mr: {\n marginRight: spacer,\n marginBottom: spacer\n },\n warning: {\n color: errorColor\n }\n}\n\nexport { machineActionsStyles }\n","import { useMutation, useLazyQuery } from '@apollo/react-hooks'\nimport { makeStyles } from '@material-ui/core/styles'\nimport gql from 'graphql-tag'\nimport React, { memo, useState } from 'react'\n\nimport { ConfirmDialog } from 'src/components/ConfirmDialog'\nimport ActionButton from 'src/components/buttons/ActionButton'\nimport { H3 } from 'src/components/typography'\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 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 { machineActionsStyles } from './MachineActions.styles'\n\nconst useStyles = makeStyles(machineActionsStyles)\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 MACHINE = gql`\n query getMachine($deviceId: ID!) {\n machine(deviceId: $deviceId) {\n latestEvent {\n note\n }\n }\n }\n`\n\nconst isStaticState = machineState => {\n if (!machineState) {\n return true\n }\n const staticStates = [\n 'chooseCoin',\n 'idle',\n 'pendingIdle',\n 'dualIdle',\n 'networkDown',\n 'unpaired',\n 'maintenance',\n 'virgin',\n 'wifiList'\n ]\n return staticStates.includes(machineState)\n}\n\nconst getState = machineEventsLazy =>\n JSON.parse(machineEventsLazy.machine.latestEvent?.note ?? '{\"state\": null}')\n .state\n\nconst MachineActions = memo(({ machine, onActionSuccess }) => {\n const [action, setAction] = useState({ command: null })\n const [preflightOptions, setPreflightOptions] = useState({})\n const [errorMessage, setErrorMessage] = useState(null)\n const classes = useStyles()\n\n const warningMessage = (\n \n A user may be in the middle of a transaction and they could lose their\n funds if you continue.\n \n )\n\n const [fetchMachineEvents, { loading: loadingEvents }] = useLazyQuery(\n MACHINE,\n preflightOptions\n )\n\n const [machineAction, { loading }] = useMutation(MACHINE_ACTION, {\n onError: ({ message }) => {\n const errorMessage = message ?? 'An error ocurred'\n setErrorMessage(errorMessage)\n },\n onCompleted: () => {\n onActionSuccess && onActionSuccess()\n setAction({ display: action.display, command: null })\n }\n })\n\n const confirmDialogOpen = Boolean(action.command)\n const disabled = !!(action?.command === 'restartServices' && loadingEvents)\n\n const machineStatusPreflight = actionToDo => {\n setPreflightOptions({\n variables: { deviceId: machine.deviceId },\n onCompleted: machineEventsLazy => {\n const message = !isStaticState(getState(machineEventsLazy))\n ? warningMessage\n : null\n setAction({ ...actionToDo, message })\n }\n })\n fetchMachineEvents()\n }\n\n return (\n \n {\n setErrorMessage(null)\n machineAction({\n variables: {\n deviceId: machine.deviceId,\n action: `${action?.command}`,\n ...(action?.command === 'rename' && { newName: value })\n }\n })\n }}\n onDismissed={() => {\n setAction({ display: action.display, command: null })\n setErrorMessage(null)\n }}\n />\n
\n )\n})\n\nexport default MachineActions\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 strokeLinejoin: \"round\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/copy\",\n transform: \"translate(1.000000, 1.000000)\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-5-Copy-2\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-1\",\n strokeWidth: 2,\n points: \"6 1.2 6 -0.00024 16 -0.00024 16 13.06376 12 13.06376\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-3\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n points: \"0 15.9368 10 15.9368 10 2.9368 0 2.9368\"\n}))));\n\nfunction SvgCopy(_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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgCopy);\nexport default __webpack_public_path__ + \"static/media/copy.f4cea549.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 {\n offColor,\n white,\n primaryColor,\n zircon,\n smallestFontSize,\n inputFontFamily,\n inputFontWeight,\n spacer\n} from 'src/styling/variables'\n\nconst { label1, mono, p } = typographyStyles\nconst { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles\n\nconst cpcStyles = {\n wrapper: {\n extend: mono,\n display: 'flex',\n alignItems: 'center'\n },\n address: {\n lineBreak: 'anywhere'\n },\n buttonWrapper: {\n '& button': {\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer'\n }\n },\n popoverContent: {\n extend: label1,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n color: white,\n borderRadius: 4,\n padding: [[5, 9]]\n }\n}\n\nconst detailsRowStyles = {\n idCardDataCard: {\n extend: p,\n display: 'flex',\n padding: [[11, 8]],\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}\n\nconst labelStyles = {\n label: {\n extend: label1,\n color: offColor,\n marginBottom: 4\n }\n}\n\nconst mainStyles = {\n titleWrapper,\n titleAndButtonsContainer,\n buttonsWrapper,\n headerLabels: {\n display: 'flex',\n flexDirection: 'row',\n '& div': {\n display: 'flex',\n alignItems: 'center'\n },\n '& > div': {\n marginLeft: 24\n },\n '& > div:first-child': {\n marginLeft: 0\n },\n '& span': {\n extend: label1,\n marginLeft: 6\n }\n },\n overflowTd: {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n },\n flexWrapper: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n marginRight: 16\n },\n customerLinkIcon: {\n marginLeft: 2\n },\n flexRow: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center'\n },\n machineRedirectContainer: {\n marginLeft: 10,\n paddingLeft: 5,\n paddingRight: 5\n }\n}\n\nconst chipStyles = {\n root: {\n borderRadius: spacer / 2,\n marginTop: spacer / 2,\n marginRight: spacer / 4,\n marginBottom: spacer / 2,\n marginLeft: spacer / 4,\n height: spacer * 3,\n backgroundColor: zircon,\n '&:hover, &:focus, &:active': {\n backgroundColor: zircon\n }\n },\n label: {\n fontSize: smallestFontSize,\n fontWeight: inputFontWeight,\n fontFamily: inputFontFamily,\n paddingRight: spacer / 2,\n paddingLeft: spacer / 2,\n color: primaryColor\n }\n}\n\nexport { cpcStyles, detailsRowStyles, labelStyles, mainStyles, chipStyles }\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { useState, useEffect } from 'react'\nimport { CopyToClipboard as ReactCopyToClipboard } from 'react-copy-to-clipboard'\n\nimport Popover from 'src/components/Popper'\nimport { ReactComponent as CopyIcon } from 'src/styling/icons/action/copy/copy.svg'\nimport { comet } from 'src/styling/variables'\n\nimport { cpcStyles } from './Transactions.styles'\n\nconst useStyles = makeStyles(cpcStyles)\n\nconst CopyToClipboard = ({\n className,\n buttonClassname,\n children,\n wrapperClassname,\n ...props\n}) => {\n const [anchorEl, setAnchorEl] = useState(null)\n\n useEffect(() => {\n if (anchorEl) setTimeout(() => setAnchorEl(null), 3000)\n }, [anchorEl])\n\n const classes = useStyles()\n\n const handleClick = event => {\n setAnchorEl(anchorEl ? null : event.currentTarget)\n }\n\n const handleClose = () => {\n setAnchorEl(null)\n }\n\n const open = Boolean(anchorEl)\n const id = open ? 'simple-popper' : undefined\n\n return (\n Actions
\n\n \n setAction({\n command: 'rename',\n display: 'Rename',\n confirmationMessage: 'Write the new name for this machine'\n })\n }>\n Rename\n \n \n setAction({\n command: 'unpair',\n display: 'Unpair'\n })\n }>\n Unpair\n \n \n setAction({\n command: 'reboot',\n display: 'Reboot'\n })\n }>\n Reboot\n \n \n setAction({\n command: 'shutdown',\n display: '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 machineStatusPreflight({\n command: 'restartServices',\n display: 'Restart services for'\n })\n }}>\n Restart Services\n \n
\n \n {children && (\n <>\n \n
\n )\n}\n\nexport default CopyToClipboard\n","import { makeStyles } from '@material-ui/core/styles'\nimport BigNumber from 'bignumber.js'\nimport { formatDistance } from 'date-fns'\nimport React from 'react'\n\nimport { Status } from 'src/components/Status'\nimport MachineActions from 'src/components/machineActions/MachineActions'\nimport { H3, Label1, P } from 'src/components/typography'\nimport CopyToClipboard from 'src/pages/Transactions/CopyToClipboard.js'\n\nimport styles from '../Machines.styles'\nconst useStyles = makeStyles(styles)\n\nconst Overview = ({ data, onActionSuccess }) => {\n const classes = useStyles()\n\n return (\n \n {children}\n
\n \n \n handleClick(event)}>\n \n
\n \n
\n \n \n )}\n Copied to clipboard!
\n \n
\n )\n}\n\nexport default Overview\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(\"g\", {\n id: \"icon/ID/card/new/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: \"1 17 23 17 23 1 1 1\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 12.7857143,\n y1: 5,\n x2: 19.8571429,\n y2: 5,\n id: \"Stroke-3\",\n stroke: \"#FFFFFF\",\n strokeWidth: 1.6\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 12.7857143,\n y1: 8.2,\n x2: 19.8571429,\n y2: 8.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: \"4.14285714 12.2 9.64285714 12.2 9.64285714 5 4.14285714 5\"\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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/card/new/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.bd0d7dca.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/ID/card/new/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 transform: \"translate(1.000000, 1.000000)\",\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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/card/new/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.8c7b512b.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/ID/phone/new/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: \"M7.47150618,13.52898 C10.939556,16.9970298 14.7804112,17.1146315 16.4756355,16.9586292 C17.0220434,16.9090285 17.5308507,16.6578249 17.9188563,16.2698193 L20.0004862,14.1881894 L18.0220577,12.210561 L16.0436293,11.5505516 L14.7244104,12.8697705 C14.7244104,12.8697705 13.4059914,14.1881894 10.1091441,10.8905421 C6.81229671,7.59449473 8.13071565,6.27527578 8.13071565,6.27527578 L9.4499346,4.95605683 L8.78992512,2.97842842 L6.81229671,1 L4.73066681,3.0816299 C4.34186123,3.46963548 4.09145763,3.97844279 4.04105691,4.52485063 C3.88585468,6.22007499 4.00345637,10.0601301 7.47150618,13.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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/phone/new/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.341f0eae.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/ID/phone/new/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: \"M7.47150618,13.52898 C10.939556,16.9970298 14.7804112,17.1146315 16.4756355,16.9586292 C17.0220434,16.9090285 17.5308507,16.6578249 17.9188563,16.2698193 L20.0004862,14.1881894 L18.0220577,12.210561 L16.0436293,11.5505516 L14.7244104,12.8697705 C14.7244104,12.8697705 13.4059914,14.1881894 10.1091441,10.8905421 C6.81229671,7.59449473 8.13071565,6.27527578 8.13071565,6.27527578 L9.4499346,4.95605683 L8.78992512,2.97842842 L6.81229671,1 L4.73066681,3.0816299 C4.34186123,3.46963548 4.09145763,3.97844279 4.04105691,4.52485063 C3.88585468,6.22007499 4.00345637,10.0601301 7.47150618,13.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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/phone/new/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.594ae9e7.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/ID/photo/new/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: \"M12,14 C9.7912,14 8,12.2088 8,10 C8,7.7912 9.7912,6 12,6 C14.2088,6 16,7.7912 16,10 C16,12.2088 14.2088,14 12,14 Z M16.7142857,3.4 L14.3571429,1 L9.64285714,1 L7.28571429,3.4 L1,3.4 L1,17 L23,17 L23,3.4 L16.7142857,3.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: \"24px\",\n height: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/photo/new/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.e53d9d4a.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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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/download/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: \"icon/sf-small/wizzard\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Path-3\",\n points: \"3.6 5.4 6 7.8 8.4 5.4\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 0.5,\n x2: 6,\n y2: 7.4,\n id: \"Path-4\"\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})));\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.81edd31f.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/download/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: \"icon/sf-small/wizzard\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Path-3\",\n points: \"3.6 5.4 6 7.8 8.4 5.4\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 6,\n y1: 0.5,\n x2: 6,\n y2: 7.4,\n id: \"Path-4\"\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})));\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.13543418.svg\";\nexport { ForwardRef as ReactComponent };","import { ApolloProvider } from '@apollo/react-hooks'\nimport { InMemoryCache } from 'apollo-cache-inmemory'\nimport { ApolloClient } from 'apollo-client'\nimport { ApolloLink } from 'apollo-link'\nimport { onError } from 'apollo-link-error'\nimport { createUploadLink } from 'apollo-upload-client'\nimport React, { useContext } from 'react'\nimport { useHistory, useLocation } from 'react-router-dom'\n\nimport AppContext from 'src/AppContext'\n\nconst URI =\n process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''\n\nconst ALT_URI =\n process.env.NODE_ENV === 'development' ? 'http://localhost:4001' : ''\n\nconst uploadLink = createUploadLink({\n credentials: 'include',\n uri: `${URI}/graphql`\n})\n\nconst uploadLinkALT = createUploadLink({\n credentials: 'include',\n uri: `${ALT_URI}/graphql`\n})\n\nconst getClient = (history, location, getUserData, setUserData, setRole) =>\n new ApolloClient({\n link: ApolloLink.from([\n onError(({ graphQLErrors, networkError }) => {\n if (graphQLErrors)\n graphQLErrors.forEach(({ message, locations, path, extensions }) => {\n if (extensions?.code === 'UNAUTHENTICATED') {\n setUserData(null)\n if (location.pathname !== '/login') history.push('/login')\n }\n console.log(\n `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`\n )\n })\n if (networkError) console.log(`[Network error]: ${networkError}`)\n }),\n new ApolloLink((operation, forward) => {\n return forward(operation).map(response => {\n const context = operation.getContext()\n const {\n response: { headers }\n } = context\n\n if (headers) {\n const role = headers.get('lamassu_role')\n setRole(role)\n }\n\n return response\n })\n }),\n ApolloLink.split(\n operation => operation.getContext().clientName === 'pazuz',\n uploadLinkALT,\n uploadLink\n )\n ]),\n cache: new InMemoryCache(),\n defaultOptions: {\n watchQuery: {\n fetchPolicy: 'no-cache',\n errorPolicy: 'ignore'\n },\n query: {\n fetchPolicy: 'no-cache',\n errorPolicy: 'all'\n },\n mutate: {\n errorPolicy: 'all'\n }\n }\n })\n\nconst Provider = ({ children }) => {\n const history = useHistory()\n const location = useLocation()\n const { userData, setUserData, setRole } = useContext(AppContext)\n const client = getClient(\n history,\n location,\n () => userData,\n setUserData,\n setRole\n )\n\n return \n
\n \n
\n {data.name}
\n\n
\n \n Status \n {data && data.statuses ?
\n \n
\n \n Ping \n
\n \n {data.responseTime\n ? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms'\n : 'unavailable'}\n
\n\n Last ping \n
\n \n {data.lastPing\n ? formatDistance(new Date(data.lastPing), new Date(), {\n addSuffix: true\n })\n : 'unknown'}\n
\n\n Network speed \n
\n \n {data.downloadSpeed\n ? new BigNumber(data.downloadSpeed).toFixed(4).toString() +\n ' MB/s'\n : 'unavailable'}\n
\n\n
\n \n Device ID \n
\n \n
\n \n
\n \n \n \n {tx.walletScore}\n \n
\n )\n\n const getCancelMessage = () => {\n const cashInMessage = `The user will not be able to redeem the inserted bills, even if they subsequently confirm the transaction. If they've already deposited bills, you'll need to reconcile this transaction with them manually.`\n const cashOutMessage = `The user will not be able to redeem the cash, even if they subsequently send the required coins. If they've already sent you coins, you'll need to reconcile this transaction with them manually.`\n\n return isCashIn ? cashInMessage : cashOutMessage\n }\n\n return (\n \n {\n setErrorMessage(null)\n setAction({ command: null })\n cancelTransaction({\n variables: {\n id: tx.id\n }\n })\n }}\n onDismissed={() => {\n setAction({ command: null })\n setErrorMessage(null)\n }}\n />\n
\n )\n}\n\nexport default memo(\n DetailsRow,\n (prev, next) =>\n prev.it.id === next.it.id &&\n prev.it.hasError === next.it.hasError &&\n prev.it.batchError === next.it.batchError &&\n getStatus(prev.it) === getStatus(next.it)\n)\n","import { zircon } from 'src/styling/variables'\n\nexport default {\n expandButton: {\n outline: 'none',\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer',\n padding: 4\n },\n rowWrapper: {\n // workaround to shadows cut by r-virtualized when scroll is visible\n padding: 1\n },\n row: {\n border: [[2, 'solid', 'transparent']],\n borderRadius: 0\n },\n expanded: {\n border: [[2, 'solid', zircon]],\n boxShadow: '0 0 8px 0 rgba(0,0,0,0.08)'\n },\n before: {\n paddingTop: 12\n },\n after: {\n paddingBottom: 12\n },\n pointer: {\n cursor: 'pointer'\n },\n body: {\n flex: [[1, 1, 'auto']]\n },\n table: ({ width }) => ({\n marginBottom: 30,\n minHeight: 200,\n width,\n flex: 1,\n display: 'flex',\n flexDirection: 'column'\n }),\n emptyTable: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n marginTop: 52\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/action/expand/closed\",\n transform: \"translate(1.000000, 1.000000)\",\n stroke: \"#1B2559\",\n strokeWidth: 1.5\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4\",\n cx: 14,\n cy: 2,\n r: 2\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4-Copy\",\n cx: 8,\n cy: 2,\n r: 2\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4-Copy-2\",\n cx: 2,\n cy: 2,\n r: 2\n})));\n\nfunction SvgClosed(_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: \"6px\",\n viewBox: \"0 0 18 6\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgClosed);\nexport default __webpack_public_path__ + \"static/media/closed.b853a619.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: \"Styleguide\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/expand/open\",\n transform: \"translate(1.000000, 1.000000)\",\n fill: \"#1B2559\",\n stroke: \"#1B2559\",\n strokeWidth: 1.5\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4\",\n cx: 14,\n cy: 2,\n r: 2\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4-Copy\",\n cx: 8,\n cy: 2,\n r: 2\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval-4-Copy-2\",\n cx: 2,\n cy: 2,\n r: 2\n})));\n\nfunction SvgOpen(_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: \"6px\",\n viewBox: \"0 0 18 6\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgOpen);\nexport default __webpack_public_path__ + \"static/media/open.7196c113.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles, Box } from '@material-ui/core'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { useState, useEffect } from 'react'\nimport {\n AutoSizer,\n List,\n CellMeasurer,\n CellMeasurerCache\n} from 'react-virtualized'\n\nimport {\n Table,\n TBody,\n THead,\n Tr,\n Td,\n Th\n} from 'src/components/fake-table/Table'\nimport styles from 'src/components/tables/DataTable.styles'\nimport { H4 } from 'src/components/typography'\nimport { ReactComponent as ExpandClosedIcon } from 'src/styling/icons/action/expand/closed.svg'\nimport { ReactComponent as ExpandOpenIcon } from 'src/styling/icons/action/expand/open.svg'\n\nconst useStyles = makeStyles(styles)\n\nconst Row = ({\n id,\n elements,\n data,\n width,\n Details,\n expanded,\n expandRow,\n expWidth,\n expandable,\n onClick\n}) => {\n const classes = useStyles()\n\n const hasPointer = onClick || expandable\n const trClasses = {\n [classes.pointer]: hasPointer,\n [classes.row]: true,\n [classes.expanded]: expanded\n }\n\n return (\n \n
\n \n \n
\n\n \n \n {!isCashIn ?
\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} %)`}\n {discount && (\n
\n \n {discount} \n
\n )}\n \n \n
\n {isCashIn ? `${cashInFee} ${tx.fiatCode}` : 'N/A'}
\n \n
\n \n
\n \n \n {!R.isNil(tx.walletScore) && (\n \n {`CipherTrace score: ${tx.walletScore}/10`}\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 {getStatusDetails(tx) ? (\n \n \n ) : (\n errorElements\n )}\n {tx.txClass === 'cashOut' && getStatus(tx) === 'Pending' && (\n \n setAction({\n command: 'cancelTx'\n })\n }>\n Cancel transaction\n \n )}\n
\n {getStatusDetails(tx)}
\n\n \n
\n \n downloadRawLogs(tx, timezone)}>\n Download raw logs\n \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 extraHeight,\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 = 850 - 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 \n Dashboard\n \n \n \n {machineName}\n \n \n
\n \n \n {'Details'} \n
\n \n
\n {'Cash box & cassettes'} \n
\n \n {'Latest transactions'} \n
\n \n {'Commissions'} \n
\n \n \n
\n)\n\nconst cashOutHeader = (\n \n
\n)\n\nconst getView = (data, code, compare) => it => {\n if (!data) return ''\n\n // The following boolean should come undefined if it is rendering an unpaired machine\n const attribute = R.find(R.propEq(compare ?? 'code', it))(data)\n\n return attribute ? R.prop(code, attribute) : 'Unpaired machine'\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 labelProp: '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 labelProp: 'display',\n multiple: true,\n onChange: onCryptoChange,\n shouldStayOpen: true\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 bold: bold,\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 bold: bold,\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 bold: bold,\n inputProps: {\n decimalPlaces: 2\n }\n },\n {\n name: 'minimumTx',\n display: 'Minimun Tx',\n width: 169,\n doubleHeader: 'Cash-in only',\n textAlign: 'center',\n editingAlign: 'right',\n input: NumberInput,\n suffix: currency,\n bold: bold,\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 editingAlign: 'right',\n input: NumberInput,\n suffix: '%',\n bold: bold,\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 editingAlign: 'right',\n input: NumberInput,\n suffix: '%',\n bold: bold,\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 editingAlign: 'right',\n input: NumberInput,\n suffix: currency,\n bold: bold,\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 editingAlign: 'right',\n input: NumberInput,\n suffix: currency,\n bold: bold,\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 getSchema = locale => {\n const bills = getBillOptions(locale, denominations).map(it =>\n parseInt(it.code)\n )\n const highestBill = R.isEmpty(bills) ? CURRENCY_MAX : Math.max(...bills)\n\n return 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(highestBill)\n .required(),\n minimumTx: Yup.number()\n .label('Minimum Tx')\n .min(0)\n .max(highestBill)\n .required()\n })\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, locale) => {\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 const bills = getBillOptions(locale, denominations).map(it =>\n parseInt(it.code)\n )\n const highestBill = R.isEmpty(bills) ? CURRENCY_MAX : Math.max(...bills)\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 .min(1),\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(highestBill)\n .required(),\n minimumTx: Yup.number()\n .label('Minimum Tx')\n .min(0)\n .max(highestBill)\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\nconst createCommissions = (cryptoCode, deviceId, isDefault, config) => {\n return {\n minimumTx: config.minimumTx,\n fixedFee: config.fixedFee,\n cashOut: config.cashOut,\n cashIn: config.cashIn,\n machine: deviceId,\n cryptoCurrencies: [cryptoCode],\n default: isDefault,\n id: v4()\n }\n}\n\nconst getCommissions = (cryptoCode, deviceId, config) => {\n const overrides = R.prop('overrides', config) ?? []\n\n if (!overrides && R.isEmpty(overrides)) {\n return createCommissions(cryptoCode, deviceId, true, config)\n }\n\n const specificOverride = R.find(\n it => it.machine === deviceId && _.includes(cryptoCode)(it.cryptoCurrencies)\n )(overrides)\n\n if (specificOverride !== undefined)\n return createCommissions(cryptoCode, deviceId, false, specificOverride)\n\n const machineOverride = R.find(\n it =>\n it.machine === deviceId && _.includes('ALL_COINS')(it.cryptoCurrencies)\n )(overrides)\n\n if (machineOverride !== undefined)\n return createCommissions(cryptoCode, deviceId, false, machineOverride)\n\n const coinOverride = R.find(\n it =>\n it.machine === 'ALL_MACHINES' &&\n _.includes(cryptoCode)(it.cryptoCurrencies)\n )(overrides)\n\n if (coinOverride !== undefined)\n return createCommissions(cryptoCode, deviceId, false, coinOverride)\n\n return createCommissions(cryptoCode, deviceId, true, config)\n}\n\nconst getListCommissionsSchema = locale => {\n const bills = getBillOptions(locale, denominations).map(it =>\n parseInt(it.code)\n )\n const highestBill = R.isEmpty(bills) ? CURRENCY_MAX : Math.max(...bills)\n\n return Yup.object().shape({\n machine: Yup.string()\n .label('Machine')\n .required(),\n cryptoCurrencies: Yup.array()\n .label('Crypto Currency')\n .required()\n .min(1),\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(highestBill)\n .required(),\n minimumTx: Yup.number()\n .label('Minimum Tx')\n .min(0)\n .max(highestBill)\n .required()\n })\n}\n\nconst getTextStyle = (obj, isEditing) => {\n return { color: obj.default ? primaryColor : secondaryColorDark }\n}\n\nconst commissionsList = (auxData, currency, auxElements) => {\n const getData = R.path(R.__, auxData)\n\n return getListCommissionsFields(getData, currency, defaults)\n}\n\nconst getListCommissionsFields = (getData, currency, defaults) => {\n const machineData = [ALL_MACHINES].concat(getData(['machines']))\n\n return [\n {\n name: 'machine',\n width: 196,\n size: 'sm',\n view: getView(machineData, 'name', 'deviceId'),\n editable: false\n },\n {\n name: 'cryptoCurrencies',\n display: 'Crypto Currency',\n width: 255,\n view: R.prop(0),\n size: 'sm',\n editable: false\n },\n {\n header: cashInHeader,\n name: 'cashIn',\n display: 'Cash-in',\n width: 130,\n input: NumberInput,\n textAlign: 'right',\n suffix: '%',\n textStyle: obj => getTextStyle(obj),\n inputProps: {\n decimalPlaces: 3\n }\n },\n {\n header: cashOutHeader,\n name: 'cashOut',\n display: 'Cash-out',\n width: 140,\n input: NumberInput,\n textAlign: 'right',\n greenText: true,\n suffix: '%',\n textStyle: obj => getTextStyle(obj),\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 textStyle: obj => getTextStyle(obj),\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 textStyle: obj => getTextStyle(obj),\n inputProps: {\n decimalPlaces: 2\n }\n }\n ]\n}\n\nexport {\n mainFields,\n overrides,\n getSchema,\n getOverridesSchema,\n defaults,\n overridesDefaults,\n getOrder,\n getCommissions,\n getListCommissionsSchema,\n commissionsList\n}\n","import * as R from 'ramda'\nimport * as Yup from 'yup'\n\nimport Autocomplete from 'src/components/inputs/formik/Autocomplete.js'\nimport { labels as timezoneList } from 'src/utils/timezone-list'\n\nconst getFields = (getData, names, onChange, auxElements = []) => {\n return R.filter(\n it => R.includes(it.name, names),\n allFields(getData, onChange, auxElements)\n )\n}\n\nconst allFields = (getData, onChange, auxElements = []) => {\n const getView = (data, code, compare) => it => {\n if (!data) return ''\n\n return R.compose(\n R.prop(code),\n R.find(R.propEq(compare ?? 'code', it))\n )(data)\n }\n\n const displayCodeArray = data => it => {\n if (!it) return it\n\n return R.compose(R.join(', '), R.map(getView(data, 'code')))(it)\n }\n\n const overridenMachines = R.map(override => override.machine, auxElements)\n\n const suggestionFilter = it =>\n R.differenceWith((x, y) => x.deviceId === y, it, overridenMachines)\n\n const machineData = getData(['machines'])\n const countryData = getData(['countries'])\n const currencyData = getData(['currencies'])\n const languageData = getData(['languages'])\n const cryptoData = getData(['cryptoCurrencies'])\n const timezonesData = timezoneList\n\n const findSuggestion = it => {\n const machine = R.find(R.propEq('deviceId', it.machine))(machineData)\n return machine ? [machine] : []\n }\n\n return [\n {\n name: 'machine',\n width: 200,\n size: 'sm',\n view: getView(machineData, 'name', 'deviceId'),\n input: Autocomplete,\n inputProps: {\n options: it =>\n R.concat(findSuggestion(it))(suggestionFilter(machineData)),\n valueProp: 'deviceId',\n labelProp: 'name'\n }\n },\n {\n name: 'country',\n width: 200,\n size: 'sm',\n view: getView(countryData, 'display'),\n input: Autocomplete,\n inputProps: {\n options: countryData,\n valueProp: 'code',\n labelProp: 'display'\n }\n },\n {\n name: 'fiatCurrency',\n width: 150,\n size: 'sm',\n view: getView(currencyData, 'code'),\n input: Autocomplete,\n inputProps: {\n options: currencyData,\n valueProp: 'code',\n labelProp: 'code'\n }\n },\n {\n name: 'languages',\n width: 200,\n size: 'sm',\n view: displayCodeArray(languageData),\n input: Autocomplete,\n inputProps: {\n options: languageData,\n valueProp: 'code',\n labelProp: 'display',\n multiple: true\n }\n },\n {\n name: 'cryptoCurrencies',\n width: 170,\n size: 'sm',\n view: displayCodeArray(cryptoData),\n input: Autocomplete,\n inputProps: {\n options: cryptoData,\n valueProp: 'code',\n labelProp: 'code',\n multiple: true,\n optionsLimit: null,\n onChange\n }\n },\n {\n name: 'timezone',\n width: 320,\n size: 'sm',\n view: getView(timezonesData, 'label'),\n input: Autocomplete,\n inputProps: {\n options: timezonesData,\n valueProp: 'code',\n labelProp: 'label'\n }\n }\n ]\n}\n\nconst mainFields = (auxData, configureCoin) => {\n const getData = R.path(R.__, auxData)\n\n return getFields(\n getData,\n ['country', 'fiatCurrency', 'languages', 'cryptoCurrencies', 'timezone'],\n configureCoin,\n undefined\n )\n}\n\nconst overrides = (auxData, auxElements, configureCoin) => {\n const getData = R.path(R.__, auxData)\n\n return getFields(\n getData,\n ['machine', 'country', 'languages', 'cryptoCurrencies'],\n configureCoin,\n auxElements\n )\n}\n\nconst LocaleSchema = Yup.object().shape({\n country: Yup.string()\n .label('Country')\n .required(),\n fiatCurrency: Yup.string()\n .label('Fiat Currency')\n .required(),\n languages: Yup.array()\n .label('Languages')\n .required()\n .min(1)\n .max(4),\n cryptoCurrencies: Yup.array()\n .label('Crypto Currencies')\n .required()\n .min(1),\n timezone: Yup.string()\n .label('Timezone')\n .required()\n})\n\nconst OverridesSchema = Yup.object().shape({\n machine: Yup.string()\n .label('Machine')\n .required(),\n country: Yup.string()\n .label('Country')\n .required(),\n languages: Yup.array()\n .label('Languages')\n .required()\n .min(1)\n .max(4),\n cryptoCurrencies: Yup.array()\n .label('Crypto Currencies')\n .required()\n .min(1)\n})\n\nconst localeDefaults = {\n country: '',\n fiatCurrency: '',\n languages: [],\n cryptoCurrencies: [],\n timezone: ''\n}\n\nconst overridesDefaults = {\n machine: '',\n country: '',\n languages: [],\n cryptoCurrencies: []\n}\n\nexport {\n mainFields,\n overrides,\n LocaleSchema,\n OverridesSchema,\n localeDefaults,\n overridesDefaults\n}\n","import * as R from 'ramda'\nimport * as Yup from 'yup'\n\nimport {\n Autocomplete,\n Checkbox,\n NumberInput\n} from 'src/components/inputs/formik'\nimport { disabledColor } from 'src/styling/variables'\nimport { CURRENCY_MAX } from 'src/utils/constants'\nimport { transformNumber } from 'src/utils/number'\n\nconst classes = {\n editDisabled: {\n color: disabledColor\n }\n}\nconst filterClass = type => R.filter(it => it.class === type)\nconst filterCoins = ({ id }) => R.filter(it => R.contains(id)(it.cryptos))\n\nconst WalletSchema = Yup.object().shape({\n ticker: Yup.string().required(),\n wallet: Yup.string().required(),\n exchange: Yup.string().required(),\n zeroConf: Yup.string().required(),\n zeroConfLimit: Yup.number()\n .integer()\n .required('Zero Conf Limit is a required field')\n .min(0)\n .max(CURRENCY_MAX)\n .transform(transformNumber)\n})\n\nconst AdvancedWalletSchema = Yup.object().shape({\n cryptoUnits: Yup.string().required(),\n feeMultiplier: Yup.string().required(),\n allowTransactionBatching: Yup.boolean()\n})\n\nconst OverridesSchema = Yup.object().shape({\n cryptoUnits: Yup.string().required(),\n feeMultiplier: Yup.string().required(),\n cryptoCurrency: Yup.string().required(),\n allowTransactionBatching: Yup.boolean()\n})\n\nconst OverridesDefaults = {\n cryptoUnits: '',\n feeMultiplier: '',\n cryptoCurrency: '',\n allowTransactionBatching: null\n}\n\nconst viewFeeMultiplier = it =>\n R.compose(R.prop(['display']), R.find(R.propEq('code', it)))(feeOptions)\n\nconst feeOptions = [\n { display: '+20%', code: '1.2' },\n { display: 'Default', code: '1' },\n { display: '-20%', code: '0.8' },\n { display: '-40%', code: '0.6' },\n { display: '-60%', code: '0.4' }\n]\n\nconst cryptoUnitsDefaultOptions = [\n { display: 'mili', code: 'mili' },\n { display: 'full', code: 'full' }\n]\n\nconst getCryptoUnitsOptions = R.curry((coinUtils, it) => {\n if (R.isNil(it.cryptoCurrency)) return cryptoUnitsDefaultOptions\n const options = R.keys(coinUtils.getCryptoCurrency(it.cryptoCurrency).units)\n return R.map(option => {\n return { code: option, display: option }\n })(options)\n})\n\nconst getAdvancedWalletElements = () => {\n return [\n {\n name: 'cryptoUnits',\n size: 'sm',\n stripe: true,\n width: 190,\n input: Autocomplete,\n inputProps: {\n options: cryptoUnitsDefaultOptions,\n valueProp: 'code',\n labelProp: 'display'\n }\n },\n {\n name: 'allowTransactionBatching',\n size: 'sm',\n stripe: true,\n width: 250,\n view: (_, ite) => {\n return ite.allowTransactionBatching ? 'Yes' : `No`\n },\n input: Checkbox\n },\n {\n name: 'feeMultiplier',\n header: `Miner's Fee`,\n size: 'sm',\n stripe: true,\n width: 250,\n view: viewFeeMultiplier,\n input: Autocomplete,\n inputProps: {\n options: feeOptions,\n valueProp: 'code',\n labelProp: 'display'\n }\n }\n ]\n}\n\nconst getAdvancedWalletElementsOverrides = (\n coinSuggestions,\n findSuggestion,\n coinUtils\n) => {\n return [\n {\n name: 'cryptoCurrency',\n width: 180,\n input: Autocomplete,\n inputProps: {\n options: it => R.concat(coinSuggestions, findSuggestion(it)),\n optionsLimit: null,\n valueProp: 'code',\n labelProp: 'display'\n },\n size: 'sm'\n },\n {\n name: 'cryptoUnits',\n size: 'sm',\n stripe: true,\n width: 190,\n input: Autocomplete,\n inputProps: {\n options: getCryptoUnitsOptions(coinUtils),\n valueProp: 'code',\n labelProp: 'display'\n }\n },\n {\n name: 'allowTransactionBatching',\n size: 'sm',\n stripe: true,\n width: 250,\n view: (_, ite) => {\n if (ite.cryptoCurrency !== 'BTC')\n return {`No`}\n return ite.allowTransactionBatching ? 'Yes' : 'No'\n },\n input: Checkbox,\n editable: it => it.cryptoCurrency === 'BTC'\n },\n {\n name: 'feeMultiplier',\n header: `Miner's Fee`,\n size: 'sm',\n stripe: true,\n width: 250,\n view: viewFeeMultiplier,\n input: Autocomplete,\n inputProps: {\n options: feeOptions,\n valueProp: 'code',\n labelProp: 'display'\n }\n }\n ]\n}\n\nconst getElements = (cryptoCurrencies, accounts, onChange, wizard = false) => {\n const widthAdjust = wizard ? 11 : 0\n const viewCryptoCurrency = it => {\n const currencyDisplay = R.compose(\n R.prop(['display']),\n R.find(R.propEq('code', it))\n )(cryptoCurrencies)\n return currencyDisplay\n }\n const filterOptions = type => filterClass(type)(accounts || [])\n\n const getDisplayName = type => it =>\n R.compose(\n R.prop('display'),\n R.find(R.propEq('code', it))\n )(filterOptions(type))\n\n const getOptions = R.curry((option, it) =>\n filterCoins(it)(filterOptions(option))\n )\n\n return [\n {\n name: 'id',\n header: 'Cryptocurrency',\n width: 150 - widthAdjust,\n view: viewCryptoCurrency,\n size: 'sm',\n editable: false\n },\n {\n name: 'ticker',\n size: 'sm',\n stripe: true,\n view: getDisplayName('ticker'),\n width: 175 - widthAdjust,\n input: Autocomplete,\n inputProps: {\n options: getOptions('ticker'),\n valueProp: 'code',\n labelProp: 'display',\n optionsLimit: null\n }\n },\n {\n name: 'wallet',\n size: 'sm',\n stripe: true,\n view: getDisplayName('wallet'),\n width: 175 - widthAdjust,\n input: Autocomplete,\n inputProps: {\n options: getOptions('wallet'),\n valueProp: 'code',\n labelProp: 'display',\n optionsLimit: null,\n onChange\n }\n },\n {\n name: 'exchange',\n size: 'sm',\n stripe: true,\n view: getDisplayName('exchange'),\n width: 175 - widthAdjust,\n input: Autocomplete,\n inputProps: {\n options: getOptions('exchange'),\n valueProp: 'code',\n labelProp: 'display',\n optionsLimit: null,\n onChange\n }\n },\n {\n name: 'zeroConf',\n header: 'Confidence Checking',\n size: 'sm',\n stripe: true,\n view: getDisplayName('zeroConf'),\n input: Autocomplete,\n width: 210 - widthAdjust,\n inputProps: {\n options: getOptions('zeroConf'),\n valueProp: 'code',\n labelProp: 'display',\n optionsLimit: null,\n onChange\n }\n },\n {\n name: 'zeroConfLimit',\n header: '0-conf Limit',\n size: 'sm',\n stripe: true,\n view: (it, row) =>\n row.id === 'ETH' ? {it} : it,\n input: NumberInput,\n width: 145 - widthAdjust,\n inputProps: {\n decimalPlaces: 0\n },\n editable: row => row.id !== 'ETH'\n }\n ]\n}\n\nexport {\n WalletSchema,\n AdvancedWalletSchema,\n getElements,\n filterClass,\n getAdvancedWalletElements,\n getAdvancedWalletElementsOverrides,\n OverridesDefaults,\n OverridesSchema\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport { spacer, offColor } from 'src/styling/variables'\n\nimport { TL1 } from './typography'\n\nconst useStyles = makeStyles({\n subtitle: {\n color: offColor,\n marginTop: spacer * 2,\n marginBottom: spacer * 2\n },\n extraMarginTop: {\n marginTop: spacer * 9\n }\n})\n\nconst Subtitle = memo(({ children, className, extraMarginTop }) => {\n const classes = useStyles()\n const classNames = {\n [classes.subtitle]: true,\n [classes.extraMarginTop]: extraMarginTop\n }\n\n return \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","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 { mainFields, defaults, getSchema } from 'src/pages/Commissions/helper'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nconst useStyles = makeStyles(styles)\nconst useCommissionStyles = makeStyles({\n autoComplete: {\n width: '100%'\n }\n})\n\nconst GET_DATA = gql`\n query getData {\n config\n }\n`\nconst SAVE_CONFIG = gql`\n mutation Save($config: JSONObject) {\n saveConfig(config: $config)\n }\n`\n\nfunction Commissions({ isActive, doContinue }) {\n const classes = useStyles()\n const commissionClasses = useCommissionStyles()\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('commissions')(it.commissions[0])\n return saveConfig({ variables: { config } })\n }\n\n const currency = R.path(['fiatCurrency'])(\n fromNamespace(namespaces.LOCALE)(data?.config)\n )\n\n const locale = fromNamespace(namespaces.LOCALE)(data?.config)\n\n return (\n \n {title} \n {error && Failed to save changes }\n
\n )}\n {children}\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 { utils as coinUtils } from '@lamassu/coins'\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 const defaultCryptoUnit = R.head(\n R.keys(coinUtils.getCryptoCurrency(coin).units)\n )\n const adjustedData = {\n zeroConfLimit: 0,\n ...currentData,\n cryptoUnits: defaultCryptoUnit\n }\n if (!WalletSchema.isValidSync(adjustedData)) return setError(true)\n\n const withCoin = toNamespace(coin, R.omit('coin', adjustedData))\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: 'none', zeroConfLimit: 0 })}\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: 'none', zeroConfLimit: 0 })\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\nconst singleBitgo = 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: [\n { code: 'prod', display: 'prod' },\n { code: 'test', display: 'test' }\n ],\n labelProp: 'display',\n valueProp: 'code'\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('The token must be a string')\n .max(100, 'The token is too long')\n .required('The token is required'),\n environment: Yup.string('The environment must be a string')\n .matches(/(prod|test)/)\n .required('The environment is required'),\n [`${code}WalletId`]: Yup.string(`The ${code} wallet ID must be a string`)\n .max(100, `The ${code} wallet ID is too long`)\n .required(`The ${code} wallet ID is required`),\n [`${code}WalletPassphrase`]: Yup.string(\n `The ${code} passphrase must be a string`\n )\n .max(100, `The ${code} wallet passphrase is too long`)\n .required(`The ${code} wallet passphrase is required`)\n })\n})\n\nexport default singleBitgo\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 { getSchema 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 const locale = fromNamespace(namespaces.LOCALE, config)\n return CommissionsSchema(locale).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 panel, you can define default settings\n that will be applied to all machines you add to your network later on.\n These settings may be overridden for specific machines in the 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 the Lamassu Admin
\n\n To get you started, we’ve put together a wizard that will\n
\n help set up what you need before pairing your 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{label}
\n \n )\n}\n\nexport default LegendEntry\n","import { comet } from 'src/styling/variables'\n\nconst styles = {\n dotOtWrapper: {\n position: 'absolute',\n top: coords => coords?.y ?? 0,\n left: coords => coords?.x ?? 0,\n width: 150,\n padding: 12,\n borderRadius: 8\n },\n dotOtTransactionAmount: {\n margin: [[8, 0, 8, 0]]\n },\n dotOtTransactionVolume: {\n color: comet\n },\n dotOtTransactionClasses: {\n marginTop: 15,\n '& p > span': {\n marginLeft: 5\n },\n '& p:last-child': {\n marginTop: 5\n }\n }\n}\n\nexport default styles\n","import { Paper } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport * as R from 'ramda'\nimport React, { memo } from 'react'\n\nimport { Info2, Label3, 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 { numberToFiatAmount } from 'src/utils/number'\nimport { singularOrPlural } from 'src/utils/string'\nimport { formatDate, formatDateNonUtc } from 'src/utils/timezones'\n\nimport styles from './GraphTooltip.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst GraphTooltip = ({\n coords,\n data,\n dateInterval,\n period,\n currency,\n representing\n}) => {\n const classes = useStyles(coords)\n\n const formattedDateInterval = !R.includes('hourOfDay', representing.code)\n ? [\n formatDate(\n dateInterval[1],\n null,\n period.code === 'day' ? 'MMM d, HH:mm' : 'MMM d'\n ),\n formatDate(\n dateInterval[0],\n null,\n period.code === 'day' ? 'HH:mm' : 'MMM d'\n )\n ]\n : [\n formatDateNonUtc(dateInterval[1], 'HH:mm'),\n formatDateNonUtc(dateInterval[0], 'HH:mm')\n ]\n\n const transactions = R.reduce(\n (acc, value) => {\n acc.volume += parseInt(value.fiat)\n if (value.txClass === 'cashIn') acc.cashIn++\n if (value.txClass === 'cashOut') acc.cashOut++\n return acc\n },\n { volume: 0, cashIn: 0, cashOut: 0 },\n data\n )\n\n return (\n\n {R.length(data)}{' '}\n {singularOrPlural(R.length(data), 'transaction', 'transactions')}\n
\n\n {numberToFiatAmount(transactions.volume)} {currency} in volume\n
\n\n \n \n \n \n
\n \n {!R.isNil(selectionCoords) && (\n
\n )\n}\n\nexport default memo(GraphWrapper)\n","import { Box } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { getTimezoneOffset } from 'date-fns-tz'\nimport { format, add, startOfWeek } from 'date-fns/fp'\nimport * as R from 'ramda'\nimport React, { useState } from 'react'\n\nimport { RadioGroup, Select } from 'src/components/inputs'\nimport { H2 } from 'src/components/typography'\nimport { MINUTE } from 'src/utils/time'\n\nimport styles from '../../Analytics.styles'\nimport Graph from '../../graphs/Graph'\nimport LegendEntry from '../LegendEntry'\n\nconst useStyles = makeStyles(styles)\n\nconst options = [\n { code: 'hourOfDayTransactions', display: 'Transactions' },\n { code: 'hourOfDayVolume', display: 'Volume' }\n]\n\nconst dayOptions = R.map(\n it => ({\n code: R.toLower(it),\n display: it\n }),\n Array.from(Array(7)).map((_, i) =>\n format('EEEE', add({ days: i }, startOfWeek(new Date())))\n )\n)\n\nconst HourOfDayBarGraphHeader = ({\n title,\n period,\n data,\n machines,\n selectedMachine,\n handleMachineChange,\n timezone,\n currency\n}) => {\n const classes = useStyles()\n\n const [graphType, setGraphType] = useState(options[0].code)\n const [selectedDay, setSelectedDay] = useState(dayOptions[0])\n\n const legend = {\n cashIn: ,\n cashOut: \n }\n\n const offset = getTimezoneOffset(timezone)\n\n const txsPerWeekday = R.reduce(\n (acc, value) => {\n const created = new Date(value.created)\n created.setTime(\n created.getTime() + created.getTimezoneOffset() * MINUTE + offset\n )\n switch (created.getDay()) {\n case 0:\n acc.sunday.push(value)\n break\n case 1:\n acc.monday.push(value)\n break\n case 2:\n acc.tuesday.push(value)\n break\n case 3:\n acc.wednesday.push(value)\n break\n case 4:\n acc.thursday.push(value)\n break\n case 5:\n acc.friday.push(value)\n break\n case 6:\n acc.saturday.push(value)\n break\n default:\n throw new Error('Day of week not recognized')\n }\n return acc\n },\n R.fromPairs(R.map(it => [it.code, []], dayOptions)),\n data\n )\n\n return (\n <>\n \n
\n \n \n \n
\n {title}
\n\n setGraphType(e.target.value)}\n />\n
\n \n
\n \n \n \n
\n {title}
\n\n
\n \n
\n \n \n \n
\n {title}
\n\n setGraphType(e.target.value)}\n />\n
\n \n \n {numberToFiatAmount(value)}\n {!!currency && ` ${currency}`}\n \n \n {R.gt(growthRate, 0) &&
\n )\n}\n\nconst Analytics = () => {\n const classes = useStyles()\n\n const { data: txResponse, loading: txLoading } = useQuery(GET_TRANSACTIONS, {\n variables: {\n from: subDays(65, endOfToday()),\n until: endOfToday(),\n excludeTestingCustomers: true\n }\n })\n const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)\n\n const [representing, setRepresenting] = useState(REPRESENTING_OPTIONS[0])\n const [period, setPeriod] = useState(PERIOD_OPTIONS[0])\n const [machine, setMachine] = useState(MACHINE_OPTIONS[0])\n\n const loading = txLoading || configLoading\n\n const transactions = R.path(['transactions'])(txResponse) ?? []\n const machines = R.path(['machines'])(configResponse) ?? []\n const config = R.path(['config'])(configResponse) ?? []\n const rates = R.path(['fiatRates'])(configResponse) ?? []\n const fiatLocale = fromNamespace('locale')(config).fiatCurrency\n\n const timezone = config?.locale_timezone\n\n const convertFiatToLocale = item => {\n if (item.fiatCode === fiatLocale) return item\n const itemRate = R.find(R.propEq('code', item.fiatCode))(rates)\n const localeRate = R.find(R.propEq('code', fiatLocale))(rates)\n const multiplier = localeRate?.rate / itemRate?.rate\n return { ...item, fiat: parseFloat(item.fiat) * multiplier }\n }\n\n const data =\n R.map(convertFiatToLocale)(\n transactions?.filter(\n tx =>\n (!tx.dispensed || !tx.expired) && (tx.sendConfirmed || tx.dispense)\n )\n ) ?? []\n\n const machineOptions = R.clone(MACHINE_OPTIONS)\n\n R.forEach(\n m => machineOptions.push({ code: m.deviceId, display: m.name }),\n machines\n )\n\n const machineTxs = R.filter(\n tx => (machine.code === 'all' ? true : tx.deviceId === machine.code),\n data\n )\n\n const filteredData = timeInterval => ({\n current:\n machineTxs.filter(\n d => new Date(d.created) >= Date.now() - TIME_OPTIONS[timeInterval]\n ) ?? [],\n previous:\n machineTxs.filter(\n d =>\n new Date(d.created) < Date.now() - TIME_OPTIONS[timeInterval] &&\n new Date(d.created) >= Date.now() - 2 * TIME_OPTIONS[timeInterval]\n ) ?? []\n })\n\n const txs = {\n current: filteredData(period.code).current.length,\n previous: filteredData(period.code).previous.length\n }\n\n const avgAmount = {\n current:\n R.sum(R.map(d => d.fiat, filteredData(period.code).current)) /\n (txs.current === 0 ? 1 : txs.current),\n previous:\n R.sum(R.map(d => d.fiat, filteredData(period.code).previous)) /\n (txs.previous === 0 ? 1 : txs.previous)\n }\n\n const txVolume = {\n current: R.sum(R.map(d => d.fiat, filteredData(period.code).current)),\n previous: R.sum(R.map(d => d.fiat, filteredData(period.code).previous))\n }\n\n const commissions = {\n current: R.sum(\n R.map(\n d => d.fiat * d.commissionPercentage,\n filteredData(period.code).current\n )\n ),\n previous: R.sum(\n R.map(\n d => d.fiat * d.commissionPercentage,\n filteredData(period.code).previous\n )\n )\n }\n\n const getGraphInfo = representing => {\n switch (representing.code) {\n case 'overTime':\n return (\n {label}
\n\n {numberToFiatAmount(growthRate)}%\n
\n \n\n
\n {getGraphInfo(representing)}\n \n )\n )\n}\n\nexport default Analytics\n","import { spacer, white } from 'src/styling/variables'\nconst styles = {\n grid: {\n flex: 1,\n height: '100%'\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n marginLeft: spacer * 6\n },\n footer: {\n margin: [['auto', 0, spacer * 3, 'auto']]\n },\n modalTitle: {\n margin: [['auto', 0, 8.5, 'auto']]\n },\n subtitle: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n flexDirection: 'row'\n },\n white: {\n color: white\n },\n deleteButton: {\n paddingLeft: 13\n },\n addressRow: {\n marginLeft: 8\n },\n error: {\n marginTop: 20\n },\n closeButton: {\n display: 'flex',\n padding: [[spacer * 2, spacer * 2, 0, spacer * 2]],\n paddingRight: spacer * 1.5,\n justifyContent: 'end'\n },\n dialogTitle: {\n margin: [[0, spacer * 2, spacer, spacer * 4 + spacer]]\n },\n dialogContent: {\n width: 615,\n marginLeft: 16\n },\n dialogActions: {\n padding: spacer * 4,\n paddingTop: spacer * 2\n },\n cancelButton: {\n marginRight: 8,\n padding: 0\n }\n}\n\nexport default styles\n","import { Box } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { Formik, Form, Field } from 'formik'\nimport * as R from 'ramda'\nimport React from 'react'\nimport * as Yup from 'yup'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport { Link } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\nimport { H3 } from 'src/components/typography'\n\nimport styles from './Blacklist.styles'\nconst useStyles = makeStyles(styles)\n\nconst BlackListModal = ({\n onClose,\n selectedCoin,\n addToBlacklist,\n errorMsg\n}) => {\n const classes = useStyles()\n const handleAddToBlacklist = address => {\n if (selectedCoin.code === 'BCH' && !address.startsWith('bitcoincash:')) {\n address = 'bitcoincash:' + address\n }\n addToBlacklist(selectedCoin.code, address)\n }\n const placeholderAddress = {\n BTC: '1ADwinnimZKGgQ3dpyfoUZvJh4p1UWSSpD',\n ETH: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',\n LTC: 'LPKvbjwV1Kaksktzkr7TMK3FQtQEEe6Wqa',\n DASH: 'XqQ7gU8eM76rEfey726cJpT2RGKyJyBrcn',\n ZEC: 't1KGyyv24eL354C9gjveBGEe8Xz9UoPKvHR',\n BCH: 'qrd6za97wm03lfyg82w0c9vqgc727rhemg5yd9k3dm',\n USDT: '0x5754284f345afc66a98fbb0a0afe71e0f007b949',\n XMR:\n '888tNkZrPN6JsEgekjMnABU4TBzc2Dt29EPAvkRxbANsAnjyPbb3iQ1YBRk1UXcdRsiKc9dhwMVgN5S9cQUiyoogDavup3H'\n }\n\n return (\n \n
\n \n
\n \n \n \n Blacklist address\n \n \n
\n \n )\n}\n\nexport default BlackListModal\n","import { makeStyles, Box } from '@material-ui/core'\nimport classnames from 'classnames'\nimport * as R from 'ramda'\nimport React, { useState, useEffect } from 'react'\nimport {\n AutoSizer,\n List,\n CellMeasurer,\n CellMeasurerCache\n} from 'react-virtualized'\n\nimport {\n Table,\n TBody,\n THead,\n Tr,\n Td,\n Th\n} from 'src/components/fake-table/Table'\nimport { EmptyTable } from 'src/components/table'\nimport { H4 } from 'src/components/typography'\nimport { ReactComponent as ExpandClosedIcon } from 'src/styling/icons/action/expand/closed.svg'\nimport { ReactComponent as ExpandOpenIcon } from 'src/styling/icons/action/expand/open.svg'\n\nimport styles from './DataTable.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst Row = ({\n id,\n index,\n elements,\n data,\n width,\n Details,\n expanded,\n expandRow,\n expWidth,\n expandable,\n onClick,\n size,\n ...props\n}) => {\n const classes = useStyles()\n\n const hasPointer = onClick || expandable\n const trClasses = {\n [classes.pointer]: hasPointer,\n [classes.row]: true,\n [classes.expanded]: expanded\n }\n\n return (\n \n \n {\n expandable && expandRow(id, data)\n onClick && onClick(data)\n }}\n error={data.error || data.hasError || data.batchError}\n shouldShowError={false}\n errorMessage={data.errorMessage || data.hasError || data.batchError}>\n {elements.map(({ view = it => it?.toString(), ...props }, idx) => (\n \n {view(data)}\n \n ))}\n {expandable && (\n \n expandRow(id, data)}\n className={classes.expandButton}>\n {expanded && \n )}\n \n
\n {expandable && expanded && (\n \n \n \n \n \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 rowSize,\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, data) => {\n if (data.id) {\n cache.clear(data.id)\n setExpanded(data.id === expanded ? null : data.id)\n } else {\n cache.clear(id)\n setExpanded(id === expanded ? null : id)\n }\n }\n\n const cache = new CellMeasurerCache({\n defaultHeight: 58,\n fixedWidth: true\n })\n\n function rowRenderer({ index, key, parent, style }) {\n return (\n \n
\n
\n )}\n \n )\n }\n\n return (\n | }\n |
|---|
\n {R.path(['address'], it)} \n
\n )\n },\n {\n name: 'deleteButton',\n header: \n \n \n
\n \n {'Are you sure you want to enable this?'}\n
\n\n \n \n \n enablePaperWalletOnly\n ? addressReuseSave({\n enablePaperWalletOnly: e.target.checked\n })\n : setConfirmDialog(true)\n }\n value={enablePaperWalletOnly}\n />\n {enablePaperWalletOnly ? 'On' : 'Off'} \n \n \n \n \n {\n addressReuseSave({ rejectAddressReuse: event.target.checked })\n }}\n value={rejectAddressReuse}\n />\n {rejectAddressReuse ? 'On' : 'Off'} \n \n \n \n \n
\n \n {clickedItem.display\n ? `${clickedItem.display} blacklisted addresses`\n : ''}{' '}\n
\nEnable paper wallet (only)
\n\n The \"Enable paper wallet (only)\" option means that only paper\n wallets will be printed for users, and they won't be permitted\n to scan an address from their own wallet.\n
\nReject reused addresses
\n\n The \"Reject reused addresses\" option means that all addresses\n that are used once will be automatically rejected if there's\n an attempt to use them again on a new transaction.\n
\n\n
\n )\n}\n\nexport default WizardSplash\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 marginBottom: 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 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 tejo3CassetteOne from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-1-left.svg'\nimport tejo3CassetteTwo from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-2-left.svg'\nimport tejo3CassetteThree from 'src/styling/icons/cassettes/tejo/3-cassettes/3-cassettes-open-3-left.svg'\nimport tejo4CassetteOne from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-1-left.svg'\nimport tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-2-left.svg'\nimport tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg'\nimport tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.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 getCassetesArtworks = () => ({\n 2: {\n 1: cassetteOne,\n 2: cassetteTwo\n },\n 3: {\n 1: tejo3CassetteOne,\n 2: tejo3CassetteTwo,\n 3: tejo3CassetteThree\n },\n 4: {\n 1: tejo4CassetteOne,\n 2: tejo4CassetteTwo,\n 3: tejo4CassetteThree,\n 4: tejo4CassetteFour\n }\n})\n\nconst WizardStep = ({\n name,\n step,\n schema,\n error,\n lastStep,\n onContinue,\n steps,\n fiatCurrency,\n options,\n numberOfCassettes\n}) => {\n const classes = useStyles()\n\n const label = lastStep ? 'Finish' : 'Next'\n\n return (\n <>\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 {name} \n
\n\n {step <= numberOfCassettes && (\n \n Cash Cassette Bill Count \n Default Commissions \n
\n )}\n \n )\n}\n\nexport default WizardStep\n","import * as R from 'ramda'\nimport * as Yup from 'yup'\n\nimport { Autocomplete, NumberInput } from 'src/components/inputs/formik'\nimport { bold } from 'src/styling/helpers'\nimport denominations from 'src/utils/bill-denominations'\nimport { getBillOptions } from 'src/utils/bill-options'\nimport { CURRENCY_MAX } from 'src/utils/constants'\nimport { transformNumber } from 'src/utils/number'\n\nconst widthsByNumberOfCassettes = {\n 2: { machine: 300, cassette: 225, zeroConf: 200 },\n 3: { machine: 210, cassette: 180, zeroConf: 200 },\n 4: { machine: 200, cassette: 150, zeroConf: 150 }\n}\n\nconst DenominationsSchema = Yup.object().shape({\n cassette1: Yup.number()\n .label('Cassette 1')\n .required()\n .min(1)\n .max(CURRENCY_MAX),\n cassette2: Yup.number()\n .label('Cassette 2')\n .required()\n .min(1)\n .max(CURRENCY_MAX),\n cassette3: Yup.number()\n .label('Cassette 3')\n .min(1)\n .max(CURRENCY_MAX)\n .nullable()\n .transform(transformNumber),\n cassette4: Yup.number()\n .label('Cassette 4')\n .min(1)\n .max(CURRENCY_MAX)\n .nullable()\n .transform(transformNumber)\n})\n\nconst getElements = (machines, locale = {}, classes) => {\n const fiatCurrency = R.prop('fiatCurrency')(locale)\n const maxNumberOfCassettes = Math.max(\n ...R.map(it => it.numberOfCassettes, machines),\n 0\n )\n\n const options = getBillOptions(locale, denominations)\n const cassetteProps =\n options?.length > 0\n ? {\n options: options,\n labelProp: 'display',\n valueProp: 'code',\n className: classes.autoComplete\n }\n : { decimalPlaces: 0 }\n\n const elements = [\n {\n name: 'id',\n header: 'Machine',\n width: widthsByNumberOfCassettes[maxNumberOfCassettes]?.machine,\n view: it => machines.find(({ deviceId }) => deviceId === it).name,\n size: 'sm',\n editable: false\n }\n ]\n\n R.until(\n R.gt(R.__, maxNumberOfCassettes),\n it => {\n elements.push({\n name: `cassette${it}`,\n header: `Cassette ${it}`,\n size: 'sm',\n stripe: true,\n textAlign: 'right',\n width: widthsByNumberOfCassettes[maxNumberOfCassettes]?.cassette,\n suffix: fiatCurrency,\n bold: bold,\n view: it => it,\n input: options?.length > 0 ? Autocomplete : NumberInput,\n inputProps: cassetteProps,\n doubleHeader: 'Denominations',\n isHidden: machine =>\n it >\n machines.find(({ deviceId }) => deviceId === machine.id)\n .numberOfCassettes\n })\n return R.add(1, it)\n },\n 1\n )\n\n return elements\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 { getBillOptions } from 'src/utils/bill-options'\nimport { toNamespace } from 'src/utils/config'\nimport { transformNumber } from 'src/utils/number'\n\nimport WizardSplash from './WizardSplash'\nimport WizardStep from './WizardStep'\nimport { DenominationsSchema } from './helper'\n\nconst MODAL_WIDTH = 554\nconst MODAL_HEIGHT = 520\n\nconst Wizard = ({ machine, locale, onClose, save, error }) => {\n const LAST_STEP = machine.numberOfCassettes + 2\n const [{ step, config }, setState] = useState({\n step: 0,\n config: { active: true }\n })\n\n const options = getBillOptions(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(\n machine.deviceId,\n DenominationsSchema.cast(config, { assert: false })\n )\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 R.until(\n R.gt(R.__, machine.numberOfCassettes),\n it => {\n steps.push({\n type: `cassette${it}`,\n display: `Cassette ${it}`,\n component: Autocomplete,\n inputProps: {\n options: R.map(it => ({ code: it, display: it }))(options),\n labelProp: 'display',\n valueProp: 'code'\n }\n })\n return R.add(1, it)\n },\n 1\n )\n\n steps.push({\n type: 'zeroConfLimit',\n display: '0-conf Limit',\n schema: Yup.object().shape({\n zeroConfLimit: Yup.number().required()\n })\n })\n\n const schema = () =>\n Yup.object().shape({\n cassette1: Yup.number().required(),\n cassette2:\n machine.numberOfCassettes > 1 && step >= 2\n ? Yup.number().required()\n : Yup.number()\n .transform(transformNumber)\n .nullable(),\n cassette3:\n machine.numberOfCassettes > 2 && step >= 3\n ? Yup.number().required()\n : Yup.number()\n .transform(transformNumber)\n .nullable(),\n cassette4:\n machine.numberOfCassettes > 3 && step >= 4\n ? Yup.number().required()\n : Yup.number()\n .transform(transformNumber)\n .nullable()\n })\n\n return (\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 100 crypto atoms or less.\n
\n\n (Crypto atoms are the smallest unit in each cryptocurrency.\n E.g., satoshis in Bitcoin, or wei in Ethereum.)\n
\n\n
\n )\n }\n)\n\nexport default CommissionsList\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 TitleSection from 'src/components/layout/TitleSection'\nimport { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg'\nimport { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg'\nimport { ReactComponent as OverrideLabelIcon } from 'src/styling/icons/status/spring2.svg'\nimport { fromNamespace, toNamespace, namespaces } from 'src/utils/config'\n\nimport CommissionsDetails from './components/CommissionsDetails'\nimport CommissionsList from './components/CommissionsList'\n\nconst styles = {\n listViewButton: {\n marginLeft: 4\n }\n}\n\nconst useStyles = makeStyles(styles)\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`\nconst removeCoinFromOverride = crypto => override =>\n R.mergeRight(override, {\n cryptoCurrencies: R.without([crypto], override.cryptoCurrencies)\n })\n\nconst Commissions = ({ name: SCREEN_KEY }) => {\n const classes = useStyles()\n const [showMachines, setShowMachines] = useState(false)\n const [error, setError] = useState(null)\n const { data, loading } = useQuery(GET_DATA)\n const [saveConfig] = useMutation(SAVE_CONFIG, {\n refetchQueries: () => ['getData'],\n onError: error => setError(error)\n })\n\n const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)\n const localeConfig =\n data?.config && fromNamespace(namespaces.LOCALE)(data.config)\n\n const currency = R.prop('fiatCurrency')(localeConfig)\n const overrides = R.prop('overrides')(config)\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 setError(null)\n return saveConfig({ variables: { config } })\n }\n\n const saveOverridesFromList = it => (_, override) => {\n const cryptoOverriden = R.path(['cryptoCurrencies', 0], override)\n\n const sameMachine = R.eqProps('machine', override)\n const notSameOverride = it => !R.eqProps('cryptoCurrencies', override, it)\n\n const filterMachine = R.filter(R.both(sameMachine, notSameOverride))\n const removeCoin = removeCoinFromOverride(cryptoOverriden)\n\n const machineOverrides = R.map(removeCoin)(filterMachine(it))\n\n const overrides = machineOverrides.concat(\n R.filter(it => !sameMachine(it), it)\n )\n\n const config = {\n commissions_overrides: R.prepend(override, overrides)\n }\n\n return saveConfig({ variables: { config } })\n }\n\n const labels = showMachines\n ? [\n {\n label: 'Override value',\n icon: \n
\n \n
\n {title}
\n\n
\n )}\n {children}\n \n {authorize && state !== OVERRIDE_AUTHORIZED && AuthorizeButton()}\n {reject && state !== OVERRIDE_REJECTED && RejectButton()}\n {edit && !isEditing && EditButton()}\n {confirm && isEditing && ConfirmButton()}\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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/button/data/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Data-icon---small\",\n transform: \"translate(0.500000, 0.500000)\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11,2.44444444 L11,5.5 C11,6.85002939 8.53756612,7.94444444 5.5,7.94444444 C2.521994,7.94444444 0.0939612041,6.81341452 1.11160464e-12,5.5 L0.00282594991,2.44444444\",\n id: \"oval-3\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11,5.5 L11,8.55555556 C11,9.90558494 8.53756612,11 5.5,11 C2.521994,11 0.0939612041,9.86897007 1.11160464e-12,8.55555556 L0.00282594991,5.5\",\n id: \"oval-2\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"oval-1\",\n cx: 5.5,\n cy: 2.44444444,\n rx: 5.5,\n ry: 2.44444444\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-9\",\n transform: \"translate(0.000000, 4.000000)\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#FFFFFF\",\n fill: \"#5F668A\",\n cx: 4,\n cy: 4,\n r: 3.5\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Path\",\n fill: \"#FFFFFF\",\n fillRule: \"nonzero\",\n points: \"4.33333333 3.66666667 6 3.66666667 6 4.33333333 4.33333333 4.33333333 4.33333333 6 3.66666667 6 3.66666667 4.33333333 2 4.33333333 2 3.66666667 3.66666667 3.66666667 3.66666667 2 4.33333333 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: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.4676bf59.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/button/data/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Data-icon---small\",\n transform: \"translate(1.500000, 0.500000)\",\n stroke: \"#1B2559\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10,2 L10,4.77777778 C10,6.00507722 7.76142375,7 5,7 C2.29272181,7 0.0854192765,5.97179097 0,4.77777778 L0.00256904537,2\",\n id: \"oval-3\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10,5 L10,7.77777778 C10,9.00507722 7.76142375,10 5,10 C2.29272181,10 0.0854192765,8.97179097 0,7.77777778 L0.00256904537,5\",\n id: \"oval-2\"\n}), /*#__PURE__*/React.createElement(\"ellipse\", {\n id: \"oval-1\",\n cx: 5,\n cy: 2,\n rx: 5,\n ry: 2\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-9\",\n transform: \"translate(0.000000, 4.000000)\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#1B2559\",\n fill: \"#EBEFFF\",\n cx: 4,\n cy: 4,\n r: 3.5\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Path\",\n fill: \"#1B2559\",\n fillRule: \"nonzero\",\n points: \"4.33333333 3.66666667 6 3.66666667 6 4.33333333 4.33333333 4.33333333 4.33333333 6 3.66666667 6 3.66666667 4.33333333 2 4.33333333 2 3.66666667 3.66666667 3.66666667 3.66666667 2 4.33333333 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: \"12px\",\n height: \"12px\",\n viewBox: \"0 0 12 12\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgZodiac);\nexport default __webpack_public_path__ + \"static/media/zodiac.cfe5467c.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/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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(\"g\", {\n id: \"icon/search/dark02\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group\",\n transform: \"translate(1.000000, 1.000000)\",\n stroke: \"#1B2559\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.2771714,7.35325714 C14.2771714,11.1778286 11.1768857,14.2781143 7.35231429,14.2781143 C3.5286,14.2781143 0.428314286,11.1778286 0.428314286,7.35325714 C0.428314286,3.52868571 3.5286,0.4284 7.35231429,0.4284 C11.1768857,0.4284 14.2771714,3.52868571 14.2771714,7.35325714 Z\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 12.3331714,\n y1: 12.3342,\n x2: 17.5360286,\n y2: 17.5370571,\n id: \"Stroke-3\",\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/search/dark02\") : 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.eea12e4f.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 \n
\n \n
\n Type of entry
\n\n \n \n
\n )}\n {displayRequirementOptions && (\n Type of data
\n\n \n \n
\n )}\n \n )\n}\n\nconst ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {\n const classes = useStyles()\n\n const typeOfEntrySelected = selectedValues?.entryType\n const dataTypeSelected = selectedValues?.dataType\n const requirementSelected = selectedValues?.requirement\n\n const displayRequirements = typeOfEntrySelected === 'requirement'\n\n const isCustomInfoRequirement = requirementSelected === CUSTOM\n\n const updatedRequirementOptions = !R.isEmpty(customInfoRequirementOptions)\n ? updateRequirementOptions(requirementOptions)\n : requirementOptions\n\n const requirementName = displayRequirements\n ? R.find(R.propEq('code', requirementSelected))(updatedRequirementOptions)\n .display\n : ''\n\n const title = displayRequirements\n ? `Requirement ${requirementName}`\n : `Custom ${dataTypeSelected} entry`\n\n const elements = displayRequirements\n ? requirementElements[requirementSelected]\n : customElements[dataTypeSelected]\n\n const upload = displayRequirements\n ? requirementSelected === 'idCardPhoto' ||\n requirementSelected === 'frontCamera'\n : dataTypeSelected === 'file' || dataTypeSelected === 'image'\n\n return (\n <>\n Requirements
\n{title}
\n\n {!upload &&\n !isCustomInfoRequirement &&\n elements.options.map(({ label, name }) => (\n
\n {upload && (\n \n {children}\n {onClose && (\n \n \n )}\n
\n )\n}\n\nexport const InformativeDialog = memo(\n ({ title = '', open, onDissmised, disabled = false, data, ...props }) => {\n const classes = useStyles()\n\n const innerOnClose = () => {\n onDissmised()\n }\n\n return (\n \n \n \n
\n {title}
\n\n
\n ))}\n \n \n )\n})\n","import typographyStyles from 'src/components/typography/styles'\nimport { offColor } from 'src/styling/variables'\n\nconst { p } = typographyStyles\n\nexport default {\n label: {\n color: offColor,\n margin: [[0, 0, 6, 0]]\n },\n firstRow: {\n padding: [[8]],\n display: 'flex',\n flexDirection: 'column'\n },\n secondRow: {\n extend: p,\n display: 'flex',\n padding: [[8]],\n '& > div': {\n display: 'flex',\n flexDirection: 'column',\n '& > div': {\n height: 37,\n marginBottom: 15,\n marginRight: 55\n }\n }\n }\n}\n","import { makeStyles } from '@material-ui/core/styles'\nimport * as R from 'ramda'\nimport React, { memo, useState } from 'react'\n\nimport { Carousel } from 'src/components/Carousel'\nimport { Label1 } from 'src/components/typography'\n\nimport CopyToClipboard from '../../Transactions/CopyToClipboard'\n\nimport styles from './PhotosCarousel.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst PhotosCarousel = memo(({ photosData }) => {\n const classes = useStyles()\n const [currentIndex, setCurrentIndex] = useState(0)\n\n const Label = ({ children }) => {\n const classes = useStyles()\n return \n
\n \n \n \n {photosData && photosData[currentIndex]?.id}\n \n
\n )}\n \n
\n \n )\n})\n\nexport default PhotosCarousel\n","import ButtonBase from '@material-ui/core/ButtonBase'\nimport Paper from '@material-ui/core/Card'\nimport { makeStyles } from '@material-ui/core/styles'\nimport * as R from 'ramda'\nimport React, { memo, useState } from 'react'\n\nimport { InformativeDialog } from 'src/components/InformativeDialog'\nimport { Info2 } from 'src/components/typography'\nimport { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'\nimport { URI } from 'src/utils/apollo'\n\nimport styles from './PhotosCard.styles'\nimport PhotosCarousel from './PhotosCarousel'\n\nconst useStyles = makeStyles(styles)\n\nconst PhotosCard = memo(({ photosData }) => {\n const classes = useStyles()\n\n const [photosDialog, setPhotosDialog] = useState(false)\n\n const singlePhoto = R.head(photosData)\n\n return (\n <>\n \n
\n \n \n
\n {photosData && photosData[currentIndex]?.date}
\n \n \n
\n \n {!isFaceCustomerPhoto ? 'Acceptance of T&C' : 'Compliance scan'}\n
\n \n \n \n
\n ) : (\n \n {photosData.length} \n
\n \n
\n \n {name.length\n ? name\n : getFormattedPhone(R.path(['phone'])(customer), locale.country)}\n
\n\n {sideBarOptions?.map(({ Icon, InverseIcon, display, code }) => (\n onClick(code)}>\n
\n ))}\n \n )\n}\n\nexport default CustomerSidebar\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(\"rect\", {\n id: \"path-1\",\n x: 0,\n y: 0,\n width: 22,\n height: 22\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/action/delete/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\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(\"g\", {\n id: \"Background\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 9,\n y1: 9,\n x2: 9,\n y2: 18,\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n mask: \"url(#mask-2)\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 13,\n y1: 9,\n x2: 13,\n y2: 18,\n id: \"Stroke-2\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n mask: \"url(#mask-2)\"\n}), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-9\",\n mask: \"url(#mask-2)\",\n stroke: \"#FFFFFF\",\n strokeLinecap: \"round\",\n strokeWidth: 2\n}, /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(1.000000, 1.000000)\"\n}, /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n strokeLinejoin: \"round\",\n points: \"2 5 4 20 16 20 18 5\"\n}), /*#__PURE__*/React.createElement(\"line\", {\n x1: 0,\n y1: 4,\n x2: 20,\n y2: 4,\n id: \"Stroke-5\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13,3 C13,1.343 11.657,0 10,0 C8.343,0 7,1.343 7,3\",\n id: \"Stroke-7\"\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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.144118ff.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/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 xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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 };","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/button/replace/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 transform: \"translate(0.500000, 0.500000)\",\n stroke: \"#FFFFFF\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.27636475,10.2264084 C2.67216087,9.96069246 2.10487152,9.58126145 1.60869691,9.087544 C-0.521488181,6.9675304 -0.538316861,3.54693703 1.57123953,1.44692357 C1.86137314,1.15837428 2.17625375,0.909794042 2.50930653,0.701182852\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"3.0943493 1.69429658 3.08837783 0.545717786 1.99994228 0\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-2\",\n transform: \"translate(8.999987, 5.500035) scale(-1, -1) translate(-8.999987, -5.500035) translate(6.999974, 0.000000)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M3.27636475,10.2264084 C2.67216087,9.96069246 2.10487152,9.58126145 1.60869691,9.087544 C-0.521488181,6.9675304 -0.538316861,3.54693703 1.57123953,1.44692357 C1.86137314,1.15837428 2.17625375,0.909794042 2.50930653,0.701182852\",\n id: \"Stroke-1\"\n}), /*#__PURE__*/React.createElement(\"polyline\", {\n id: \"Stroke-3\",\n points: \"3.0943493 1.69429658 3.08837783 0.545717786 1.99994228 3.80623901e-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 0 12 12\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.16f4b162.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(\"defs\", null, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"path-1\",\n points: \"0 21 21 21 21 0 0 0\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/save/white\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group\"\n}, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-1\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n points: \"20.5 20.5 0.5 20.5 0.5 0.5 16.75 0.5 20.5 4.25\"\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(\"g\", {\n id: \"Clip-4\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-5\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n mask: \"url(#mask-2)\",\n points: \"4.25 7.5 16.75 7.5 16.75 0.5 4.25 0.5\"\n}), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#FFFFFF\",\n strokeWidth: 2,\n mask: \"url(#mask-2)\",\n cx: 11,\n cy: 14,\n r: 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: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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(SvgWhite);\nexport default __webpack_public_path__ + \"static/media/white.8ccc4767.svg\";\nexport { ForwardRef as ReactComponent };","import { tomato, spring4, comet } from 'src/styling/variables'\n\nexport default {\n label1: {\n display: 'flex',\n width: 85,\n justifyContent: 'right'\n },\n label1Pending: {\n color: comet\n },\n label1Rejected: {\n color: tomato\n },\n label1Accepted: {\n color: spring4\n },\n editButton: {\n marginTop: 20,\n display: 'flex',\n justifyContent: 'right'\n },\n deleteButton: {\n marginRight: 8\n },\n headerWrapper: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n height: 40\n },\n editingWrapper: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n marginTop: 20\n },\n replace: {\n marginRight: 5\n },\n input: {\n display: 'none'\n },\n button: {\n marginRight: 5\n },\n editingButtons: {\n display: 'flex',\n justifyContent: 'right'\n },\n card: {\n borderRadius: 10,\n marginRight: 15,\n marginBottom: 15\n },\n cardHeader: {\n display: 'flex',\n flexDirection: 'row',\n marginBottom: 15\n },\n editIcon: {\n marginTop: 5\n },\n cardIcon: {\n marginTop: 7\n },\n cardTitle: {\n margin: [[8, 15, 15, 15]]\n }\n}\n","import { CardContent, Card, Grid } from '@material-ui/core'\nimport { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport { Form, Formik, Field as FormikField } from 'formik'\nimport * as R from 'ramda'\nimport { useState, React } from 'react'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport PromptWhenDirty from 'src/components/PromptWhenDirty'\nimport { MainStatus } from 'src/components/Status'\n// import { HoverableTooltip } from 'src/components/Tooltip'\nimport { ActionButton } from 'src/components/buttons'\nimport { Label1, P, H3 } from 'src/components/typography'\nimport {\n OVERRIDE_AUTHORIZED,\n OVERRIDE_REJECTED,\n OVERRIDE_PENDING\n} from 'src/pages/Customers/components/propertyCard'\nimport { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'\nimport { ReactComponent as DeleteReversedIcon } from 'src/styling/icons/action/delete/white.svg'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'\nimport { ReactComponent as EditReversedIcon } from 'src/styling/icons/action/edit/white.svg'\nimport { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/white.svg'\nimport { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/white.svg'\nimport { ReactComponent as CancelReversedIcon } from 'src/styling/icons/button/cancel/white.svg'\nimport { ReactComponent as DataReversedIcon } from 'src/styling/icons/button/data/white.svg'\nimport { ReactComponent as DataIcon } from 'src/styling/icons/button/data/zodiac.svg'\nimport { ReactComponent as ReplaceReversedIcon } from 'src/styling/icons/button/replace/white.svg'\nimport { ReactComponent as SaveReversedIcon } from 'src/styling/icons/circle buttons/save/white.svg'\nimport { comet } from 'src/styling/variables'\n\nimport styles from './EditableCard.styles.js'\n\nconst useStyles = makeStyles(styles)\n\nconst fieldStyles = {\n field: {\n position: 'relative',\n width: 280,\n height: 48,\n padding: [[0, 4, 4, 0]],\n marginTop: 2\n },\n label: {\n color: comet,\n margin: [[0, 0, 0, 0]]\n },\n notEditing: {\n display: 'flex',\n flexDirection: 'column',\n '& > p:first-child': {\n height: 16,\n lineHeight: '16px',\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 editing: {\n '& > div': {\n '& > input': {\n padding: 0,\n fontSize: 14\n }\n }\n },\n readOnlyLabel: {\n color: comet,\n margin: [[3, 0, 3, 0]]\n },\n readOnlyValue: {\n margin: 0\n }\n}\n\nconst fieldUseStyles = makeStyles(fieldStyles)\n\nconst EditableField = ({ editing, field, value, size, ...props }) => {\n const classes = fieldUseStyles()\n const classNames = {\n [classes.field]: true,\n [classes.notEditing]: !editing\n }\n\n return (\n \n {isSelected(code) ?
\n {display}\n \n {!editing && (\n <>\n {field.label} \n {field.label} \n
\n )\n}\n\nconst ReadOnlyField = ({ field, value, ...props }) => {\n const classes = fieldUseStyles()\n const classNames = {\n [classes.field]: true,\n [classes.notEditing]: true\n }\n\n return (\n <>\n {value}
\n \n )}\n {editing && (\n <>\n\n {field.label} \n
\n \n )\n}\n\nconst EditableCard = ({\n fields,\n save,\n authorize,\n hasImage,\n reject,\n state,\n title,\n titleIcon,\n children,\n validationSchema,\n initialValues,\n deleteEditedData,\n retrieveAdditionalData,\n hasAdditionalData = true\n}) => {\n const classes = useStyles()\n\n const [editing, setEditing] = useState(false)\n const [input, setInput] = useState(null)\n const [error, setError] = useState(null)\n\n const triggerInput = () => input.click()\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 const authorized =\n state === OVERRIDE_PENDING\n ? { label: 'Pending', type: 'neutral' }\n : state === OVERRIDE_REJECTED\n ? { label: 'Rejected', type: 'error' }\n : { label: 'Accepted', type: 'success' }\n\n return (\n {value}
\n\n \n \n {\n save(values)\n setEditing(false)\n }}\n onReset={() => {\n setEditing(false)\n setError(false)\n }}>\n {({ setFieldValue }) => (\n \n )}\n \n \n \n
\n )\n}\n\nexport default EditableCard\n","import * as R from 'ramda'\n\nconst ifNotNull = (value, valueIfNotNull) => {\n return R.isNil(value) ? '' : valueIfNotNull\n}\n\nexport { ifNotNull }\n","import { makeStyles } from '@material-ui/core/styles'\nimport classnames from 'classnames'\nimport React, { memo } from 'react'\n\nimport { Info3, Label1 } from 'src/components/typography'\nimport { comet } from 'src/styling/variables'\n\nconst useStyles = makeStyles({\n field: {\n height: 46\n },\n label: {\n color: comet,\n margin: [[0, 3]]\n },\n value: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n margin: 0,\n paddingLeft: 4\n }\n})\n\nconst Field = memo(({ label, display, size, className }) => {\n const classes = useStyles()\n\n return (\n \n
\n {children}\n \n {titleIcon}\n
\n {state && authorize && (\n {title}
\n {\n // TODO: Enable for next release\n /*\n
\n )}\n Transactions
\n\n
\n {hasData && \n {loading ? (\n
\n Loading
\n ) : hasData ? (\n ''\n ) : (\nNo transactions so far
\n )}\n\n {R.isEmpty(data) && (\n
\n \n )\n}\n\nexport default Upload\n","import { DialogActions, DialogContent, Dialog } from '@material-ui/core'\nimport Grid from '@material-ui/core/Grid'\nimport { makeStyles } from '@material-ui/core/styles'\nimport { parse, format } from 'date-fns/fp'\nimport * as R from 'ramda'\nimport { useState, React } from 'react'\nimport * as Yup from 'yup'\n\nimport ImagePopper from 'src/components/ImagePopper'\nimport { FeatureButton, Button, IconButton } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\nimport { H3, Info3, H2 } from 'src/components/typography'\nimport {\n OVERRIDE_AUTHORIZED,\n OVERRIDE_REJECTED\n} from 'src/pages/Customers/components/propertyCard'\nimport { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg'\nimport { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg'\nimport { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'\nimport { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'\nimport { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/comet.svg'\nimport { ReactComponent as CustomerListViewReversedIcon } from 'src/styling/icons/circle buttons/customer-list-view/white.svg'\nimport { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg'\nimport { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg'\nimport { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg'\nimport { URI } from 'src/utils/apollo'\nimport { onlyFirstToUpper } from 'src/utils/string'\n\nimport styles from './CustomerData.styles.js'\nimport { EditableCard } from './components'\nimport {\n customerDataElements,\n customerDataSchemas,\n formatDates,\n getFormattedPhone\n} from './helper.js'\n\nconst useStyles = makeStyles(styles)\n\nconst IMAGE_WIDTH = 165\nconst IMAGE_HEIGHT = 32\nconst POPUP_IMAGE_WIDTH = 360\nconst POPUP_IMAGE_HEIGHT = 240\n\nconst Photo = ({ show, src }) => {\n const classes = useStyles({ width: IMAGE_WIDTH })\n\n return (\n <>\n {show ? (\n \n \n
\n )}\n {!R.isEmpty(data) && isImage && (\n \n {isImage ? (\n {`Drag and drop ${\n isImage ? 'an image' : 'a file'\n } or click to open the explorer`} \n
\n \n \n
\n )}\n {!R.isEmpty(data) && !isImage && (\n \n
\n )}\n {data.preview}
\n\n
\n )}\n \n )\n}\n\nconst CustomerData = ({\n locale,\n customer,\n updateCustomer,\n replacePhoto,\n editCustomer,\n deleteEditedData,\n updateCustomRequest,\n authorizeCustomRequest,\n updateCustomEntry,\n retrieveAdditionalData\n}) => {\n const classes = useStyles()\n const [listView, setListView] = useState(false)\n const [retrieve, setRetrieve] = useState(false)\n\n const idData = R.path(['idCardData'])(customer)\n const rawExpirationDate = R.path(['expirationDate'])(idData)\n const rawDob = R.path(['dateOfBirth'])(idData)\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 const sortByName = R.sortBy(\n R.compose(R.toLower, R.path(['customInfoRequest', 'customRequest', 'name']))\n )\n\n const customFields = []\n const customRequirements = []\n const customInfoRequests = sortByName(\n R.path(['customInfoRequests'])(customer) ?? []\n )\n\n const phone = R.path(['phone'])(customer)\n const smsData = R.path(['subscriberInfo', 'result'])(customer)\n\n const isEven = elem => elem % 2 === 0\n\n const getVisibleCards = R.filter(elem => elem.isAvailable)\n\n const initialValues = {\n idCardData: {\n firstName: R.path(['firstName'])(idData) ?? '',\n lastName: R.path(['lastName'])(idData) ?? '',\n documentNumber: R.path(['documentNumber'])(idData) ?? '',\n dateOfBirth:\n (rawDob &&\n format('yyyy-MM-dd')(parse(new Date(), 'yyyyMMdd', rawDob))) ??\n '',\n gender: R.path(['gender'])(idData) ?? '',\n country: R.path(['country'])(idData) ?? '',\n expirationDate:\n (rawExpirationDate &&\n format('yyyy-MM-dd')(\n parse(new Date(), 'yyyyMMdd', rawExpirationDate)\n )) ??\n ''\n },\n usSsn: {\n usSsn: customer.usSsn ?? ''\n },\n frontCamera: {\n frontCamera: null\n },\n idCardPhoto: {\n idCardPhoto: null\n },\n smsData: {\n phoneNumber: getFormattedPhone(phone, locale.country)\n }\n }\n\n const smsDataElements = [\n {\n name: 'phoneNumber',\n label: 'Phone number',\n component: TextInput,\n editable: false\n }\n ]\n\n const smsDataSchema = {\n smsData: Yup.lazy(values => {\n const additionalData = R.omit(['phoneNumber'])(values)\n const fields = R.keys(additionalData)\n if (R.length(fields) === 2) {\n return Yup.object().shape({\n [R.head(fields)]: Yup.string().required(),\n [R.last(fields)]: Yup.string().required()\n })\n }\n })\n }\n\n const cards = [\n {\n fields: customerDataElements.idCardData,\n title: 'ID Scan',\n titleIcon: \n \n
\n )\n}\n\nconst RetrieveDataDialog = ({\n setRetrieve,\n retrieveAdditionalData,\n open,\n props\n}) => {\n const classes = useStyles()\n\n return (\n \n setListView(false)}\n />\n setListView(true)}>\n \n )}\n
\n {'Customer data'}
\n {// TODO: Remove false condition for next release\n false && (\n <>\n\n {!listView && customer && (\n \n \n {visibleCards.map((elem, idx) => {\n return isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n {visibleCards.map((elem, idx) => {\n return !isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n )}\n {!R.isEmpty(customFields) && (\n
\n \n Custom data entry\n \n \n {customFields.map((elem, idx) => {\n return isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n {customFields.map((elem, idx) => {\n return !isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n
\n )}\n {!R.isEmpty(customRequirements) && (\n \n Custom requirements\n \n \n {customRequirements.map((elem, idx) => {\n return isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n {customRequirements.map((elem, idx) => {\n return !isEven(idx) ? editableCard(elem, idx) : null\n })}\n \n \n
\n )}\n \n setRetrieve(false)}>\n
\n {'Retrieve API data from Twilio'}
\n setOpenModal(true)}>\n \n \n
\n )\n}\n\nexport default NewNoteCard\n","import { spacer } from 'src/styling/variables'\n\nconst styles = {\n form: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n '& > *': {\n marginTop: 20\n },\n '& > *:last-child': {\n marginTop: 'auto'\n }\n },\n submit: {\n margin: [['auto', 0, 0, 'auto']]\n },\n footer: {\n display: 'flex',\n flexDirection: 'row',\n margin: [['auto', 0, spacer * 3, 0]]\n }\n}\n\nexport default styles\n","import { makeStyles } from '@material-ui/core/styles'\nimport { Form, Formik, Field } from 'formik'\nimport { React } from 'react'\nimport * as Yup from 'yup'\n\nimport ErrorMessage from 'src/components/ErrorMessage'\nimport Modal from 'src/components/Modal'\nimport { Button } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\n\nimport styles from './NewNoteModal.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst initialValues = {\n title: '',\n content: ''\n}\n\nconst validationSchema = Yup.object().shape({\n title: Yup.string()\n .required()\n .trim()\n .max(25),\n content: Yup.string().required()\n})\n\nconst NewNoteModal = ({ showModal, onClose, onSubmit, errorMsg }) => {\n const classes = useStyles()\n\n return (\n <>\n Add new
\n\n \n )\n }, fragments)\n}\n\nconst NoteCard = ({ note, deleteNote, handleClick, timezone }) => {\n const classes = useStyles()\n\n return (\n
\n handleClick(note)}>\n \n
\n )\n}\n\nexport default NoteCard\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(\"polygon\", {\n id: \"path-1\",\n points: \"0 21 21 21 21 0 0 0\"\n}));\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"icon/sf-small/save/zodiac\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-10\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-6\"\n}, /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-1\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n points: \"20.5 20.5 0.5 20.5 0.5 0.5 16.75 0.5 20.5 4.25\"\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(\"g\", {\n id: \"Clip-4\"\n}), /*#__PURE__*/React.createElement(\"polygon\", {\n id: \"Stroke-5\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n mask: \"url(#mask-2)\",\n points: \"4.25 7.5 16.75 7.5 16.75 0.5 4.25 0.5\"\n}))), /*#__PURE__*/React.createElement(\"circle\", {\n id: \"Oval\",\n stroke: \"#1B2559\",\n strokeWidth: 2,\n cx: 11,\n cy: 14,\n r: 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: \"20px\",\n height: \"20px\",\n viewBox: \"0 0 20 20\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\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.9be6e999.svg\";\nexport { ForwardRef as ReactComponent };","import { makeStyles, Paper } from '@material-ui/core'\nimport { formatDurationWithOptions, intervalToDuration } from 'date-fns/fp'\nimport { Form, Formik, Field } from 'formik'\nimport { React, useRef } from 'react'\nimport * as Yup from 'yup'\n\nimport { ActionButton } from 'src/components/buttons'\nimport { TextInput } from 'src/components/inputs/formik'\nimport { P } from 'src/components/typography'\nimport { ReactComponent as CancelIconInverse } from 'src/styling/icons/button/cancel/white.svg'\nimport { ReactComponent as CancelIcon } from 'src/styling/icons/button/cancel/zodiac.svg'\nimport { ReactComponent as SaveIconInverse } from 'src/styling/icons/circle buttons/save/white.svg'\nimport { ReactComponent as SaveIcon } from 'src/styling/icons/circle buttons/save/zodiac.svg'\nimport { toTimezone } from 'src/utils/timezones'\n\nimport styles from './NoteCard.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst NoteEdit = ({ note, cancel, edit, timezone }) => {\n const formRef = useRef()\n const classes = useStyles()\n\n const validationSchema = Yup.object().shape({\n content: Yup.string()\n })\n\n const initialValues = {\n content: note.content\n }\n\n return (\n \n
\n \n
\n {note?.title}
\n{formatDate(note?.created, timezone, 'yyyy-MM-dd')}
\n\n {\n e.stopPropagation()\n deleteNote({ noteId: note.id })\n }}\n />\n
\n \n {formatContent(note?.content)}\n
\n\n
\n \n {`Last edited `}\n {formatDurationWithOptions(\n { delimited: ', ' },\n intervalToDuration({\n start: toTimezone(new Date(note.lastEditedAt), timezone),\n end: toTimezone(new Date(), timezone)\n })\n )}\n {` ago`}\n
\n\n \n {`Cancel`}\n \n \n {`Save changes`}\n \n formRef.current.setFieldValue('content', '')}>\n {`Clear content`}\n \n
\n \n
\n )\n}\n\nexport default CustomerNotes\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(\"g\", {\n id: \"icon/ID/photo/new/comet\",\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: \"M12,14 C9.7912,14 8,12.2088 8,10 C8,7.7912 9.7912,6 12,6 C14.2088,6 16,7.7912 16,10 C16,12.2088 14.2088,14 12,14 Z M16.7142857,3.4 L14.3571429,1 L9.64285714,1 L7.28571429,3.4 L1,3.4 L1,17 L23,17 L23,3.4 L16.7142857,3.4 Z\",\n id: \"Stroke-1\",\n stroke: \"#5F668A\",\n strokeWidth: 1.6\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: \"18px\",\n viewBox: \"0 0 24 18\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"icon/ID/photo/new/comet\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _ref2);\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgComet);\nexport default __webpack_public_path__ + \"static/media/comet.8877f6c3.svg\";\nexport { ForwardRef as ReactComponent };","const styles = {\n header: {\n display: 'flex',\n flexDirection: 'row'\n },\n title: {\n marginTop: 7,\n marginRight: 24,\n marginBottom: 32\n },\n photosChipList: {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap'\n },\n image: {\n objectFit: 'cover',\n objectPosition: 'center',\n width: 224,\n height: 200,\n borderTopLeftRadius: 4,\n borderTopRightRadius: 4\n },\n photoCardChip: {\n margin: [[0, 16, 0, 0]]\n },\n footer: {\n display: 'flex',\n flexDirection: 'row',\n margin: [[8, 0, 0, 8]]\n },\n date: {\n margin: [[0, 0, 8, 12]]\n }\n}\n\nexport default styles\n","import { makeStyles, Paper } from '@material-ui/core'\nimport { format } from 'date-fns/fp'\nimport * as R from 'ramda'\nimport { React, useState } from 'react'\n\nimport { InformativeDialog } from 'src/components/InformativeDialog'\nimport { Label2, H3 } from 'src/components/typography'\nimport { ReactComponent as CameraIcon } from 'src/styling/icons/ID/photo/comet.svg'\nimport { URI } from 'src/utils/apollo'\n\nimport styles from './CustomerPhotos.styles'\nimport PhotosCarousel from './components/PhotosCarousel'\n\nconst useStyles = makeStyles(styles)\n\nconst CustomerPhotos = ({ photosData }) => {\n const classes = useStyles()\n\n const [photosDialog, setPhotosDialog] = useState(false)\n const [photoClickedIndex, setPhotoClickIndex] = useState(null)\n const orderedPhotosData = !R.isNil(photoClickedIndex)\n ? R.compose(R.flatten, R.reverse, R.splitAt(photoClickedIndex))(photosData)\n : photosData\n\n return (\n \n
\n {R.isNil(editing) && (\n {'Notes'}
\n\n
\n )}\n {!R.isNil(editing) && (\n \n
\n )\n}\n\nexport const PhotoCard = ({\n idx,\n date,\n src,\n setPhotosDialog,\n setPhotoClickIndex\n}) => {\n const classes = useStyles()\n\n return (\n \n
\n {'Photos & files'}
\n\n {photosData.map((elem, idx) => (\n
\n \n \n {format('yyyy-MM-dd', new Date(date))}\n \n
\n \n )\n}\n\nexport default CustomerPhotos\n","import { comet, subheaderColor } 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 actionButton: {\n margin: [[0, 0, 4, 0]],\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'center'\n },\n actionBar: {\n display: 'flex',\n flexDirection: 'column',\n width: 219\n },\n panels: {\n display: 'flex'\n },\n rightSidePanel: {\n display: 'block',\n width: 1100\n },\n leftSidePanel: {\n width: 300,\n '& > *': {\n marginBottom: 25\n },\n '& > *:last-child': {\n marginBottom: 0\n },\n '& > *:first-child': {\n marginBottom: 50\n }\n },\n userStatusAction: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n backgroundColor: subheaderColor,\n borderRadius: 8,\n padding: [[0, 5]]\n }\n}\n","import { useQuery, useMutation } from '@apollo/react-hooks'\nimport { makeStyles, Breadcrumbs, Box } from '@material-ui/core'\nimport NavigateNextIcon from '@material-ui/icons/NavigateNext'\nimport gql from 'graphql-tag'\nimport * as R from 'ramda'\nimport React, { memo, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\n\nimport { ActionButton } from 'src/components/buttons'\nimport { Switch } from 'src/components/inputs'\nimport { Label1, Label2 } from 'src/components/typography'\nimport {\n OVERRIDE_AUTHORIZED,\n OVERRIDE_REJECTED\n} from 'src/pages/Customers/components/propertyCard'\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 BlockReversedIcon } from 'src/styling/icons/button/block/white.svg'\nimport { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/zodiac.svg'\nimport { ReactComponent as DataReversedIcon } from 'src/styling/icons/button/data/white.svg'\nimport { ReactComponent as DataIcon } from 'src/styling/icons/button/data/zodiac.svg'\n// TODO: Enable for next release\n// import { ReactComponent as DiscountReversedIcon } from 'src/styling/icons/button/discount/white.svg'\n// import { ReactComponent as Discount } from 'src/styling/icons/button/discount/zodiac.svg'\nimport { fromNamespace, namespaces } from 'src/utils/config'\n\nimport CustomerData from './CustomerData'\nimport CustomerNotes from './CustomerNotes'\nimport CustomerPhotos from './CustomerPhotos'\nimport styles from './CustomerProfile.styles'\nimport {\n CustomerDetails,\n TransactionsList,\n CustomerSidebar,\n Wizard\n} from './components'\nimport { getFormattedPhone, getName, formatPhotosData } from './helper'\n\nconst useStyles = makeStyles(styles)\n\nconst GET_CUSTOMER = gql`\n query customer($customerId: ID!) {\n config\n customer(customerId: $customerId) {\n id\n authorizedOverride\n frontCameraPath\n frontCameraAt\n frontCameraOverride\n phone\n isAnonymous\n smsOverride\n idCardData\n idCardDataOverride\n idCardDataExpiration\n idCardPhotoPath\n idCardPhotoOverride\n usSsn\n usSsnOverride\n sanctions\n sanctionsAt\n sanctionsOverride\n totalTxs\n totalSpent\n lastActive\n lastTxFiat\n lastTxFiatCode\n lastTxClass\n daysSuspended\n isSuspended\n isTestCustomer\n subscriberInfo\n phoneOverride\n customFields {\n id\n label\n value\n }\n notes {\n id\n customerId\n title\n content\n created\n lastEditedAt\n }\n transactions {\n txClass\n id\n fiat\n fiatCode\n cryptoAtoms\n cryptoCode\n created\n machineName\n errorMessage: error\n error: errorCode\n txCustomerPhotoAt\n txCustomerPhotoPath\n }\n customInfoRequests {\n customerId\n override\n overrideBy\n overrideAt\n customerData\n customInfoRequest {\n id\n enabled\n customRequest\n }\n }\n }\n }\n`\n\nconst SET_CUSTOMER = gql`\n mutation setCustomer($customerId: ID!, $customerInput: CustomerInput) {\n setCustomer(customerId: $customerId, customerInput: $customerInput) {\n id\n authorizedOverride\n frontCameraPath\n frontCameraOverride\n phone\n smsOverride\n idCardData\n idCardDataOverride\n idCardDataExpiration\n idCardPhotoPath\n idCardPhotoOverride\n usSsn\n usSsnOverride\n sanctions\n sanctionsAt\n sanctionsOverride\n totalTxs\n totalSpent\n lastActive\n lastTxFiat\n lastTxFiatCode\n lastTxClass\n subscriberInfo\n phoneOverride\n }\n }\n`\nconst EDIT_CUSTOMER = gql`\n mutation editCustomer($customerId: ID!, $customerEdit: CustomerEdit) {\n editCustomer(customerId: $customerId, customerEdit: $customerEdit) {\n id\n idCardData\n usSsn\n }\n }\n`\n\nconst REPLACE_CUSTOMER_PHOTO = gql`\n mutation replacePhoto(\n $customerId: ID!\n $photoType: String\n $newPhoto: Upload\n ) {\n replacePhoto(\n customerId: $customerId\n photoType: $photoType\n newPhoto: $newPhoto\n ) {\n id\n newPhoto\n photoType\n }\n }\n`\n\nconst DELETE_EDITED_CUSTOMER = gql`\n mutation deleteEditedData($customerId: ID!, $customerEdit: CustomerEdit) {\n deleteEditedData(customerId: $customerId, customerEdit: $customerEdit) {\n id\n frontCameraPath\n idCardData\n idCardPhotoPath\n usSsn\n }\n }\n`\n\nconst SET_AUTHORIZED_REQUEST = gql`\n mutation setAuthorizedCustomRequest(\n $customerId: ID!\n $infoRequestId: ID!\n $override: String!\n ) {\n setAuthorizedCustomRequest(\n customerId: $customerId\n infoRequestId: $infoRequestId\n override: $override\n )\n }\n`\n\nconst SET_CUSTOMER_CUSTOM_INFO_REQUEST = gql`\n mutation setCustomerCustomInfoRequest(\n $customerId: ID!\n $infoRequestId: ID!\n $data: JSON!\n ) {\n setCustomerCustomInfoRequest(\n customerId: $customerId\n infoRequestId: $infoRequestId\n data: $data\n )\n }\n`\n\nconst CREATE_NOTE = gql`\n mutation createCustomerNote(\n $customerId: ID!\n $title: String!\n $content: String!\n ) {\n createCustomerNote(\n customerId: $customerId\n title: $title\n content: $content\n )\n }\n`\n\nconst DELETE_NOTE = gql`\n mutation deleteCustomerNote($noteId: ID!) {\n deleteCustomerNote(noteId: $noteId)\n }\n`\n\nconst EDIT_NOTE = gql`\n mutation editCustomerNote($noteId: ID!, $newContent: String!) {\n editCustomerNote(noteId: $noteId, newContent: $newContent)\n }\n`\n\nconst ENABLE_TEST_CUSTOMER = gql`\n mutation enableTestCustomer($customerId: ID!) {\n enableTestCustomer(customerId: $customerId)\n }\n`\n\nconst DISABLE_TEST_CUSTOMER = gql`\n mutation disableTestCustomer($customerId: ID!) {\n disableTestCustomer(customerId: $customerId)\n }\n`\n\nconst GET_DATA = gql`\n query getData {\n config\n }\n`\n\nconst SET_CUSTOM_ENTRY = gql`\n mutation addCustomField($customerId: ID!, $label: String!, $value: String!) {\n addCustomField(customerId: $customerId, label: $label, value: $value)\n }\n`\n\nconst EDIT_CUSTOM_ENTRY = gql`\n mutation saveCustomField($customerId: ID!, $fieldId: ID!, $value: String!) {\n saveCustomField(customerId: $customerId, fieldId: $fieldId, value: $value)\n }\n`\n\nconst GET_ACTIVE_CUSTOM_REQUESTS = gql`\n query customInfoRequests($onlyEnabled: Boolean) {\n customInfoRequests(onlyEnabled: $onlyEnabled) {\n id\n customRequest\n }\n }\n`\n\nconst CustomerProfile = memo(() => {\n const history = useHistory()\n\n const [showCompliance, setShowCompliance] = useState(false)\n const [wizard, setWizard] = useState(false)\n const [error] = useState(null)\n const [clickedItem, setClickedItem] = useState('overview')\n const { id: customerId } = useParams()\n\n const {\n data: customerResponse,\n refetch: getCustomer,\n loading: customerLoading\n } = useQuery(GET_CUSTOMER, {\n variables: { customerId }\n })\n\n const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)\n\n const { data: activeCustomRequests } = useQuery(GET_ACTIVE_CUSTOM_REQUESTS, {\n variables: {\n onlyEnabled: true\n }\n })\n\n const [setCustomEntry] = useMutation(SET_CUSTOM_ENTRY, {\n onCompleted: () => getCustomer()\n })\n\n const [editCustomEntry] = useMutation(EDIT_CUSTOM_ENTRY, {\n onCompleted: () => getCustomer()\n })\n\n const [replaceCustomerPhoto] = useMutation(REPLACE_CUSTOMER_PHOTO, {\n onCompleted: () => getCustomer()\n })\n\n const [editCustomerData] = useMutation(EDIT_CUSTOMER, {\n onCompleted: () => getCustomer()\n })\n\n const [deleteCustomerEditedData] = useMutation(DELETE_EDITED_CUSTOMER, {\n onCompleted: () => getCustomer()\n })\n\n const [setCustomer] = useMutation(SET_CUSTOMER, {\n onCompleted: () => getCustomer()\n })\n\n const [authorizeCustomRequest] = useMutation(SET_AUTHORIZED_REQUEST, {\n onCompleted: () => getCustomer()\n })\n\n const [setCustomerCustomInfoRequest] = useMutation(\n SET_CUSTOMER_CUSTOM_INFO_REQUEST,\n {\n onCompleted: () => getCustomer()\n }\n )\n\n const [createNote] = useMutation(CREATE_NOTE, {\n onCompleted: () => getCustomer()\n })\n\n const [deleteNote] = useMutation(DELETE_NOTE, {\n onCompleted: () => getCustomer()\n })\n\n const [editNote] = useMutation(EDIT_NOTE, {\n onCompleted: () => getCustomer()\n })\n\n const saveCustomEntry = it => {\n setCustomEntry({\n variables: {\n customerId,\n label: it.title,\n value: it.data\n }\n })\n setWizard(null)\n }\n\n const updateCustomEntry = it => {\n editCustomEntry({\n variables: {\n customerId,\n fieldId: it.fieldId,\n value: it.value\n }\n })\n }\n\n const [enableTestCustomer] = useMutation(ENABLE_TEST_CUSTOMER, {\n variables: { customerId },\n onCompleted: () => getCustomer()\n })\n\n const [disableTestCustomer] = useMutation(DISABLE_TEST_CUSTOMER, {\n variables: { customerId },\n onCompleted: () => getCustomer()\n })\n\n const updateCustomer = it =>\n setCustomer({\n variables: {\n customerId,\n customerInput: it\n }\n })\n\n const replacePhoto = it => {\n replaceCustomerPhoto({\n variables: {\n customerId,\n newPhoto: it.newPhoto,\n photoType: it.photoType\n }\n })\n setWizard(null)\n }\n\n const editCustomer = it => {\n editCustomerData({\n variables: {\n customerId,\n customerEdit: it\n }\n })\n setWizard(null)\n }\n\n const deleteEditedData = it =>\n deleteCustomerEditedData({\n variables: {\n customerId,\n customerEdit: it\n }\n })\n\n const createCustomerNote = it =>\n createNote({\n variables: {\n customerId,\n title: it.title,\n content: it.content\n }\n })\n\n const deleteCustomerNote = it =>\n deleteNote({\n variables: {\n noteId: it.noteId\n }\n })\n\n const editCustomerNote = it =>\n editNote({\n variables: {\n noteId: it.noteId,\n newContent: it.newContent\n }\n })\n\n const retrieveAdditionalData = () =>\n setCustomer({\n variables: {\n customerId,\n customerInput: {\n subscriberInfo: true\n }\n }\n })\n\n const onClickSidebarItem = code => setClickedItem(code)\n\n const configData = R.path(['config'])(customerResponse) ?? []\n const locale = configData && fromNamespace(namespaces.LOCALE, configData)\n const customerData = R.path(['customer'])(customerResponse) ?? []\n const rawTransactions = R.path(['transactions'])(customerData) ?? []\n const sortedTransactions = R.sort(R.descend(R.prop('cryptoAtoms')))(\n rawTransactions\n )\n const name = getName(customerData)\n const blocked =\n R.path(['authorizedOverride'])(customerData) === OVERRIDE_REJECTED\n\n const isSuspended = customerData.isSuspended\n const isCustomerData = clickedItem === 'customerData'\n const isOverview = clickedItem === 'overview'\n const isNotes = clickedItem === 'notes'\n const isPhotos = clickedItem === 'photos'\n\n const frontCameraData = R.pick(['frontCameraPath', 'frontCameraAt'])(\n customerData\n )\n const txPhotosData =\n sortedTransactions &&\n R.map(R.pick(['id', 'txCustomerPhotoPath', 'txCustomerPhotoAt']))(\n sortedTransactions\n )\n\n const photosData = formatPhotosData(R.append(frontCameraData, txPhotosData))\n\n const loading = customerLoading || configLoading\n\n const timezone = R.path(['config', 'locale_timezone'], configResponse)\n\n const customInfoRequirementOptions =\n activeCustomRequests?.customInfoRequests?.map(it => ({\n value: it.id,\n display: it.customRequest.name\n })) ?? []\n\n const classes = useStyles()\n\n return (\n <>\n \n setWizard(null)}\n customInfoRequirementOptions={customInfoRequirementOptions}\n />\n )}\n
\n \n )\n})\n\nexport default CustomerProfile\n","import baseButtonStyles from 'src/components/buttons/BaseButton.styles'\nimport { bySize, bold } from 'src/styling/helpers'\nimport { zircon, comet, primaryColor } from 'src/styling/variables'\n\nconst { baseButton } = baseButtonStyles\n\nconst searchBoxBorderRadius = baseButton.height / 2\nconst searchBoxHeight = 32\nconst popupBorderRadiusFocus = baseButton.height / 4\n\nconst hoverColor = 'rgba(0, 0, 0, 0.08)'\nconst boxShadow = `0 4px 4px 0 ${hoverColor}`\n\nconst styles = {\n size: ({ size }) => ({\n marginTop: size === 'lg' ? 0 : 2,\n ...bySize(size)\n }),\n bold,\n autocomplete: {\n '&[data-focus=\"true\"]': {\n backgroundColor: hoverColor\n }\n },\n popup: {\n display: 'flex',\n flexDirection: 'column',\n borderRadius: [[0, 0, popupBorderRadiusFocus, popupBorderRadiusFocus]],\n backgroundColor: zircon,\n boxShadow\n },\n separator: {\n width: '88%',\n height: 1,\n margin: '0 auto',\n border: 'solid 0.5px',\n borderColor: comet\n },\n item: {\n display: 'flex',\n flexDirection: 'row',\n width: '100%',\n height: 36,\n alignItems: 'center'\n },\n itemLabel: {\n margin: [0],\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n },\n itemType: {\n marginLeft: 'auto',\n fontSize: 12,\n color: comet,\n margin: [0]\n },\n input: {\n display: 'flex',\n flex: 1,\n width: 273,\n padding: [[8, 12]],\n alignItems: 'center',\n height: searchBoxHeight,\n borderRadius: searchBoxBorderRadius,\n backgroundColor: zircon,\n color: primaryColor\n },\n inputWithPopup: {\n borderRadius: [[popupBorderRadiusFocus, popupBorderRadiusFocus, 0, 0]],\n boxShadow\n },\n iconButton: {\n marginRight: 12\n }\n}\n\nexport default styles\n","import InputBase from '@material-ui/core/InputBase'\nimport Paper from '@material-ui/core/Paper'\nimport { makeStyles } from '@material-ui/core/styles'\nimport MAutocomplete from '@material-ui/lab/Autocomplete'\nimport classnames from 'classnames'\nimport React, { memo, useState } from 'react'\n\nimport { P } from 'src/components/typography'\nimport { ReactComponent as SearchIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg'\n\nimport styles from './SearchBox.styles'\n\nconst useStyles = makeStyles(styles)\n\nconst SearchBox = memo(\n ({\n loading = false,\n filters = [],\n options = [],\n inputPlaceholder = '',\n size,\n onChange,\n ...props\n }) => {\n const classes = useStyles({ size })\n\n const [popupOpen, setPopupOpen] = useState(false)\n\n const inputClasses = {\n [classes.input]: true,\n [classes.inputWithPopup]: popupOpen\n }\n\n const innerOnChange = filters => onChange(filters)\n\n return (\n \n {!loading && !customerData.isAnonymous && (\n <>\n code === clickedItem}\n onClick={onClickSidebarItem}\n />\n
\n \n Actions \n
\n \n setWizard(true)}>\n {`Manual data entry`}\n \n {/* {}}>\n {`Add individual discount`}\n */}\n {isSuspended && (\n \n updateCustomer({\n suspendedUntil: null\n })\n }>\n {`Unsuspend customer`}\n \n )}\n \n updateCustomer({\n authorizedOverride: blocked\n ? OVERRIDE_AUTHORIZED\n : OVERRIDE_REJECTED\n })\n }>\n {`${blocked ? 'Authorize' : 'Block'} customer`}\n \n
\n \n \n {`Special user status`}\n \n
\n \n )}\n \n
\n \n \n R.path(['isTestCustomer'])(customerData)\n ? disableTestCustomer()\n : enableTestCustomer()\n }\n />\n {`Test user`}\n
\n \n {isOverview && (\n
\n {wizard && (\n \n \n setShowCompliance(!showCompliance)}\n />\n \n
\n )}\n {isCustomerData && (\n \n
\n \n \n
\n )}\n {isNotes && (\n \n \n
\n )}\n {isPhotos && (\n \n
\n )}\n \n
\n )}\n autoHighlight\n disableClearable\n clearOnEscape\n multiple\n filterSelectedOptions\n getOptionSelected={(option, value) => option.type === value.type}\n PaperComponent={({ children }) => (\n {it.value}
\n{it.type}
\n{'Filters:'}
\n\n
\n \n )\n}\n\nexport default SearchFilter\n","import { makeStyles } from '@material-ui/core/styles'\nimport { format } from 'date-fns/fp'\nimport * as R from 'ramda'\nimport React from 'react'\n\nimport { MainStatus } from 'src/components/Status'\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'\n\nimport styles from './CustomersList.styles'\nimport { getAuthorizedStatus, getFormattedPhone, getName } from './helper'\n\nconst useStyles = makeStyles(styles)\n\nconst CustomersList = ({\n data,\n locale,\n onClick,\n loading,\n triggers,\n customRequests\n}) => {\n const classes = useStyles()\n\n const elements = [\n {\n header: 'Phone',\n width: 199,\n view: it => getFormattedPhone(it.phone, locale.country)\n },\n {\n header: 'Name',\n width: 241,\n view: getName\n },\n {\n header: 'Total TXs',\n width: 126,\n textAlign: 'right',\n view: it => `${Number.parseInt(it.totalTxs)}`\n },\n {\n header: 'Total spent',\n width: 152,\n textAlign: 'right',\n view: it =>\n `${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode ?? ''}`\n },\n {\n header: 'Last active',\n width: 133,\n view: it =>\n (it.lastActive && format('yyyy-MM-dd', new Date(it.lastActive))) ?? ''\n },\n {\n header: 'Last transaction',\n width: 161,\n textAlign: 'right',\n view: it => {\n const hasLastTx = !R.isNil(it.lastTxFiatCode)\n const LastTxIcon = it.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon\n const lastIcon = \n {filters.map((f, idx) => (\n onFilterDelete(f)}\n deleteIcon={
\n \n {\n {`${entries ??\n 0} entries`} \n }\n \n Delete filters\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, mono } = 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 mono: {\n extend: mono,\n width: 375,\n margin: `${spacer * 1.5}px ${spacer * 3}px`\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 { format } from 'date-fns/fp'\nimport gql from 'graphql-tag'\nimport { utils as coinUtils } from '@lamassu/coins'\nimport QRCode from 'qrcode.react'\nimport * as R from 'ramda'\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 Label1,\n Label3\n} from 'src/components/typography'\nimport CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'\nimport { primaryColor } from 'src/styling/variables'\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 coinUtils.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, loading } = useQuery(GET_FUNDING)\n const funding = R.path(['funding'])(fundingResponse) ?? []\n\n if (funding.length && !selected) {\n setSelected(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(funding)\n const signIfPositive = num => (num >= 0 ? '+' : '')\n\n return (\n <>\n {it.display}
\n {!it.errorMsg && (\n <>\n \n {formatNumber(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 loading={loading}>\n {funding.length && (\n
\n \n Total Crypto Balance\n \n \n {getConfirmedTotal(funding)}\n {funding[0].fiatCode}\n \n \n ({signIfPositive(pendingTotal)} {pendingTotal} pending)\n \n
\n )}\n \n {selected && !viewHistory && selected.errorMsg && (\n \n
\n