djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new Layout structure (#3213)

Browse source
This commit is contained in:
Krzysztof Żuraw 2023-02-28 10:33:16 +01:00 committed by GitHub
parent b9acfe6214
commit 9c88e17f34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
93 changed files with 1256 additions and 1393 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
package-lock.json generated
View file

@ -83,8 +83,7 @@
"slugify": "^1.4.6", "slugify": "^1.4.6",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"url-join": "^4.0.1", "url-join": "^4.0.1",
"use-react-router": "^1.0.7", "use-react-router": "^1.0.7"
"usehooks-ts": "^2.9.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.5.5", "@babel/cli": "^7.5.5",
@ -32978,19 +32977,6 @@
"version": "2.4.1", "version": "2.4.1",
"license": "0BSD" "license": "0BSD"
}, },
"node_modules/usehooks-ts": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
"integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
"engines": {
"node": ">=16.15.0",
"npm": ">=8"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/utf8-byte-length": { "node_modules/utf8-byte-length": {
"version": "1.0.4", "version": "1.0.4",
"dev": true, "dev": true,
@ -57362,11 +57348,6 @@
} }
} }
}, },
"usehooks-ts": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
"integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA=="
},
"utf8-byte-length": { "utf8-byte-length": {
"version": "1.0.4", "version": "1.0.4",
"dev": true "dev": true

3
package.json
View file

@ -90,8 +90,7 @@
"slugify": "^1.4.6", "slugify": "^1.4.6",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"url-join": "^4.0.1", "url-join": "^4.0.1",
"use-react-router": "^1.0.7", "use-react-router": "^1.0.7"
"usehooks-ts": "^2.9.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.5.5", "@babel/cli": "^7.5.5",

227
src/apps/components/AppInstallPage/AppInstallPage.tsx
View file

@ -1,10 +1,9 @@
import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg"; import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
import plusIcon from "@assets/images/plus-icon.svg"; import plusIcon from "@assets/images/plus-icon.svg";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import Hr from "@dashboard/components/Hr"; import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
import { AppFetchMutation, AppInstallMutation } from "@dashboard/graphql"; import { AppFetchMutation, AppInstallMutation } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm"; import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -43,122 +42,124 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
const name = data?.name || ""; const name = data?.name || "";
return ( return (
<DetailedContent useSingleColumn constHeight> <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
<Content> <DetailPageLayout.Content>
<CardSpacer /> <Box paddingY={9}>
<Card> <CardSpacer />
<CardTitle <Card>
title={ <CardTitle
loading ? ( title={
loading ? (
<Skeleton />
) : (
intl.formatMessage(
{
id: "Id7C0X",
defaultMessage: `You are about to install {name}`,
description: "section header",
},
{ name },
)
)
}
/>
<CardContent className={classes.installCard}>
{loading ? (
<CircularProgress />
) : (
<div className={classes.installAppContainer}>
<div
className={clsx(
classes.installIcon,
classes.installSaleorIcon,
)}
>
<img src={saleorDarkLogoSmall} alt="" />
</div>
<img src={plusIcon} alt="" />
<div className={classes.installIcon}>
<GenericAppIcon />
</div>
</div>
)}
</CardContent>
</Card>
<CardSpacer />
<Card>
{!loading && (
<CardTitle
title={intl.formatMessage({
id: "VsGcdP",
defaultMessage: "App permissions",
description: "section header",
})}
/>
)}
<CardContent>
{loading ? (
<Skeleton /> <Skeleton />
) : ( ) : (
intl.formatMessage( <>
{ <Typography className={classes.installPermissionTitle}>
id: "Id7C0X", <FormattedMessage
defaultMessage: `You are about to install {name}`, id="BL/Lbk"
description: "section header", defaultMessage="Installing this app will give it following permissions:"
}, description="install app permissions"
{ name }, />
) </Typography>
) {!!data?.permissions?.length && (
} <ul className={classes.permissionsContainer}>
/> {data?.permissions?.map(perm => (
<CardContent className={classes.installCard}> <li key={perm.code}>{perm.name}</li>
{loading ? ( ))}
<CircularProgress /> </ul>
) : (
<div className={classes.installAppContainer}>
<div
className={clsx(
classes.installIcon,
classes.installSaleorIcon,
)} )}
> <Hr className={classes.installSpacer} />
<img src={saleorDarkLogoSmall} alt="" />
</div>
<img src={plusIcon} alt="" />
<div className={classes.installIcon}>
<GenericAppIcon />
</div>
</div>
)}
</CardContent>
</Card>
<CardSpacer />
<Card>
{!loading && (
<CardTitle
title={intl.formatMessage({
id: "VsGcdP",
defaultMessage: "App permissions",
description: "section header",
})}
/>
)}
<CardContent>
{loading ? (
<Skeleton />
) : (
<>
<Typography className={classes.installPermissionTitle}>
<FormattedMessage
id="BL/Lbk"
defaultMessage="Installing this app will give it following permissions:"
description="install app permissions"
/>
</Typography>
{!!data?.permissions?.length && (
<ul className={classes.permissionsContainer}>
{data?.permissions?.map(perm => (
<li key={perm.code}>{perm.name}</li>
))}
</ul>
)}
<Hr className={classes.installSpacer} />
<Typography <Typography
variant="body2" variant="body2"
className={classes.installPrivacyText} className={classes.installPrivacyText}
> >
<FormattedMessage <FormattedMessage
id="t1UYU6" id="t1UYU6"
defaultMessage="Uninstalling the app will remove all your customer’s personal data stored by {name}. " defaultMessage="Uninstalling the app will remove all your customer’s personal data stored by {name}. "
description="install app privacy" description="install app privacy"
values={{ name }} values={{ name }}
/> />
{!!data?.dataPrivacyUrl && ( {!!data?.dataPrivacyUrl && (
<a <a
href={data?.dataPrivacyUrl} href={data?.dataPrivacyUrl}
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<FormattedMessage <FormattedMessage
id="k5lHFp" id="k5lHFp"
defaultMessage="Learn more about data privacy" defaultMessage="Learn more about data privacy"
description="app data privacy link" description="app data privacy link"
/> />
</a> </a>
)} )}
</Typography> </Typography>
</> </>
)} )}
</CardContent> </CardContent>
</Card> </Card>
<CardSpacer /> <CardSpacer />
<Box display="flex" justifyContent="space-between" paddingX={9}> <Box display="flex" justifyContent="space-between" padding={9}>
<Button variant="secondary" onClick={navigateToAppsList}> <Button variant="secondary" onClick={navigateToAppsList}>
<FormattedMessage {...buttonMessages.cancel} /> <FormattedMessage {...buttonMessages.cancel} />
</Button> </Button>
<Button variant="primary" onClick={onSubmit}> <Button variant="primary" onClick={onSubmit}>
<FormattedMessage <FormattedMessage
id="PkCmGU" id="PkCmGU"
defaultMessage="Install App" defaultMessage="Install App"
description="install button" description="install button"
/> />
</Button> </Button>
</Box>
</Box> </Box>
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}; };

18
src/attributes/components/AttributePage/AttributePage.tsx
View file

@ -1,11 +1,9 @@
import { attributeListUrl } from "@dashboard/attributes/urls"; import { attributeListUrl } from "@dashboard/attributes/urls";
import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@dashboard/attributes/utils/data"; import { ATTRIBUTE_TYPES_WITH_DEDICATED_VALUES } from "@dashboard/attributes/utils/data";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types"; import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
@ -173,7 +171,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
return ( return (
<> <>
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={attributeListUrl()} href={attributeListUrl()}
title={ title={
@ -185,8 +183,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
}) })
: maybe(() => attribute.name) : maybe(() => attribute.name)
} }
></TopNav> />
<Content> <DetailPageLayout.Content>
<AttributeDetails <AttributeDetails
canChangeType={attribute === null} canChangeType={attribute === null}
data={data} data={data}
@ -221,8 +219,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
)} )}
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<AttributeOrganization <AttributeOrganization
canChangeType={attribute === null} canChangeType={attribute === null}
data={data} data={data}
@ -236,7 +234,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
disabled={disabled} disabled={disabled}
onChange={change} onChange={change}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={!!isSaveDisabled} disabled={!!isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
@ -244,7 +242,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
onSubmit={submit} onSubmit={submit}
onDelete={attribute === null ? undefined : onDelete} onDelete={attribute === null ? undefined : onDelete}
/> />
</DetailedContent> </DetailPageLayout>
{children(data)} {children(data)}
</> </>
); );

11
src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx
View file

@ -1,7 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer"; import { CardSpacer } from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata"; import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm"; import SeoForm from "@dashboard/components/SeoForm";
@ -36,7 +35,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
return ( return (
<CategoryCreateForm onSubmit={onSubmit} disabled={disabled}> <CategoryCreateForm onSubmit={onSubmit} disabled={disabled}>
{({ data, change, handlers, submit, isSaveDisabled }) => ( {({ data, change, handlers, submit, isSaveDisabled }) => (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={backUrl} href={backUrl}
title={intl.formatMessage({ title={intl.formatMessage({
@ -45,7 +44,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
description: "page header", description: "page header",
})} })}
/> />
<Content> <DetailPageLayout.Content>
<Box height="100vh" __marginBottom="auto"> <Box height="100vh" __marginBottom="auto">
<CategoryDetailsForm <CategoryDetailsForm
data={data} data={data}
@ -74,14 +73,14 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} /> <Metadata data={data} onChange={handlers.changeMetadata} />
</Box> </Box>
</Content> </DetailPageLayout.Content>
<Savebar <Savebar
onCancel={() => navigate(backUrl)} onCancel={() => navigate(backUrl)}
onSubmit={submit} onSubmit={submit}
state={saveButtonBarState} state={saveButtonBarState}
disabled={isSaveDisabled} disabled={isSaveDisabled}
/> />
</DetailedContent> </DetailPageLayout>
)} )}
</CategoryCreateForm> </CategoryCreateForm>
); );

5
src/categories/components/CategoryListPage/CategoryListPage.tsx
View file

@ -4,6 +4,7 @@ import {
} from "@dashboard/categories/urls"; } from "@dashboard/categories/urls";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import SearchBar from "@dashboard/components/SearchBar"; import SearchBar from "@dashboard/components/SearchBar";
import { CategoryFragment } from "@dashboard/graphql"; import { CategoryFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl"; import { sectionNames } from "@dashboard/intl";
@ -52,7 +53,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
const intl = useIntl(); const intl = useIntl();
return ( return (
<> <ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.categories)}> <TopNav title={intl.formatMessage(sectionNames.categories)}>
<Button <Button
variant="primary" variant="primary"
@ -100,7 +101,7 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
{...listProps} {...listProps}
/> />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
CategoryListPage.displayName = "CategoryListPage"; CategoryListPage.displayName = "CategoryListPage";

11
src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
View file

@ -3,12 +3,11 @@ import {
categoryListUrl, categoryListUrl,
categoryUrl, categoryUrl,
} from "@dashboard/categories/urls"; } from "@dashboard/categories/urls";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { CardSpacer } from "@dashboard/components/CardSpacer"; import { CardSpacer } from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm"; import SeoForm from "@dashboard/components/SeoForm";
@ -91,9 +90,9 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
disabled={disabled} disabled={disabled}
> >
{({ data, change, handlers, submit, isSaveDisabled }) => ( {({ data, change, handlers, submit, isSaveDisabled }) => (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav href={backHref} title={category?.name} /> <TopNav href={backHref} title={category?.name} />
<Content> <DetailPageLayout.Content>
<CategoryDetailsForm <CategoryDetailsForm
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -209,8 +208,8 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
state={saveButtonBarState} state={saveButtonBarState}
disabled={isSaveDisabled} disabled={isSaveDisabled}
/> />
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
)} )}
</CategoryUpdateForm> </CategoryUpdateForm>
); );

16
src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx
View file

@ -3,12 +3,10 @@ import ShippingZones from "@dashboard/channels/components/ShippingZones";
import Warehouses from "@dashboard/channels/components/Warehouses"; import Warehouses from "@dashboard/channels/components/Warehouses";
import { channelsListUrl } from "@dashboard/channels/urls"; import { channelsListUrl } from "@dashboard/channels/urls";
import { validateChannelFormData } from "@dashboard/channels/validation"; import { validateChannelFormData } from "@dashboard/channels/validation";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import RequirePermissions from "@dashboard/components/RequirePermissions"; import RequirePermissions from "@dashboard/components/RequirePermissions";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { SingleAutocompleteChoiceType } from "@dashboard/components/SingleAutocompleteSelectField"; import { SingleAutocompleteChoiceType } from "@dashboard/components/SingleAutocompleteSelectField";
@ -198,7 +196,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
const allErrors = [...errors, ...validationErrors]; const allErrors = [...errors, ...validationErrors];
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={channelsListUrl()} href={channelsListUrl()}
title={ title={
@ -210,7 +208,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
}) })
} }
/> />
<Content> <DetailPageLayout.Content>
<ChannelForm <ChannelForm
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -223,8 +221,8 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
onDefaultCountryChange={handleDefaultCountrySelect} onDefaultCountryChange={handleDefaultCountrySelect}
errors={allErrors} errors={allErrors}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
{!!updateChannelStatus && ( {!!updateChannelStatus && (
<> <>
<ChannelStatus <ChannelStatus
@ -279,7 +277,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
disabled={disabled} disabled={disabled}
onChange={change} onChange={change}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
onCancel={() => navigate(channelsListUrl())} onCancel={() => navigate(channelsListUrl())}
onSubmit={submit} onSubmit={submit}
@ -287,7 +285,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
state={saveButtonBarState} state={saveButtonBarState}
disabled={disabled} disabled={disabled}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

5
src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
View file

@ -2,6 +2,7 @@ import { channelAddUrl, channelUrl } from "@dashboard/channels/urls";
import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo"; import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert"; import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import ResponsiveTable from "@dashboard/components/ResponsiveTable"; import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
@ -39,7 +40,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
const limitReached = isLimitReached(limits, "channels"); const limitReached = isLimitReached(limits, "channels");
return ( return (
<> <ListPageLayout>
<TopNav <TopNav
href={configurationMenuUrl} href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.channels)} title={intl.formatMessage(sectionNames.channels)}
@ -154,7 +155,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>
</Card> </Card>
</> </ListPageLayout>
); );
}; };

