From 875c5517d1ec3d24d1c8019c3c9d157e2eac6a81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Wed, 23 Jun 2021 00:26:16 +0100
Subject: [PATCH] feat: add confirmation dialog on tx cancel

---
 .../src/pages/Transactions/DetailsCard.js     | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
index 3c161eb1..897f4d6e 100644
--- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
+++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
@@ -7,8 +7,9 @@ import JSZip from 'jszip'
 import { utils as coinUtils } from 'lamassu-coins'
 import moment from 'moment'
 import * as R from 'ramda'
-import React, { memo } from 'react'
+import React, { memo, useState } from 'react'
 
+import { ConfirmDialog } from 'src/components/ConfirmDialog'
 import { HoverableTooltip } from 'src/components/Tooltip'
 import { IDButton, ActionButton } from 'src/components/buttons'
 import { P, Label1 } from 'src/components/typography'
@@ -79,6 +80,8 @@ const Label = ({ children }) => {
 
 const DetailsRow = ({ it: tx, timezone }) => {
   const classes = useStyles()
+  const [action, setAction] = useState({ command: null })
+  const [errorMessage, setErrorMessage] = useState('')
 
   const zip = new JSZip()
 
@@ -87,7 +90,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
   })
 
   const [cancelCashOutTransaction] = useMutation(CANCEL_TRANSACTION, {
-    onError: () => console.error('Error cancelling transaction'),
+    onError: ({ message }) => setErrorMessage(message ?? 'An error occurred.'),
     refetchQueries: () => ['transactions']
   })
 
@@ -301,10 +304,8 @@ const DetailsRow = ({ it: tx, timezone }) => {
                 InverseIcon={CancelInverseIcon}
                 className={classes.cancelTransaction}
                 onClick={() =>
-                  cancelCashOutTransaction({
-                    variables: {
-                      id: tx.id
-                    }
+                  setAction({
+                    command: 'cancelTx'
                   })
                 }>
                 Cancel transaction
@@ -313,6 +314,25 @@ const DetailsRow = ({ it: tx, timezone }) => {
           </div>
         </div>
       </div>
+      <ConfirmDialog
+        open={action.command === 'cancelTx'}
+        title={`Cancel this transaction?`}
+        errorMessage={errorMessage}
+        toBeConfirmed={tx.machineName}
+        message={`The user will not be able to redeem the cash, even if they subsequently send the required coins. If they've already sent you coins, you'll need to reconcile this transaction with them manually.`}
+        onConfirmed={() => {
+          setErrorMessage(null)
+          cancelCashOutTransaction({
+            variables: {
+              id: tx.id
+            }
+          })
+        }}
+        onDissmised={() => {
+          setAction({ command: null })
+          setErrorMessage(null)
+        }}
+      />
     </div>
   )
 }