Merge pull request #993 from chaotixkilla/fix-transactions-page-issues

Fix transactions page UI

new-lamassu-admin/src/components/fake-table/Table.js

@@ -79,6 +79,7 @@ const Tr = ({
   onClick,
   error,
   errorMessage,
+  shouldShowError,
   children,
   className,
   size,
@@ -99,7 +100,9 @@ const Tr = ({
       <Card className={classnames(classNames, className)} onClick={onClick}>
         <CardContent classes={cardClasses}>
           <div className={classes.mainContent}>{children}</div>
-          {error && <div className={classes.errorContent}>{errorMessage}</div>}
+          {error && shouldShowError && (
+            <div className={classes.errorContent}>{errorMessage}</div>
+          )}
         </CardContent>
       </Card>
     </>

new-lamassu-admin/src/components/tables/DataTable.js

@@ -28,6 +28,7 @@ const useStyles = makeStyles(styles)
 
 const Row = ({
   id,
+  index,
   elements,
   data,
   width,
@@ -48,9 +49,11 @@ const Row = ({
     [classes.row]: true,
     [classes.expanded]: expanded
   }
+
   return (
     <div className={classes.rowWrapper}>
-      <div className={classnames({ [classes.before]: expanded && id !== 0 })}>
+      <div
+        className={classnames({ [classes.before]: expanded && index !== 0 })}>
         <Tr
           size={size}
           className={classnames(trClasses)}
@@ -58,8 +61,9 @@ const Row = ({
             expandable && expandRow(id, data)
             onClick && onClick(data)
           }}
-          error={data.error}
+          error={data.error || data.hasError}
-          errorMessage={data.errorMessage}>
+          shouldShowError={false}
+          errorMessage={data.errorMessage || data.hasError}>
           {elements.map(({ view = it => it?.toString(), ...props }, idx) => (
             <Td key={idx} {...props}>
               {view(data)}
@@ -142,6 +146,7 @@ const DataTable = ({
               width={width}
               size={rowSize}
               id={data[index].id ? data[index].id : index}
+              index={index}
               expWidth={expWidth}
               elements={elements}
               data={data[index]}

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

@@ -15,6 +15,8 @@ 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'
 import { ReactComponent as CustomerLinkIcon } from 'src/styling/icons/month arrows/right.svg'
+import { ReactComponent as CustomerLinkWhiteIcon } from 'src/styling/icons/month arrows/right_white.svg'
+import { errorColor } from 'src/styling/variables'
 import { formatDate } from 'src/utils/timezones'
 
 import DetailsRow from './DetailsCard'
@@ -124,13 +126,13 @@ const Transactions = () => {
   const history = useHistory()
 
   const [filters, setFilters] = useState([])
-  const { data: filtersResponse, loading: loadingFilters } = useQuery(
+  const { data: filtersResponse, loading: filtersLoading } = useQuery(
     GET_TRANSACTION_FILTERS
   )
   const [variables, setVariables] = useState({ limit: NUM_LOG_RESULTS })
   const {
     data: txData,
-    loading: loadingTransactions,
+    loading: transactionsLoading,
     refetch,
     startPolling,
     stopPolling
@@ -185,7 +187,11 @@ const Transactions = () => {
           <div className={classes.overflowTd}>{getCustomerDisplayName(it)}</div>
           {!it.isAnonymous && (
             <div onClick={() => redirect(it.customerId)}>
-              <CustomerLinkIcon className={classes.customerLinkIcon} />
+              {it.hasError ? (
+                <CustomerLinkWhiteIcon className={classes.customerLinkIcon} />
+              ) : (
+                <CustomerLinkIcon className={classes.customerLinkIcon} />
+              )}
             </div>
           )}
         </div>
@@ -294,6 +300,14 @@ const Transactions = () => {
 
   const filterOptions = R.path(['transactionFilters'])(filtersResponse)
 
+  const loading = transactionsLoading || filtersLoading || configLoading
+
+  const errorLabel = (
+    <svg width={12} height={12}>
+      <rect width={12} height={12} rx={3} fill={errorColor} />
+    </svg>
+  )
+
   return (
     <>
       <div className={classes.titleWrapper}>
@@ -301,7 +315,7 @@ const Transactions = () => {
           <Title>Transactions</Title>
           <div className={classes.buttonsWrapper}>
             <SearchBox
-              loading={loadingFilters}
+              loading={filtersLoading}
               filters={filters}
               options={filterOptions}
               inputPlaceholder={'Search Transactions'}
@@ -331,6 +345,10 @@ const Transactions = () => {
             <TxOutIcon />
             <span>Cash-out</span>
           </div>
+          <div>
+            {errorLabel}
+            <span>Transaction error</span>
+          </div>
         </div>
       </div>
       {filters.length > 0 && (
@@ -342,7 +360,7 @@ const Transactions = () => {
         />
       )}
       <DataTable
-        loading={loadingTransactions && configLoading}
+        loading={loading}
         emptyText="No transactions so far"
         elements={elements}
         data={txList}

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

@@ -80,8 +80,11 @@ const mainStyles = {
       display: 'flex',
       alignItems: 'center'
     },
+    '& > div': {
+      marginLeft: 24
+    },
     '& > div:first-child': {
-      marginRight: 24
+      marginLeft: 0
     },
     '& span': {
       extend: label1,

new-lamassu-admin/src/styling/icons/month arrows/right_white.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <circle id="path-1-right" cx="10" cy="10" r="10"></circle>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="pop-up/action/download-logs/date-range-copy-2" transform="translate(-232.000000, -187.000000)">
+            <g id="icon/sf-contain-b-copy-4" transform="translate(242.000000, 197.000000) scale(-1, 1) rotate(-270.000000) translate(-242.000000, -197.000000) translate(232.000000, 187.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1-right"></use>
+                </mask>
+                <use id="Mask" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1-right"></use>
+                <g id="icon/sf-small/wizzard" mask="url(#mask-2)" stroke-linecap="round" stroke-linejoin="round">
+                    <g transform="translate(6.666667, 6.000000)" id="Group">
+                        <g>
+                            <polyline id="Path-3" stroke="#1B2559" stroke-width="2" points="0 4.83333333 3.33333333 8.16666667 6.66666667 4.83333333"></polyline>
+                            <line x1="3.33333333" y1="0.25" x2="3.33333333" y2="6.5" id="Path-4" stroke="#1B2559" stroke-width="2"></line>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>