From 616ad52bcb47758022eac6015b157f4e8dbc829e Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@hotmail.com>
Date: Thu, 16 Jan 2025 14:22:22 +0100
Subject: [PATCH] Update buttons in customer and gift card components (#5348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* update buttons in customer and gift card components

* changeset

* update e2e

---------

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>
---
 .changeset/gorgeous-peaches-battle.md         |  5 ++++
 playwright/pages/customersPage.ts             |  4 ++-
 playwright/pages/giftCardsPage.ts             |  2 +-
 .../CustomerAddressListPage.tsx               |  3 +-
 .../CustomerAddresses/CustomerAddresses.tsx   | 17 +++++------
 .../CustomerDetails/CustomerDetails.tsx       | 29 ++++++++++++-------
 .../CustomerOrders/CustomerOrders.tsx         | 12 ++++----
 .../GiftCardResendCodeDialog.tsx              | 21 +++++---------
 .../GiftCardUpdateBalanceDialog.tsx           | 26 ++++++-----------
 .../GiftCardUpdateBalanceDialog/styles.ts     | 17 -----------
 .../GiftCardUpdateDetailsCard.tsx             |  9 ++++--
 .../GiftCardUpdateExpirySelect.tsx            | 13 +++++----
 .../GiftCardEnableDisableSection.tsx          | 12 ++++----
 .../GiftCardUpdatePageHeader.tsx              |  2 +-
 .../CustomerGiftCardsCard.tsx                 | 15 +++++-----
 15 files changed, 87 insertions(+), 100 deletions(-)
 create mode 100644 .changeset/gorgeous-peaches-battle.md
 delete mode 100644 src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/styles.ts

diff --git a/.changeset/gorgeous-peaches-battle.md b/.changeset/gorgeous-peaches-battle.md
new file mode 100644
index 00000000000..e8311429d5b
--- /dev/null
+++ b/.changeset/gorgeous-peaches-battle.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now see buttons from macaw-ui-next in customer details view and gift card details view.
diff --git a/playwright/pages/customersPage.ts b/playwright/pages/customersPage.ts
index 0c97ebdfa1f..95efd4b54e4 100644
--- a/playwright/pages/customersPage.ts
+++ b/playwright/pages/customersPage.ts
@@ -26,7 +26,9 @@ export class CustomersPage extends BasePage {
     readonly deleteButton = page.getByTestId("button-bar-delete"),
     readonly issueNewGiftCardButton = page.getByTestId("issue-new-gift-card"),
     readonly emailPageTitleText = page.getByTestId("user-email-title"),
-    readonly customerActiveCheckbox = page.getByTestId("customer-active-checkbox").locator("input"),
+    readonly customerActiveCheckbox = page
+      .getByTestId("customer-active-checkbox")
+      .locator("button"),
     readonly amountDropdown = page.locator('div[name="balanceCurrency"]'),
     readonly customerList = page.locator('div[data-test-id="list"]'),
   ) {
diff --git a/playwright/pages/giftCardsPage.ts b/playwright/pages/giftCardsPage.ts
index 60808027dfe..04e5e8e192e 100644
--- a/playwright/pages/giftCardsPage.ts
+++ b/playwright/pages/giftCardsPage.ts
@@ -36,7 +36,7 @@ export class GiftCardsPage extends BasePage {
       .locator('button[role="checkbox"]'),
     readonly giftCardExpiresCheckbox = page
       .getByTestId("gift-card-expire-section")
-      .locator("input"),
+      .locator("button"),
     readonly exportCardCodesButton = page.getByTestId("exportCodesMenuItem"),
     readonly setBalanceButton = page.getByTestId("set-balance-button"),
     readonly showMoreMenuButton = page.getByTestId("show-more-button"),
diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
index e74f370d25a..649748f5bb7 100644
--- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
+++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
@@ -1,12 +1,11 @@
 // @ts-strict-ignore
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
-import { Button } from "@dashboard/components/Button";
 import { ListPageLayout } from "@dashboard/components/Layouts";
 import { customerUrl } from "@dashboard/customers/urls";
 import { AddressTypeEnum, CustomerAddressesFragment } from "@dashboard/graphql";
 import { getStringOrPlaceholder, renderCollection } from "@dashboard/misc";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Box, Text } from "@saleor/macaw-ui-next";
+import { Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 
diff --git a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
index 7331762e29f..873bcf22539 100644
--- a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
+++ b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
@@ -1,14 +1,14 @@
 // @ts-strict-ignore
 import AddressFormatter from "@dashboard/components/AddressFormatter";
-import { Button } from "@dashboard/components/Button";
 import { DashboardCard } from "@dashboard/components/Card";
 import { Hr } from "@dashboard/components/Hr";
 import { CustomerDetailsFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Text } from "@saleor/macaw-ui-next";
+import { Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { Link } from "react-router-dom";
 
 import { maybe } from "../../../misc";
 
@@ -44,14 +44,11 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = props => {
           })}
         </DashboardCard.Title>
         <DashboardCard.Toolbar>
-          <Button
-            data-test-id="manage-addresses"
-            disabled={disabled}
-            variant="tertiary"
-            href={manageAddressHref}
-          >
-            <FormattedMessage {...buttonMessages.manage} />
-          </Button>
+          <Link to={manageAddressHref}>
+            <Button data-test-id="manage-addresses" disabled={disabled} variant="secondary">
+              <FormattedMessage {...buttonMessages.manage} />
+            </Button>
+          </Link>
         </DashboardCard.Toolbar>
       </DashboardCard.Header>
       {maybe(() => customer.defaultBillingAddress.id) !==
diff --git a/src/customers/components/CustomerDetails/CustomerDetails.tsx b/src/customers/components/CustomerDetails/CustomerDetails.tsx
index 7d533872b24..8fd18b46f88 100644
--- a/src/customers/components/CustomerDetails/CustomerDetails.tsx
+++ b/src/customers/components/CustomerDetails/CustomerDetails.tsx
@@ -1,13 +1,12 @@
 // @ts-strict-ignore
 import { DashboardCard } from "@dashboard/components/Card";
-import { ControlledCheckbox } from "@dashboard/components/ControlledCheckbox";
 import { AccountErrorFragment, CustomerDetailsQuery } from "@dashboard/graphql";
 import { maybe } from "@dashboard/misc";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getAccountErrorMessage from "@dashboard/utils/errors/account";
 import { TextField } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Skeleton, Text } from "@saleor/macaw-ui-next";
+import { Checkbox, Skeleton, Text } from "@saleor/macaw-ui-next";
 import moment from "moment-timezone";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -78,19 +77,29 @@ const CustomerDetails: React.FC<CustomerDetailsProps> = props => {
         </DashboardCard.Title>
       </DashboardCard.Header>
       <DashboardCard.Content className={classes.content}>
-        <ControlledCheckbox
+        <Checkbox
           data-test-id="customer-active-checkbox"
           checked={data.isActive}
           className={classes.checkbox}
           disabled={disabled}
-          label={intl.formatMessage({
-            id: "+NUzaQ",
-            defaultMessage: "User account active",
-            description: "check to mark this account as active",
-          })}
           name="isActive"
-          onChange={onChange}
-        />
+          onCheckedChange={value => {
+            onChange({
+              target: {
+                name: "isActive",
+                value,
+              },
+            } as React.ChangeEvent<any>);
+          }}
+        >
+          <Text fontSize={3}>
+            {intl.formatMessage({
+              id: "+NUzaQ",
+              defaultMessage: "User account active",
+              description: "check to mark this account as active",
+            })}
+          </Text>
+        </Checkbox>
         <TextField
           data-test-id="customer-note"
           disabled={disabled}
diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx
index 103b4a91c7a..ad667200508 100644
--- a/src/customers/components/CustomerOrders/CustomerOrders.tsx
+++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx
@@ -1,5 +1,4 @@
 // @ts-strict-ignore
-import { Button } from "@dashboard/components/Button";
 import { DashboardCard } from "@dashboard/components/Card";
 import { DateTime } from "@dashboard/components/Date";
 import Money from "@dashboard/components/Money";
@@ -11,9 +10,10 @@ import { orderUrl } from "@dashboard/orders/urls";
 import { RelayToFlat } from "@dashboard/types";
 import { TableBody, TableCell, TableHead } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import { Skeleton } from "@saleor/macaw-ui-next";
+import { Button, Skeleton } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { Link } from "react-router-dom";
 
 import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
 
@@ -56,9 +56,11 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
           })}
         </DashboardCard.Title>
         <DashboardCard.Toolbar>