16
src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelCollectionData } from "@dashboard/channels/utils"; import { ChannelCollectionData } from "@dashboard/channels/utils";
import { collectionListUrl } from "@dashboard/collections/urls"; import { collectionListUrl } from "@dashboard/collections/urls";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer"; import { CardSpacer } from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata"; import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm"; import SeoForm from "@dashboard/components/SeoForm";
@ -58,7 +56,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
disabled={disabled} disabled={disabled}
> >
{({ change, data, handlers, submit, isSaveDisabled }) => ( {({ change, data, handlers, submit, isSaveDisabled }) => (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={collectionListUrl()} href={collectionListUrl()}
title={intl.formatMessage({ title={intl.formatMessage({
@ -67,7 +65,7 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
description: "page header", description: "page header",
})} })}
/> />
<Content> <DetailPageLayout.Content>
<CollectionDetails <CollectionDetails
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -129,8 +127,8 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
/> />
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} /> <Metadata data={data} onChange={handlers.changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard <ChannelsAvailabilityCard
messages={{ messages={{
hiddenLabel: intl.formatMessage({ hiddenLabel: intl.formatMessage({
@ -153,14 +151,14 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
onChange={handlers.changeChannels} onChange={handlers.changeChannels}
openModal={openChannelsModal} openModal={openChannelsModal}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
state={saveButtonBarState} state={saveButtonBarState}
disabled={isSaveDisabled} disabled={isSaveDisabled}
onCancel={() => navigate(collectionListUrl())} onCancel={() => navigate(collectionListUrl())}
onSubmit={submit} onSubmit={submit}
/> />
</DetailedContent> </DetailPageLayout>
)} )}
</CollectionCreateForm> </CollectionCreateForm>
); );

16
src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelCollectionData } from "@dashboard/channels/utils"; import { ChannelCollectionData } from "@dashboard/channels/utils";
import { collectionListUrl } from "@dashboard/collections/urls"; import { collectionListUrl } from "@dashboard/collections/urls";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer"; import { CardSpacer } from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm"; import SeoForm from "@dashboard/components/SeoForm";
@ -75,9 +73,9 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
disabled={disabled} disabled={disabled}
> >
{({ change, data, handlers, submit, isSaveDisabled }) => ( {({ change, data, handlers, submit, isSaveDisabled }) => (
<DetailedContent> <DetailPageLayout>
<TopNav href={collectionListUrl()} title={collection?.name} /> <TopNav href={collectionListUrl()} title={collection?.name} />
<Content> <DetailPageLayout.Content>
<CollectionDetails <CollectionDetails
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -117,8 +115,8 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
titlePlaceholder={collection?.name} titlePlaceholder={collection?.name}
onChange={change} onChange={change}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<div> <div>
<ChannelsAvailabilityCard <ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_PRODUCTS]} managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
@ -143,7 +141,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
openModal={openChannelsModal} openModal={openChannelsModal}
/> />
</div> </div>
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
state={saveButtonBarState} state={saveButtonBarState}
disabled={isSaveDisabled} disabled={isSaveDisabled}
@ -151,7 +149,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
onDelete={onCollectionRemove} onDelete={onCollectionRemove}
onSubmit={submit} onSubmit={submit}
/> />
</DetailedContent> </DetailPageLayout>
)} )}
</CollectionUpdateForm> </CollectionUpdateForm>
); );

5
src/collections/components/CollectionListPage/CollectionListPage.tsx
View file

@ -3,6 +3,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { getByName } from "@dashboard/components/Filter/utils"; import { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar"; import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { sectionNames } from "@dashboard/intl"; import { sectionNames } from "@dashboard/intl";
import { import {
FilterPageProps, FilterPageProps,
@ -51,7 +52,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
const filterDependency = filterStructure.find(getByName("channel")); const filterDependency = filterStructure.find(getByName("channel"));
return ( return (
<> <ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.collections)}> <TopNav title={intl.formatMessage(sectionNames.collections)}>
<Button <Button
disabled={disabled} disabled={disabled}
@ -96,7 +97,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
{...listProps} {...listProps}
/> />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
CollectionListPage.displayName = "CollectionListPage"; CollectionListPage.displayName = "CollectionListPage";

32
src/components/AppLayout/Content.tsx
View file

@ -1,32 +0,0 @@
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
import { useContentHeight } from "./useContentHeight";
interface ContentProps {
[key: `data-${string}`]: string;
children: React.ReactNode;
noSavebar?: boolean;
noTopNav?: boolean;
}
export const Content: React.FC<ContentProps> = ({
children,
noSavebar = false,
noTopNav = false,
...rest
}) => {
const { withoutSaveBar, withSaveBar } = useContentHeight();
return (
<Box
__gridArea="content"
__height={noSavebar ? withoutSaveBar() : withSaveBar({ noTopNav })}
overflowY="auto"
className="hide-scrollbar"
{...rest}
>
{children}
</Box>
);
};

42
src/components/AppLayout/DetailedContent.tsx
View file

@ -1,42 +0,0 @@
import { Box, tabletMediaQuery } from "@saleor/macaw-ui/next";
import React from "react";
import { useMediaQuery } from "usehooks-ts";
import { contentMaxWidth } from "./consts";
interface DetailedContentProps {
children: React.ReactNode;
useSingleColumn?: boolean;
constHeight?: boolean;
}
const getLayoutAreas = (useSingleColumn: boolean, isTablet: boolean) => {
if (useSingleColumn) {
return '"nav" "content"';
}
return isTablet ? '"nav right" "content right"' : '"nav" "content" "right"';
};
export const DetailedContent: React.FC<DetailedContentProps> = ({
children,
useSingleColumn = false,
constHeight = false,
}) => {
const isTablet = useMediaQuery(tabletMediaQuery);
return (
<Box
as="div"
display="grid"
height={constHeight ? "100vh" : "100%"}
margin="auto"
__maxWidth={contentMaxWidth}
__gridTemplateColumns={useSingleColumn ? "1fr" : "9fr 4fr"}
__gridTemplateRows="auto 1fr"
__gridTemplateAreas={getLayoutAreas(useSingleColumn, isTablet)}
>
{children}
</Box>
);
};

37
src/components/AppLayout/RightSidebar.tsx
View file

@ -1,37 +0,0 @@
import { Box } from "@saleor/macaw-ui/next";
import clsx from "clsx";
import React from "react";
import { borderHeight, savebarHeight } from "./consts";
interface RightSidebarProps {
children: React.ReactNode;
className?: string;
noSavebar?: boolean;
}
export const RightSidebar: React.FC<RightSidebarProps> = ({
children,
noSavebar = false,
className,
}) => (
<Box
borderStyle="solid"
borderColor="neutralPlain"
borderLeftWidth={1}
__height={
noSavebar ? "100%" : `calc(100vh - ${savebarHeight} - ${borderHeight})`
}
position="sticky"
top={0}
overflowY="auto"
borderYWidth={0}
borderTopWidth={0}
borderBottomWidth={0}
borderRightWidth={0}
__gridArea="right"
className={clsx("hide-scrollbar", className)}
>
{children}
</Box>
);

4
src/components/AppLayout/TopNav.tsx
View file

@ -30,9 +30,11 @@ export const TopNav: React.FC<PropsWithChildren<TopNavProps>> = ({
borderBottomStyle="solid" borderBottomStyle="solid"
borderColor="neutralPlain" borderColor="neutralPlain"
position="relative" position="relative"
__gridArea="nav"
data-test-id="page-header" data-test-id="page-header"
__height={topBarHeight} __height={topBarHeight}
gridColumn="8"
gridRowStart="1"
backgroundColor="plain"
> >
{href && ( {href && (
<Link <Link

24
src/components/AppLayout/useContentHeight.test.ts
View file

@ -1,24 +0,0 @@
import { useContentHeight } from "./useContentHeight";
describe("useContentHeight", () => {
it("should return the correct height without savebar", () => {
const { withoutSaveBar } = useContentHeight();
const height = withoutSaveBar();
expect(height).toEqual("calc(100vh - 77px - 1px)");
});
it("should return the correct height with savebar", () => {
const { withSaveBar } = useContentHeight();
const height = withSaveBar({ noTopNav: false });
expect(height).toEqual("calc(100vh - 77px - 64px - 1px)");
});
it("should return the correct height with savebar and no top nav", () => {
const { withSaveBar } = useContentHeight();
const height = withSaveBar({ noTopNav: true });
expect(height).toEqual("calc(100vh - 0px - 64px - 1px)");
});
});

14
src/components/AppLayout/useContentHeight.ts
View file

@ -1,14 +0,0 @@
import { borderHeight, savebarHeight, topBarHeight } from "./consts";
export const useContentHeight = () => {
const withoutSaveBar = () =>
`calc(100vh - ${topBarHeight} - ${borderHeight})`;
const withSaveBar = ({ noTopNav }) => {
const topHeight = noTopNav ? "0px" : topBarHeight;
return `calc(100vh - ${topHeight} - ${savebarHeight} - ${borderHeight})`;
};
return { withoutSaveBar, withSaveBar };
};

1
src/components/Attributes/styles.ts
View file

@ -57,7 +57,6 @@ export const useBasicAttributeStyles = makeStyles(
"&:hover": { "&:hover": {
fillOpacity: 1, fillOpacity: 1,
}, },
position: "absolute",
padding: theme.spacing(0.25), padding: theme.spacing(0.25),
marginLeft: theme.spacing(0.75), marginLeft: theme.spacing(0.75),
}, },

23
src/components/Layouts/Detail/Content.tsx Normal file
View file

@ -0,0 +1,23 @@
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
interface DetailPageLayoutContentProps {
[key: `data-${string}`]: string;
children: React.ReactNode;
}
export const Content: React.FC<DetailPageLayoutContentProps> = ({
children,
...rest
}) => (
<Box
height="100%"
overflowY="auto"
className="hide-scrollbar"
gridColumn="8"
gridRow={{ mobile: "6", tablet: "12", desktop: "12" }}
{...rest}
>
{children}
</Box>
);

22
src/components/Layouts/Detail/RightSidebar.tsx Normal file
View file

@ -0,0 +1,22 @@
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
interface DetailPageLayoutRightSidebarProps {
children: React.ReactNode;
}
export const RightSidebar: React.FC<DetailPageLayoutRightSidebarProps> = ({
children,
}) => (
<Box
borderLeftStyle="solid"
borderColor="neutralPlain"
height="100%"
overflowY="auto"
className="hide-scrollbar"
gridColumn={"8"}
gridRow={{ mobile: "6", tablet: "full", desktop: "full" }}
>
{children}
</Box>
);

35
src/components/Layouts/Detail/Root.tsx Normal file
View file

@ -0,0 +1,35 @@
import {
borderHeight,
contentMaxWidth,
savebarHeight,
} from "@dashboard/components/AppLayout/consts";
import { Box, Sprinkles } from "@saleor/macaw-ui/next";
import React from "react";
interface DetailPageLayoutProps {
children: React.ReactNode;
gridTemplateColumns?: Sprinkles["gridTemplateColumns"];
withSavebar?: boolean;
}
const contentWithSidebarHeight = `calc(100vh - ${savebarHeight} - ${borderHeight})`;
const contentWithoutSidebarHeight = `calc(100vh - ${borderHeight}`;
export const RootLayout: React.FC<DetailPageLayoutProps> = ({
children,
gridTemplateColumns = 12,
withSavebar = true,
}) => (
<Box
display="grid"
margin="auto"
gridTemplateColumns={gridTemplateColumns}
__gridTemplateRows="auto 1fr"
__maxWidth={contentMaxWidth}
__height={
withSavebar ? contentWithSidebarHeight : contentWithoutSidebarHeight
}
>
{children}
</Box>
);

8
src/components/Layouts/Detail/index.ts Normal file
View file

@ -0,0 +1,8 @@
import { Content } from "./Content";
import { RightSidebar } from "./RightSidebar";
import { RootLayout } from "./Root";
export const DetailPageLayout = Object.assign(RootLayout, {
Content,
RightSidebar,
});

21
src/components/Layouts/List/Root.tsx Normal file
View file

@ -0,0 +1,21 @@
import { contentMaxWidth } from "@dashboard/components/AppLayout/consts";
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
interface ListPageLayoutProps {
children: React.ReactNode;
hasSaveBar?: boolean;
hasTopNav?: boolean;
}
export const ListPageLayout: React.FC<ListPageLayoutProps> = ({ children }) => (
<Box
display="grid"
margin="auto"
gridTemplateColumns={1}
height="100%"
__maxWidth={contentMaxWidth}
>
{children}
</Box>
);

1
src/components/Layouts/List/index.ts Normal file
View file

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

2
src/components/Layouts/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./Detail";
export * from "./List";

2
src/configuration/ConfigurationPage.stories.tsx
View file

@ -6,7 +6,7 @@ import { storiesOf } from "@storybook/react";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import ConfigurationPage from "./ConfigurationPage"; import { ConfigurationPage } from "./ConfigurationPage";
const user = { const user = {
__typename: staffMember.__typename, __typename: staffMember.__typename,

13
src/configuration/ConfigurationPage.tsx
View file

@ -1,6 +1,5 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { UserFragment } from "@dashboard/graphql"; import { UserFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl"; import { sectionNames } from "@dashboard/intl";
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
@ -95,11 +94,11 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
<TopNav title={intl.formatMessage(sectionNames.configuration)}> <TopNav title={intl.formatMessage(sectionNames.configuration)}>
{isSmUp && renderVersionInfo} {isSmUp && renderVersionInfo}
</TopNav> </TopNav>
<Content noSavebar> <DetailPageLayout.Content>
<Box paddingX={9} __maxWidth={"1024px"} margin="auto"> <Box paddingX={9} __maxWidth={"1024px"} margin="auto">
{menus {menus
.filter(menu => .filter(menu =>
@ -137,9 +136,9 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
</div> </div>
))} ))}
</Box> </Box>
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}; };
ConfigurationPage.displayName = "ConfigurationPage"; ConfigurationPage.displayName = "ConfigurationPage";
export default ConfigurationPage;

2
src/configuration/index.tsx
View file

@ -34,7 +34,7 @@ import { warehouseSection } from "@dashboard/warehouses/urls";
import React from "react"; import React from "react";
import { IntlShape, useIntl } from "react-intl"; import { IntlShape, useIntl } from "react-intl";
import ConfigurationPage from "./ConfigurationPage"; import { ConfigurationPage } from "./ConfigurationPage";
import { MenuSection } from "./types"; import { MenuSection } from "./types";
export function createConfigurationMenu(intl: IntlShape): MenuSection[] { export function createConfigurationMenu(intl: IntlShape): MenuSection[] {

18
src/custom-apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx
View file

@ -1,9 +1,7 @@
import AccountPermissions from "@dashboard/components/AccountPermissions"; import AccountPermissions from "@dashboard/components/AccountPermissions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { CustomAppUrls } from "@dashboard/custom-apps/urls"; import { CustomAppUrls } from "@dashboard/custom-apps/urls";
import { import {
@ -58,7 +56,7 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
disabled={disabled} disabled={disabled}
> >
{({ data, change, submit, isSaveDisabled }) => ( {({ data, change, submit, isSaveDisabled }) => (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={CustomAppUrls.resolveAppListUrl()} href={CustomAppUrls.resolveAppListUrl()}
title={intl.formatMessage({ title={intl.formatMessage({
@ -66,16 +64,16 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
defaultMessage: "Create New App", defaultMessage: "Create New App",
description: "header", description: "header",
})} })}
></TopNav> />
<Content> <DetailPageLayout.Content>
<CustomAppInformation <CustomAppInformation
data={data} data={data}
disabled={disabled} disabled={disabled}
errors={errors} errors={errors}
onChange={change} onChange={change}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<AccountPermissions <AccountPermissions
data={data} data={data}
errorMessage={permissionsError} errorMessage={permissionsError}
@ -95,14 +93,14 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
description: "card description", description: "card description",
})} })}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())} onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())}
onSubmit={submit} onSubmit={submit}
/> />
</DetailedContent> </DetailPageLayout>
)} )}
</Form> </Form>
); );

16
src/custom-apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx
View file

@ -1,10 +1,8 @@
import AccountPermissions from "@dashboard/components/AccountPermissions"; import AccountPermissions from "@dashboard/components/AccountPermissions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import WebhooksList from "@dashboard/custom-apps/components/WebhooksList"; import WebhooksList from "@dashboard/custom-apps/components/WebhooksList";
import { CustomAppUrls } from "@dashboard/custom-apps/urls"; import { CustomAppUrls } from "@dashboard/custom-apps/urls";
@ -104,7 +102,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
disabled={disabled} disabled={disabled}
> >
{({ data, change, submit, isSaveDisabled }) => ( {({ data, change, submit, isSaveDisabled }) => (
<DetailedContent> <DetailPageLayout>
<TopNav href={CustomAppUrls.resolveAppListUrl()} title={app?.name}> <TopNav href={CustomAppUrls.resolveAppListUrl()} title={app?.name}>
<Button <Button
variant="secondary" variant="secondary"
@ -128,7 +126,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
)} )}
</Button> </Button>
</TopNav> </TopNav>
<Content> <DetailPageLayout.Content>
{token && ( {token && (
<> <>
<CustomAppDefaultToken <CustomAppDefaultToken
@ -158,8 +156,8 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
onRemove={onWebhookRemove} onRemove={onWebhookRemove}
createHref={app?.isActive && webhookCreateHref} createHref={app?.isActive && webhookCreateHref}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<AccountPermissions <AccountPermissions
data={data} data={data}
errorMessage={permissionsError} errorMessage={permissionsError}
@ -179,14 +177,14 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
description: "card description", description: "card description",
})} })}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())} onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())}
onSubmit={submit} onSubmit={submit}
/> />
</DetailedContent> </DetailPageLayout>
)} )}
</Form> </Form>
); );

14
src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
View file

@ -1,9 +1,6 @@
import {
borderHeight,
topBarHeight,
} from "@dashboard/components/AppLayout/consts";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper"; import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
import TableRowLink from "@dashboard/components/TableRowLink"; import TableRowLink from "@dashboard/components/TableRowLink";
import { CustomAppUrls } from "@dashboard/custom-apps/urls"; import { CustomAppUrls } from "@dashboard/custom-apps/urls";
@ -35,7 +32,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
const classes = useStyles({}); const classes = useStyles({});
return ( return (
<> <ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.webhooksAndEvents)}> <TopNav title={intl.formatMessage(sectionNames.webhooksAndEvents)}>
<Button <Button
variant="secondary" variant="secondary"
@ -49,10 +46,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
/> />
</Button> </Button>
</TopNav> </TopNav>
<Box <Box padding={9}>
padding={9}
__height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}
>
<Box marginBottom={4}> <Box marginBottom={4}>
<Text as="p"> <Text as="p">
<FormattedMessage <FormattedMessage
@ -116,7 +110,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>
</Box> </Box>
</> </ListPageLayout>
); );
}; };

13
src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
View file

@ -1,8 +1,7 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import FormSpacer from "@dashboard/components/FormSpacer"; import FormSpacer from "@dashboard/components/FormSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import WebhookEvents from "@dashboard/custom-apps/components/WebhookEvents"; import WebhookEvents from "@dashboard/custom-apps/components/WebhookEvents";
import WebhookInfo from "@dashboard/custom-apps/components/WebhookInfo"; import WebhookInfo from "@dashboard/custom-apps/components/WebhookInfo";
@ -110,10 +109,10 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
}); });
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} /> <TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} />
<Content> <DetailPageLayout.Content>
<Box paddingX={9}> <Box padding={9}>
<WebhookStatus <WebhookStatus
data={data.isActive} data={data.isActive}
disabled={disabled} disabled={disabled}
@ -142,14 +141,14 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
<FormSpacer /> <FormSpacer />
<WebhookHeaders data={data} onChange={change} /> <WebhookHeaders data={data} onChange={change} />
</Box> </Box>
</Content> </DetailPageLayout.Content>
<Savebar <Savebar
disabled={disabled} disabled={disabled}
state={saveButtonBarState} state={saveButtonBarState}
onCancel={() => navigate(backUrl)} onCancel={() => navigate(backUrl)}
onSubmit={submit} onSubmit={submit}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

92
src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
View file

