feat: hoverable tooltip

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 (
+    <div>
+      <div
+        onMouseEnter={handleOpenHelpPopper}
+        onMouseLeave={handleCloseHelpPopper}>
+        {parentElements}
+      </div>
+      <Popper
+        open={helpPopperOpen}
+        anchorEl={helpPopperAnchorEl}
+        placement="bottom">
+        <div className={classes.popoverContent}>{children}</div>
+      </Popper>
+    </div>
+  )
+})
+
+export { Tooltip, HoverableTooltip }

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'

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'

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'

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 = (
+    <>
+      <Label>Transaction status</Label>
+      <span className={classes.bold}>{getStatus(tx)}</span>
+    </>
+  )
 
   return (
     <div className={classes.wrapper}>
@@ -82,7 +88,7 @@ const DetailsRow = ({ it: tx }) => {
             )}
             {tx.customerIdCardPhotoPath && !tx.customerIdCardData && (
               <IDButton
-                popoverClassname={classes.popover}
+                popoverClassname={classes.clipboardPopover}
                 className={classes.idButton}
                 name="card"
                 Icon={CardIdIcon}
@@ -186,10 +192,13 @@ const DetailsRow = ({ it: tx }) => {
       </div>
       <div className={classes.lastRow}>
         <div>
-          <Label>Transaction status</Label>
+          {getStatusDetails(tx) ? (
-          <Tooltip disableFocusListener title={getStatusDetails(tx)}>
+            <HoverableTooltip parentElements={errorElements} width={200}>
-            <span className={classes.bold}>{getStatus(tx)}</span>
+              <P>{getStatusDetails(tx)}</P>
-          </Tooltip>
+            </HoverableTooltip>
+          ) : (
+            errorElements
+          )}
         </div>
       </div>
     </div>

new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js

@@ -32,7 +32,7 @@ export default {
   txIcon: {
     marginRight: 10
   },
-  popover: {
+  clipboardPopover: {
     height: 164,
     width: 215
   },

new-lamassu-admin/src/pages/Transactions/helper.js

@@ -6,10 +6,7 @@ const getCashOutStatus = it => {
 }
 
 const getCashOutStatusDetails = it => {
-  if (it.hasError) return it.hasError
+  return it.hasError ? it.hasError : null
-  if (it.dispense) return ''
-  if (it.expired) return ''
-  return 'Pending'
 }
 
 const getCashInStatus = it => {
@@ -21,11 +18,7 @@ const getCashInStatus = it => {
 }
 
 const getCashInStatusDetails = it => {
-  if (it.operatorCompleted) return ''
+  return it.hasError ? it.hasError : null
-  if (it.hasError) return it.hasError
-  if (it.sendConfirmed) return ''
-  if (it.expired) return ''
-  return 'Pending'
 }
 
 const getStatus = it => {

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'

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'