Merge branch 'main' into merx-1351-fix-category-description

.changeset/stale-swans-serve.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now close order manual transaction modal by clicking the close button

src/components/Modal/Close.tsx

@@ -4,7 +4,13 @@ import React from "react";
 export const Close = ({ onClose, ...rest }: PropsWithBox<{ onClose: () => void }>) => {
   return (
     <Modal.Close {...rest}>
-      <Button icon={<CloseIcon />} size="small" variant="tertiary" onClick={onClose} />
+      <Button
+        data-test-id="close-button"
+        icon={<CloseIcon />}
+        size="small"
+        variant="tertiary"
+        onClick={onClose}
+      />
     </Modal.Close>
   );
 };

src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.test.tsx

@@ -0,0 +1,41 @@
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import { OrderManualTransactionDialog } from "./OrderManualTransactionDialog";
+
+jest.mock("react-intl", () => ({
+  useIntl: jest.fn(() => ({
+    formatMessage: jest.fn(x => x.defaultMessage),
+  })),
+  defineMessages: jest.fn(x => x),
+  FormattedMessage: ({ defaultMessage }: { defaultMessage: string }) => <>{defaultMessage}</>,
+}));
+
+describe("OrderManualTransactionDialog", () => {
+  it("should call onClose when click in close button", async () => {
+    // Arrange
+    const onClose = jest.fn();
+
+    render(
+      <OrderManualTransactionDialog
+        error={undefined}
+        dialogProps={{
+          open: true,
+          onClose,
+        }}
+        submitState="default"
+        currency="USD"
+        onAddTransaction={jest.fn()}
+      />,
+    );
+
+    // Act
+    await act(async () => {
+      await userEvent.click(screen.getByTestId("close-button"));
+    });
+
+    // Assert
+    expect(onClose).toHaveBeenCalled();
+  });
+});

src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx

@@ -25,7 +25,7 @@ export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialog
 
   return (
     <OrderManualTransactionForm {...props}>
-      <DashboardModal {...dialogProps}>
+      <DashboardModal {...dialogProps} onChange={onClose}>
         <DashboardModal.Content size="xs">
           <DashboardModal.Header>
             <FormattedMessage {...manualTransactionMessages.dialogTitle} />