@ -1,6 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { customerUrl } from "@dashboard/customers/urls"; import { customerUrl } from "@dashboard/customers/urls";
import { AddressTypeEnum, CustomerAddressesFragment } from "@dashboard/graphql"; import { AddressTypeEnum, CustomerAddressesFragment } from "@dashboard/graphql";
import { getStringOrPlaceholder, renderCollection } from "@dashboard/misc"; import { getStringOrPlaceholder, renderCollection } from "@dashboard/misc";
@ -96,7 +96,7 @@ const CustomerAddressListPage: React.FC<
); );
return ( return (
<> <ListPageLayout>
<TopNav <TopNav
href={customerUrl(customer?.id)} href={customerUrl(customer?.id)}
title={ title={
@ -111,52 +111,50 @@ const CustomerAddressListPage: React.FC<
</Button> </Button>
)} )}
</TopNav> </TopNav>
<Content> {isEmpty ? (
{isEmpty ? ( <Box
<Box display="flex"
display="flex" justifyContent="center"
justifyContent="center" alignItems="center"
alignItems="center" padding={9}
padding={9} flexDirection="column"
flexDirection="column" >
<Typography variant="h5">
{intl.formatMessage(messages.noAddressToShow)}
</Typography>
<Typography className={classes.description}>
{intl.formatMessage(messages.doesntHaveAddresses)}
</Typography>
<Button
className={classes.addButton}
variant="primary"
onClick={onAdd}
> >
<Typography variant="h5"> {intl.formatMessage(messages.addAddress)}
{intl.formatMessage(messages.noAddressToShow)} </Button>
</Typography> </Box>
<Typography className={classes.description}> ) : (
{intl.formatMessage(messages.doesntHaveAddresses)} <div className={classes.root}>
</Typography> {renderCollection(customer?.addresses, (address, addressNumber) => (
<Button <CustomerAddress
className={classes.addButton} address={address}
variant="primary" addressNumber={addressNumber + 1}
onClick={onAdd} disabled={disabled}
> isDefaultBillingAddress={
{intl.formatMessage(messages.addAddress)} customer?.defaultBillingAddress?.id === address?.id
</Button> }
</Box> isDefaultShippingAddress={
) : ( customer?.defaultShippingAddress?.id === address?.id
<div className={classes.root}> }
{renderCollection(customer?.addresses, (address, addressNumber) => ( onEdit={() => onEdit(address.id)}
<CustomerAddress onRemove={() => onRemove(address.id)}
address={address} onSetAsDefault={type => onSetAsDefault(address.id, type)}
addressNumber={addressNumber + 1} key={address?.id || "skeleton"}
disabled={disabled} />
isDefaultBillingAddress={ ))}
customer?.defaultBillingAddress?.id === address?.id </div>
} )}
isDefaultShippingAddress={ </ListPageLayout>
customer?.defaultShippingAddress?.id === address?.id
}
onEdit={() => onEdit(address.id)}
onRemove={() => onRemove(address.id)}
onSetAsDefault={type => onSetAsDefault(address.id, type)}
key={address?.id || "skeleton"}
/>
))}
</div>
)}
</Content>
</>
); );
}; };
CustomerAddressListPage.displayName = "CustomerAddressListPage"; CustomerAddressListPage.displayName = "CustomerAddressListPage";

11
src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
View file

@ -1,9 +1,8 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler"; import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { CardSpacer } from "@dashboard/components/CardSpacer"; import { CardSpacer } from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { customerListUrl } from "@dashboard/customers/urls"; import { customerListUrl } from "@dashboard/customers/urls";
import { import {
@ -152,7 +151,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
const handleCountrySelect = createCountryHandler(countrySelect, set); const handleCountrySelect = createCountryHandler(countrySelect, set);
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={customerListUrl()} href={customerListUrl()}
title={intl.formatMessage({ title={intl.formatMessage({
@ -161,7 +160,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
description: "page header", description: "page header",
})} })}
/> />
<Content> <DetailPageLayout.Content>
<div> <div>
<CustomerCreateDetails <CustomerCreateDetails
data={data} data={data}
@ -193,8 +192,8 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
onSubmit={submit} onSubmit={submit}
onCancel={() => navigate(customerListUrl())} onCancel={() => navigate(customerListUrl())}
/> />
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

16
src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx
View file

@ -3,14 +3,12 @@ import {
mapToMenuItemsForCustomerDetails, mapToMenuItemsForCustomerDetails,
useExtensions, useExtensions,
} from "@dashboard/apps/useExtensions"; } from "@dashboard/apps/useExtensions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Backlink } from "@dashboard/components/Backlink"; import { Backlink } from "@dashboard/components/Backlink";
import CardMenu from "@dashboard/components/CardMenu/CardMenu"; import CardMenu from "@dashboard/components/CardMenu/CardMenu";
import { CardSpacer } from "@dashboard/components/CardSpacer"; import { CardSpacer } from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types"; import { MetadataFormData } from "@dashboard/components/Metadata/types";
import RequirePermissions from "@dashboard/components/RequirePermissions"; import RequirePermissions from "@dashboard/components/RequirePermissions";
@ -107,7 +105,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change); const changeMetadata = makeMetadataChangeHandler(change);
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={customerListUrl()} href={customerListUrl()}
title={getUserName(customer, true)} title={getUserName(customer, true)}
@ -116,7 +114,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
<CardMenu menuItems={extensionMenuItems} /> <CardMenu menuItems={extensionMenuItems} />
)} )}
</TopNav> </TopNav>
<Content> <DetailPageLayout.Content>
<Backlink href={customerListUrl()}> <Backlink href={customerListUrl()}>
{intl.formatMessage(sectionNames.customers)} {intl.formatMessage(sectionNames.customers)}
</Backlink> </Backlink>
@ -147,8 +145,8 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
<CardSpacer /> <CardSpacer />
</RequirePermissions> </RequirePermissions>
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<CustomerAddresses <CustomerAddresses
customer={customer} customer={customer}
disabled={disabled} disabled={disabled}
@ -162,7 +160,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
> >
<CustomerGiftCardsCard /> <CustomerGiftCardsCard />
</RequirePermissions> </RequirePermissions>
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBar} state={saveButtonBar}
@ -170,7 +168,7 @@ const CustomerDetailsPage: React.FC<CustomerDetailsPageProps> = ({
onCancel={() => navigate(customerListUrl())} onCancel={() => navigate(customerListUrl())}
onDelete={onDelete} onDelete={onDelete}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

18
src/discounts/components/SaleCreatePage/SaleCreatePage.tsx
View file

@ -1,11 +1,9 @@
import { validateSalePrice } from "@dashboard/channels/utils"; import { validateSalePrice } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata"; import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { createSaleChannelsChangeHandler } from "@dashboard/discounts/handlers"; import { createSaleChannelsChangeHandler } from "@dashboard/discounts/handlers";
@ -102,7 +100,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change); const changeMetadata = makeMetadataChangeHandler(change);
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
title={intl.formatMessage({ title={intl.formatMessage({
id: "2E1xZ0", id: "2E1xZ0",
@ -110,7 +108,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
description: "page header", description: "page header",
})} })}
/> />
<Content> <DetailPageLayout.Content>
<SaleInfo <SaleInfo
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -133,8 +131,9 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
errors={errors} errors={errors}
onChange={change} onChange={change}
/> />
</Content> <Metadata data={data} onChange={changeMetadata} />
<RightSidebar> </DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard <ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]} managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
allChannelsCount={allChannelsCount} allChannelsCount={allChannelsCount}
@ -145,15 +144,14 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
disabled={disabled} disabled={disabled}
openModal={openChannelsModal} openModal={openChannelsModal}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
<Savebar <Savebar
disabled={disabled} disabled={disabled}
onCancel={onBack} onCancel={onBack}
onSubmit={submit} onSubmit={submit}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

18
src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelSaleData, validateSalePrice } from "@dashboard/channels/utils"; import { ChannelSaleData, validateSalePrice } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata"; import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { Tab, TabContainer } from "@dashboard/components/Tab"; import { Tab, TabContainer } from "@dashboard/components/Tab";
@ -184,9 +182,9 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
const allErrors = [...localErrors, ...errors]; const allErrors = [...localErrors, ...errors];
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={saleListUrl()} title={sale?.name} /> <TopNav href={saleListUrl()} title={sale?.name} />
<Content> <DetailPageLayout.Content>
<SaleInfo <SaleInfo
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -298,8 +296,9 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
errors={errors} errors={errors}
onChange={change} onChange={change}
/> />
</Content> <Metadata data={data} onChange={changeMetadata} />
<RightSidebar> </DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<SaleSummary selectedChannelId={selectedChannelId} sale={sale} /> <SaleSummary selectedChannelId={selectedChannelId} sale={sale} />
<CardSpacer /> <CardSpacer />
<ChannelsAvailabilityCard <ChannelsAvailabilityCard
@ -312,8 +311,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
disabled={disabled} disabled={disabled}
openModal={openChannelsModal} openModal={openChannelsModal}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
<Savebar <Savebar
disabled={disabled} disabled={disabled}
onCancel={() => navigate(saleListUrl())} onCancel={() => navigate(saleListUrl())}
@ -321,7 +319,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
onSubmit={() => handleSubmit(data)} onSubmit={() => handleSubmit(data)}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

5
src/discounts/components/SaleListPage/SaleListPage.tsx
View file

@ -2,6 +2,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { getByName } from "@dashboard/components/Filter/utils"; import { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar"; import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { saleAddUrl, SaleListUrlSortField } from "@dashboard/discounts/urls"; import { saleAddUrl, SaleListUrlSortField } from "@dashboard/discounts/urls";
import { SaleFragment } from "@dashboard/graphql"; import { SaleFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl"; import { sectionNames } from "@dashboard/intl";
@ -53,7 +54,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
const filterDependency = structure.find(getByName("channel")); const filterDependency = structure.find(getByName("channel"));
return ( return (
<> <ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.sales)}> <TopNav title={intl.formatMessage(sectionNames.sales)}>
<Button <Button
href={saleAddUrl()} href={saleAddUrl()}
@ -91,7 +92,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
/> />
<SaleList filterDependency={filterDependency} {...listProps} /> <SaleList filterDependency={filterDependency} {...listProps} />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
SaleListPage.displayName = "SaleListPage"; SaleListPage.displayName = "SaleListPage";

18
src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelVoucherData } from "@dashboard/channels/utils"; import { ChannelVoucherData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata"; import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
@ -119,7 +117,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change); const changeMetadata = makeMetadataChangeHandler(change);
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={voucherListUrl()} href={voucherListUrl()}
title={intl.formatMessage({ title={intl.formatMessage({
@ -128,7 +126,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
description: "page header", description: "page header",
})} })}
/> />
<Content> <DetailPageLayout.Content>
<VoucherInfo <VoucherInfo
data={data} data={data}
errors={errors} errors={errors}
@ -181,8 +179,9 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
errors={errors} errors={errors}
onChange={change} onChange={change}
/> />
</Content> <Metadata data={data} onChange={changeMetadata} />
<RightSidebar> </DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard <ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]} managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
allChannelsCount={allChannelsCount} allChannelsCount={allChannelsCount}
@ -193,15 +192,14 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
disabled={disabled} disabled={disabled}
openModal={openChannelsModal} openModal={openChannelsModal}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
<Savebar <Savebar
disabled={disabled} disabled={disabled}
onCancel={() => navigate(voucherListUrl())} onCancel={() => navigate(voucherListUrl())}
onSubmit={submit} onSubmit={submit}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

16
src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
View file

@ -1,12 +1,10 @@
import { ChannelVoucherData } from "@dashboard/channels/utils"; import { ChannelVoucherData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import CountryList from "@dashboard/components/CountryList"; import CountryList from "@dashboard/components/CountryList";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata"; import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { Tab, TabContainer } from "@dashboard/components/Tab"; import { Tab, TabContainer } from "@dashboard/components/Tab";
@ -210,9 +208,9 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
const allErrors = [...localErrors, ...errors]; const allErrors = [...localErrors, ...errors];
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={voucherListUrl()} title={voucher?.code} /> <TopNav href={voucherListUrl()} title={voucher?.code} />
<Content> <DetailPageLayout.Content>
<VoucherInfo <VoucherInfo
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -362,8 +360,8 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
onChange={change} onChange={change}
/> />
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<VoucherSummary <VoucherSummary
voucher={voucher} voucher={voucher}
selectedChannelId={selectedChannelId} selectedChannelId={selectedChannelId}
@ -379,7 +377,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
disabled={disabled} disabled={disabled}
openModal={openChannelsModal} openModal={openChannelsModal}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
onCancel={() => navigate(voucherListUrl())} onCancel={() => navigate(voucherListUrl())}
disabled={disabled} disabled={disabled}
@ -387,7 +385,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
onSubmit={() => handleSubmit(data)} onSubmit={() => handleSubmit(data)}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

5
src/discounts/components/VoucherListPage/VoucherListPage.tsx
View file

@ -2,6 +2,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { getByName } from "@dashboard/components/Filter/utils"; import { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar"; import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { import {
voucherAddUrl, voucherAddUrl,
VoucherListUrlSortField, VoucherListUrlSortField,
@ -55,7 +56,7 @@ const VoucherListPage: React.FC<VoucherListPageProps> = ({
const filterDependency = structure.find(getByName("channel")); const filterDependency = structure.find(getByName("channel"));
return ( return (
<> <ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.vouchers)}> <TopNav title={intl.formatMessage(sectionNames.vouchers)}>
<Button <Button
href={voucherAddUrl()} href={voucherAddUrl()}
@ -93,7 +94,7 @@ const VoucherListPage: React.FC<VoucherListPageProps> = ({
/> />
<VoucherList filterDependency={filterDependency} {...listProps} /> <VoucherList filterDependency={filterDependency} {...listProps} />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
VoucherListPage.displayName = "VoucherListPage"; VoucherListPage.displayName = "VoucherListPage";

35
src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
View file

@ -1,8 +1,7 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { Grid } from "@dashboard/components/Grid"; import { Grid } from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
GiftCardSettingsExpiryTypeEnum, GiftCardSettingsExpiryTypeEnum,
@ -60,15 +59,15 @@ const GiftCardSettingsPage: React.FC = () => {
const formErrors = getFormErrors(["expiryPeriod"], apiErrors); const formErrors = getFormErrors(["expiryPeriod"], apiErrors);
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={giftCardsListPath} href={giftCardsListPath}
title={intl.formatMessage(messages.title)} title={intl.formatMessage(messages.title)}
/> />
<Form initial={initialData} onSubmit={handleSubmit}> <DetailPageLayout.Content>
{({ data: formData, submit, change }) => ( <Form initial={initialData} onSubmit={handleSubmit}>
<> {({ data: formData, submit, change }) => (
<Content> <>
<Box padding={9} margin="auto" height="100vh"> <Box padding={9} margin="auto" height="100vh">
<Grid variant="inverted"> <Grid variant="inverted">
<div> <div>
@ -86,17 +85,17 @@ const GiftCardSettingsPage: React.FC = () => {
/> />
</Grid> </Grid>
</Box> </Box>
</Content> <Savebar
<Savebar onCancel={() => navigate(giftCardsListPath)}
onCancel={() => navigate(giftCardsListPath)} onSubmit={submit}
onSubmit={submit} disabled={formLoading}
disabled={formLoading} state={updateGiftCardSettingsOpts?.status}
state={updateGiftCardSettingsOpts?.status} />
/> </>
</> )}
)} </Form>
</Form> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}; };

16
src/giftCards/GiftCardUpdate/GiftCardUpdatePage.tsx
View file

@ -1,7 +1,5 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata"; import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import useNavigator from "@dashboard/hooks/useNavigator"; import useNavigator from "@dashboard/hooks/useNavigator";
@ -31,17 +29,17 @@ const GiftCardUpdatePage: React.FC = () => {
} = useGiftCardUpdate(); } = useGiftCardUpdate();
return ( return (
<DetailedContent> <DetailPageLayout>
<GiftCardUpdatePageHeader /> <GiftCardUpdatePageHeader />
<Content> <DetailPageLayout.Content>
<GiftCardUpdateDetailsCard /> <GiftCardUpdateDetailsCard />
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
<GiftCardHistory /> <GiftCardHistory />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<GiftCardUpdateInfoCard /> <GiftCardUpdateInfoCard />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
state={status} state={status}
@ -50,7 +48,7 @@ const GiftCardUpdatePage: React.FC = () => {
onSubmit={submit} onSubmit={submit}
onDelete={openDeleteDialog} onDelete={openDeleteDialog}
/> />
</DetailedContent> </DetailPageLayout>
); );
}; };

16
src/home/components/HomePage/HomePage.tsx
View file

@ -1,8 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Money from "@dashboard/components/Money"; import Money from "@dashboard/components/Money";
import RequirePermissions from "@dashboard/components/RequirePermissions"; import RequirePermissions from "@dashboard/components/RequirePermissions";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
@ -78,9 +76,9 @@ const HomePage: React.FC<HomePageProps> = props => {
const classes = useStyles(props); const classes = useStyles(props);
return ( return (
<DetailedContent> <DetailPageLayout withSavebar={false}>
<TopNav title={<HomeHeader userName={userName} />} /> <TopNav title={<HomeHeader userName={userName} />} />
<Content noSavebar> <DetailPageLayout.Content>
<Box paddingLeft={9} paddingRight={11}> <Box paddingLeft={9} paddingRight={11}>
<CardSpacer /> <CardSpacer />
<RequirePermissions <RequirePermissions
@ -153,17 +151,17 @@ const HomePage: React.FC<HomePageProps> = props => {
</RequirePermissions> </RequirePermissions>
)} )}
</Box> </Box>
</Content> </DetailPageLayout.Content>
{activities && ( {activities && (
<RightSidebar noSavebar> <DetailPageLayout.RightSidebar>
<RequirePermissions <RequirePermissions
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]} requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
> >
<HomeActivityCard activities={activities} testId="activity-card" /> <HomeActivityCard activities={activities} testId="activity-card" />
</RequirePermissions> </RequirePermissions>
</RightSidebar> </DetailPageLayout.RightSidebar>
)} )}
</DetailedContent> </DetailPageLayout>
); );
}; };
HomePage.displayName = "HomePage"; HomePage.displayName = "HomePage";