-          <Button variant="tertiary" href={viewAllHref}>
-            <FormattedMessage id="3+990c" defaultMessage="View all orders" description="button" />
-          </Button>
+          <Link to={viewAllHref}>
+            <Button variant="secondary">
+              <FormattedMessage id="3+990c" defaultMessage="View all orders" description="button" />
+            </Button>
+          </Link>
         </DashboardCard.Toolbar>
       </DashboardCard.Header>
       <ResponsiveTable>
diff --git a/src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx b/src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx
index c1e5ae750c5..dda534ecab3 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx
@@ -2,7 +2,6 @@
 import ActionDialog from "@dashboard/components/ActionDialog";
 import { useChannelsSearch } from "@dashboard/components/ChannelsAvailabilityDialog/utils";
 import { Combobox } from "@dashboard/components/Combobox";
-import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
 import { IMessage } from "@dashboard/components/messages";
 import { useGiftCardPermissions } from "@dashboard/giftCards/hooks/useGiftCardPermissions";
 import { useChannelsQuery, useGiftCardResendMutation } from "@dashboard/graphql";
@@ -12,12 +11,10 @@ import { getBySlug } from "@dashboard/misc";
 import { DialogProps } from "@dashboard/types";
 import commonErrorMessages from "@dashboard/utils/errors/common";
 import { mapSlugNodeToChoice } from "@dashboard/utils/maps";
