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",
"tslib": "^2.4.1",
"url-join": "^4.0.1",
"use-react-router": "^1.0.7",
"usehooks-ts": "^2.9.1"
"use-react-router": "^1.0.7"
},
"devDependencies": {
"@babel/cli": "^7.5.5",
@ -32978,19 +32977,6 @@
"version": "2.4.1",
"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": {
"version": "1.0.4",
"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": {
"version": "1.0.4",
"dev": true

3
package.json
View file

@ -90,8 +90,7 @@
"slugify": "^1.4.6",
"tslib": "^2.4.1",
"url-join": "^4.0.1",
"use-react-router": "^1.0.7",
"usehooks-ts": "^2.9.1"
"use-react-router": "^1.0.7"
},
"devDependencies": {
"@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 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 CardTitle from "@dashboard/components/CardTitle";
import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Skeleton from "@dashboard/components/Skeleton";
import { AppFetchMutation, AppInstallMutation } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -43,122 +42,124 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
const name = data?.name || "";
return (
<DetailedContent useSingleColumn constHeight>
<Content>
<CardSpacer />
<Card>
<CardTitle
title={
loading ? (
<DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
<DetailPageLayout.Content>
<Box paddingY={9}>
<CardSpacer />
<Card>
<CardTitle
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 />
) : (
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,
<>
<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>
)}
>
<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} />
<Hr className={classes.installSpacer} />
<Typography
variant="body2"
className={classes.installPrivacyText}
>
<FormattedMessage
id="t1UYU6"
defaultMessage="Uninstalling the app will remove all your customer’s personal data stored by {name}. "
description="install app privacy"
values={{ name }}
/>
{!!data?.dataPrivacyUrl && (
<a
href={data?.dataPrivacyUrl}
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage
id="k5lHFp"
defaultMessage="Learn more about data privacy"
description="app data privacy link"
/>
</a>
)}
</Typography>
</>
)}
</CardContent>
</Card>
<CardSpacer />
<Box display="flex" justifyContent="space-between" paddingX={9}>
<Button variant="secondary" onClick={navigateToAppsList}>
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<Button variant="primary" onClick={onSubmit}>
<FormattedMessage
id="PkCmGU"
defaultMessage="Install App"
description="install button"
/>
</Button>
<Typography
variant="body2"
className={classes.installPrivacyText}
>
<FormattedMessage
id="t1UYU6"
defaultMessage="Uninstalling the app will remove all your customer’s personal data stored by {name}. "
description="install app privacy"
values={{ name }}
/>
{!!data?.dataPrivacyUrl && (
<a
href={data?.dataPrivacyUrl}
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage
id="k5lHFp"
defaultMessage="Learn more about data privacy"
description="app data privacy link"
/>
</a>
)}
</Typography>
</>
)}
</CardContent>
</Card>
<CardSpacer />
<Box display="flex" justifyContent="space-between" padding={9}>
<Button variant="secondary" onClick={navigateToAppsList}>
<FormattedMessage {...buttonMessages.cancel} />
</Button>
<Button variant="primary" onClick={onSubmit}>
<FormattedMessage
id="PkCmGU"
defaultMessage="Install App"
description="install button"
/>
</Button>
</Box>
</Box>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};

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

@ -1,11 +1,9 @@
import { attributeListUrl } from "@dashboard/attributes/urls";
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 CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar";
@ -173,7 +171,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
return (
<>
<DetailedContent>
<DetailPageLayout>
<TopNav
href={attributeListUrl()}
title={
@ -185,8 +183,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
})
: maybe(() => attribute.name)
}
></TopNav>
<Content>
/>
<DetailPageLayout.Content>
<AttributeDetails
canChangeType={attribute === null}
data={data}
@ -221,8 +219,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
)}
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<AttributeOrganization
canChangeType={attribute === null}
data={data}
@ -236,7 +234,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
disabled={disabled}
onChange={change}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={!!isSaveDisabled}
state={saveButtonBarState}
@ -244,7 +242,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
onSubmit={submit}
onDelete={attribute === null ? undefined : onDelete}
/>
</DetailedContent>
</DetailPageLayout>
{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 { CardSpacer } from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -36,7 +35,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
return (
<CategoryCreateForm onSubmit={onSubmit} disabled={disabled}>
{({ data, change, handlers, submit, isSaveDisabled }) => (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={backUrl}
title={intl.formatMessage({
@ -45,7 +44,7 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
description: "page header",
})}
/>
<Content>
<DetailPageLayout.Content>
<Box height="100vh" __marginBottom="auto">
<CategoryDetailsForm
data={data}
@ -74,14 +73,14 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</Box>
</Content>
</DetailPageLayout.Content>
<Savebar
onCancel={() => navigate(backUrl)}
onSubmit={submit}
state={saveButtonBarState}
disabled={isSaveDisabled}
/>
</DetailedContent>
</DetailPageLayout>
)}
</CategoryCreateForm>
);

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

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

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

@ -3,12 +3,11 @@ import {
categoryListUrl,
categoryUrl,
} 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 { Button } from "@dashboard/components/Button";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -91,9 +90,9 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
disabled={disabled}
>
{({ data, change, handlers, submit, isSaveDisabled }) => (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={backHref} title={category?.name} />
<Content>
<DetailPageLayout.Content>
<CategoryDetailsForm
data={data}
disabled={disabled}
@ -209,8 +208,8 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
state={saveButtonBarState}
disabled={isSaveDisabled}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
)}
</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 { channelsListUrl } from "@dashboard/channels/urls";
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 CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import RequirePermissions from "@dashboard/components/RequirePermissions";
import Savebar from "@dashboard/components/Savebar";
import { SingleAutocompleteChoiceType } from "@dashboard/components/SingleAutocompleteSelectField";
@ -198,7 +196,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
const allErrors = [...errors, ...validationErrors];
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={channelsListUrl()}
title={
@ -210,7 +208,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
})
}
/>
<Content>
<DetailPageLayout.Content>
<ChannelForm
data={data}
disabled={disabled}
@ -223,8 +221,8 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
onDefaultCountryChange={handleDefaultCountrySelect}
errors={allErrors}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
{!!updateChannelStatus && (
<>
<ChannelStatus
@ -279,7 +277,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
disabled={disabled}
onChange={change}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(channelsListUrl())}
onSubmit={submit}
@ -287,7 +285,7 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
state={saveButtonBarState}
disabled={disabled}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import Skeleton from "@dashboard/components/Skeleton";
@ -39,7 +40,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
const limitReached = isLimitReached(limits, "channels");
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.channels)}
@ -154,7 +155,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
</TableBody>
</ResponsiveTable>
</Card>
</>
</ListPageLayout>
);
};

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

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

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

