feat: cash out transaction cancel

lib/new-admin/graphql/resolvers/transaction.resolver.js

@@ -3,6 +3,7 @@ const { parseAsync } = require('json2csv')
 const _ = require('lodash/fp')
 
 const filters = require('../../filters')
+const cashOutTx = require('../../../cash-out/cash-out-tx')
 const transactions = require('../../services/transactions')
 const anonymous = require('../../../constants').anonymousCustomer
 const logDateFormat = require('../../../logs').logDateFormat
@@ -42,6 +43,9 @@ const resolvers = {
         parseAsync(logDateFormat(timezone, data, ['created']))
       ),
     transactionFilters: () => filters.transaction()
+  },
+  Mutation: {
+    cancelCashOutTransaction: (...[, { id }]) => cashOutTx.cancel(id)
   }
 }
 

lib/new-admin/graphql/types/transaction.type.js

@@ -57,6 +57,10 @@ const typeDef = gql`
     txAssociatedDataCsv(id: ID, txClass: String, timezone: String): String @auth
     transactionFilters: [Filter] @auth
   }
+
+  type Mutation {
+    cancelCashOutTransaction(id: ID): Transaction @auth
+  }
 `
 
 module.exports = typeDef

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

@@ -1,4 +1,4 @@
-import { useLazyQuery } from '@apollo/react-hooks'
+import { useLazyQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles, Box } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import FileSaver from 'file-saver'
@@ -18,6 +18,8 @@ import { ReactComponent as PhoneIdInverseIcon } from 'src/styling/icons/ID/phone
 import { ReactComponent as PhoneIdIcon } from 'src/styling/icons/ID/phone/zodiac.svg'
 import { ReactComponent as CamIdInverseIcon } from 'src/styling/icons/ID/photo/white.svg'
 import { ReactComponent as CamIdIcon } from 'src/styling/icons/ID/photo/zodiac.svg'
+import { ReactComponent as CancelInverseIcon } from 'src/styling/icons/button/cancel/white.svg'
+import { ReactComponent as CancelIcon } from 'src/styling/icons/button/cancel/zodiac.svg'
 import { ReactComponent as DownloadInverseIcon } from 'src/styling/icons/button/download/white.svg'
 import { ReactComponent as Download } from 'src/styling/icons/button/download/zodiac.svg'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
@@ -59,6 +61,14 @@ const TX_SUMMARY = gql`
   }
 `
 
+const CANCEL_TRANSACTION = gql`
+  mutation cancelCashOutTransaction($id: ID!) {
+    cancelCashOutTransaction(id: $id) {
+      id
+    }
+  }
+`
+
 const formatAddress = (cryptoCode = '', address = '') =>
   coinUtils.formatCryptoAddress(cryptoCode, address).replace(/(.{5})/g, '$1 ')
 
@@ -76,6 +86,11 @@ const DetailsRow = ({ it: tx, timezone }) => {
     onCompleted: data => createCsv(data)
   })
 
+  const [cancelCashOutTransaction] = useMutation(CANCEL_TRANSACTION, {
+    onError: () => console.error('Error cancelling transaction'),
+    refetchQueries: () => ['transactions']
+  })
+
   const fiat = Number.parseFloat(tx.fiat)
   const crypto = coinUtils.toUnit(new BigNumber(tx.cryptoAtoms), tx.cryptoCode)
   const commissionPercentage = Number.parseFloat(tx.commissionPercentage, 2)
@@ -270,6 +285,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
         </div>
         <div>
           <Label>Other actions</Label>
+          <div className={classes.otherActionsGroup}>
             <ActionButton
               color="primary"
               Icon={Download}
@@ -278,6 +294,23 @@ const DetailsRow = ({ it: tx, timezone }) => {
               onClick={() => downloadRawLogs(tx, timezone)}>
               Download raw logs
             </ActionButton>
+            {tx.txClass === 'cashOut' && (
+              <ActionButton
+                color="primary"
+                Icon={CancelIcon}
+                InverseIcon={CancelInverseIcon}
+                className={classes.cancelTransaction}
+                onClick={() =>
+                  cancelCashOutTransaction({
+                    variables: {
+                      id: tx.id
+                    }
+                  })
+                }>
+                Cancel transaction
+              </ActionButton>
+            )}
+          </div>
         </div>
       </div>
     </div>

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

@@ -77,6 +77,10 @@ export default {
   downloadRawLogs: {
     width: 180
   },
+  cancelTransaction: {
+    width: 160,
+    marginLeft: 8
+  },
   status: {
     width: 230
   },
@@ -103,5 +107,9 @@ export default {
   },
   chipLabel: {
     color: white
+  },
+  otherActionsGroup: {
+    display: 'flex',
+    flexDirection: 'row'
   }
 }

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

@@ -1,4 +1,5 @@
 const getCashOutStatus = it => {
+  if (it.hasError === 'Operator cancel') return 'Cancelled'
   if (it.hasError) return 'Error'
   if (it.dispense) return 'Success'
   if (it.expired) return 'Expired'