-import { TextField } from "@material-ui/core";
-import { Box, Spinner, Text } from "@saleor/macaw-ui-next";
+import { Box, Checkbox, Input, Spinner, Text } from "@saleor/macaw-ui-next";
 import React, { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 
-import { useUpdateBalanceDialogStyles as useStyles } from "../GiftCardUpdateBalanceDialog/styles";
 import { getGiftCardErrorMessage } from "../messages";
 import useGiftCardDetails from "../providers/GiftCardDetailsProvider/hooks/useGiftCardDetails";
 import { giftCardResendCodeDialogMessages as messages } from "./messages";
@@ -31,7 +28,6 @@ export interface GiftCardResendCodeFormData {
 const GiftCardResendCodeDialog: React.FC<DialogProps> = ({ open, onClose }) => {
   const intl = useIntl();
   const notify = useNotifier();
-  const classes = useStyles();
   const {
     giftCard: { boughtInChannel: initialChannelSlug },
   } = useGiftCardDetails();
@@ -124,23 +120,22 @@ const GiftCardResendCodeDialog: React.FC<DialogProps> = ({ open, onClose }) => {
             }}
             onChange={change}
           />
-          <ControlledCheckbox
+          <Checkbox
             name="differentMailConsent"
-            label={intl.formatMessage(messages.consentCheckboxLabel)}
             checked={consentSelected}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              setConsentSelected(!!event.target.value)
-            }
-          />
-          <TextField
+            onCheckedChange={value => setConsentSelected(value as boolean)}
+          >
+            <Text fontSize={3}>{intl.formatMessage(messages.consentCheckboxLabel)}</Text>
+          </Checkbox>
+          <Input
             disabled={!consentSelected}
             error={!!formErrors?.email}
             helperText={getGiftCardErrorMessage(formErrors?.email, intl)}
             name="email"
             value={data.email}
             onChange={change}
-            className={classes.inputContainer}
             label={intl.formatMessage(messages.emailInputPlaceholder)}
+            width="100%"
           />
         </Box>
       )}
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/GiftCardUpdateBalanceDialog.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/GiftCardUpdateBalanceDialog.tsx
index 2f5c6d83a1e..c57592574a4 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/GiftCardUpdateBalanceDialog.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/GiftCardUpdateBalanceDialog.tsx
@@ -8,8 +8,7 @@ import useForm from "@dashboard/hooks/useForm";
 import useNotifier from "@dashboard/hooks/useNotifier";
 import { DialogProps } from "@dashboard/types";
 import commonErrorMessages from "@dashboard/utils/errors/common";