11
src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { Backlink } from "@dashboard/components/Backlink"; import { Backlink } from "@dashboard/components/Backlink";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { MenuDetailsFragment, MenuErrorFragment } from "@dashboard/graphql"; import { MenuDetailsFragment, MenuErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm"; import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -86,8 +85,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
return ( return (
<Form confirmLeave initial={initialForm} onSubmit={handleSubmit}> <Form confirmLeave initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, submit }) => ( {({ change, data, submit }) => (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<Content noTopNav> <DetailPageLayout.Content>
<Box padding={9} margin="auto" height="100vh"> <Box padding={9} margin="auto" height="100vh">
<Backlink href={menuListUrl()}> <Backlink href={menuListUrl()}>
{intl.formatMessage(sectionNames.navigation)} {intl.formatMessage(sectionNames.navigation)}
@ -145,8 +144,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
state={saveButtonState} state={saveButtonState}
/> />
</Box> </Box>
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
)} )}
</Form> </Form>
); );

14
src/navigation/components/MenuListPage/MenuListPage.tsx
View file

@ -1,15 +1,11 @@
import {
borderHeight,
topBarHeight,
} from "@dashboard/components/AppLayout/consts";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
import { MenuFragment } from "@dashboard/graphql"; import { MenuFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl"; import { sectionNames } from "@dashboard/intl";
import { menuListUrl, MenuListUrlSortField } from "@dashboard/navigation/urls"; import { menuListUrl, MenuListUrlSortField } from "@dashboard/navigation/urls";
import { ListActions, PageListProps, SortPage } from "@dashboard/types"; import { ListActions, PageListProps, SortPage } from "@dashboard/types";
import { Box } from "@saleor/macaw-ui/next";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
@ -30,7 +26,7 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
}); });
return ( return (
<> <ListPageLayout>
<TopNav <TopNav
href={configurationMenuUrl} href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.navigation)} title={intl.formatMessage(sectionNames.navigation)}
@ -43,10 +39,8 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
/> />
</Button> </Button>
</TopNav> </TopNav>
<Box __height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}> <MenuList {...listProps} />
<MenuList {...listProps} /> </ListPageLayout>
</Box>
</>
); );
}; };
MenuListPage.displayName = "MenuListPage"; MenuListPage.displayName = "MenuListPage";

16
src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
View file

@ -3,13 +3,11 @@ import {
mapToMenuItemsForOrderDetails, mapToMenuItemsForOrderDetails,
useExtensions, useExtensions,
} from "@dashboard/apps/useExtensions"; } from "@dashboard/apps/useExtensions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardMenu from "@dashboard/components/CardMenu"; import CardMenu from "@dashboard/components/CardMenu";
import { CardSpacer } from "@dashboard/components/CardSpacer"; import { CardSpacer } from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata"; import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
@ -205,7 +203,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change); const changeMetadata = makeMetadataChangeHandler(change);
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={orderListUrl()} title={<Title order={order} />}> <TopNav href={orderListUrl()} title={<Title order={order} />}>
<CardMenu <CardMenu
menuItems={[ menuItems={[
@ -220,7 +218,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
/> />
</TopNav> </TopNav>
<Content data-test-id="order-fulfillment"> <DetailPageLayout.Content data-test-id="order-fulfillment">
{!isOrderUnconfirmed ? ( {!isOrderUnconfirmed ? (
<OrderUnfulfilledProductsCard <OrderUnfulfilledProductsCard
showFulfillmentAction={canFulfill} showFulfillmentAction={canFulfill}
@ -274,8 +272,8 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
orderCurrency={order?.total?.gross.currency} orderCurrency={order?.total?.gross.currency}
onNoteAdd={onNoteAdd} onNoteAdd={onNoteAdd}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<OrderCustomer <OrderCustomer
canEditAddresses={canEditAddresses} canEditAddresses={canEditAddresses}
canEditCustomer={false} canEditCustomer={false}
@ -300,7 +298,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
</> </>
)} )}
<OrderCustomerNote note={maybe(() => order.customerNote)} /> <OrderCustomerNote note={maybe(() => order.customerNote)} />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
labels={saveLabel} labels={saveLabel}
onCancel={() => navigate(orderListUrl())} onCancel={() => navigate(orderListUrl())}
@ -308,7 +306,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
state={saveButtonBarState} state={saveButtonBarState}
disabled={allowSave()} disabled={allowSave()}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

16
src/orders/components/OrderDraftPage/OrderDraftPage.tsx
View file

@ -1,10 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardMenu from "@dashboard/components/CardMenu"; import CardMenu from "@dashboard/components/CardMenu";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import { DateTime } from "@dashboard/components/Date"; import { DateTime } from "@dashboard/components/Date";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
import { import {
@ -82,7 +80,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={orderDraftListUrl()} href={orderDraftListUrl()}
title={ title={
@ -113,7 +111,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
]} ]}
/> />
</TopNav> </TopNav>
<Content> <DetailPageLayout.Content>
<OrderDraftAlert <OrderDraftAlert
order={order} order={order}
channelUsabilityData={channelUsabilityData} channelUsabilityData={channelUsabilityData}
@ -132,8 +130,8 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
orderCurrency={order?.total?.gross.currency} orderCurrency={order?.total?.gross.currency}
onNoteAdd={onNoteAdd} onNoteAdd={onNoteAdd}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<OrderChannelSectionCard channel={order?.channel} /> <OrderChannelSectionCard channel={order?.channel} />
<CardSpacer /> <CardSpacer />
<OrderCustomer <OrderCustomer
@ -151,7 +149,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
onProfileView={onProfileView} onProfileView={onProfileView}
onShippingAddressEdit={onShippingAddressEdit} onShippingAddressEdit={onShippingAddressEdit}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
state={saveButtonBarState} state={saveButtonBarState}
disabled={disabled} disabled={disabled}
@ -165,7 +163,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
}), }),
}} }}
/> />
</DetailedContent> </DetailPageLayout>
); );
}; };
OrderDraftPage.displayName = "OrderDraftPage"; OrderDraftPage.displayName = "OrderDraftPage";

280
src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
View file

@ -3,6 +3,7 @@ import CardSpacer from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import ControlledCheckbox from "@dashboard/components/ControlledCheckbox"; import ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import ResponsiveTable from "@dashboard/components/ResponsiveTable"; import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
@ -99,9 +100,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
>( >(
(getToFulfillOrderLines(order?.lines) as OrderFulfillLineFragment[]).map( (getToFulfillOrderLines(order?.lines) as OrderFulfillLineFragment[]).map(
line => { line => {
const highestQuantityAllocation = getLineAllocationWithHighestQuantity( const highestQuantityAllocation =
line, getLineAllocationWithHighestQuantity(line);
);
return { return {
data: null, data: null,
@ -120,10 +120,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
), ),
); );
const [ const [displayStockExceededDialog, setDisplayStockExceededDialog] =
displayStockExceededDialog, React.useState(false);
setDisplayStockExceededDialog,
] = React.useState(false);
const handleSubmit = ({ const handleSubmit = ({
formData, formData,
@ -192,149 +190,153 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
}; };
return ( return (
<> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={orderUrl(order?.id)} href={orderUrl(order?.id)}
title={intl.formatMessage(messages.headerOrderNumberAddFulfillment, { title={intl.formatMessage(messages.headerOrderNumberAddFulfillment, {
orderNumber: order?.number, orderNumber: order?.number,
})} })}
></TopNav> />
<Form <DetailPageLayout.Content>
confirmLeave <Form
initial={initialFormData} confirmLeave
onSubmit={formData => initial={initialFormData}
handleSubmit({ onSubmit={formData =>
formData, handleSubmit({
allowStockToBeExceeded: displayStockExceededDialog, formData,
}) allowStockToBeExceeded: displayStockExceededDialog,
} })
> }
{({ change, data, submit }) => ( >
<> {({ change, data, submit }) => (
<Card> <>
<CardTitle
title={intl.formatMessage(messages.itemsReadyToShip)}
/>
{order ? (
<ResponsiveTable className={classes.table}>
<TableHead>
<TableRowLink>
<TableCell className={classes.colName}>
<FormattedMessage {...messages.productName} />
</TableCell>
<TableCell className={classes.colSku}>
<FormattedMessage {...messages.sku} />
</TableCell>
<TableCell
className={clsx(
classes.colQuantity,
classes.colQuantityHeader,
)}
>
<FormattedMessage {...messages.quantity} />
</TableCell>
<TableCell className={classes.colStock}>
<FormattedMessage {...messages.stock} />
</TableCell>
<TableCell className={classes.colWarehouse}>
<FormattedMessage {...messages.warehouse} />
</TableCell>
</TableRowLink>
</TableHead>
<TableBody>
{renderCollection(
getToFulfillOrderLines(order.lines),
(line: OrderFulfillLineFragment, lineIndex) => (
<OrderFulfillLine
key={line.id}
line={line}
lineIndex={lineIndex}
formsetData={formsetData}
formsetChange={formsetChange}
onWarehouseChange={() =>
openModal("change-warehouse", {
lineId: line.id,
warehouseId:
formsetData[lineIndex]?.value?.[0]?.warehouse
?.id,
})
}
/>
),
)}
</TableBody>
</ResponsiveTable>
) : (
<CardContent>
<Skeleton />
</CardContent>
)}
</Card>
<CardSpacer />
{shopSettings?.fulfillmentAutoApprove && (
<Card> <Card>
<CardTitle <CardTitle
title={intl.formatMessage(messages.shipmentInformation)} title={intl.formatMessage(messages.itemsReadyToShip)}
/> />
<CardContent> {order ? (
<ControlledCheckbox <ResponsiveTable className={classes.table}>
checked={data.sendInfo} <TableHead>
label={intl.formatMessage(messages.sentShipmentDetails)} <TableRowLink>
name="sendInfo" <TableCell className={classes.colName}>
onChange={change} <FormattedMessage {...messages.productName} />
/> </TableCell>
</CardContent> <TableCell className={classes.colSku}>
<FormattedMessage {...messages.sku} />
</TableCell>
<TableCell
className={clsx(
classes.colQuantity,
classes.colQuantityHeader,
)}
>
<FormattedMessage {...messages.quantity} />
</TableCell>
<TableCell className={classes.colStock}>
<FormattedMessage {...messages.stock} />
</TableCell>
<TableCell className={classes.colWarehouse}>
<FormattedMessage {...messages.warehouse} />
</TableCell>
</TableRowLink>
</TableHead>
<TableBody>
{renderCollection(
getToFulfillOrderLines(order.lines),
(line: OrderFulfillLineFragment, lineIndex) => (
<OrderFulfillLine
key={line.id}
line={line}
lineIndex={lineIndex}
formsetData={formsetData}
formsetChange={formsetChange}
onWarehouseChange={() =>
openModal("change-warehouse", {
lineId: line.id,
warehouseId:
formsetData[lineIndex]?.value?.[0]?.warehouse
?.id,
})
}
/>
),
)}
</TableBody>
</ResponsiveTable>
) : (
<CardContent>
<Skeleton />
</CardContent>
)}
</Card> </Card>
)}
<Savebar <CardSpacer />
disabled={!shouldEnableSave()}
labels={{
confirm: shopSettings?.fulfillmentAutoApprove
? intl.formatMessage(messages.submitFulfillment)
: intl.formatMessage(messages.submitPrepareFulfillment),
}}
state={saveButtonBar}
tooltips={{
confirm:
notAllowedToFulfillUnpaid &&
intl.formatMessage(commonMessages.cannotFullfillUnpaidOrder),
}}
onSubmit={submit}
onCancel={() => navigate(orderUrl(order?.id))}
/>
<OrderFulfillStockExceededDialog
open={displayStockExceededDialog}
lines={order?.lines}
formsetData={formsetData}
confirmButtonState={saveButtonBar}
onSubmit={submit}
onClose={() => setDisplayStockExceededDialog(false)}
/>
</>
)}
</Form>
<OrderChangeWarehouseDialog
open={params.action === "change-warehouse"}
line={order?.lines.find(line => line.id === params.lineId)}
currentWarehouseId={params.warehouseId}
onConfirm={warehouse => {
const lineFormQuantity = formsetData.find(
item => item.id === params.lineId,
)?.value?.[0]?.quantity;
formsetChange(params.lineId, [ {shopSettings?.fulfillmentAutoApprove && (
{ <Card>
quantity: lineFormQuantity, <CardTitle
warehouse, title={intl.formatMessage(messages.shipmentInformation)}
}, />
]); <CardContent>
}} <ControlledCheckbox
onClose={closeModal} checked={data.sendInfo}
/> label={intl.formatMessage(messages.sentShipmentDetails)}
</> name="sendInfo"
onChange={change}
/>
</CardContent>
</Card>
)}
<Savebar
disabled={!shouldEnableSave()}
labels={{
confirm: shopSettings?.fulfillmentAutoApprove
? intl.formatMessage(messages.submitFulfillment)
: intl.formatMessage(messages.submitPrepareFulfillment),
}}
state={saveButtonBar}
tooltips={{
confirm:
notAllowedToFulfillUnpaid &&
intl.formatMessage(
commonMessages.cannotFullfillUnpaidOrder,
),
}}
onSubmit={submit}
onCancel={() => navigate(orderUrl(order?.id))}
/>
<OrderFulfillStockExceededDialog
open={displayStockExceededDialog}
lines={order?.lines}
formsetData={formsetData}
confirmButtonState={saveButtonBar}
onSubmit={submit}
onClose={() => setDisplayStockExceededDialog(false)}
/>
</>
)}
</Form>
<OrderChangeWarehouseDialog
open={params.action === "change-warehouse"}
line={order?.lines.find(line => line.id === params.lineId)}
currentWarehouseId={params.warehouseId}
onConfirm={warehouse => {
const lineFormQuantity = formsetData.find(
item => item.id === params.lineId,
)?.value?.[0]?.quantity;
formsetChange(params.lineId, [
{
quantity: lineFormQuantity,
warehouse,
},
]);
}}
onClose={closeModal}
/>
</DetailPageLayout.Content>
</DetailPageLayout>
); );
}; };

5
src/orders/components/OrderListPage/OrderListPage.tsx
View file

@ -8,6 +8,7 @@ import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { ButtonWithSelect } from "@dashboard/components/ButtonWithSelect"; import { ButtonWithSelect } from "@dashboard/components/ButtonWithSelect";
import CardMenu from "@dashboard/components/CardMenu"; import CardMenu from "@dashboard/components/CardMenu";
import FilterBar from "@dashboard/components/FilterBar"; import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { OrderListQuery, RefreshLimitsQuery } from "@dashboard/graphql"; import { OrderListQuery, RefreshLimitsQuery } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl"; import { sectionNames } from "@dashboard/intl";
import { OrderListUrlSortField } from "@dashboard/orders/urls"; import { OrderListUrlSortField } from "@dashboard/orders/urls";
@ -78,7 +79,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
const extensionCreateButtonItems = mapToMenuItems(ORDER_OVERVIEW_CREATE); const extensionCreateButtonItems = mapToMenuItems(ORDER_OVERVIEW_CREATE);
return ( return (
<> <ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.orders)}> <TopNav title={intl.formatMessage(sectionNames.orders)}>
{!!onSettingsOpen && ( {!!onSettingsOpen && (
<CardMenu <CardMenu
@ -149,7 +150,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
/> />
<OrderList {...listProps} /> <OrderList {...listProps} />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
OrderListPage.displayName = "OrderListPage"; OrderListPage.displayName = "OrderListPage";

18
src/orders/components/OrderRefundPage/OrderRefundPage.tsx
View file

@ -1,8 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { import {
FulfillmentStatus, FulfillmentStatus,
OrderErrorFragment, OrderErrorFragment,
@ -72,7 +70,7 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
const isProductRefund = data.type === OrderRefundType.PRODUCTS; const isProductRefund = data.type === OrderRefundType.PRODUCTS;
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={orderUrl(order?.id)} href={orderUrl(order?.id)}
title={intl.formatMessage( title={intl.formatMessage(
@ -85,8 +83,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
orderNumber: order?.number, orderNumber: order?.number,
}, },
)} )}
></TopNav> />
<Content> <DetailPageLayout.Content>
<OrderRefund data={data} disabled={disabled} onChange={change} /> <OrderRefund data={data} disabled={disabled} onChange={change} />
{isProductRefund && ( {isProductRefund && (
<> <>
@ -127,8 +125,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
))} ))}
</> </>
)} )}
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<OrderRefundAmount <OrderRefundAmount
amountData={ amountData={
isProductRefund isProductRefund
@ -142,8 +140,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
onChange={change} onChange={change}
onRefund={submit} onRefund={submit}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
</DetailedContent> </DetailPageLayout>
); );
}} }}
</OrderRefundForm> </OrderRefundForm>

16
src/orders/components/OrderReturnPage/OrderReturnPage.tsx
View file

@ -1,8 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql"; import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm"; import { SubmitPromise } from "@dashboard/hooks/useForm";
import { renderCollection } from "@dashboard/misc"; import { renderCollection } from "@dashboard/misc";
@ -48,14 +46,14 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
return ( return (
<OrderRefundForm order={order} onSubmit={onSubmit}> <OrderRefundForm order={order} onSubmit={onSubmit}>
{({ data, handlers, change, submit, isSaveDisabled }) => ( {({ data, handlers, change, submit, isSaveDisabled }) => (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={orderUrl(order?.id)} href={orderUrl(order?.id)}
title={intl.formatMessage(messages.pageTitle, { title={intl.formatMessage(messages.pageTitle, {
orderNumber: order?.number, orderNumber: order?.number,
})} })}
/> />
<Content> <DetailPageLayout.Content>
{!!data.unfulfilledItemsQuantities.length && ( {!!data.unfulfilledItemsQuantities.length && (
<> <>
<ItemsCard <ItemsCard
@ -115,8 +113,8 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
</React.Fragment> </React.Fragment>
), ),
)} )}
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<OrderAmount <OrderAmount
allowNoRefund allowNoRefund
isReturn isReturn
@ -129,8 +127,8 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
onChange={change} onChange={change}
onRefund={submit} onRefund={submit}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
</DetailedContent> </DetailPageLayout>
)} )}
</OrderRefundForm> </OrderRefundForm>
); );

