Merge pull request #1760 from RafaelTaranto/backport/kb-articles

LAM-540 fix: tooltip doesn't stay open
lamassu · Nov 29, 2024 · 36cded5 · 36cded5
2 parents 89ec3d4 + 2e1a219
commit 36cded5
Show file tree

Hide file tree

Showing 22 changed files with 269 additions and 52 deletions.
diff --git a/new-lamassu-admin/src/components/Tooltip.js b/new-lamassu-admin/src/components/Tooltip.js
@@ -13,6 +13,16 @@ const useStyles = makeStyles({
     cursor: 'pointer',
     marginTop: 4
   },
+  relativelyPositioned: {
+    position: 'relative'
+  },
+  safeSpace: {
+    position: 'absolute',
+    backgroundColor: '#0000',
+    height: 40,
+    left: '-50%',
+    width: '200%'
+  },
   popoverContent: ({ width }) => ({
     width,
     padding: [[10, 15]]
@@ -27,6 +37,10 @@ const usePopperHandler = width => {
     setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
   }
 
+  const openHelpPopper = event => {
+    setHelpPopperAnchorEl(event.currentTarget)
+  }
+
   const handleCloseHelpPopper = () => {
     setHelpPopperAnchorEl(null)
   }
@@ -38,25 +52,32 @@ const usePopperHandler = width => {
     helpPopperAnchorEl,
     helpPopperOpen,
     handleOpenHelpPopper,
+    openHelpPopper,
     handleCloseHelpPopper
   }
 }
 
-const Tooltip = memo(({ children, width, Icon = HelpIcon }) => {
+const HelpTooltip = memo(({ children, width }) => {
   const handler = usePopperHandler(width)
 
   return (
     <ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
-      <div>
+      <div
+        className={handler.classes.relativelyPositioned}
+        onMouseLeave={handler.handleCloseHelpPopper}>
+        {handler.helpPopperOpen && (
+          <div className={handler.classes.safeSpace}></div>
+        )}
         <button
           type="button"
           className={handler.classes.transparentButton}
-          onClick={handler.handleOpenHelpPopper}>
-          <Icon />
+          onMouseEnter={handler.openHelpPopper}>
+          <HelpIcon />
         </button>
         <Popper
           open={handler.helpPopperOpen}
           anchorEl={handler.helpPopperAnchorEl}
+          arrowEnabled={true}
           placement="bottom">
           <div className={handler.classes.popoverContent}>{children}</div>
         </Popper>
@@ -96,4 +117,4 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => {
   )
 })
 
-export { Tooltip, HoverableTooltip }
+export { HoverableTooltip, HelpTooltip }
diff --git a/new-lamassu-admin/src/pages/Accounting/Accounting.js b/new-lamassu-admin/src/pages/Accounting/Accounting.js
@@ -6,7 +6,7 @@ import * as R from 'ramda'
 import React, { useContext } from 'react'
 
 import AppContext from 'src/AppContext'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
 import { H4, Info2, P } from 'src/components/typography'
@@ -128,9 +128,9 @@ const Accounting = () => {
           <span className={classes.operation}>
             {it.description}
             {!!it.extraInfo && (
-              <HoverableTooltip width={175}>
+              <HelpTooltip width={175}>
                 <P>{it.extraInfo}</P>
-              </HoverableTooltip>
+              </HelpTooltip>
             )}
           </span>
         )

diff --git a/new-lamassu-admin/src/pages/Blacklist/Blacklist.js b/new-lamassu-admin/src/pages/Blacklist/Blacklist.js
@@ -7,8 +7,13 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { HoverableTooltip } from 'src/components/Tooltip'
-import { Link, Button, IconButton } from 'src/components/buttons'
+import { HelpTooltip } from 'src/components/Tooltip'
+import {
+  Link,
+  Button,
+  IconButton,
+  SupportLinkButton
+} from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import Sidebar from 'src/components/layout/Sidebar'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -251,13 +256,13 @@ const Blacklist = () => {
                 value={enablePaperWalletOnly}
               />
               <Label2>{enablePaperWalletOnly ? 'On' : 'Off'}</Label2>
-              <HoverableTooltip width={304}>
+              <HelpTooltip width={304}>
                 <P>
                   The "Enable paper wallet (only)" option means that only paper
                   wallets will be printed for users, and they won't be permitted
                   to scan an address from their own wallet.
                 </P>
-              </HoverableTooltip>
+              </HelpTooltip>
             </Box>
             <Box
               display="flex"
@@ -273,13 +278,21 @@ const Blacklist = () => {
                 value={rejectAddressReuse}
               />
               <Label2>{rejectAddressReuse ? 'On' : 'Off'}</Label2>
-              <HoverableTooltip width={304}>
+              <HelpTooltip width={304}>
                 <P>
                   The "Reject reused addresses" option means that all addresses
                   that are used once will be automatically rejected if there's
                   an attempt to use them again on a new transaction.
                 </P>
-              </HoverableTooltip>
+                <P>
+                  For details please read the relevant knowledgebase article:
+                </P>
+                <SupportLinkButton
+                  link="https://support.lamassu.is/hc/en-us/articles/360033622211-Reject-Address-Reuse"
+                  label="Reject Address Reuse"
+                  bottomSpace="1"
+                />
+              </HelpTooltip>
             </Box>
           </Box>
           <BlacklistTable

diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.js b/new-lamassu-admin/src/pages/Cashout/Cashout.js
@@ -4,7 +4,8 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { SupportLinkButton } from 'src/components/buttons'
 import { NamespacedTable as EditableTable } from 'src/components/editableTable'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -92,7 +93,21 @@ const CashOut = ({ name: SCREEN_KEY }) => {
   return (
     !loading && (
       <>
-        <TitleSection title="Cash-out">
+        <TitleSection
+          title="Cash-out"
+          appendix={
+            <HelpTooltip width={320}>
+              <P>
+                For details on configuring cash-out, please read the relevant
+                knowledgebase article:
+              </P>
+              <SupportLinkButton
+                link="https://support.lamassu.is/hc/en-us/articles/115003720192-Enabling-cash-out-on-the-admin"
+                label="Enabling cash-out on the admin"
+                bottomSpace="1"
+              />
+            </HelpTooltip>
+          }>
           <div className={classes.fudgeFactor}>
             <P>Transaction fudge factor</P>
             <Switch
@@ -105,7 +120,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
             <Label2 className={classes.switchLabel}>
               {fudgeFactorActive ? 'On' : 'Off'}
             </Label2>
-            <HoverableTooltip width={304}>
+            <HelpTooltip width={304}>
               <P>
                 Automatically accept customer deposits as complete if their
                 received amount is 100 crypto atoms or less.
@@ -114,7 +129,13 @@ const CashOut = ({ name: SCREEN_KEY }) => {
                 (Crypto atoms are the smallest unit in each cryptocurrency.
                 E.g., satoshis in Bitcoin, or wei in Ethereum.)
               </P>
-            </HoverableTooltip>
+              <P>For details please read the relevant knowledgebase article:</P>
+              <SupportLinkButton
+                link="https://support.lamassu.is/hc/en-us/articles/360050838011-Automatically-accepting-undersent-deposits-with-Fudge-Factor-"
+                label="Lamassu Support Article"
+                bottomSpace="1"
+              />
+            </HelpTooltip>
           </div>
         </TitleSection>
         <EditableTable

diff --git a/new-lamassu-admin/src/pages/Commissions/Commissions.js b/new-lamassu-admin/src/pages/Commissions/Commissions.js
@@ -4,12 +4,16 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
+import { HelpTooltip } from 'src/components/Tooltip'
+import { SupportLinkButton } from 'src/components/buttons'
 import TitleSection from 'src/components/layout/TitleSection'
 import { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg'
 import { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg'
 import { ReactComponent as OverrideLabelIcon } from 'src/styling/icons/status/spring2.svg'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
+import { P } from '../../components/typography'
+
 import CommissionsDetails from './components/CommissionsDetails'
 import CommissionsList from './components/CommissionsList'
 
@@ -118,6 +122,24 @@ const Commissions = ({ name: SCREEN_KEY }) => {
           }
         ]}
         iconClassName={classes.listViewButton}
+        appendix={
+          <HelpTooltip width={320}>
+            <P>
+              For details about commissions, please read the relevant
+              knowledgebase articles:
+            </P>
+            <SupportLinkButton
+              link="https://support.lamassu.is/hc/en-us/articles/115001211752-Fixed-fees-Minimum-transaction"
+              label="Fixed fees & Minimum transaction"
+              bottomSpace="1"
+            />
+            <SupportLinkButton
+              link="https://support.lamassu.is/hc/en-us/articles/360061558352-Commissions-and-Profit-Calculations"
+              label="SCommissions and Profit Calculations"
+              bottomSpace="1"
+            />
+          </HelpTooltip>
+        }
       />
 
       {!showMachines && !loading && (

diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
@@ -8,6 +8,7 @@ import { useState, React, useRef } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import { MainStatus } from 'src/components/Status'
+// import { HelpTooltip } from 'src/components/Tooltip'
 import { ActionButton } from 'src/components/buttons'
 import { Label1, P, H3 } from 'src/components/typography'
 import {
@@ -182,7 +183,7 @@ const EditableCard = ({
               <H3 className={classes.cardTitle}>{title}</H3>
               {
                 // TODO: Enable for next release
-                /* <HoverableTooltip width={304}></HoverableTooltip> */
+                /* <HelpTooltip width={304}></HelpTooltip> */
               }
             </div>
             {state && authorize && (

diff --git a/new-lamassu-admin/src/pages/Locales/Locales.js b/new-lamassu-admin/src/pages/Locales/Locales.js
@@ -5,7 +5,8 @@ import * as R from 'ramda'
 import React, { useState } from 'react'
 
 import Modal from 'src/components/Modal'
-import { Link } from 'src/components/buttons'
+import { HelpTooltip } from 'src/components/Tooltip'
+import { Link, SupportLinkButton } from 'src/components/buttons'
 import { Table as EditableTable } from 'src/components/editableTable'
 import Section from 'src/components/layout/Section'
 import TitleSection from 'src/components/layout/TitleSection'
@@ -176,7 +177,22 @@ const Locales = ({ name: SCREEN_KEY }) => {
         close={() => setDataToSave(null)}
         save={() => dataToSave && save(dataToSave)}
       />
-      <TitleSection title="Locales" />
+      <TitleSection
+        title="Locales"
+        appendix={
+          <HelpTooltip width={320}>
+            <P>
+              For details on configuring languages, please read the relevant
+              knowledgebase article:
+            </P>
+            <SupportLinkButton
+              link="https://support.lamassu.is/hc/en-us/articles/360016257471-Setting-multiple-machine-languages"
+              label="Setting multiple machine languages"
+              bottomSpace="1"
+            />
+          </HelpTooltip>
+        }
+      />
       <Section>
         <EditableTable
           title="Default settings"

diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.js b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.js
@@ -6,7 +6,7 @@ import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import { Button } from 'src/components/buttons'
 import { NumberInput, Autocomplete } from 'src/components/inputs/formik'
 import { H3, TL1, P } from 'src/components/typography'
@@ -99,7 +99,7 @@ const IndividualDiscountModal = ({
                 <div>
                   <div className={classes.discountRateWrapper}>
                     <H3>Define discount rate</H3>
-                    <HoverableTooltip width={304}>
+                    <HelpTooltip width={304}>
                       <P>
                         This is a percentage discount off of your existing
                         commission rates for a customer entering this code at
@@ -110,7 +110,7 @@ const IndividualDiscountModal = ({
                         code is set for 50%, then you'll instead be charging 4%
                         on transactions using the code.
                       </P>
-                    </HoverableTooltip>
+                    </HelpTooltip>
                   </div>
                   <div className={classes.discountInput}>
                     <Field

diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.js b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.js
@@ -6,7 +6,7 @@ import * as Yup from 'yup'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
-import { HoverableTooltip } from 'src/components/Tooltip'
+import { HelpTooltip } from 'src/components/Tooltip'
 import { Button } from 'src/components/buttons'
 import { TextInput, NumberInput } from 'src/components/inputs/formik'
 import { H3, TL1, P } from 'src/components/typography'
@@ -69,7 +69,7 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
               />
               <div className={classes.modalLabel2Wrapper}>
                 <H3 className={classes.modalLabel2}>Define discount rate</H3>
-                <HoverableTooltip width={304}>
+                <HelpTooltip width={304}>
                   <P>
                     This is a percentage discount off of your existing
                     commission rates for a customer entering this code at the
@@ -80,7 +80,7 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
                     set for 50%, then you'll instead be charging 4% on
                     transactions using the code.
                   </P>
-                </HoverableTooltip>
+                </HelpTooltip>
               </div>
               <div className={classes.discountInput}>
                 <Field

diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.js b/new-lamassu-admin/src/pages/Maintenance/CashUnits.js
@@ -6,7 +6,8 @@ import React, { useState } from 'react'
 
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
 import Modal from 'src/components/Modal'
-import { IconButton, Button } from 'src/components/buttons'
+import { HelpTooltip } from 'src/components/Tooltip.js'
+import { IconButton, Button, SupportLinkButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
 import { EmptyTable } from 'src/components/table'
@@ -229,7 +230,20 @@ const CashCassettes = () => {
             }
           ]}
           iconClassName={classes.listViewButton}
-          className={classes.tableWidth}>
+          className={classes.tableWidth}
+          appendix={
+            <HelpTooltip width={220}>
+              <P>
+                For details on configuring cash boxes and cassettes, please read
+                the relevant knowledgebase article:
+              </P>
+              <SupportLinkButton
+                link="https://support.lamassu.is/hc/en-us/articles/4420839641229-Cash-Boxes-Cassettess"
+                label="Cash Boxes & Cassettes"
+                bottomSpace="1"
+              />
+            </HelpTooltip>
+          }>
           {!showHistory && (
             <Box alignItems="center" justifyContent="flex-end">
               <Label1 className={classes.cashboxReset}>Cash box resets</Label1>