From fa0ec7d739559e286ed29c9293fdaaa8b5a848ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Tue, 13 Aug 2024 12:52:42 +0200
Subject: [PATCH] Migrate rest of dialogs (#5097)
* Replace Dialog in OrderCustomerChangeDialog
* Replace Dialog in OrderProductAddDialog
* Replace Dialog in OrderFulfillmentTrackingDialog
* Replace Dialog in OrderInvoiceEmailSendDialog
* Replace Dialog in OrderCannotCancelOrderDialog and fix showing two dialogs
* Replace Dialog in OrderFulfillmentApproveDialog
* Replace Dialog in ProductVariantDeleteDialog
* Replace Dialog in ProductExternalMediaDialog
* Replace Dialog in ProductExportSteps
* Replace Dialog in ProductVariantMediaSelectDialog
* Replace Dialog in DiscountCountrySelectDialog
* Replace Dialog in PluginSecretFieldDialog
* Replace Dialog in ShippingZonePostalCodeRangeDialog
* Replace Dialog in ShippingZoneCountriesAssignDialog
* Replace Dialog in ShippingZoneCountriesAssignDialog
* Replace Dialog in gift card export dialog
* Replace Dialog in GiftCardBulkCreateSuccessDialog
* Remove not used delete category dialog
* Replace Dialog in SaveFilterTabDialog
* Replace Dialog in MenuCreateDialog
* Replace Dialog in TokenCreateDialog
* Replace Dialog in ExitFormDialog
* Replace Dialog in DevModePanel
* Add Xl modal size
* Replace Dialog in AppPermissionsDialog
* Replace Dialog in DryRun
* Add modal size MD
* Replace Dialog in AttributeValueEditDialog
* Replace Dialog in AssignMembersDialog
* Replace Dialog in AssignVariantDialog
* Replace Dialog in AssignProductDialog
* Replace Dialog in AssignContainerDialog
* Replace Dialog in AssignAttributeDialog
* Add todo comment
* Extract messages
* Add missing test ids
* Add changeset
* Add Modal sizes
* Update sizing
* Small improvements after QA
* Fix full width modals
* Fix ActionDialog size
---
.changeset/forty-bananas-burn.md | 5 +
locale/defaultMessages.json | 4 -
.../AppDeleteDialog/AppDeleteDialog.tsx | 1 -
src/apps/components/AppDialog/AppDialog.tsx | 4 +-
.../AppPermissionsDialog.tsx | 12 +-
.../AppPermissionsDialogConfirmation.tsx | 31 +-
.../AppPermissionsDialogPermissionPicker.tsx | 20 +-
.../AttributeValueEditDialog.tsx | 84 ++---
.../CategoryDeleteDialog.tsx | 69 ----
.../components/CategoryDeleteDialog/index.ts | 2 -
src/components/ActionDialog/ActionDialog.tsx | 13 +-
src/components/ActionDialog/types.ts | 2 -
.../AssignAttributeDialog.tsx | 209 +++++-----
.../AssignContainerDialog.tsx | 142 ++++---
.../AssignProductDialog.tsx | 163 ++++----
.../AssignVariantDialog.tsx | 225 ++++++-----
src/components/DevModePanel/DevModePanel.tsx | 27 +-
src/components/DryRun/DryRun.tsx | 51 +--
src/components/Form/ExitFormDialog.test.tsx | 2 +-
src/components/Form/ExitFormDialog.tsx | 62 +--
src/components/Modal/Content.tsx | 18 +-
src/components/Modal/Grid.tsx | 10 +
src/components/Modal/index.ts | 7 +-
.../NavigatorSearch/NavigatorSearch.tsx | 4 +-
.../SaveFilterTabDialog.tsx | 66 ++--
.../TokenCreateDialog/TokenCreateDialog.tsx | 98 ++---
.../CustomerAddressDialog.tsx | 110 +++---
.../DiscountCountrySelectDialog.tsx | 172 +++++----
.../DiscountDeleteModal.tsx | 2 +-
.../RuleDeleteModal/RuleDeleteModal.tsx | 12 +-
.../componenets/RuleForm/RuleForm.tsx | 2 +-
.../RuleFormModal/RuleFormModal.tsx | 2 +-
.../VoucherCodesDeleteDialog.tsx | 2 +-
.../VoucherCodesGenerateDialog.tsx | 2 +-
.../VoucherCodesManualDialog.tsx | 2 +-
.../GiftCardBulkCreateDialog.tsx | 2 +-
.../GiftCardBulkCreateSuccessDialog.tsx | 39 +-
.../GiftCardCreateDialogContent.tsx | 8 +-
.../GiftCardExportDialogContent.tsx | 61 +--
.../GiftCardResendCodeDialog.tsx | 1 -
.../GiftCardUpdateBalanceDialog.tsx | 1 -
.../GiftCardListDialogsProvider.tsx | 5 +-
.../MenuCreateDialog/MenuCreateDialog.tsx | 56 +--
.../MenuItemDialog/MenuItemDialog.tsx | 1 +
.../OrderCancelDialog/OrderCancelDialog.tsx | 4 +-
.../OrderCannotCancelOrderDialog.tsx | 61 ++-
.../OrderChangeWarehouseDialog.tsx | 107 +++---
.../OrderCustomerAddressesEditDialog.tsx | 356 +++++++++---------
.../OrderCustomerChangeDialog.tsx | 52 ++-
.../OrderFulfillStockExceededDialog.tsx | 1 -
.../OrderFulfillmentApproveDialog.tsx | 109 +++---
.../OrderFulfillmentCancelDialog.tsx | 4 +-
.../OrderFulfillmentTrackingDialog.tsx | 75 ++--
.../OrderInvoiceEmailSendDialog.tsx | 54 ++-
.../OrderManualTransactionDialog.tsx | 2 +-
.../OrderMarkAsPaidDialog.tsx | 1 -
.../OrderMetadataDialog.tsx | 8 +-
.../OrderPaymentDialog/OrderPaymentDialog.tsx | 4 +-
.../OrderPaymentVoidDialog.tsx | 4 +-
.../OrderProductAddDialog.tsx | 327 ++++++++--------
.../OrderProductAddDialog/styles.ts | 28 --
.../OrderRefundDialog/OrderRefundDialog.tsx | 2 +-
.../OrderShippingMethodEditDialog.tsx | 2 +-
.../OrderTransactionActionDialog.tsx | 2 +-
.../OrderTransactionReasonModal.tsx | 2 +-
.../OrderDetails/OrderNormalDetails/index.tsx | 13 +-
.../OrderUnconfirmedDetails/index.tsx | 13 +-
.../PageTypePickerDialog.tsx | 2 +-
.../AssignMembersDialog.tsx | 232 ++++++------
.../PluginSecretFieldDialog.tsx | 82 ++--
.../ExportDialogSettings.tsx | 16 +-
.../ProductExportDialog.tsx | 85 +++--
.../ProductExportDialogInfo.tsx | 2 +-
.../ProductExternalMediaDialog.tsx | 48 +--
.../ProductVariantDeleteDialog.tsx | 71 ++--
.../ProductVariantMediaSelectDialog.tsx | 101 +++--
.../ProductVariantImageSelectDialog/styles.ts | 43 ---
.../ShippingMethodProductsAddDialog.tsx | 110 +++---
.../ShippingWeightUnitDialog.tsx | 2 +-
.../ShippingZoneAddWarehouseDialog.tsx | 4 +-
.../ShippingZoneCountriesAssignDialog.tsx | 154 ++++----
.../handlers.ts | 2 +-
.../ShippingZonePostalCodeRangeDialog.tsx | 84 ++---
src/shipping/handlers.ts | 25 +-
.../StaffAddMemberDialog.tsx | 4 +-
.../StaffPasswordResetDialog.tsx | 4 +-
src/styles/useScrollableDialogStyle.ts | 2 +-
.../TaxCountryDialog/TaxCountryDialog.tsx | 4 +-
src/utils/errors/order.ts | 5 +-
89 files changed, 1912 insertions(+), 2212 deletions(-)
create mode 100644 .changeset/forty-bananas-burn.md
delete mode 100644 src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
delete mode 100644 src/categories/components/CategoryDeleteDialog/index.ts
create mode 100644 src/components/Modal/Grid.tsx
delete mode 100644 src/products/components/ProductVariantImageSelectDialog/styles.ts
diff --git a/.changeset/forty-bananas-burn.md b/.changeset/forty-bananas-burn.md
new file mode 100644
index 00000000000..250162ef96e
--- /dev/null
+++ b/.changeset/forty-bananas-burn.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Legacy Dialog component is no longer used
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 0e6afd6fc7c..3eacd3a21e5 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -6361,10 +6361,6 @@
"dHAwu8": {
"string": "Code already exists"
},
- "dJQxHt": {
- "context": "delete category",
- "string": "Are you sure you want to delete {categoryName}?"
- },
"dJVXIb": {
"context": "vat included in order price",
"string": "VAT included"
diff --git a/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx b/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx
index fa636c19aea..9bc75946db8 100644
--- a/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx
+++ b/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx
@@ -55,7 +55,6 @@ const AppDeleteDialog: React.FC<AppDeleteDialogProps> = ({
onConfirm={onConfirm}
title={intl.formatMessage(msgs.deleteAppTitle)}
variant="delete"
- size="lg"
>
<Box data-test-id="dialog-content">
<Box
diff --git a/src/apps/components/AppDialog/AppDialog.tsx b/src/apps/components/AppDialog/AppDialog.tsx
index c2c2862ebdf..c79af3ad4b5 100644
--- a/src/apps/components/AppDialog/AppDialog.tsx
+++ b/src/apps/components/AppDialog/AppDialog.tsx
@@ -11,7 +11,7 @@ interface AppDialogProps {
export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose, ...props }) => {
return (
<DashboardModal aria-labelledby="extension app dialog" {...props} onChange={onClose}>
- <DashboardModal.Content>
+ <DashboardModal.Content size="lg">
<DashboardModal.Title
display="flex"
justifyContent="space-between"
@@ -21,7 +21,7 @@ export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose,
{title}
<DashboardModal.Close onClose={onClose}></DashboardModal.Close>
</DashboardModal.Title>
- <Box __width={600} __height={600}>
+ <Box width="100%" __height={600}>
{children}
</Box>
</DashboardModal.Content>
diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
index 88bc2b9b978..ae22228eb7c 100644
--- a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
+++ b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
@@ -3,9 +3,9 @@ import { AppPermissionsDialogPermissionPicker } from "@dashboard/apps/components
import { useAppPermissionsDialogState } from "@dashboard/apps/components/AppPermissionsDialog/AppPermissionsDialogState";
import { AppPermissionsDialogMessages } from "@dashboard/apps/components/AppPermissionsDialog/messages";
import { useGetAvailableAppPermissions } from "@dashboard/apps/hooks/useGetAvailableAppPermissions";
+import { DashboardModal } from "@dashboard/components/Modal";
import { PermissionEnum, useAppQuery, useAppUpdatePermissionsMutation } from "@dashboard/graphql";
import useNotifier from "@dashboard/hooks/useNotifier";
-import { Dialog, DialogContent, DialogTitle } from "@material-ui/core";
import { Box, Skeleton, Text } from "@saleor/macaw-ui-next";
import React, { useEffect } from "react";
import { useIntl } from "react-intl";
@@ -109,9 +109,9 @@ export const AppPermissionsDialog = ({
};
return (
- <Dialog open={true} onClose={onClose} fullWidth maxWidth={"sm"}>
- <DialogTitle disableTypography>{formatMessage(messages.heading)}</DialogTitle>
- <DialogContent>
+ <DashboardModal open={true} onChange={onClose}>
+ <DashboardModal.Content size="sm">
+ <DashboardModal.Title>{formatMessage(messages.heading)}</DashboardModal.Title>
<Box display={"grid"} gridAutoFlow={"row"}>
<Text as={"p"}>{formatMessage(messages.info)}</Text>
<Box
@@ -129,7 +129,7 @@ export const AppPermissionsDialog = ({
</Box>
{renderDialogContent()}
</Box>
- </DialogContent>
- </Dialog>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialogConfirmation.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialogConfirmation.tsx
index cc2bc5ea002..35647953c1d 100644
--- a/src/apps/components/AppPermissionsDialog/AppPermissionsDialogConfirmation.tsx
+++ b/src/apps/components/AppPermissionsDialog/AppPermissionsDialogConfirmation.tsx
@@ -1,7 +1,10 @@
import { AppPermissionsDialogMessages } from "@dashboard/apps/components/AppPermissionsDialog/messages";
import { useGetAvailableAppPermissions } from "@dashboard/apps/hooks/useGetAvailableAppPermissions";
+import BackButton from "@dashboard/components/BackButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import { PermissionEnum } from "@dashboard/graphql";
-import { Box, Button, Text } from "@saleor/macaw-ui-next";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { useIntl } from "react-intl";
@@ -30,6 +33,7 @@ export const AppPermissionsDialogConfirmation = ({
<Text marginBottom={2} as={"p"}>
{intl.formatMessage(messages.summaryText)}
</Text>
+
{isPermissionsRemoved && (
<Box marginBottom={4}>
<Text size={4} fontWeight="bold">
@@ -42,6 +46,7 @@ export const AppPermissionsDialogConfirmation = ({
))}
</Box>
)}
+
{isPermissionsAdded && (
<Box>
<Text size={4} fontWeight="bold">
@@ -54,23 +59,15 @@ export const AppPermissionsDialogConfirmation = ({
))}
</Box>
)}
- <Box display={"flex"} justifyContent={"flex-end"} gap={2} marginTop={6}>
- <Button
- variant={"tertiary"}
- onClick={() => {
- onBack();
- }}
- >
- {intl.formatMessage(messages.backButton)}
- </Button>
- <Button
- onClick={() => {
- onApprove();
- }}
- >
+
+ <Box marginBottom={6} />
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onBack}>{intl.formatMessage(messages.backButton)}</BackButton>
+ <ConfirmButton data-test-id="submit" transitionState="default" onClick={onApprove}>
{intl.formatMessage(messages.confirmButton)}
- </Button>
- </Box>
+ </ConfirmButton>
+ </DashboardModal.Actions>
</Box>
);
};
diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialogPermissionPicker.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialogPermissionPicker.tsx
index 1fc132be2d2..a717cdd422b 100644
--- a/src/apps/components/AppPermissionsDialog/AppPermissionsDialogPermissionPicker.tsx
+++ b/src/apps/components/AppPermissionsDialog/AppPermissionsDialogPermissionPicker.tsx
@@ -1,7 +1,10 @@
import { AppPermissionsDialogMessages } from "@dashboard/apps/components/AppPermissionsDialog/messages";
import { AppPermission } from "@dashboard/apps/components/AppPermissionsDialog/types";
+import BackButton from "@dashboard/components/BackButton";
+import { ConfirmButton } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import { PermissionEnum } from "@dashboard/graphql";
-import { Box, Button, Checkbox, List, Text } from "@saleor/macaw-ui-next";
+import { Box, Checkbox, List, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { useIntl } from "react-intl";
@@ -44,7 +47,7 @@ export const AppPermissionsDialogPermissionPicker = ({
onChange(values);
}}
>
- <Box overflow={"scroll"} __maxHeight={LIST_MAX_HEIGHT}>
+ <Box overflow={"scroll"} __maxHeight={LIST_MAX_HEIGHT} marginBottom={6}>
<List>
{allPermissions.map(perm => {
const isAssigned = Boolean(selected.find(p => p === perm.code));
@@ -66,12 +69,13 @@ export const AppPermissionsDialogPermissionPicker = ({
})}
</List>
</Box>
- <Box display={"flex"} justifyContent={"flex-end"} gap={2} marginTop={2}>
- <Button onClick={onClose} type={"button"} variant={"tertiary"}>
- {intl.formatMessage(messages.closeButton)}
- </Button>
- <Button type={"submit"}>{intl.formatMessage(messages.saveButton)}</Button>
- </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose}>{intl.formatMessage(messages.closeButton)}</BackButton>
+ <ConfirmButton data-test-id="submit" transitionState="default" type="submit">
+ {intl.formatMessage(messages.saveButton)}
+ </ConfirmButton>
+ </DashboardModal.Actions>
</form>
);
};
diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
index 7006c4b8028..d15683b48c9 100644
--- a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
+++ b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
@@ -2,11 +2,12 @@ import { getAttributeValueErrorMessage } from "@dashboard/attributes/errors";
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
+import { DashboardModal } from "@dashboard/components/Modal";
import { AttributeErrorFragment, AttributeInputTypeEnum } from "@dashboard/graphql";
import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
import { buttonMessages } from "@dashboard/intl";
import { getFormErrors } from "@dashboard/utils/errors";
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -46,32 +47,27 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
const formErrors = getFormErrors(["name"], errors);
return (
- <Dialog
- onClose={onClose}
- open={open}
- fullWidth
- maxWidth="sm"
- data-test-id="edit-attribute-value-dialog"
- >
- <DialogTitle disableTypography>
- {attributeValue === null ? (
- <FormattedMessage
- id="PqMbma"
- defaultMessage="Add Value"
- description="add attribute value"
- />
- ) : (
- <FormattedMessage
- id="XYhE8p"
- defaultMessage="Edit Value"
- description="edit attribute value"
- />
- )}
- </DialogTitle>
- <Form initial={initialForm} onSubmit={onSubmit}>
- {({ errors, set, change, clearErrors, setError, data, submit }) => (
- <>
- <DialogContent>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm" data-test-id="edit-attribute-value-dialog">
+ <Form initial={initialForm} onSubmit={onSubmit}>
+ {({ errors, set, change, clearErrors, setError, data, submit }) => (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ {attributeValue === null ? (
+ <FormattedMessage
+ id="PqMbma"
+ defaultMessage="Add Value"
+ description="add attribute value"
+ />
+ ) : (
+ <FormattedMessage
+ id="XYhE8p"
+ defaultMessage="Edit Value"
+ description="edit attribute value"
+ />
+ )}
+ </DashboardModal.Title>
+
<TextField
data-test-id="value-name"
autoFocus
@@ -88,6 +84,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
value={data.name}
onChange={change}
/>
+
{isSwatch && (
<AttributeSwatchField
data={data}
@@ -97,22 +94,23 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
set={set}
/>
)}
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- data-test-id="submit"
- transitionState={confirmButtonState}
- disabled={data.name === ""}
- onClick={submit}
- >
- <FormattedMessage {...buttonMessages.save} />
- </ConfirmButton>
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ data-test-id="submit"
+ transitionState={confirmButtonState}
+ disabled={data.name === ""}
+ onClick={submit}
+ >
+ <FormattedMessage {...buttonMessages.save} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
deleted file mode 100644
index d7bc2be1da5..00000000000
--- a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import BackButton from "@dashboard/components/BackButton";
-import { Button } from "@dashboard/components/Button";
-import { buttonMessages } from "@dashboard/intl";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
-} from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-const useStyles = makeStyles(
- theme => ({
- deleteButton: {
- "&:hover": {
- backgroundColor: theme.palette.error.main,
- },
- backgroundColor: theme.palette.error.main,
- color: theme.palette.error.contrastText,
- },
- }),
- {
- name: "CategoryDeleteDialog",
- },
-);
-
-export interface CategoryDeleteDialogProps {
- open: boolean;
- name: string;
- onClose: () => any;
- onConfirm: () => any;
-}
-
-const CategoryDeleteDialog: React.FC<CategoryDeleteDialogProps> = props => {
- const { name, open, onConfirm, onClose } = props;
- const classes = useStyles(props);
-
- return (
- <Dialog onClose={onClose} open={open}>
- <DialogTitle disableTypography>
- <FormattedMessage id="xo5UIb" defaultMessage="Delete category" description="dialog title" />
- </DialogTitle>
- <DialogContent>
- <DialogContentText>
- <FormattedMessage
- id="dJQxHt"
- defaultMessage="Are you sure you want to delete {categoryName}?"
- description="delete category"
- values={{
- categoryName: <strong>{name}</strong>,
- }}
- />
- </DialogContentText>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <Button className={classes.deleteButton} variant="primary" onClick={onConfirm}>
- <FormattedMessage {...buttonMessages.save} />
- </Button>
- </DialogActions>
- </Dialog>
- );
-};
-
-CategoryDeleteDialog.displayName = "CategoryDeleteDialog";
-export default CategoryDeleteDialog;
diff --git a/src/categories/components/CategoryDeleteDialog/index.ts b/src/categories/components/CategoryDeleteDialog/index.ts
deleted file mode 100644
index 31957694a07..00000000000
--- a/src/categories/components/CategoryDeleteDialog/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./CategoryDeleteDialog";
-export * from "./CategoryDeleteDialog";
diff --git a/src/components/ActionDialog/ActionDialog.tsx b/src/components/ActionDialog/ActionDialog.tsx
index f62be979097..396ff400014 100644
--- a/src/components/ActionDialog/ActionDialog.tsx
+++ b/src/components/ActionDialog/ActionDialog.tsx
@@ -6,8 +6,8 @@ import React from "react";
import { useIntl } from "react-intl";
import BackButton from "../BackButton";
-import { DASHBOARD_MODAL_WIDTH, DASHBOARD_MODAL_WIDTH_SMALL, DashboardModal } from "../Modal";
-import { ActionDialogSize, ActionDialogVariant } from "./types";
+import { DashboardModal, DashboardModalContentSize } from "../Modal";
+import { ActionDialogVariant } from "./types";
export interface ActionDialogProps extends DialogProps {
children?: React.ReactNode;
@@ -18,14 +18,9 @@ export interface ActionDialogProps extends DialogProps {
variant?: ActionDialogVariant;
backButtonText?: string;
onConfirm: () => any;
- size?: ActionDialogSize;
+ size?: DashboardModalContentSize;
}
-const ACTION_DIALOG_SIZE: Record<ActionDialogSize, number> = {
- sm: DASHBOARD_MODAL_WIDTH_SMALL,
- lg: DASHBOARD_MODAL_WIDTH,
-};
-
const ActionDialog = ({
children,
open,
@@ -43,7 +38,7 @@ const ActionDialog = ({
return (
<DashboardModal onChange={onClose} open={open}>
- <DashboardModal.Content __maxWidth={ACTION_DIALOG_SIZE[size]} width="100%" overflow="hidden">
+ <DashboardModal.Content size={size}>
<DashboardModal.Title>{title}</DashboardModal.Title>
<Box fontSize={3}>{children}</Box>
<DashboardModal.Actions>
diff --git a/src/components/ActionDialog/types.ts b/src/components/ActionDialog/types.ts
index bbe2c281200..2fcce1ea665 100644
--- a/src/components/ActionDialog/types.ts
+++ b/src/components/ActionDialog/types.ts
@@ -1,3 +1 @@
export type ActionDialogVariant = "default" | "delete" | "info";
-
-export type ActionDialogSize = "sm" | "lg";
diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
index 77d8e9d9f7a..68d52fac640 100644
--- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
+++ b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -1,29 +1,18 @@
// @ts-strict-ignore
import Checkbox from "@dashboard/components/Checkbox";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableRowLink from "@dashboard/components/TableRowLink";
import { AvailableAttributeFragment } from "@dashboard/graphql";
-import useElementScroll, { isScrolledToBottom } from "@dashboard/hooks/useElementScroll";
import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
import useSearchQuery from "@dashboard/hooks/useSearchQuery";
import { maybe, renderCollection } from "@dashboard/misc";
import { FetchMoreProps } from "@dashboard/types";
-import {
- CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
+import { CircularProgress, TableBody, TableCell, TextField } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
-import { Text } from "@saleor/macaw-ui-next";
-import clsx from "clsx";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage, useIntl } from "react-intl";
@@ -33,18 +22,9 @@ import { messages } from "./messages";
const useStyles = makeStyles(
theme => ({
- actions: {
- boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
- },
checkboxCell: {
paddingLeft: 0,
},
- dialogPaper: {
- overflow: "hidden",
- },
- dropShadow: {
- boxShadow: `0px -5px 10px 0px ${theme.palette.divider}`,
- },
loadMoreLoaderContainer: {
alignItems: "center",
display: "flex",
@@ -52,17 +32,6 @@ const useStyles = makeStyles(
height: theme.spacing(3),
justifyContent: "center",
},
- searchArea: {
- marginBottom: theme.spacing(3),
- overflowY: "hidden",
- paddingBottom: theme.spacing(6),
- },
- scrollArea: {
- maxHeight: 700,
- overflowY: "scroll",
- paddingTop: 0,
- marginBottom: theme.spacing(3),
- },
wideCell: {
width: "100%",
},
@@ -104,7 +73,6 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
const [query, onQueryChange, resetQuery] = useSearchQuery(onFetch);
const errors = useModalDialogErrors(apiErrors, open);
const anchor = React.useRef(null);
- const position = useElementScroll(anchor);
useModalDialogOpen(open, {
onClose: resetQuery,
@@ -112,19 +80,12 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
});
return (
- <Dialog
- onClose={onClose}
- open={open}
- fullWidth
- maxWidth="sm"
- classes={{
- paper: classes.dialogPaper,
- }}
- >
- <DialogTitle disableTypography>
- <FormattedMessage {...messages.title} />
- </DialogTitle>
- <DialogContent className={classes.searchArea}>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto auto">
+ <DashboardModal.Title>
+ <FormattedMessage {...messages.title} />
+ </DashboardModal.Title>
+
<TextField
data-test-id="attribute-search-input"
name="query"
@@ -138,85 +99,83 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
endAdornment: loading && <CircularProgress size={16} />,
}}
/>
- </DialogContent>
- <DialogContent className={classes.scrollArea} ref={anchor} id={scrollableTargetId}>
- <InfiniteScroll
- dataLength={attributes?.length || 0}
- next={onFetchMore}
- hasMore={hasMore}
- scrollThreshold="100px"
- loader={
- <div className={classes.loadMoreLoaderContainer}>
- <CircularProgress size={16} />
- </div>
- }
- scrollableTarget={scrollableTargetId}
- >
- <ResponsiveTable key="table">
- <TableBody data-test-id="attributes-list">
- {renderCollection(
- attributes,
- attribute => {
- if (!attribute) {
- return null;
- }
- const isChecked = !!selected.find(
- selectedAttribute => selectedAttribute === attribute.id,
- );
+ <Box id={scrollableTargetId} ref={anchor} overflowY="auto">
+ <InfiniteScroll
+ dataLength={attributes?.length || 0}
+ next={onFetchMore}
+ hasMore={hasMore}
+ scrollThreshold="100px"
+ loader={
+ <div className={classes.loadMoreLoaderContainer}>
+ <CircularProgress size={16} />
+ </div>
+ }
+ scrollableTarget={scrollableTargetId}
+ >
+ <ResponsiveTable key="table">
+ <TableBody data-test-id="attributes-list">
+ {renderCollection(
+ attributes,
+ attribute => {
+ if (!attribute) {
+ return null;
+ }
+
+ const isChecked = !!selected.find(
+ selectedAttribute => selectedAttribute === attribute.id,
+ );
+
+ return (
+ <TableRowLink key={maybe(() => attribute.id)}>
+ <TableCell padding="checkbox" className={classes.checkboxCell}>
+ <Checkbox checked={isChecked} onChange={() => onToggle(attribute.id)} />
+ </TableCell>
+ <TableCell className={classes.wideCell}>
+ {attribute.name}
+ <Text size={2} fontWeight="light" display="block">
+ {attribute.slug}
+ </Text>
+ </TableCell>
+ </TableRowLink>
+ );
+ },
+ () =>
+ !loading && (
+ <TableRowLink>
+ <TableCell colSpan={2}>
+ <FormattedMessage {...messages.noMembersFound} />
+ </TableCell>
+ </TableRowLink>
+ ),
+ )}
+ </TableBody>
+ </ResponsiveTable>
+ </InfiniteScroll>
+ </Box>
+
+ <Box>
+ {errors.length > 0 &&
+ errors.map((error, errorIndex) => (
+ <Text display="block" color="critical1" key={errorIndex}>
+ {error}
+ </Text>
+ ))}
+ </Box>
- return (
- <TableRowLink key={maybe(() => attribute.id)}>
- <TableCell padding="checkbox" className={classes.checkboxCell}>
- <Checkbox checked={isChecked} onChange={() => onToggle(attribute.id)} />
- </TableCell>
- <TableCell className={classes.wideCell}>
- {attribute.name}
- <Text size={2} fontWeight="light" display="block">
- {attribute.slug}
- </Text>
- </TableCell>
- </TableRowLink>
- );
- },
- () =>
- !loading && (
- <TableRowLink>
- <TableCell colSpan={2}>
- <FormattedMessage {...messages.noMembersFound} />
- </TableCell>
- </TableRowLink>
- ),
- )}
- </TableBody>
- </ResponsiveTable>
- </InfiniteScroll>
- </DialogContent>
- {errors.length > 0 && (
- <DialogContent>
- {errors.map((error, errorIndex) => (
- <DialogContentText color="error" key={errorIndex}>
- {error}
- </DialogContentText>
- ))}
- </DialogContent>
- )}
- <DialogActions
- className={clsx(classes.actions, {
- [classes.dropShadow]: !isScrolledToBottom(anchor, position),
- })}
- >
- <BackButton onClick={onClose} />
- <ConfirmButton
- transitionState={confirmButtonState}
- type="submit"
- onClick={onSubmit}
- data-test-id="assign-and-save-button"
- >
- <FormattedMessage {...messages.assignButton} />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ transitionState={confirmButtonState}
+ type="submit"
+ onClick={onSubmit}
+ data-test-id="assign-and-save-button"
+ >
+ <FormattedMessage {...messages.assignButton} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
index 63065afbd32..5915a0fa8ac 100644
--- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx
+++ b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
@@ -1,19 +1,12 @@
import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableRowLink from "@dashboard/components/TableRowLink";
import useSearchQuery from "@dashboard/hooks/useSearchQuery";
import useScrollableDialogStyle from "@dashboard/styles/useScrollableDialogStyle";
import { DialogProps, FetchMoreProps, Node } from "@dashboard/types";
-import {
- CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
+import { CircularProgress, TableBody, TableCell, TextField } from "@material-ui/core";
+import { Box } from "@saleor/macaw-ui-next";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
@@ -80,15 +73,10 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
};
return (
- <Dialog
- onClose={handleClose}
- open={open}
- classes={{ paper: scrollableDialogClasses.dialog }}
- fullWidth
- maxWidth="sm"
- >
- <DialogTitle disableTypography>{labels.title}</DialogTitle>
- <DialogContent>
+ <DashboardModal onChange={handleClose} open={open}>
+ <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
+ <DashboardModal.Title>{labels.title}</DashboardModal.Title>
+
<TextField
name="query"
value={query}
@@ -101,64 +89,66 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
endAdornment: loading && <CircularProgress size={16} />,
}}
/>
- </DialogContent>
- <DialogContent className={scrollableDialogClasses.scrollArea} id={scrollableTargetId}>
- <InfiniteScroll
- dataLength={containers?.length}
- next={onFetchMore}
- hasMore={hasMore}
- scrollThreshold="100px"
- loader={
- <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
- <CircularProgress size={16} />
- </div>
- }
- scrollableTarget={scrollableTargetId}
- >
- <ResponsiveTable>
- <TableBody>
- {containers?.map(container => {
- const isSelected = !!selectedContainers.find(
- selectedContainer => selectedContainer.id === container.id,
- );
- return (
- <TableRowLink key={container.id} data-test-id="dialog-row">
- <TableCell padding="checkbox" className={classes.checkboxCell}>
- <Checkbox
- checked={isSelected}
- onChange={() =>
- handleContainerAssign(
- container,
- isSelected,
- selectedContainers,
- setSelectedContainers,
- )
- }
- />
- </TableCell>
- <TableCell className={classes.wideCell} data-test-id={container.name}>
- {container.name}
- </TableCell>
- </TableRowLink>
- );
- })}
- </TableBody>
- </ResponsiveTable>
- </InfiniteScroll>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- data-test-id="assign-and-save-button"
- transitionState={confirmButtonState}
- type="submit"
- onClick={handleSubmit}
- >
- {labels.confirmBtn}
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ <Box className={scrollableDialogClasses.scrollArea} id={scrollableTargetId}>
+ <InfiniteScroll
+ dataLength={containers?.length}
+ next={onFetchMore}
+ hasMore={hasMore}
+ scrollThreshold="100px"
+ loader={
+ <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+ <CircularProgress size={16} />
+ </div>
+ }
+ scrollableTarget={scrollableTargetId}
+ >
+ <ResponsiveTable>
+ <TableBody>
+ {containers?.map(container => {
+ const isSelected = !!selectedContainers.find(
+ selectedContainer => selectedContainer.id === container.id,
+ );
+
+ return (
+ <TableRowLink key={container.id} data-test-id="dialog-row">
+ <TableCell padding="checkbox" className={classes.checkboxCell}>
+ <Checkbox
+ checked={isSelected}
+ onChange={() =>
+ handleContainerAssign(
+ container,
+ isSelected,
+ selectedContainers,
+ setSelectedContainers,
+ )
+ }
+ />
+ </TableCell>
+ <TableCell className={classes.wideCell} data-test-id={container.name}>
+ {container.name}
+ </TableCell>
+ </TableRowLink>
+ );
+ })}
+ </TableBody>
+ </ResponsiveTable>
+ </InfiniteScroll>
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ data-test-id="assign-and-save-button"
+ transitionState={confirmButtonState}
+ type="submit"
+ onClick={handleSubmit}
+ >
+ {labels.confirmBtn}
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 35cf33ea3dc..967a55f2bb0 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableCellAvatar from "@dashboard/components/TableCellAvatar";
import TableRowLink from "@dashboard/components/TableRowLink";
@@ -8,17 +9,8 @@ import useSearchQuery from "@dashboard/hooks/useSearchQuery";
import { maybe } from "@dashboard/misc";
import useScrollableDialogStyle from "@dashboard/styles/useScrollableDialogStyle";
import { DialogProps, FetchMoreProps } from "@dashboard/types";
-import {
- CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { CircularProgress, TableBody, TableCell, TextField } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React, { useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage, useIntl } from "react-intl";
@@ -113,17 +105,12 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
};
return (
- <Dialog
- onClose={handleClose}
- open={open}
- classes={{ paper: scrollableDialogClasses.dialog }}
- fullWidth
- maxWidth="sm"
- >
- <DialogTitle disableTypography>
- <FormattedMessage {...messages.assignVariantDialogHeader} />
- </DialogTitle>
- <DialogContent>
+ <DashboardModal onChange={handleClose} open={open}>
+ <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
+ <DashboardModal.Title>
+ <FormattedMessage {...messages.assignVariantDialogHeader} />
+ </DashboardModal.Title>
+
<TextField
name="query"
value={query}
@@ -136,73 +123,75 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
endAdornment: loading && <CircularProgress size={16} />,
}}
/>
- </DialogContent>
- <DialogContent className={scrollableDialogClasses.scrollArea} id={scrollableTargetId}>
- <InfiniteScroll
- dataLength={products?.length ?? 0}
- next={onFetchMore}
- hasMore={hasMore}
- scrollThreshold="100px"
- loader={
- <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
- <CircularProgress size={16} />
- </div>
- }
- scrollableTarget={scrollableTargetId}
- >
- <ResponsiveTable key="table">
- <TableBody>
- {products &&
- products.map(product => {
- const isSelected = productsDict[product.id] || false;
- const isProductAvailable = isProductAvailableInVoucherChannels(
- product.channelListings,
- selectedChannels,
- );
- return (
- <TableRowLink key={product.id} data-test-id="assign-product-table-row">
- <TableCell padding="checkbox" className={classes.checkboxCell}>
- <Checkbox
- checked={isSelected}
- disabled={!isProductAvailable}
- onChange={() => handleChange(product.id)}
+ <Box className={scrollableDialogClasses.scrollArea} id={scrollableTargetId}>
+ <InfiniteScroll
+ dataLength={products?.length ?? 0}
+ next={onFetchMore}
+ hasMore={hasMore}
+ scrollThreshold="100px"
+ loader={
+ <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+ <CircularProgress size={16} />
+ </div>
+ }
+ scrollableTarget={scrollableTargetId}
+ >
+ <ResponsiveTable key="table">
+ <TableBody>
+ {products &&
+ products.map(product => {
+ const isSelected = productsDict[product.id] || false;
+ const isProductAvailable = isProductAvailableInVoucherChannels(
+ product.channelListings,
+ selectedChannels,
+ );
+
+ return (
+ <TableRowLink key={product.id} data-test-id="assign-product-table-row">
+ <TableCell padding="checkbox" className={classes.checkboxCell}>
+ <Checkbox
+ checked={isSelected}
+ disabled={!isProductAvailable}
+ onChange={() => handleChange(product.id)}
+ />
+ </TableCell>
+ <TableCellAvatar
+ className={classes.avatar}
+ thumbnail={maybe(() => product.thumbnail.url)}
+ style={{
+ opacity: !isProductAvailable ? 0.5 : 1,
+ }}
/>
- </TableCell>
- <TableCellAvatar
- className={classes.avatar}
- thumbnail={maybe(() => product.thumbnail.url)}
- style={{
- opacity: !isProductAvailable ? 0.5 : 1,
- }}
- />
- <TableCell className={classes.colName}>
- {product.name}
- {!isProductAvailable && productUnavailableText && (
- <Text display="block" size={1} color="default2">
- {productUnavailableText}
- </Text>
- )}
- </TableCell>
- </TableRowLink>
- );
- })}
- </TableBody>
- </ResponsiveTable>
- </InfiniteScroll>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- data-test-id="submit"
- transitionState={confirmButtonState}
- type="submit"
- onClick={handleSubmit}
- >
- <FormattedMessage {...messages.assignProductDialogButton} />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ <TableCell className={classes.colName}>
+ {product.name}
+ {!isProductAvailable && productUnavailableText && (
+ <Text display="block" size={1} color="default2">
+ {productUnavailableText}
+ </Text>
+ )}
+ </TableCell>
+ </TableRowLink>
+ );
+ })}
+ </TableBody>
+ </ResponsiveTable>
+ </InfiniteScroll>
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ data-test-id="submit"
+ transitionState={confirmButtonState}
+ type="submit"
+ onClick={handleSubmit}
+ >
+ <FormattedMessage {...messages.assignProductDialogButton} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/components/AssignVariantDialog/AssignVariantDialog.tsx b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
index e3f7102b43c..16b6583a26d 100644
--- a/src/components/AssignVariantDialog/AssignVariantDialog.tsx
+++ b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
@@ -1,5 +1,6 @@
// @ts-strict-ignore
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import Money from "@dashboard/components/Money";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableCellAvatar from "@dashboard/components/TableCellAvatar";
@@ -9,17 +10,8 @@ import useSearchQuery from "@dashboard/hooks/useSearchQuery";
import { maybe, renderCollection } from "@dashboard/misc";
import useScrollableDialogStyle from "@dashboard/styles/useScrollableDialogStyle";
import { DialogProps, FetchMoreProps, RelayToFlat } from "@dashboard/types";
-import {
- CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { CircularProgress, TableBody, TableCell, TextField } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage, useIntl } from "react-intl";
@@ -90,17 +82,12 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
};
return (
- <Dialog
- onClose={handleClose}
- open={open}
- classes={{ paper: scrollableDialogClasses.dialog }}
- fullWidth
- maxWidth="sm"
- >
- <DialogTitle disableTypography>
- <FormattedMessage {...messages.assignVariantDialogHeader} />
- </DialogTitle>
- <DialogContent>
+ <DashboardModal onChange={handleClose} open={open}>
+ <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
+ <DashboardModal.Title>
+ <FormattedMessage {...messages.assignVariantDialogHeader} />
+ </DashboardModal.Title>
+
<TextField
name="query"
value={query}
@@ -113,115 +100,117 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
endAdornment: loading && <CircularProgress size={16} />,
}}
/>
- </DialogContent>
- <DialogContent className={scrollableDialogClasses.scrollArea} id={scrollableTargetId}>
- <InfiniteScroll
- dataLength={variants?.length}
- next={onFetchMore}
- hasMore={hasMore}
- scrollThreshold="100px"
- loader={
- <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
- <CircularProgress size={16} />
- </div>
- }
- scrollableTarget={scrollableTargetId}
- >
- <ResponsiveTable key="table">
- <TableBody>
- {renderCollection(
- productChoices,
- (product, productIndex) => (
- <React.Fragment key={product ? product.id : "skeleton"}>
- <TableRowLink>
- <TableCell padding="checkbox" className={classes.productCheckboxCell}>
- <Checkbox
- checked={productsWithAllVariantsSelected[productIndex]}
- disabled={loading}
- onChange={() =>
- handleProductAssign(
- product,
- productIndex,
- productsWithAllVariantsSelected,
- variants,
- setVariants,
- )
- }
- />
- </TableCell>
- <TableCellAvatar
- className={classes.avatar}
- thumbnail={maybe(() => product.thumbnail.url)}
- />
- <TableCell className={classes.colName} colSpan={2}>
- {maybe(() => product.name)}
- </TableCell>
- </TableRowLink>
- {maybe(() => product.variants, []).map((variant, variantIndex) => (
- <TableRowLink key={variant.id} data-test-id="assign-variant-table-row">
- <TableCell />
- <TableCell className={classes.colVariantCheckbox}>
+
+ <Box className={scrollableDialogClasses.scrollArea} id={scrollableTargetId}>
+ <InfiniteScroll
+ dataLength={variants?.length}
+ next={onFetchMore}
+ hasMore={hasMore}
+ scrollThreshold="100px"
+ loader={
+ <div className={scrollableDialogClasses.loadMoreLoaderContainer}>
+ <CircularProgress size={16} />
+ </div>
+ }
+ scrollableTarget={scrollableTargetId}
+ >
+ <ResponsiveTable key="table">
+ <TableBody>
+ {renderCollection(
+ productChoices,
+ (product, productIndex) => (
+ <React.Fragment key={product ? product.id : "skeleton"}>
+ <TableRowLink>
+ <TableCell padding="checkbox" className={classes.productCheckboxCell}>
<Checkbox
- className={classes.variantCheckbox}
- checked={selectedVariantsToProductsMap[productIndex][variantIndex]}
+ checked={productsWithAllVariantsSelected[productIndex]}
disabled={loading}
onChange={() =>
- handleVariantAssign(
- variant,
+ handleProductAssign(
product,
- variantIndex,
productIndex,
+ productsWithAllVariantsSelected,
variants,
- selectedVariantsToProductsMap,
setVariants,
)
}
/>
</TableCell>
- <TableCell className={classes.colName}>
- <div>{variant.name}</div>
- <div className={classes.grayText}>
- <FormattedMessage
- {...messages.assignVariantDialogSKU}
- values={{
- sku: variant.sku,
- }}
- />
- </div>
- </TableCell>
- <TableCell className={classes.textRight}>
- {variant?.channelListings[0]?.price && (
- <Money money={variant.channelListings[0].price} />
- )}
+ <TableCellAvatar
+ className={classes.avatar}
+ thumbnail={maybe(() => product.thumbnail.url)}
+ />
+ <TableCell className={classes.colName} colSpan={2}>
+ {maybe(() => product.name)}
</TableCell>
</TableRowLink>
- ))}
- </React.Fragment>
- ),
- () => (
- <Text className={classes.noContentText}>
- {query
- ? intl.formatMessage(messages.noProductsInQuery)
- : intl.formatMessage(messages.noProductsInChannel)}
- </Text>
- ),
- )}
- </TableBody>
- </ResponsiveTable>
- </InfiniteScroll>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- data-test-id="submit"
- transitionState={confirmButtonState}
- type="submit"
- onClick={handleSubmit}
- >
- <FormattedMessage {...messages.assignVariantDialogButton} />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ {maybe(() => product.variants, []).map((variant, variantIndex) => (
+ <TableRowLink key={variant.id} data-test-id="assign-variant-table-row">
+ <TableCell />
+ <TableCell className={classes.colVariantCheckbox}>
+ <Checkbox
+ className={classes.variantCheckbox}
+ checked={selectedVariantsToProductsMap[productIndex][variantIndex]}
+ disabled={loading}
+ onChange={() =>
+ handleVariantAssign(
+ variant,
+ product,
+ variantIndex,
+ productIndex,
+ variants,
+ selectedVariantsToProductsMap,
+ setVariants,
+ )
+ }
+ />
+ </TableCell>
+ <TableCell className={classes.colName}>
+ <div>{variant.name}</div>
+ <div className={classes.grayText}>
+ <FormattedMessage
+ {...messages.assignVariantDialogSKU}
+ values={{
+ sku: variant.sku,
+ }}
+ />
+ </div>
+ </TableCell>
+ <TableCell className={classes.textRight}>
+ {variant?.channelListings[0]?.price && (
+ <Money money={variant.channelListings[0].price} />
+ )}
+ </TableCell>
+ </TableRowLink>
+ ))}
+ </React.Fragment>
+ ),
+ () => (
+ <Text className={classes.noContentText}>
+ {query
+ ? intl.formatMessage(messages.noProductsInQuery)
+ : intl.formatMessage(messages.noProductsInChannel)}
+ </Text>
+ ),
+ )}
+ </TableBody>
+ </ResponsiveTable>
+ </InfiniteScroll>
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ data-test-id="submit"
+ transitionState={confirmButtonState}
+ type="submit"
+ onClick={handleSubmit}
+ >
+ <FormattedMessage {...messages.assignVariantDialogButton} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/components/DevModePanel/DevModePanel.tsx b/src/components/DevModePanel/DevModePanel.tsx
index 67f7e1c0a52..3bf057ddb73 100644
--- a/src/components/DevModePanel/DevModePanel.tsx
+++ b/src/components/DevModePanel/DevModePanel.tsx
@@ -1,8 +1,7 @@
// @ts-strict-ignore
import { useDashboardTheme } from "@dashboard/components/GraphiQL/styles";
+import { DashboardModal } from "@dashboard/components/Modal";
import { createGraphiQLFetcher } from "@graphiql/toolkit";
-import { Dialog, DialogContent } from "@material-ui/core";
-import { DialogHeader } from "@saleor/macaw-ui";
import { createFetch } from "@saleor/sdk";
import React from "react";
import { useIntl } from "react-intl";
@@ -34,20 +33,16 @@ export const DevModePanel: React.FC = () => {
};
return (
- <Dialog
- maxWidth="xl"
- fullWidth
- open={isDevModeVisible}
- style={{ zIndex: 5 }}
- PaperProps={{ style: { height: "100%" } }}
- >
- <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
- <DialogHeader onClose={() => setDevModeVisibility(false)}>
- {intl.formatMessage(messages.title)}
- </DialogHeader>
- <DialogContent style={{ padding: 0, margin: 1, overflowY: "auto" }}>
+ <DashboardModal open={isDevModeVisible} onChange={() => setDevModeVisibility(false)}>
+ <DashboardModal.Content size="xl" __gridTemplateRows="auto 1fr" height="100%">
+ <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
+ <DashboardModal.Title display="flex" justifyContent="space-between">
+ {intl.formatMessage(messages.title)}
+ <DashboardModal.Close onClose={() => setDevModeVisibility(false)} />
+ </DashboardModal.Title>
+
<PlainGraphiQL query={devModeContent} variables={variables} fetcher={fetcher} />
- </DialogContent>
- </Dialog>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/components/DryRun/DryRun.tsx b/src/components/DryRun/DryRun.tsx
index 531281d259d..f3965f02d8c 100644
--- a/src/components/DryRun/DryRun.tsx
+++ b/src/components/DryRun/DryRun.tsx
@@ -1,18 +1,12 @@
// @ts-strict-ignore
import Grid from "@dashboard/components/Grid";
+import { DashboardModal } from "@dashboard/components/Modal";
import { useStyles } from "@dashboard/custom-apps/components/WebhookEvents/styles";
import { useTriggerWebhookDryRunMutation, WebhookEventTypeSyncEnum } from "@dashboard/graphql";
-import {
- capitalize,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
-} from "@material-ui/core";
+import { capitalize } from "@material-ui/core";
import {
Alert,
Button,
- DialogHeader,
List,
ListBody,
ListHeader,
@@ -73,22 +67,30 @@ const DryRun: React.FC<DryRunProps> = ({
if (syncEvents.length > 0) {
return (
- <Dialog open={showDialog} fullWidth maxWidth="md" data-test-id="dry-run">
- <DialogHeader onClose={closeDialog}>{intl.formatMessage(messages.header)}</DialogHeader>
- <DialogContent style={{ overflow: "scroll" }}>
+ <DashboardModal onChange={closeDialog} open={showDialog}>
+ <DashboardModal.Content size="lg" data-test-id="dry-run">
+ <DashboardModal.Title display="flex" justifyContent="space-between">
+ {intl.formatMessage(messages.header)}
+ <DashboardModal.Close onClose={closeDialog} />
+ </DashboardModal.Title>
+
<Alert variant="error" close={false}>
<Text>{intl.formatMessage(messages.unavailableSyncEvents)}</Text>
</Alert>
- </DialogContent>
- </Dialog>
+ </DashboardModal.Content>
+ </DashboardModal>
);
}
return (
- <Dialog open={showDialog} fullWidth maxWidth="md" data-test-id="dry-run">
- <DialogHeader onClose={closeDialog}>{intl.formatMessage(messages.header)}</DialogHeader>
- <DialogContent style={{ overflow: "scroll" }}>
- <DialogContentText>{intl.formatMessage(messages.selectObject)}</DialogContentText>
+ <DashboardModal onChange={closeDialog} open={showDialog}>
+ <DashboardModal.Content size="lg" data-test-id="dry-run">
+ <DashboardModal.Title display="flex" justifyContent="space-between">
+ {intl.formatMessage(messages.header)}
+ <DashboardModal.Close onClose={closeDialog} />
+ </DashboardModal.Title>
+
+ <Text>{intl.formatMessage(messages.selectObject)}</Text>
{!!unavailableObjects.length && (
<Alert variant="warning" close={false} className="remove-icon-background">
@@ -147,13 +149,14 @@ const DryRun: React.FC<DryRunProps> = ({
)}
</div>
</Grid>
- </DialogContent>
- <DialogActions>
- <Button color="primary" variant="primary" onClick={dryRun} disabled={!object}>
- {intl.formatMessage(messages.run)}
- </Button>
- </DialogActions>
- </Dialog>
+
+ <DashboardModal.Actions>
+ <Button color="primary" variant="primary" onClick={dryRun} disabled={!object}>
+ {intl.formatMessage(messages.run)}
+ </Button>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/components/Form/ExitFormDialog.test.tsx b/src/components/Form/ExitFormDialog.test.tsx
index 8a2b8a80a25..0cf12f1846f 100644
--- a/src/components/Form/ExitFormDialog.test.tsx
+++ b/src/components/Form/ExitFormDialog.test.tsx
@@ -43,7 +43,7 @@ describe("ExitFormDialog", () => {
// Act
const { getByTestId } = render(<ExitFormDialog {...props} />);
- await user.click(getByTestId("keep-editing"));
+ await user.click(getByTestId("back"));
// Assert
expect(props.onClose).toHaveBeenCalled();
});
diff --git a/src/components/Form/ExitFormDialog.tsx b/src/components/Form/ExitFormDialog.tsx
index b9589edc42f..1589fc605b5 100644
--- a/src/components/Form/ExitFormDialog.tsx
+++ b/src/components/Form/ExitFormDialog.tsx
@@ -1,34 +1,11 @@
-import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
-import { Button, Dialog, DialogContent, makeStyles } from "@material-ui/core";
-import { DialogHeader } from "@saleor/macaw-ui";
+import BackButton from "@dashboard/components/BackButton";
+import { DashboardModal } from "@dashboard/components/Modal";
+import { Button } from "@saleor/macaw-ui-next";
import React from "react";
import { useIntl } from "react-intl";
import { exitFormPromptMessages as messages } from "./messages";
-const useStyles = makeStyles(
- () => ({
- container: {
- width: "100vw",
- height: "100vh",
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- },
- buttonsContainer: {
- display: "flex",
- justifyContent: "flex-end",
- },
- dialogContent: {
- "@media (min-width: 800px)": {
- minWidth: 500,
- },
- paddingTop: 0,
- },
- }),
- { name: "ExitFormPrompt" },
-);
-
interface ExitFormDialogProps {
onClose: () => void;
onLeave: () => void;
@@ -36,31 +13,24 @@ interface ExitFormDialogProps {
}
const ExitFormDialog: React.FC<ExitFormDialogProps> = ({ onLeave, onClose, isOpen }) => {
- const classes = useStyles();
const intl = useIntl();
return (
- <Dialog className={classes.container} open={isOpen} onClose={onClose}>
- <DialogHeader onClose={onClose}>
- {intl.formatMessage(messages.unableToSaveTitle)}
- </DialogHeader>
- <DialogContent className={classes.dialogContent}>
- <div className={classes.buttonsContainer}>
- <Button onClick={onClose} data-test-id="keep-editing">
- {intl.formatMessage(messages.keepEditing)}
- </Button>
- <HorizontalSpacer />
- <Button
- variant="contained"
- color="primary"
- onClick={onLeave}
- data-test-id="ignore-changes"
- >
+ <DashboardModal open={isOpen} onChange={onClose}>
+ <DashboardModal.Content size="sm">
+ <DashboardModal.Title display="flex" justifyContent="space-between">
+ {intl.formatMessage(messages.unableToSaveTitle)}
+ <DashboardModal.Close onClose={onClose} />
+ </DashboardModal.Title>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose}>{intl.formatMessage(messages.keepEditing)}</BackButton>
+ <Button variant="primary" onClick={onLeave} data-test-id="ignore-changes">
{intl.formatMessage(messages.ignoreChanges)}
</Button>
- </div>
- </DialogContent>
- </Dialog>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/components/Modal/Content.tsx b/src/components/Modal/Content.tsx
index cbc455b4a18..964b682dda5 100644
--- a/src/components/Modal/Content.tsx
+++ b/src/components/Modal/Content.tsx
@@ -1,12 +1,23 @@
import { Box, Modal, PropsWithBox } from "@saleor/macaw-ui-next";
import React, { ReactNode } from "react";
+export type ContentSize = "xs" | "sm" | "md" | "lg" | "xl";
+
type ContentProps = PropsWithBox<{
children: ReactNode;
disableAutofocus?: boolean;
+ size: ContentSize;
}>;
-export const Content = ({ children, disableAutofocus, ...rest }: ContentProps) => {
+const sizes: Record<ContentSize, number> = {
+ xs: 444,
+ sm: 600,
+ md: 960,
+ lg: 1280,
+ xl: 1920,
+};
+
+export const Content = ({ children, disableAutofocus, size, ...rest }: ContentProps) => {
return (
<Modal.Content disableAutofocus={disableAutofocus}>
<Box
@@ -21,9 +32,12 @@ export const Content = ({ children, disableAutofocus, ...rest }: ContentProps) =
borderWidth={1}
borderColor="default1"
padding={6}
+ __maxHeight="calc(100vh - 100px)"
+ __width="calc(100% - 64px)"
display="grid"
gap={6}
- __maxHeight="calc(100vh - 100px)"
+ __maxWidth={sizes[size]}
+ overflowX="hidden"
overflowY="auto"
{...rest}
>
diff --git a/src/components/Modal/Grid.tsx b/src/components/Modal/Grid.tsx
new file mode 100644
index 00000000000..c44999468e8
--- /dev/null
+++ b/src/components/Modal/Grid.tsx
@@ -0,0 +1,10 @@
+import { Box, PropsWithBox } from "@saleor/macaw-ui-next";
+import React from "react";
+
+export const Grid = ({ children, ...rest }: PropsWithBox<{ children: React.ReactNode }>) => {
+ return (
+ <Box display="grid" gap={6} width="100%" __maxHeight="calc(100vh - 150px)" {...rest}>
+ {children}
+ </Box>
+ );
+};
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index eabccc6a813..fbcb28fd223 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -1,15 +1,16 @@
import { Actions } from "./Actions";
import { Close } from "./Close";
-import { Content } from "./Content";
+import { Content, ContentSize } from "./Content";
+import { Grid } from "./Grid";
import { Root } from "./Root";
import { Title } from "./Title";
-export const DASHBOARD_MODAL_WIDTH = 600;
-export const DASHBOARD_MODAL_WIDTH_SMALL = 444;
+export type DashboardModalContentSize = ContentSize;
export const DashboardModal = Object.assign(Root, {
Title,
Content,
Actions,
Close,
+ Grid,
});
diff --git a/src/components/NavigatorSearch/NavigatorSearch.tsx b/src/components/NavigatorSearch/NavigatorSearch.tsx
index 3d21b627a77..d68594e456d 100644
--- a/src/components/NavigatorSearch/NavigatorSearch.tsx
+++ b/src/components/NavigatorSearch/NavigatorSearch.tsx
@@ -140,8 +140,8 @@ const NavigatorSearch: React.FC = () => {
return (
<DashboardModal open={isNavigatorVisible} onChange={setNavigatorVisibility}>
- <DashboardModal.Content backgroundColor="default1" padding={0}>
- <Box __height="500px" __width="640px">
+ <DashboardModal.Content size="sm" backgroundColor="default1" padding={0}>
+ <Box __height="500px" width="100%">
<Downshift
itemToString={(item: QuickSearchAction) => (item ? item.label : "")}
onSelect={(item: QuickSearchAction) => {
diff --git a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
index 017be3867c6..10ad42860ce 100644
--- a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
+++ b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
@@ -1,7 +1,7 @@
-// @ts-strict-ignore
import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import { buttonMessages } from "@dashboard/intl";
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -32,7 +32,7 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
}) => {
const intl = useIntl();
const [errors, setErrors] = React.useState(false);
- const handleErrors = data => {
+ const handleErrors = (data: SaveFilterTabDialogFormData) => {
if (data.name.trim().length) {
onSubmit(data);
setErrors(false);
@@ -42,18 +42,19 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
};
return (
- <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
- <DialogTitle disableTypography>
- <FormattedMessage
- id="P9YktI"
- defaultMessage="Save view preset"
- description="save preset, header"
- />
- </DialogTitle>
- <Form initial={initialForm} onSubmit={handleErrors}>
- {({ change, data, submit }) => (
- <>
- <DialogContent>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="xs">
+ <Form initial={initialForm} onSubmit={handleErrors}>
+ {({ change, data, submit }) => (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ <FormattedMessage
+ id="P9YktI"
+ defaultMessage="Save view preset"
+ description="save preset, header"
+ />
+ </DashboardModal.Title>
+
<TextField
autoFocus
fullWidth
@@ -69,23 +70,24 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
data-test-id="preset-name-text-field"
helperText={errors ? "This field is required" : null}
/>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} data-test-id="cancel-preset-button">
- <FormattedMessage {...buttonMessages.cancel} />
- </BackButton>
- <ConfirmButton
- transitionState={confirmButtonState}
- onClick={submit}
- data-test-id="save-preset-button"
- >
- <FormattedMessage {...buttonMessages.save} />
- </ConfirmButton>
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} data-test-id="cancel-preset-button">
+ <FormattedMessage {...buttonMessages.cancel} />
+ </BackButton>
+ <ConfirmButton
+ transitionState={confirmButtonState}
+ onClick={submit}
+ data-test-id="save-preset-button"
+ >
+ <FormattedMessage {...buttonMessages.save} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
index 6a894956eb6..6990828d6e3 100644
--- a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
+++ b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
@@ -1,14 +1,12 @@
-// @ts-strict-ignore
import BackButton from "@dashboard/components/BackButton";
-import CardSpacer from "@dashboard/components/CardSpacer";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { DashboardModal } from "@dashboard/components/Modal";
import { getApiUrl } from "@dashboard/config";
import { SubmitPromise } from "@dashboard/hooks/useForm";
import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
import { buttonMessages } from "@dashboard/intl";
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
import { Box, Button, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -37,11 +35,12 @@ const tokenPaperStyles = {
} as const;
const createHeadersString = (token: string) => `{\n "authorization": "Bearer ${token}"\n}`;
+
const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
const { confirmButtonState, open, token, onClose, onCreate } = props;
const [step, setStep] = React.useState<TokenCreateStep>("form");
const intl = useIntl();
- const headers = createHeadersString(token);
+ const headers = createHeadersString(token ?? "");
React.useEffect(() => {
if (token !== undefined) {
@@ -57,14 +56,15 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
};
return (
- <Dialog open={open} fullWidth maxWidth="sm">
- <Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
- {({ change, data, submit }) => (
- <>
- <DialogTitle disableTypography>
- <FormattedMessage id="T5nU7u" defaultMessage="Create Token" description="header" />
- </DialogTitle>
- <DialogContent>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
+ {({ change, data, submit }) => (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ <FormattedMessage id="T5nU7u" defaultMessage="Create Token" description="header" />
+ </DashboardModal.Title>
+
{step === "form" ? (
<>
<Text>
@@ -73,7 +73,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
defaultMessage="Access token is used to authenticate service accounts"
/>
</Text>
- <FormSpacer />
+
<TextField
label={intl.formatMessage({
id: "0DRBjg",
@@ -93,15 +93,21 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
defaultMessage="Make sure to save token, you won’t be able to see it again."
/>
</Text>
- <CardSpacer />
+
<Box {...tokenPaperStyles}>
<Text size={4} fontWeight="medium">
<FormattedMessage id="5ZxAiY" defaultMessage="Token" />
</Text>
+
<Text data-test-id="generated-token" display="block">
<Mono>{token}</Mono>
</Text>
- <Button variant="secondary" marginTop={2} onClick={() => handleCopy(token)}>
+
+ <Button
+ variant="secondary"
+ marginTop={2}
+ onClick={() => handleCopy(token ?? "")}
+ >
<FormattedMessage
id="HVFq//"
defaultMessage="Copy token"
@@ -109,14 +115,16 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
/>
</Button>
</Box>
- <CardSpacer />
+
<Box {...tokenPaperStyles}>
<Text size={4} fontWeight="medium">
<FormattedMessage id="Wm+KUd" defaultMessage="Headers" />
</Text>
+
<Text data-test-id="generated-headers" display="block">
<Mono>{headers}</Mono>
</Text>
+
<Box
display="flex"
flexDirection="row"
@@ -140,36 +148,36 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
</Button>
</Box>
</Box>
- <CardSpacer />
</>
)}
- </DialogContent>
- <DialogActions>
- {step === "form" ? (
- <>
- <BackButton marginRight={1} onClick={onClose} />
- <ConfirmButton
- data-test-id="submit"
- transitionState={confirmButtonState}
- onClick={submit}
- >
- <FormattedMessage
- id="isM94c"
- defaultMessage="Create"
- description="create service token, button"
- />
- </ConfirmButton>
- </>
- ) : (
- <Button variant="primary" onClick={onClose} data-test-id="done">
- <FormattedMessage {...buttonMessages.done} />
- </Button>
- )}
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+
+ <DashboardModal.Actions>
+ {step === "form" ? (
+ <>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ data-test-id="submit"
+ transitionState={confirmButtonState}
+ onClick={submit}
+ >
+ <FormattedMessage
+ id="isM94c"
+ defaultMessage="Create"
+ description="create service token, button"
+ />
+ </ConfirmButton>
+ </>
+ ) : (
+ <Button variant="primary" onClick={onClose} data-test-id="done">
+ <FormattedMessage {...buttonMessages.done} />
+ </Button>
+ )}
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
index 354951bdf72..da5eb20ef81 100644
--- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
+++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
@@ -3,7 +3,7 @@ import { createCountryHandler } from "@dashboard/components/AddressEdit/createCo
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import {
AccountErrorFragment,
AddressFragment,
@@ -64,62 +64,64 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
return (
<DashboardModal onChange={onClose} open={open}>
- <Form
- initial={initialForm}
- onSubmit={data => {
- setCountryDisplayName("");
- handleSubmit(data);
- }}
- >
- {({ change, set, data, submit }) => {
- const countrySelect = createSingleAutocompleteSelectHandler(
- change,
- setCountryDisplayName,
- countryChoices,
- );
- const handleCountrySelect = createCountryHandler(countrySelect, set);
+ <DashboardModal.Content size="sm">
+ <Form
+ initial={initialForm}
+ onSubmit={data => {
+ setCountryDisplayName("");
+ handleSubmit(data);
+ }}
+ >
+ {({ change, set, data, submit }) => {
+ const countrySelect = createSingleAutocompleteSelectHandler(
+ change,
+ setCountryDisplayName,
+ countryChoices,
+ );
+ const handleCountrySelect = createCountryHandler(countrySelect, set);
- return (
- <DashboardModal.Content __maxWidth={DASHBOARD_MODAL_WIDTH} width="100%">
- <DashboardModal.Title>
- {variant === "create" ? (
- <FormattedMessage
- id="W0kQd+"
- defaultMessage="Add Address"
- description="dialog title"
- />
- ) : (
- <FormattedMessage
- id="gQGUsN"
- defaultMessage="Edit Address"
- description="dialog title"
- />
- )}
- </DashboardModal.Title>
+ return (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ {variant === "create" ? (
+ <FormattedMessage
+ id="W0kQd+"
+ defaultMessage="Add Address"
+ description="dialog title"
+ />
+ ) : (
+ <FormattedMessage
+ id="gQGUsN"
+ defaultMessage="Edit Address"
+ description="dialog title"
+ />
+ )}
+ </DashboardModal.Title>
- <AddressEdit
- countries={countryChoices}
- data={data}
- countryDisplayValue={countryDisplayName}
- errors={dialogErrors}
- onChange={change}
- onCountryChange={handleCountrySelect}
- />
+ <AddressEdit
+ countries={countryChoices}
+ data={data}
+ countryDisplayValue={countryDisplayName}
+ errors={dialogErrors}
+ onChange={change}
+ onCountryChange={handleCountrySelect}
+ />
- <DashboardModal.Actions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- transitionState={confirmButtonState}
- onClick={submit}
- data-test-id="submit"
- >
- <FormattedMessage {...buttonMessages.save} />
- </ConfirmButton>
- </DashboardModal.Actions>
- </DashboardModal.Content>
- );
- }}
- </Form>
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ transitionState={confirmButtonState}
+ onClick={submit}
+ data-test-id="submit"
+ >
+ <FormattedMessage {...buttonMessages.save} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ );
+ }}
+ </Form>
+ </DashboardModal.Content>
</DashboardModal>
);
};
diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
index 0d6814fa04c..4897486b9ce 100644
--- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
+++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
@@ -1,26 +1,16 @@
-// @ts-strict-ignore
import BackButton from "@dashboard/components/BackButton";
import Checkbox from "@dashboard/components/Checkbox";
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";
+import { DashboardModal } from "@dashboard/components/Modal";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableRowLink from "@dashboard/components/TableRowLink";
import { CountryWithCodeFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
import { fuzzySearch } from "@dashboard/misc";
-import useScrollableDialogStyle from "@dashboard/styles/useScrollableDialogStyle";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { TableBody, TableCell, TextField } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -44,7 +34,6 @@ export interface DiscountCountrySelectDialogProps {
const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> = props => {
const { confirmButtonState, onClose, countries, open, initial, onConfirm } = props;
const classes = useStyles(props);
- const scrollableDialogClasses = useScrollableDialogStyle();
const intl = useIntl();
const initialForm: FormData = {
allCountries: true,
@@ -53,34 +42,41 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
};
return (
- <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
- <Form initial={initialForm} onSubmit={onConfirm} className={scrollableDialogClasses.form}>
- {({ data, change }) => {
- const countrySelectionMap = countries.reduce((acc, country) => {
- acc[country.code] = !!data.countries.find(
- selectedCountries => selectedCountries === country.code,
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <Form initial={initialForm} onSubmit={onConfirm}>
+ {({ data, change }) => {
+ const countrySelectionMap = countries.reduce(
+ (acc, country) => {
+ acc[country.code] = !!data.countries.find(
+ selectedCountries => selectedCountries === country.code,
+ );
+
+ return acc;
+ },
+ {} as Record<string, boolean>,
);
- return acc;
- }, {});
+ return (
+ <DashboardModal.Grid
+ __gridTemplateRows="auto auto auto auto auto 1fr auto"
+ height="100%"
+ >
+ <DashboardModal.Title>
+ <FormattedMessage
+ id="cvVIV/"
+ defaultMessage="Assign Countries"
+ description="dialog header"
+ />
+ </DashboardModal.Title>
- return (
- <>
- <DialogTitle disableTypography>
- <FormattedMessage
- id="cvVIV/"
- defaultMessage="Assign Countries"
- description="dialog header"
- />
- </DialogTitle>
- <DialogContent>
<Text>
<FormattedMessage
id="dWK/Ck"
defaultMessage="Choose countries, you want voucher to be limited to, from the list below"
/>
</Text>
- <FormSpacer />
+
<TextField
name="query"
value={data.query}
@@ -97,9 +93,9 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
})}
fullWidth
/>
- <FormSpacer />
+
<Hr />
- <FormSpacer />
+
<Text fontSize={3}>
<FormattedMessage
id="wgA48T"
@@ -107,59 +103,61 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
description="country selection"
/>
</Text>
- </DialogContent>
- <DialogContent className={scrollableDialogClasses.scrollArea}>
- <ResponsiveTable>
- <TableBody>
- {fuzzySearch(countries, data.query, ["country"]).map(country => {
- const isChecked = countrySelectionMap[country.code];
- return (
- <TableRowLink key={country.code}>
- <TableCell className={classes.wideCell}>{country.country}</TableCell>
- <TableCell padding="checkbox" className={classes.checkboxCell}>
- <Checkbox
- checked={isChecked}
- onChange={() =>
- isChecked
- ? change({
- target: {
- name: "countries" as keyof FormData,
- value: data.countries.filter(
- selectedCountries => selectedCountries !== country.code,
- ),
- },
- } as any)
- : change({
- target: {
- name: "countries" as keyof FormData,
- value: [...data.countries, country.code],
- },
- } as any)
- }
- />
- </TableCell>
- </TableRowLink>
- );
- })}
- </TableBody>
- </ResponsiveTable>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton transitionState={confirmButtonState} type="submit">
- <FormattedMessage
- id="zZCCqz"
- defaultMessage="Assign countries"
- description="button"
- />
- </ConfirmButton>
- </DialogActions>
- </>
- );
- }}
- </Form>
- </Dialog>
+ <Box height="100%" overflowY="auto">
+ <ResponsiveTable>
+ <TableBody>
+ {fuzzySearch(countries, data.query, ["country"]).map(country => {
+ const isChecked = countrySelectionMap[country.code];
+
+ return (
+ <TableRowLink key={country.code}>
+ <TableCell className={classes.wideCell}>{country.country}</TableCell>
+ <TableCell padding="checkbox" className={classes.checkboxCell}>
+ <Checkbox
+ checked={!!isChecked}
+ onChange={() =>
+ isChecked
+ ? change({
+ target: {
+ name: "countries" as keyof FormData,
+ value: data.countries.filter(
+ selectedCountries => selectedCountries !== country.code,
+ ),
+ },
+ } as any)
+ : change({
+ target: {
+ name: "countries" as keyof FormData,
+ value: [...data.countries, country.code],
+ },
+ } as any)
+ }
+ />
+ </TableCell>
+ </TableRowLink>
+ );
+ })}
+ </TableBody>
+ </ResponsiveTable>
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton transitionState={confirmButtonState} type="submit">
+ <FormattedMessage
+ id="zZCCqz"
+ defaultMessage="Assign countries"
+ description="button"
+ />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ );
+ }}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx b/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
index 9767b9d69d7..52663812c6a 100644
--- a/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
+++ b/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
@@ -20,7 +20,7 @@ export const DiscountDeleteModal = ({
}: DiscountDeleteModalProps) => {
return (
<DashboardModal open={open} onChange={onChange}>
- <DashboardModal.Content __minWidth={490}>
+ <DashboardModal.Content size="xs">
<DashboardModal.Title>
<FormattedMessage defaultMessage="Delete discount" id="ZrIt1W" />
</DashboardModal.Title>
diff --git a/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx b/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
index f7a41613452..012abd8fd4f 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
@@ -1,7 +1,7 @@
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import { DashboardModal } from "@dashboard/components/Modal";
import { buttonMessages } from "@dashboard/intl";
-import { Box, Button, Text } from "@saleor/macaw-ui-next";
+import { Button, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -24,17 +24,15 @@ export const RuleDeleteModal = ({
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content data-test-id="delete-rule-dialog">
+ <DashboardModal.Content size="xs" data-test-id="delete-rule-dialog">
<DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
{intl.formatMessage(messages.deleteRule)}
<DashboardModal.Close onClose={onClose} />
</DashboardModal.Title>
- <Box __width={390}>
- <Text>
- <FormattedMessage {...messages.deleteRuleDescription} />
- </Text>
- </Box>
+ <Text>
+ <FormattedMessage {...messages.deleteRuleDescription} />
+ </Text>
<DashboardModal.Actions>
<Button onClick={onClose} variant="secondary" data-test-id="cancel-delete-rule-button">
diff --git a/src/discounts/components/DiscountRules/componenets/RuleForm/RuleForm.tsx b/src/discounts/components/DiscountRules/componenets/RuleForm/RuleForm.tsx
index 3e774c16e68..fe4ae11ad2d 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleForm/RuleForm.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleForm/RuleForm.tsx
@@ -81,7 +81,7 @@ export const RuleForm = <ErrorCode,>({ errors, openPlayground }: RuleFormProps<E
return (
<RichTextContext.Provider value={richText}>
- <Box __width={650} __minHeight={515} __maxHeight="75vh" overflowY="auto">
+ <Box width="100%" __minHeight={515} __maxHeight="75vh" overflowY="auto">
<Box display="flex" flexDirection="column" gap={4} marginTop={4}>
<Box display="grid" __gridTemplateColumns="315px 1fr" gap={2}>
<RuleInputWrapper>
diff --git a/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx b/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
index cd8ec62222c..31d3d501e42 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
@@ -38,7 +38,7 @@ export const RuleFormModal = ({
return (
<DashboardModal open={true} onChange={onClose}>
- <DashboardModal.Content data-test-id="add-rule-dialog">
+ <DashboardModal.Content size="sm" data-test-id="add-rule-dialog">
<DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
<FormattedMessage {...(initialFormValues ? messages.editRule : messages.addRule)} />
<DashboardModal.Close onClose={onClose} />
diff --git a/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx b/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
index d2579c895e7..58f42296cb8 100644
--- a/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
+++ b/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
@@ -23,7 +23,7 @@ export const VoucherCodesDeleteDialog = ({
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content>
+ <DashboardModal.Content size="xs">
<DashboardModal.Title>
<FormattedMessage id="WMN0q+" defaultMessage="Delete voucher codes" />
</DashboardModal.Title>
diff --git a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
index 451a93d6747..785b55b1fe6 100644
--- a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
+++ b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
@@ -56,7 +56,7 @@ export const VoucherCodesGenerateDialog = ({
return (
<DashboardModal open={open} onChange={handleModalClose}>
- <DashboardModal.Content>
+ <DashboardModal.Content size="xs">
<DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
<Box display="grid" gap={3} __width={390}>
<Input
diff --git a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
index 3672be35a27..9c845512285 100644
--- a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
+++ b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
@@ -44,7 +44,7 @@ export const VoucherCodesManualDialog = ({
return (
<DashboardModal open={open} onChange={handleModalClose}>
- <DashboardModal.Content>
+ <DashboardModal.Content size="xs">
<DashboardModal.Title>
<FormattedMessage defaultMessage="Enter Voucher Code" id="giVGCH" />
</DashboardModal.Title>
diff --git a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
index a142223148b..c2645dab02f 100644
--- a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
+++ b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
@@ -108,7 +108,7 @@ const GiftCardBulkCreateDialog: React.FC<DialogProps> = ({ onClose, open }) => {
return (
<>
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content __maxWidth={600} __width="calc(100% - 64px)">
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
<ContentWithProgress>
{!loadingChannelCurrencies && (
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
index 65ceac00332..a8f0f7185e0 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
@@ -1,6 +1,6 @@
import { Button } from "@dashboard/components/Button";
+import { DashboardModal } from "@dashboard/components/Modal";
import { DialogProps } from "@dashboard/types";
-import { Dialog, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
import { Text } from "@saleor/macaw-ui-next";
import React, { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -26,25 +26,28 @@ const GiftCardBulkCreateSuccessDialog: React.FC<GiftCardBulkCreateSuccessDialogP
return (
<>
- <Dialog open={open} maxWidth="sm">
- <DialogTitle disableTypography>
- {intl.formatMessage(messages.bulkCreateIssuedTitle)}
- </DialogTitle>
- <DialogContent>
+ <DashboardModal open={open} onChange={onClose}>
+ <DashboardModal.Content size="sm">
+ <DashboardModal.Title>
+ {intl.formatMessage(messages.bulkCreateIssuedTitle)}
+ </DashboardModal.Title>
+
<Text>{intl.formatMessage(messages.bulkCreateIssuedExplanation)}</Text>
- </DialogContent>
- <DialogActions>
- <Button variant="secondary" onClick={() => setOpenEmailExport(true)}>
- <FormattedMessage {...messages.bulkCreateIssuedExportToEmail} />
- </Button>
- <Button variant="primary" onClick={onClose}>
- <FormattedMessage {...messages.bulkCreateIssuedAccept} />
- </Button>
- </DialogActions>
- </Dialog>
- <Dialog open={openEmailExport} maxWidth="sm">
+
+ <DashboardModal.Actions>
+ <Button variant="secondary" onClick={() => setOpenEmailExport(true)}>
+ <FormattedMessage {...messages.bulkCreateIssuedExportToEmail} />
+ </Button>
+ <Button variant="primary" onClick={onClose}>
+ <FormattedMessage {...messages.bulkCreateIssuedAccept} />
+ </Button>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
+
+ <DashboardModal onChange={onExportDialogClose} open={openEmailExport}>
<GiftCardExportDialogContent idsToExport={idsToExport} onClose={onExportDialogClose} />
- </Dialog>
+ </DashboardModal>
</>
);
};
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
index b2c56e2179d..9398f2d2ab3 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
@@ -1,5 +1,5 @@
// @ts-strict-ignore
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import { GiftCardCreateInput, useGiftCardCreateMutation } from "@dashboard/graphql";
import useCurrentDate from "@dashboard/hooks/useCurrentDate";
import useNotifier from "@dashboard/hooks/useNotifier";
@@ -76,11 +76,7 @@ const GiftCardCreateDialogContent: React.FC<GiftCardCreateDialogContentProps> =
};
return (
- <DashboardModal.Content
- __maxWidth={DASHBOARD_MODAL_WIDTH}
- width="100%"
- data-test-id="gift-card-dialog"
- >
+ <DashboardModal.Content size="sm" data-test-id="gift-card-dialog">
<DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
{cardCode ? (
<GiftCardCreateDialogCodeContent cardCode={cardCode} onClose={handleClose} />
diff --git a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
index d03992a7732..8c0c4ad2297 100644
--- a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
+++ b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
@@ -1,4 +1,5 @@
import { ConfirmButton } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import { Task } from "@dashboard/containers/BackgroundTasks/types";
import { useExportGiftCardsMutation, useGiftCardTotalCountQuery } from "@dashboard/graphql";
import useBackgroundTask from "@dashboard/hooks/useBackgroundTask";
@@ -11,7 +12,6 @@ import {
exportSettingsInitialFormDataWithIds,
} from "@dashboard/products/components/ProductExportDialog/types";
import { DialogProps } from "@dashboard/types";
-import { DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
import { Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -98,34 +98,35 @@ const GiftCardExportDialog: React.FC<
};
return (
- <>
- <DialogTitle disableTypography>
+ <DashboardModal.Content size="sm">
+ <DashboardModal.Title>
<FormattedMessage {...messages.title} />
- </DialogTitle>
- <DialogContent>
- <ContentWithProgress>
- {!loading && (
- <>
- <ExportDialogSettings
- errors={exportGiftCardsOpts?.data?.exportGiftCards?.errors ?? []}
- onChange={change}
- selectedItems={selectedIds?.length}
- data={data}
- exportScopeLabels={exportScopeLabels}
- allowScopeSelection={!hasIdsToExport}
- itemsQuantity={{
- filter: filteredGiftCardsCount,
- all: allGiftCardsCount,
- }}
- />
- <Text className={classes.note} fontSize={3}>
- {intl.formatMessage(messages.exportNote)}
- </Text>
- </>
- )}
- </ContentWithProgress>
- </DialogContent>
- <DialogActions>
+ </DashboardModal.Title>
+
+ <ContentWithProgress>
+ {!loading && (
+ <>
+ <ExportDialogSettings
+ errors={exportGiftCardsOpts?.data?.exportGiftCards?.errors ?? []}
+ onChange={change}
+ selectedItems={selectedIds?.length}
+ data={data}
+ exportScopeLabels={exportScopeLabels}
+ allowScopeSelection={!hasIdsToExport}
+ itemsQuantity={{
+ filter: filteredGiftCardsCount,
+ all: allGiftCardsCount,
+ }}
+ />
+
+ <Text className={classes.note} fontSize={3}>
+ {intl.formatMessage(messages.exportNote)}
+ </Text>
+ </>
+ )}
+ </ContentWithProgress>
+
+ <DashboardModal.Actions>
<ConfirmButton
transitionState={exportGiftCardsOpts.status}
variant="primary"
@@ -135,8 +136,8 @@ const GiftCardExportDialog: React.FC<
>
<FormattedMessage {...messages.confirmButtonLabel} />
</ConfirmButton>
- </DialogActions>
- </>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
);
};
diff --git a/src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx b/src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx
index ea7cb8ee5e8..ace1b84766e 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardResendCodeDialog/GiftCardResendCodeDialog.tsx
@@ -106,7 +106,6 @@ const GiftCardResendCodeDialog: React.FC<DialogProps> = ({ open, onClose }) => {
title={intl.formatMessage(messages.title)}
confirmButtonState={status}
disabled={loading}
- size="lg"
>
{loadingChannels ? (
<div className={progressClasses.progressContainer}>
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/GiftCardUpdateBalanceDialog.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/GiftCardUpdateBalanceDialog.tsx
index 2386f2c9788..2f5c6d83a1e 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/GiftCardUpdateBalanceDialog.tsx
+++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateBalanceDialog/GiftCardUpdateBalanceDialog.tsx
@@ -89,7 +89,6 @@ const GiftCardUpdateBalanceDialog: React.FC<DialogProps> = ({ open, onClose }) =
title={intl.formatMessage(messages.title)}
confirmButtonState={status}
disabled={loading}
- size="lg"
>
<Text>{intl.formatMessage(messages.subtitle)}</Text>
<CardSpacer />
diff --git a/src/giftCards/GiftCardsList/providers/GiftCardListDialogsProvider/GiftCardListDialogsProvider.tsx b/src/giftCards/GiftCardsList/providers/GiftCardListDialogsProvider/GiftCardListDialogsProvider.tsx
index e19dd8a300b..7671df2410a 100644
--- a/src/giftCards/GiftCardsList/providers/GiftCardListDialogsProvider/GiftCardListDialogsProvider.tsx
+++ b/src/giftCards/GiftCardsList/providers/GiftCardListDialogsProvider/GiftCardListDialogsProvider.tsx
@@ -6,7 +6,6 @@ import GiftCardExportDialogContent from "@dashboard/giftCards/GiftCardExportDial
import { giftCardListUrl } from "@dashboard/giftCards/urls";
import useNavigator from "@dashboard/hooks/useNavigator";
import createDialogActionHandlers from "@dashboard/utils/handlers/dialogActionHandlers";
-import { Dialog } from "@material-ui/core";
import React, { createContext, useContext } from "react";
import { GIFT_CARD_LIST_QUERY } from "../../queries";
@@ -78,9 +77,9 @@ const GiftCardListDialogsProvider: React.FC<GiftCardListDialogsProviderProps> =
<GiftCardCreateDialogContent onClose={onClose} refetchQueries={[GIFT_CARD_LIST_QUERY]} />
</DashboardModal>
<GiftCardListPageDeleteDialog open={isDialogOpen(DELETE)} onClose={onClose} />
- <Dialog open={isDialogOpen(EXPORT)} maxWidth="sm" onClose={onClose} fullWidth>
+ <DashboardModal open={isDialogOpen(EXPORT)} onChange={onClose}>
<GiftCardExportDialogContent onClose={onClose} />
- </Dialog>
+ </DashboardModal>
<GiftCardBulkCreateDialog open={isDialogOpen(BULK_CREATE)} onClose={onClose} />
</GiftCardListDialogsContext.Provider>
);
diff --git a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
index f75ed4b4c38..17421a42c50 100644
--- a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
+++ b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
@@ -1,11 +1,13 @@
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
+import { DashboardModal } from "@dashboard/components/Modal";
import { MenuErrorFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl";
import { getFormErrors } from "@dashboard/utils/errors";
import getMenuErrorMessage from "@dashboard/utils/errors/menu";
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
+import { Box } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -37,14 +39,19 @@ const MenuCreateDialog: React.FC<MenuCreateDialogProps> = ({
const formErrors = getFormErrors(["name"], errors);
return (
- <Dialog onClose={onClose} maxWidth="sm" fullWidth open={open}>
- <DialogTitle disableTypography data-test-id="create-menu-dialog-title">
- <FormattedMessage id="0OtaXa" defaultMessage="Create Menu" description="dialog header" />
- </DialogTitle>
- <Form initial={initialForm} onSubmit={onConfirm}>
- {({ change, data, submit }) => (
- <>
- <DialogContent>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <Form initial={initialForm} onSubmit={onConfirm}>
+ {({ change, data, submit }) => (
+ <Box display="grid" gap={6}>
+ <DashboardModal.Title data-test-id="create-menu-dialog-title">
+ <FormattedMessage
+ id="0OtaXa"
+ defaultMessage="Create Menu"
+ description="dialog header"
+ />
+ </DashboardModal.Title>
+
<TextField
data-test-id="menu-name-input"
disabled={disabled}
@@ -59,21 +66,22 @@ const MenuCreateDialog: React.FC<MenuCreateDialogProps> = ({
value={data.name}
onChange={change}
/>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- transitionState={confirmButtonState}
- onClick={submit}
- data-test-id="submit"
- >
- <FormattedMessage {...buttonMessages.save} />
- </ConfirmButton>
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ transitionState={confirmButtonState}
+ onClick={submit}
+ data-test-id="submit"
+ >
+ <FormattedMessage {...buttonMessages.save} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </Box>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
index 94c7c25ad01..e2ee5e48586 100644
--- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
+++ b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
@@ -207,6 +207,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
const handleSubmit = () => onSubmit(data);
return (
+ // TODO: MERX-813 Replace Dialog and AutocompleteSelectMenu
<Dialog
onClose={onClose}
open={open}
diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
index 6b23317f186..b570201cb71 100644
--- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
+++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
@@ -33,7 +33,7 @@ export const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
return (
<DashboardModal onChange={onClose} open={open}>
- <DashboardModal.Content>
+ <DashboardModal.Content size="sm">
<DashboardModal.Title data-test-id="dialog-title">
<FormattedMessage {...cancelOrderDialogMessages.dialogTitle} values={{ orderNumber }} />
</DashboardModal.Title>
@@ -47,7 +47,7 @@ export const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
</Text>
{errors.length > 0 &&
errors.map((err, index) => (
- <Text color="critical1" key={index} data-test-id="dialog-error">
+ <Text display="block" color="critical1" key={index} data-test-id="dialog-error">
{getOrderErrorMessage(err, intl)}
</Text>
))}
diff --git a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
index c35830277eb..5734cc952f0 100644
--- a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
+++ b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
@@ -1,53 +1,36 @@
-import { Button } from "@dashboard/components/Button";
+import { DashboardModal } from "@dashboard/components/Modal";
import { buttonMessages } from "@dashboard/intl";
import { DialogProps } from "@dashboard/types";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
-} from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
+import { Button, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage } from "react-intl";
-const useStyles = makeStyles(
- theme => ({
- button: {
- backgroundColor: theme.palette.error.main,
- },
- }),
- {
- name: "OrderCannotCancelOrderDialog",
- },
-);
const OrderCannotCancelOrderDialog: React.FC<DialogProps> = ({ open, onClose }) => {
- const classes = useStyles({});
-
return (
- <Dialog onClose={onClose} open={open} maxWidth="sm">
- <DialogTitle disableTypography>
- <FormattedMessage
- id="NhQboB"
- defaultMessage="Saleor couldn’t cancel order"
- description="dialog header"
- />
- </DialogTitle>
- <DialogContent>
- <DialogContentText>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <DashboardModal.Title>
+ <FormattedMessage
+ id="NhQboB"
+ defaultMessage="Saleor couldn’t cancel order"
+ description="dialog header"
+ />
+ </DashboardModal.Title>
+
+ <Text>
<FormattedMessage
id="b+jcaN"
defaultMessage="There are still fulfillments created for this order. Cancel the fulfillments first before you cancel the order."
/>
- </DialogContentText>
- </DialogContent>
- <DialogActions>
- <Button variant="primary" className={classes.button} onClick={onClose}>
- <FormattedMessage {...buttonMessages.ok} />
- </Button>
- </DialogActions>
- </Dialog>
+ </Text>
+
+ <DashboardModal.Actions>
+ <Button variant="error" onClick={onClose}>
+ <FormattedMessage {...buttonMessages.ok} />
+ </Button>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
index 09279f6ec95..b53aee503a7 100644
--- a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
+++ b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
@@ -1,6 +1,6 @@
// @ts-strict-ignore
import Debounce from "@dashboard/components/Debounce";
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import TableRowLink from "@dashboard/components/TableRowLink";
import { OrderFulfillLineFragment, WarehouseFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl";
@@ -13,16 +13,11 @@ import {
InputAdornment,
Radio,
RadioGroup,
+ Table,
TableCell,
TextField,
} from "@material-ui/core";
-import {
- Button,
- DialogTable,
- isScrolledToBottom,
- SearchIcon,
- useElementScroll,
-} from "@saleor/macaw-ui";
+import { Button, isScrolledToBottom, SearchIcon, useElementScroll } from "@saleor/macaw-ui";
import { Box, Skeleton, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -88,7 +83,7 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content __width={DASHBOARD_MODAL_WIDTH}>
+ <DashboardModal.Content size="sm" __gridTemplateRows="auto auto auto auto 1fr">
<DashboardModal.Title>
<Box display="flex" justifyContent="space-between">
<FormattedMessage {...messages.dialogTitle} />
@@ -138,53 +133,55 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
<FormattedMessage {...messages.warehouseListLabel} />
</Text>
- <DialogTable ref={setAnchor}>
- {filteredWarehouses ? (
- <RadioGroup
- value={selectedWarehouseId}
- onChange={handleChange}
- className={classes.tableBody}
- >
- {filteredWarehouses.map(warehouse => {
- const lineQuantityInWarehouse = getLineAvailableQuantityInWarehouse(
- line,
- warehouse,
- );
+ <Box ref={setAnchor} overflowY="auto">
+ <Table>
+ {filteredWarehouses ? (
+ <RadioGroup
+ value={selectedWarehouseId}
+ onChange={handleChange}
+ className={classes.tableBody}
+ >
+ {filteredWarehouses.map(warehouse => {
+ const lineQuantityInWarehouse = getLineAvailableQuantityInWarehouse(
+ line,
+ warehouse,
+ );
- return (
- <TableRowLink key={warehouse.id}>
- <TableCell className={classes.tableCell}>
- <FormControlLabel
- value={warehouse.id}
- control={<Radio color="primary" />}
- label={
- <div className={classes.radioLabelContainer}>
- <span className={classes.warehouseName}>{warehouse.name}</span>
- <Text>
- <FormattedMessage
- {...messages.productAvailability}
- values={{
- productCount: lineQuantityInWarehouse,
- }}
- />
- </Text>
- </div>
- }
- />
- {currentWarehouseId === warehouse?.id && (
- <Text display="inline-block" fontSize={3}>
- <FormattedMessage {...messages.currentSelection} />
- </Text>
- )}
- </TableCell>
- </TableRowLink>
- );
- })}
- </RadioGroup>
- ) : (
- <Skeleton />
- )}
- </DialogTable>
+ return (
+ <TableRowLink key={warehouse.id}>
+ <TableCell className={classes.tableCell}>
+ <FormControlLabel
+ value={warehouse.id}
+ control={<Radio color="primary" />}
+ label={
+ <div className={classes.radioLabelContainer}>
+ <span className={classes.warehouseName}>{warehouse.name}</span>
+ <Text>
+ <FormattedMessage
+ {...messages.productAvailability}
+ values={{
+ productCount: lineQuantityInWarehouse,
+ }}
+ />
+ </Text>
+ </div>
+ }
+ />
+ {currentWarehouseId === warehouse?.id && (
+ <Text display="inline-block" fontSize={3}>
+ <FormattedMessage {...messages.currentSelection} />
+ </Text>
+ )}
+ </TableCell>
+ </TableRowLink>
+ );
+ })}
+ </RadioGroup>
+ ) : (
+ <Skeleton />
+ )}
+ </Table>
+ </Box>
<DashboardModal.Actions>
<Button
diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
index 68a5b9bf497..6dc3c0a1d3f 100644
--- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
+++ b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
@@ -2,7 +2,7 @@
import Checkbox from "@dashboard/components/Checkbox";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import FormSpacer from "@dashboard/components/FormSpacer";
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import { AddressTypeInput } from "@dashboard/customers/types";
import {
AddressFragment,
@@ -218,188 +218,190 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
return (
<DashboardModal onChange={exitModal} open={open}>
- <OrderCustomerAddressesEditForm
- countryChoices={countryChoices}
- countries={countries}
- defaultShippingAddress={validatedDefaultShippingAddress}
- defaultBillingAddress={validatedDefaultBillingAddress}
- defaultCloneAddress={hasCustomerChanged}
- initial={{
- shippingAddress: orderShippingAddress,
- billingAddress: orderBillingAddress,
- }}
- onSubmit={handleContinue}
- >
- {({ change, data, handlers, submit }) => {
- const shippingAddressEditProps = getAddressEditProps(
- "shipping",
- data,
- handlers,
- change,
- dialogErrors,
- setAddressSearchState,
- addressEditCommonProps,
- );
- const billingAddressEditProps = getAddressEditProps(
- "billing",
- data,
- handlers,
- change,
- dialogErrors,
- setAddressSearchState,
- addressEditCommonProps,
- );
+ <DashboardModal.Content size="sm">
+ <OrderCustomerAddressesEditForm
+ countryChoices={countryChoices}
+ countries={countries}
+ defaultShippingAddress={validatedDefaultShippingAddress}
+ defaultBillingAddress={validatedDefaultBillingAddress}
+ defaultCloneAddress={hasCustomerChanged}
+ initial={{
+ shippingAddress: orderShippingAddress,
+ billingAddress: orderBillingAddress,
+ }}
+ onSubmit={handleContinue}
+ >
+ {({ change, data, handlers, submit }) => {
+ const shippingAddressEditProps = getAddressEditProps(
+ "shipping",
+ data,
+ handlers,
+ change,
+ dialogErrors,
+ setAddressSearchState,
+ addressEditCommonProps,
+ );
+ const billingAddressEditProps = getAddressEditProps(
+ "billing",
+ data,
+ handlers,
+ change,
+ dialogErrors,
+ setAddressSearchState,
+ addressEditCommonProps,
+ );
- return (
- <DashboardModal.Content __maxWidth={DASHBOARD_MODAL_WIDTH} width="100%">
- <DashboardModal.Title>
- <FormattedMessage {...getDialogTitle()} />
- </DashboardModal.Title>
+ return (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ <FormattedMessage {...getDialogTitle()} />
+ </DashboardModal.Title>
- {addressSearchState.open ? (
- <OrderCustomerAddressesSearch
- openFromCustomerChange={hasCustomerChanged}
- type={addressSearchState?.type}
- cloneAddress={data.cloneAddress}
- formChange={change}
- transitionState={confirmButtonState}
- customerAddresses={customerAddresses}
- selectedCustomerAddressId={
- addressSearchState.type === AddressTypeEnum.SHIPPING
- ? data.customerShippingAddress?.id
- : data.customerBillingAddress?.id
- }
- onChangeCustomerShippingAddress={customerAddress =>
- handlers.changeCustomerAddress(customerAddress, "customerShippingAddress")
- }
- onChangeCustomerBillingAddress={customerAddress =>
- handlers.changeCustomerAddress(customerAddress, "customerBillingAddress")
- }
- exitSearch={() => setAddressSearchState(defaultSearchState)}
- />
- ) : (
- <>
- <Text>
- <FormattedMessage {...getDialogDescription()} />
- </Text>
+ {addressSearchState.open ? (
+ <OrderCustomerAddressesSearch
+ openFromCustomerChange={hasCustomerChanged}
+ type={addressSearchState?.type}
+ cloneAddress={data.cloneAddress}
+ formChange={change}
+ transitionState={confirmButtonState}
+ customerAddresses={customerAddresses}
+ selectedCustomerAddressId={
+ addressSearchState.type === AddressTypeEnum.SHIPPING
+ ? data.customerShippingAddress?.id
+ : data.customerBillingAddress?.id
+ }
+ onChangeCustomerShippingAddress={customerAddress =>
+ handlers.changeCustomerAddress(customerAddress, "customerShippingAddress")
+ }
+ onChangeCustomerBillingAddress={customerAddress =>
+ handlers.changeCustomerAddress(customerAddress, "customerBillingAddress")
+ }
+ exitSearch={() => setAddressSearchState(defaultSearchState)}
+ />
+ ) : (
+ <>
+ <Text>
+ <FormattedMessage {...getDialogDescription()} />
+ </Text>
- {hasCustomerChanged && (
- <>
- <OrderCustomerAddressEdit {...shippingAddressEditProps} />
- <Divider />
- <FormControlLabel
- control={
- <Checkbox
- checked={data.cloneAddress}
- name="billingSameAsShipping"
- onChange={() =>
- change({
- target: {
- name: "cloneAddress",
- value: !data.cloneAddress,
- },
- })
- }
- data-test-id="billing-same-as-shipping"
- />
- }
- label={intl.formatMessage(dialogMessages.billingSameAsShipping)}
- />
- {!data.cloneAddress && (
- <>
- <Text>
- {customerAddresses.length > 0 ? (
- <FormattedMessage
- {...dialogMessages.customerChangeBillingDescription}
- />
- ) : (
- <FormattedMessage {...dialogMessages.noAddressBillingDescription} />
- )}
- </Text>
- <OrderCustomerAddressEdit {...billingAddressEditProps} />
- </>
- )}
- </>
- )}
+ {hasCustomerChanged && (
+ <>
+ <OrderCustomerAddressEdit {...shippingAddressEditProps} />
+ <Divider />
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={data.cloneAddress}
+ name="billingSameAsShipping"
+ onChange={() =>
+ change({
+ target: {
+ name: "cloneAddress",
+ value: !data.cloneAddress,
+ },
+ })
+ }
+ data-test-id="billing-same-as-shipping"
+ />
+ }
+ label={intl.formatMessage(dialogMessages.billingSameAsShipping)}
+ />
+ {!data.cloneAddress && (
+ <>
+ <Text>
+ {customerAddresses.length > 0 ? (
+ <FormattedMessage
+ {...dialogMessages.customerChangeBillingDescription}
+ />
+ ) : (
+ <FormattedMessage {...dialogMessages.noAddressBillingDescription} />
+ )}
+ </Text>
+ <OrderCustomerAddressEdit {...billingAddressEditProps} />
+ </>
+ )}
+ </>
+ )}
- {variant === AddressEditDialogVariant.CHANGE_SHIPPING_ADDRESS && (
- <>
- <OrderCustomerAddressEdit {...shippingAddressEditProps} />
- {data.shippingAddressInputOption === AddressInputOptionEnum.NEW_ADDRESS && (
- <>
- <FormControlLabel
- control={
- <Checkbox
- checked={data.cloneAddress}
- name="billingSameAsShipping"
- onChange={() =>
- change({
- target: {
- name: "cloneAddress",
- value: !data.cloneAddress,
- },
- })
- }
- data-test-id="billing-same-as-shipping"
- />
- }
- label={intl.formatMessage(dialogMessages.billingSameAsShipping)}
- />
- </>
- )}
- </>
- )}
+ {variant === AddressEditDialogVariant.CHANGE_SHIPPING_ADDRESS && (
+ <>
+ <OrderCustomerAddressEdit {...shippingAddressEditProps} />
+ {data.shippingAddressInputOption === AddressInputOptionEnum.NEW_ADDRESS && (
+ <>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={data.cloneAddress}
+ name="billingSameAsShipping"
+ onChange={() =>
+ change({
+ target: {
+ name: "cloneAddress",
+ value: !data.cloneAddress,
+ },
+ })
+ }
+ data-test-id="billing-same-as-shipping"
+ />
+ }
+ label={intl.formatMessage(dialogMessages.billingSameAsShipping)}
+ />
+ </>
+ )}
+ </>
+ )}
- {variant === AddressEditDialogVariant.CHANGE_BILLING_ADDRESS && (
- <>
- <OrderCustomerAddressEdit {...billingAddressEditProps} />
- {data.shippingAddressInputOption === AddressInputOptionEnum.NEW_ADDRESS && (
- <>
- <FormSpacer />
- <Divider />
- <FormControlLabel
- control={
- <Checkbox
- checked={data.cloneAddress}
- name="shippingSameAsBilling"
- onChange={() =>
- change({
- target: {
- name: "cloneAddress",
- value: !data.cloneAddress,
- },
- })
- }
- data-test-id="billing-same-as-shipping"
- />
- }
- label={intl.formatMessage(dialogMessages.shippingSameAsBilling)}
- />
- </>
- )}
- </>
- )}
+ {variant === AddressEditDialogVariant.CHANGE_BILLING_ADDRESS && (
+ <>
+ <OrderCustomerAddressEdit {...billingAddressEditProps} />
+ {data.shippingAddressInputOption === AddressInputOptionEnum.NEW_ADDRESS && (
+ <>
+ <FormSpacer />
+ <Divider />
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={data.cloneAddress}
+ name="shippingSameAsBilling"
+ onChange={() =>
+ change({
+ target: {
+ name: "cloneAddress",
+ value: !data.cloneAddress,
+ },
+ })
+ }
+ data-test-id="billing-same-as-shipping"
+ />
+ }
+ label={intl.formatMessage(dialogMessages.shippingSameAsBilling)}
+ />
+ </>
+ )}
+ </>
+ )}
- <DashboardModal.Actions>
- <ConfirmButton
- transitionState={confirmButtonState}
- variant="primary"
- onClick={submit}
- data-test-id="submit"
- >
- <FormattedMessage
- {...(continueToSearchAddressesState(data)
- ? buttonMessages.continue
- : buttonMessages.save)}
- />
- </ConfirmButton>
- </DashboardModal.Actions>
- </>
- )}
- </DashboardModal.Content>
- );
- }}
- </OrderCustomerAddressesEditForm>
+ <DashboardModal.Actions>
+ <ConfirmButton
+ transitionState={confirmButtonState}
+ variant="primary"
+ onClick={submit}
+ data-test-id="submit"
+ >
+ <FormattedMessage
+ {...(continueToSearchAddressesState(data)
+ ? buttonMessages.continue
+ : buttonMessages.save)}
+ />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </>
+ )}
+ </DashboardModal.Grid>
+ );
+ }}
+ </OrderCustomerAddressesEditForm>
+ </DashboardModal.Content>
</DashboardModal>
);
};
diff --git a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
index 5a42c753f2c..5f917d3cef0 100644
--- a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
+++ b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
@@ -1,17 +1,8 @@
-// @ts-strict-ignore
import { ConfirmButton } from "@dashboard/components/ConfirmButton";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { DashboardModal } from "@dashboard/components/Modal";
import { buttonMessages } from "@dashboard/intl";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- FormControlLabel,
- Radio,
- RadioGroup,
-} from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { FormControlLabel, Radio, RadioGroup } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -31,18 +22,17 @@ const OrderCustomerChangeDialog: React.FC<OrderCustomerChangeDialogProps> = prop
const intl = useIntl();
return (
- <Dialog onClose={onClose} open={open}>
- <OrderCustomerChangeForm onSubmit={onConfirm}>
- {({ change, data }) => (
- <>
- <DialogTitle disableTypography>
- <FormattedMessage {...messages.title} />
- </DialogTitle>
- <DialogContent className={classes.overflow}>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <OrderCustomerChangeForm onSubmit={onConfirm}>
+ {({ change, data }) => (
+ <Box display="grid" gap={6}>
+ <DashboardModal.Title>
+ <FormattedMessage {...messages.title} />
+ </DashboardModal.Title>
<Text>
<FormattedMessage {...messages.description} />
</Text>
- <FormSpacer />
<RadioGroup
className={classes.container}
value={data.changeActionOption}
@@ -62,16 +52,16 @@ const OrderCustomerChangeDialog: React.FC<OrderCustomerChangeDialogProps> = prop
className={classes.optionLabel}
/>
</RadioGroup>
- </DialogContent>
- <DialogActions>
- <ConfirmButton transitionState="default" type="submit">
- <FormattedMessage {...buttonMessages.continue} />
- </ConfirmButton>
- </DialogActions>
- </>
- )}
- </OrderCustomerChangeForm>
- </Dialog>
+ <DashboardModal.Actions>
+ <ConfirmButton transitionState="default" type="submit">
+ <FormattedMessage {...buttonMessages.continue} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </Box>
+ )}
+ </OrderCustomerChangeForm>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/orders/components/OrderFulfillStockExceededDialog/OrderFulfillStockExceededDialog.tsx b/src/orders/components/OrderFulfillStockExceededDialog/OrderFulfillStockExceededDialog.tsx
index de77a7f8998..d60d4135977 100644
--- a/src/orders/components/OrderFulfillStockExceededDialog/OrderFulfillStockExceededDialog.tsx
+++ b/src/orders/components/OrderFulfillStockExceededDialog/OrderFulfillStockExceededDialog.tsx
@@ -52,7 +52,6 @@ const OrderFulfillStockExceededDialog: React.FC<OrderFulfillStockExceededDialogP
onClose={onClose}
confirmButtonState={confirmButtonState}
confirmButtonLabel={intl.formatMessage(messages.fulfillButton)}
- size="lg"
>
<Text>{intl.formatMessage(messages.infoLabel)}</Text>
<CardSpacer />
diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
index c6331e0c144..d3c18068202 100644
--- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
+++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
@@ -3,16 +3,11 @@ import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/componen
import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
import Form from "@dashboard/components/Form";
import FormSpacer from "@dashboard/components/FormSpacer";
+import { DashboardModal } from "@dashboard/components/Modal";
import { OrderErrorFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl";
import getOrderErrorMessage from "@dashboard/utils/errors/order";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
-} from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -30,58 +25,64 @@ export interface OrderFulfillmentAcceptDialogProps {
onConfirm: (data: OrderFulfillmentAcceptDialogFormData) => void;
}
-const OrderFulfillmentAcceptDialog: React.FC<OrderFulfillmentAcceptDialogProps> = props => {
+const OrderFulfillmentApproveDialog: React.FC<OrderFulfillmentAcceptDialogProps> = props => {
const { confirmButtonState, errors, open, onConfirm, onClose } = props;
const intl = useIntl();
return (
- <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
- <Form initial={{ notifyCustomer: true }} onSubmit={onConfirm}>
- {({ change, data, submit }) => (
- <>
- <DialogTitle disableTypography>
- <FormattedMessage {...messages.title} />
- </DialogTitle>
- <DialogContent>
- <DialogContentText>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <Form initial={{ notifyCustomer: true }} onSubmit={onConfirm}>
+ {({ change, data, submit }) => (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ <FormattedMessage {...messages.title} />
+ </DashboardModal.Title>
+
+ <Text>
<FormattedMessage {...messages.description} />
- </DialogContentText>
- <ControlledCheckbox
- data-test-id="notify-customer"
- name={"notifyCustomer" as keyof OrderFulfillmentAcceptDialogFormData}
- label={intl.formatMessage(messages.notifyCustomer)}
- checked={data.notifyCustomer}
- onChange={change}
- />
- {errors.length > 0 && (
- <>
- <FormSpacer />
- {errors.map((err, index) => (
- <DialogContentText color="error" key={index}>
- {getOrderErrorMessage(err, intl)}
- </DialogContentText>
- ))}
- </>
- )}
- </DialogContent>
- <DialogActions>
- <Button onClick={onClose}>
- <FormattedMessage {...buttonMessages.cancel} />
- </Button>
- <ConfirmButton
- data-test-id="submit"
- transitionState={confirmButtonState}
- onClick={submit}
- >
- <FormattedMessage {...buttonMessages.approve} />
- </ConfirmButton>
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+ </Text>
+
+ <Box>
+ <ControlledCheckbox
+ data-test-id="notify-customer"
+ name={"notifyCustomer" as keyof OrderFulfillmentAcceptDialogFormData}
+ label={intl.formatMessage(messages.notifyCustomer)}
+ checked={data.notifyCustomer}
+ onChange={change}
+ />
+
+ {errors.length > 0 && (
+ <>
+ <FormSpacer />
+ {errors.map((err, index) => (
+ <Text display="block" color="critical1" key={index}>
+ {getOrderErrorMessage(err, intl)}
+ </Text>
+ ))}
+ </>
+ )}
+ </Box>
+
+ <DashboardModal.Actions>
+ <Button onClick={onClose}>
+ <FormattedMessage {...buttonMessages.cancel} />
+ </Button>
+ <ConfirmButton
+ data-test-id="submit"
+ transitionState={confirmButtonState}
+ onClick={submit}
+ >
+ <FormattedMessage {...buttonMessages.approve} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
-OrderFulfillmentAcceptDialog.displayName = "OrderFulfillmentAcceptDialog";
-export default OrderFulfillmentAcceptDialog;
+OrderFulfillmentApproveDialog.displayName = "OrderFulfillmentApproveDialog";
+export default OrderFulfillmentApproveDialog;
diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
index 7599f36789a..03639f2777f 100644
--- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
+++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
@@ -3,7 +3,7 @@ import BackButton from "@dashboard/components/BackButton";
import { Combobox } from "@dashboard/components/Combobox";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import { OrderErrorFragment, WarehouseFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl";
import getOrderErrorMessage from "@dashboard/utils/errors/order";
@@ -62,7 +62,7 @@ const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps>
);
return (
- <DashboardModal.Content __maxWidth={DASHBOARD_MODAL_WIDTH} width="100%">
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>
<FormattedMessage
id="bb4nSp"
diff --git a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
index 4442b1c3175..0a1211edaf7 100644
--- a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
+++ b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
@@ -1,21 +1,15 @@
-// @ts-strict-ignore
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
import FormSpacer from "@dashboard/components/FormSpacer";
+import { DashboardModal } from "@dashboard/components/Modal";
import { OrderErrorFragment } from "@dashboard/graphql";
import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
import { buttonMessages } from "@dashboard/intl";
import { getFormErrors } from "@dashboard/utils/errors";
import getOrderErrorMessage from "@dashboard/utils/errors/order";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
- TextField,
-} from "@material-ui/core";
+import { TextField } from "@material-ui/core";
+import { Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -49,18 +43,19 @@ const OrderFulfillmentTrackingDialog: React.FC<OrderFulfillmentTrackingDialogPro
};
return (
- <Dialog onClose={onClose} open={open} fullWidth maxWidth="xs">
- <Form initial={initialData} onSubmit={onConfirm}>
- {({ change, data, submit }) => (
- <>
- <DialogTitle disableTypography>
- <FormattedMessage
- id="/BJQIq"
- defaultMessage="Add Tracking Code"
- description="dialog header"
- />
- </DialogTitle>
- <DialogContent>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="xs">
+ <Form initial={initialData} onSubmit={onConfirm}>
+ {({ change, data, submit }) => (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ <FormattedMessage
+ id="/BJQIq"
+ defaultMessage="Add Tracking Code"
+ description="dialog header"
+ />
+ </DashboardModal.Title>
+
<TextField
error={!!formErrors.trackingNumber}
helperText={getOrderErrorMessage(formErrors.trackingNumber, intl)}
@@ -74,33 +69,35 @@ const OrderFulfillmentTrackingDialog: React.FC<OrderFulfillmentTrackingDialogPro
fullWidth
data-test-id="tracking-number-input"
/>
+
{errors.length > 0 && (
<>
<FormSpacer />
{errors
- .filter(err => !formFields.includes(err.field))
+ .filter(err => err.field && !formFields.includes(err.field))
.map((err, index) => (
- <DialogContentText color="error" key={index}>
+ <Text display="block" color="critical1" key={index}>
{getOrderErrorMessage(err, intl)}
- </DialogContentText>
+ </Text>
))}
</>
)}
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- data-test-id="confirm-tracking-number-button"
- transitionState={confirmButtonState}
- onClick={submit}
- >
- <FormattedMessage {...buttonMessages.confirm} />
- </ConfirmButton>
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ data-test-id="confirm-tracking-number-button"
+ transitionState={confirmButtonState}
+ onClick={submit}
+ >
+ <FormattedMessage {...buttonMessages.confirm} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
index 1d5addf6122..85a7d380e20 100644
--- a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
+++ b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
@@ -1,17 +1,12 @@
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import FormSpacer from "@dashboard/components/FormSpacer";
+import { DashboardModal } from "@dashboard/components/Modal";
import { InvoiceErrorFragment, InvoiceFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl";
import { DialogProps } from "@dashboard/types";
import getInvoiceErrorMessage from "@dashboard/utils/errors/invoice";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
-} from "@material-ui/core";
+import { Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -33,16 +28,17 @@ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> =
const intl = useIntl();
return (
- <Dialog onClose={onClose} open={open} fullWidth maxWidth="xs">
- <DialogTitle disableTypography>
- {intl.formatMessage({
- id: "5JT4v2",
- defaultMessage: "Send Invoice",
- description: "dialog header",
- })}
- </DialogTitle>
- <DialogContent>
- <DialogContentText>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <DashboardModal.Title>
+ {intl.formatMessage({
+ id: "5JT4v2",
+ defaultMessage: "Send Invoice",
+ description: "dialog header",
+ })}
+ </DashboardModal.Title>
+
+ <Text>
<FormattedMessage
id="MPfyne"
defaultMessage="Are you sure you want to send this invoice: {invoiceNumber} to the customer?"
@@ -50,25 +46,27 @@ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> =
invoiceNumber: <strong>{invoice?.number}</strong>,
}}
/>
- </DialogContentText>
+ </Text>
+
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map((err, idx) => (
- <DialogContentText key={idx} color="error">
+ <Text key={idx} display="block" color="critical1">
{getInvoiceErrorMessage(err, intl)}
- </DialogContentText>
+ </Text>
))}
</>
)}
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton transitionState={confirmButtonState} onClick={onSend}>
- <FormattedMessage {...buttonMessages.send} />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton transitionState={confirmButtonState} onClick={onSend}>
+ <FormattedMessage {...buttonMessages.send} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
index 856073dd5a6..cc135991c2f 100644
--- a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
+++ b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
@@ -26,7 +26,7 @@ export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialog
return (
<OrderManualTransactionForm {...props}>
<DashboardModal {...dialogProps}>
- <DashboardModal.Content __width={"400px"}>
+ <DashboardModal.Content size="xs">
<DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
<FormattedMessage {...manualTransactionMessages.dialogTitle} />
<DashboardModal.Close onClose={onClose} />
diff --git a/src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx b/src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx
index fa5fb7a4f1e..0ae144e8a67 100644
--- a/src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx
+++ b/src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx
@@ -41,7 +41,6 @@ const OrderMarkAsPaidDialog: React.FC<OrderMarkAsPaidDialogProps> = ({
})}
onClose={onClose}
onConfirm={onConfirm}
- size="lg"
>
<Box display="grid" gap={4}>
<FormattedMessage id="sfEbeB" defaultMessage="You're going to mark this order as paid." />
diff --git a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
index 11dd0143a2e..03d5ef4b251 100644
--- a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
+++ b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
@@ -15,13 +15,7 @@ interface OrderMetadataDialogProps {
export const OrderMetadataDialog = ({ onClose, open, data }: OrderMetadataDialogProps) => {
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content
- __maxHeight="90vh"
- __width="min(850px, 90vw)"
- overflowY="auto"
- gap={0}
- paddingX={0}
- >
+ <DashboardModal.Content size="md">
<DashboardModal.Title paddingX={6}>
<FormattedMessage {...commonMessages.metadata} />: {data?.productName ?? ""}
</DashboardModal.Title>
diff --git a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
index 1c20db12570..5f4ca645f56 100644
--- a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
+++ b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
@@ -3,7 +3,7 @@ import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
import FormSpacer from "@dashboard/components/FormSpacer";
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import { OrderErrorFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl";
import { getFormErrors } from "@dashboard/utils/errors";
@@ -47,7 +47,7 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
onSubmit={onSubmit}
>
{({ data, change, submit }) => (
- <DashboardModal.Content __width={DASHBOARD_MODAL_WIDTH}>
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>
{intl.formatMessage({
id: "+PbHKD",
diff --git a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
index 7472c16def7..6ef0214df8e 100644
--- a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
+++ b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
@@ -2,7 +2,7 @@
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import FormSpacer from "@dashboard/components/FormSpacer";
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import { OrderErrorFragment } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl";
import getOrderErrorMessage from "@dashboard/utils/errors/order";
@@ -29,7 +29,7 @@ const OrderPaymentVoidDialog: React.FC<OrderPaymentVoidDialogProps> = ({
return (
<DashboardModal onChange={onClose} open={open}>
- <DashboardModal.Content __width={DASHBOARD_MODAL_WIDTH}>
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>
<FormattedMessage id="KszPFx" defaultMessage="Void Payment" description="dialog header" />
</DashboardModal.Title>
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index 2fdb97f5a57..63e5649d6b7 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -3,6 +3,7 @@ import BackButton from "@dashboard/components/BackButton";
import Checkbox from "@dashboard/components/Checkbox";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import FormSpacer from "@dashboard/components/FormSpacer";
+import { DashboardModal } from "@dashboard/components/Modal";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableCellAvatar from "@dashboard/components/TableCellAvatar";
import TableRowLink from "@dashboard/components/TableRowLink";
@@ -14,18 +15,8 @@ import { buttonMessages } from "@dashboard/intl";
import { maybe, renderCollection } from "@dashboard/misc";
import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
import getOrderErrorMessage from "@dashboard/utils/errors/order";
-import {
- CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { CircularProgress, TableBody, TableCell, TextField } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage, useIntl } from "react-intl";
@@ -97,164 +88,168 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
);
return (
- <Dialog
- onClose={onClose}
- open={open}
- classes={{ paper: classes.overflow }}
- fullWidth
- maxWidth="sm"
- >
- <DialogTitle disableTypography>
- <FormattedMessage
- {...messages.title}
- values={{
- channelName,
- }}
- />
- </DialogTitle>
- <DialogContent className={classes.subtitle}>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm" __gridTemplateRows="auto auto auto 1fr">
+ <DashboardModal.Title>
+ <FormattedMessage
+ {...messages.title}
+ values={{
+ channelName,
+ }}
+ />
+ </DashboardModal.Title>
+
<Text size={2} color="default2">
<FormattedMessage {...messages.subtitle} />
</Text>
- </DialogContent>
- <DialogContent data-test-id="search-query">
- <TextField
- name="query"
- value={query}
- onChange={onQueryChange}
- label={intl.formatMessage(messages.search)}
- placeholder={intl.formatMessage(messages.searchPlaceholder)}
- fullWidth
- InputProps={{
- autoComplete: "off",
- endAdornment: loading && <CircularProgress size={16} />,
- }}
- />
- </DialogContent>
- <DialogContent className={classes.content} id={scrollableTargetId}>
- <InfiniteScroll
- dataLength={productChoicesWithValidVariants?.length}
- next={onFetchMore}
- hasMore={hasMore}
- scrollThreshold="100px"
- loader={
- <div className={classes.loadMoreLoaderContainer}>
- <CircularProgress size={16} />
- </div>
- }
- scrollableTarget={scrollableTargetId}
- >
- <ResponsiveTable key="table">
- <TableBody data-test-id="add-products-table">
- {renderCollection(
- productChoicesWithValidVariants,
- (product, productIndex) => (
- <React.Fragment key={product ? product.id : "skeleton"}>
- <TableRowLink data-test-id="product">
- <TableCell padding="checkbox" className={classes.productCheckboxCell}>
- <Checkbox
- checked={productsWithAllVariantsSelected[productIndex]}
- disabled={loading}
- onChange={() =>
- onProductAdd(
- product,
- productIndex,
- productsWithAllVariantsSelected,
- variants,
- setVariants,
- )
- }
+
+ <Box data-test-id="search-query">
+ <TextField
+ name="query"
+ value={query}
+ onChange={onQueryChange}
+ label={intl.formatMessage(messages.search)}
+ placeholder={intl.formatMessage(messages.searchPlaceholder)}
+ fullWidth
+ InputProps={{
+ autoComplete: "off",
+ endAdornment: loading && <CircularProgress size={16} />,
+ }}
+ />
+ </Box>
+
+ <Box overflowY="auto" id={scrollableTargetId}>
+ <InfiniteScroll
+ dataLength={productChoicesWithValidVariants?.length}
+ next={onFetchMore}
+ hasMore={hasMore}
+ scrollThreshold="100px"
+ loader={
+ <Box
+ display="flex"
+ alignItems="center"
+ height={6}
+ justifyContent="center"
+ marginTop={3}
+ >
+ <CircularProgress size={16} />
+ </Box>
+ }
+ scrollableTarget={scrollableTargetId}
+ >
+ <ResponsiveTable key="table">
+ <TableBody data-test-id="add-products-table">
+ {renderCollection(
+ productChoicesWithValidVariants,
+ (product, productIndex) => (
+ <React.Fragment key={product ? product.id : "skeleton"}>
+ <TableRowLink data-test-id="product">
+ <TableCell padding="checkbox" className={classes.productCheckboxCell}>
+ <Checkbox
+ checked={productsWithAllVariantsSelected[productIndex]}
+ disabled={loading}
+ onChange={() =>
+ onProductAdd(
+ product,
+ productIndex,
+ productsWithAllVariantsSelected,
+ variants,
+ setVariants,
+ )
+ }
+ />
+ </TableCell>
+ <TableCellAvatar
+ className={classes.avatar}
+ thumbnail={maybe(() => product.thumbnail.url)}
/>
- </TableCell>
- <TableCellAvatar
- className={classes.avatar}
- thumbnail={maybe(() => product.thumbnail.url)}
- />
- <TableCell
- className={classes.colName}
- colSpan={2}
- data-test-id="product-name"
- >
- {maybe(() => product.name)}
- </TableCell>
- </TableRowLink>
- {maybe(() => product.variants, [])
- .filter(isValidVariant)
- .map((variant, variantIndex) => (
- <TableRowLink key={variant.id} data-test-id="variant">
- <TableCell />
- <TableCell className={classes.colVariantCheckbox}>
- <Checkbox
- className={classes.variantCheckbox}
- checked={selectedVariantsToProductsMap[productIndex][variantIndex]}
- disabled={loading}
- onChange={() =>
- onVariantAdd(
- variant,
- variantIndex,
- productIndex,
- variants,
- selectedVariantsToProductsMap,
- setVariants,
- )
- }
- />
- </TableCell>
- <TableCell className={classes.colName}>
- <div>{variant.name}</div>
- {variant.sku && (
- <div className={classes.grayText}>
- <FormattedMessage
- {...messages.sku}
- values={{
- sku: variant.sku,
- }}
- />
- </div>
- )}
- </TableCell>
- <TableCell className={classes.textRight} data-test-id="variant-price">
- <OrderPriceLabel pricing={variant.pricing} />
- </TableCell>
- </TableRowLink>
- ))}
- </React.Fragment>
- ),
- () => (
- <Text className={classes.noContentText}>
- {query
- ? intl.formatMessage(messages.noProductsInQuery)
- : intl.formatMessage(messages.noProductsInChannel)}
- </Text>
- ),
- )}
- </TableBody>
- </ResponsiveTable>
- </InfiniteScroll>
- {errors.length > 0 && (
- <>
- <FormSpacer />
- {errors.map((err, index) => (
- <DialogContentText color="error" key={index}>
- {getOrderErrorMessage(err, intl)}
- </DialogContentText>
- ))}
- </>
- )}
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} data-test-id="back-button" />
- <ConfirmButton
- transitionState={confirmButtonState}
- type="submit"
- data-test-id="confirm-button"
- onClick={handleSubmit}
- disabled={variants.length === 0}
- >
- <FormattedMessage {...buttonMessages.confirm} />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ <TableCell
+ className={classes.colName}
+ colSpan={2}
+ data-test-id="product-name"
+ >
+ {maybe(() => product.name)}
+ </TableCell>
+ </TableRowLink>
+ {maybe(() => product.variants, [])
+ .filter(isValidVariant)
+ .map((variant, variantIndex) => (
+ <TableRowLink key={variant.id} data-test-id="variant">
+ <TableCell />
+ <TableCell className={classes.colVariantCheckbox}>
+ <Checkbox
+ className={classes.variantCheckbox}
+ checked={selectedVariantsToProductsMap[productIndex][variantIndex]}
+ disabled={loading}
+ onChange={() =>
+ onVariantAdd(
+ variant,
+ variantIndex,
+ productIndex,
+ variants,
+ selectedVariantsToProductsMap,
+ setVariants,
+ )
+ }
+ />
+ </TableCell>
+ <TableCell className={classes.colName}>
+ <div>{variant.name}</div>
+ {variant.sku && (
+ <Box color="default2">
+ <FormattedMessage
+ {...messages.sku}
+ values={{
+ sku: variant.sku,
+ }}
+ />
+ </Box>
+ )}
+ </TableCell>
+ <TableCell className={classes.textRight} data-test-id="variant-price">
+ <OrderPriceLabel pricing={variant.pricing} />
+ </TableCell>
+ </TableRowLink>
+ ))}
+ </React.Fragment>
+ ),
+ () => (
+ <Text marginBottom={3}>
+ {query
+ ? intl.formatMessage(messages.noProductsInQuery)
+ : intl.formatMessage(messages.noProductsInChannel)}
+ </Text>
+ ),
+ )}
+ </TableBody>
+ </ResponsiveTable>
+ </InfiniteScroll>
+ {errors.length > 0 && (
+ <>
+ <FormSpacer />
+ {errors.map((err, index) => (
+ <Text display="block" color="critical1" key={index}>
+ {getOrderErrorMessage(err, intl)}
+ </Text>
+ ))}
+ </>
+ )}
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} data-test-id="back-button" />
+ <ConfirmButton
+ transitionState={confirmButtonState}
+ type="submit"
+ data-test-id="confirm-button"
+ onClick={handleSubmit}
+ disabled={variants.length === 0}
+ >
+ <FormattedMessage {...buttonMessages.confirm} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/orders/components/OrderProductAddDialog/styles.ts b/src/orders/components/OrderProductAddDialog/styles.ts
index f466f4b1b5c..97268258ce6 100644
--- a/src/orders/components/OrderProductAddDialog/styles.ts
+++ b/src/orders/components/OrderProductAddDialog/styles.ts
@@ -12,31 +12,6 @@ export const useStyles = makeStyles(
colVariantCheckbox: {
padding: 0,
},
- noContentText: {
- marginBottom: theme.spacing(3),
- },
- content: {
- overflowY: "auto",
- paddingTop: 0,
- maxHeight: "75vh",
- marginBottom: theme.spacing(3),
- },
- subtitle: {
- padding: 0,
- },
- grayText: {
- color: theme.palette.text.disabled,
- },
- loadMoreLoaderContainer: {
- alignItems: "center",
- display: "flex",
- height: theme.spacing(3),
- justifyContent: "center",
- marginTop: theme.spacing(3),
- },
- overflow: {
- overflowY: "hidden",
- },
productCheckboxCell: {
"&:first-child": {
paddingLeft: 0,
@@ -50,9 +25,6 @@ export const useStyles = makeStyles(
left: theme.spacing(),
position: "relative",
},
- wideCell: {
- width: "100%",
- },
}),
{ name: "OrderProductAddDialog" },
);
diff --git a/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx b/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
index c58681dca07..a9834fe48bd 100644
--- a/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
+++ b/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
@@ -27,7 +27,7 @@ export const OrderRefundDialog = ({
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content __width="400px" data-test-id="order-refund-dialog">
+ <DashboardModal.Content size="xs" data-test-id="order-refund-dialog">
<DashboardModal.Title>
{intl.formatMessage(orderRefundDialogMesages.title)}
</DashboardModal.Title>
diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
index a5aec122912..b80f1eac399 100644
--- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
+++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
@@ -78,7 +78,7 @@ const OrderShippingMethodEditDialog: React.FC<OrderShippingMethodEditDialogProps
<Form initial={initialForm} onSubmit={onSubmit}>
{({ change, data, submit }) => (
<>
- <DashboardModal.Content __width={600}>
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>
<FormattedMessage
id="V/YxJa"
diff --git a/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx b/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
index 2961b07e860..447d5f29966 100644
--- a/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
+++ b/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
@@ -31,7 +31,7 @@ export const OrderTransactionActionDialog: React.FC<OrderTransactionActionDialog
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content>
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>
<FormattedMessage
{...messages.title}
diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
index 972a868925d..05e970a8d90 100644
--- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
+++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
@@ -27,7 +27,7 @@ export const OrderTransactionReasonModal = ({
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content data-test-id="refund-reason-dialog" __minWidth="400px">
+ <DashboardModal.Content data-test-id="refund-reason-dialog" size="xs">
<DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
<FormattedMessage
{...(reason ? refundTableMessages.editReason : refundTableMessages.addReason)}
diff --git a/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx b/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx
index a123f55da96..01bd6122b21 100644
--- a/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx
+++ b/src/orders/views/OrderDetails/OrderNormalDetails/index.tsx
@@ -165,6 +165,10 @@ export const OrderNormalDetails: React.FC<OrderNormalDetailsProps> = ({
const errors = orderUpdate.opts.data?.orderUpdate.errors || [];
+ const hasOrderFulfillmentsFulfilled = order?.fulfillments.some(
+ fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED,
+ );
+
return (
<>
<WindowTitle
@@ -265,18 +269,13 @@ export const OrderNormalDetails: React.FC<OrderNormalDetailsProps> = ({
/>
<OrderCannotCancelOrderDialog
onClose={closeModal}
- open={
- params.action === "cancel" &&
- order?.fulfillments.some(
- fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED,
- )
- }
+ open={params.action === "cancel" && hasOrderFulfillmentsFulfilled}
/>
<OrderCancelDialog
confirmButtonState={orderCancel.opts.status}
errors={orderCancel.opts.data?.orderCancel.errors || []}
number={order?.number}
- open={params.action === "cancel"}
+ open={params.action === "cancel" && !hasOrderFulfillmentsFulfilled}
onClose={closeModal}
onSubmit={() =>
orderCancel.mutate({
diff --git a/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx b/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx
index 17b3c4d8192..0a2eac80465 100644
--- a/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx
+++ b/src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx
@@ -156,6 +156,10 @@ export const OrderUnconfirmedDetails: React.FC<OrderUnconfirmedDetailsProps> = (
const [transactionReference, setTransactionReference] = React.useState("");
const errors = orderUpdate.opts.data?.orderUpdate.errors || [];
+ const hasOrderFulfillmentsFulFilled = order?.fulfillments.some(
+ fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED,
+ );
+
return (
<>
<WindowTitle
@@ -269,18 +273,13 @@ export const OrderUnconfirmedDetails: React.FC<OrderUnconfirmedDetailsProps> = (
</OrderDiscountProvider>
<OrderCannotCancelOrderDialog
onClose={closeModal}
- open={
- params.action === "cancel" &&
- order?.fulfillments.some(
- fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED,
- )
- }
+ open={params.action === "cancel" && hasOrderFulfillmentsFulFilled}
/>
<OrderCancelDialog
confirmButtonState={orderCancel.opts.status}
errors={orderCancel.opts.data?.orderCancel.errors || []}
number={order?.number}
- open={params.action === "cancel"}
+ open={params.action === "cancel" && !hasOrderFulfillmentsFulFilled}
onClose={closeModal}
onSubmit={() =>
orderCancel.mutate({
diff --git a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
index 651e068ebe1..63c2d95e565 100644
--- a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
+++ b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
@@ -42,7 +42,7 @@ const PageTypePickerDialog: React.FC<PageTypePickerDialogProps> = ({
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content __width="480px" disableAutofocus>
+ <DashboardModal.Content size="xs" disableAutofocus>
<DashboardModal.Title>
<FormattedMessage {...messages.selectPageType} />
</DashboardModal.Title>
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index 051f47cc2aa..80c84f39046 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -2,29 +2,18 @@
import BackButton from "@dashboard/components/BackButton";
import CardSpacer from "@dashboard/components/CardSpacer";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableRowLink from "@dashboard/components/TableRowLink";
import { UserAvatar } from "@dashboard/components/UserAvatar";
import { SearchStaffMembersQuery } from "@dashboard/graphql";
-import useElementScroll, { isScrolledToBottom } from "@dashboard/hooks/useElementScroll";
import useSearchQuery from "@dashboard/hooks/useSearchQuery";
import { buttonMessages } from "@dashboard/intl";
import { getUserInitials, getUserName, renderCollection } from "@dashboard/misc";
import { DialogProps, FetchMoreProps, RelayToFlat, SearchPageProps } from "@dashboard/types";
-import {
- Checkbox,
- CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
+import { Checkbox, CircularProgress, TableBody, TableCell, TextField } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
import { Box, Skeleton, Text } from "@saleor/macaw-ui-next";
-import clsx from "clsx";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage, useIntl } from "react-intl";
@@ -116,6 +105,8 @@ function handleStaffMemberAssign(
}
}
+const scrollableTargetId = "assignMemberScrollableDialog";
+
const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
confirmButtonState,
disabled,
@@ -134,24 +125,14 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
const [selectedMembers, setSelectedMembers] = React.useState<
RelayToFlat<SearchStaffMembersQuery["search"]>
>([]);
- const anchor = React.useRef<HTMLDivElement>();
- const scrollPosition = useElementScroll(anchor);
- const dropShadow = !isScrolledToBottom(anchor, scrollPosition);
return (
- <Dialog
- onClose={onClose}
- open={open}
- maxWidth="sm"
- fullWidth
- classes={{
- paper: classes.dialogPaper,
- }}
- >
- <DialogTitle disableTypography>
- <FormattedMessage {...messages.title} />
- </DialogTitle>
- <DialogContent className={classes.inputContainer}>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr">
+ <DashboardModal.Title>
+ <FormattedMessage {...messages.title} />
+ </DashboardModal.Title>
+
<TextField
data-test-id="search-members-input"
name="query"
@@ -166,105 +147,106 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
}}
disabled={disabled}
/>
- </DialogContent>
- <DialogContent ref={anchor}>
- <InfiniteScroll
- dataLength={staffMembers?.length || 0}
- next={onFetchMore}
- hasMore={hasMore}
- scrollThreshold="100px"
- loader={
- <>
- {staffMembers?.length > 0 && <CardSpacer />}
- <div className={classes.loadMoreLoaderContainer}>
- <CircularProgress size={24} />
- </div>
- </>
- }
- height={400}
- >
- <ResponsiveTable className={classes.table}>
- <TableBody data-test-id="search-results">
- {renderCollection(
- staffMembers,
- member => {
- if (!member) {
- return null;
- }
- const isSelected = selectedMembers.some(
- selectedMember => selectedMember.id === member.id,
- );
+ <Box id={scrollableTargetId} overflowY="auto">
+ <InfiniteScroll
+ dataLength={staffMembers?.length || 0}
+ next={onFetchMore}
+ hasMore={hasMore}
+ scrollThreshold="100px"
+ scrollableTarget={scrollableTargetId}
+ loader={
+ <>
+ {staffMembers?.length > 0 && <CardSpacer />}
+ <div className={classes.loadMoreLoaderContainer}>
+ <CircularProgress size={24} />
+ </div>
+ </>
+ }
+ >
+ <ResponsiveTable className={classes.table}>
+ <TableBody data-test-id="search-results">
+ {renderCollection(
+ staffMembers,
+ member => {
+ if (!member) {
+ return null;
+ }
- return (
- <TableRowLink key={member.id} data-test-id="user-row">
- <TableCell padding="checkbox" className={classes.checkboxCell}>
- <Checkbox
- color="primary"
- checked={isSelected}
- onChange={() =>
- handleStaffMemberAssign(
- member,
- isSelected,
- selectedMembers,
- setSelectedMembers,
- )
- }
- />
- </TableCell>
- <TableCell className={classes.avatarCell}>
- <UserAvatar url={member?.avatar?.url} initials={getUserInitials(member)} />
- </TableCell>
- <TableCell className={classes.colName}>
- <Box display="flex" flexDirection="column" justifyContent="center">
- <Text>{getUserName(member) || <Skeleton />}</Text>
- <Text size={2} color="default2">
- {member ? (
- member.isActive ? (
- intl.formatMessage(messages.staffActive)
- ) : (
- intl.formatMessage(messages.staffInactive)
+ const isSelected = selectedMembers.some(
+ selectedMember => selectedMember.id === member.id,
+ );
+
+ return (
+ <TableRowLink key={member.id} data-test-id="user-row">
+ <TableCell padding="checkbox" className={classes.checkboxCell}>
+ <Checkbox
+ color="primary"
+ checked={isSelected}
+ onChange={() =>
+ handleStaffMemberAssign(
+ member,
+ isSelected,
+ selectedMembers,
+ setSelectedMembers,
)
- ) : (
- <Skeleton />
- )}
- </Text>
- </Box>
- </TableCell>
- </TableRowLink>
- );
- },
- () =>
- !loading && (
- <TableRowLink>
- <TableCell colSpan={2}>
- <FormattedMessage {...messages.noMembersFound} />
- </TableCell>
- </TableRowLink>
- ),
- )}
- </TableBody>
- </ResponsiveTable>
- </InfiniteScroll>
- </DialogContent>
- <DialogActions
- className={clsx({
- [classes.dropShadow]: dropShadow,
- })}
- >
- <BackButton onClick={onClose} />
- <ConfirmButton
- data-test-id="submit"
- type="submit"
- transitionState={confirmButtonState}
- onClick={() => {
- onSubmit(selectedMembers);
- }}
- >
- <FormattedMessage {...buttonMessages.assign} />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ }
+ />
+ </TableCell>
+ <TableCell className={classes.avatarCell}>
+ <UserAvatar
+ url={member?.avatar?.url}
+ initials={getUserInitials(member)}
+ />
+ </TableCell>
+ <TableCell className={classes.colName}>
+ <Box display="flex" flexDirection="column" justifyContent="center">
+ <Text>{getUserName(member) || <Skeleton />}</Text>
+ <Text size={2} color="default2">
+ {member ? (
+ member.isActive ? (
+ intl.formatMessage(messages.staffActive)
+ ) : (
+ intl.formatMessage(messages.staffInactive)
+ )
+ ) : (
+ <Skeleton />
+ )}
+ </Text>
+ </Box>
+ </TableCell>
+ </TableRowLink>
+ );
+ },
+ () =>
+ !loading && (
+ <TableRowLink>
+ <TableCell colSpan={2}>
+ <FormattedMessage {...messages.noMembersFound} />
+ </TableCell>
+ </TableRowLink>
+ ),
+ )}
+ </TableBody>
+ </ResponsiveTable>
+ </InfiniteScroll>
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ data-test-id="submit"
+ type="submit"
+ transitionState={confirmButtonState}
+ onClick={() => {
+ onSubmit(selectedMembers);
+ }}
+ >
+ <FormattedMessage {...buttonMessages.assign} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
index 62ae2067ba7..285f75222bf 100644
--- a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
+++ b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
@@ -1,12 +1,12 @@
-// @ts-strict-ignore
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
+import { DashboardModal } from "@dashboard/components/Modal";
import { ConfigurationItemFragment, ConfigurationTypeFieldEnum } from "@dashboard/graphql";
import { buttonMessages } from "@dashboard/intl";
import { maybe } from "@dashboard/misc";
import { DialogProps } from "@dashboard/types";
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
import { Skeleton } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -33,51 +33,57 @@ const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
};
return (
- <Dialog fullWidth onClose={onClose} open={open} maxWidth="sm">
- <DialogTitle disableTypography>
- {field ? (
- field.value === null ? (
- intl.formatMessage({
- id: "qCH2eZ",
- defaultMessage: "Add Value to Authorization Field",
- description: "header",
- })
- ) : (
- intl.formatMessage({
- id: "Xy2T+y",
- defaultMessage: "Edit Authorization Field",
- description: "header",
- })
- )
- ) : (
- <Skeleton />
- )}
- </DialogTitle>
- <Form initial={initialForm} onSubmit={onConfirm}>
- {({ change, data, submit }) => (
- <>
- <DialogContent>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <Form initial={initialForm} onSubmit={onConfirm}>
+ {({ change, data, submit }) => (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ {field ? (
+ field.value === null ? (
+ intl.formatMessage({
+ id: "qCH2eZ",
+ defaultMessage: "Add Value to Authorization Field",
+ description: "header",
+ })
+ ) : (
+ intl.formatMessage({
+ id: "Xy2T+y",
+ defaultMessage: "Edit Authorization Field",
+ description: "header",
+ })
+ )
+ ) : (
+ <Skeleton />
+ )}
+ </DashboardModal.Title>
+
<TextField
multiline={field?.type === ConfigurationTypeFieldEnum.SECRETMULTILINE}
autoComplete="off"
fullWidth
label={field && field.label}
name="value"
- type={maybe(() => field.type) === ConfigurationTypeFieldEnum.PASSWORD && "password"}
+ type={
+ maybe(() => field.type) === ConfigurationTypeFieldEnum.PASSWORD
+ ? "password"
+ : "text"
+ }
value={data.value || ""}
onChange={change}
/>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton transitionState={confirmButtonState} onClick={submit}>
- <FormattedMessage {...buttonMessages.confirm} />
- </ConfirmButton>
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton transitionState={confirmButtonState} onClick={submit}>
+ <FormattedMessage {...buttonMessages.confirm} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/products/components/ProductExportDialog/ExportDialogSettings.tsx b/src/products/components/ProductExportDialog/ExportDialogSettings.tsx
index f6d5d2a34bc..672dcedd685 100644
--- a/src/products/components/ProductExportDialog/ExportDialogSettings.tsx
+++ b/src/products/components/ProductExportDialog/ExportDialogSettings.tsx
@@ -9,24 +9,11 @@ import {
import { ChangeEvent } from "@dashboard/hooks/useForm";
import { getFormErrors } from "@dashboard/utils/errors";
import getExportErrorMessage from "@dashboard/utils/errors/export";
-import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
import { useIntl } from "react-intl";
import { ExportSettingsInput } from "./types";
-const useStyles = makeStyles(
- theme => ({
- hr: {
- marginBottom: theme.spacing(3),
- marginTop: theme.spacing(3),
- },
- }),
- {
- name: "ExportDialogSettings",
- },
-);
-
export type ExportItemsQuantity = Record<"all" | "filter", number>;
export interface ExportScopeLabels {
@@ -54,7 +41,6 @@ const ExportDialogSettings: React.FC<ExportDialogSettingsProps> = ({
exportScopeLabels,
allowScopeSelection = true,
}) => {
- const classes = useStyles({});
const intl = useIntl();
const formErrors = getFormErrors(formFields, errors);
const productExportTypeChoices: Array<RadioGroupFieldChoice<FileTypesEnum>> = [
@@ -117,7 +103,7 @@ const ExportDialogSettings: React.FC<ExportDialogSettingsProps> = ({
onChange={onChange}
value={data.scope}
/>
- <Hr className={classes.hr} />
+ <Hr />
</>
)}
<RadioGroupField
diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
index bd74e6046c4..f3c0f55cbdc 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialog.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
@@ -2,6 +2,7 @@
import { Button } from "@dashboard/components/Button";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import makeCreatorSteps, { Step } from "@dashboard/components/CreatorSteps";
+import { DashboardModal } from "@dashboard/components/Modal";
import {
ChannelFragment,
ExportErrorFragment,
@@ -18,8 +19,7 @@ import { DialogProps, FetchMoreProps, RelayToFlat } from "@dashboard/types";
import getExportErrorMessage from "@dashboard/utils/errors/export";
import { toggle } from "@dashboard/utils/lists";
import { mapNodeToChoice } from "@dashboard/utils/maps";
-import { Dialog, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
-import { Option, Text } from "@saleor/macaw-ui-next";
+import { Box, Option, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -211,53 +211,52 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
};
return (
- <Dialog onClose={onClose} open={open} maxWidth="sm" fullWidth>
- <>
- <DialogTitle disableTypography>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <DashboardModal.Title>
<FormattedMessage {...messages.title} />
- </DialogTitle>
- <DialogContent>
- <ProductExportSteps currentStep={step} steps={steps} onStepClick={setStep} />
- {step === ProductExportStep.INFO && (
- <ProductExportDialogInfo
- attributes={attributeChoices}
- channels={channels}
- data={data}
- selectedChannels={selectedChannels}
- selectedAttributes={selectedAttributes}
- onAttrtibuteSelect={handleAttributeSelect}
- onWarehouseSelect={handleWarehouseSelect}
- onChange={change}
- warehouses={warehouseChoices}
- onChannelSelect={handleChannelSelect}
- onSelectAllChannels={handleToggleAllChannels}
- onSelectAllWarehouses={handleToggleAllWarehouses}
- {...fetchMoreProps}
- />
- )}
- {step === ProductExportStep.SETTINGS && (
- <ExportDialogSettings
- data={data}
- errors={dialogErrors}
- onChange={change}
- itemsQuantity={productQuantity}
- selectedItems={selectedProducts}
- exportScopeLabels={exportScopeLabels}
- />
- )}
- </DialogContent>
+ </DashboardModal.Title>
+
+ <ProductExportSteps currentStep={step} steps={steps} onStepClick={setStep} />
+ {step === ProductExportStep.INFO && (
+ <ProductExportDialogInfo
+ attributes={attributeChoices}
+ channels={channels}
+ data={data}
+ selectedChannels={selectedChannels}
+ selectedAttributes={selectedAttributes}
+ onAttrtibuteSelect={handleAttributeSelect}
+ onWarehouseSelect={handleWarehouseSelect}
+ onChange={change}
+ warehouses={warehouseChoices}
+ onChannelSelect={handleChannelSelect}
+ onSelectAllChannels={handleToggleAllChannels}
+ onSelectAllWarehouses={handleToggleAllWarehouses}
+ {...fetchMoreProps}
+ />
+ )}
+ {step === ProductExportStep.SETTINGS && (
+ <ExportDialogSettings
+ data={data}
+ errors={dialogErrors}
+ onChange={change}
+ itemsQuantity={productQuantity}
+ selectedItems={selectedProducts}
+ exportScopeLabels={exportScopeLabels}
+ />
+ )}
{notFormErrors.length > 0 && (
- <DialogContent>
+ <Box>
{notFormErrors.map(err => (
- <Text color="critical1" key={err.field + err.code}>
+ <Text display="block" color="critical1" key={err.field + err.code}>
{getExportErrorMessage(err, intl)}
</Text>
))}
- </DialogContent>
+ </Box>
)}
- <DialogActions>
+ <DashboardModal.Actions>
{step === ProductExportStep.INFO && (
<Button variant="secondary" color="text" onClick={onClose} data-test-id="cancel">
<FormattedMessage {...buttonMessages.cancel} />
@@ -283,9 +282,9 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
<FormattedMessage {...messages.confirmButtonLabel} />
</ConfirmButton>
)}
- </DialogActions>
- </>
- </Dialog>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
index 64fe4d0eddc..b6dd2cebfee 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
@@ -89,7 +89,7 @@ const useStyles = makeStyles(
marginBottom: theme.spacing(2),
},
scrollArea: {
- maxHeight: "calc(100vh - 350px)",
+ maxHeight: "calc(100vh - 390px)",
minHeight: "auto",
"@media (min-height: 800px)": {
minHeight: 440,
diff --git a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
index 7d335459033..e241b920609 100644
--- a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
+++ b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
@@ -1,9 +1,8 @@
import Form from "@dashboard/components/Form";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { DashboardModal } from "@dashboard/components/Modal";
import { ProductFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
import { buttonMessages } from "@dashboard/intl";
-import { Dialog, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
import { Button, Input, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { defineMessages, FormattedMessage, useIntl } from "react-intl";
@@ -41,16 +40,17 @@ const ProductExternalMediaDialog: React.FC<ProductExternalMediaDialogProps> = ({
};
return (
- <Dialog onClose={onClose} open={open}>
- <DialogTitle disableTypography>
- <Text size={5} fontWeight="bold">
- {intl.formatMessage(messages.buttonMessage)}
- </Text>
- </DialogTitle>
- <Form initial={initialValues} onSubmit={handleOnSubmit}>
- {({ change, data, submit }) => (
- <>
- <DialogContent>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <Form initial={initialValues} onSubmit={handleOnSubmit}>
+ {({ change, data, submit }) => (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ <Text size={5} fontWeight="bold">
+ {intl.formatMessage(messages.buttonMessage)}
+ </Text>
+ </DashboardModal.Title>
+
<Text size={2}>
<FormattedMessage
id="zDvDnG"
@@ -58,7 +58,7 @@ const ProductExternalMediaDialog: React.FC<ProductExternalMediaDialogProps> = ({
description="modal header"
/>
</Text>
- <FormSpacer />
+
<Input
label="URL"
value={data.mediaUrl}
@@ -68,18 +68,18 @@ const ProductExternalMediaDialog: React.FC<ProductExternalMediaDialogProps> = ({
autoFocus
size="medium"
/>
- </DialogContent>
- <DialogActions>
- <Button variant="secondary" onClick={onClose}>
- <FormattedMessage {...buttonMessages.back} />
- </Button>
- <Button onClick={submit}>{intl.formatMessage(messages.buttonMessage)}</Button>
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+ <DashboardModal.Actions>
+ <Button variant="secondary" onClick={onClose}>
+ <FormattedMessage {...buttonMessages.back} />
+ </Button>
+ <Button onClick={submit}>{intl.formatMessage(messages.buttonMessage)}</Button>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
index a9367700087..f606c2f4884 100644
--- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
+++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
@@ -1,30 +1,10 @@
-// @ts-strict-ignore
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
-} from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
+import { DashboardModal } from "@dashboard/components/Modal";
+import { Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage } from "react-intl";
-const useStyles = makeStyles(
- theme => ({
- deleteButton: {
- "&:hover": {
- backgroundColor: theme.palette.error.main,
- },
- backgroundColor: theme.palette.error.main,
- color: theme.palette.error.contrastText,
- },
- }),
- { name: "ProductVariantDeleteDialog" },
-);
-
export interface ProductVariantDeleteDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
@@ -35,15 +15,19 @@ export interface ProductVariantDeleteDialogProps {
const ProductVariantDeleteDialog: React.FC<ProductVariantDeleteDialogProps> = props => {
const { confirmButtonState, name, open, onConfirm, onClose } = props;
- const classes = useStyles(props);
return (
- <Dialog onClose={onClose} open={open}>
- <DialogTitle disableTypography>
- <FormattedMessage id="GFJabu" defaultMessage="Delete Variant" description="dialog header" />
- </DialogTitle>
- <DialogContent>
- <DialogContentText>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <DashboardModal.Title>
+ <FormattedMessage
+ id="GFJabu"
+ defaultMessage="Delete Variant"
+ description="dialog header"
+ />
+ </DashboardModal.Title>
+
+ <Text>
<FormattedMessage
id="WwNtFn"
defaultMessage="Are you sure you want to delete {name}?"
@@ -52,20 +36,21 @@ const ProductVariantDeleteDialog: React.FC<ProductVariantDeleteDialogProps> = pr
name,
}}
/>
- </DialogContentText>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- transitionState={confirmButtonState}
- className={classes.deleteButton}
- onClick={onConfirm}
- data-test-id="delete-variant-button"
- >
- <FormattedMessage id="rbkmfG" defaultMessage="Delete variant" description="button" />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ </Text>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ transitionState={confirmButtonState}
+ variant="error"
+ onClick={onConfirm}
+ data-test-id="delete-variant-button"
+ >
+ <FormattedMessage id="rbkmfG" defaultMessage="Delete variant" description="button" />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
index 6a6ec0c978b..751fa2fdc77 100644
--- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
+++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
@@ -1,16 +1,13 @@
-// @ts-strict-ignore
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import { ProductMediaFragment } from "@dashboard/graphql";
import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
import { buttonMessages } from "@dashboard/intl";
-import { Dialog, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
-import clsx from "clsx";
+import { Box } from "@saleor/macaw-ui-next";
import React, { useState } from "react";
import { FormattedMessage } from "react-intl";
-import { useStyles } from "./styles";
-
interface ProductVariantImageSelectDialogProps {
media?: ProductMediaFragment[];
selectedMedia?: string[];
@@ -21,7 +18,6 @@ interface ProductVariantImageSelectDialogProps {
const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogProps> = props => {
const { media, open, selectedMedia: initialMedia, onClose, onConfirm } = props;
- const classes = useStyles(props);
const [selectedMedia, setSelectedMedia] = useState(initialMedia);
useModalDialogOpen(open, {
@@ -30,60 +26,87 @@ const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogP
});
const handleMediaSelect = (id: string) => {
- const isMediaAssigned = selectedMedia.includes(id);
+ const isMediaAssigned = selectedMedia?.includes(id);
if (isMediaAssigned) {
- setSelectedMedia(selectedMedia => selectedMedia.filter(mediaId => mediaId !== id));
+ setSelectedMedia(selectedMedia => selectedMedia?.filter(mediaId => mediaId !== id));
} else {
- setSelectedMedia(selectedMedia => [...selectedMedia, id]);
+ setSelectedMedia(selectedMedia => [...(selectedMedia ?? []), id]);
}
};
const handleConfirm = () => {
- onConfirm(selectedMedia);
+ onConfirm(selectedMedia ?? []);
onClose();
};
return (
- <Dialog onClose={onClose} open={open}>
- <DialogTitle disableTypography>
- <FormattedMessage
- id="iPk640"
- defaultMessage="Media Selection"
- description="dialog header"
- />
- </DialogTitle>
- <DialogContent className={classes.content}>
- <div className={classes.root}>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="md" __gridTemplateRows="auto 1fr">
+ <DashboardModal.Title>
+ <FormattedMessage
+ id="iPk640"
+ defaultMessage="Media Selection"
+ description="dialog header"
+ />
+ </DashboardModal.Title>
+
+ <Box
+ overflowY="auto"
+ display="grid"
+ gap={2}
+ gridTemplateColumns={{
+ desktop: 4,
+ tablet: 3,
+ mobile: 2,
+ }}
+ width="100%"
+ >
{media
- .sort((prev, next) => (prev.sortOrder > next.sortOrder ? 1 : -1))
+ ?.sort((prev, next) => (prev.sortOrder! > next.sortOrder! ? 1 : -1))
.map(mediaObj => {
const parsedMediaOembedData = JSON.parse(mediaObj?.oembedData);
const mediaUrl = parsedMediaOembedData?.thumbnail_url || mediaObj.url;
+ const isSelected = selectedMedia?.includes(mediaObj.id);
return (
- <div
- className={clsx([
- classes.imageContainer,
- {
- [classes.selectedImageContainer]: selectedMedia.includes(mediaObj.id),
- },
- ])}
+ <Box
+ backgroundColor="transparent"
+ borderStyle="solid"
+ __borderWidth={isSelected ? 2 : 1}
+ borderColor={isSelected ? "info1" : "default1"}
+ cursor="pointer"
+ __height={140}
+ overflow="hidden"
+ padding={3}
+ position="relative"
+ borderRadius={2}
onClick={() => handleMediaSelect(mediaObj.id)}
key={mediaObj.id}
>
- <img className={classes.image} src={mediaUrl} alt={mediaObj.alt} />
- </div>
+ <Box
+ width="100%"
+ height="100%"
+ objectFit="contain"
+ as="img"
+ src={mediaUrl}
+ alt={mediaObj.alt}
+ style={{
+ userSelect: "none",
+ }}
+ />
+ </Box>
);
})}
- </div>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton transitionState="default" onClick={handleConfirm} data-test-id="submit">
- <FormattedMessage {...buttonMessages.confirm} />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton transitionState="default" onClick={handleConfirm} data-test-id="submit">
+ <FormattedMessage {...buttonMessages.confirm} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/products/components/ProductVariantImageSelectDialog/styles.ts b/src/products/components/ProductVariantImageSelectDialog/styles.ts
deleted file mode 100644
index f057cfb730f..00000000000
--- a/src/products/components/ProductVariantImageSelectDialog/styles.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { makeStyles } from "@saleor/macaw-ui";
-import { vars } from "@saleor/macaw-ui-next";
-
-export const useStyles = makeStyles(
- theme => ({
- image: {
- height: "100%",
- objectFit: "contain",
- userSelect: "none",
- width: "100%",
- },
- imageContainer: {
- background: "transparent",
- border: `1px solid ${vars.colors.border.default1}`,
- borderRadius: theme.spacing(),
- cursor: "pointer",
- height: theme.spacing(21.5),
- overflow: "hidden",
- padding: theme.spacing(2),
- position: "relative",
- transitionDuration: theme.transitions.duration.standard + "ms",
- },
- content: {
- overflowY: "scroll",
- },
- root: {
- display: "grid",
- gridColumnGap: theme.spacing(2),
- gridRowGap: theme.spacing(2),
- gridTemplateColumns: "repeat(3, 1fr)",
- maxWidth: "100%",
- width: theme.breakpoints.values.lg,
- [theme.breakpoints.down("sm")]: {
- gridTemplateColumns: "repeat(2, 1fr)",
- },
- },
- selectedImageContainer: {
- borderColor: theme.palette.primary.main,
- borderWidth: "2px",
- },
- }),
- { name: "ProductVariantImageSelectDialog" },
-);
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
index 5edeb8a18dc..a097ed9a636 100644
--- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
@@ -4,6 +4,7 @@ import { Channel, isAvailableInChannel } from "@dashboard/channels/utils";
import BackButton from "@dashboard/components/BackButton";
import Checkbox from "@dashboard/components/Checkbox";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
+import { DashboardModal } from "@dashboard/components/Modal";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableCellAvatar from "@dashboard/components/TableCellAvatar";
import TableRowLink from "@dashboard/components/TableRowLink";
@@ -11,24 +12,15 @@ import { SearchProductsQuery, ShippingPriceExcludeProductMutation } from "@dashb
import useSearchQuery from "@dashboard/hooks/useSearchQuery";
import { renderCollection } from "@dashboard/misc";
import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
-import {
- CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
+import { CircularProgress, TableBody, TableCell, TextField } from "@material-ui/core";
import { makeStyles } from "@saleor/macaw-ui";
-import { Skeleton, Text } from "@saleor/macaw-ui-next";
+import { Box, Skeleton, Text } from "@saleor/macaw-ui-next";
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { FormattedMessage, useIntl } from "react-intl";
const useStyles = makeStyles(
- theme => ({
+ () => ({
avatar: {
paddingLeft: 0,
width: 64,
@@ -36,19 +28,6 @@ const useStyles = makeStyles(
colName: {
paddingLeft: 0,
},
- searchBar: {
- marginBottom: theme.spacing(3),
- },
- loadMoreLoaderContainer: {
- alignItems: "center",
- display: "flex",
- height: theme.spacing(3),
- justifyContent: "center",
- marginTop: theme.spacing(3),
- },
- overflow: {
- overflowY: "visible",
- },
productCheckboxCell: {
"&:first-child": {
paddingLeft: 0,
@@ -83,6 +62,9 @@ const handleProductAssign = (
setSelectedProducts([...selectedProducts, product]);
}
};
+
+const scrollableTargetId = "shippingMethodProductsAddScrollableDialog";
+
const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogProps> = ({
confirmButtonState,
open,
@@ -114,16 +96,17 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
};
return (
- <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
- <DialogTitle disableTypography>
- <FormattedMessage
- id="xZhxBJ"
- defaultMessage="Assign Products"
- description="dialog header"
- />
- </DialogTitle>
- <DialogContent>
- <div data-test-id="assign-products-dialog-content" className={classes.searchBar}>
+ <DashboardModal onChange={handleClose} open={open}>
+ <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr">
+ <DashboardModal.Title>
+ <FormattedMessage
+ id="xZhxBJ"
+ defaultMessage="Assign Products"
+ description="dialog header"
+ />
+ </DashboardModal.Title>
+
+ <Box data-test-id="assign-products-dialog-content">
<TextField
data-test-id="search-bar"
name="query"
@@ -143,19 +126,27 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
endAdornment: loading && <CircularProgress size={16} />,
}}
/>
- </div>
- <div>
+ </Box>
+
+ <Box id={scrollableTargetId} overflowY="auto">
<InfiniteScroll
dataLength={products?.length ?? 0}
next={onFetchMore}
hasMore={hasMore}
scrollThreshold="100px"
+ scrollableTarget={scrollableTargetId}
loader={
- <div key="loader" className={classes.loadMoreLoaderContainer}>
+ <Box
+ alignItems="center"
+ display="flex"
+ height={5}
+ justifyContent="center"
+ marginTop={5}
+ key="loader"
+ >
<CircularProgress size={16} />
- </div>
+ </Box>
}
- height={450}
>
<ResponsiveTable key="table">
<TableBody data-test-id="assign-product-list">
@@ -228,25 +219,26 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
</TableBody>
</ResponsiveTable>
</InfiniteScroll>
- </div>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={handleClose} />
- <ConfirmButton
- data-test-id="assign-and-save-button"
- transitionState={confirmButtonState}
- type="submit"
- disabled={loading || !selectedProducts?.length}
- onClick={handleSubmit}
- >
- <FormattedMessage
- id="FzEew9"
- defaultMessage="Assign and save"
- description="assign products to shipping rate and save, button"
- />
- </ConfirmButton>
- </DialogActions>
- </Dialog>
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={handleClose} />
+ <ConfirmButton
+ data-test-id="assign-and-save-button"
+ transitionState={confirmButtonState}
+ type="submit"
+ disabled={loading || !selectedProducts?.length}
+ onClick={handleSubmit}
+ >
+ <FormattedMessage
+ id="FzEew9"
+ defaultMessage="Assign and save"
+ description="assign products to shipping rate and save, button"
+ />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx b/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
index d05980a8a4f..c26021889f8 100644
--- a/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
+++ b/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
@@ -24,7 +24,7 @@ export const ShippingWeightUnitDialog: React.FC<ShippingWeightUnitDialogProps> =
}) => {
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content>
+ <DashboardModal.Content size="sm">
<Box alignItems="center" display="flex" gap={3} justifyContent="space-between">
<DashboardModal.Title>
<FormattedMessage
diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
index 8919c534665..a86949b1d08 100644
--- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
+++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
@@ -3,7 +3,7 @@ import CompanyAddressForm from "@dashboard/components/CompanyAddressInput/Compan
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
import Hr from "@dashboard/components/Hr";
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import { AddressTypeInput } from "@dashboard/customers/types";
import { CountryWithCodeFragment, WarehouseErrorFragment } from "@dashboard/graphql";
import useAddressValidation from "@dashboard/hooks/useAddressValidation";
@@ -74,7 +74,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
);
return (
- <DashboardModal.Content __maxWidth={DASHBOARD_MODAL_WIDTH} width="100%">
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>
<FormattedMessage
id="yzYXW/"
diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
index 169c5a65b2f..5fd1e4c16ea 100644
--- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
+++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
@@ -1,26 +1,16 @@
-// @ts-strict-ignore
import BackButton from "@dashboard/components/BackButton";
import Checkbox from "@dashboard/components/Checkbox";
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";
+import { DashboardModal } from "@dashboard/components/Modal";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import TableRowLink from "@dashboard/components/TableRowLink";
import { CountryWithCodeFragment } from "@dashboard/graphql";
import { fuzzySearch } from "@dashboard/misc";
import { getCountrySelectionMap, isRestWorldCountriesSelected } from "@dashboard/shipping/handlers";
-import useScrollableDialogStyle from "@dashboard/styles/useScrollableDialogStyle";
-import {
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- TableBody,
- TableCell,
- TextField,
-} from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { TableBody, TableCell, TextField } from "@material-ui/core";
+import { Box, Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -49,7 +39,6 @@ const ShippingZoneCountriesAssignDialog: React.FC<
const { confirmButtonState, onClose, countries, restWorldCountries, open, initial, onConfirm } =
props;
const classes = useStyles(props);
- const scrollableDialogClasses = useScrollableDialogStyle();
const intl = useIntl();
const initialForm: FormData = {
countries: initial,
@@ -57,33 +46,34 @@ const ShippingZoneCountriesAssignDialog: React.FC<
};
return (
- <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
- <Form initial={initialForm} onSubmit={onConfirm} className={scrollableDialogClasses.form}>
- {({ data, change }) => {
- const countrySelectionMap = getCountrySelectionMap(countries, data.countries);
- const isRestOfTheWorldSelected = isRestWorldCountriesSelected(
- restWorldCountries,
- countrySelectionMap,
- );
- const handleCountryChange = createCountryChangeHandler(data.countries, change);
- const handleRestOfTheWorldChange = createRestOfTheWorldChangeHandler(
- countrySelectionMap,
- data.countries,
- restWorldCountries,
- change,
- );
- const displayCountries = fuzzySearch(countries, data.query, ["country"]);
-
- return (
- <>
- <DialogTitle disableTypography>
- <FormattedMessage {...messages.assignCountriesTitle} />
- </DialogTitle>
- <DialogContent>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <Form initial={initialForm} onSubmit={onConfirm}>
+ {({ data, change }) => {
+ const countrySelectionMap = getCountrySelectionMap(countries, data.countries);
+ const isRestOfTheWorldSelected = isRestWorldCountriesSelected(
+ restWorldCountries,
+ countrySelectionMap,
+ );
+ const handleCountryChange = createCountryChangeHandler(data.countries, change);
+ const handleRestOfTheWorldChange = createRestOfTheWorldChangeHandler(
+ countrySelectionMap,
+ data.countries,
+ restWorldCountries,
+ change,
+ );
+ const displayCountries = fuzzySearch(countries, data.query, ["country"]);
+
+ return (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ <FormattedMessage {...messages.assignCountriesTitle} />
+ </DashboardModal.Title>
+
<Text>
<FormattedMessage {...messages.assignCountriesDescription} />
</Text>
- <FormSpacer />
+
<TextField
name="query"
data-test-id="search-country-input"
@@ -93,15 +83,15 @@ const ShippingZoneCountriesAssignDialog: React.FC<
placeholder={intl.formatMessage(messages.searchCountriesPlaceholder)}
fullWidth
/>
- <FormSpacer />
+
<Hr />
- <FormSpacer />
+
{restWorldCountries.length > 0 && (
<>
<Text fontSize={3}>
<FormattedMessage {...messages.quickPickSubtitle} />
</Text>
- <FormSpacer />
+
<ResponsiveTable className={classes.table}>
<TableBody>
<TableRowLink
@@ -121,51 +111,53 @@ const ShippingZoneCountriesAssignDialog: React.FC<
</TableRowLink>
</TableBody>
</ResponsiveTable>
- <FormSpacer />
</>
)}
+
<Text fontSize={3}>
<FormattedMessage {...messages.countriesSubtitle} />
</Text>
- </DialogContent>
- <DialogContent className={scrollableDialogClasses.scrollArea}>
- <ResponsiveTable className={classes.table}>
- <TableBody>
- {displayCountries.map(country => {
- const isChecked = countrySelectionMap[country.code];
-
- return (
- <TableRowLink
- data-test-id="country-row"
- className={classes.clickableRow}
- onClick={() => handleCountryChange(country.code, !isChecked)}
- key={country.code}
- >
- <TableCell className={classes.wideCell}>{country.country}</TableCell>
- <TableCell padding="checkbox" className={classes.checkboxCell}>
- <Checkbox checked={isChecked} />
- </TableCell>
- </TableRowLink>
- );
- })}
- </TableBody>
- </ResponsiveTable>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} data-test-id="back-button" />
- <ConfirmButton
- transitionState={confirmButtonState}
- type="submit"
- data-test-id="assign-and-save-button"
- >
- <FormattedMessage {...messages.assignCountriesButton} />
- </ConfirmButton>
- </DialogActions>
- </>
- );
- }}
- </Form>
- </Dialog>
+
+ <Box overflowY="auto" __maxHeight="calc(100vh - 580px)">
+ <ResponsiveTable className={classes.table}>
+ <TableBody>
+ {displayCountries.map(country => {
+ const isChecked = countrySelectionMap[country.code];
+
+ return (
+ <TableRowLink
+ data-test-id="country-row"
+ className={classes.clickableRow}
+ onClick={() => handleCountryChange(country.code, !isChecked)}
+ key={country.code}
+ >
+ <TableCell className={classes.wideCell}>{country.country}</TableCell>
+ <TableCell padding="checkbox" className={classes.checkboxCell}>
+ <Checkbox checked={isChecked} />
+ </TableCell>
+ </TableRowLink>
+ );
+ })}
+ </TableBody>
+ </ResponsiveTable>
+ </Box>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} data-test-id="back-button" />
+ <ConfirmButton
+ transitionState={confirmButtonState}
+ type="submit"
+ data-test-id="assign-and-save-button"
+ >
+ <FormattedMessage {...messages.assignCountriesButton} />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ );
+ }}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/handlers.ts b/src/shipping/components/ShippingZoneCountriesAssignDialog/handlers.ts
index 3fd1a4cc646..e8dee90ad14 100644
--- a/src/shipping/components/ShippingZoneCountriesAssignDialog/handlers.ts
+++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/handlers.ts
@@ -17,7 +17,7 @@ export function createCountryChangeHandler(selectedCountries: string[], change:
}
export function createRestOfTheWorldChangeHandler(
- countrySelectionMap: Map<string, boolean>,
+ countrySelectionMap: Record<string, boolean>,
selectedCountries: string[],
restWorldCountries: string[],
change: FormChange,
diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
index 9d5330d786e..d7809373dee 100644
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
@@ -2,10 +2,10 @@ import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
+import { DashboardModal } from "@dashboard/components/Modal";
import { commonMessages } from "@dashboard/intl";
import { DialogProps, MinMax } from "@dashboard/types";
-import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
+import { TextField } from "@material-ui/core";
import { Text } from "@saleor/macaw-ui-next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@@ -15,23 +15,12 @@ export interface ShippingZonePostalCodeRangeDialogProps extends DialogProps {
onSubmit: (range: MinMax) => void;
}
-const useStyles = makeStyles(
- theme => ({
- info: {
- marginBottom: theme.spacing(2),
- },
- }),
- {
- name: "ShippingZonePostalCodeRangeDialog",
- },
-);
const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDialogProps> = ({
confirmButtonState,
open,
onClose,
onSubmit,
}) => {
- const classes = useStyles({});
const intl = useIntl();
const initial: MinMax = {
max: "",
@@ -39,24 +28,26 @@ const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDia
};
return (
- <Dialog open={open}>
- <DialogTitle disableTypography>
- <FormattedMessage
- id="2Xt+sw"
- defaultMessage="Add postal codes"
- description="dialog header"
- />
- </DialogTitle>
- <Form initial={initial} onSubmit={onSubmit}>
- {({ change, data }) => (
- <>
- <DialogContent>
- <Text className={classes.info}>
+ <DashboardModal onChange={onClose} open={open}>
+ <DashboardModal.Content size="sm">
+ <Form initial={initial} onSubmit={onSubmit}>
+ {({ change, data }) => (
+ <DashboardModal.Grid>
+ <DashboardModal.Title>
+ <FormattedMessage
+ id="2Xt+sw"
+ defaultMessage="Add postal codes"
+ description="dialog header"
+ />
+ </DashboardModal.Title>
+
+ <Text>
<FormattedMessage
id="8InCjD"
defaultMessage="Please provide range of postal codes you want to add to the include/exclude list."
/>
</Text>
+
<Grid variant="uniform">
<TextField
data-test-id="zip-code-starts-with-input"
@@ -82,26 +73,27 @@ const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDia
onChange={change}
/>
</Grid>
- </DialogContent>
- <DialogActions>
- <BackButton onClick={onClose} />
- <ConfirmButton
- disabled={!data.min}
- transitionState={confirmButtonState}
- type="submit"
- data-test-id="submit"
- >
- <FormattedMessage
- id="DM/Ha1"
- defaultMessage="Add"
- description="add postal code range, button"
- />
- </ConfirmButton>
- </DialogActions>
- </>
- )}
- </Form>
- </Dialog>
+
+ <DashboardModal.Actions>
+ <BackButton onClick={onClose} />
+ <ConfirmButton
+ disabled={!data.min}
+ transitionState={confirmButtonState}
+ type="submit"
+ data-test-id="submit"
+ >
+ <FormattedMessage
+ id="DM/Ha1"
+ defaultMessage="Add"
+ description="add postal code range, button"
+ />
+ </ConfirmButton>
+ </DashboardModal.Actions>
+ </DashboardModal.Grid>
+ )}
+ </Form>
+ </DashboardModal.Content>
+ </DashboardModal>
);
};
diff --git a/src/shipping/handlers.ts b/src/shipping/handlers.ts
index acf5e43c4fd..ef593cba9d8 100644
--- a/src/shipping/handlers.ts
+++ b/src/shipping/handlers.ts
@@ -279,24 +279,25 @@ export function getCountrySelectionMap(
countries?: CountryFragment[],
countriesSelected?: string[],
) {
- return (
- countriesSelected &&
- countries?.reduce(
- (acc, country) => {
- acc[country.code] = !!countriesSelected.find(
- selectedCountries => selectedCountries === country.code,
- );
+ if (!countriesSelected || !countries) {
+ return {} as Record<string, boolean>;
+ }
- return acc;
- },
- {} as Map<string, boolean>,
- )
+ return countries.reduce(
+ (acc, country) => {
+ acc[country.code] = !!countriesSelected.find(
+ selectedCountries => selectedCountries === country.code,
+ );
+
+ return acc;
+ },
+ {} as Record<string, boolean>,
);
}
export function isRestWorldCountriesSelected(
restWorldCountries?: string[],
- countrySelectionMap?: Map<string, boolean>,
+ countrySelectionMap?: Record<string, boolean>,
) {
return (
countrySelectionMap &&
diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
index 7acf925fe20..cae269e0ad3 100644
--- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
+++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
@@ -62,7 +62,7 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
onSubmit={onConfirm}
>
{({ change, data: formData, submit }) => (
- <DashboardModal.Content __width={400} overflow="hidden">
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>
<FormattedMessage
id="23g7PY"
@@ -78,6 +78,7 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
type="text"
value={formData.firstName}
onChange={change}
+ fullWidth
/>
<TextField
data-test-id="last-name-input"
@@ -85,6 +86,7 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
type="text"
value={formData.lastName}
onChange={change}
+ fullWidth
/>
</Box>
diff --git a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
index 8faec70f099..e5e802a8696 100644
--- a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
+++ b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
@@ -2,7 +2,7 @@
import BackButton from "@dashboard/components/BackButton";
import { ConfirmButton, ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
import Form from "@dashboard/components/Form";
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import { AccountErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
@@ -43,7 +43,7 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
<DashboardModal onChange={onClose} open={open}>
<Form initial={initialForm} onSubmit={onSubmit}>
{({ change, data }) => (
- <DashboardModal.Content __width={DASHBOARD_MODAL_WIDTH}>
+ <DashboardModal.Content size="sm">
<DashboardModal.Title>
<FormattedMessage
id="+kb2lM"
diff --git a/src/styles/useScrollableDialogStyle.ts b/src/styles/useScrollableDialogStyle.ts
index 429185f92fa..3ff990e4436 100644
--- a/src/styles/useScrollableDialogStyle.ts
+++ b/src/styles/useScrollableDialogStyle.ts
@@ -20,7 +20,7 @@ const useScrollableDialogStyle = makeStyles(
marginTop: theme.spacing(3),
},
scrollArea: {
- overflowY: "scroll",
+ overflowY: "auto",
paddingTop: 0,
height: "inherit",
marginBottom: theme.spacing(3),
diff --git a/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx b/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
index da104cd60c3..18c1b1f49ec 100644
--- a/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
+++ b/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
@@ -1,5 +1,5 @@
// @ts-strict-ignore
-import { DASHBOARD_MODAL_WIDTH, DashboardModal } from "@dashboard/components/Modal";
+import { DashboardModal } from "@dashboard/components/Modal";
import { CountryFragment } from "@dashboard/graphql";
import { useLocalSearch } from "@dashboard/hooks/useLocalSearch";
import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
@@ -45,7 +45,7 @@ export const TaxCountryDialog: React.FC<TaxCountryDialogProps> = ({
return (
<DashboardModal open={open} onChange={onClose}>
- <DashboardModal.Content __width={DASHBOARD_MODAL_WIDTH}>
+ <DashboardModal.Content size="sm">
<DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
<FormattedMessage {...taxesMessages.chooseCountryDialogTitle} />
<DashboardModal.Close onClose={onClose} />
diff --git a/src/utils/errors/order.ts b/src/utils/errors/order.ts
index 9be0853e59b..a43df24fbfe 100644
--- a/src/utils/errors/order.ts
+++ b/src/utils/errors/order.ts
@@ -75,7 +75,10 @@ const messages = defineMessages({
},
});
-function getOrderErrorMessage(err: OrderErrorFragment, intl: IntlShape): string | undefined {
+function getOrderErrorMessage(
+ err: OrderErrorFragment | undefined,
+ intl: IntlShape,
+): string | undefined {
if (err) {
switch (err.code) {
case OrderErrorCode.BILLING_ADDRESS_NOT_SET: