diff --git a/.changeset/green-buses-flash.md b/.changeset/green-buses-flash.md new file mode 100644 index 00000000000..59a3fe2ffb8 --- /dev/null +++ b/.changeset/green-buses-flash.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Fix deleting draft orders diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx index b704d956c78..63ab62c7573 100644 --- a/src/orders/views/OrderDraftList/OrderDraftList.tsx +++ b/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 = ({ 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 = ({ 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 = ({ params }) => { onOrderDraftBulkDelete(selectedRowIds)} open={params.action === "remove"} title={intl.formatMessage({ id: "qbmeUI", diff --git a/src/orders/views/OrderDraftList/useBulkDeletion.test.ts b/src/orders/views/OrderDraftList/useBulkDeletion.test.ts new file mode 100644 index 00000000000..f769b8b2ae7 --- /dev/null +++ b/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"], + }, + }); + }); +}); diff --git a/src/orders/views/OrderDraftList/useBulkDeletion.ts b/src/orders/views/OrderDraftList/useBulkDeletion.ts new file mode 100644 index 00000000000..0f5d931efae --- /dev/null +++ b/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 }; +};