diff --git a/new-lamassu-admin/src/components/Tooltip.js b/new-lamassu-admin/src/components/Tooltip.js index 92ef7e35..53d7fc80 100644 --- a/new-lamassu-admin/src/components/Tooltip.js +++ b/new-lamassu-admin/src/components/Tooltip.js @@ -51,4 +51,35 @@ const Tooltip = memo(({ children, width, Icon = HelpIcon }) => { ) }) -export default Tooltip +const HoverableTooltip = memo(({ parentElements, children, width }) => { + const classes = useStyles({ width }) + const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null) + + const handleOpenHelpPopper = event => { + setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget) + } + + const handleCloseHelpPopper = () => { + setHelpPopperAnchorEl(null) + } + + const helpPopperOpen = Boolean(helpPopperAnchorEl) + + return ( +
+
+ {parentElements} +
+ +
{children}
+
+
+ ) +}) + +export { Tooltip, HoverableTooltip } diff --git a/new-lamassu-admin/src/pages/Blacklist/Blacklist.js b/new-lamassu-admin/src/pages/Blacklist/Blacklist.js index ce91ef55..f5f61907 100644 --- a/new-lamassu-admin/src/pages/Blacklist/Blacklist.js +++ b/new-lamassu-admin/src/pages/Blacklist/Blacklist.js @@ -6,7 +6,7 @@ import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState } from 'react' -import Tooltip from 'src/components/Tooltip' +import { Tooltip } from 'src/components/Tooltip' import { Link } from 'src/components/buttons' import { Switch } from 'src/components/inputs' import Sidebar from 'src/components/layout/Sidebar' diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.js b/new-lamassu-admin/src/pages/Cashout/Cashout.js index 3cac4fb5..8332be33 100644 --- a/new-lamassu-admin/src/pages/Cashout/Cashout.js +++ b/new-lamassu-admin/src/pages/Cashout/Cashout.js @@ -4,7 +4,7 @@ import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState } from 'react' -import Tooltip from 'src/components/Tooltip' +import { Tooltip } from 'src/components/Tooltip' import { NamespacedTable as EditableTable } from 'src/components/editableTable' import { Switch } from 'src/components/inputs' import TitleSection from 'src/components/layout/TitleSection' diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js index 4bdf6d4e..9fca1c5a 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import React, { memo } from 'react' -import Tooltip from 'src/components/Tooltip' +import { Tooltip } from 'src/components/Tooltip' import { Switch } from 'src/components/inputs' import { H4, P, Label2 } from 'src/components/typography' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js index bbfb95c4..f242031e 100644 --- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js +++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js @@ -1,10 +1,11 @@ -import { makeStyles, Box, Tooltip } from '@material-ui/core' +import { makeStyles, Box } from '@material-ui/core' import BigNumber from 'bignumber.js' import moment from 'moment' import React, { memo } from 'react' +import { HoverableTooltip } from 'src/components/Tooltip' import { IDButton } from 'src/components/buttons' -import { Label1 } from 'src/components/typography' +import { P, Label1 } from 'src/components/typography' import { ReactComponent as CardIdInverseIcon } from 'src/styling/icons/ID/card/white.svg' import { ReactComponent as CardIdIcon } from 'src/styling/icons/ID/card/zodiac.svg' import { ReactComponent as PhoneIdInverseIcon } from 'src/styling/icons/ID/phone/white.svg' @@ -53,7 +54,12 @@ const DetailsRow = ({ it: tx }) => { ) } - console.log(tx) + const errorElements = ( + <> + + {getStatus(tx)} + + ) return (
@@ -82,7 +88,7 @@ const DetailsRow = ({ it: tx }) => { )} {tx.customerIdCardPhotoPath && !tx.customerIdCardData && ( {
- - - {getStatus(tx)} - + {getStatusDetails(tx) ? ( + +

{getStatusDetails(tx)}

+
+ ) : ( + errorElements + )}
diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js index 277bcfd2..cc9233ac 100644 --- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js +++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js @@ -32,7 +32,7 @@ export default { txIcon: { marginRight: 10 }, - popover: { + clipboardPopover: { height: 164, width: 215 }, diff --git a/new-lamassu-admin/src/pages/Transactions/helper.js b/new-lamassu-admin/src/pages/Transactions/helper.js index 32108009..2b28c6a9 100644 --- a/new-lamassu-admin/src/pages/Transactions/helper.js +++ b/new-lamassu-admin/src/pages/Transactions/helper.js @@ -6,10 +6,7 @@ const getCashOutStatus = it => { } const getCashOutStatusDetails = it => { - if (it.hasError) return it.hasError - if (it.dispense) return '' - if (it.expired) return '' - return 'Pending' + return it.hasError ? it.hasError : null } const getCashInStatus = it => { @@ -21,11 +18,7 @@ const getCashInStatus = it => { } const getCashInStatusDetails = it => { - if (it.operatorCompleted) return '' - if (it.hasError) return it.hasError - if (it.sendConfirmed) return '' - if (it.expired) return '' - return 'Pending' + return it.hasError ? it.hasError : null } const getStatus = it => { diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.js b/new-lamassu-admin/src/pages/Triggers/Triggers.js index 056d7e4d..311902b3 100644 --- a/new-lamassu-admin/src/pages/Triggers/Triggers.js +++ b/new-lamassu-admin/src/pages/Triggers/Triggers.js @@ -5,7 +5,7 @@ import * as R from 'ramda' import React, { useState } from 'react' import { v4 } from 'uuid' -import Tooltip from 'src/components/Tooltip' +import { Tooltip } from 'src/components/Tooltip' import { Link, Button } from 'src/components/buttons' import { Table as EditableTable } from 'src/components/editableTable' import { Switch } from 'src/components/inputs' diff --git a/new-lamassu-admin/src/pages/Wizard/components/Twilio.js b/new-lamassu-admin/src/pages/Wizard/components/Twilio.js index bde64e5c..7c6b62e7 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Twilio.js +++ b/new-lamassu-admin/src/pages/Wizard/components/Twilio.js @@ -5,7 +5,7 @@ import gql from 'graphql-tag' import React, { useState } from 'react' import InfoMessage from 'src/components/InfoMessage' -import Tooltip from 'src/components/Tooltip' +import { Tooltip } from 'src/components/Tooltip' import { Button, SupportLinkButton } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs' import { H1, H4, P } from 'src/components/typography'