11
src/orders/components/OrderSettingsPage/OrderSettingsPage.tsx
View file

@ -1,7 +1,6 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
OrderSettingsFragment, OrderSettingsFragment,
@ -42,7 +41,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
disabled={disabled} disabled={disabled}
> >
{({ data, submit, change, isSaveDisabled }) => ( {({ data, submit, change, isSaveDisabled }) => (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={orderListUrl()} href={orderListUrl()}
title={intl.formatMessage({ title={intl.formatMessage({
@ -51,7 +50,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
description: "header", description: "header",
})} })}
/> />
<Content> <DetailPageLayout.Content>
<Box padding={9} margin="auto" height="100vh"> <Box padding={9} margin="auto" height="100vh">
<Grid variant="inverted"> <Grid variant="inverted">
<div> <div>
@ -75,14 +74,14 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
/> />
</Grid> </Grid>
</Box> </Box>
</Content> </DetailPageLayout.Content>
<Savebar <Savebar
onCancel={() => navigate(orderListUrl())} onCancel={() => navigate(orderListUrl())}
onSubmit={submit} onSubmit={submit}
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
)} )}
</OrderSettingsForm> </OrderSettingsForm>
); );

11
src/pageTypes/components/PageTypeCreatePage/PageTypeCreatePage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import Hr from "@dashboard/components/Hr"; import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata"; import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { PageErrorFragment } from "@dashboard/graphql"; import { PageErrorFragment } from "@dashboard/graphql";
@ -68,7 +67,7 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change); const changeMetadata = makeMetadataChangeHandler(change);
return ( return (
<DetailedContent> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={pageTypeListUrl()} href={pageTypeListUrl()}
title={intl.formatMessage({ title={intl.formatMessage({
@ -77,7 +76,7 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
description: "header", description: "header",
})} })}
/> />
<Content> <DetailPageLayout.Content>
<Grid <Grid
variant="inverted" variant="inverted"
className={sprinkles({ className={sprinkles({
@ -115,14 +114,14 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
</div> </div>
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Grid> </Grid>
</Content> </DetailPageLayout.Content>
<Savebar <Savebar
onCancel={() => navigate(pageTypeListUrl())} onCancel={() => navigate(pageTypeListUrl())}
onSubmit={submit} onSubmit={submit}
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

11
src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import Hr from "@dashboard/components/Hr"; import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types"; import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
@ -118,9 +117,9 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change); const changeMetadata = makeMetadataChangeHandler(change);
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav href={pageTypeListUrl()} title={pageTitle} /> <TopNav href={pageTypeListUrl()} title={pageTitle} />
<Content> <DetailPageLayout.Content>
<Grid <Grid
variant="inverted" variant="inverted"
className={sprinkles({ className={sprinkles({
@ -185,7 +184,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
</div> </div>
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Grid> </Grid>
</Content> </DetailPageLayout.Content>
<Savebar <Savebar
onCancel={() => navigate(pageTypeListUrl())} onCancel={() => navigate(pageTypeListUrl())}
onDelete={onDelete} onDelete={onDelete}
@ -193,7 +192,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

5
src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx
View file

@ -1,5 +1,6 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import SearchBar from "@dashboard/components/SearchBar"; import SearchBar from "@dashboard/components/SearchBar";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
import { PageTypeFragment } from "@dashboard/graphql"; import { PageTypeFragment } from "@dashboard/graphql";
@ -43,7 +44,7 @@ const PageTypeListPage: React.FC<PageTypeListPageProps> = ({
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
return ( return (
<> <ListPageLayout>
<TopNav <TopNav
href={configurationMenuUrl} href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.pageTypes)} title={intl.formatMessage(sectionNames.pageTypes)}
@ -82,7 +83,7 @@ const PageTypeListPage: React.FC<PageTypeListPageProps> = ({
/> />
<PageTypeList {...listProps} /> <PageTypeList {...listProps} />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
PageTypeListPage.displayName = "PageTypeListPage"; PageTypeListPage.displayName = "PageTypeListPage";

16
src/pages/components/PageDetailsPage/PageDetailsPage.tsx
View file

@ -2,13 +2,11 @@ import {
getReferenceAttributeEntityTypeFromAttribute, getReferenceAttributeEntityTypeFromAttribute,
mergeAttributeValues, mergeAttributeValues,
} from "@dashboard/attributes/utils/data"; } from "@dashboard/attributes/utils/data";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog"; import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { AttributeInput } from "@dashboard/components/Attributes"; import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata"; import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm"; import SeoForm from "@dashboard/components/SeoForm";
@ -150,14 +148,14 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
const errors = [...apiErrors, ...validationErrors]; const errors = [...apiErrors, ...validationErrors];
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={pageListUrl()} href={pageListUrl()}
title={ title={
!pageExists ? intl.formatMessage(messages.title) : page?.title !pageExists ? intl.formatMessage(messages.title) : page?.title
} }
/> />
<Content> <DetailPageLayout.Content>
<PageInfo <PageInfo
data={data} data={data}
disabled={loading} disabled={loading}
@ -200,8 +198,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
)} )}
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} /> <Metadata data={data} onChange={handlers.changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<VisibilityCard <VisibilityCard
data={data} data={data}
errors={errors} errors={errors}
@ -231,7 +229,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
fetchMorePageTypes={fetchMorePageTypes} fetchMorePageTypes={fetchMorePageTypes}
canChangeType={!page?.pageType} canChangeType={!page?.pageType}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={loading} disabled={loading}
state={saveButtonBarState} state={saveButtonBarState}
@ -263,7 +261,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
} }
/> />
)} )}
</DetailedContent> </DetailPageLayout>
); );
}} }}
</PageForm> </PageForm>

32
src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx
View file

@ -1,9 +1,8 @@
import AccountPermissions from "@dashboard/components/AccountPermissions"; import AccountPermissions from "@dashboard/components/AccountPermissions";
import { Content } from "@dashboard/components/AppLayout/Content"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { Backlink } from "@dashboard/components/Backlink"; import { Backlink } from "@dashboard/components/Backlink";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
PermissionEnum, PermissionEnum,
@ -68,8 +67,9 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
disabled={disabled} disabled={disabled}
> >
{({ data, change, submit, isSaveDisabled }) => ( {({ data, change, submit, isSaveDisabled }) => (
<DetailedContent> <DetailPageLayout>
<Content> <TopNav title="New Permission Group" />
<DetailPageLayout.Content>
<Backlink href={permissionGroupListUrl()}> <Backlink href={permissionGroupListUrl()}>
{intl.formatMessage(sectionNames.permissionGroups)} {intl.formatMessage(sectionNames.permissionGroups)}
</Backlink> </Backlink>
@ -79,8 +79,8 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
onChange={change} onChange={change}
disabled={disabled} disabled={disabled}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<AccountPermissions <AccountPermissions
permissionsExceeded={false} permissionsExceeded={false}
data={data} data={data}
@ -100,16 +100,14 @@ const PermissionGroupCreatePage: React.FC<PermissionGroupCreatePageProps> = ({
description: "card description", description: "card description",
})} })}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<div> <Savebar
<Savebar onCancel={() => navigate(permissionGroupListUrl())}
onCancel={() => navigate(permissionGroupListUrl())} onSubmit={submit}
onSubmit={submit} state={saveButtonBarState}
state={saveButtonBarState} disabled={isSaveDisabled}
disabled={isSaveDisabled} />
/> </DetailPageLayout>
</div>
</DetailedContent>
)} )}
</Form> </Form>
); );

16
src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx
View file

@ -1,10 +1,8 @@
import AccountPermissions from "@dashboard/components/AccountPermissions"; import AccountPermissions from "@dashboard/components/AccountPermissions";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import FormSpacer from "@dashboard/components/FormSpacer"; import FormSpacer from "@dashboard/components/FormSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
PermissionEnum, PermissionEnum,
@ -92,12 +90,12 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
return ( return (
<Form confirmLeave initial={initialForm} onSubmit={onSubmit}> <Form confirmLeave initial={initialForm} onSubmit={onSubmit}>
{({ data, change, submit }) => ( {({ data, change, submit }) => (
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={permissionGroupListUrl()} href={permissionGroupListUrl()}
title={permissionGroup?.name} title={permissionGroup?.name}
/> />
<Content> <DetailPageLayout.Content>
<PermissionGroupInfo <PermissionGroupInfo
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -110,8 +108,8 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
{...listProps} {...listProps}
users={data?.users || []} users={data?.users || []}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<AccountPermissions <AccountPermissions
permissionsExceeded={permissionsExceeded} permissionsExceeded={permissionsExceeded}
data={data} data={data}
@ -131,7 +129,7 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
description: "card description", description: "card description",
})} })}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<div> <div>
<Savebar <Savebar
onCancel={() => navigate(permissionGroupListUrl())} onCancel={() => navigate(permissionGroupListUrl())}
@ -140,7 +138,7 @@ const PermissionGroupDetailsPage: React.FC<PermissionGroupDetailsPageProps> = ({
disabled={disabled} disabled={disabled}
/> />
</div> </div>
</DetailedContent> </DetailPageLayout>
)} )}
</Form> </Form>
); );

9
src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx
View file

@ -1,5 +1,6 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
import { PermissionGroupFragment } from "@dashboard/graphql"; import { PermissionGroupFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl"; import { sectionNames } from "@dashboard/intl";
@ -21,11 +22,13 @@ export interface PermissionGroupListPageProps
onDelete: (id: string) => void; onDelete: (id: string) => void;
} }
const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProps => { const PermissionGroupListPage: React.FC<
PermissionGroupListPageProps
> = listProps => {
const intl = useIntl(); const intl = useIntl();
return ( return (
<> <ListPageLayout>
<TopNav <TopNav
href={configurationMenuUrl} href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.permissionGroups)} title={intl.formatMessage(sectionNames.permissionGroups)}
@ -45,7 +48,7 @@ const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProp
<Card> <Card>
<PermissionGroupList {...listProps} /> <PermissionGroupList {...listProps} />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
PermissionGroupListPage.displayName = "PermissionGroupListPage"; PermissionGroupListPage.displayName = "PermissionGroupListPage";

11
src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
ConfigurationItemInput, ConfigurationItemInput,
@ -97,7 +96,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
set(newData); set(newData);
}; };
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={pluginListUrl()} href={pluginListUrl()}
title={intl.formatMessage( title={intl.formatMessage(
@ -111,7 +110,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
}, },
)} )}
/> />
<Content> <DetailPageLayout.Content>
<Grid variant="inverted"> <Grid variant="inverted">
<div> <div>
<PluginDetailsChannelsCard <PluginDetailsChannelsCard
@ -163,8 +162,8 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
onCancel={() => navigate(pluginListUrl())} onCancel={() => navigate(pluginListUrl())}
onSubmit={submit} onSubmit={submit}
/> />
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

5
src/plugins/components/PluginsListPage/PluginsListPage.tsx
View file

@ -1,5 +1,6 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import FilterBar from "@dashboard/components/FilterBar"; import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
import { PluginBaseFragment } from "@dashboard/graphql"; import { PluginBaseFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl"; import { sectionNames } from "@dashboard/intl";
@ -48,7 +49,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
const filterStructure = createFilterStructure(intl, filterOpts); const filterStructure = createFilterStructure(intl, filterOpts);
return ( return (
<> <ListPageLayout>
<TopNav <TopNav
href={configurationMenuUrl} href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.plugins)} title={intl.formatMessage(sectionNames.plugins)}
@ -78,7 +79,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
/> />
<PluginsList {...listProps} /> <PluginsList {...listProps} />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
PluginsListPage.displayName = "PluginsListPage"; PluginsListPage.displayName = "PluginsListPage";

21
src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
View file

@ -1,9 +1,7 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata"; import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
@ -74,9 +72,8 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
const navigate = useNavigator(); const navigate = useNavigator();
const [taxClassDisplayName, setTaxClassDisplayName] = useStateFromProps(""); const [taxClassDisplayName, setTaxClassDisplayName] = useStateFromProps("");
const { const { makeChangeHandler: makeMetadataChangeHandler } =
makeChangeHandler: makeMetadataChangeHandler, useMetadataChangeTrigger();
} = useMetadataChangeTrigger();
const initialData = { const initialData = {
...formInitialData, ...formInitialData,
@ -99,9 +96,9 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
); );
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={productTypeListUrl()} title={pageTitle} /> <TopNav href={productTypeListUrl()} title={pageTitle} />
<Content> <DetailPageLayout.Content>
<ProductTypeDetails <ProductTypeDetails
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -127,22 +124,22 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
/> />
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<ProductTypeShipping <ProductTypeShipping
disabled={disabled} disabled={disabled}
data={data} data={data}
weightUnit={defaultWeightUnit} weightUnit={defaultWeightUnit}
onChange={change} onChange={change}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
onCancel={() => navigate(productTypeListUrl())} onCancel={() => navigate(productTypeListUrl())}
onSubmit={submit} onSubmit={submit}
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

16
src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
View file

@ -1,10 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ControlledSwitch from "@dashboard/components/ControlledSwitch"; import ControlledSwitch from "@dashboard/components/ControlledSwitch";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types"; import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
@ -164,9 +162,9 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change); const changeMetadata = makeMetadataChangeHandler(change);
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={productTypeListUrl()} title={pageTitle} /> <TopNav href={productTypeListUrl()} title={pageTitle} />
<Content> <DetailPageLayout.Content>
<ProductTypeDetails <ProductTypeDetails
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -239,15 +237,15 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
)} )}
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<ProductTypeShipping <ProductTypeShipping
disabled={disabled} disabled={disabled}
data={data} data={data}
weightUnit={productType?.weight?.unit || defaultWeightUnit} weightUnit={productType?.weight?.unit || defaultWeightUnit}
onChange={change} onChange={change}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
onCancel={() => navigate(productTypeListUrl())} onCancel={() => navigate(productTypeListUrl())}
onDelete={onDelete} onDelete={onDelete}
@ -255,7 +253,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

16
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -4,14 +4,12 @@ import {
} from "@dashboard/attributes/utils/data"; } from "@dashboard/attributes/utils/data";
import CannotDefineChannelsAvailabilityCard from "@dashboard/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard"; import CannotDefineChannelsAvailabilityCard from "@dashboard/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard";
import { ChannelData } from "@dashboard/channels/utils"; import { ChannelData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog"; import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { AttributeInput } from "@dashboard/components/Attributes"; import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata"; import Metadata from "@dashboard/components/Metadata";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField"; import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
@ -236,9 +234,9 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
); );
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={productListUrl()} title={header} /> <TopNav href={productListUrl()} title={header} />
<Content> <DetailPageLayout.Content>
<ProductDetailsForm <ProductDetailsForm
data={data} data={data}
disabled={loading} disabled={loading}
@ -319,8 +317,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
/> />
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} /> <Metadata data={data} onChange={handlers.changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<ProductOrganization <ProductOrganization
canChangeType={true} canChangeType={true}
categories={categories} categories={categories}
@ -379,7 +377,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
taxClasses={taxClasses} taxClasses={taxClasses}
onFetchMore={fetchMoreTaxClasses} onFetchMore={fetchMoreTaxClasses}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
onCancel={() => navigate(productListUrl())} onCancel={() => navigate(productListUrl())}
onSubmit={submit} onSubmit={submit}
@ -407,7 +405,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
} }
/> />
)} )}
</DetailedContent> </DetailPageLayout>
); );
}} }}
</ProductCreateForm> </ProductCreateForm>

11
src/products/components/ProductListPage/ProductListPage.tsx
View file

