diff --git a/new-lamassu-admin/src/components/Tooltip.js b/new-lamassu-admin/src/components/Tooltip.js index 2fa5b7f9..40c85c36 100644 --- 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 ( -
+
+ {handler.helpPopperOpen && ( +
+ )}
{children}
@@ -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 index 09b38d0b..dcc6b18d 100644 --- 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 = () => { {it.description} {!!it.extraInfo && ( - +

{it.extraInfo}

-
+ )}
) diff --git a/new-lamassu-admin/src/pages/Blacklist/Blacklist.js b/new-lamassu-admin/src/pages/Blacklist/Blacklist.js index b4918993..dec75592 100644 --- 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} /> {enablePaperWalletOnly ? 'On' : 'Off'} - +

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.

-
+ { value={rejectAddressReuse} /> {rejectAddressReuse ? 'On' : 'Off'} - +

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.

-
+

+ For details please read the relevant knowledgebase article: +

+ +
{ return ( !loading && ( <> - + +

+ For details on configuring cash-out, please read the relevant + knowledgebase article: +

+ + + }>

Transaction fudge factor

{ {fudgeFactorActive ? 'On' : 'Off'} - +

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.)

-
+

For details please read the relevant knowledgebase article:

+ +
{ } ]} iconClassName={classes.listViewButton} + appendix={ + +

+ For details about commissions, please read the relevant + knowledgebase articles: +

+ + +
+ } /> {!showMachines && !loading && ( diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js index 0eb0be28..89479a02 100644 --- 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 = ({

{title}

{ // TODO: Enable for next release - /* */ + /* */ }
{state && authorize && ( diff --git a/new-lamassu-admin/src/pages/Locales/Locales.js b/new-lamassu-admin/src/pages/Locales/Locales.js index 3a820c8a..7956121a 100644 --- 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)} /> - + +

+ For details on configuring languages, please read the relevant + knowledgebase article: +

+ + + } + />

Define discount rate

- +

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.

-
+
{ />

Define discount rate

- +

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.

-
+
{ } ]} iconClassName={classes.listViewButton} - className={classes.tableWidth}> + className={classes.tableWidth} + appendix={ + +

+ For details on configuring cash boxes and cassettes, please read + the relevant knowledgebase article: +

+ +
+ }> {!showHistory && ( Cash box resets diff --git a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js index 04595563..b8468472 100644 --- a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js +++ b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.js @@ -6,7 +6,7 @@ import React from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Stepper from 'src/components/Stepper' -import { HoverableTooltip } from 'src/components/Tooltip' +import { HelpTooltip } from 'src/components/Tooltip' import { Button } from 'src/components/buttons' import { Cashbox } from 'src/components/inputs/cashbox/Cashbox' import { NumberInput, RadioGroup } from 'src/components/inputs/formik' @@ -245,12 +245,12 @@ const WizardStep = ({ classes.centerAlignment )}>

Since previous update

- +

Number of bills inside the cash box, since the last cash box changes.

-
+
- {displayTitle && } + {displayTitle && ( + +

+ For details on configuring notifications, please read the + relevant knowledgebase article: +

+ + + } + /> + )} {displayThirdPartyProvider && (
{

Coin ATM Radar share settings

- +

For details on configuring this panel, please read the relevant knowledgebase article{' '} @@ -78,7 +80,12 @@ const CoinATMRadar = memo(({ wizard }) => { .

-
+ +
{ <>

Contact information

+ +

+ For details on configuring this panel, please read the relevant + knowledgebase article: +

+ +

Info card enabled?

diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js index 9b90c14a..2c59c3ce 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.js @@ -4,11 +4,14 @@ import gql from 'graphql-tag' import * as R from 'ramda' import React, { memo } from 'react' +import { HelpTooltip } from 'src/components/Tooltip' import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable' import { Switch } from 'src/components/inputs' import { H4, P, Label2 } from 'src/components/typography' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' +import { SupportLinkButton } from '../../components/buttons' + import { global } from './OperatorInfo.styles' const useStyles = makeStyles(global) @@ -47,6 +50,17 @@ const ReceiptPrinting = memo(({ wizard }) => { <>

Receipt options

+ +

+ For details on configuring this panel, please read the relevant + knowledgebase article: +

+ +

Enable receipt printing

diff --git a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js index 232ad92d..3cd29f10 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.js @@ -4,8 +4,8 @@ import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState } from 'react' -import { HoverableTooltip } from 'src/components/Tooltip' -import { IconButton } from 'src/components/buttons' +import { HelpTooltip } from 'src/components/Tooltip' +import { IconButton, SupportLinkButton } from 'src/components/buttons' import { Switch } from 'src/components/inputs' import DataTable from 'src/components/tables/DataTable' import { H4, P, Label3 } from 'src/components/typography' @@ -162,9 +162,9 @@ const SMSNotices = () => { !R.isEmpty(TOOLTIPS[it.event]) ? (
{R.prop('messageName', it)} - +

{TOOLTIPS[it.event]}

-
+
) : ( R.prop('messageName', it) @@ -237,6 +237,17 @@ const SMSNotices = () => { <>

SMS notices

+ +

+ For details on configuring this panel, please read the relevant + knowledgebase article: +

+ +
{showModal && ( { <>

Terms & Conditions

+ +

+ For details on configuring this panel, please read the relevant + knowledgebase article: +

+ +

Show on screen

diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js index cd40af4b..1bdb5ed3 100644 --- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js +++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js @@ -11,7 +11,7 @@ import * as R from 'ramda' import React, { memo, useState } from 'react' import { ConfirmDialog } from 'src/components/ConfirmDialog' -import { HoverableTooltip } from 'src/components/Tooltip' +import { HelpTooltip, HoverableTooltip } from 'src/components/Tooltip' import { IDButton, ActionButton } from 'src/components/buttons' import { P, Label1 } from 'src/components/typography' import { ReactComponent as CardIdInverseIcon } from 'src/styling/icons/ID/card/white.svg' @@ -358,9 +358,9 @@ const DetailsRow = ({ it: tx, timezone }) => {
{!R.isNil(tx.walletScore) && ( - + {`Chain analysis score: ${tx.walletScore}/10`} - + )}
diff --git a/new-lamassu-admin/src/pages/Transactions/Transactions.js b/new-lamassu-admin/src/pages/Transactions/Transactions.js index cd49ca34..4b3b9326 100644 --- a/new-lamassu-admin/src/pages/Transactions/Transactions.js +++ b/new-lamassu-admin/src/pages/Transactions/Transactions.js @@ -11,6 +11,8 @@ import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper' import SearchBox from 'src/components/SearchBox' import SearchFilter from 'src/components/SearchFilter' import Title from 'src/components/Title' +import { HelpTooltip } from 'src/components/Tooltip' +import { SupportLinkButton } from 'src/components/buttons' import DataTable from 'src/components/tables/DataTable' import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg' import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg' @@ -233,7 +235,22 @@ const Transactions = () => { }, { header: 'Status', - view: it => getStatus(it), + view: it => { + if (getStatus(it) === 'Pending') + return ( +
+ {'Pending'} + + + +
+ ) + else return getStatus(it) + }, textAlign: 'left', size: 'sm', width: 80 diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.js b/new-lamassu-admin/src/pages/Triggers/Triggers.js index 07629699..02a9fc49 100644 --- a/new-lamassu-admin/src/pages/Triggers/Triggers.js +++ b/new-lamassu-admin/src/pages/Triggers/Triggers.js @@ -6,7 +6,7 @@ import * as R from 'ramda' import React, { useState } from 'react' import Modal from 'src/components/Modal' -import { HoverableTooltip } from 'src/components/Tooltip' +import { HelpTooltip } from 'src/components/Tooltip' import { Link, SupportLinkButton } from 'src/components/buttons' import { Switch } from 'src/components/inputs' import TitleSection from 'src/components/layout/TitleSection' @@ -187,13 +187,13 @@ const Triggers = () => { {rejectAddressReuse ? 'On' : 'Off'} - +

This option requires a user to scan a different cryptocurrency address if they attempt to scan one that had been previously used for a transaction in your network

-
+ )} diff --git a/new-lamassu-admin/src/pages/Wallet/Wallet.js b/new-lamassu-admin/src/pages/Wallet/Wallet.js index e2d74ec0..eaf1148e 100644 --- a/new-lamassu-admin/src/pages/Wallet/Wallet.js +++ b/new-lamassu-admin/src/pages/Wallet/Wallet.js @@ -5,6 +5,8 @@ import * as R from 'ramda' import React, { useState } from 'react' import Modal from 'src/components/Modal' +import { HelpTooltip } from 'src/components/Tooltip' +import { SupportLinkButton } from 'src/components/buttons' import { NamespacedTable as EditableTable } from 'src/components/editableTable' import TitleSection from 'src/components/layout/TitleSection' import FormRenderer from 'src/pages/Services/FormRenderer' @@ -13,6 +15,8 @@ import { ReactComponent as ReverseSettingsIcon } from 'src/styling/icons/circle import { ReactComponent as SettingsIcon } from 'src/styling/icons/circle buttons/settings/zodiac.svg' import { fromNamespace, toNamespace } from 'src/utils/config' +import { P } from '../../components/typography' + import AdvancedWallet from './AdvancedWallet' import styles from './Wallet.styles.js' import Wizard from './Wizard' @@ -124,6 +128,19 @@ const Wallet = ({ name: SCREEN_KEY }) => { toggle: setAdvancedSettings } ]} + appendix={ + +

+ For details on configuring wallets, please read the relevant + knowledgebase article: +

+ +
+ } />
{!advancedSettings && ( diff --git a/new-lamassu-admin/src/pages/Wizard/components/Twilio.js b/new-lamassu-admin/src/pages/Wizard/components/Twilio.js index a8a55bed..e553290c 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 { HoverableTooltip } from 'src/components/Tooltip' +import { HelpTooltip } 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' @@ -102,7 +102,7 @@ function Twilio({ doContinue }) {

Will you setup a two way machine or compliance?

- +

Two-way machines allow your customers not only to buy (cash-in) but also sell cryptocurrencies (cash-out). @@ -111,7 +111,7 @@ function Twilio({ doContinue }) { You’ll need an SMS service for cash-out transactions and for any compliance triggers

-
+