fix: typos and small ui improvements

new-lamassu-admin/src/components/buttons/SupportLinkButton.js

@@ -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

new-lamassu-admin/src/components/buttons/index.js

@@ -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
 }

new-lamassu-admin/src/pages/Cashout/WizardStep.js

@@ -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
+            When enabling cash-out, your bill count will be automatically set to
-            zero. Make sure you physically put cash inside the cashboxes 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
+            make sure you set the correct cash-out bill count for this machine
-            on your Cashboxes tab under Maintenance.
+            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.

new-lamassu-admin/src/pages/Maintenance/CashCassettes.js

@@ -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

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js

@@ -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: Yup.string(),
-      'phone',
-      'Please enter a valid phone number',
-      function(phone) {
-        return parsePhoneNumberFromString(phone, locale.country).isValid()
-      }
-    ),
     email: Yup.string()
       .email('Please enter a valid email address')
       .required(),
@@ -156,14 +148,8 @@ const ContactInfo = ({ wizard }) => {
     {
       name: 'phone',
       label: 'Phone number',
-      value:
+      value: info.phone,
-        info.phone && locale.country
+      component: TextInput
-          ? parsePhoneNumberFromString(
-              info.phone,
-              locale.country
-            ).formatInternational()
-          : '',
-      component: NumberInput
     },
     {
       name: 'email',

new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting/ReceiptPrinting.js

@@ -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={[
           {

new-lamassu-admin/src/pages/Services/schemas/itbit.js

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

new-lamassu-admin/src/pages/Services/schemas/twilio.js

@@ -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
     }

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

@@ -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}`
 

new-lamassu-admin/src/pages/Triggers/Triggers.js

@@ -95,9 +95,9 @@ const Triggers = () => {
             </Label2>
             <Tooltip width={304}>
               <P>
-                The "Reject reused addresses" option means that all addresses
+                This option requires a user to scan a different cryptocurrency
-                that are used once will be automatically rejected if there's an
+                address if they attempt to scan one that had been previously
-                attempt to use them again on a new transaction.
+                used for a transaction in your network
               </P>
             </Tooltip>
           </Box>

new-lamassu-admin/src/pages/Wizard/components/Twilio.js

@@ -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>
               You’ll 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
+          To set up Twilio please read the instructions from our support portal.
-          the Admin.
         </InfoMessage>
+        <SupportLinkButton
+          link="https://support.lamassu.is/hc/en-us/articles/115001203951-Twilio-for-SMS"
+          label="Twilio for SMS"
+        />
 
         {selected === 'enable' && (
           <>

new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.js

@@ -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

new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.js

@@ -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,{' '}
+        If you are enabling cash-out services, create a Blockcypher account.
-        <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>
       </P>
+      <SupportLinkButton
+        link="https://support.lamassu.is/hc/en-us/articles/115001209472-Blockcypher"
+        label="Configuring Blockcypher"
+      />
       <RadioGroup
         labelClassName={classes.radioLabel}
         className={classes.radioGroup}

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.js

@@ -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
+              Make sure you set up {schema[selected].name} to enter the
-              below. Please follow the instructions on our support page if you
+              necessary information below. Please follow the instructions on our
-              haven’t.
+              support page if you haven’t.
             </Info3>
           </div>
-          <ActionButton
+          <SupportLinkButton
-            className={classes.actionButton}
+            link={supportArticles[selected]}
-            color="primary"
+            label={`${schema[selected].name} trading`}
-            Icon={LinkIcon}
+          />
-            InverseIcon={InverseLinkIcon}>
-            <a
-              className={classes.actionButtonLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              href={supportArticles[selected]}>
-              {selected} trading
-            </a>
-          </ActionButton>
 
           <H4 noMargin>Enter exchange information</H4>
           <FormRenderer

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.js

@@ -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
+          <SupportLinkButton
-            className={classes.actionButtonLink}
+            link="https://support.lamassu.is/hc/en-us/articles/115001209552-Setting-up-your-node-wallets"
-            target="_blank"
+            label="Support article"
-            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>
         </>
       )}
       {!isConfigurable(selected) && (
@@ -133,19 +122,10 @@ const ChooseWallet = ({ data: currentData, addData }) => {
               page if you haven’t.
             </Info3>
           </div>
-          <a
+          <SupportLinkButton
-            className={classes.actionButtonLink}
+            link="https://support.lamassu.is/hc/en-us/articles/360024455592-Setting-up-BitGo"
-            target="_blank"
+            label="Support article"
-            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>
           <H4 noMargin>Enter wallet information</H4>
           <FormRenderer
             value={accounts.bitgo}

new-lamassu-admin/src/routing/routes.js

@@ -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',
+        key: 'cash_cassettes',
-        label: 'Cashboxes',
+        label: 'Cash Cassettes',
-        route: '/maintenance/cashboxes',
+        route: '/maintenance/cash-cassettes',
-        component: Cashboxes
+        component: CashCassettes
       },
       {
         key: 'funding',
@@ -57,7 +57,7 @@ const tree = [
       },
       {
         key: 'logs',
-        label: 'Machine logs',
+        label: 'Machine Logs',
         route: '/maintenance/logs',
         component: MachineLogs
       },