Fix deleting server-side voucher codes (#6504)

* Fix deleting voucher codes

* Add changeset

* Use ActionButton instead of ConfirmButton for the async confirmation

* Fix typo

* Drop the custom getMutationTransitionState

* Fix failing imports in tests

Author: mirekm

.changeset/curly-hoops-take.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix deleting saved, server-side Voucher codes

locale/defaultMessages.json

@@ -1135,9 +1135,6 @@
     "context": "Charge in progress transaction amount, data display header",
     "string": "Pending charge"
   },
-  "4gJAm6": {
-    "string": "Can't delete saved codes"
-  },
   "4hl9rS": {
     "context": "variant price in channel",
     "string": "Price"
@@ -5563,6 +5560,9 @@
     "context": "dialog subheading",
     "string": "Create a manual transaction for non-integrated payments"
   },
+  "TV940D": {
+    "string": "{count, plural, one {# voucher code deleted} other {# voucher codes deleted}}"
+  },
   "TVR4E6": {
     "string": "Open playground"
   },
@@ -6396,6 +6396,9 @@
     "context": "app extensions subsection",
     "string": "Apps"
   },
+  "Y8XVvH": {
+    "string": "Failed to delete voucher codes"
+  },
   "Y9lv8z": {
     "context": "product unavailability",
     "string": "Unavailable for purchase"

src/discounts/components/VoucherCodes/VoucherCodes.test.tsx

@@ -9,7 +9,7 @@ import userEvent from "@testing-library/user-event";
 import { type ReactNode } from "react";
 import { BrowserRouter } from "react-router-dom";
 
-import { type VoucherCode } from "../VoucherCodesDatagrid/types";
+import { VOUCHER_CODE_DRAFT_STATUS, type VoucherCode } from "../VoucherCodesDatagrid/types";
 import { VoucherCodes, type VoucherCodesProps } from "./VoucherCodes";
 
 jest.mock("@dashboard/components/Datagrid/persistance/usePersistance", () => ({
@@ -36,7 +36,8 @@ const renderVoucherCodes = (props: Partial<VoucherCodesProps>) => {
       codes={[]}
       loading={false}
       onCustomCodeGenerate={jest.fn()}
-      onDeleteCodes={jest.fn()}
+      onDeleteCodes={jest.fn().mockResolvedValue(undefined)}
+      deleteCodesTransitionState="default"
       onMultiCodesGenerate={jest.fn()}
       onSelectVoucherCodesIds={jest.fn()}
       onSettingsChange={jest.fn()}
@@ -99,8 +100,8 @@ describe("VoucherCodes", () => {
     // Assert
     expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
-  it("should not allow to delete selected codes when contains saved codes", async () => {
-    // Arrange & Act
+  it("should allow to delete selected saved codes", async () => {
+    // Arrange
     const onDeleteCodes = jest.fn();
 
     renderVoucherCodes({
@@ -111,22 +112,35 @@ describe("VoucherCodes", () => {
 
     const deleteButton = screen.getByTestId("bulk-delete-button");
 
+    // Act
+    await act(async () => {
+      await userEvent.click(deleteButton);
+    });
+    // Assert
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    expect(
+      await screen.findByText(/are you sure you want to delete these voucher codes?/i),
+    ).toBeInTheDocument();
+    // Act
+    await act(async () => {
+      await userEvent.click(screen.getByRole("button", { name: /delete/i }));
+    });
     // Assert
-    expect(deleteButton).toBeDisabled();
+    expect(onDeleteCodes).toBeCalled();
   });
-  it("should  allow to delete selected codes when selected only draft codes", async () => {
+  it("should allow to delete selected draft codes", async () => {
     // Arrange
     const onDeleteCodes = jest.fn();
 
     renderVoucherCodes({
       onDeleteCodes,
       codes: [
         ...codes,
-        { code: "Manual code 1", status: "Draft" },
-        { code: "Manual code 2", status: "Draft" },
-        { code: "Manual code 3", status: "Draft" },
+        { code: "Manual code 1", status: VOUCHER_CODE_DRAFT_STATUS },
+        { code: "Manual code 2", status: VOUCHER_CODE_DRAFT_STATUS },
+        { code: "Manual code 3", status: VOUCHER_CODE_DRAFT_STATUS },
       ],
-      selectedCodesIds: ["Manual code 1", "Manual code 1"],
+      selectedCodesIds: ["Manual code 1", "Manual code 2"],
     });
 
     const deleteButton = screen.getByTestId("bulk-delete-button");

src/discounts/components/VoucherCodes/VoucherCodes.tsx

@@ -1,4 +1,5 @@
 import { BulkDeleteButton } from "@dashboard/components/BulkDeleteButton";
+import { type ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { type UseListSettings } from "@dashboard/hooks/useListSettings";
 import { type LocalPagination } from "@dashboard/hooks/useLocalPaginator";
 import { PaginatorContext } from "@dashboard/hooks/usePaginator";
@@ -15,13 +16,13 @@ import {
 } from "../VoucherCodesGenerateDialog";
 import { VoucherCodesManualDialog } from "../VoucherCodesManualDialog";
 import { type VoucherCodesUrlDialog } from "./types";
-import { hasSavedVoucherCodesToDelete } from "./utils";
 
 export interface VoucherCodesProps extends VoucherCodesDatagridProps {
   selectedCodesIds: string[];
   voucherCodesPagination: LocalPagination;
   settings: UseListSettings["settings"];
-  onDeleteCodes: () => void;
+  deleteCodesTransitionState: ConfirmButtonTransitionState;
+  onDeleteCodes: () => Promise<void>;
   onSelectVoucherCodesIds: (rows: number[], clearSelection: () => void) => void;
   onSettingsChange: UseListSettings["updateListSettings"];
   onMultiCodesGenerate: (data: GenerateMultipleVoucherCodeFormData) => void;
@@ -33,12 +34,12 @@ export const VoucherCodes = ({
   onMultiCodesGenerate,
   onCustomCodeGenerate,
   onDeleteCodes,
+  deleteCodesTransitionState,
   voucherCodesPagination,
   ...datagridProps
 }: VoucherCodesProps) => {
   const { pageInfo, ...paginationValues } = voucherCodesPagination;
   const [openModal, setOpenModal] = useState<VoucherCodesUrlDialog | null>(null);
-  const hasSavedCodesToDelete = hasSavedVoucherCodesToDelete(selectedCodesIds, datagridProps.codes);
   const closeModal = () => {
     setOpenModal(null);
   };
@@ -59,15 +60,8 @@ export const VoucherCodes = ({
           </Text>
           <Box display="flex" gap={3}>
             {selectedCodesIds.length > 0 && (
-              <BulkDeleteButton
-                disabled={hasSavedCodesToDelete}
-                onClick={() => setOpenModal("delete-codes")}
-              >
-                {hasSavedCodesToDelete ? (
-                  <FormattedMessage defaultMessage="Can't delete saved codes" id="4gJAm6" />
-                ) : (
-                  <FormattedMessage defaultMessage="Delete codes" id="UJ97Lb" />
-                )}
+              <BulkDeleteButton onClick={() => setOpenModal("delete-codes")}>
+                <FormattedMessage defaultMessage="Delete codes" id="UJ97Lb" />
               </BulkDeleteButton>
             )}
             <VoucherCodesAddButton
@@ -94,6 +88,7 @@ export const VoucherCodes = ({
       <VoucherCodesDeleteDialog
         onClose={closeModal}
         open={openModal === "delete-codes"}
+        confirmButtonTransitionState={deleteCodesTransitionState}
         onDelete={onDeleteCodes}
       />
     </>

src/discounts/components/VoucherCodes/utils.test.ts

@@ -1,4 +1,7 @@
+export const VOUCHER_CODE_DRAFT_STATUS = "Draft";
+
 export interface VoucherCode {
+  id?: string;
   code: string;
   used?: number;
   status?: string;

src/discounts/components/VoucherCodes/utils.ts

@@ -1,22 +1,29 @@
+import {
+  ConfirmButton,
+  type ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import { DashboardModal } from "@dashboard/components/Modal";
 import { buttonMessages } from "@dashboard/intl";
 import { Button, Text } from "@saleor/macaw-ui-next";
 import { FormattedMessage, useIntl } from "react-intl";
 
 interface VoucherCodesDeleteDialogProps {
   open: boolean;
+  confirmButtonTransitionState: ConfirmButtonTransitionState;
   onClose: () => void;
-  onDelete: () => void;
+  onDelete: () => Promise<void>;
 }
 
 export const VoucherCodesDeleteDialog = ({
   open,
+  confirmButtonTransitionState,
   onClose,
   onDelete,
 }: VoucherCodesDeleteDialogProps) => {
   const intl = useIntl();
+  const isDeleting = confirmButtonTransitionState === "loading";
   const handleSubmit = async () => {
-    onDelete();
+    await onDelete();
     onClose();
   };
 
@@ -35,11 +42,18 @@ export const VoucherCodesDeleteDialog = ({
         </Text>
 
         <DashboardModal.Actions>
-          <Button onClick={onClose} variant="secondary">
+          <Button onClick={onClose} variant="secondary" disabled={isDeleting}>
             {intl.formatMessage(buttonMessages.back)}
           </Button>
 
-          <Button onClick={handleSubmit}>{intl.formatMessage(buttonMessages.delete)}</Button>
+          <ConfirmButton
+            transitionState={confirmButtonTransitionState}
+            onClick={handleSubmit}
+            variant="error"
+            data-test-id="submit"
+          >
+            {intl.formatMessage(buttonMessages.delete)}
+          </ConfirmButton>
         </DashboardModal.Actions>
       </DashboardModal.Content>
     </DashboardModal>

src/discounts/components/VoucherCodesDatagrid/types.ts

@@ -193,7 +193,7 @@ const VoucherCreatePage = ({
     });
   };
 
-  const handleDeleteVoucherCodes = () => {
+  const handleDeleteVoucherCodes = async () => {
     clearRowSelection();
     set({
       codes: data.codes.filter(({ code }) => !selectedRowIds.includes(code)),
@@ -283,6 +283,7 @@ const VoucherCreatePage = ({
             <VoucherCodes
               codes={paginatedCodes}
               onDeleteCodes={handleDeleteVoucherCodes}
+              deleteCodesTransitionState="default"
               onMultiCodesGenerate={handleGenerateMultipleCodes}
               onSelectVoucherCodesIds={setSelectedVoucherCodesIds}
               onSettingsChange={onSettingsChange}

src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx

@@ -128,7 +128,8 @@ interface VoucherDetailsPageProps
   openChannelsModal: () => void;
   onMultipleVoucherCodesGenerate: (data: GenerateMultipleVoucherCodeFormData) => void;
   onCustomVoucherCodeGenerate: (code: string) => void;
-  onDeleteVoucherCodes: () => void;
+  deleteVoucherCodesTransitionState: ConfirmButtonTransitionState;
+  onDeleteVoucherCodes: () => Promise<void>;
   onVoucherCodesSettingsChange: UseListSettings["updateListSettings"];
   voucherCodesPagination: LocalPagination;
   voucherCodesSettings: UseListSettings["settings"];
@@ -164,6 +165,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   onRemove,
   onMultipleVoucherCodesGenerate,
   onCustomVoucherCodeGenerate,
+  deleteVoucherCodesTransitionState,
   onDeleteVoucherCodes,
   onSubmit,
   toggle,
@@ -288,6 +290,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                 selectedCodesIds={selectedVoucherCodesIds}
                 onSelectVoucherCodesIds={onSelectVoucherCodesIds}
                 onDeleteCodes={onDeleteVoucherCodes}
+                deleteCodesTransitionState={deleteVoucherCodesTransitionState}
                 loading={voucherCodesLoading}
                 onMultiCodesGenerate={codes => {
                   triggerChange();