Add metadata editor to collection creator

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -1,19 +1,18 @@
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
 import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
-import CardTitle from "@saleor/components/CardTitle";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import { Container } from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import Metadata, { MetadataFormData } 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 { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
-import { commonMessages, sectionNames } from "@saleor/intl";
+import { sectionNames } from "@saleor/intl";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -21,7 +20,7 @@ import { useIntl } from "react-intl";
 import CollectionDetails from "../CollectionDetails/CollectionDetails";
 import { CollectionImage } from "../CollectionImage/CollectionImage";
 
-export interface CollectionCreatePageFormData {
+export interface CollectionCreatePageFormData extends MetadataFormData {
   backgroundImage: {
     url: string;
     value: string;
@@ -51,7 +50,9 @@ const initialForm: CollectionCreatePageFormData = {
   backgroundImageAlt: "",
   description: convertToRaw(ContentState.createFromText("")),
   isPublished: false,
+  metadata: [],
   name: "",
+  privateMetadata: [],
   publicationDate: "",
   seoDescription: "",
   seoTitle: ""
@@ -66,10 +67,16 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
 }: CollectionCreatePageProps) => {
   const intl = useIntl();
   const localizeDate = useDateLocalize();
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
-      {({ change, data, hasChanged, submit }) => (
+      {({ change, data, hasChanged, submit }) => {
+        const changeMetadata = makeMetadataChangeHandler(change);
+
+        return (
           <Container>
             <AppHeader onBack={onBack}>
               {intl.formatMessage(sectionNames.collections)}
@@ -137,14 +144,10 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
                   titlePlaceholder={data.name}
                   onChange={change}
                 />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
               <div>
-              <div>
-                <Card>
-                  <CardTitle
-                    title={intl.formatMessage(commonMessages.availability)}
-                  />
-                  <CardContent>
                 <VisibilityCard
                   data={data}
                   errors={errors}
@@ -169,9 +172,6 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
                     }
                   )}
                 />
-                  </CardContent>
-                </Card>
-              </div>
               </div>
             </Grid>
             <SaveButtonBar
@@ -181,7 +181,8 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
               onSave={submit}
             />
           </Container>
-      )}
+        );
+      }}
     </Form>
   );
 };

src/collections/views/CollectionCreate.tsx

@@ -2,11 +2,18 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { CollectionCreateInput } from "../../types/globalTypes";
-import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage";
+import CollectionCreatePage, {
+  CollectionCreatePageFormData
+} from "../components/CollectionCreatePage/CollectionCreatePage";
 import { useCollectionCreateMutation } from "../mutations";
 import { collectionListUrl, collectionUrl } from "../urls";
 
@@ -14,6 +21,8 @@ export const CollectionCreate: React.FC = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const [createCollection, createCollectionOpts] = useCollectionCreateMutation({
     onCompleted: data => {
@@ -38,20 +47,8 @@ export const CollectionCreate: React.FC = () => {
     }
   });
 
-  return (
-    <>
-      <WindowTitle
-        title={intl.formatMessage({
-          defaultMessage: "Create collection",
-          description: "window title"
-        })}
-      />
-      <CollectionCreatePage
-        errors={createCollectionOpts.data?.collectionCreate.errors || []}
-        onBack={() => navigate(collectionListUrl())}
-        disabled={createCollectionOpts.loading}
-        onSubmit={formData =>
-          createCollection({
+  const handleCreate = async (formData: CollectionCreatePageFormData) => {
+    const result = await createCollection({
       variables: {
         input: {
           backgroundImage: formData.backgroundImage.value,
@@ -65,8 +62,29 @@ export const CollectionCreate: React.FC = () => {
           }
         }
       }
-          })
-        }
+    });
+
+    return result.data?.collectionCreate.collection?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
+
+  return (
+    <>
+      <WindowTitle
+        title={intl.formatMessage({
+          defaultMessage: "Create collection",
+          description: "window title"
+        })}
+      />
+      <CollectionCreatePage
+        errors={createCollectionOpts.data?.collectionCreate.errors || []}
+        onBack={() => navigate(collectionListUrl())}
+        disabled={createCollectionOpts.loading}
+        onSubmit={handleSubmit}
         saveButtonBarState={createCollectionOpts.status}
       />
     </>