135 lines
4.5 KiB
TypeScript
135 lines
4.5 KiB
TypeScript
import AppHeader from "@saleor/components/AppHeader";
|
|
import CardSpacer from "@saleor/components/CardSpacer";
|
|
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
|
|
import Container from "@saleor/components/Container";
|
|
import Grid from "@saleor/components/Grid";
|
|
import Metadata from "@saleor/components/Metadata";
|
|
import PageHeader from "@saleor/components/PageHeader";
|
|
import SaveButtonBar from "@saleor/components/SaveButtonBar";
|
|
import SeoForm from "@saleor/components/SeoForm";
|
|
import VisibilityCard from "@saleor/components/VisibilityCard";
|
|
import { PageErrorFragment } from "@saleor/fragments/types/PageErrorFragment";
|
|
import useDateLocalize from "@saleor/hooks/useDateLocalize";
|
|
import { SubmitPromise } from "@saleor/hooks/useForm";
|
|
import { sectionNames } from "@saleor/intl";
|
|
import React from "react";
|
|
import { useIntl } from "react-intl";
|
|
|
|
import { PageDetails_page } from "../../types/PageDetails";
|
|
import PageInfo from "../PageInfo";
|
|
import PageForm, { PageData } from "./form";
|
|
|
|
export interface PageDetailsPageProps {
|
|
disabled: boolean;
|
|
errors: PageErrorFragment[];
|
|
page: PageDetails_page;
|
|
allowEmptySlug?: boolean;
|
|
saveButtonBarState: ConfirmButtonTransitionState;
|
|
onBack: () => void;
|
|
onRemove: () => void;
|
|
onSubmit: (data: PageData) => SubmitPromise;
|
|
}
|
|
|
|
const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
|
|
disabled,
|
|
errors,
|
|
page,
|
|
saveButtonBarState,
|
|
onBack,
|
|
onRemove,
|
|
onSubmit
|
|
}) => {
|
|
const intl = useIntl();
|
|
const localizeDate = useDateLocalize();
|
|
|
|
const pageExists = page !== null;
|
|
|
|
return (
|
|
<PageForm page={page} onSubmit={onSubmit}>
|
|
{({ change, data, handlers, hasChanged, submit }) => (
|
|
<Container>
|
|
<AppHeader onBack={onBack}>
|
|
{intl.formatMessage(sectionNames.pages)}
|
|
</AppHeader>
|
|
<PageHeader
|
|
title={
|
|
!pageExists
|
|
? intl.formatMessage({
|
|
defaultMessage: "Create Page",
|
|
description: "page header"
|
|
})
|
|
: page?.title
|
|
}
|
|
/>
|
|
<Grid>
|
|
<div>
|
|
<PageInfo
|
|
data={data}
|
|
disabled={disabled}
|
|
errors={errors}
|
|
onChange={change}
|
|
onContentChange={handlers.changeContent}
|
|
/>
|
|
<CardSpacer />
|
|
<SeoForm
|
|
errors={errors}
|
|
allowEmptySlug={!pageExists}
|
|
description={data.seoDescription}
|
|
disabled={disabled}
|
|
descriptionPlaceholder={""} // TODO: Cast description to string and trim it
|
|
onChange={change}
|
|
slug={data.slug}
|
|
slugPlaceholder={data.title}
|
|
title={data.seoTitle}
|
|
titlePlaceholder={data.title}
|
|
helperText={intl.formatMessage({
|
|
defaultMessage:
|
|
"Add search engine title and description to make this page easier to find"
|
|
})}
|
|
/>
|
|
<CardSpacer />
|
|
<Metadata data={data} onChange={handlers.changeMetadata} />
|
|
</div>
|
|
<div>
|
|
<CardSpacer />
|
|
<VisibilityCard
|
|
data={data}
|
|
errors={errors}
|
|
disabled={disabled}
|
|
messages={{
|
|
hiddenLabel: intl.formatMessage({
|
|
defaultMessage: "Hidden",
|
|
description: "page label"
|
|
}),
|
|
hiddenSecondLabel: intl.formatMessage(
|
|
{
|
|
defaultMessage: "will be visible from {date}",
|
|
description: "page"
|
|
},
|
|
{
|
|
date: localizeDate(data.publicationDate, "L")
|
|
}
|
|
),
|
|
visibleLabel: intl.formatMessage({
|
|
defaultMessage: "Visible",
|
|
description: "page label"
|
|
})
|
|
}}
|
|
onChange={change}
|
|
/>
|
|
</div>
|
|
</Grid>
|
|
<SaveButtonBar
|
|
disabled={disabled || !hasChanged}
|
|
state={saveButtonBarState}
|
|
onCancel={onBack}
|
|
onDelete={page === null ? undefined : onRemove}
|
|
onSave={submit}
|
|
/>
|
|
</Container>
|
|
)}
|
|
</PageForm>
|
|
);
|
|
};
|
|
PageDetailsPage.displayName = "PageDetailsPage";
|
|
export default PageDetailsPage;
|