Replace ConfirmButton from old macaw (#3647)

* New ConfirmButton component

* Update macaw ui

* Remove old confim button

* New confirm button

* Replace all place with new confirm button

* Remove ConfirmButtonTransitionState use from mcaw

* Does not change button width when showing loader and success state

* Test ConfirmButton

* Remove story, update tests

* WIP change pull_request to push for chromatic

* Revert "WIP change pull_request to push for chromatic"

This reverts commit 8f0909bf54f185898a7f1d236f072d6544fd5d86.

* Add comments

* Remove css prop from DialogTable

* Make confirm button larger in order send refund

src/apps/components/AppActivateDialog/AppActivateDialog.tsx

@@ -1,8 +1,8 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { buttonMessages } from "@dashboard/intl";
 import { getStringOrPlaceholder } from "@dashboard/misc";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx

@@ -1,8 +1,8 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { buttonMessages } from "@dashboard/intl";
 import { getStringOrPlaceholder } from "@dashboard/misc";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx

@@ -1,7 +1,7 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { getStringOrPlaceholder } from "@dashboard/misc";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.tsx

@@ -1,7 +1,7 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { getStringOrPlaceholder } from "@dashboard/misc";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/attributes/components/AttributePage/AttributePage.tsx

@@ -2,6 +2,7 @@ import { attributeListUrl } from "@dashboard/attributes/urls";
 import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@dashboard/attributes/utils/data";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata/Metadata";
@@ -23,7 +24,6 @@ import { maybe } from "@dashboard/misc";
 import { ListSettings, ReorderAction } from "@dashboard/types";
 import { mapEdgesToItems, mapMetadataItemToInput } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 import slugify from "slugify";

src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -1,6 +1,9 @@
 import { getAttributeValueErrorMessage } from "@dashboard/attributes/errors";
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import {
   AttributeErrorFragment,
@@ -16,7 +19,6 @@ import {
   DialogTitle,
   TextField,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -1,12 +1,12 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
 import { SeoForm } from "@dashboard/components/SeoForm";
 import { ProductErrorFragment } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -7,6 +7,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Button } from "@dashboard/components/Button";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata/Metadata";
 import Savebar from "@dashboard/components/Savebar";
@@ -16,7 +17,6 @@ import { CategoryDetailsQuery, ProductErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { Card } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { sprinkles } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/channels/components/ChannelDeleteDialog/ChannelDeleteDialog.tsx

@@ -1,4 +1,5 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import {
   Choices,
   SingleSelectField,
@@ -6,7 +7,6 @@ import {
 import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { buttonMessages } from "@dashboard/intl";
 import { Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 

src/channels/components/ChannelPickerDialog/ChannelPickerDialog.tsx

@@ -1,10 +1,11 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { Choice } from "@dashboard/components/SingleSelectField";
 import useChoiceSearch from "@dashboard/hooks/useChoiceSearch";
 import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
 import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { MenuItem } from "@material-ui/core";
-import { Autocomplete, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { Autocomplete } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx

@@ -5,6 +5,7 @@ import { channelsListUrl } from "@dashboard/channels/urls";
 import { validateChannelFormData } from "@dashboard/channels/validation";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
@@ -30,7 +31,6 @@ import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
 import createSingleAutocompleteSelectHandler from "@dashboard/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { mapCountriesToChoices } from "@dashboard/utils/maps";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React, { useState } from "react";
 import { useIntl } from "react-intl";
 

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -3,6 +3,7 @@ import { collectionListUrl } from "@dashboard/collections/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
@@ -14,7 +15,6 @@ import {
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -3,6 +3,7 @@ import { collectionListUrl } from "@dashboard/collections/urls";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata/Metadata";
 import Savebar from "@dashboard/components/Savebar";
@@ -15,7 +16,6 @@ import {
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/components/ActionDialog/ActionDialog.tsx

@@ -1,6 +1,6 @@
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogProps } from "@dashboard/types";
 import { Dialog, DialogContent, DialogTitle } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 
 import DialogButtons from "./DialogButtons";

src/components/ActionDialog/DialogButtons.tsx

@@ -1,11 +1,11 @@
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { buttonMessages } from "@dashboard/intl";
 import { DialogActions } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import BackButton from "../BackButton";
-import ConfirmButton from "../ConfirmButton";
+import { ConfirmButton } from "../ConfirmButton/ConfirmButton";
 import { ActionDialogVariant } from "./types";
 
 interface DialogButtonsProps {
@@ -46,7 +46,7 @@ const DialogButtons: React.FC<DialogButtonsProps> = props => {
           disabled={disabled}
           transitionState={confirmButtonState}
           onClick={onConfirm}
-          error={variant === "delete"}
+          variant={variant === "delete" ? "error" : "primary"}
           data-test-id="submit"
         >
           {confirmButtonLabel ||

src/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -1,5 +1,8 @@
 import Checkbox from "@dashboard/components/Checkbox";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { AvailableAttributeFragment } from "@dashboard/graphql";
@@ -23,7 +26,7 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import clsx from "clsx";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";

src/components/AssignContainerDialog/AssignContainerDialog.tsx

@@ -1,3 +1,4 @@
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import useSearchQuery from "@dashboard/hooks/useSearchQuery";
@@ -13,13 +14,12 @@ import {
   TableCell,
   TextField,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 
 import BackButton from "../BackButton";
 import Checkbox from "../Checkbox";
-import ConfirmButton from "../ConfirmButton";
+import { ConfirmButton } from "../ConfirmButton";
 import { useStyles } from "./styles";
 
 export interface AssignContainerDialogFormData {

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -1,4 +1,7 @@
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import TableCellAvatar from "@dashboard/components/TableCellAvatar";
 import TableRowLink from "@dashboard/components/TableRowLink";
@@ -18,7 +21,6 @@ import {
   TableCell,
   TextField,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React, { useEffect } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";

src/components/AssignVariantDialog/AssignVariantDialog.tsx

@@ -1,4 +1,7 @@
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Money from "@dashboard/components/Money";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import TableCellAvatar from "@dashboard/components/TableCellAvatar";
@@ -19,7 +22,6 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";

src/components/AttributeUnassignDialog/AttributeUnassignDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/components/BackButton.tsx

@@ -1,6 +1,5 @@
-import { Button } from "@dashboard/components/Button";
 import { buttonMessages } from "@dashboard/intl";
-import { ButtonProps } from "@saleor/macaw-ui";
+import { Button, ButtonProps } from "@saleor/macaw-ui/next";
 import React, { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -9,7 +8,7 @@ interface BackButtonProps extends ButtonProps {
 }
 
 const BackButton: React.FC<BackButtonProps> = ({ children, ...props }) => (
-  <Button data-test-id="back" variant="secondary" color="text" {...props}>
+  <Button data-test-id="back" variant="secondary" {...props}>
     {children ?? <FormattedMessage {...buttonMessages.back} />}
   </Button>
 );

src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -16,7 +16,9 @@ export interface BulkAttributeUnassignDialogProps {
   onConfirm: () => void;
 }
 
-const BulkAttributeUnassignDialog: React.FC<BulkAttributeUnassignDialogProps> = ({
+const BulkAttributeUnassignDialog: React.FC<
+  BulkAttributeUnassignDialogProps
+> = ({
   title,
   attributeQuantity,
   confirmButtonState,

src/components/ChannelsAvailabilityDialog/ChannelsAvailabilityDialog.tsx

@@ -1,6 +1,6 @@
 import { Channel } from "@dashboard/channels/utils";
 import ActionDialog from "@dashboard/components/ActionDialog";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import React from "react";
 
 import ChannelsAvailabilityDialogChannelsList from "../ChannelsAvailabilityDialogChannelsList";
@@ -23,7 +23,9 @@ export interface ChannelsAvailabilityDialogProps {
   toggleAll?: (items: Channel[], selected: number) => void;
 }
 
-export const ChannelsAvailabilityDialog: React.FC<ChannelsAvailabilityDialogProps> = ({
+export const ChannelsAvailabilityDialog: React.FC<
+  ChannelsAvailabilityDialogProps
+> = ({
   isSelected,
   channels,
   confirmButtonState,
@@ -37,9 +39,8 @@ export const ChannelsAvailabilityDialog: React.FC<ChannelsAvailabilityDialogProp
   title,
   toggleAll,
 }) => {
-  const { query, onQueryChange, filteredChannels } = useChannelsSearch(
+  const { query, onQueryChange, filteredChannels } =
-    channels,
+    useChannelsSearch(channels);
-  );
   const hasChannels = channels.length > 0;
 
   const handleToggleAll = () => toggleAll(channels, selected);

src/components/ConfirmButton.tsx

@@ -1,33 +0,0 @@
-import { buttonMessages, commonMessages } from "@dashboard/intl";
-import {
-  ConfirmButton as MacawConfirmButton,
-  ConfirmButtonLabels,
-  ConfirmButtonProps as MacawConfirmButtonProps,
-} from "@saleor/macaw-ui";
-import React from "react";
-import { useIntl } from "react-intl";
-
-export interface ConfirmButtonProps
-  extends Omit<MacawConfirmButtonProps, "labels"> {
-  labels?: Partial<ConfirmButtonLabels>;
-}
-
-export const ConfirmButton: React.FC<ConfirmButtonProps> = ({
-  labels = {},
-  ...rest
-}) => {
-  const intl = useIntl();
-
-  const defaultLabels: ConfirmButtonLabels = {
-    confirm: intl.formatMessage(buttonMessages.save),
-    error: intl.formatMessage(commonMessages.error),
-  };
-  const componentLabels: ConfirmButtonLabels = {
-    ...defaultLabels,
-    ...labels,
-  };
-
-  return <MacawConfirmButton labels={componentLabels} {...rest} />;
-};
-ConfirmButton.displayName = "ConfirmButton";
-export default ConfirmButton;

src/components/ConfirmButton/ConfirmButton.test.tsx

@@ -0,0 +1,132 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
+import React from "react";
+
+import { ConfirmButton } from "./ConfirmButton";
+
+jest.mock("react-intl", () => ({
+  useIntl: jest.fn(() => ({
+    formatMessage: jest.fn(x => x.defaultMessage),
+  })),
+  defineMessages: jest.fn(x => x),
+  FormattedMessage: ({ defaultMessage }) => <>{defaultMessage}</>,
+}));
+
+describe("ConfirmButton", () => {
+  it("should render a button with confirm label", () => {
+    render(
+      <ConfirmButton
+        transitionState="default"
+        labels={{ confirm: "Confirm" }}
+      />,
+    );
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toHaveTextContent("Confirm");
+  });
+
+  it("should render a button with error label", () => {
+    render(
+      <ConfirmButton
+        noTransition
+        transitionState="error"
+        labels={{ confirm: "Confirm", error: "Error" }}
+      />,
+    );
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toHaveTextContent("Error");
+  });
+
+  it("should render a button with loading spinner", () => {
+    render(<ConfirmButton noTransition transitionState="loading" />);
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByTestId("button-progress")).toBeInTheDocument();
+  });
+
+  it("should render a button with success", () => {
+    render(<ConfirmButton noTransition transitionState="success" />);
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByTestId("button-success")).toBeInTheDocument();
+  });
+
+  it("should call onClick when clicked", () => {
+    const onClick = jest.fn();
+    render(<ConfirmButton transitionState="default" onClick={onClick} />);
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it("should render confirm label after success state", async () => {
+    const { rerender } = render(
+      <ConfirmButton
+        transitionState="loading"
+        labels={{
+          confirm: "Confirm",
+          error: "Error",
+        }}
+      />,
+    );
+    expect(screen.getByTestId("button-progress")).toBeInTheDocument();
+
+    rerender(
+      <ConfirmButton
+        transitionState="success"
+        labels={{
+          confirm: "Confirm",
+          error: "Error",
+        }}
+      />,
+    );
+
+    expect(screen.getByTestId("button-success")).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(
+      () => screen.getByTestId("button-success"),
+      {
+        timeout: 5000,
+      },
+    );
+
+    expect(screen.queryByTestId("button-success")).not.toBeInTheDocument();
+  });
+
+  it("should render error label after error state", async () => {
+    const { rerender } = render(
+      <ConfirmButton
+        transitionState="loading"
+        labels={{
+          confirm: "Confirm",
+          error: "Error",
+        }}
+      />,
+    );
+    expect(screen.getByTestId("button-progress")).toBeInTheDocument();
+    expect(screen.queryByText(/error/i)).not.toBeInTheDocument();
+
+    rerender(
+      <ConfirmButton
+        transitionState="error"
+        labels={{
+          confirm: "Confirm",
+          error: "Error",
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/error/i)).toBeInTheDocument();
+    });
+
+    expect(screen.queryByTestId("button-progress")).not.toBeInTheDocument();
+  });
+});

src/components/ConfirmButton/ConfirmButton.tsx

@@ -0,0 +1,153 @@
+import { buttonMessages, commonMessages } from "@dashboard/intl";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import CheckIcon from "@material-ui/icons/Check";
+import { Button, ButtonProps, sprinkles } from "@saleor/macaw-ui/next";
+import React, { useEffect, useRef, useState } from "react";
+import { useIntl } from "react-intl";
+
+const DEFAULT_NOTIFICATION_SHOW_TIME = 3000;
+
+export type ConfirmButtonTransitionState =
+  | "default"
+  | "loading"
+  | "success"
+  | "error";
+
+export type ConfirmButtonLabels = Partial<Record<"confirm" | "error", string>>;
+
+export interface ConfirmButtonProps extends ButtonProps {
+  labels?: ConfirmButtonLabels;
+  noTransition?: boolean;
+  transitionState: ConfirmButtonTransitionState;
+  onTransitionToDefault?: () => void;
+}
+
+// Here you can find original implementation
+// https://github.com/saleor/macaw-ui/blob/canary/legacy/src/ConfirmButton/ConfirmButton.tsx
+
+export const ConfirmButton = ({
+  labels,
+  noTransition,
+  transitionState,
+  onTransitionToDefault,
+  onClick,
+  disabled,
+  children,
+  variant,
+  ...props
+}: ConfirmButtonProps) => {
+  const intl = useIntl();
+  const [displayCompletedActionState, setDisplayCompletedActionState] =
+    useState(false);
+  const timeout = useRef<number>();
+
+  const isCompleted = noTransition
+    ? transitionState !== "default"
+    : displayCompletedActionState;
+
+  const isError = transitionState === "error" && isCompleted;
+
+  const defaultLabels: ConfirmButtonLabels = {
+    confirm: intl.formatMessage(buttonMessages.save),
+    error: intl.formatMessage(commonMessages.error),
+  };
+
+  const componentLabels: ConfirmButtonLabels = {
+    ...defaultLabels,
+    ...labels,
+  };
+
+  useEffect(() => {
+    if (!noTransition && transitionState === "loading") {
+      setDisplayCompletedActionState(true);
+    }
+  }, [transitionState, noTransition]);
+
+  useEffect(() => {
+    if (noTransition) {
+      return;
+    }
+
+    if (
+      (["error", "success"] as ConfirmButtonTransitionState[]).includes(
+        transitionState,
+      )
+    ) {
+      timeout.current = setTimeout(() => {
+        setDisplayCompletedActionState(false);
+        if (onTransitionToDefault) {
+          onTransitionToDefault();
+        }
+      }, DEFAULT_NOTIFICATION_SHOW_TIME) as unknown as number;
+    } else if (transitionState === "loading") {
+      clearTimeout(timeout.current);
+    }
+
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, [noTransition, transitionState, onTransitionToDefault]);
+
+  const renderContent = () => {
+    if (transitionState === "loading") {
+      return (
+        // TODO: Replace with new component when it will be ready https://github.com/saleor/macaw-ui/issues/443
+        <CircularProgress
+          size={20}
+          color="inherit"
+          data-test-id="button-progress"
+          className={sprinkles({
+            position: "absolute",
+          })}
+        />
+      );
+    }
+
+    if (transitionState === "success" && isCompleted) {
+      return (
+        // TODO: Replace with new component when it will be ready https://github.com/saleor/macaw-ui/issues/443
+        <CheckIcon
+          data-test-id="button-success"
+          className={sprinkles({
+            position: "absolute",
+          })}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  const getByLabelText = () => {
+    if (isError) {
+      return componentLabels.error;
+    }
+
+    return children || componentLabels.confirm;
+  };
+
+  return (
+    <Button
+      {...props}
+      variant={isError ? "error" : variant}
+      disabled={!isCompleted && disabled}
+      onClick={transitionState === "loading" ? undefined : onClick}
+      data-test-state={isCompleted ? transitionState : "default"}
+    >
+      {renderContent()}
+      <span
+        className={sprinkles({
+          opacity:
+            ["loading", "success"].includes(transitionState) && isCompleted
+              ? "0"
+              : "1",
+          transition: "ease",
+        })}
+      >
+        {getByLabelText()}
+      </span>
+    </Button>
+  );
+};

src/components/ConfirmButton/index.ts

@@ -0,0 +1 @@
+export * from "./ConfirmButton";

src/components/DeleteFilterTabDialog/DeleteFilterTabDialog.tsx

@@ -1,6 +1,6 @@
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { buttonMessages } from "@dashboard/intl";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx

@@ -1,3 +1,4 @@
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { buttonMessages } from "@dashboard/intl";
 import {
   Dialog,
@@ -6,12 +7,11 @@ import {
   DialogTitle,
   TextField,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import BackButton from "../BackButton";
-import ConfirmButton from "../ConfirmButton";
+import { ConfirmButton } from "../ConfirmButton";
 import Form from "../Form";
 
 export interface SaveFilterTabDialogFormData {

src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx

@@ -1,7 +1,7 @@
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { getById } from "@dashboard/misc";
 import ModalTitle from "@dashboard/orders/components/OrderDiscountCommonModal/ModalTitle";
 import { Card, CardContent, CircularProgress, Modal } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -87,8 +87,9 @@ function TypeDeleteWarningDialog<T extends TypeBaseData>({
 
   const singleItemSelectedId = typesToDelete[0];
 
-  const singleItemSelectedName = typesData.find(getById(singleItemSelectedId))
+  const singleItemSelectedName = typesData.find(
-    ?.name;
+    getById(singleItemSelectedId),
+  )?.name;
 
   return (
     <Modal open={isOpen}>

src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialogContent.tsx

@@ -1,5 +1,5 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
 import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { CardContent } from "@material-ui/core";

src/custom-apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx

@@ -1,5 +1,6 @@
 import AccountPermissions from "@dashboard/components/AccountPermissions";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
@@ -13,7 +14,6 @@ import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getAppErrorMessage from "@dashboard/utils/errors/app";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/custom-apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx

@@ -1,6 +1,7 @@
 import AccountPermissions from "@dashboard/components/AccountPermissions";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
@@ -16,7 +17,7 @@ import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getAppErrorMessage from "@dashboard/utils/errors/app";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import SVG from "react-inlinesvg";
 import { FormattedMessage, useIntl } from "react-intl";

src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx

@@ -1,7 +1,10 @@
 import BackButton from "@dashboard/components/BackButton";
 import { Button } from "@dashboard/components/Button";
 import CardSpacer from "@dashboard/components/CardSpacer";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { getApiUrl } from "@dashboard/config";
@@ -17,7 +20,6 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/custom-apps/components/TokenDeleteDialog/TokenDeleteDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/custom-apps/components/WebhookDeleteDialog/WebhookDeleteDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx

@@ -1,4 +1,5 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
@@ -20,7 +21,6 @@ import {
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import { parse, print } from "graphql";
 import React, { useEffect, useState } from "react";

src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx

@@ -1,7 +1,10 @@
 import AddressEdit from "@dashboard/components/AddressEdit";
 import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import {
   AccountErrorFragment,
@@ -21,7 +24,7 @@ import {
   DialogContent,
   DialogTitle,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx

@@ -1,6 +1,7 @@
 import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
@@ -16,7 +17,6 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import { extractMutationErrors } from "@dashboard/misc";
 import createSingleAutocompleteSelectHandler from "@dashboard/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { mapCountriesToChoices } from "@dashboard/utils/maps";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx

@@ -7,6 +7,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Backlink } from "@dashboard/components/Backlink";
 import CardMenu from "@dashboard/components/CardMenu/CardMenu";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata/Metadata";
@@ -29,7 +30,6 @@ import { sectionNames } from "@dashboard/intl";
 import { orderListUrl } from "@dashboard/orders/urls";
 import { mapEdgesToItems, mapMetadataItemToInput } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx

@@ -1,6 +1,9 @@
 import BackButton from "@dashboard/components/BackButton";
 import Checkbox from "@dashboard/components/Checkbox";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import Hr from "@dashboard/components/Hr";
@@ -19,7 +22,6 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { filter } from "fuzzaldrin";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/discounts/components/SaleCreatePage/SaleCreatePage.tsx

@@ -1,6 +1,7 @@
 import { validateSalePrice } from "@dashboard/channels/utils";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata, MetadataFormData } from "@dashboard/components/Metadata";
@@ -15,7 +16,6 @@ import {
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -2,6 +2,7 @@ import { ChannelSaleData, validateSalePrice } from "@dashboard/channels/utils";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata, MetadataFormData } from "@dashboard/components/Metadata";
@@ -24,7 +25,6 @@ import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { mapEdgesToItems, mapMetadataItemToInput } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { sprinkles } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";

src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx

@@ -1,6 +1,7 @@
 import { ChannelVoucherData } from "@dashboard/channels/utils";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata";
@@ -20,7 +21,6 @@ import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { validatePrice } from "@dashboard/products/utils/validation";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -2,6 +2,7 @@ import { ChannelVoucherData } from "@dashboard/channels/utils";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import CountryList from "@dashboard/components/CountryList";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
@@ -30,7 +31,6 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import { mapEdgesToItems, mapMetadataItemToInput } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
 import { Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialogForm.tsx

@@ -1,5 +1,6 @@
 import DialogButtons from "@dashboard/components/ActionDialog/DialogButtons";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import VerticalSpacer from "@dashboard/components/VerticalSpacer";
 import GiftCardTagInput from "@dashboard/giftCards/components/GiftCardTagInput";
 import {
@@ -14,7 +15,6 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx

@@ -1,5 +1,6 @@
 import DialogButtons from "@dashboard/components/ActionDialog/DialogButtons";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import VerticalSpacer from "@dashboard/components/VerticalSpacer";
 import GiftCardTagInput from "@dashboard/giftCards/components/GiftCardTagInput";
 import {
@@ -13,7 +14,6 @@ import { commonMessages } from "@dashboard/intl";
 import Label from "@dashboard/orders/components/OrderHistory/Label";
 import { getFormErrors } from "@dashboard/utils/errors";
 import { DialogContent, Divider, TextField } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React, { useState } from "react";
 import { useIntl } from "react-intl";
 

src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx

@@ -1,4 +1,4 @@
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
 import { Task } from "@dashboard/containers/BackgroundTasks/types";
 import {
   useExportGiftCardsMutation,

src/giftCards/GiftCardsList/GiftCardsListTable/GiftCardsListTableHeader/BulkEnableDisableSection.tsx

@@ -1,4 +1,4 @@
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
 import { IMessage } from "@dashboard/components/messages";
 import {
   useGiftCardBulkActivateMutation,
@@ -35,65 +35,61 @@ const BulkEnableDisableSection: React.FC = () => {
     .filter(getByIds(ids))
     .every(({ isActive }) => !isActive);
 
-  const [
+  const [activateGiftCards, activateGiftCardsOpts] =
-    activateGiftCards,
+    useGiftCardBulkActivateMutation({
-    activateGiftCardsOpts,
+      onCompleted: data => {
-  ] = useGiftCardBulkActivateMutation({
+        const { errors, count } = data?.giftCardBulkActivate;
-    onCompleted: data => {
-      const { errors, count } = data?.giftCardBulkActivate;
 
-      const notifierData: IMessage = !!errors?.length
+        const notifierData: IMessage = !!errors?.length
-        ? {
+          ? {
-            status: "error",
+              status: "error",
-            text: intl.formatMessage(messages.errorActivateAlertText, {
+              text: intl.formatMessage(messages.errorActivateAlertText, {
-              count,
+                count,
-            }),
+              }),
-          }
+            }
-        : {
+          : {
-            status: "success",
+              status: "success",
-            text: intl.formatMessage(messages.successActivateAlertText, {
+              text: intl.formatMessage(messages.successActivateAlertText, {
-              count,
+                count,
-            }),
+              }),
-          };
+            };
 
-      notify(notifierData);
+        notify(notifierData);
 
-      if (!errors.length) {
+        if (!errors.length) {
-        reset();
+          reset();
-      }
+        }
-    },
+      },
-    refetchQueries: [GIFT_CARD_LIST_QUERY],
+      refetchQueries: [GIFT_CARD_LIST_QUERY],
-  });
+    });
 
-  const [
+  const [deactivateGiftCards, deactivateGiftCardsOpts] =
-    deactivateGiftCards,
+    useGiftCardBulkDeactivateMutation({
-    deactivateGiftCardsOpts,
+      onCompleted: data => {
-  ] = useGiftCardBulkDeactivateMutation({
+        const { errors, count } = data?.giftCardBulkDeactivate;
-    onCompleted: data => {
-      const { errors, count } = data?.giftCardBulkDeactivate;
 
-      const notifierData: IMessage = !!errors?.length
+        const notifierData: IMessage = !!errors?.length
-        ? {
+          ? {
-            status: "error",
+              status: "error",
-            text: intl.formatMessage(messages.errorDeactivateAlertText, {
+              text: intl.formatMessage(messages.errorDeactivateAlertText, {
-              count,
+                count,
-            }),
+              }),
-          }
+            }
-        : {
+          : {
-            status: "success",
+              status: "success",
-            text: intl.formatMessage(messages.successDeactivateAlertText, {
+              text: intl.formatMessage(messages.successDeactivateAlertText, {
-              count,
+                count,
-            }),
+              }),
-          };
+            };
 
-      notify(notifierData);
+        notify(notifierData);
 
-      if (!errors.length) {
+        if (!errors.length) {
-        reset();
+          reset();
-      }
+        }
-    },
+      },
-    refetchQueries: [GIFT_CARD_LIST_QUERY],
+      refetchQueries: [GIFT_CARD_LIST_QUERY],
-  });
+    });
 
   const handleActivateGiftCards = () =>
     activateGiftCards({ variables: { ids } });

src/misc.ts

@@ -7,12 +7,13 @@ import {
   PaymentChargeStatusEnum,
 } from "@dashboard/graphql";
 import { Node, SlugNode } from "@dashboard/types";
-import { ConfirmButtonTransitionState, ThemeType } from "@saleor/macaw-ui";
+import { ThemeType } from "@saleor/macaw-ui";
 import { DefaultTheme, ThemeTokensValues } from "@saleor/macaw-ui/next";
 import uniqBy from "lodash/uniqBy";
 import moment from "moment-timezone";
 import { IntlShape } from "react-intl";
 
+import { ConfirmButtonTransitionState } from "./components/ConfirmButton";
 import { MultiAutocompleteChoiceType } from "./components/MultiAutocompleteSelectField";
 import { AddressType, AddressTypeInput } from "./customers/types";
 import {

src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx

@@ -1,5 +1,8 @@
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { MenuErrorFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
@@ -12,7 +15,6 @@ import {
   DialogTitle,
   TextField,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx

@@ -1,5 +1,6 @@
 import { Backlink } from "@dashboard/components/Backlink";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
@@ -10,7 +11,6 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";
 import { menuListUrl } from "@dashboard/navigation/urls";
 import { Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/navigation/components/MenuItemDialog/MenuItemDialog.tsx

@@ -1,6 +1,9 @@
 import AutocompleteSelectMenu from "@dashboard/components/AutocompleteSelectMenu";
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import {
   MenuErrorFragment,
@@ -24,7 +27,6 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import isUrl from "is-url";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/orders/components/OrderAddressFields/OrderAddressFields.tsx

@@ -1,3 +1,4 @@
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import {
   AddressFragment,
   CustomerAddressesQuery,
@@ -6,7 +7,6 @@ import {
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { transformAddressToForm } from "@dashboard/misc";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 
 import OrderCustomerAddressesEditDialog, {

src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx

@@ -1,5 +1,8 @@
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
@@ -12,7 +15,6 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx

@@ -1,5 +1,8 @@
 import Checkbox from "@dashboard/components/Checkbox";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import VerticalSpacer from "@dashboard/components/VerticalSpacer";
 import { AddressTypeInput } from "@dashboard/customers/types";
@@ -25,7 +28,7 @@ import {
   FormControlLabel,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState, DialogHeader } from "@saleor/macaw-ui";
+import { DialogHeader } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
 

src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesSearch.tsx

@@ -1,4 +1,7 @@
-import { ConfirmButton } from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import VerticalSpacer from "@dashboard/components/VerticalSpacer";
 import CustomerAddressChoiceCard from "@dashboard/customers/components/CustomerAddressChoiceCard";
 import { AddressFragment, AddressTypeEnum } from "@dashboard/graphql";
@@ -13,11 +16,7 @@ import {
   InputAdornment,
   TextField,
 } from "@material-ui/core";
-import {
+import { Button, SearchIcon } from "@saleor/macaw-ui";
-  Button,
-  ConfirmButtonTransitionState,
-  SearchIcon,
-} from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx

@@ -1,4 +1,4 @@
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { buttonMessages } from "@dashboard/intl";
 import {

src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx

@@ -6,6 +6,7 @@ import {
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardMenu from "@dashboard/components/CardMenu";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { useDevModeContext } from "@dashboard/components/DevModePanel/hooks";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
@@ -22,7 +23,6 @@ import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { defaultGraphiQLQuery } from "@dashboard/orders/queries";
 import { orderListUrl } from "@dashboard/orders/urls";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx

@@ -1,6 +1,9 @@
 import DialogButtons from "@dashboard/components/ActionDialog/DialogButtons";
 import CardSpacer from "@dashboard/components/CardSpacer";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import PriceField from "@dashboard/components/PriceField";
 import RadioGroupField from "@dashboard/components/RadioGroupField";
 import { DiscountValueTypeEnum, MoneyFragment } from "@dashboard/graphql";
@@ -8,7 +11,7 @@ import { useUpdateEffect } from "@dashboard/hooks/useUpdateEffect";
 import { buttonMessages } from "@dashboard/intl";
 import { toFixed } from "@dashboard/utils/toFixed";
 import { Card, CardContent, TextField, Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import { defineMessages, useIntl } from "react-intl";
 

src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx

@@ -1,10 +1,10 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderDraftPage/OrderDraftPage.tsx

@@ -1,6 +1,7 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardMenu from "@dashboard/components/CardMenu";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DateTime } from "@dashboard/components/Date";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
@@ -18,7 +19,6 @@ import OrderChannelSectionCard from "@dashboard/orders/components/OrderChannelSe
 import { orderDraftListUrl } from "@dashboard/orders/urls";
 import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
 import { Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -1,6 +1,7 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
@@ -40,7 +41,6 @@ import {
   TableCell,
   TableHead,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/orders/components/OrderFulfillStockExceededDialog/OrderFulfillStockExceededDialog.tsx

@@ -1,5 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
 import { CardSpacer } from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import {
@@ -13,7 +14,6 @@ import {
   OrderFulfillStockFormsetData,
 } from "@dashboard/orders/utils/data";
 import { TableBody, TableCell, TableHead, Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -30,15 +30,11 @@ export interface OrderFulfillStockExceededDialogProps {
   onClose();
 }
 
-const OrderFulfillStockExceededDialog: React.FC<OrderFulfillStockExceededDialogProps> = props => {
+const OrderFulfillStockExceededDialog: React.FC<
-  const {
+  OrderFulfillStockExceededDialogProps
-    lines,
+> = props => {
-    open,
+  const { lines, open, formsetData, confirmButtonState, onClose, onSubmit } =
-    formsetData,
+    props;
-    confirmButtonState,
-    onClose,
-    onSubmit,
-  } = props;
 
   const intl = useIntl();
   const classes = useStyles(props);

src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx

@@ -1,5 +1,8 @@
 import { Button } from "@dashboard/components/Button";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
@@ -13,7 +16,6 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx

@@ -1,5 +1,8 @@
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import SingleAutocompleteSelectField from "@dashboard/components/SingleAutocompleteSelectField";
@@ -14,7 +17,7 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx

@@ -1,5 +1,8 @@
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { OrderErrorFragment } from "@dashboard/graphql";
@@ -15,7 +18,6 @@ import {
   DialogTitle,
   TextField,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderGrantRefundPage/OrderGrantRefundPage.tsx

@@ -1,11 +1,11 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Skeleton from "@dashboard/components/Skeleton";
 import { OrderDetailsGrantRefundFragment } from "@dashboard/graphql";
 import { orderUrl } from "@dashboard/orders/urls";
 import { Card, CardContent, TextField, Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx

@@ -1,6 +1,9 @@
 import CardTitle from "@dashboard/components/CardTitle";
 import Checkbox from "@dashboard/components/Checkbox";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import { formatMoneyAmount } from "@dashboard/components/Money";
 import PriceField from "@dashboard/components/PriceField";
 import Skeleton from "@dashboard/components/Skeleton";
@@ -9,7 +12,6 @@ import useLocale from "@dashboard/hooks/useLocale";
 import { buttonMessages } from "@dashboard/intl";
 import { Card, CardContent, Typography } from "@material-ui/core";
 import { useId } from "@reach/auto-id";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Button } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx

@@ -1,5 +1,8 @@
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { InvoiceErrorFragment, InvoiceFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
@@ -12,7 +15,6 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderManualTransactionForm/OrderManualTransactionForm.tsx

@@ -1,4 +1,4 @@
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import React from "react";
 
 import { ManualTransactionContext } from "./context";

src/orders/components/OrderManualTransactionForm/components/SubmitButton.tsx

@@ -1,4 +1,5 @@
-import ConfirmButton, {
+import {
+  ConfirmButton,
   ConfirmButtonProps,
 } from "@dashboard/components/ConfirmButton";
 import React from "react";
@@ -13,6 +14,7 @@ export const SubmitButton: React.FC<
   return (
     <ConfirmButton
       {...props}
+      size="large"
       type="submit"
       transitionState={submitState}
       disabled={!amount || disabled}

src/orders/components/OrderManualTransactionForm/hooks.test.ts

@@ -1,4 +1,4 @@
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { act, renderHook } from "@testing-library/react-hooks";
 import { ChangeEvent } from "react";
 

src/orders/components/OrderManualTransactionForm/hooks.ts

@@ -1,4 +1,4 @@
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import React from "react";
 
 interface ManualRefundHookProps {

src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx

@@ -1,10 +1,10 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
 import { DialogContentText, TextField } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx

@@ -1,5 +1,8 @@
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { OrderErrorFragment } from "@dashboard/graphql";
@@ -14,7 +17,6 @@ import {
   DialogTitle,
   TextField,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx

@@ -1,5 +1,8 @@
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
@@ -11,7 +14,6 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx

@@ -1,6 +1,9 @@
 import BackButton from "@dashboard/components/BackButton";
 import Checkbox from "@dashboard/components/Checkbox";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import TableCellAvatar from "@dashboard/components/TableCellAvatar";
@@ -28,7 +31,6 @@ import {
   TextField,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";

src/orders/components/OrderReturnPage/OrderReturnPage.tsx

@@ -1,12 +1,12 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { renderCollection } from "@dashboard/misc";
 import { orderHasTransactions } from "@dashboard/orders/types";
 import { orderUrl } from "@dashboard/orders/urls";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/orders/components/OrderReturnPage/components/SubmitCard/SubmitCard.tsx

@@ -1,7 +1,9 @@
 import CardTitle from "@dashboard/components/CardTitle";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import { Card, CardContent, Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderSendRefundPage/OrderSendRefund.tsx

@@ -1,6 +1,7 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import CardTitle from "@dashboard/components/CardTitle";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Hr from "@dashboard/components/Hr";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Skeleton from "@dashboard/components/Skeleton";
@@ -10,7 +11,6 @@ import {
 } from "@dashboard/graphql";
 import { orderUrl } from "@dashboard/orders/urls";
 import { Card, CardContent } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/orders/components/OrderSendRefundPage/components/TransactionCard.tsx

@@ -1,4 +1,4 @@
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
 import PriceField from "@dashboard/components/PriceField";
 import {
   OrderDetailsDocument,

src/orders/components/OrderSendRefundPage/styles.ts

@@ -73,6 +73,7 @@ export const useManualRefundCardStyles = makeStyles(
       gap: theme.spacing(1),
       width: "100%",
       flexDirection: "column",
+      alignItems: "center",
       [theme.breakpoints.up("sm")]: {
         flexDirection: "row",
         flexWrap: "wrap",

src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx

@@ -1,4 +1,5 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
 import {
@@ -8,7 +9,6 @@ import {
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { orderListUrl } from "@dashboard/orders/urls";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";

src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx

@@ -1,5 +1,8 @@
 import BackButton from "@dashboard/components/BackButton";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import Money from "@dashboard/components/Money";
@@ -17,7 +20,7 @@ import {
   DialogTitle,
   Typography,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx

@@ -1,4 +1,7 @@
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import { TransactionActionEnum } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
 import {
@@ -8,7 +11,7 @@ import {
   DialogProps,
   DialogTitle,
 } from "@material-ui/core";
-import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { Button } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/pageTypes/components/PageTypeBulkDeleteDialog/PageTypeBulkDeleteDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx

@@ -1,4 +1,5 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
 import Hr from "@dashboard/components/Hr";
@@ -11,7 +12,7 @@ import { commonMessages } from "@dashboard/intl";
 import { pageTypeListUrl } from "@dashboard/pageTypes/urls";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
 import { Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import { sprinkles } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx

@@ -1,4 +1,5 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import Grid from "@dashboard/components/Grid";
 import Hr from "@dashboard/components/Hr";
@@ -19,7 +20,7 @@ import { ListActions, ReorderEvent } from "@dashboard/types";
 import { mapMetadataItemToInput } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
 import { Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import { Box, sprinkles } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/pages/components/PageDetailsPage/PageDetailsPage.tsx

@@ -6,6 +6,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
 import { AttributeInput, Attributes } from "@dashboard/components/Attributes";
 import CardSpacer from "@dashboard/components/CardSpacer";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata";
 import Savebar from "@dashboard/components/Savebar";
@@ -25,7 +26,6 @@ import useNavigator from "@dashboard/hooks/useNavigator";
 import { pageListUrl } from "@dashboard/pages/urls";
 import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
 import { mapNodeToChoice } from "@dashboard/utils/maps";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx

@@ -1,11 +1,11 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import SingleAutocompleteSelectField, {
   SingleAutocompleteChoiceType,
 } from "@dashboard/components/SingleAutocompleteSelectField";
 import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
 import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { FetchMoreProps } from "@dashboard/types";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx

@@ -1,6 +1,9 @@
 import BackButton from "@dashboard/components/BackButton";
 import CardSpacer from "@dashboard/components/CardSpacer";
-import ConfirmButton from "@dashboard/components/ConfirmButton";
+import {
+  ConfirmButton,
+  ConfirmButtonTransitionState,
+} from "@dashboard/components/ConfirmButton";
 import ResponsiveTable from "@dashboard/components/ResponsiveTable";
 import Skeleton from "@dashboard/components/Skeleton";
 import TableRowLink from "@dashboard/components/TableRowLink";
@@ -33,7 +36,7 @@ import {
   TableCell,
   TextField,
 } from "@material-ui/core";
-import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
+import { makeStyles } from "@saleor/macaw-ui";
 import { Box, Text } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";

src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx

@@ -1,6 +1,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DialogContentText } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx

@@ -1,6 +1,7 @@
 import AccountPermissions from "@dashboard/components/AccountPermissions";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import { Backlink } from "@dashboard/components/Backlink";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import Savebar from "@dashboard/components/Savebar";
@@ -14,7 +15,6 @@ import { sectionNames } from "@dashboard/intl";
 import { permissionGroupListUrl } from "@dashboard/permissionGroups/urls";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getPermissionGroupErrorMessage from "@dashboard/utils/errors/permissionGroups";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 

src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx

@@ -1,11 +1,11 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import {
   PermissionGroupErrorCode,
   PermissionGroupErrorFragment,
 } from "@dashboard/graphql";
 import getPermissionGroupErrorMessage from "@dashboard/utils/errors/permissionGroups";
 import { DialogContentText, Typography } from "@material-ui/core";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 

src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx

@@ -1,5 +1,6 @@
 import AccountPermissions from "@dashboard/components/AccountPermissions";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
+import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
@@ -23,7 +24,6 @@ import {
 import { ListActions, SortPage } from "@dashboard/types";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getPermissionGroupErrorMessage from "@dashboard/utils/errors/permissionGroups";
-import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";