fix: typos and small ui improvements

This commit is contained in:
Taranto 2020-10-24 10:49:51 +01:00 committed by Josh Harvey
parent 0aae7ac1ff
commit a710a1b33a
17 changed files with 102 additions and 109 deletions

View file

@ -0,0 +1,38 @@
import { makeStyles } from '@material-ui/core'
import React from 'react'
import { ActionButton } from 'src/components/buttons'
import { ReactComponent as InverseLinkIcon } from 'src/styling/icons/action/external link/white.svg'
import { ReactComponent as LinkIcon } from 'src/styling/icons/action/external link/zodiac.svg'
import { spacer, primaryColor } from 'src/styling/variables'
const useStyles = makeStyles({
actionButton: {
marginBottom: spacer * 4
},
actionButtonLink: {
textDecoration: 'none',
color: primaryColor
}
})
const SupportLinkButton = ({ link, label }) => {
const classes = useStyles()
return (
<a
className={classes.actionButtonLink}
target="_blank"
rel="noopener noreferrer"
href={link}>
<ActionButton
className={classes.actionButton}
color="primary"
Icon={LinkIcon}
InverseIcon={InverseLinkIcon}>
{label}
</ActionButton>
</a>
)
}
export default SupportLinkButton

View file

@ -6,6 +6,7 @@ import IDButton from './IDButton'
import IconButton from './IconButton'
import Link from './Link'
import SimpleButton from './SimpleButton'
import SupportLinkButton from './SupportLinkButton'
export {
Button,
@ -15,5 +16,6 @@ export {
FeatureButton,
IconButton,
IDButton,
AddButton
AddButton,
SupportLinkButton
}

View file

@ -133,20 +133,20 @@ const WizardStep = ({
{lastStep && (
<div className={classes.disclaimer}>
<Info2 className={classes.title}>Cashout Bill Count</Info2>
<Info2 className={classes.title}>Cash-out Bill Count</Info2>
<P>
<WarningIcon className={classes.disclaimerIcon} />
When enabling cash out, your bill count will be automatically set to
zero. Make sure you physically put cash inside the cashboxes to
When enabling cash-out, your bill count will be automatically set to
zero. Make sure you physically put cash inside the cash cassettes to
allow the machine to dispense it to your users. If you already did,
make sure you set the correct cash out bill count for this machine
on your Cashboxes tab under Maintenance.
make sure you set the correct cash-out bill count for this machine
on your Cash Cassettes tab under Maintenance.
</P>
<Info2 className={classes.title}>Default Commissions</Info2>
<P>
<WarningIcon className={classes.disclaimerIcon} />
When enabling cash out, default commissions will be set. To change
When enabling cash-out, default commissions will be set. To change
commissions for this machine, please go to the Commissions tab under
Settings where you can set exceptions for each of the available
cryptocurrencies.

View file

@ -10,7 +10,7 @@ import { NumberInput } from 'src/components/inputs/formik'
import TitleSection from 'src/components/layout/TitleSection'
import { fromNamespace } from 'src/utils/config'
import styles from './Cashboxes.styles.js'
import styles from './CashCassettes.styles.js'
const useStyles = makeStyles(styles)
@ -60,7 +60,7 @@ const RESET_CASHOUT_BILLS = gql`
}
`
const Cashboxes = () => {
const CashCassettes = () => {
const classes = useStyles()
const { data } = useQuery(GET_MACHINES_AND_CONFIG)
@ -136,7 +136,7 @@ const Cashboxes = () => {
return (
<>
<TitleSection title="Cashboxes" />
<TitleSection title="Cash Cassettes" />
<EditableTable
name="cashboxes"
@ -150,4 +150,4 @@ const Cashboxes = () => {
)
}
export default Cashboxes
export default CashCassettes

View file

@ -3,7 +3,6 @@ import { makeStyles } from '@material-ui/core'
import classnames from 'classnames'
import { Form, Formik, Field as FormikField } from 'formik'
import gql from 'graphql-tag'
import { parsePhoneNumberFromString } from 'libphonenumber-js'
import * as R from 'ramda'
import React, { useState } from 'react'
import * as Yup from 'yup'
@ -12,7 +11,7 @@ import ErrorMessage from 'src/components/ErrorMessage'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { Link } from 'src/components/buttons'
import Switch from 'src/components/inputs/base/Switch'
import { TextInput, NumberInput } from 'src/components/inputs/formik'
import { TextInput } from 'src/components/inputs/formik'
import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
@ -125,20 +124,13 @@ const ContactInfo = ({ wizard }) => {
const info =
data?.config && fromNamespace(namespaces.OPERATOR_INFO, data.config)
const locale = data?.config && fromNamespace(namespaces.LOCALE, data.config)
if (!info) return null
const validationSchema = Yup.object().shape({
active: Yup.boolean(),
name: Yup.string(),
phone: Yup.string().test(
'phone',
'Please enter a valid phone number',
function(phone) {
return parsePhoneNumberFromString(phone, locale.country).isValid()
}
),
phone: Yup.string(),
email: Yup.string()
.email('Please enter a valid email address')
.required(),
@ -156,14 +148,8 @@ const ContactInfo = ({ wizard }) => {
{
name: 'phone',
label: 'Phone number',
value:
info.phone && locale.country
? parsePhoneNumberFromString(
info.phone,
locale.country
).formatInternational()
: '',
component: NumberInput
value: info.phone,
component: TextInput
},
{
name: 'email',

View file

@ -49,7 +49,7 @@ const ReceiptPrinting = memo(({ wizard }) => {
<H4>Receipt options</H4>
</div>
<div className={classes.rowWrapper}>
<P>Share information?</P>
<P>Enable receipt printing?</P>
<div className={classes.switchWrapper}>
<Switch
checked={receiptPrintingConfig.active}
@ -71,7 +71,7 @@ const ReceiptPrinting = memo(({ wizard }) => {
</div>
<BooleanPropertiesTable
editing={wizard}
title={'Visible on the receipt (optionals)'}
title={'Visible on the receipt (options)'}
data={receiptPrintingConfig}
elements={[
{

View file

@ -5,8 +5,8 @@ import TextInputFormik from 'src/components/inputs/formik/TextInput'
export default {
code: 'itbit',
name: 'Itbit',
title: 'Itbit (Exchange)',
name: 'itBit',
title: 'itBit (Exchange)',
elements: [
{
code: 'userId',

View file

@ -20,13 +20,13 @@ export default {
},
{
code: 'fromNumber',
display: 'From Number',
display: 'Twilio Number (international format)',
component: TextInputFormik,
face: true
},
{
code: 'toNumber',
display: 'To Number',
display: 'Notifications Number (international format)',
component: TextInputFormik,
face: true
}

View file

@ -58,7 +58,7 @@ const DetailsRow = ({ it: tx }) => {
const fiat = Number.parseFloat(tx.fiat)
const crypto = toUnit(new BigNumber(tx.cryptoAtoms), tx.cryptoCode)
const commissionPercentage = Number.parseFloat(tx.commissionPercentage, 2)
const commission = fiat * commissionPercentage
const commission = Number(fiat * commissionPercentage).toFixed(2)
const exchangeRate = Number(fiat / crypto).toFixed(3)
const displayExRate = `1 ${tx.cryptoCode} = ${exchangeRate} ${tx.fiatCode}`

View file

@ -95,9 +95,9 @@ const Triggers = () => {
</Label2>
<Tooltip 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.
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
</P>
</Tooltip>
</Box>

View file

@ -6,7 +6,7 @@ import React, { useState } from 'react'
import InfoMessage from 'src/components/InfoMessage'
import Tooltip from 'src/components/Tooltip'
import { Button } from 'src/components/buttons'
import { Button, SupportLinkButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import { H1, H4, P } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
@ -109,7 +109,7 @@ function Twilio({ doContinue }) {
</P>
<P>
Youll need an SMS service for cash-out transactions and for any
complaince triggers
compliance triggers
</P>
</Tooltip>
</Box>
@ -123,9 +123,12 @@ function Twilio({ doContinue }) {
/>
<InfoMessage className={classes.info}>
Before configuring Twilio, create an account and phone number to use
the Admin.
To set up Twilio please read the instructions from our support portal.
</InfoMessage>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/115001203951-Twilio-for-SMS"
label="Twilio for SMS"
/>
{selected === 'enable' && (
<>

View file

@ -65,7 +65,7 @@ const AllSet = ({ data: currentData, doContinue }) => {
<>
<H4 className={error && classes.error}>All set</H4>
<P>
This are your wallet settings. You can later edit these and add
These are your wallet settings. You can later edit these and add
additional coins.
</P>
<EditableTable

View file

@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core'
import gql from 'graphql-tag'
import React, { useState } from 'react'
import { Link, Button } from 'src/components/buttons'
import { SupportLinkButton, Button } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import { P, H4 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
@ -69,17 +69,12 @@ const Blockcypher = ({ addData }) => {
<>
<H4 className={error && classes.error}>Blockcypher</H4>
<P>
If you are enabling cash-out services,{' '}
<Link>
<a
className={classes.actionButtonLink}
target="_blank"
rel="noopener noreferrer"
href="https://support.lamassu.is/hc/en-us/articles/115001209472-Blockcypher">
create a Blockcypher account.
</a>
</Link>
If you are enabling cash-out services, create a Blockcypher account.
</P>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/115001209472-Blockcypher"
label="Configuring Blockcypher"
/>
<RadioGroup
labelClassName={classes.radioLabel}
className={classes.radioGroup}

View file

@ -4,13 +4,11 @@ import gql from 'graphql-tag'
import * as R from 'ramda'
import React, { useState } from 'react'
import { Button, ActionButton } from 'src/components/buttons'
import { Button, SupportLinkButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import { H4, Info3 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
import schema from 'src/pages/Services/schemas'
import { ReactComponent as InverseLinkIcon } from 'src/styling/icons/action/external link/white.svg'
import { ReactComponent as LinkIcon } from 'src/styling/icons/action/external link/zodiac.svg'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
import styles from './Shared.styles'
@ -102,24 +100,15 @@ const ChooseExchange = ({ data: currentData, addData }) => {
<div className={classes.infoMessage}>
<WarningIcon />
<Info3>
Make sure you set up {selected} to enter the necessary information
below. Please follow the instructions on our support page if you
havent.
Make sure you set up {schema[selected].name} to enter the
necessary information below. Please follow the instructions on our
support page if you havent.
</Info3>
</div>
<ActionButton
className={classes.actionButton}
color="primary"
Icon={LinkIcon}
InverseIcon={InverseLinkIcon}>
<a
className={classes.actionButtonLink}
target="_blank"
rel="noopener noreferrer"
href={supportArticles[selected]}>
{selected} trading
</a>
</ActionButton>
<SupportLinkButton
link={supportArticles[selected]}
label={`${schema[selected].name} trading`}
/>
<H4 noMargin>Enter exchange information</H4>
<FormRenderer

View file

@ -4,14 +4,12 @@ import gql from 'graphql-tag'
import * as R from 'ramda'
import React, { useState } from 'react'
import { Button, ActionButton } from 'src/components/buttons'
import { Button, SupportLinkButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import { H4, Info3 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
import schema from 'src/pages/Services/schemas'
import bitgo from 'src/pages/Services/schemas/singlebitgo'
import { ReactComponent as InverseLinkIcon } from 'src/styling/icons/action/external link/white.svg'
import { ReactComponent as LinkIcon } from 'src/styling/icons/action/external link/zodiac.svg'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
import styles from './Shared.styles'
@ -103,19 +101,10 @@ const ChooseWallet = ({ data: currentData, addData }) => {
our support portal.
</Info3>
</div>
<a
className={classes.actionButtonLink}
target="_blank"
rel="noopener noreferrer"
href="https://support.lamassu.is/hc/en-us/articles/115001209552-Setting-up-your-node-wallets">
<ActionButton
className={classes.actionButton}
color="primary"
Icon={LinkIcon}
InverseIcon={InverseLinkIcon}>
Support article
</ActionButton>
</a>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/115001209552-Setting-up-your-node-wallets"
label="Support article"
/>
</>
)}
{!isConfigurable(selected) && (
@ -133,19 +122,10 @@ const ChooseWallet = ({ data: currentData, addData }) => {
page if you havent.
</Info3>
</div>
<a
className={classes.actionButtonLink}
target="_blank"
rel="noopener noreferrer"
href="https://support.lamassu.is/hc/en-us/articles/360024455592-Setting-up-BitGo">
<ActionButton
className={classes.actionButton}
color="primary"
Icon={LinkIcon}
InverseIcon={InverseLinkIcon}>
Support article
</ActionButton>
</a>
<SupportLinkButton
link="https://support.lamassu.is/hc/en-us/articles/360024455592-Setting-up-BitGo"
label="Support article"
/>
<H4 noMargin>Enter wallet information</H4>
<FormRenderer
value={accounts.bitgo}

View file

@ -16,7 +16,7 @@ import { Customers, CustomerProfile } from 'src/pages/Customers'
import Funding from 'src/pages/Funding'
import Locales from 'src/pages/Locales'
import MachineLogs from 'src/pages/MachineLogs'
import Cashboxes from 'src/pages/Maintenance/Cashboxes'
import CashCassettes from 'src/pages/Maintenance/CashCassettes'
import MachineStatus from 'src/pages/Maintenance/MachineStatus'
import Notifications from 'src/pages/Notifications/Notifications'
import OperatorInfo from 'src/pages/OperatorInfo/OperatorInfo'
@ -44,10 +44,10 @@ const tree = [
},
children: [
{
key: 'cashboxes',
label: 'Cashboxes',
route: '/maintenance/cashboxes',
component: Cashboxes
key: 'cash_cassettes',
label: 'Cash Cassettes',
route: '/maintenance/cash-cassettes',
component: CashCassettes
},
{
key: 'funding',
@ -57,7 +57,7 @@ const tree = [
},
{
key: 'logs',
label: 'Machine logs',
label: 'Machine Logs',
route: '/maintenance/logs',
component: MachineLogs
},