Update buttons in customer and gift card components (#5348)

* update buttons in customer and gift card components * changeset * update e2e --------- Co-authored-by: Paweł Chyła <[email protected]>
saleor · Jan 16, 2025 · 616ad52 · 616ad52
1 parent 1053db7
commit 616ad52
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 100 deletions.
diff --git a/.changeset/gorgeous-peaches-battle.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +17,13 @@ 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;
 }
 
 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
diff --git 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
@@ -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
@@ -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>
   );
 };