From 78a04067c5d4ff5a064336abf4b7f53d5485eb24 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Mon, 19 Sep 2022 19:21:44 -0700
Subject: [PATCH] IO-2053  Confirm before marking as exported.

---
 ...yable-mark-selected-exported.component.jsx | 22 ++++++++++++++----
 ...yment-mark-selected-exported.component.jsx | 23 +++++++++++++++----
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/client/src/components/payable-mark-selected-exported/payable-mark-selected-exported.component.jsx b/client/src/components/payable-mark-selected-exported/payable-mark-selected-exported.component.jsx
index dcbc33e76..4058d042c 100644
--- a/client/src/components/payable-mark-selected-exported/payable-mark-selected-exported.component.jsx
+++ b/client/src/components/payable-mark-selected-exported/payable-mark-selected-exported.component.jsx
@@ -1,5 +1,5 @@
 import { gql, useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button, notification, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -34,6 +34,7 @@ export function BillMarkSelectedExported({
 }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(false);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
   const [updateBill] = useMutation(gql`
     mutation UPDATE_BILL($billIds: [uuid!]!) {
@@ -84,11 +85,24 @@ export function BillMarkSelectedExported({
     completedCallback && completedCallback([]);
     setLoading(false);
     refetch && refetch();
+    setVisible(false);
   };
 
   return (
-    <Button loading={loading} disabled={disabled} onClick={handleUpdate}>
-      {t("bills.labels.markexported")}
-    </Button>
+    <Popconfirm
+      visible={visible}
+      title={t("general.labels.areyousure")}
+      onCancel={() => setVisible(false)}
+      onConfirm={handleUpdate}
+      disabled={disabled}
+    >
+      <Button
+        loading={loading}
+        disabled={disabled}
+        onClick={() => setVisible(true)}
+      >
+        {t("bills.labels.markexported")}
+      </Button>
+    </Popconfirm>
   );
 }
diff --git a/client/src/components/payment-mark-selected-exported/payment-mark-selected-exported.component.jsx b/client/src/components/payment-mark-selected-exported/payment-mark-selected-exported.component.jsx
index 74395d30a..8b8fbc4ee 100644
--- a/client/src/components/payment-mark-selected-exported/payment-mark-selected-exported.component.jsx
+++ b/client/src/components/payment-mark-selected-exported/payment-mark-selected-exported.component.jsx
@@ -1,5 +1,5 @@
 import { gql, useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button, notification, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -34,6 +34,8 @@ export function PaymentMarkSelectedExported({
 }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(false);
+
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
   const [updatePayments] = useMutation(gql`
     mutation UPDATE_PAYMENTS($paymentIds: [uuid!]!, $exportedat: timestamptz!) {
@@ -86,11 +88,24 @@ export function PaymentMarkSelectedExported({
     completedCallback && completedCallback([]);
     setLoading(false);
     refetch && refetch();
+    setVisible(false);
   };
 
   return (
-    <Button loading={loading} disabled={disabled} onClick={handleUpdate}>
-      {t("bills.labels.markexported")}
-    </Button>
+    <Popconfirm
+      visible={visible}
+      title={t("general.labels.areyousure")}
+      onCancel={() => setVisible(false)}
+      onConfirm={handleUpdate}
+      disabled={disabled}
+    >
+      <Button
+        loading={loading}
+        disabled={disabled}
+        onClick={() => setVisible(true)}
+      >
+        {t("bills.labels.markexported")}
+      </Button>
+    </Popconfirm>
   );
 }