@ -11,6 +11,7 @@ import CardMenu from "@dashboard/components/CardMenu";
import ColumnPicker from "@dashboard/components/ColumnPicker"; import ColumnPicker from "@dashboard/components/ColumnPicker";
import { getByName } from "@dashboard/components/Filter/utils"; import { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar"; import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert"; import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField"; import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import { ProductListColumns } from "@dashboard/config"; import { ProductListColumns } from "@dashboard/config";
@ -171,10 +172,8 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
]; ];
const limitReached = isLimitReached(limits, "productVariants"); const limitReached = isLimitReached(limits, "productVariants");
const { const { PRODUCT_OVERVIEW_CREATE, PRODUCT_OVERVIEW_MORE_ACTIONS } =
PRODUCT_OVERVIEW_CREATE, useExtensions(extensionMountPoints.PRODUCT_LIST);
PRODUCT_OVERVIEW_MORE_ACTIONS,
} = useExtensions(extensionMountPoints.PRODUCT_LIST);
const extensionMenuItems = mapToMenuItemsForProductOverviewActions( const extensionMenuItems = mapToMenuItemsForProductOverviewActions(
PRODUCT_OVERVIEW_MORE_ACTIONS, PRODUCT_OVERVIEW_MORE_ACTIONS,
@ -183,7 +182,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
const extensionCreateButtonItems = mapToMenuItems(PRODUCT_OVERVIEW_CREATE); const extensionCreateButtonItems = mapToMenuItems(PRODUCT_OVERVIEW_CREATE);
return ( return (
<> <ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.products)}> <TopNav title={intl.formatMessage(sectionNames.products)}>
<CardMenu <CardMenu
className={classes.settings} className={classes.settings}
@ -289,7 +288,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
filterDependency={filterDependency} filterDependency={filterDependency}
/> />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
ProductListPage.displayName = "ProductListPage"; ProductListPage.displayName = "ProductListPage";

322
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -8,15 +8,13 @@ import {
mergeAttributeValues, mergeAttributeValues,
} from "@dashboard/attributes/utils/data"; } from "@dashboard/attributes/utils/data";
import { ChannelData } from "@dashboard/channels/utils"; import { ChannelData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog"; import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { AttributeInput } from "@dashboard/components/Attributes"; import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
import CardMenu from "@dashboard/components/CardMenu"; import CardMenu from "@dashboard/components/CardMenu";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm"; import SeoForm from "@dashboard/components/SeoForm";
@ -325,173 +323,169 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
); );
return ( return (
<> <DetailPageLayout>
<DetailedContent> <TopNav href={productListUrl()} title={header}>
<TopNav href={productListUrl()} title={header}> <CardMenu
<CardMenu menuItems={[
menuItems={[ ...extensionMenuItems,
...extensionMenuItems, {
{ label: intl.formatMessage(messages.openGraphiQL),
label: intl.formatMessage(messages.openGraphiQL), onSelect: openPlaygroundURL,
onSelect: openPlaygroundURL, testId: "graphiql-redirect",
testId: "graphiql-redirect", },
}, ]}
]} data-test-id="menu"
data-test-id="menu"
/>
</TopNav>
<Content>
<ProductDetailsForm
data={data}
disabled={disabled}
errors={productErrors}
onChange={change}
/>
<CardSpacer />
<ProductMedia
media={media}
placeholderImage={placeholderImage}
onImageDelete={onImageDelete}
onImageReorder={onImageReorder}
onImageUpload={onImageUpload}
openMediaUrlModal={() => setMediaUrlModalStatus(true)}
getImageEditUrl={imageId =>
productImageUrl(productId, imageId)
}
/>
<CardSpacer />
{data.attributes.length > 0 && (
<Attributes
attributes={data.attributes}
attributeValues={attributeValues}
errors={productErrors}
loading={disabled}
disabled={disabled}
onChange={handlers.selectAttribute}
onMultiChange={handlers.selectAttributeMultiple}
onFileChange={handlers.selectAttributeFile}
onReferencesRemove={handlers.selectAttributeReference}
onReferencesAddClick={onAssignReferencesClick}
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
richTextGetters={attributeRichTextGetters}
/>
)}
<CardSpacer />
<ProductVariants
productName={product?.name}
errors={variantListErrors}
channels={listings}
limits={limits}
variants={variants}
variantAttributes={product?.productType.variantAttributes}
warehouses={warehouses}
onAttributeValuesSearch={onAttributeValuesSearch}
onChange={handlers.changeVariants}
onRowClick={onVariantShow}
/>
<CardSpacer />
<SeoForm
errors={productErrors}
title={data.seoTitle}
titlePlaceholder={data.name}
description={data.seoDescription}
descriptionPlaceholder={""} // TODO: cast description to string
slug={data.slug}
slugPlaceholder={data.name}
loading={disabled}
onClick={onSeoClick}
onChange={change}
helperText={intl.formatMessage({
id: "LKoIB1",
defaultMessage:
"Add search engine title and description to make this product easier to find",
})}
/>
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</Content>
<RightSidebar>
<ProductOrganization
canChangeType={false}
categories={categories}
categoryInputDisplayValue={selectedCategory}
collections={collections}
collectionsInputDisplayValue={selectedCollections}
data={data}
disabled={disabled}
errors={productOrganizationErrors}
fetchCategories={fetchCategories}
fetchCollections={fetchCollections}
fetchMoreCategories={fetchMoreCategories}
fetchMoreCollections={fetchMoreCollections}
productType={product?.productType}
onCategoryChange={handlers.selectCategory}
onCollectionChange={handlers.selectCollection}
/>
<CardSpacer />
<ChannelsAvailabilityCard
{...availabilityCommonProps}
channels={listings}
/>
<CardSpacer />
<ProductTaxes
value={data.taxClassId}
disabled={disabled}
onChange={handlers.selectTaxClass}
taxClassDisplayName={selectedTaxClass}
taxClasses={taxClasses}
onFetchMore={fetchMoreTaxClasses}
/>
</RightSidebar>
<Savebar
onCancel={() => navigate(productListUrl())}
onDelete={onDelete}
onSubmit={submit}
state={saveButtonBarState}
disabled={isSaveDisabled}
/> />
{canOpenAssignReferencesAttributeDialog && entityType && ( </TopNav>
<AssignAttributeValueDialog
entityType={entityType} <DetailPageLayout.Content>
confirmButtonState={"default"} <ProductDetailsForm
products={referenceProducts} data={data}
pages={referencePages} disabled={disabled}
hasMore={handlers.fetchMoreReferences?.hasMore} errors={productErrors}
open={canOpenAssignReferencesAttributeDialog} onChange={change}
onFetch={handlers.fetchReferences} />
onFetchMore={handlers.fetchMoreReferences?.onFetchMore} <CardSpacer />
loading={handlers.fetchMoreReferences?.loading} <ProductMedia
onClose={onCloseDialog} media={media}
onSubmit={attributeValues => placeholderImage={placeholderImage}
handleAssignReferenceAttribute( onImageDelete={onImageDelete}
attributeValues, onImageReorder={onImageReorder}
data, onImageUpload={onImageUpload}
handlers, openMediaUrlModal={() => setMediaUrlModalStatus(true)}
) getImageEditUrl={imageId => productImageUrl(productId, imageId)}
} />
<CardSpacer />
{data.attributes.length > 0 && (
<Attributes
attributes={data.attributes}
attributeValues={attributeValues}
errors={productErrors}
loading={disabled}
disabled={disabled}
onChange={handlers.selectAttribute}
onMultiChange={handlers.selectAttributeMultiple}
onFileChange={handlers.selectAttributeFile}
onReferencesRemove={handlers.selectAttributeReference}
onReferencesAddClick={onAssignReferencesClick}
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
richTextGetters={attributeRichTextGetters}
/> />
)} )}
<CardSpacer />
<ProductExternalMediaDialog <ProductVariants
product={product} productName={product?.name}
onClose={() => setMediaUrlModalStatus(false)} errors={variantListErrors}
open={mediaUrlModalStatus} channels={listings}
onSubmit={onMediaUrlUpload} limits={limits}
variants={variants}
variantAttributes={product?.productType.variantAttributes}
warehouses={warehouses}
onAttributeValuesSearch={onAttributeValuesSearch}
onChange={handlers.changeVariants}
onRowClick={onVariantShow}
/> />
<ProductChannelsListingsDialog <CardSpacer />
channels={channels} <SeoForm
errors={productErrors}
title={data.seoTitle}
titlePlaceholder={data.name}
description={data.seoDescription}
descriptionPlaceholder={""} // TODO: cast description to string
slug={data.slug}
slugPlaceholder={data.name}
loading={disabled}
onClick={onSeoClick}
onChange={change}
helperText={intl.formatMessage({
id: "LKoIB1",
defaultMessage:
"Add search engine title and description to make this product easier to find",
})}
/>
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductOrganization
canChangeType={false}
categories={categories}
categoryInputDisplayValue={selectedCategory}
collections={collections}
collectionsInputDisplayValue={selectedCollections}
data={data} data={data}
onClose={() => setChannelPickerOpen(false)} disabled={disabled}
open={channelPickerOpen} errors={productOrganizationErrors}
onConfirm={handlers.updateChannelList} fetchCategories={fetchCategories}
fetchCollections={fetchCollections}
fetchMoreCategories={fetchMoreCategories}
fetchMoreCollections={fetchMoreCollections}
productType={product?.productType}
onCategoryChange={handlers.selectCategory}
onCollectionChange={handlers.selectCollection}
/> />
</DetailedContent> <CardSpacer />
</> <ChannelsAvailabilityCard
{...availabilityCommonProps}
channels={listings}
/>
<CardSpacer />
<ProductTaxes
value={data.taxClassId}
disabled={disabled}
onChange={handlers.selectTaxClass}
taxClassDisplayName={selectedTaxClass}
taxClasses={taxClasses}
onFetchMore={fetchMoreTaxClasses}
/>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(productListUrl())}
onDelete={onDelete}
onSubmit={submit}
state={saveButtonBarState}
disabled={isSaveDisabled}
/>
{canOpenAssignReferencesAttributeDialog && entityType && (
<AssignAttributeValueDialog
entityType={entityType}
confirmButtonState={"default"}
products={referenceProducts}
pages={referencePages}
hasMore={handlers.fetchMoreReferences?.hasMore}
open={canOpenAssignReferencesAttributeDialog}
onFetch={handlers.fetchReferences}
onFetchMore={handlers.fetchMoreReferences?.onFetchMore}
loading={handlers.fetchMoreReferences?.loading}
onClose={onCloseDialog}
onSubmit={attributeValues =>
handleAssignReferenceAttribute(
attributeValues,
data,
handlers,
)
}
/>
)}
<ProductExternalMediaDialog
product={product}
onClose={() => setMediaUrlModalStatus(false)}
open={mediaUrlModalStatus}
onSubmit={onMediaUrlUpload}
/>
<ProductChannelsListingsDialog
channels={channels}
data={data}
onClose={() => setChannelPickerOpen(false)}
open={channelPickerOpen}
onConfirm={handlers.updateChannelList}
/>
</DetailPageLayout>
); );
}} }}
</ProductUpdateForm> </ProductUpdateForm>

11
src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
View file

@ -2,8 +2,6 @@ import {
getReferenceAttributeEntityTypeFromAttribute, getReferenceAttributeEntityTypeFromAttribute,
mergeAttributeValues, mergeAttributeValues,
} from "@dashboard/attributes/utils/data"; } from "@dashboard/attributes/utils/data";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog"; import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { import Attributes, {
@ -12,6 +10,7 @@ import Attributes, {
} from "@dashboard/components/Attributes"; } from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata"; import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
@ -180,9 +179,9 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
const errors = [...apiErrors, ...validationErrors]; const errors = [...apiErrors, ...validationErrors];
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={productUrl(productId)} title={header} /> <TopNav href={productUrl(productId)} title={header} />
<Content> <DetailPageLayout.Content>
<Grid variant="inverted"> <Grid variant="inverted">
<div> <div>
<ProductVariantNavigation <ProductVariantNavigation
@ -343,8 +342,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
onConfirm={handlers.updateChannels} onConfirm={handlers.updateChannels}
/> />
)} )}
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}} }}
</ProductVariantCreateForm> </ProductVariantCreateForm>

11
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -3,8 +3,6 @@ import {
mergeAttributeValues, mergeAttributeValues,
} from "@dashboard/attributes/utils/data"; } from "@dashboard/attributes/utils/data";
import { ChannelPriceData } from "@dashboard/channels/utils"; import { ChannelPriceData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog"; import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { import Attributes, {
@ -13,6 +11,7 @@ import Attributes, {
} from "@dashboard/components/Attributes"; } from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { MetadataFormData } from "@dashboard/components/Metadata"; import { MetadataFormData } from "@dashboard/components/Metadata";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
@ -195,13 +194,13 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
}; };
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav href={productUrl(productId)} title={header}> <TopNav href={productUrl(productId)} title={header}>
{variant?.product?.defaultVariant?.id !== variant?.id && ( {variant?.product?.defaultVariant?.id !== variant?.id && (
<ProductVariantSetDefault onSetDefaultVariant={onSetDefaultVariant} /> <ProductVariantSetDefault onSetDefaultVariant={onSetDefaultVariant} />
)} )}
</TopNav> </TopNav>
<Content> <DetailPageLayout.Content>
<ProductVariantUpdateForm <ProductVariantUpdateForm
variant={variant} variant={variant}
onSubmit={onSubmit} onSubmit={onSubmit}
@ -431,7 +430,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
); );
}} }}
</ProductVariantUpdateForm> </ProductVariantUpdateForm>
</Content> </DetailPageLayout.Content>
{!!variant?.preorder && ( {!!variant?.preorder && (
<ProductVariantEndPreorderDialog <ProductVariantEndPreorderDialog
confirmButtonState={variantDeactivatePreoderButtonState} confirmButtonState={variantDeactivatePreoderButtonState}
@ -441,7 +440,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
variantGlobalSoldUnits={variant?.preorder?.globalSoldUnits} variantGlobalSoldUnits={variant?.preorder?.globalSoldUnits}
/> />
)} )}
</DetailedContent> </DetailPageLayout>
); );
}; };
ProductVariantPage.displayName = "ProductVariantPage"; ProductVariantPage.displayName = "ProductVariantPage";

112
src/shipping/components/ShippingZoneCreatePage/ShippingZoneCreatePage.tsx
View file

@ -1,9 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import CountryList from "@dashboard/components/CountryList"; import CountryList from "@dashboard/components/CountryList";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid"; import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { CountryFragment, ShippingErrorFragment } from "@dashboard/graphql"; import { CountryFragment, ShippingErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm"; import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -77,67 +76,66 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
disabled={disabled} disabled={disabled}
> >
{({ change, data, isSaveDisabled, submit }) => ( {({ change, data, isSaveDisabled, submit }) => (
<> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={shippingZonesListUrl()} href={shippingZonesListUrl()}
title={intl.formatMessage(messages.createZone)} title={intl.formatMessage(messages.createZone)}
/> />
<Content> <DetailPageLayout.Content>
<Grid> <div>
<div> <ShippingZoneInfo
<ShippingZoneInfo data={data}
data={data} disabled={disabled}
disabled={disabled} errors={errors}
errors={errors} onChange={change}
onChange={change} />
/> <CardSpacer />
<CardSpacer /> <CountryList
<CountryList countries={data.countries.map(selectedCountry =>
countries={data.countries.map(selectedCountry => countries.find(country => country.code === selectedCountry),
countries.find(country => country.code === selectedCountry), )}
)} disabled={disabled}
disabled={disabled} emptyText={intl.formatMessage(messages.noCountriesAssigned)}
emptyText={intl.formatMessage(messages.noCountriesAssigned)} onCountryAssign={toggleModal}
onCountryAssign={toggleModal} onCountryUnassign={countryCode =>
onCountryUnassign={countryCode => change({
change({ target: {
target: { name: "countries",
name: "countries", value: data.countries.filter(
value: data.countries.filter( country => country !== countryCode,
country => country !== countryCode, ),
), },
}, } as any)
} as any) }
} title={intl.formatMessage(messages.countries)}
title={intl.formatMessage(messages.countries)} />
/> </div>
</div>
</Grid> <ShippingZoneCountriesAssignDialog
<Savebar open={isModalOpened}
disabled={isSaveDisabled} onConfirm={formData => {
onCancel={() => navigate(shippingZonesListUrl())} change({
onSubmit={submit} target: {
state={saveButtonBarState} name: "countries",
value: formData.countries,
},
} as any);
toggleModal();
}}
confirmButtonState="default"
countries={countries}
restWorldCountries={restWorldCountries}
initial={data.countries}
onClose={toggleModal}
/> />
</Content> </DetailPageLayout.Content>
<ShippingZoneCountriesAssignDialog <Savebar
open={isModalOpened} disabled={isSaveDisabled}
onConfirm={formData => { onCancel={() => navigate(shippingZonesListUrl())}
change({ onSubmit={submit}
target: { state={saveButtonBarState}
name: "countries",
value: formData.countries,
},
} as any);
toggleModal();
}}
confirmButtonState="default"
countries={countries}
restWorldCountries={restWorldCountries}
initial={data.countries}
onClose={toggleModal}
/> />
</> </DetailPageLayout>
)} )}
</Form> </Form>
); );

16
src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
View file

@ -1,10 +1,8 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import CountryList from "@dashboard/components/CountryList"; import CountryList from "@dashboard/components/CountryList";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField"; import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
@ -152,9 +150,9 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change); const changeMetadata = makeMetadataChangeHandler(change);
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={shippingZonesListUrl()} title={shippingZone?.name} /> <TopNav href={shippingZonesListUrl()} title={shippingZone?.name} />
<Content> <DetailPageLayout.Content>
<ShippingZoneInfo <ShippingZoneInfo
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -201,8 +199,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
/> />
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<ShippingZoneSettingsCard <ShippingZoneSettingsCard
formData={data} formData={data}
warehousesDisplayValues={warehouseDisplayValues} warehousesDisplayValues={warehouseDisplayValues}
@ -217,7 +215,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
channelsDisplayValues={channelsDisplayValues} channelsDisplayValues={channelsDisplayValues}
onChannelChange={handleChannelChange} onChannelChange={handleChannelChange}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={isSaveDisabled} disabled={isSaveDisabled}
onCancel={() => navigate(shippingZonesListUrl())} onCancel={() => navigate(shippingZonesListUrl())}
@ -225,7 +223,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
onSubmit={submit} onSubmit={submit}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

