Ability to delete non-exported payment IO-559

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -0,0 +1,52 @@
+import { useMutation } from "@apollo/react-hooks";
+import { Button, notification } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { DELETE_BILL } from "../../graphql/bills.queries";
+
+export default function BillDeleteButton({ bill }) {
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
+  const [deleteBill] = useMutation(DELETE_BILL);
+
+  const handleDelete = async () => {
+    setLoading(true);
+    const result = await deleteBill({
+      variables: { billId: bill.id },
+      update(cache) {
+        cache.modify({
+          fields: {
+            bills(existingBills, { readField }) {
+              return existingBills.filter(
+                (billref) => bill.id !== readField("id", billref)
+              );
+            },
+            search_bills(existingBills, { readField }) {
+              return existingBills.filter(
+                (billref) => bill.id !== readField("id", billref)
+              );
+            },
+          },
+        });
+      },
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("bills.successes.deleted") });
+    } else {
+      notification["error"]({
+        message: t("bills.errors.deleting", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <Button disabled={bill.exported} onClick={handleDelete} loading={loading}>
+      {t("general.actions.delete")}
+    </Button>
+  );
+}

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -1,5 +1,13 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Checkbox, Descriptions, Input, Table, Typography } from "antd";
+import {
+  Button,
+  Checkbox,
+  Descriptions,
+  Input,
+  Space,
+  Table,
+  Typography,
+} from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -10,6 +18,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 
 const mapStateToProps = createStructuredSelector({
   //jobRO: selectJobReadOnly,
@@ -106,7 +115,7 @@ export function BillsListTableComponent({
       dataIndex: "actions",
       key: "actions",
       render: (text, record) => (
-        <div>
+        <Space>
           {record.exported ? (
             <Button disabled>{t("bills.actions.edit")}</Button>
           ) : (
@@ -116,7 +125,8 @@ export function BillsListTableComponent({
               <Button>{t("bills.actions.edit")}</Button>
             </Link>
           )}
-        </div>
+          <BillDeleteButton bill={record} />
+        </Space>
       ),
     },
   ];