Fix deletion order drafts (#4620)

* Fix deletion order drafts

* Fix deletion order drafts

* Fix deletion order drafts

---------

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>

.changeset/green-buses-flash.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix deleting draft orders

src/orders/views/OrderDraftList/OrderDraftList.tsx

@@ -7,7 +7,6 @@ import DeleteFilterTabDialog from "@dashboard/components/DeleteFilterTabDialog";
 import SaveFilterTabDialog from "@dashboard/components/SaveFilterTabDialog";
 import { useShopLimitsQuery } from "@dashboard/components/Shop/queries";
 import {
-  useOrderDraftBulkCancelMutation,
   useOrderDraftCreateMutation,
   useOrderDraftListQuery,
 } from "@dashboard/graphql";
@@ -47,6 +46,7 @@ import {
   storageUtils,
 } from "./filters";
 import { getSortQueryVariables } from "./sort";
+import { useBulkDeletion } from "./useBulkDeletion";
 
 interface OrderDraftListProps {
   params: OrderDraftListUrlQueryParams;
@@ -70,23 +70,13 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
     setSelectedRowIds,
   } = useRowSelection(params);
 
-  const [orderDraftBulkDelete, orderDraftBulkDeleteOpts] =
-    useOrderDraftBulkCancelMutation({
-      onCompleted: data => {
-        if (data.draftOrderBulkDelete.errors.length === 0) {
-          notify({
-            status: "success",
-            text: intl.formatMessage({
-              id: "ra2O4j",
-              defaultMessage: "Deleted draft orders",
-            }),
-          });
-          refetch();
-          clearRowSelection();
-          closeModal();
-        }
-      },
-    });
+  const { onOrderDraftBulkDelete, orderDraftBulkDeleteOpts } = useBulkDeletion(
+    () => {
+      refetch();
+      clearRowSelection();
+      closeModal();
+    },
+  );
 
   const [createOrder] = useOrderDraftCreateMutation({
     onCompleted: data => {
@@ -168,15 +158,6 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
 
   const handleSort = createSortHandler(navigate, orderDraftListUrl, params);
 
-  const onOrderDraftBulkDelete = useCallback(async () => {
-    await orderDraftBulkDelete({
-      variables: {
-        ids: selectedRowIds,
-      },
-    });
-    clearRowSelection();
-  }, []);
-
   const handleSetSelectedOrderDraftIds = useCallback(
     (rows: number[], clearSelection: () => void) => {
       if (!orderDrafts) {
@@ -241,7 +222,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
       <ActionDialog
         confirmButtonState={orderDraftBulkDeleteOpts.status}
         onClose={closeModal}
-        onConfirm={onOrderDraftBulkDelete}
+        onConfirm={() => onOrderDraftBulkDelete(selectedRowIds)}
         open={params.action === "remove"}
         title={intl.formatMessage({
           id: "qbmeUI",

src/orders/views/OrderDraftList/useBulkDeletion.test.ts

@@ -0,0 +1,35 @@
+import { useOrderDraftBulkCancelMutation } from "@dashboard/graphql";
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useBulkDeletion } from "./useBulkDeletion";
+
+jest.mock("react-intl");
+jest.mock("@dashboard/graphql", () => ({
+  useOrderDraftBulkCancelMutation: jest.fn(() => [jest.fn(), {}]),
+}));
+
+describe("Order draft list useBulkDeletion", () => {
+  it("deletes order drafts for by given ids", async () => {
+    // Arrange
+    const onComplete = jest.fn();
+    const selectedRowIds = ["id1", "id2"];
+    const orderDraftBulkDelete = jest.fn();
+    const useOrderDraftBulkCancelMutationMock =
+      useOrderDraftBulkCancelMutation as jest.Mock;
+    useOrderDraftBulkCancelMutationMock.mockReturnValue([
+      orderDraftBulkDelete,
+      {},
+    ]);
+
+    // Act
+    const { result } = renderHook(() => useBulkDeletion(onComplete));
+    await result.current.onOrderDraftBulkDelete(selectedRowIds);
+
+    // Assert
+    expect(orderDraftBulkDelete).toBeCalledWith({
+      variables: {
+        ids: ["id1", "id2"],
+      },
+    });
+  });
+});

src/orders/views/OrderDraftList/useBulkDeletion.ts

@@ -0,0 +1,34 @@
+import { useOrderDraftBulkCancelMutation } from "@dashboard/graphql";
+import useNotifier from "@dashboard/hooks/useNotifier";
+import { useIntl } from "react-intl";
+
+export const useBulkDeletion = (onComplete: () => void) => {
+  const notify = useNotifier();
+  const intl = useIntl();
+  const [orderDraftBulkDelete, orderDraftBulkDeleteOpts] =
+    useOrderDraftBulkCancelMutation({
+      onCompleted: data => {
+        if (data?.draftOrderBulkDelete?.errors.length === 0) {
+          notify({
+            status: "success",
+            text: intl.formatMessage({
+              id: "ra2O4j",
+              defaultMessage: "Deleted draft orders",
+            }),
+          });
+
+          onComplete();
+        }
+      },
+    });
+
+  const onOrderDraftBulkDelete = async (selectedRowIds: string[]) => {
+    await orderDraftBulkDelete({
+      variables: {
+        ids: selectedRowIds,
+      },
+    });
+  };
+
+  return { onOrderDraftBulkDelete, orderDraftBulkDeleteOpts };
+};