20
src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelShippingData } from "@dashboard/channels/utils"; import { ChannelShippingData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { WithFormId } from "@dashboard/components/Form"; import { WithFormId } from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
PermissionEnum, PermissionEnum,
@ -60,7 +58,9 @@ export interface ShippingZoneRatesCreatePageProps extends WithFormId {
fetchMoreTaxClasses: FetchMoreProps; fetchMoreTaxClasses: FetchMoreProps;
} }
export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePageProps> = ({ export const ShippingZoneRatesCreatePage: React.FC<
ShippingZoneRatesCreatePageProps
> = ({
allChannelsCount, allChannelsCount,
shippingChannels, shippingChannels,
channelErrors, channelErrors,
@ -148,7 +148,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
return ( return (
<RichTextContext.Provider value={richText}> <RichTextContext.Provider value={richText}>
<form onSubmit={handleFormElementSubmit}> <form onSubmit={handleFormElementSubmit}>
<DetailedContent> <DetailPageLayout>
<TopNav <TopNav
href={backUrl} href={backUrl}
title={ title={
@ -165,7 +165,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
}) })
} }
/> />
<Content> <DetailPageLayout.Content>
<ShippingRateInfo <ShippingRateInfo
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -207,8 +207,8 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
onPostalCodeRangeAdd={onPostalCodeAssign} onPostalCodeRangeAdd={onPostalCodeAssign}
postalCodes={postalCodes} postalCodes={postalCodes}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard <ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_SHIPPING]} managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
allChannelsCount={allChannelsCount} allChannelsCount={allChannelsCount}
@ -231,7 +231,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
} }
onFetchMore={fetchMoreTaxClasses} onFetchMore={fetchMoreTaxClasses}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={isSaveDisabled} disabled={isSaveDisabled}
onCancel={() => navigate(backUrl)} onCancel={() => navigate(backUrl)}
@ -239,7 +239,7 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
onSubmit={handleSubmit} onSubmit={handleSubmit}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
</form> </form>
</RichTextContext.Provider> </RichTextContext.Provider>
); );

57
src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
View file

@ -1,11 +1,9 @@
import { ChannelShippingData } from "@dashboard/channels/utils"; import { ChannelShippingData } from "@dashboard/channels/utils";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard"; import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { WithFormId } from "@dashboard/components/Form"; import { WithFormId } from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata"; import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
@ -102,25 +100,23 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE; const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
const initialForm: Omit< const initialForm: Omit<ShippingZoneRateUpdateFormData, "description"> =
ShippingZoneRateUpdateFormData, React.useMemo(
"description" () => ({
> = React.useMemo( channelListings: shippingChannels,
() => ({ maxDays: rate?.maximumDeliveryDays?.toString() || "",
channelListings: shippingChannels, maxValue: rate?.maximumOrderWeight?.value.toString() || "",
maxDays: rate?.maximumDeliveryDays?.toString() || "", metadata: rate?.metadata.map(mapMetadataItemToInput),
maxValue: rate?.maximumOrderWeight?.value.toString() || "", minDays: rate?.minimumDeliveryDays?.toString() || "",
metadata: rate?.metadata.map(mapMetadataItemToInput), minValue: rate?.minimumOrderWeight?.value.toString() || "",
minDays: rate?.minimumDeliveryDays?.toString() || "", name: rate?.name || "",
minValue: rate?.minimumOrderWeight?.value.toString() || "", orderValueRestricted: !!rate?.channelListings.length,
name: rate?.name || "", privateMetadata: rate?.privateMetadata.map(mapMetadataItemToInput),
orderValueRestricted: !!rate?.channelListings.length, type: rate?.type || null,
privateMetadata: rate?.privateMetadata.map(mapMetadataItemToInput), taxClassId: rate?.taxClass?.id || "",
type: rate?.type || null, }),
taxClassId: rate?.taxClass?.id || "", [shippingChannels, rate],
}), );
[shippingChannels, rate],
);
const { const {
change, change,
@ -144,9 +140,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
triggerChange, triggerChange,
}); });
const { const { makeChangeHandler: makeMetadataChangeHandler } =
makeChangeHandler: makeMetadataChangeHandler, useMetadataChangeTrigger();
} = useMetadataChangeTrigger();
const data: ShippingZoneRateUpdateFormData = { const data: ShippingZoneRateUpdateFormData = {
...formData, ...formData,
@ -182,9 +177,9 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
return ( return (
<RichTextContext.Provider value={richText}> <RichTextContext.Provider value={richText}>
<form onSubmit={handleFormElementSubmit}> <form onSubmit={handleFormElementSubmit}>
<DetailedContent> <DetailPageLayout>
<TopNav href={backHref} title={rate?.name} /> <TopNav href={backHref} title={rate?.name} />
<Content> <DetailPageLayout.Content>
<ShippingRateInfo <ShippingRateInfo
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -236,8 +231,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
/> />
<CardSpacer /> <CardSpacer />
<Metadata data={data} onChange={changeMetadata} /> <Metadata data={data} onChange={changeMetadata} />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<ChannelsAvailabilityCard <ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_SHIPPING]} managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
allChannelsCount={allChannelsCount} allChannelsCount={allChannelsCount}
@ -263,7 +258,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
} }
onFetchMore={fetchMoreTaxClasses} onFetchMore={fetchMoreTaxClasses}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={isSaveDisabled} disabled={isSaveDisabled}
onCancel={() => navigate(backHref)} onCancel={() => navigate(backHref)}
@ -271,7 +266,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
onSubmit={handleSubmit} onSubmit={handleSubmit}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
</form> </form>
</RichTextContext.Provider> </RichTextContext.Provider>
); );

16
src/shipping/components/ShippingZonesListPage/ShippingZonesListPage.tsx
View file

@ -1,7 +1,5 @@
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import RequirePermissions from "@dashboard/components/RequirePermissions"; import RequirePermissions from "@dashboard/components/RequirePermissions";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
import { import {
@ -40,7 +38,7 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent> <DetailPageLayout withSavebar={false}>
<TopNav <TopNav
href={configurationMenuUrl} href={configurationMenuUrl}
title={intl.formatMessage({ title={intl.formatMessage({
@ -49,10 +47,10 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
description: "header", description: "header",
})} })}
/> />
<Content noSavebar> <DetailPageLayout.Content>
<ShippingZonesList disabled={disabled} {...listProps} /> <ShippingZonesList disabled={disabled} {...listProps} />
</Content> </DetailPageLayout.Content>
<RightSidebar noSavebar> <DetailPageLayout.RightSidebar>
<RequirePermissions <RequirePermissions
requiredPermissions={[PermissionEnum.MANAGE_SETTINGS]} requiredPermissions={[PermissionEnum.MANAGE_SETTINGS]}
> >
@ -62,8 +60,8 @@ const ShippingZonesListPage: React.FC<ShippingZonesListPageProps> = ({
onSubmit={onSubmit} onSubmit={onSubmit}
/> />
</RequirePermissions> </RequirePermissions>
</RightSidebar> </DetailPageLayout.RightSidebar>
</DetailedContent> </DetailPageLayout>
); );
}; };
ShippingZonesListPage.displayName = "ShippingZonesListPage"; ShippingZonesListPage.displayName = "ShippingZonesListPage";

11
src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
View file

@ -1,11 +1,10 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler"; import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CompanyAddressInput from "@dashboard/components/CompanyAddressInput"; import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import Hr from "@dashboard/components/Hr"; import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import PageSectionHeader from "@dashboard/components/PageSectionHeader"; import PageSectionHeader from "@dashboard/components/PageSectionHeader";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
@ -139,12 +138,12 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
const handleCountrySelect = createCountryHandler(countrySelect, set); const handleCountrySelect = createCountryHandler(countrySelect, set);
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={configurationMenuUrl} href={configurationMenuUrl}
title={intl.formatMessage(commonMessages.generalInformations)} title={intl.formatMessage(commonMessages.generalInformations)}
/> />
<Content> <DetailPageLayout.Content>
<Grid <Grid
variant="inverted" variant="inverted"
className={sprinkles({ paddingLeft: 9 })} className={sprinkles({ paddingLeft: 9 })}
@ -189,8 +188,8 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
onCancel={() => navigate(configurationMenuUrl)} onCancel={() => navigate(configurationMenuUrl)}
onSubmit={submit} onSubmit={submit}
/> />
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

18
src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
View file

@ -1,11 +1,9 @@
import AccountPermissionGroups from "@dashboard/components/AccountPermissionGroups"; import AccountPermissionGroups from "@dashboard/components/AccountPermissionGroups";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField"; import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { import {
@ -36,7 +34,6 @@ import StaffPassword from "../StaffPassword/StaffPassword";
import StaffPreferences from "../StaffPreferences"; import StaffPreferences from "../StaffPreferences";
import StaffProperties from "../StaffProperties/StaffProperties"; import StaffProperties from "../StaffProperties/StaffProperties";
import { staffDetailsPageMessages as messages } from "./messages"; import { staffDetailsPageMessages as messages } from "./messages";
import useStyles from "./styles";
export interface StaffDetailsFormData { export interface StaffDetailsFormData {
email: string; email: string;
@ -84,7 +81,6 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
staffMember, staffMember,
}: StaffDetailsPageProps) => { }: StaffDetailsPageProps) => {
const intl = useIntl(); const intl = useIntl();
const classes = useStyles();
const navigate = useNavigator(); const navigate = useNavigator();
const { locale, setLocale } = useLocale(); const { locale, setLocale } = useLocale();
@ -128,9 +124,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
); );
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={staffListUrl()} title={getUserName(staffMember)} /> <TopNav href={staffListUrl()} title={getUserName(staffMember)} />
<Content> <DetailPageLayout.Content>
<StaffProperties <StaffProperties
errors={errors} errors={errors}
data={formData} data={formData}
@ -147,9 +143,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
<StaffPassword onChangePassword={onChangePassword} /> <StaffPassword onChangePassword={onChangePassword} />
</> </>
)} )}
</Content> </DetailPageLayout.Content>
<RightSidebar className={classes.noOverflow}> <DetailPageLayout.RightSidebar>
{canEditPreferences && ( {canEditPreferences && (
<StaffPreferences locale={locale} onLocaleChange={setLocale} /> <StaffPreferences locale={locale} onLocaleChange={setLocale} />
)} )}
@ -194,7 +190,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
</Card> </Card>
</> </>
)} )}
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={isSaveDisabled} disabled={isSaveDisabled}
state={saveButtonBarState} state={saveButtonBarState}
@ -202,7 +198,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
onSubmit={submit} onSubmit={submit}
onDelete={canRemove ? onDelete : undefined} onDelete={canRemove ? onDelete : undefined}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

5
src/staff/components/StaffListPage/StaffListPage.tsx
View file

@ -2,6 +2,7 @@ import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import FilterBar from "@dashboard/components/FilterBar"; import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert"; import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
import { RefreshLimitsQuery, StaffListQuery } from "@dashboard/graphql"; import { RefreshLimitsQuery, StaffListQuery } from "@dashboard/graphql";
@ -57,7 +58,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
const reachedLimit = isLimitReached(limits, "staffUsers"); const reachedLimit = isLimitReached(limits, "staffUsers");
return ( return (
<> <ListPageLayout>
<TopNav <TopNav
href={configurationMenuUrl} href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.staff)} title={intl.formatMessage(sectionNames.staff)}
@ -128,7 +129,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
/> />
<StaffList {...listProps} /> <StaffList {...listProps} />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
StaffListPage.displayName = "StaffListPage"; StaffListPage.displayName = "StaffListPage";

11
src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
View file

@ -1,10 +1,9 @@
import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer"; import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
@ -161,9 +160,9 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
}; };
return ( return (
<DetailedContent> <DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} /> <TopNav title={<TaxPageTitle />} />
<Content> <DetailPageLayout.Content>
<Box padding={9}> <Box padding={9}>
<PageTabs value="channels" onChange={handleTabChange}> <PageTabs value="channels" onChange={handleTabChange}>
<PageTab <PageTab
@ -298,14 +297,14 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
/> />
)} )}
</Box> </Box>
</Content> </DetailPageLayout.Content>
<Savebar <Savebar
state={savebarState} state={savebarState}
disabled={disabled} disabled={disabled}
onSubmit={submit} onSubmit={submit}
onCancel={() => navigate(configurationMenuUrl)} onCancel={() => navigate(configurationMenuUrl)}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

11
src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
View file

@ -1,9 +1,8 @@
import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer"; import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata"; import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
@ -120,9 +119,9 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
const formErrors = getFormErrors(["name"], validationErrors); const formErrors = getFormErrors(["name"], validationErrors);
return ( return (
<DetailedContent> <DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} /> <TopNav title={<TaxPageTitle />} />
<Content> <DetailPageLayout.Content>
<Box padding={9}> <Box padding={9}>
<PageTabs value="tax-classes" onChange={handleTabChange}> <PageTabs value="tax-classes" onChange={handleTabChange}>
<PageTab <PageTab
@ -297,8 +296,8 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
onSubmit={submit} onSubmit={submit}
onCancel={() => navigate(configurationMenuUrl)} onCancel={() => navigate(configurationMenuUrl)}
/> />
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}} }}
</TaxClassesForm> </TaxClassesForm>

11
src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
View file

@ -1,9 +1,8 @@
import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer"; import VerticalSpacer from "@dashboard/apps/components/VerticalSpacer";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardTitle from "@dashboard/components/CardTitle"; import CardTitle from "@dashboard/components/CardTitle";
import Grid from "@dashboard/components/Grid"; import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton"; import Skeleton from "@dashboard/components/Skeleton";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
@ -92,9 +91,9 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
); );
return ( return (
<DetailedContent> <DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} /> <TopNav title={<TaxPageTitle />} />
<Content> <DetailPageLayout.Content>
<Box padding={9}> <Box padding={9}>
<PageTabs value="countries" onChange={handleTabChange}> <PageTabs value="countries" onChange={handleTabChange}>
<PageTab <PageTab
@ -213,8 +212,8 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
onSubmit={submit} onSubmit={submit}
onCancel={() => navigate(configurationMenuUrl)} onCancel={() => navigate(configurationMenuUrl)}
/> />
</Content> </DetailPageLayout.Content>
</DetailedContent> </DetailPageLayout>
); );
}} }}
</TaxCountriesForm> </TaxCountriesForm>

6
src/translations/components/TranslationsAttributesPage/TranslationsAttributesPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { ListSettingsUpdate } from "@dashboard/components/TablePagination"; import { ListSettingsUpdate } from "@dashboard/components/TablePagination";
import { import {
AttributeTranslationDetailsFragment, AttributeTranslationDetailsFragment,
@ -55,7 +55,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
const withChoices = data?.attribute?.withChoices; const withChoices = data?.attribute?.withChoices;
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.attributes, tab: TranslatableEntities.attributes,
@ -127,7 +127,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
onSubmit={onSubmit} onSubmit={onSubmit}
/> />
)} )}
</DetailedContent> </DetailPageLayout>
); );
}; };
TranslationsAttributesPage.displayName = "TranslationsAttributesPage"; TranslationsAttributesPage.displayName = "TranslationsAttributesPage";

6
src/translations/components/TranslationsCategoriesPage/TranslationsCategoriesPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { import {
CategoryTranslationFragment, CategoryTranslationFragment,
LanguageCodeEnum, LanguageCodeEnum,
@ -42,7 +42,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.categories, tab: TranslatableEntities.categories,
@ -138,7 +138,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
onDiscard={onDiscard} onDiscard={onDiscard}
onSubmit={onSubmit} onSubmit={onSubmit}
/> />
</DetailedContent> </DetailPageLayout>
); );
}; };
TranslationsCategoriesPage.displayName = "TranslationsCategoriesPage"; TranslationsCategoriesPage.displayName = "TranslationsCategoriesPage";

6
src/translations/components/TranslationsCollectionsPage/TranslationsCollectionsPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { import {
CollectionTranslationFragment, CollectionTranslationFragment,
LanguageCodeEnum, LanguageCodeEnum,
@ -44,7 +44,7 @@ const TranslationsCollectionsPage: React.FC<
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.collections, tab: TranslatableEntities.collections,
@ -141,7 +141,7 @@ const TranslationsCollectionsPage: React.FC<
onDiscard={onDiscard} onDiscard={onDiscard}
onSubmit={onSubmit} onSubmit={onSubmit}
/> />
</DetailedContent> </DetailPageLayout>
); );
}; };
TranslationsCollectionsPage.displayName = "TranslationsCollectionsPage"; TranslationsCollectionsPage.displayName = "TranslationsCollectionsPage";

6
src/translations/components/TranslationsMenuItemPage/TranslationsMenuItemPage.tsx
View file

@ -1,6 +1,6 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { import {
LanguageCodeEnum, LanguageCodeEnum,
MenuItemTranslationFragment, MenuItemTranslationFragment,
@ -41,7 +41,7 @@ const TranslationsMenuItemPage: React.FC<TranslationsMenuItemPageProps> = ({
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.menuItems, tab: TranslatableEntities.menuItems,
@ -95,7 +95,7 @@ const TranslationsMenuItemPage: React.FC<TranslationsMenuItemPageProps> = ({
onDiscard={onDiscard} onDiscard={onDiscard}
onSubmit={onSubmit} onSubmit={onSubmit}
/> />
</DetailedContent> </DetailPageLayout>
); );
}; };
TranslationsMenuItemPage.displayName = "TranslationsMenuItemPage"; TranslationsMenuItemPage.displayName = "TranslationsMenuItemPage";

6
src/translations/components/TranslationsPagesPage/TranslationsPagesPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { LanguageCodeEnum, PageTranslationFragment } from "@dashboard/graphql"; import { LanguageCodeEnum, PageTranslationFragment } from "@dashboard/graphql";
import { commonMessages } from "@dashboard/intl"; import { commonMessages } from "@dashboard/intl";
import { getStringOrPlaceholder } from "@dashboard/misc"; import { getStringOrPlaceholder } from "@dashboard/misc";
@ -42,7 +42,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.pages, tab: TranslatableEntities.pages,
@ -160,7 +160,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
<CardSpacer /> <CardSpacer />
</> </>
)} )}
</DetailedContent> </DetailPageLayout>
); );
}; };
TranslationsPagesPage.displayName = "TranslationsPagesPage"; TranslationsPagesPage.displayName = "TranslationsPagesPage";