-import { TextField } from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { Input, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -18,7 +17,6 @@ import { useDialogFormReset } from "../GiftCardResendCodeDialog/utils";
 import { getGiftCardErrorMessage } from "../messages";
 import useGiftCardDetails from "../providers/GiftCardDetailsProvider/hooks/useGiftCardDetails";
 import { giftCardUpdateBalanceDialogMessages as messages } from "./messages";
-import { useUpdateBalanceDialogStyles as useStyles } from "./styles";
 
 export interface GiftCardBalanceUpdateFormData {
   balanceAmount: number;
@@ -26,7 +24,6 @@ export interface GiftCardBalanceUpdateFormData {
 
 const GiftCardUpdateBalanceDialog: React.FC<DialogProps> = ({ open, onClose }) => {
   const intl = useIntl();
-  const classes = useStyles({});
   const notify = useNotifier();
   const { canSeeCreatedBy } = useGiftCardPermissions();
   const {
@@ -92,25 +89,20 @@ const GiftCardUpdateBalanceDialog: React.FC<DialogProps> = ({ open, onClose }) =
     >
       <Text>{intl.formatMessage(messages.subtitle)}</Text>
       <CardSpacer />
-      <TextField
-        inputProps={{ min: 0 }}
+      <Input
         error={!!formErrors?.initialBalanceAmount}
         helperText={getGiftCardErrorMessage(formErrors?.initialBalanceAmount, intl)}
         name="balanceAmount"
         value={data.balanceAmount}
         onChange={change}
-        className={classes.inputContainer}
         label={intl.formatMessage(tableMessages.giftCardsTableColumnBalanceTitle)}
-        type="float"
-        InputProps={{
-          startAdornment: (
-            <div className={classes.currencyCodeContainer}>
-              <Text size={2} fontWeight="light">
-                {currency}
-              </Text>
-            </div>
-          ),
-        }}
+        min={0}
+        endAdornment={
+          <Text size={2} fontWeight="light">
+            {currency}
+          </Text>
+        }
+        width="100%"
       />
     </ActionDialog>
   );
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/styles.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/styles.ts
deleted file mode 100644
index f2b5350b5f2..00000000000
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { makeStyles } from "@saleor/macaw-ui";
-
-export const useUpdateBalanceDialogStyles = makeStyles(
-  theme => ({
-    inputContainer: {
-      width: "100%",
-    },
-    currencyCodeContainer: {
-      height: 35,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "flex-end",
-      marginRight: theme.spacing(1),
-    },
-  }),
-  { name: "GiftCardUpdateBalanceDialog" },
-);
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
index 868577fff66..6f7abe57625 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
@@ -1,11 +1,10 @@
-import { Button } from "@dashboard/components/Button";
 import { DashboardCard } from "@dashboard/components/Card";
 import CardSpacer from "@dashboard/components/CardSpacer";
 import VerticalSpacer from "@dashboard/components/VerticalSpacer";
 import GiftCardTagInput from "@dashboard/giftCards/components/GiftCardTagInput";
 import GiftCardUpdateExpirySelect from "@dashboard/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect";
 import { Divider } from "@material-ui/core";
-import { Skeleton, Text } from "@saleor/macaw-ui-next";
+import { Button, Skeleton, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -31,7 +30,11 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
         <DashboardCard.Title>{intl.formatMessage(messages.title)}</DashboardCard.Title>
         <DashboardCard.Toolbar>
           {!loading && !giftCard?.isExpired && (
-            <Button data-test-id="set-balance-button" onClick={openSetBalanceDialog}>
+            <Button
+              variant="secondary"
+              data-test-id="set-balance-button"
+              onClick={openSetBalanceDialog}
+            >
               {intl.formatMessage(messages.setBalanceButtonLabel)}
             </Button>
           )}
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx
index 2d3998e91e9..e7e81206eff 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect/GiftCardUpdateExpirySelect.tsx
@@ -1,10 +1,9 @@
-import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
 import VerticalSpacer from "@dashboard/components/VerticalSpacer";
 import { getGiftCardErrorMessage } from "@dashboard/giftCards/GiftCardUpdate/messages";
 import useGiftCardUpdateForm from "@dashboard/giftCards/GiftCardUpdate/providers/GiftCardUpdateFormProvider/hooks/useGiftCardUpdateForm";
 import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { TextField } from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { Checkbox, Text } from "@saleor/macaw-ui-next";
 import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 
@@ -36,13 +35,15 @@ const GiftCardUpdateExpirySelect: React.FC = () => {
     <>
       <Text>{intl.formatMessage(messages.expiryDateLabel)}</Text>
       <VerticalSpacer />
-      <ControlledCheckbox
+      <Checkbox
         data-test-id="gift-card-expire-section"
         name="cardExpires"
-        label={intl.formatMessage(messages.expiryDateCheckboxLabel)}
         checked={cardExpiresSelected}
-        onChange={event => setCardExpiresSelected(event.target.value)}
-      />
+        onCheckedChange={value => setCardExpiresSelected(value as boolean)}
+        display="inline-flex"
+      >
+        <Text size={3}>{intl.formatMessage(messages.expiryDateCheckboxLabel)}</Text>
+      </Checkbox>
 
       {cardExpiresSelected && (
         <TextField
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx
index 59282b5f5d8..82697293b2f 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx
@@ -1,6 +1,6 @@
 // @ts-strict-ignore
+import { ButtonWithLoader } from "@dashboard/components/ButtonWithLoader/ButtonWithLoader";
 import { commonMessages } from "@dashboard/intl";
-import { ConfirmButton } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -25,15 +25,13 @@ const GiftCardEnableDisableSection: React.FC = () => {
   }
 
   return (
-    <ConfirmButton
+    <ButtonWithLoader
       data-test-id="enable-button"
       onClick={handleClick}
       transitionState={currentOpts?.status}
-      labels={{
-        confirm: intl.formatMessage(buttonLabel),
-        error: intl.formatMessage(commonMessages.error),
-      }}
-    />
+    >
+      {intl.formatMessage(currentOpts?.status === "error" ? commonMessages.error : buttonLabel)}
+    </ButtonWithLoader>
   );
 };
 
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
index dc15b68112b..6cd7d765c49 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx
@@ -1,11 +1,11 @@
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
-import { Button } from "@dashboard/components/Button";
 import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
 import GiftCardStatusChip from "@dashboard/giftCards/components/GiftCardStatusChip/GiftCardStatusChip";
 import { useGiftCardPermissions } from "@dashboard/giftCards/hooks/useGiftCardPermissions";
 import { giftCardsListPath } from "@dashboard/giftCards/urls";
 import { useBackLinkWithState } from "@dashboard/hooks/useBackLinkWithState";
 import { getStringOrPlaceholder } from "@dashboard/misc";
+import { Button } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
diff --git a/src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx b/src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx
index 44140b0fbbb..73a7a87847d 100644
--- a/src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx
+++ b/src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx
@@ -1,8 +1,6 @@
 // @ts-strict-ignore
-import { Button } from "@dashboard/components/Button";
 import { DashboardCard } from "@dashboard/components/Card";
 import CollectionWithDividers from "@dashboard/components/CollectionWithDividers";
-import Link from "@dashboard/components/Link";
 import { DashboardModal } from "@dashboard/components/Modal";
 import PreviewPill from "@dashboard/components/PreviewPill";
 import VerticalSpacer from "@dashboard/components/VerticalSpacer";
@@ -13,10 +11,11 @@ import { giftCardListUrl } from "@dashboard/giftCards/urls";
 import { useCustomerGiftCardListQuery } from "@dashboard/graphql";
 import { getFullName } from "@dashboard/misc";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
-import { Skeleton, sprinkles } from "@saleor/macaw-ui-next";
+import { Button, Skeleton, sprinkles } from "@saleor/macaw-ui-next";
 import * as React from "react";
 import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { Link } from "react-router-dom";
 
 import CustomerGiftCardsCardListItem from "./CustomerGiftCardsCardListItem";
 import { giftCardCustomerCardMessages as messages } from "./messages";
@@ -66,9 +65,11 @@ const CustomerGiftCardsCard: React.FC = () => {
           <DashboardCard.Toolbar>
             <>
               {!!giftCards?.length && (
-                <Button variant="tertiary" href={viewAllGiftCardsUrl} component={Link}>
-                  <FormattedMessage {...messages.customerGiftCardsViewAllButton} />
-                </Button>
+                <Link to={viewAllGiftCardsUrl}>
+                  <Button variant="tertiary">
+                    <FormattedMessage {...messages.customerGiftCardsViewAllButton} />
+                  </Button>
+                </Link>
               )}
               <PreviewPill className={sprinkles({ marginLeft: 2 })} />
             </>
@@ -88,7 +89,7 @@ const CustomerGiftCardsCard: React.FC = () => {
         )}
         <DashboardCard.BottomActions paddingX={6} paddingY={0}>
           <Button
-            variant="tertiary"
+            variant="secondary"
             onClick={handleCreateNewCardButton}
             data-test-id="issue-new-gift-card"
           >