@ -1,11 +1,9 @@
import { ChannelCollectionData } from "@dashboard/channels/utils";
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 { CardSpacer } from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -75,9 +73,9 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
disabled={disabled}
>
{({ change, data, handlers, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav href={collectionListUrl()} title={collection?.name} />
<Content>
<DetailPageLayout.Content>
<CollectionDetails
data={data}
disabled={disabled}
@ -117,8 +115,8 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
titlePlaceholder={collection?.name}
onChange={change}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<div>
<ChannelsAvailabilityCard
managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
@ -143,7 +141,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
openModal={openChannelsModal}
/>
</div>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
state={saveButtonBarState}
disabled={isSaveDisabled}
@ -151,7 +149,7 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
onDelete={onCollectionRemove}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
)}
</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 { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { sectionNames } from "@dashboard/intl";
import {
FilterPageProps,
@ -51,7 +52,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
const filterDependency = filterStructure.find(getByName("channel"));
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.collections)}>
<Button
disabled={disabled}
@ -96,7 +97,7 @@ const CollectionListPage: React.FC<CollectionListPageProps> = ({
{...listProps}
/>
</Card>
</>
</ListPageLayout>
);
};
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"
borderColor="neutralPlain"
position="relative"
__gridArea="nav"
data-test-id="page-header"
__height={topBarHeight}
gridColumn="8"
gridRowStart="1"
backgroundColor="plain"
>
{href && (
<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": {
fillOpacity: 1,
},
position: "absolute",
padding: theme.spacing(0.25),
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 { useIntl } from "react-intl";
import ConfigurationPage from "./ConfigurationPage";
import { ConfigurationPage } from "./ConfigurationPage";
const user = {
__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 { DetailPageLayout } from "@dashboard/components/Layouts";
import { UserFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
import { Typography } from "@material-ui/core";
@ -95,11 +94,11 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
<TopNav title={intl.formatMessage(sectionNames.configuration)}>
{isSmUp && renderVersionInfo}
</TopNav>
<Content noSavebar>
<DetailPageLayout.Content>
<Box paddingX={9} __maxWidth={"1024px"} margin="auto">
{menus
.filter(menu =>
@ -137,9 +136,9 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
</div>
))}
</Box>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
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 { IntlShape, useIntl } from "react-intl";
import ConfigurationPage from "./ConfigurationPage";
import { ConfigurationPage } from "./ConfigurationPage";
import { MenuSection } from "./types";
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 { 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 Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import { CustomAppUrls } from "@dashboard/custom-apps/urls";
import {
@ -58,7 +56,7 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
disabled={disabled}
>
{({ data, change, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={CustomAppUrls.resolveAppListUrl()}
title={intl.formatMessage({
@ -66,16 +64,16 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
defaultMessage: "Create New App",
description: "header",
})}
></TopNav>
<Content>
/>
<DetailPageLayout.Content>
<CustomAppInformation
data={data}
disabled={disabled}
errors={errors}
onChange={change}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<AccountPermissions
data={data}
errorMessage={permissionsError}
@ -95,14 +93,14 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
description: "card description",
})}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
state={saveButtonBarState}
onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
)}
</Form>
);

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

@ -1,10 +1,8 @@
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 CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import WebhooksList from "@dashboard/custom-apps/components/WebhooksList";
import { CustomAppUrls } from "@dashboard/custom-apps/urls";
@ -104,7 +102,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
disabled={disabled}
>
{({ data, change, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav href={CustomAppUrls.resolveAppListUrl()} title={app?.name}>
<Button
variant="secondary"
@ -128,7 +126,7 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
)}
</Button>
</TopNav>
<Content>
<DetailPageLayout.Content>
{token && (
<>
<CustomAppDefaultToken
@ -158,8 +156,8 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
onRemove={onWebhookRemove}
createHref={app?.isActive && webhookCreateHref}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<AccountPermissions
data={data}
errorMessage={permissionsError}
@ -179,14 +177,14 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
description: "card description",
})}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
state={saveButtonBarState}
onCancel={() => navigate(CustomAppUrls.resolveAppListUrl())}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
)}
</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 { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { TableButtonWrapper } from "@dashboard/components/TableButtonWrapper/TableButtonWrapper";
import TableRowLink from "@dashboard/components/TableRowLink";
import { CustomAppUrls } from "@dashboard/custom-apps/urls";
@ -35,7 +32,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
const classes = useStyles({});
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.webhooksAndEvents)}>
<Button
variant="secondary"
@ -49,10 +46,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
/>
</Button>
</TopNav>
<Box
padding={9}
__height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}
>
<Box padding={9}>
<Box marginBottom={4}>
<Text as="p">
<FormattedMessage
@ -116,7 +110,7 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
</TableBody>
</ResponsiveTable>
</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 Form from "@dashboard/components/Form";
import FormSpacer from "@dashboard/components/FormSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import WebhookEvents from "@dashboard/custom-apps/components/WebhookEvents";
import WebhookInfo from "@dashboard/custom-apps/components/WebhookInfo";
@ -110,10 +109,10 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
});
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} />
<Content>
<Box paddingX={9}>
<DetailPageLayout.Content>
<Box padding={9}>
<WebhookStatus
data={data.isActive}
disabled={disabled}
@ -142,14 +141,14 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
<FormSpacer />
<WebhookHeaders data={data} onChange={change} />
</Box>
</Content>
</DetailPageLayout.Content>
<Savebar
disabled={disabled}
state={saveButtonBarState}
onCancel={() => navigate(backUrl)}
onSubmit={submit}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { customerUrl } from "@dashboard/customers/urls";
import { AddressTypeEnum, CustomerAddressesFragment } from "@dashboard/graphql";
import { getStringOrPlaceholder, renderCollection } from "@dashboard/misc";
@ -96,7 +96,7 @@ const CustomerAddressListPage: React.FC<
);
return (
<>
<ListPageLayout>
<TopNav
href={customerUrl(customer?.id)}
title={
@ -111,52 +111,50 @@ const CustomerAddressListPage: React.FC<
</Button>
)}
</TopNav>
<Content>
{isEmpty ? (
<Box
display="flex"
justifyContent="center"
alignItems="center"
padding={9}
flexDirection="column"
{isEmpty ? (
<Box
display="flex"
justifyContent="center"
alignItems="center"
padding={9}
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.noAddressToShow)}
</Typography>
<Typography className={classes.description}>
{intl.formatMessage(messages.doesntHaveAddresses)}
</Typography>
<Button
className={classes.addButton}
variant="primary"
onClick={onAdd}
>
{intl.formatMessage(messages.addAddress)}
</Button>
</Box>
) : (
<div className={classes.root}>
{renderCollection(customer?.addresses, (address, addressNumber) => (
<CustomerAddress
address={address}
addressNumber={addressNumber + 1}
disabled={disabled}
isDefaultBillingAddress={
customer?.defaultBillingAddress?.id === address?.id
}
isDefaultShippingAddress={
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>
</>
{intl.formatMessage(messages.addAddress)}
</Button>
</Box>
) : (
<div className={classes.root}>
{renderCollection(customer?.addresses, (address, addressNumber) => (
<CustomerAddress
address={address}
addressNumber={addressNumber + 1}
disabled={disabled}
isDefaultBillingAddress={
customer?.defaultBillingAddress?.id === address?.id
}
isDefaultShippingAddress={
customer?.defaultShippingAddress?.id === address?.id
}
onEdit={() => onEdit(address.id)}
onRemove={() => onRemove(address.id)}
onSetAsDefault={type => onSetAsDefault(address.id, type)}
key={address?.id || "skeleton"}
/>
))}
</div>
)}
</ListPageLayout>
);
};
CustomerAddressListPage.displayName = "CustomerAddressListPage";

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

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

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

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

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

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

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

@ -1,11 +1,9 @@
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 CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import { Tab, TabContainer } from "@dashboard/components/Tab";
@ -184,9 +182,9 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
const allErrors = [...localErrors, ...errors];
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={saleListUrl()} title={sale?.name} />
<Content>
<DetailPageLayout.Content>
<SaleInfo
data={data}
disabled={disabled}
@ -298,8 +296,9 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
errors={errors}
onChange={change}
/>
</Content>
<RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<SaleSummary selectedChannelId={selectedChannelId} sale={sale} />
<CardSpacer />
<ChannelsAvailabilityCard
@ -312,8 +311,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
disabled={disabled}
openModal={openChannelsModal}
/>
</RightSidebar>
<Metadata data={data} onChange={changeMetadata} />
</DetailPageLayout.RightSidebar>
<Savebar
disabled={disabled}
onCancel={() => navigate(saleListUrl())}
@ -321,7 +319,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
onSubmit={() => handleSubmit(data)}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { saleAddUrl, SaleListUrlSortField } from "@dashboard/discounts/urls";
import { SaleFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
@ -53,7 +54,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
const filterDependency = structure.find(getByName("channel"));
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.sales)}>
<Button
href={saleAddUrl()}
@ -91,7 +92,7 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
/>
<SaleList filterDependency={filterDependency} {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
SaleListPage.displayName = "SaleListPage";

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

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

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

@ -1,12 +1,10 @@
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 CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import CountryList from "@dashboard/components/CountryList";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import { Tab, TabContainer } from "@dashboard/components/Tab";
@ -210,9 +208,9 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
const allErrors = [...localErrors, ...errors];
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={voucherListUrl()} title={voucher?.code} />
<Content>
<DetailPageLayout.Content>
<VoucherInfo
data={data}
disabled={disabled}
@ -362,8 +360,8 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
onChange={change}
/>
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<VoucherSummary
voucher={voucher}
selectedChannelId={selectedChannelId}
@ -379,7 +377,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
disabled={disabled}
openModal={openChannelsModal}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(voucherListUrl())}
disabled={disabled}
@ -387,7 +385,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
onSubmit={() => handleSubmit(data)}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import {
voucherAddUrl,
VoucherListUrlSortField,
@ -55,7 +56,7 @@ const VoucherListPage: React.FC<VoucherListPageProps> = ({
const filterDependency = structure.find(getByName("channel"));
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.vouchers)}>
<Button
href={voucherAddUrl()}
@ -93,7 +94,7 @@ const VoucherListPage: React.FC<VoucherListPageProps> = ({
/>
<VoucherList filterDependency={filterDependency} {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
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 Form from "@dashboard/components/Form";
import { Grid } from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import {
GiftCardSettingsExpiryTypeEnum,
@ -60,15 +59,15 @@ const GiftCardSettingsPage: React.FC = () => {
const formErrors = getFormErrors(["expiryPeriod"], apiErrors);
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={giftCardsListPath}
title={intl.formatMessage(messages.title)}
/>
<Form initial={initialData} onSubmit={handleSubmit}>
{({ data: formData, submit, change }) => (
<>
<Content>
<DetailPageLayout.Content>
<Form initial={initialData} onSubmit={handleSubmit}>
{({ data: formData, submit, change }) => (
<>
<Box padding={9} margin="auto" height="100vh">
<Grid variant="inverted">
<div>
@ -86,17 +85,17 @@ const GiftCardSettingsPage: React.FC = () => {
/>
</Grid>
</Box>
</Content>
<Savebar
onCancel={() => navigate(giftCardsListPath)}
onSubmit={submit}
disabled={formLoading}
state={updateGiftCardSettingsOpts?.status}
/>
</>
)}
</Form>
</DetailedContent>
<Savebar
onCancel={() => navigate(giftCardsListPath)}
onSubmit={submit}
disabled={formLoading}
state={updateGiftCardSettingsOpts?.status}
/>
</>
)}
</Form>
</DetailPageLayout.Content>
</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 { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import useNavigator from "@dashboard/hooks/useNavigator";
@ -31,17 +29,17 @@ const GiftCardUpdatePage: React.FC = () => {
} = useGiftCardUpdate();
return (
<DetailedContent>
<DetailPageLayout>
<GiftCardUpdatePageHeader />
<Content>
<DetailPageLayout.Content>
<GiftCardUpdateDetailsCard />
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
<GiftCardHistory />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<GiftCardUpdateInfoCard />
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
state={status}
@ -50,7 +48,7 @@ const GiftCardUpdatePage: React.FC = () => {
onSubmit={submit}
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 CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Money from "@dashboard/components/Money";
import RequirePermissions from "@dashboard/components/RequirePermissions";
import Skeleton from "@dashboard/components/Skeleton";
@ -78,9 +76,9 @@ const HomePage: React.FC<HomePageProps> = props => {
const classes = useStyles(props);
return (
<DetailedContent>
<DetailPageLayout withSavebar={false}>
<TopNav title={<HomeHeader userName={userName} />} />
<Content noSavebar>
<DetailPageLayout.Content>
<Box paddingLeft={9} paddingRight={11}>
<CardSpacer />
<RequirePermissions
@ -153,17 +151,17 @@ const HomePage: React.FC<HomePageProps> = props => {
</RequirePermissions>
)}
</Box>
</Content>
</DetailPageLayout.Content>
{activities && (
<RightSidebar noSavebar>
<DetailPageLayout.RightSidebar>
<RequirePermissions
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
>
<HomeActivityCard activities={activities} testId="activity-card" />
</RequirePermissions>
</RightSidebar>
</DetailPageLayout.RightSidebar>
)}
</DetailedContent>
</DetailPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
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 { MenuDetailsFragment, MenuErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -86,8 +85,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
return (
<Form confirmLeave initial={initialForm} onSubmit={handleSubmit}>
{({ change, data, submit }) => (
<DetailedContent useSingleColumn>
<Content noTopNav>
<DetailPageLayout gridTemplateColumns={1}>
<DetailPageLayout.Content>
<Box padding={9} margin="auto" height="100vh">
<Backlink href={menuListUrl()}>
{intl.formatMessage(sectionNames.navigation)}
@ -145,8 +144,8 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
state={saveButtonState}
/>
</Box>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
)}
</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 { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration";
import { MenuFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
import { menuListUrl, MenuListUrlSortField } from "@dashboard/navigation/urls";
import { ListActions, PageListProps, SortPage } from "@dashboard/types";
import { Box } from "@saleor/macaw-ui/next";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
@ -30,7 +26,7 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
});
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.navigation)}
@ -43,10 +39,8 @@ const MenuListPage: React.FC<MenuListPageProps> = ({ ...listProps }) => {
/>
</Button>
</TopNav>
<Box __height={`calc(100vh - ${topBarHeight} - ${borderHeight})`}>
<MenuList {...listProps} />
</Box>
</>
<MenuList {...listProps} />
</ListPageLayout>
);
};
MenuListPage.displayName = "MenuListPage";

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

@ -3,13 +3,11 @@ import {
mapToMenuItemsForOrderDetails,
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 CardMenu from "@dashboard/components/CardMenu";
import { CardSpacer } from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import {
@ -205,7 +203,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={orderListUrl()} title={<Title order={order} />}>
<CardMenu
menuItems={[
@ -220,7 +218,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
/>
</TopNav>
<Content data-test-id="order-fulfillment">
<DetailPageLayout.Content data-test-id="order-fulfillment">
{!isOrderUnconfirmed ? (
<OrderUnfulfilledProductsCard
showFulfillmentAction={canFulfill}
@ -274,8 +272,8 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
orderCurrency={order?.total?.gross.currency}
onNoteAdd={onNoteAdd}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<OrderCustomer
canEditAddresses={canEditAddresses}
canEditCustomer={false}
@ -300,7 +298,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
</>
)}
<OrderCustomerNote note={maybe(() => order.customerNote)} />
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
labels={saveLabel}
onCancel={() => navigate(orderListUrl())}
@ -308,7 +306,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
state={saveButtonBarState}
disabled={allowSave()}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 CardMenu from "@dashboard/components/CardMenu";
import CardSpacer from "@dashboard/components/CardSpacer";
import { DateTime } from "@dashboard/components/Date";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton";
import {
@ -82,7 +80,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
const intl = useIntl();
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={orderDraftListUrl()}
title={
@ -113,7 +111,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
]}
/>
</TopNav>
<Content>
<DetailPageLayout.Content>
<OrderDraftAlert
order={order}
channelUsabilityData={channelUsabilityData}
@ -132,8 +130,8 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
orderCurrency={order?.total?.gross.currency}
onNoteAdd={onNoteAdd}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<OrderChannelSectionCard channel={order?.channel} />
<CardSpacer />
<OrderCustomer
@ -151,7 +149,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
onProfileView={onProfileView}
onShippingAddressEdit={onShippingAddressEdit}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
state={saveButtonBarState}
disabled={disabled}
@ -165,7 +163,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
}),
}}
/>
</DetailedContent>
</DetailPageLayout>
);
};
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 ControlledCheckbox from "@dashboard/components/ControlledCheckbox";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import ResponsiveTable from "@dashboard/components/ResponsiveTable";
import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton";
@ -99,9 +100,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
>(
(getToFulfillOrderLines(order?.lines) as OrderFulfillLineFragment[]).map(
line => {
const highestQuantityAllocation = getLineAllocationWithHighestQuantity(
line,
);
const highestQuantityAllocation =
getLineAllocationWithHighestQuantity(line);
return {
data: null,
@ -120,10 +120,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
),
);
const [
displayStockExceededDialog,
setDisplayStockExceededDialog,
] = React.useState(false);
const [displayStockExceededDialog, setDisplayStockExceededDialog] =
React.useState(false);
const handleSubmit = ({
formData,
@ -192,149 +190,153 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
};
return (
<>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={orderUrl(order?.id)}
title={intl.formatMessage(messages.headerOrderNumberAddFulfillment, {
orderNumber: order?.number,
})}
></TopNav>
<Form
confirmLeave
initial={initialFormData}
onSubmit={formData =>
handleSubmit({
formData,
allowStockToBeExceeded: displayStockExceededDialog,
})
}
>
{({ 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 && (
/>
<DetailPageLayout.Content>
<Form
confirmLeave
initial={initialFormData}
onSubmit={formData =>
handleSubmit({
formData,
allowStockToBeExceeded: displayStockExceededDialog,
})
}
>
{({ change, data, submit }) => (
<>
<Card>
<CardTitle
title={intl.formatMessage(messages.shipmentInformation)}
title={intl.formatMessage(messages.itemsReadyToShip)}
/>
<CardContent>
<ControlledCheckbox
checked={data.sendInfo}
label={intl.formatMessage(messages.sentShipmentDetails)}
name="sendInfo"
onChange={change}
/>
</CardContent>
{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>
)}
<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;
<CardSpacer />
formsetChange(params.lineId, [
{
quantity: lineFormQuantity,
warehouse,
},
]);
}}
onClose={closeModal}
/>
</>
{shopSettings?.fulfillmentAutoApprove && (
<Card>
<CardTitle
title={intl.formatMessage(messages.shipmentInformation)}
/>
<CardContent>
<ControlledCheckbox
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 CardMenu from "@dashboard/components/CardMenu";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { OrderListQuery, RefreshLimitsQuery } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
import { OrderListUrlSortField } from "@dashboard/orders/urls";
@ -78,7 +79,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
const extensionCreateButtonItems = mapToMenuItems(ORDER_OVERVIEW_CREATE);
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.orders)}>
{!!onSettingsOpen && (
<CardMenu
@ -149,7 +150,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
/>
<OrderList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
FulfillmentStatus,
OrderErrorFragment,
@ -72,7 +70,7 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
const isProductRefund = data.type === OrderRefundType.PRODUCTS;
return (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={orderUrl(order?.id)}
title={intl.formatMessage(
@ -85,8 +83,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
orderNumber: order?.number,
},
)}
></TopNav>
<Content>
/>
<DetailPageLayout.Content>
<OrderRefund data={data} disabled={disabled} onChange={change} />
{isProductRefund && (
<>
@ -127,8 +125,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
))}
</>
)}
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<OrderRefundAmount
amountData={
isProductRefund
@ -142,8 +140,8 @@ const OrderRefundPage: React.FC<OrderRefundPageProps> = props => {
onChange={change}
onRefund={submit}
/>
</RightSidebar>
</DetailedContent>
</DetailPageLayout.RightSidebar>
</DetailPageLayout>
);
}}
</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 CardSpacer from "@dashboard/components/CardSpacer";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { OrderDetailsFragment, OrderErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
import { renderCollection } from "@dashboard/misc";
@ -48,14 +46,14 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
return (
<OrderRefundForm order={order} onSubmit={onSubmit}>
{({ data, handlers, change, submit, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={orderUrl(order?.id)}
title={intl.formatMessage(messages.pageTitle, {
orderNumber: order?.number,
})}
/>
<Content>
<DetailPageLayout.Content>
{!!data.unfulfilledItemsQuantities.length && (
<>
<ItemsCard
@ -115,8 +113,8 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
</React.Fragment>
),
)}
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<OrderAmount
allowNoRefund
isReturn
@ -129,8 +127,8 @@ const OrderRefundPage: React.FC<OrderReturnPageProps> = props => {
onChange={change}
onRefund={submit}
/>
</RightSidebar>
</DetailedContent>
</DetailPageLayout.RightSidebar>
</DetailPageLayout>
)}
</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 Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import {
OrderSettingsFragment,
@ -42,7 +41,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
disabled={disabled}
>
{({ data, submit, change, isSaveDisabled }) => (
<DetailedContent>
<DetailPageLayout>
<TopNav
href={orderListUrl()}
title={intl.formatMessage({
@ -51,7 +50,7 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
description: "header",
})}
/>
<Content>
<DetailPageLayout.Content>
<Box padding={9} margin="auto" height="100vh">
<Grid variant="inverted">
<div>
@ -75,14 +74,14 @@ const OrderSettingsPage: React.FC<OrderSettingsPageProps> = props => {
/>
</Grid>
</Box>
</Content>
</DetailPageLayout.Content>
<Savebar
onCancel={() => navigate(orderListUrl())}
onSubmit={submit}
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
)}
</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 Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import { PageErrorFragment } from "@dashboard/graphql";
@ -68,7 +67,7 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={pageTypeListUrl()}
title={intl.formatMessage({
@ -77,7 +76,7 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
description: "header",
})}
/>
<Content>
<DetailPageLayout.Content>
<Grid
variant="inverted"
className={sprinkles({
@ -115,14 +114,14 @@ const PageTypeCreatePage: React.FC<PageTypeCreatePageProps> = props => {
</div>
<Metadata data={data} onChange={changeMetadata} />
</Grid>
</Content>
</DetailPageLayout.Content>
<Savebar
onCancel={() => navigate(pageTypeListUrl())}
onSubmit={submit}
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 Form from "@dashboard/components/Form";
import Grid from "@dashboard/components/Grid";
import Hr from "@dashboard/components/Hr";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar";
@ -118,9 +117,9 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={pageTypeListUrl()} title={pageTitle} />
<Content>
<DetailPageLayout.Content>
<Grid
variant="inverted"
className={sprinkles({
@ -185,7 +184,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
</div>
<Metadata data={data} onChange={changeMetadata} />
</Grid>
</Content>
</DetailPageLayout.Content>
<Savebar
onCancel={() => navigate(pageTypeListUrl())}
onDelete={onDelete}
@ -193,7 +192,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

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

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

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

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

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

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

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

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

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

@ -1,5 +1,6 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration";
import { PermissionGroupFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
@ -21,11 +22,13 @@ export interface PermissionGroupListPageProps
onDelete: (id: string) => void;
}
const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProps => {
const PermissionGroupListPage: React.FC<
PermissionGroupListPageProps
> = listProps => {
const intl = useIntl();
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.permissionGroups)}
@ -45,7 +48,7 @@ const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = listProp
<Card>
<PermissionGroupList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
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 {
ConfigurationItemInput,
@ -97,7 +96,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
set(newData);
};
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={pluginListUrl()}
title={intl.formatMessage(
@ -111,7 +110,7 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
},
)}
/>
<Content>
<DetailPageLayout.Content>
<Grid variant="inverted">
<div>
<PluginDetailsChannelsCard
@ -163,8 +162,8 @@ const PluginsDetailsPage: React.FC<PluginsDetailsPageProps> = ({
onCancel={() => navigate(pluginListUrl())}
onSubmit={submit}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</Form>

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

@ -1,5 +1,6 @@
import { TopNav } from "@dashboard/components/AppLayout/TopNav";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import { configurationMenuUrl } from "@dashboard/configuration";
import { PluginBaseFragment } from "@dashboard/graphql";
import { sectionNames } from "@dashboard/intl";
@ -48,7 +49,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
const filterStructure = createFilterStructure(intl, filterOpts);
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.plugins)}
@ -78,7 +79,7 @@ const PluginsListPage: React.FC<PluginsListPageProps> = ({
/>
<PluginsList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata, { MetadataFormData } from "@dashboard/components/Metadata";
import Savebar from "@dashboard/components/Savebar";
import {
@ -74,9 +72,8 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
const navigate = useNavigator();
const [taxClassDisplayName, setTaxClassDisplayName] = useStateFromProps("");
const {
makeChangeHandler: makeMetadataChangeHandler,
} = useMetadataChangeTrigger();
const { makeChangeHandler: makeMetadataChangeHandler } =
useMetadataChangeTrigger();
const initialData = {
...formInitialData,
@ -99,9 +96,9 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={productTypeListUrl()} title={pageTitle} />
<Content>
<DetailPageLayout.Content>
<ProductTypeDetails
data={data}
disabled={disabled}
@ -127,22 +124,22 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductTypeShipping
disabled={disabled}
data={data}
weightUnit={defaultWeightUnit}
onChange={change}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(productTypeListUrl())}
onSubmit={submit}
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 CardSpacer from "@dashboard/components/CardSpacer";
import ControlledSwitch from "@dashboard/components/ControlledSwitch";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MetadataFormData } from "@dashboard/components/Metadata/types";
import Savebar from "@dashboard/components/Savebar";
@ -164,9 +162,9 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={productTypeListUrl()} title={pageTitle} />
<Content>
<DetailPageLayout.Content>
<ProductTypeDetails
data={data}
disabled={disabled}
@ -239,15 +237,15 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
)}
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductTypeShipping
disabled={disabled}
data={data}
weightUnit={productType?.weight?.unit || defaultWeightUnit}
onChange={change}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(productTypeListUrl())}
onDelete={onDelete}
@ -255,7 +253,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
disabled={isSaveDisabled}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

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

@ -4,14 +4,12 @@ import {
} from "@dashboard/attributes/utils/data";
import CannotDefineChannelsAvailabilityCard from "@dashboard/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard";
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 AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar";
@ -236,9 +234,9 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={productListUrl()} title={header} />
<Content>
<DetailPageLayout.Content>
<ProductDetailsForm
data={data}
disabled={loading}
@ -319,8 +317,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={handlers.changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductOrganization
canChangeType={true}
categories={categories}
@ -379,7 +377,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
taxClasses={taxClasses}
onFetchMore={fetchMoreTaxClasses}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
onCancel={() => navigate(productListUrl())}
onSubmit={submit}
@ -407,7 +405,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
}
/>
)}
</DetailedContent>
</DetailPageLayout>
);
}}
</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 { getByName } from "@dashboard/components/Filter/utils";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import { ProductListColumns } from "@dashboard/config";
@ -171,10 +172,8 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
];
const limitReached = isLimitReached(limits, "productVariants");
const {
PRODUCT_OVERVIEW_CREATE,
PRODUCT_OVERVIEW_MORE_ACTIONS,
} = useExtensions(extensionMountPoints.PRODUCT_LIST);
const { PRODUCT_OVERVIEW_CREATE, PRODUCT_OVERVIEW_MORE_ACTIONS } =
useExtensions(extensionMountPoints.PRODUCT_LIST);
const extensionMenuItems = mapToMenuItemsForProductOverviewActions(
PRODUCT_OVERVIEW_MORE_ACTIONS,
@ -183,7 +182,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
const extensionCreateButtonItems = mapToMenuItems(PRODUCT_OVERVIEW_CREATE);
return (
<>
<ListPageLayout>
<TopNav title={intl.formatMessage(sectionNames.products)}>
<CardMenu
className={classes.settings}
@ -289,7 +288,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
filterDependency={filterDependency}
/>
</Card>
</>
</ListPageLayout>
);
};
ProductListPage.displayName = "ProductListPage";

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

@ -8,15 +8,13 @@ import {
mergeAttributeValues,
} from "@dashboard/attributes/utils/data";
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 AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, { AttributeInput } from "@dashboard/components/Attributes";
import CardMenu from "@dashboard/components/CardMenu";
import CardSpacer from "@dashboard/components/CardSpacer";
import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
import SeoForm from "@dashboard/components/SeoForm";
@ -325,173 +323,169 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
);
return (
<>
<DetailedContent>
<TopNav href={productListUrl()} title={header}>
<CardMenu
menuItems={[
...extensionMenuItems,
{
label: intl.formatMessage(messages.openGraphiQL),
onSelect: openPlaygroundURL,
testId: "graphiql-redirect",
},
]}
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}
<DetailPageLayout>
<TopNav href={productListUrl()} title={header}>
<CardMenu
menuItems={[
...extensionMenuItems,
{
label: intl.formatMessage(messages.openGraphiQL),
onSelect: openPlaygroundURL,
testId: "graphiql-redirect",
},
]}
data-test-id="menu"
/>
{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,
)
}
</TopNav>
<DetailPageLayout.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}
/>
)}
<ProductExternalMediaDialog
product={product}
onClose={() => setMediaUrlModalStatus(false)}
open={mediaUrlModalStatus}
onSubmit={onMediaUrlUpload}
<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}
/>
<ProductChannelsListingsDialog
channels={channels}
<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} />
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ProductOrganization
canChangeType={false}
categories={categories}
categoryInputDisplayValue={selectedCategory}
collections={collections}
collectionsInputDisplayValue={selectedCollections}
data={data}
onClose={() => setChannelPickerOpen(false)}
open={channelPickerOpen}
onConfirm={handlers.updateChannelList}
disabled={disabled}
errors={productOrganizationErrors}
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>

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

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

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

@ -3,8 +3,6 @@ import {
mergeAttributeValues,
} from "@dashboard/attributes/utils/data";
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 AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
import Attributes, {
@ -13,6 +11,7 @@ import Attributes, {
} from "@dashboard/components/Attributes";
import CardSpacer from "@dashboard/components/CardSpacer";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { MetadataFormData } from "@dashboard/components/Metadata";
import Metadata from "@dashboard/components/Metadata/Metadata";
import Savebar from "@dashboard/components/Savebar";
@ -195,13 +194,13 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
};
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav href={productUrl(productId)} title={header}>
{variant?.product?.defaultVariant?.id !== variant?.id && (
<ProductVariantSetDefault onSetDefaultVariant={onSetDefaultVariant} />
)}
</TopNav>
<Content>
<DetailPageLayout.Content>
<ProductVariantUpdateForm
variant={variant}
onSubmit={onSubmit}
@ -431,7 +430,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
);
}}
</ProductVariantUpdateForm>
</Content>
</DetailPageLayout.Content>
{!!variant?.preorder && (
<ProductVariantEndPreorderDialog
confirmButtonState={variantDeactivatePreoderButtonState}
@ -441,7 +440,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
variantGlobalSoldUnits={variant?.preorder?.globalSoldUnits}
/>
)}
</DetailedContent>
</DetailPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
import CountryList from "@dashboard/components/CountryList";
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 { CountryFragment, ShippingErrorFragment } from "@dashboard/graphql";
import { SubmitPromise } from "@dashboard/hooks/useForm";
@ -77,67 +76,66 @@ const ShippingZoneCreatePage: React.FC<ShippingZoneCreatePageProps> = ({
disabled={disabled}
>
{({ change, data, isSaveDisabled, submit }) => (
<>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={shippingZonesListUrl()}
title={intl.formatMessage(messages.createZone)}
/>
<Content>
<Grid>
<div>
<ShippingZoneInfo
data={data}
disabled={disabled}
errors={errors}
onChange={change}
/>
<CardSpacer />
<CountryList
countries={data.countries.map(selectedCountry =>
countries.find(country => country.code === selectedCountry),
)}
disabled={disabled}
emptyText={intl.formatMessage(messages.noCountriesAssigned)}
onCountryAssign={toggleModal}
onCountryUnassign={countryCode =>
change({
target: {
name: "countries",
value: data.countries.filter(
country => country !== countryCode,
),
},
} as any)
}
title={intl.formatMessage(messages.countries)}
/>
</div>
</Grid>
<Savebar
disabled={isSaveDisabled}
onCancel={() => navigate(shippingZonesListUrl())}
onSubmit={submit}
state={saveButtonBarState}
<DetailPageLayout.Content>
<div>
<ShippingZoneInfo
data={data}
disabled={disabled}
errors={errors}
onChange={change}
/>
<CardSpacer />
<CountryList
countries={data.countries.map(selectedCountry =>
countries.find(country => country.code === selectedCountry),
)}
disabled={disabled}
emptyText={intl.formatMessage(messages.noCountriesAssigned)}
onCountryAssign={toggleModal}
onCountryUnassign={countryCode =>
change({
target: {
name: "countries",
value: data.countries.filter(
country => country !== countryCode,
),
},
} as any)
}
title={intl.formatMessage(messages.countries)}
/>
</div>
<ShippingZoneCountriesAssignDialog
open={isModalOpened}
onConfirm={formData => {
change({
target: {
name: "countries",
value: formData.countries,
},
} as any);
toggleModal();
}}
confirmButtonState="default"
countries={countries}
restWorldCountries={restWorldCountries}
initial={data.countries}
onClose={toggleModal}
/>
</Content>
<ShippingZoneCountriesAssignDialog
open={isModalOpened}
onConfirm={formData => {
change({
target: {
name: "countries",
value: formData.countries,
},
} as any);
toggleModal();
}}
confirmButtonState="default"
countries={countries}
restWorldCountries={restWorldCountries}
initial={data.countries}
onClose={toggleModal}
</DetailPageLayout.Content>
<Savebar
disabled={isSaveDisabled}
onCancel={() => navigate(shippingZonesListUrl())}
onSubmit={submit}
state={saveButtonBarState}
/>
</>
</DetailPageLayout>
)}
</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 CardSpacer from "@dashboard/components/CardSpacer";
import CountryList from "@dashboard/components/CountryList";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Metadata from "@dashboard/components/Metadata/Metadata";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar";
@ -152,9 +150,9 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
const changeMetadata = makeMetadataChangeHandler(change);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={shippingZonesListUrl()} title={shippingZone?.name} />
<Content>
<DetailPageLayout.Content>
<ShippingZoneInfo
data={data}
disabled={disabled}
@ -201,8 +199,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<ShippingZoneSettingsCard
formData={data}
warehousesDisplayValues={warehouseDisplayValues}
@ -217,7 +215,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
channelsDisplayValues={channelsDisplayValues}
onChannelChange={handleChannelChange}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
onCancel={() => navigate(shippingZonesListUrl())}
@ -225,7 +223,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
onSubmit={submit}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</Form>

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

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

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

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

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

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

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

@ -1,11 +1,9 @@
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 CardSpacer from "@dashboard/components/CardSpacer";
import CardTitle from "@dashboard/components/CardTitle";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
import Savebar from "@dashboard/components/Savebar";
import {
@ -36,7 +34,6 @@ import StaffPassword from "../StaffPassword/StaffPassword";
import StaffPreferences from "../StaffPreferences";
import StaffProperties from "../StaffProperties/StaffProperties";
import { staffDetailsPageMessages as messages } from "./messages";
import useStyles from "./styles";
export interface StaffDetailsFormData {
email: string;
@ -84,7 +81,6 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
staffMember,
}: StaffDetailsPageProps) => {
const intl = useIntl();
const classes = useStyles();
const navigate = useNavigator();
const { locale, setLocale } = useLocale();
@ -128,9 +124,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={staffListUrl()} title={getUserName(staffMember)} />
<Content>
<DetailPageLayout.Content>
<StaffProperties
errors={errors}
data={formData}
@ -147,9 +143,9 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
<StaffPassword onChangePassword={onChangePassword} />
</>
)}
</Content>
</DetailPageLayout.Content>
<RightSidebar className={classes.noOverflow}>
<DetailPageLayout.RightSidebar>
{canEditPreferences && (
<StaffPreferences locale={locale} onLocaleChange={setLocale} />
)}
@ -194,7 +190,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
</Card>
</>
)}
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={isSaveDisabled}
state={saveButtonBarState}
@ -202,7 +198,7 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
onSubmit={submit}
onDelete={canRemove ? onDelete : undefined}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 { Button } from "@dashboard/components/Button";
import FilterBar from "@dashboard/components/FilterBar";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import { configurationMenuUrl } from "@dashboard/configuration";
import { RefreshLimitsQuery, StaffListQuery } from "@dashboard/graphql";
@ -57,7 +58,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
const reachedLimit = isLimitReached(limits, "staffUsers");
return (
<>
<ListPageLayout>
<TopNav
href={configurationMenuUrl}
title={intl.formatMessage(sectionNames.staff)}
@ -128,7 +129,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
/>
<StaffList {...listProps} />
</Card>
</>
</ListPageLayout>
);
};
StaffListPage.displayName = "StaffListPage";

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

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

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

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

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

@ -1,9 +1,8 @@
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 CardTitle from "@dashboard/components/CardTitle";
import Grid from "@dashboard/components/Grid";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import Skeleton from "@dashboard/components/Skeleton";
import { configurationMenuUrl } from "@dashboard/configuration";
@ -92,9 +91,9 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
);
return (
<DetailedContent>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav title={<TaxPageTitle />} />
<Content>
<DetailPageLayout.Content>
<Box padding={9}>
<PageTabs value="countries" onChange={handleTabChange}>
<PageTab
@ -213,8 +212,8 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
onSubmit={submit}
onCancel={() => navigate(configurationMenuUrl)}
/>
</Content>
</DetailedContent>
</DetailPageLayout.Content>
</DetailPageLayout>
);
}}
</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 CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { ListSettingsUpdate } from "@dashboard/components/TablePagination";
import {
AttributeTranslationDetailsFragment,
@ -55,7 +55,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
const withChoices = data?.attribute?.withChoices;
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.attributes,
@ -127,7 +127,7 @@ const TranslationsAttributesPage: React.FC<TranslationsAttributesPageProps> = ({
onSubmit={onSubmit}
/>
)}
</DetailedContent>
</DetailPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
CategoryTranslationFragment,
LanguageCodeEnum,
@ -42,7 +42,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.categories,
@ -138,7 +138,7 @@ const TranslationsCategoriesPage: React.FC<TranslationsCategoriesPageProps> = ({
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
CollectionTranslationFragment,
LanguageCodeEnum,
@ -44,7 +44,7 @@ const TranslationsCollectionsPage: React.FC<
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.collections,
@ -141,7 +141,7 @@ const TranslationsCollectionsPage: React.FC<
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout>
);
};
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 LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
LanguageCodeEnum,
MenuItemTranslationFragment,
@ -41,7 +41,7 @@ const TranslationsMenuItemPage: React.FC<TranslationsMenuItemPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.menuItems,
@ -95,7 +95,7 @@ const TranslationsMenuItemPage: React.FC<TranslationsMenuItemPageProps> = ({
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
</DetailPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { LanguageCodeEnum, PageTranslationFragment } from "@dashboard/graphql";
import { commonMessages } from "@dashboard/intl";
import { getStringOrPlaceholder } from "@dashboard/misc";
@ -42,7 +42,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.pages,
@ -160,7 +160,7 @@ const TranslationsPagesPage: React.FC<TranslationsPagesPageProps> = ({
<CardSpacer />
</>
)}
</DetailedContent>
</DetailPageLayout>
);
};
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 CardSpacer from "@dashboard/components/CardSpacer";
import LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
LanguageCodeEnum,
ProductTranslationFragment,
@ -48,7 +48,7 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.products,
@ -83,98 +83,100 @@ const TranslationsProductsPage: React.FC<TranslationsProductsPageProps> = ({
}
/>
</TopNav>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.generalInformations)}
fields={[
{
displayName: intl.formatMessage({
id: "ZIc5lM",
defaultMessage: "Product Name",
}),
name: TranslationInputFieldName.name,
translation: data?.translation?.name || null,
type: "short",
value: data?.product?.name,
},
{
displayName: intl.formatMessage({
id: "Q8Qw5B",
defaultMessage: "Description",
}),
name: TranslationInputFieldName.description,
translation: data?.translation?.description || null,
type: "rich",
value: data?.product?.description,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
<CardSpacer />
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage({
id: "TGX4T1",
defaultMessage: "Search Engine Preview",
})}
fields={[
{
displayName: intl.formatMessage({
id: "HlEpii",
defaultMessage: "Search Engine Title",
}),
name: TranslationInputFieldName.seoTitle,
translation: data?.translation?.seoTitle || null,
type: "short",
value: data?.product?.seoTitle,
},
{
displayName: intl.formatMessage({
id: "US3IPU",
defaultMessage: "Search Engine Description",
}),
name: TranslationInputFieldName.seoDescription,
translation: data?.translation?.seoDescription || null,
type: "long",
value: data?.product?.seoDescription,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
<CardSpacer />
{data?.attributeValues?.length > 0 && (
<>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.translationAttributes)}
fields={mapAttributeValuesToTranslationFields(
data.attributeValues,
intl,
)}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onAttributeValueSubmit}
/>
<CardSpacer />
</>
)}
</DetailedContent>
<DetailPageLayout.Content>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.generalInformations)}
fields={[
{
displayName: intl.formatMessage({
id: "ZIc5lM",
defaultMessage: "Product Name",
}),
name: TranslationInputFieldName.name,
translation: data?.translation?.name || null,
type: "short",
value: data?.product?.name,
},
{
displayName: intl.formatMessage({
id: "Q8Qw5B",
defaultMessage: "Description",
}),
name: TranslationInputFieldName.description,
translation: data?.translation?.description || null,
type: "rich",
value: data?.product?.description,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
<CardSpacer />
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage({
id: "TGX4T1",
defaultMessage: "Search Engine Preview",
})}
fields={[
{
displayName: intl.formatMessage({
id: "HlEpii",
defaultMessage: "Search Engine Title",
}),
name: TranslationInputFieldName.seoTitle,
translation: data?.translation?.seoTitle || null,
type: "short",
value: data?.product?.seoTitle,
},
{
displayName: intl.formatMessage({
id: "US3IPU",
defaultMessage: "Search Engine Description",
}),
name: TranslationInputFieldName.seoDescription,
translation: data?.translation?.seoDescription || null,
type: "long",
value: data?.product?.seoDescription,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
<CardSpacer />
{data?.attributeValues?.length > 0 && (
<>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.translationAttributes)}
fields={mapAttributeValuesToTranslationFields(
data.attributeValues,
intl,
)}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onAttributeValueSubmit}
/>
<CardSpacer />
</>
)}
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
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 LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import { LanguageCodeEnum, SaleTranslationFragment } from "@dashboard/graphql";
import { commonMessages } from "@dashboard/intl";
import { getStringOrPlaceholder } from "@dashboard/misc";
@ -39,7 +39,7 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.sales,
@ -64,30 +64,32 @@ const TranslationsSalesPage: React.FC<TranslationsSalesPageProps> = ({
}
/>
</TopNav>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.generalInformations)}
fields={[
{
displayName: intl.formatMessage({
id: "s40PZt",
defaultMessage: "Sale Name",
}),
name: fieldNames.name,
translation: data?.translation?.name || null,
type: "short" as "short",
value: data?.sale?.name,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
<DetailPageLayout.Content>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.generalInformations)}
fields={[
{
displayName: intl.formatMessage({
id: "s40PZt",
defaultMessage: "Sale Name",
}),
name: fieldNames.name,
translation: data?.translation?.name || null,
type: "short" as "short",
value: data?.sale?.name,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
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 LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
LanguageCodeEnum,
ShippingMethodTranslationFragment,
@ -43,7 +43,7 @@ const TranslationsShippingMethodPage: React.FC<
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.shippingMethods,
@ -73,42 +73,44 @@ const TranslationsShippingMethodPage: React.FC<
}
/>
</TopNav>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.generalInformations)}
fields={[
{
displayName: intl.formatMessage({
id: "aPCrsp",
defaultMessage: "Name",
description: "shipping method name",
}),
name: TranslationInputFieldName.name,
translation: data?.translation?.name || null,
type: "short" as "short",
value: data?.name,
},
{
displayName: intl.formatMessage({
id: "GpqEl5",
defaultMessage: "Description",
description: "shipping method description",
}),
name: TranslationInputFieldName.description,
translation: data?.translation?.description || null,
type: "rich",
value: data?.description,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
<DetailPageLayout.Content>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.generalInformations)}
fields={[
{
displayName: intl.formatMessage({
id: "aPCrsp",
defaultMessage: "Name",
description: "shipping method name",
}),
name: TranslationInputFieldName.name,
translation: data?.translation?.name || null,
type: "short" as "short",
value: data?.name,
},
{
displayName: intl.formatMessage({
id: "GpqEl5",
defaultMessage: "Description",
description: "shipping method description",
}),
name: TranslationInputFieldName.description,
translation: data?.translation?.description || null,
type: "rich",
value: data?.description,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
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 LanguageSwitch from "@dashboard/components/LanguageSwitch";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import {
LanguageCodeEnum,
VoucherTranslationFragment,
@ -42,7 +42,7 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
const intl = useIntl();
return (
<DetailedContent useSingleColumn>
<DetailPageLayout gridTemplateColumns={1}>
<TopNav
href={languageEntitiesUrl(languageCode, {
tab: TranslatableEntities.vouchers,
@ -72,30 +72,32 @@ const TranslationsVouchersPage: React.FC<TranslationsVouchersPageProps> = ({
}
/>
</TopNav>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.generalInformations)}
fields={[
{
displayName: intl.formatMessage({
id: "sfErC+",
defaultMessage: "Voucher Name",
}),
name: fieldNames.name,
translation: data?.translation?.name || null,
type: "short" as "short",
value: data?.voucher?.name,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailedContent>
<DetailPageLayout.Content>
<TranslationFields
activeField={activeField}
disabled={disabled}
initialState={true}
title={intl.formatMessage(commonMessages.generalInformations)}
fields={[
{
displayName: intl.formatMessage({
id: "sfErC+",
defaultMessage: "Voucher Name",
}),
name: fieldNames.name,
translation: data?.translation?.name || null,
type: "short" as "short",
value: data?.voucher?.name,
},
]}
saveButtonState={saveButtonState}
richTextResetKey={languageCode}
onEdit={onEdit}
onDiscard={onDiscard}
onSubmit={onSubmit}
/>
</DetailPageLayout.Content>
</DetailPageLayout>
);
};
TranslationsVouchersPage.displayName = "TranslationsVouchersPage";

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

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

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

@ -1,11 +1,9 @@
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 CardSpacer from "@dashboard/components/CardSpacer";
import CompanyAddressInput from "@dashboard/components/CompanyAddressInput";
import Form from "@dashboard/components/Form";
import { DetailPageLayout } from "@dashboard/components/Layouts";
import Savebar from "@dashboard/components/Savebar";
import { AddressTypeInput } from "@dashboard/customers/types";
import {
@ -95,9 +93,9 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
const handleCountrySelect = createCountryHandler(countrySelect, set);
return (
<DetailedContent>
<DetailPageLayout>
<TopNav href={warehouseListUrl()} title={warehouse?.name} />
<Content>
<DetailPageLayout.Content>
<WarehouseInfo
data={data}
disabled={disabled}
@ -119,8 +117,8 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onChange={change}
onCountryChange={handleCountrySelect}
/>
</Content>
<RightSidebar>
</DetailPageLayout.Content>
<DetailPageLayout.RightSidebar>
<WarehouseSettings
zones={mapEdgesToItems(warehouse?.shippingZones) ?? []}
data={data}
@ -128,7 +126,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onChange={change}
setData={set}
/>
</RightSidebar>
</DetailPageLayout.RightSidebar>
<Savebar
disabled={!!isSaveDisabled}
onCancel={() => navigate(warehouseListUrl())}
@ -136,7 +134,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
onSubmit={submit}
state={saveButtonBarState}
/>
</DetailedContent>
</DetailPageLayout>
);
}}
</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 { Backlink } from "@dashboard/components/Backlink";
import { Button } from "@dashboard/components/Button";
import { ListPageLayout } from "@dashboard/components/Layouts";
import LimitReachedAlert from "@dashboard/components/LimitReachedAlert";
import SearchBar from "@dashboard/components/SearchBar";
import { configurationMenuUrl } from "@dashboard/configuration";
@ -59,7 +60,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
const limitReached = isLimitReached(limits, "warehouses");
return (
<>
<ListPageLayout>
<Backlink href={configurationMenuUrl}>
<FormattedMessage {...sectionNames.configuration} />
</Backlink>
@ -138,7 +139,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
{...listProps}
/>
</Card>
</>
</ListPageLayout>
);
};
WarehouseListPage.displayName = "WarehouseListPage";