190
src/translations/components/TranslationsProductsPage/TranslationsProductsPage.tsx
View file

@ -1,7 +1,7 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { import {
LanguageCodeEnum, LanguageCodeEnum,
ProductTranslationFragment, ProductTranslationFragment,
@ -48,7 +48,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.products, tab: TranslatableEntities.products,
@ -83,98 +83,100 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
} }
/> />
</TopNav> </TopNav>
<TranslationFields <DetailPageLayout.Content>
activeField={activeField} <TranslationFields
disabled={disabled} activeField={activeField}
initialState={true} disabled={disabled}
title={intl.formatMessage(commonMessages.generalInformations)} initialState={true}
fields={[ title={intl.formatMessage(commonMessages.generalInformations)}
{ fields={[
displayName: intl.formatMessage({ {
id: "ZIc5lM", displayName: intl.formatMessage({
defaultMessage: "Product Name", id: "ZIc5lM",
}), defaultMessage: "Product Name",
name: TranslationInputFieldName.name, }),
translation: data?.translation?.name || null, name: TranslationInputFieldName.name,
type: "short", translation: data?.translation?.name || null,
value: data?.product?.name, type: "short",
}, value: data?.product?.name,
{ },
displayName: intl.formatMessage({ {
id: "Q8Qw5B", displayName: intl.formatMessage({
defaultMessage: "Description", id: "Q8Qw5B",
}), defaultMessage: "Description",
name: TranslationInputFieldName.description, }),
translation: data?.translation?.description || null, name: TranslationInputFieldName.description,
type: "rich", translation: data?.translation?.description || null,
value: data?.product?.description, type: "rich",
}, value: data?.product?.description,
]} },
saveButtonState={saveButtonState} ]}
richTextResetKey={languageCode} saveButtonState={saveButtonState}
onEdit={onEdit} richTextResetKey={languageCode}
onDiscard={onDiscard} onEdit={onEdit}
onSubmit={onSubmit} onDiscard={onDiscard}
/> onSubmit={onSubmit}
<CardSpacer /> />
<TranslationFields <CardSpacer />
activeField={activeField} <TranslationFields
disabled={disabled} activeField={activeField}
initialState={true} disabled={disabled}
title={intl.formatMessage({ initialState={true}
id: "TGX4T1", title={intl.formatMessage({
defaultMessage: "Search Engine Preview", id: "TGX4T1",
})} defaultMessage: "Search Engine Preview",
fields={[ })}
{ fields={[
displayName: intl.formatMessage({ {
id: "HlEpii", displayName: intl.formatMessage({
defaultMessage: "Search Engine Title", id: "HlEpii",
}), defaultMessage: "Search Engine Title",
name: TranslationInputFieldName.seoTitle, }),
translation: data?.translation?.seoTitle || null, name: TranslationInputFieldName.seoTitle,
type: "short", translation: data?.translation?.seoTitle || null,
value: data?.product?.seoTitle, type: "short",
}, value: data?.product?.seoTitle,
{ },
displayName: intl.formatMessage({ {
id: "US3IPU", displayName: intl.formatMessage({
defaultMessage: "Search Engine Description", id: "US3IPU",
}), defaultMessage: "Search Engine Description",
name: TranslationInputFieldName.seoDescription, }),
translation: data?.translation?.seoDescription || null, name: TranslationInputFieldName.seoDescription,
type: "long", translation: data?.translation?.seoDescription || null,
value: data?.product?.seoDescription, type: "long",
}, value: data?.product?.seoDescription,
]} },
saveButtonState={saveButtonState} ]}
richTextResetKey={languageCode} saveButtonState={saveButtonState}
onEdit={onEdit} richTextResetKey={languageCode}
onDiscard={onDiscard} onEdit={onEdit}
onSubmit={onSubmit} onDiscard={onDiscard}
/> onSubmit={onSubmit}
<CardSpacer /> />
{data?.attributeValues?.length > 0 && ( <CardSpacer />
<> {data?.attributeValues?.length > 0 && (
<TranslationFields <>
activeField={activeField} <TranslationFields
disabled={disabled} activeField={activeField}
initialState={true} disabled={disabled}
title={intl.formatMessage(commonMessages.translationAttributes)} initialState={true}
fields={mapAttributeValuesToTranslationFields( title={intl.formatMessage(commonMessages.translationAttributes)}
data.attributeValues, fields={mapAttributeValuesToTranslationFields(
intl, data.attributeValues,
)} intl,
saveButtonState={saveButtonState} )}
richTextResetKey={languageCode} saveButtonState={saveButtonState}
onEdit={onEdit} richTextResetKey={languageCode}
onDiscard={onDiscard} onEdit={onEdit}
onSubmit={onAttributeValueSubmit} onDiscard={onDiscard}
/> onSubmit={onAttributeValueSubmit}
<CardSpacer /> />
</> <CardSpacer />
)} </>
</DetailedContent> )}
</DetailPageLayout.Content>
</DetailPageLayout>
); );
}; };
TranslationsProductsPage.displayName = "TranslationsProductsPage"; TranslationsProductsPage.displayName = "TranslationsProductsPage";

54
src/translations/components/TranslationsSalesPage/TranslationsSalesPage.tsx
View file

@ -1,6 +1,6 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { LanguageCodeEnum, SaleTranslationFragment } from "@dashboard/graphql"; import { LanguageCodeEnum, SaleTranslationFragment } from "@dashboard/graphql";
import { commonMessages } from "@dashboard/intl"; import { commonMessages } from "@dashboard/intl";
import { getStringOrPlaceholder } from "@dashboard/misc"; import { getStringOrPlaceholder } from "@dashboard/misc";
@ -39,7 +39,7 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.sales, tab: TranslatableEntities.sales,
@ -64,30 +64,32 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
} }
/> />
</TopNav> </TopNav>
<TranslationFields <DetailPageLayout.Content>
activeField={activeField} <TranslationFields
disabled={disabled} activeField={activeField}
initialState={true} disabled={disabled}
title={intl.formatMessage(commonMessages.generalInformations)} initialState={true}
fields={[ title={intl.formatMessage(commonMessages.generalInformations)}
{ fields={[
displayName: intl.formatMessage({ {
id: "s40PZt", displayName: intl.formatMessage({
defaultMessage: "Sale Name", id: "s40PZt",
}), defaultMessage: "Sale Name",
name: fieldNames.name, }),
translation: data?.translation?.name || null, name: fieldNames.name,
type: "short" as "short", translation: data?.translation?.name || null,
value: data?.sale?.name, type: "short" as "short",
}, value: data?.sale?.name,
]} },
saveButtonState={saveButtonState} ]}
richTextResetKey={languageCode} saveButtonState={saveButtonState}
onEdit={onEdit} richTextResetKey={languageCode}
onDiscard={onDiscard} onEdit={onEdit}
onSubmit={onSubmit} onDiscard={onDiscard}
/> onSubmit={onSubmit}
</DetailedContent> />
</DetailPageLayout.Content>
</DetailPageLayout>
); );
}; };
TranslationsSalesPage.displayName = "TranslationsSalesPage"; TranslationsSalesPage.displayName = "TranslationsSalesPage";

78
src/translations/components/TranslationsShippingMethodPage/TranslationsShippingMethodPage.tsx
View file

@ -1,6 +1,6 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { import {
LanguageCodeEnum, LanguageCodeEnum,
ShippingMethodTranslationFragment, ShippingMethodTranslationFragment,
@ -43,7 +43,7 @@ const TranslationsShippingMethodPage: React.FC<
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.shippingMethods, tab: TranslatableEntities.shippingMethods,
@ -73,42 +73,44 @@ const TranslationsShippingMethodPage: React.FC<
} }
/> />
</TopNav> </TopNav>
<TranslationFields <DetailPageLayout.Content>
activeField={activeField} <TranslationFields
disabled={disabled} activeField={activeField}
initialState={true} disabled={disabled}
title={intl.formatMessage(commonMessages.generalInformations)} initialState={true}
fields={[ title={intl.formatMessage(commonMessages.generalInformations)}
{ fields={[
displayName: intl.formatMessage({ {
id: "aPCrsp", displayName: intl.formatMessage({
defaultMessage: "Name", id: "aPCrsp",
description: "shipping method name", defaultMessage: "Name",
}), description: "shipping method name",
name: TranslationInputFieldName.name, }),
translation: data?.translation?.name || null, name: TranslationInputFieldName.name,
type: "short" as "short", translation: data?.translation?.name || null,
value: data?.name, type: "short" as "short",
}, value: data?.name,
{ },
displayName: intl.formatMessage({ {
id: "GpqEl5", displayName: intl.formatMessage({
defaultMessage: "Description", id: "GpqEl5",
description: "shipping method description", defaultMessage: "Description",
}), description: "shipping method description",
name: TranslationInputFieldName.description, }),
translation: data?.translation?.description || null, name: TranslationInputFieldName.description,
type: "rich", translation: data?.translation?.description || null,
value: data?.description, type: "rich",
}, value: data?.description,
]} },
saveButtonState={saveButtonState} ]}
richTextResetKey={languageCode} saveButtonState={saveButtonState}
onEdit={onEdit} richTextResetKey={languageCode}
onDiscard={onDiscard} onEdit={onEdit}
onSubmit={onSubmit} onDiscard={onDiscard}
/> onSubmit={onSubmit}
</DetailedContent> />
</DetailPageLayout.Content>
</DetailPageLayout>
); );
}; };
TranslationsShippingMethodPage.displayName = "TranslationsShippingMethodPage"; TranslationsShippingMethodPage.displayName = "TranslationsShippingMethodPage";

54
src/translations/components/TranslationsVouchersPage/TranslationsVouchersPage.tsx
View file

@ -1,6 +1,6 @@
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import LanguageSwitch from "@dashboard/components/LanguageSwitch"; import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { import {
LanguageCodeEnum, LanguageCodeEnum,
VoucherTranslationFragment, VoucherTranslationFragment,
@ -42,7 +42,7 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
const intl = useIntl(); const intl = useIntl();
return ( return (
<DetailedContent useSingleColumn> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={languageEntitiesUrl(languageCode, { href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.vouchers, tab: TranslatableEntities.vouchers,
@ -72,30 +72,32 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
} }
/> />
</TopNav> </TopNav>
<TranslationFields <DetailPageLayout.Content>
activeField={activeField} <TranslationFields
disabled={disabled} activeField={activeField}
initialState={true} disabled={disabled}
title={intl.formatMessage(commonMessages.generalInformations)} initialState={true}
fields={[ title={intl.formatMessage(commonMessages.generalInformations)}
{ fields={[
displayName: intl.formatMessage({ {
id: "sfErC+", displayName: intl.formatMessage({
defaultMessage: "Voucher Name", id: "sfErC+",
}), defaultMessage: "Voucher Name",
name: fieldNames.name, }),
translation: data?.translation?.name || null, name: fieldNames.name,
type: "short" as "short", translation: data?.translation?.name || null,
value: data?.voucher?.name, type: "short" as "short",
}, value: data?.voucher?.name,
]} },
saveButtonState={saveButtonState} ]}
richTextResetKey={languageCode} saveButtonState={saveButtonState}
onEdit={onEdit} richTextResetKey={languageCode}
onDiscard={onDiscard} onEdit={onEdit}
onSubmit={onSubmit} onDiscard={onDiscard}
/> onSubmit={onSubmit}
</DetailedContent> />
</DetailPageLayout.Content>
</DetailPageLayout>
); );
}; };
TranslationsVouchersPage.displayName = "TranslationsVouchersPage"; TranslationsVouchersPage.displayName = "TranslationsVouchersPage";

59
src/warehouses/components/WarehouseCreatePage/WarehouseCreatePage.tsx
View file

@ -1,10 +1,9 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler"; import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import CompanyAddressInput from "@dashboard/components/CompanyAddressInput"; import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid"; import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { AddressTypeInput } from "@dashboard/customers/types"; import { AddressTypeInput } from "@dashboard/customers/types";
import { import {
@ -75,7 +74,7 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
const handleCountrySelect = createCountryHandler(countrySelect, set); const handleCountrySelect = createCountryHandler(countrySelect, set);
return ( return (
<> <DetailPageLayout gridTemplateColumns={1}>
<TopNav <TopNav
href={warehouseListUrl()} href={warehouseListUrl()}
title={intl.formatMessage({ title={intl.formatMessage({
@ -84,40 +83,38 @@ const WarehouseCreatePage: React.FC<WarehouseCreatePageProps> = ({
description: "header", description: "header",
})} })}
/> />
<Content> <DetailPageLayout.Content>
<Grid> <div>
<div> <WarehouseInfo
<WarehouseInfo data={data}
data={data} disabled={disabled}
disabled={disabled} errors={errors}
errors={errors} onChange={change}
onChange={change} />
/> <CardSpacer />
<CardSpacer /> <CompanyAddressInput
<CompanyAddressInput countries={countryChoices}
countries={countryChoices} data={data}
data={data} disabled={disabled}
disabled={disabled} displayCountry={displayCountry}
displayCountry={displayCountry} errors={[...errors, ...validationErrors]}
errors={[...errors, ...validationErrors]} header={intl.formatMessage({
header={intl.formatMessage({ id: "43Nlay",
id: "43Nlay", defaultMessage: "Address Information",
defaultMessage: "Address Information", description: "warehouse",
description: "warehouse", })}
})} onChange={change}
onChange={change} onCountryChange={handleCountrySelect}
onCountryChange={handleCountrySelect} />
/> </div>
</div>
</Grid>
<Savebar <Savebar
disabled={disabled} disabled={disabled}
onCancel={() => navigate(warehouseListUrl())} onCancel={() => navigate(warehouseListUrl())}
onSubmit={submit} onSubmit={submit}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</Content> </DetailPageLayout.Content>
</> </DetailPageLayout>
); );
}} }}
</Form> </Form>

16
src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx
View file

@ -1,11 +1,9 @@
import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler"; import { createCountryHandler } from "@dashboard/components/AddressEdit/createCountryHandler";
import { Content } from "@dashboard/components/AppLayout/Content";
import { DetailedContent } from "@dashboard/components/AppLayout/DetailedContent";
import { RightSidebar } from "@dashboard/components/AppLayout/RightSidebar";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import CardSpacer from "@dashboard/components/CardSpacer"; import CardSpacer from "@dashboard/components/CardSpacer";
import CompanyAddressInput from "@dashboard/components/CompanyAddressInput"; import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
import Form from "@dashboard/components/Form"; import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar"; import Savebar from "@dashboard/components/Savebar";
import { AddressTypeInput } from "@dashboard/customers/types"; import { AddressTypeInput } from "@dashboard/customers/types";
import { import {
@ -95,9 +93,9 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
const handleCountrySelect = createCountryHandler(countrySelect, set); const handleCountrySelect = createCountryHandler(countrySelect, set);
return ( return (
<DetailedContent> <DetailPageLayout>
<TopNav href={warehouseListUrl()} title={warehouse?.name} /> <TopNav href={warehouseListUrl()} title={warehouse?.name} />
<Content> <DetailPageLayout.Content>
<WarehouseInfo <WarehouseInfo
data={data} data={data}
disabled={disabled} disabled={disabled}
@ -119,8 +117,8 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onChange={change} onChange={change}
onCountryChange={handleCountrySelect} onCountryChange={handleCountrySelect}
/> />
</Content> </DetailPageLayout.Content>
<RightSidebar> <DetailPageLayout.RightSidebar>
<WarehouseSettings <WarehouseSettings
zones={mapEdgesToItems(warehouse?.shippingZones) ?? []} zones={mapEdgesToItems(warehouse?.shippingZones) ?? []}
data={data} data={data}
@ -128,7 +126,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onChange={change} onChange={change}
setData={set} setData={set}
/> />
</RightSidebar> </DetailPageLayout.RightSidebar>
<Savebar <Savebar
disabled={!!isSaveDisabled} disabled={!!isSaveDisabled}
onCancel={() => navigate(warehouseListUrl())} onCancel={() => navigate(warehouseListUrl())}
@ -136,7 +134,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onSubmit={submit} onSubmit={submit}
state={saveButtonBarState} state={saveButtonBarState}
/> />
</DetailedContent> </DetailPageLayout>
); );
}} }}
</Form> </Form>

5
src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
View file

@ -2,6 +2,7 @@ import { LimitsInfo } from "@dashboard/components/AppLayout/LimitsInfo";
import { TopNav } from "@dashboard/components/AppLayout/TopNav"; import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Backlink } from "@dashboard/components/Backlink"; import { Backlink } from "@dashboard/components/Backlink";
import { Button } from "@dashboard/components/Button"; import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert"; import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import SearchBar from "@dashboard/components/SearchBar"; import SearchBar from "@dashboard/components/SearchBar";
import { configurationMenuUrl } from "@dashboard/configuration"; import { configurationMenuUrl } from "@dashboard/configuration";
@ -59,7 +60,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
const limitReached = isLimitReached(limits, "warehouses"); const limitReached = isLimitReached(limits, "warehouses");
return ( return (
<> <ListPageLayout>
<Backlink href={configurationMenuUrl}> <Backlink href={configurationMenuUrl}>
<FormattedMessage {...sectionNames.configuration} /> <FormattedMessage {...sectionNames.configuration} />
</Backlink> </Backlink>
@ -138,7 +139,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
{...listProps} {...listProps}
/> />
</Card> </Card>
</> </ListPageLayout>
); );
}; };
WarehouseListPage.displayName = "WarehouseListPage"; WarehouseListPage.displayName = "WarehouseListPage";