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 = ({ onConfirm={onConfirm} title={intl.formatMessage(msgs.deleteAppTitle)} variant="delete" - size="lg" > = ({ children, title, onClose, ...props }) => { return ( - + = ({ children, title, onClose, {title} - + {children} 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 ( - - {formatMessage(messages.heading)} - + + + {formatMessage(messages.heading)} {formatMessage(messages.info)} {renderDialogContent()} - - + + ); }; 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 = ({ {intl.formatMessage(messages.summaryText)} + {isPermissionsRemoved && ( @@ -42,6 +46,7 @@ export const AppPermissionsDialogConfirmation = ({ ))} )} + {isPermissionsAdded && ( @@ -54,23 +59,15 @@ export const AppPermissionsDialogConfirmation = ({ ))} )} - - - - + + ); }; 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); }} > - + {allPermissions.map(perm => { const isAssigned = Boolean(selected.find(p => p === perm.code)); @@ -66,12 +69,13 @@ export const AppPermissionsDialogPermissionPicker = ({ })} - - - - + + + {intl.formatMessage(messages.closeButton)} + + {intl.formatMessage(messages.saveButton)} + + ); }; 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 = ({ const formErrors = getFormErrors(["name"], errors); return ( - - - {attributeValue === null ? ( - - ) : ( - - )} - -
- {({ errors, set, change, clearErrors, setError, data, submit }) => ( - <> - + + + + {({ errors, set, change, clearErrors, setError, data, submit }) => ( + + + {attributeValue === null ? ( + + ) : ( + + )} + + = ({ value={data.name} onChange={change} /> + {isSwatch && ( = ({ set={set} /> )} - - - - - - - - - )} -
- + + + + + + + + + )} + + + ); }; 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 = props => { - const { name, open, onConfirm, onClose } = props; - const classes = useStyles(props); - - return ( - - - - - - - {name}, - }} - /> - - - - - - - - ); -}; - -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 = { - sm: DASHBOARD_MODAL_WIDTH_SMALL, - lg: DASHBOARD_MODAL_WIDTH, -}; - const ActionDialog = ({ children, open, @@ -43,7 +38,7 @@ const ActionDialog = ({ return ( - + {title} {children} 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 = ({ 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 = ({ }); return ( - - - - - + + + + + + = ({ endAdornment: loading && , }} /> - - - - - - } - scrollableTarget={scrollableTargetId} - > - - - {renderCollection( - attributes, - attribute => { - if (!attribute) { - return null; - } - const isChecked = !!selected.find( - selectedAttribute => selectedAttribute === attribute.id, - ); + + + + + } + scrollableTarget={scrollableTargetId} + > + + + {renderCollection( + attributes, + attribute => { + if (!attribute) { + return null; + } + + const isChecked = !!selected.find( + selectedAttribute => selectedAttribute === attribute.id, + ); + + return ( + attribute.id)}> + + onToggle(attribute.id)} /> + + + {attribute.name} + + {attribute.slug} + + + + ); + }, + () => + !loading && ( + + + + + + ), + )} + + + + + + + {errors.length > 0 && + errors.map((error, errorIndex) => ( + + {error} + + ))} + - return ( - attribute.id)}> - - onToggle(attribute.id)} /> - - - {attribute.name} - - {attribute.slug} - - - - ); - }, - () => - !loading && ( - - - - - - ), - )} - - - - - {errors.length > 0 && ( - - {errors.map((error, errorIndex) => ( - - {error} - - ))} - - )} - - - - - - - + + + + + + + + ); }; 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 = props => { }; return ( - - {labels.title} - + + + {labels.title} + = props => { endAdornment: loading && , }} /> - - - - - - } - scrollableTarget={scrollableTargetId} - > - - - {containers?.map(container => { - const isSelected = !!selectedContainers.find( - selectedContainer => selectedContainer.id === container.id, - ); - return ( - - - - handleContainerAssign( - container, - isSelected, - selectedContainers, - setSelectedContainers, - ) - } - /> - - - {container.name} - - - ); - })} - - - - - - - - {labels.confirmBtn} - - - + + + + + } + scrollableTarget={scrollableTargetId} + > + + + {containers?.map(container => { + const isSelected = !!selectedContainers.find( + selectedContainer => selectedContainer.id === container.id, + ); + + return ( + + + + handleContainerAssign( + container, + isSelected, + selectedContainers, + setSelectedContainers, + ) + } + /> + + + {container.name} + + + ); + })} + + + + + + + + + {labels.confirmBtn} + + + + ); }; 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 = props => { }; return ( - - - - - + + + + + + = props => { endAdornment: loading && , }} /> - - - - - - } - scrollableTarget={scrollableTargetId} - > - - - {products && - products.map(product => { - const isSelected = productsDict[product.id] || false; - const isProductAvailable = isProductAvailableInVoucherChannels( - product.channelListings, - selectedChannels, - ); - return ( - - - handleChange(product.id)} + + + + + } + scrollableTarget={scrollableTargetId} + > + + + {products && + products.map(product => { + const isSelected = productsDict[product.id] || false; + const isProductAvailable = isProductAvailableInVoucherChannels( + product.channelListings, + selectedChannels, + ); + + return ( + + + handleChange(product.id)} + /> + + product.thumbnail.url)} + style={{ + opacity: !isProductAvailable ? 0.5 : 1, + }} /> - - product.thumbnail.url)} - style={{ - opacity: !isProductAvailable ? 0.5 : 1, - }} - /> - - {product.name} - {!isProductAvailable && productUnavailableText && ( - - {productUnavailableText} - - )} - - - ); - })} - - - - - - - - - - - + + {product.name} + {!isProductAvailable && productUnavailableText && ( + + {productUnavailableText} + + )} + + + ); + })} + + + + + + + + + + + + + ); }; 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 = props => { }; return ( - - - - - + + + + + + = props => { endAdornment: loading && , }} /> - - - - - - } - scrollableTarget={scrollableTargetId} - > - - - {renderCollection( - productChoices, - (product, productIndex) => ( - - - - - handleProductAssign( - product, - productIndex, - productsWithAllVariantsSelected, - variants, - setVariants, - ) - } - /> - - product.thumbnail.url)} - /> - - {maybe(() => product.name)} - - - {maybe(() => product.variants, []).map((variant, variantIndex) => ( - - - + + + + + + } + scrollableTarget={scrollableTargetId} + > + + + {renderCollection( + productChoices, + (product, productIndex) => ( + + + - handleVariantAssign( - variant, + handleProductAssign( product, - variantIndex, productIndex, + productsWithAllVariantsSelected, variants, - selectedVariantsToProductsMap, setVariants, ) } /> - -
{variant.name}
-
- -
- - - {variant?.channelListings[0]?.price && ( - - )} + product.thumbnail.url)} + /> + + {maybe(() => product.name)} - ))} - - ), - () => ( - - {query - ? intl.formatMessage(messages.noProductsInQuery) - : intl.formatMessage(messages.noProductsInChannel)} - - ), - )} - - - - - - - - - - - + {maybe(() => product.variants, []).map((variant, variantIndex) => ( + + + + + handleVariantAssign( + variant, + product, + variantIndex, + productIndex, + variants, + selectedVariantsToProductsMap, + setVariants, + ) + } + /> + + +
{variant.name}
+
+ +
+ + + {variant?.channelListings[0]?.price && ( + + )} + + + ))} + + ), + () => ( + + {query + ? intl.formatMessage(messages.noProductsInQuery) + : intl.formatMessage(messages.noProductsInChannel)} + + ), + )} + + + + + + + + + + + + + ); }; 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 ( - - - setDevModeVisibility(false)}> - {intl.formatMessage(messages.title)} - - + setDevModeVisibility(false)}> + + + + {intl.formatMessage(messages.title)} + setDevModeVisibility(false)} /> + + - - + + ); }; 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 = ({ if (syncEvents.length > 0) { return ( - - {intl.formatMessage(messages.header)} - + + + + {intl.formatMessage(messages.header)} + + + {intl.formatMessage(messages.unavailableSyncEvents)} - - + + ); } return ( - - {intl.formatMessage(messages.header)} - - {intl.formatMessage(messages.selectObject)} + + + + {intl.formatMessage(messages.header)} + + + + {intl.formatMessage(messages.selectObject)} {!!unavailableObjects.length && ( @@ -147,13 +149,14 @@ const DryRun: React.FC = ({ )} - - - - - + + + + + + ); }; 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(); - 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 = ({ onLeave, onClose, isOpen }) => { - const classes = useStyles(); const intl = useIntl(); return ( - - - {intl.formatMessage(messages.unableToSaveTitle)} - - -
- - - -
- - + + + ); }; 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 = { + xs: 444, + sm: 600, + md: 960, + lg: 1280, + xl: 1920, +}; + +export const Content = ({ children, disableAutofocus, size, ...rest }: ContentProps) => { return ( 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 ( + + {children} + + ); +}; 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 ( - - + + (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 = ({ }) => { 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 = ({ }; return ( - - - - -
- {({ change, data, submit }) => ( - <> - + + + + {({ change, data, submit }) => ( + + + + + = ({ data-test-id="preset-name-text-field" helperText={errors ? "This field is required" : null} /> - - - - - - - - - - - )} -
- + + + + + + + + + + + )} + + + ); }; 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 = props => { const { confirmButtonState, open, token, onClose, onCreate } = props; const [step, setStep] = React.useState("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 = props => { }; return ( - -
onCreate(data.name)}> - {({ change, data, submit }) => ( - <> - - - - + + + onCreate(data.name)}> + {({ change, data, submit }) => ( + + + + + {step === "form" ? ( <> @@ -73,7 +73,7 @@ const TokenCreateDialog: React.FC = props => { defaultMessage="Access token is used to authenticate service accounts" /> - + = props => { defaultMessage="Make sure to save token, you won’t be able to see it again." /> - + + {token} - - + + {headers} + = props => { - )} - - - {step === "form" ? ( - <> - - - - - - ) : ( - - )} - - - )} -
- + + + {step === "form" ? ( + <> + + + + + + ) : ( + + )} + + + )} + + + ); }; 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 = ({ return ( -
{ - setCountryDisplayName(""); - handleSubmit(data); - }} - > - {({ change, set, data, submit }) => { - const countrySelect = createSingleAutocompleteSelectHandler( - change, - setCountryDisplayName, - countryChoices, - ); - const handleCountrySelect = createCountryHandler(countrySelect, set); + + { + setCountryDisplayName(""); + handleSubmit(data); + }} + > + {({ change, set, data, submit }) => { + const countrySelect = createSingleAutocompleteSelectHandler( + change, + setCountryDisplayName, + countryChoices, + ); + const handleCountrySelect = createCountryHandler(countrySelect, set); - return ( - - - {variant === "create" ? ( - - ) : ( - - )} - + return ( + + + {variant === "create" ? ( + + ) : ( + + )} + - + - - - - - - - - ); - }} - + + + + + + + + ); + }} + +
); }; 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 = 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 = }; return ( - -
- {({ data, change }) => { - const countrySelectionMap = countries.reduce((acc, country) => { - acc[country.code] = !!data.countries.find( - selectedCountries => selectedCountries === country.code, + + + + {({ data, change }) => { + const countrySelectionMap = countries.reduce( + (acc, country) => { + acc[country.code] = !!data.countries.find( + selectedCountries => selectedCountries === country.code, + ); + + return acc; + }, + {} as Record, ); - return acc; - }, {}); + return ( + + + + - return ( - <> - - - - - + = })} fullWidth /> - +
- + = description="country selection" /> - - - - - {fuzzySearch(countries, data.query, ["country"]).map(country => { - const isChecked = countrySelectionMap[country.code]; - return ( - - {country.country} - - - 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) - } - /> - - - ); - })} - - - - - - - - - - - ); - }} - -
+ + + + {fuzzySearch(countries, data.query, ["country"]).map(country => { + const isChecked = countrySelectionMap[country.code]; + + return ( + + {country.country} + + + 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) + } + /> + + + ); + })} + + + + + + + + + + + + ); + }} + + + ); }; 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 ( - + 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 ( - + {intl.formatMessage(messages.deleteRule)} - - - - - + + + - - - - + + + + + + + + + - + ); }; 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 = }; return ( - + {intl.formatMessage(messages.title)} {cardCode ? ( 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 ( - <> - + + - - - - {!loading && ( - <> - - - {intl.formatMessage(messages.exportNote)} - - - )} - - - + + + + {!loading && ( + <> + + + + {intl.formatMessage(messages.exportNote)} + + + )} + + + - - + + ); }; 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 = ({ open, onClose }) => { title={intl.formatMessage(messages.title)} confirmButtonState={status} disabled={loading} - size="lg" > {loadingChannels ? (
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 = ({ open, onClose }) = title={intl.formatMessage(messages.title)} confirmButtonState={status} disabled={loading} - size="lg" > {intl.formatMessage(messages.subtitle)} 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 = - + - + ); 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 = ({ const formErrors = getFormErrors(["name"], errors); return ( - - - - -
- {({ change, data, submit }) => ( - <> - + + + + {({ change, data, submit }) => ( + + + + + = ({ value={data.name} onChange={change} /> - - - - - - - - - )} -
- + + + + + + + + + )} + + + ); }; 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 = ({ const handleSubmit = () => onSubmit(data); return ( + // TODO: MERX-813 Replace Dialog and AutocompleteSelectMenu = props => { return ( - + @@ -47,7 +47,7 @@ export const OrderCancelDialog: React.FC = props => { {errors.length > 0 && errors.map((err, index) => ( - + {getOrderErrorMessage(err, intl)} ))} 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 = ({ open, onClose }) => { - const classes = useStyles({}); - return ( - - - - - - + + + + + + + - - - - - - + + + + + + + ); }; 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 - + @@ -138,53 +133,55 @@ export const OrderChangeWarehouseDialog: React.FC - - {filteredWarehouses ? ( - - {filteredWarehouses.map(warehouse => { - const lineQuantityInWarehouse = getLineAvailableQuantityInWarehouse( - line, - warehouse, - ); + + + {filteredWarehouses ? ( + + {filteredWarehouses.map(warehouse => { + const lineQuantityInWarehouse = getLineAvailableQuantityInWarehouse( + line, + warehouse, + ); - return ( - - - } - label={ -
- {warehouse.name} - - - -
- } - /> - {currentWarehouseId === warehouse?.id && ( - - - - )} - - - ); - })} - - ) : ( - - )} - + return ( + + + } + label={ +
+ {warehouse.name} + + + +
+ } + /> + {currentWarehouseId === warehouse?.id && ( + + + + )} + + + ); + })} + + ) : ( + + )} +
+ - - - - - - )} - - + + + + + + {errors.length > 0 && ( + <> + + {errors.map((err, index) => ( + + {getOrderErrorMessage(err, intl)} + + ))} + + )} + + + + + + + + + + )} + + + ); }; -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 ); return ( - + -
- {({ change, data, submit }) => ( - <> - - - - + + + + {({ change, data, submit }) => ( + + + + + + {errors.length > 0 && ( <> {errors - .filter(err => !formFields.includes(err.field)) + .filter(err => err.field && !formFields.includes(err.field)) .map((err, index) => ( - + {getOrderErrorMessage(err, intl)} - + ))} )} - - - - - - - - - )} -
- + + + + + + + + + )} + + + ); }; 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 = const intl = useIntl(); return ( - - - {intl.formatMessage({ - id: "5JT4v2", - defaultMessage: "Send Invoice", - description: "dialog header", - })} - - - + + + + {intl.formatMessage({ + id: "5JT4v2", + defaultMessage: "Send Invoice", + description: "dialog header", + })} + + + = invoiceNumber: {invoice?.number}, }} /> - + + {errors.length > 0 && ( <> {errors.map((err, idx) => ( - + {getInvoiceErrorMessage(err, intl)} - + ))} )} - - - - - - - - + + + + + + + + + ); }; 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 - + 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 = ({ })} onClose={onClose} onConfirm={onConfirm} - size="lg" > 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 ( - + : {data?.productName ?? ""} 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 = ({ onSubmit={onSubmit} > {({ data, change, submit }) => ( - + {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 = ({ return ( - + 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 = props => { ); return ( - - - - - + + + + + + - - - , - }} - /> - - - - -
- } - scrollableTarget={scrollableTargetId} - > - - - {renderCollection( - productChoicesWithValidVariants, - (product, productIndex) => ( - - - - - onProductAdd( - product, - productIndex, - productsWithAllVariantsSelected, - variants, - setVariants, - ) - } + + + , + }} + /> + + + + + + + } + scrollableTarget={scrollableTargetId} + > + + + {renderCollection( + productChoicesWithValidVariants, + (product, productIndex) => ( + + + + + onProductAdd( + product, + productIndex, + productsWithAllVariantsSelected, + variants, + setVariants, + ) + } + /> + + product.thumbnail.url)} /> - - product.thumbnail.url)} - /> - - {maybe(() => product.name)} - - - {maybe(() => product.variants, []) - .filter(isValidVariant) - .map((variant, variantIndex) => ( - - - - - onVariantAdd( - variant, - variantIndex, - productIndex, - variants, - selectedVariantsToProductsMap, - setVariants, - ) - } - /> - - -
{variant.name}
- {variant.sku && ( -
- -
- )} - - - - - - ))} - - ), - () => ( - - {query - ? intl.formatMessage(messages.noProductsInQuery) - : intl.formatMessage(messages.noProductsInChannel)} - - ), - )} - - - - {errors.length > 0 && ( - <> - - {errors.map((err, index) => ( - - {getOrderErrorMessage(err, intl)} - - ))} - - )} - - - - - - - - + + {maybe(() => product.name)} + + + {maybe(() => product.variants, []) + .filter(isValidVariant) + .map((variant, variantIndex) => ( + + + + + onVariantAdd( + variant, + variantIndex, + productIndex, + variants, + selectedVariantsToProductsMap, + setVariants, + ) + } + /> + + +
{variant.name}
+ {variant.sku && ( + + + + )} + + + + + + ))} + + ), + () => ( + + {query + ? intl.formatMessage(messages.noProductsInQuery) + : intl.formatMessage(messages.noProductsInChannel)} + + ), + )} + + + + {errors.length > 0 && ( + <> + + {errors.map((err, index) => ( + + {getOrderErrorMessage(err, intl)} + + ))} + + )} + + + + + + + + + + ); }; 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 ( - + {intl.formatMessage(orderRefundDialogMesages.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 {({ change, data, submit }) => ( <> - + - + - + = ({ const errors = orderUpdate.opts.data?.orderUpdate.errors || []; + const hasOrderFulfillmentsFulfilled = order?.fulfillments.some( + fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED, + ); + return ( <> = ({ /> fulfillment.status === FulfillmentStatus.FULFILLED, - ) - } + open={params.action === "cancel" && hasOrderFulfillmentsFulfilled} /> 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 = ( const [transactionReference, setTransactionReference] = React.useState(""); const errors = orderUpdate.opts.data?.orderUpdate.errors || []; + const hasOrderFulfillmentsFulFilled = order?.fulfillments.some( + fulfillment => fulfillment.status === FulfillmentStatus.FULFILLED, + ); + return ( <> = ( fulfillment.status === FulfillmentStatus.FULFILLED, - ) - } + open={params.action === "cancel" && hasOrderFulfillmentsFulFilled} /> 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 = ({ return ( - + 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 = ({ confirmButtonState, disabled, @@ -134,24 +125,14 @@ const AssignMembersDialog: React.FC = ({ const [selectedMembers, setSelectedMembers] = React.useState< RelayToFlat >([]); - const anchor = React.useRef(); - const scrollPosition = useElementScroll(anchor); - const dropShadow = !isScrolledToBottom(anchor, scrollPosition); return ( - - - - - + + + + + + = ({ }} disabled={disabled} /> - - - - {staffMembers?.length > 0 && } -
- -
- - } - height={400} - > - - - {renderCollection( - staffMembers, - member => { - if (!member) { - return null; - } - const isSelected = selectedMembers.some( - selectedMember => selectedMember.id === member.id, - ); + + + {staffMembers?.length > 0 && } +
+ +
+ + } + > + + + {renderCollection( + staffMembers, + member => { + if (!member) { + return null; + } - return ( - - - - handleStaffMemberAssign( - member, - isSelected, - selectedMembers, - setSelectedMembers, - ) - } - /> - - - - - - - {getUserName(member) || } - - {member ? ( - member.isActive ? ( - intl.formatMessage(messages.staffActive) - ) : ( - intl.formatMessage(messages.staffInactive) + const isSelected = selectedMembers.some( + selectedMember => selectedMember.id === member.id, + ); + + return ( + + + + handleStaffMemberAssign( + member, + isSelected, + selectedMembers, + setSelectedMembers, ) - ) : ( - - )} - - - - - ); - }, - () => - !loading && ( - - - - - - ), - )} - - - - - - - { - onSubmit(selectedMembers); - }} - > - - - - + } + /> + + + + + + + {getUserName(member) || } + + {member ? ( + member.isActive ? ( + intl.formatMessage(messages.staffActive) + ) : ( + intl.formatMessage(messages.staffInactive) + ) + ) : ( + + )} + + + + + ); + }, + () => + !loading && ( + + + + + + ), + )} + + + + + + + + { + onSubmit(selectedMembers); + }} + > + + + + + ); }; 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 = ({ }; return ( - - - {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", - }) - ) - ) : ( - - )} - -
- {({ change, data, submit }) => ( - <> - + + + + {({ change, data, submit }) => ( + + + {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", + }) + ) + ) : ( + + )} + + field.type) === ConfigurationTypeFieldEnum.PASSWORD && "password"} + type={ + maybe(() => field.type) === ConfigurationTypeFieldEnum.PASSWORD + ? "password" + : "text" + } value={data.value || ""} onChange={change} /> - - - - - - - - - )} -
- + + + + + + + + + )} + + + ); }; 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 = ({ exportScopeLabels, allowScopeSelection = true, }) => { - const classes = useStyles({}); const intl = useIntl(); const formErrors = getFormErrors(formFields, errors); const productExportTypeChoices: Array> = [ @@ -117,7 +103,7 @@ const ExportDialogSettings: React.FC = ({ onChange={onChange} value={data.scope} /> -
+
)} = ({ }; return ( - - <> - + + + - - - - {step === ProductExportStep.INFO && ( - - )} - {step === ProductExportStep.SETTINGS && ( - - )} - + + + + {step === ProductExportStep.INFO && ( + + )} + {step === ProductExportStep.SETTINGS && ( + + )} {notFormErrors.length > 0 && ( - + {notFormErrors.map(err => ( - + {getExportErrorMessage(err, intl)} ))} - + )} - + {step === ProductExportStep.INFO && ( + + + ); }; 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 = ({ }; return ( - - - - {intl.formatMessage(messages.buttonMessage)} - - -
- {({ change, data, submit }) => ( - <> - + + + + {({ change, data, submit }) => ( + + + + {intl.formatMessage(messages.buttonMessage)} + + + = ({ description="modal header" /> - + = ({ autoFocus size="medium" /> - - - - - - - )} -
- + + + + + + )} + + + ); }; 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 = props => { const { confirmButtonState, name, open, onConfirm, onClose } = props; - const classes = useStyles(props); return ( - - - - - - + + + + + + + = pr name, }} /> - - - - - - - - - + + + + + + + + + + ); }; 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 = 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 { - 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 ( - - - - - -
+ + + + + + + {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 ( -
handleMediaSelect(mediaObj.id)} key={mediaObj.id} > - {mediaObj.alt} -
+ + ); })} -
- - - - - - - - + + + + + + + + + + ); }; 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 = ({ confirmButtonState, open, @@ -114,16 +96,17 @@ const ShippingMethodProductsAddDialog: React.FC - - - - -
+ + + + + + + , }} /> -
-
+ + + + -
+ } - height={450} > @@ -228,25 +219,26 @@ const ShippingMethodProductsAddDialog: React.FC - - - - - - - - - + + + + + + + + + + ); }; 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 = }) => { return ( - + + -
- {({ 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 ( - <> - - - - + + + + {({ 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 ( + + + + + - + - +
- + {restWorldCountries.length > 0 && ( <> - + - )} + - - - - - {displayCountries.map(country => { - const isChecked = countrySelectionMap[country.code]; - - return ( - handleCountryChange(country.code, !isChecked)} - key={country.code} - > - {country.country} - - - - - ); - })} - - - - - - - - - - - ); - }} -
- + + + + + {displayCountries.map(country => { + const isChecked = countrySelectionMap[country.code]; + + return ( + handleCountryChange(country.code, !isChecked)} + key={country.code} + > + {country.country} + + + + + ); + })} + + + + + + + + + + + + ); + }} + + + ); }; 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, + countrySelectionMap: Record, 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 = ({ confirmButtonState, open, onClose, onSubmit, }) => { - const classes = useStyles({}); const intl = useIntl(); const initial: MinMax = { max: "", @@ -39,24 +28,26 @@ const ShippingZonePostalCodeRangeDialog: React.FC - - - -
- {({ change, data }) => ( - <> - - + + + + {({ change, data }) => ( + + + + + + + - - - - - - - - - )} -
- + + + + + + + + + )} + + + ); }; 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; + } - return acc; - }, - {} as Map, - ) + return countries.reduce( + (acc, country) => { + acc[country.code] = !!countriesSelected.find( + selectedCountries => selectedCountries === country.code, + ); + + return acc; + }, + {} as Record, ); } export function isRestWorldCountriesSelected( restWorldCountries?: string[], - countrySelectionMap?: Map, + countrySelectionMap?: Record, ) { 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 = props => { onSubmit={onConfirm} > {({ change, data: formData, submit }) => ( - + = props => { type="text" value={formData.firstName} onChange={change} + fullWidth /> = props => { type="text" value={formData.lastName} onChange={change} + fullWidth /> 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 = ({
{({ change, data }) => ( - + = ({ return ( - + 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: