Merge pull request #684 from mirumee/metadata/create-views

Add metadata editor to creator views

CHANGELOG.md

@@ -31,6 +31,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add apps and permission groups to navigator - #678 by @dominik-zeglen
 - Add metadata - #670 by @dominik-zeglen
 - Update order history information - #680 by @dominik-zeglen
+- Add metadata editor to creator views - #684 by @dominik-zeglen
 
 ## 2.10.1
 

src/attributes/components/AttributePage/AttributePage.tsx

@@ -82,9 +82,9 @@ const AttributePage: React.FC<AttributePageProps> = ({
           filterableInDashboard: true,
           filterableInStorefront: true,
           inputType: AttributeInputTypeEnum.DROPDOWN,
-          metadata: undefined,
+          metadata: [],
           name: "",
-          privateMetadata: undefined,
+          privateMetadata: [],
           slug: "",
           storefrontSearchPosition: "",
           valueRequired: true,
@@ -119,10 +119,12 @@ const AttributePage: React.FC<AttributePageProps> = ({
         };
 
   const handleSubmit = (data: AttributePageFormData) => {
-    const metadata = isMetadataModified ? data.metadata : undefined;
+    const metadata =
-    const privateMetadata = isPrivateMetadataModified
+      !attribute || isMetadataModified ? data.metadata : undefined;
-      ? data.privateMetadata
+    const privateMetadata =
-      : undefined;
+      !attribute || isPrivateMetadataModified
+        ? data.privateMetadata
+        : undefined;
 
     onSubmit({
       ...data,
@@ -170,12 +172,8 @@ const AttributePage: React.FC<AttributePageProps> = ({
                   onValueReorder={onValueReorder}
                   onValueUpdate={onValueUpdate}
                 />
-                {!!attribute && (
+                <CardSpacer />
-                  <>
+                <Metadata data={data} onChange={changeMetadata} />
-                    <CardSpacer />
-                    <Metadata data={data} onChange={changeMetadata} />
-                  </>
-                )}
               </div>
               <div>
                 <AttributeProperties

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -5,6 +5,7 @@ import { getStringOrPlaceholder } from "@saleor/misc";
 import { ReorderEvent } from "@saleor/types";
 import { ProductErrorCode } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
 import {
   add,
   isSelected,
@@ -12,11 +13,17 @@ import {
   remove,
   updateAtIndex
 } from "@saleor/utils/lists";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { useIntl } from "react-intl";
 import slugify from "slugify";
 
-import AttributePage from "../../components/AttributePage";
+import AttributePage, {
+  AttributePageFormData
+} from "../../components/AttributePage";
 import AttributeValueDeleteDialog from "../../components/AttributeValueDeleteDialog";
 import AttributeValueEditDialog, {
   AttributeValueEditDialogFormData
@@ -72,6 +79,8 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
       }
     }
   });
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const id = params.id ? parseInt(params.id, 0) : undefined;
 
@@ -105,6 +114,31 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
   const handleValueReorder = ({ newIndex, oldIndex }: ReorderEvent) =>
     setValues(move(values[oldIndex], values, areValuesEqual, newIndex));
 
+  const handleCreate = async (data: AttributePageFormData) => {
+    const input = {
+      ...data,
+      metadata: undefined,
+      privateMetadata: undefined,
+      storefrontSearchPosition: parseInt(data.storefrontSearchPosition, 0),
+      values: values.map(value => ({
+        name: value.name
+      }))
+    };
+
+    const result = await attributeCreate({
+      variables: {
+        input
+      }
+    });
+
+    return result.data.attributeCreate?.attribute?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
+
   return (
     <>
       <AttributePage
@@ -113,22 +147,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
         errors={attributeCreateOpts.data?.attributeCreate.errors || []}
         onBack={() => navigate(attributeListUrl())}
         onDelete={undefined}
-        onSubmit={input =>
+        onSubmit={handleSubmit}
-          attributeCreate({
-            variables: {
-              input: {
-                ...input,
-                storefrontSearchPosition: parseInt(
-                  input.storefrontSearchPosition,
-                  0
-                ),
-                values: values.map(value => ({
-                  name: value.name
-                }))
-              }
-            }
-          })
-        }
         onValueAdd={() => openModal("add-value")}
         onValueDelete={id =>
           openModal("remove-value", {

src/categories/components/CategoryCreatePage/CategoryCreatePage.tsx

@@ -3,18 +3,20 @@ import { CardSpacer } from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
+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 { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
 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";
 
 import CategoryDetailsForm from "../../components/CategoryDetailsForm";
 
-interface FormData {
+export interface FormData extends MetadataFormData {
   description: RawDraftContentState;
   name: string;
   seoTitle: string;
@@ -23,7 +25,9 @@ interface FormData {
 
 const initialData: FormData = {
   description: convertToRaw(ContentState.createFromText("")),
+  metadata: [],
   name: "",
+  privateMetadata: [],
   seoDescription: "",
   seoTitle: ""
 };
@@ -44,49 +48,59 @@ export const CategoryCreatePage: React.FC<CategoryCreatePageProps> = ({
   saveButtonBarState
 }) => {
   const intl = useIntl();
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
   return (
     <Form onSubmit={onSubmit} initial={initialData} confirmLeave>
-      {({ data, change, submit, hasChanged }) => (
+      {({ data, change, submit, hasChanged }) => {
-        <Container>
+        const changeMetadata = makeMetadataChangeHandler(change);
-          <AppHeader onBack={onBack}>
+
-            {intl.formatMessage(sectionNames.categories)}
+        return (
-          </AppHeader>
+          <Container>
-          <PageHeader
+            <AppHeader onBack={onBack}>
-            title={intl.formatMessage({
+              {intl.formatMessage(sectionNames.categories)}
-              defaultMessage: "Create New Category",
+            </AppHeader>
-              description: "page header"
+            <PageHeader
-            })}
+              title={intl.formatMessage({
-          />
+                defaultMessage: "Create New Category",
-          <div>
+                description: "page header"
-            <CategoryDetailsForm
-              disabled={disabled}
-              data={data}
-              onChange={change}
-              errors={errors}
-            />
-            <CardSpacer />
-            <SeoForm
-              helperText={intl.formatMessage({
-                defaultMessage:
-                  "Add search engine title and description to make this category easier to find"
               })}
-              title={data.seoTitle}
-              titlePlaceholder={data.name}
-              description={data.seoDescription}
-              descriptionPlaceholder={data.name}
-              loading={disabled}
-              onChange={change}
-              disabled={disabled}
             />
-            <SaveButtonBar
+            <div>
-              onCancel={onBack}
+              <CategoryDetailsForm
-              onSave={submit}
+                disabled={disabled}
-              state={saveButtonBarState}
+                data={data}
-              disabled={disabled || !hasChanged}
+                onChange={change}
-            />
+                errors={errors}
-          </div>
+              />
-        </Container>
+              <CardSpacer />
-      )}
+              <SeoForm
+                helperText={intl.formatMessage({
+                  defaultMessage:
+                    "Add search engine title and description to make this category easier to find"
+                })}
+                title={data.seoTitle}
+                titlePlaceholder={data.name}
+                description={data.seoDescription}
+                descriptionPlaceholder={data.name}
+                loading={disabled}
+                onChange={change}
+                disabled={disabled}
+              />
+              <CardSpacer />
+              <Metadata data={data} onChange={changeMetadata} />
+              <SaveButtonBar
+                onCancel={onBack}
+                onSave={submit}
+                state={saveButtonBarState}
+                disabled={disabled || !hasChanged}
+              />
+            </div>
+          </Container>
+        );
+      }}
     </Form>
   );
 };

src/categories/views/CategoryCreate.tsx

@@ -1,11 +1,15 @@
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+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 { maybe } from "../../misc";
+import CategoryCreatePage, { FormData } from "../components/CategoryCreatePage";
-import CategoryCreatePage from "../components/CategoryCreatePage";
 import { useCategoryCreateMutation } from "../mutations";
 import { CategoryCreate } from "../types/CategoryCreate";
 import { categoryListUrl, categoryUrl } from "../urls";
@@ -20,6 +24,8 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handleSuccess = (data: CategoryCreate) => {
     if (data.categoryCreate.errors.length === 0) {
@@ -37,9 +43,27 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
     onCompleted: handleSuccess
   });
 
-  const errors = maybe(
+  const handleCreate = async (formData: FormData) => {
-    () => createCategoryResult.data.categoryCreate.errors,
+    const result = await createCategory({
-    []
+      variables: {
+        input: {
+          descriptionJson: JSON.stringify(formData.description),
+          name: formData.name,
+          seo: {
+            description: formData.seoDescription,
+            title: formData.seoTitle
+          }
+        },
+        parent: parentId || null
+      }
+    });
+
+    return result.data?.categoryCreate.category?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
   );
 
   return (
@@ -52,26 +76,12 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
       />
       <CategoryCreatePage
         saveButtonBarState={createCategoryResult.status}
-        errors={errors}
+        errors={createCategoryResult.data?.categoryCreate.errors || []}
         disabled={createCategoryResult.loading}
         onBack={() =>
           navigate(parentId ? categoryUrl(parentId) : categoryListUrl())
         }
-        onSubmit={formData =>
+        onSubmit={handleSubmit}
-          createCategory({
-            variables: {
-              input: {
-                descriptionJson: JSON.stringify(formData.description),
-                name: formData.name,
-                seo: {
-                  description: formData.seoDescription,
-                  title: formData.seoTitle
-                }
-              },
-              parent: parentId || null
-            }
-          })
-        }
       />
     </>
   );

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,122 +67,122 @@ 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 }) => {
-        <Container>
+        const changeMetadata = makeMetadataChangeHandler(change);
-          <AppHeader onBack={onBack}>
+
-            {intl.formatMessage(sectionNames.collections)}
+        return (
-          </AppHeader>
+          <Container>
-          <PageHeader
+            <AppHeader onBack={onBack}>
-            title={intl.formatMessage({
+              {intl.formatMessage(sectionNames.collections)}
-              defaultMessage: "Add Collection",
+            </AppHeader>
-              description: "page header"
+            <PageHeader
-            })}
+              title={intl.formatMessage({
-          />
+                defaultMessage: "Add Collection",
-          <Grid>
+                description: "page header"
-            <div>
+              })}
-              <CollectionDetails
+            />
-                data={data}
+            <Grid>
-                disabled={disabled}
-                errors={errors}
-                onChange={change}
-              />
-              <CardSpacer />
-              <CollectionImage
-                image={
-                  data.backgroundImage.url
-                    ? {
-                        __typename: "Image",
-                        alt: data.backgroundImageAlt,
-                        url: data.backgroundImage.url
-                      }
-                    : null
-                }
-                onImageDelete={() =>
-                  change({
-                    target: {
-                      name: "backgroundImage",
-                      value: {
-                        url: null,
-                        value: null
-                      }
-                    }
-                  } as any)
-                }
-                onImageUpload={file =>
-                  change({
-                    target: {
-                      name: "backgroundImage",
-                      value: {
-                        url: URL.createObjectURL(file),
-                        value: file
-                      }
-                    }
-                  } as any)
-                }
-                onChange={change}
-                data={data}
-              />
-              <CardSpacer />
-              <SeoForm
-                description={data.seoDescription}
-                disabled={disabled}
-                descriptionPlaceholder=""
-                helperText={intl.formatMessage({
-                  defaultMessage:
-                    "Add search engine title and description to make this collection easier to find"
-                })}
-                title={data.seoTitle}
-                titlePlaceholder={data.name}
-                onChange={change}
-              />
-            </div>
-            <div>
               <div>
-                <Card>
+                <CollectionDetails
-                  <CardTitle
+                  data={data}
-                    title={intl.formatMessage(commonMessages.availability)}
+                  disabled={disabled}
-                  />
+                  errors={errors}
-                  <CardContent>
+                  onChange={change}
-                    <VisibilityCard
+                />
-                      data={data}
+                <CardSpacer />
-                      errors={errors}
+                <CollectionImage
-                      disabled={disabled}
+                  image={
-                      hiddenMessage={intl.formatMessage(
+                    data.backgroundImage.url
-                        {
+                      ? {
-                          defaultMessage: "will be visible from {date}",
+                          __typename: "Image",
-                          description: "collection"
+                          alt: data.backgroundImageAlt,
-                        },
+                          url: data.backgroundImage.url
-                        {
-                          date: localizeDate(data.publicationDate)
                         }
-                      )}
+                      : null
-                      onChange={change}
+                  }
-                      visibleMessage={intl.formatMessage(
+                  onImageDelete={() =>
-                        {
+                    change({
-                          defaultMessage: "since {date}",
+                      target: {
-                          description: "collection"
+                        name: "backgroundImage",
-                        },
+                        value: {
-                        {
+                          url: null,
-                          date: localizeDate(data.publicationDate)
+                          value: null
                         }
-                      )}
+                      }
-                    />
+                    } as any)
-                  </CardContent>
+                  }
-                </Card>
+                  onImageUpload={file =>
+                    change({
+                      target: {
+                        name: "backgroundImage",
+                        value: {
+                          url: URL.createObjectURL(file),
+                          value: file
+                        }
+                      }
+                    } as any)
+                  }
+                  onChange={change}
+                  data={data}
+                />
+                <CardSpacer />
+                <SeoForm
+                  description={data.seoDescription}
+                  disabled={disabled}
+                  descriptionPlaceholder=""
+                  helperText={intl.formatMessage({
+                    defaultMessage:
+                      "Add search engine title and description to make this collection easier to find"
+                  })}
+                  title={data.seoTitle}
+                  titlePlaceholder={data.name}
+                  onChange={change}
+                />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
-            </div>
+              <div>
-          </Grid>
+                <VisibilityCard
-          <SaveButtonBar
+                  data={data}
-            state={saveButtonBarState}
+                  errors={errors}
-            disabled={disabled || !hasChanged}
+                  disabled={disabled}
-            onCancel={onBack}
+                  hiddenMessage={intl.formatMessage(
-            onSave={submit}
+                    {
-          />
+                      defaultMessage: "will be visible from {date}",
-        </Container>
+                      description: "collection"
-      )}
+                    },
+                    {
+                      date: localizeDate(data.publicationDate)
+                    }
+                  )}
+                  onChange={change}
+                  visibleMessage={intl.formatMessage(
+                    {
+                      defaultMessage: "since {date}",
+                      description: "collection"
+                    },
+                    {
+                      date: localizeDate(data.publicationDate)
+                    }
+                  )}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              state={saveButtonBarState}
+              disabled={disabled || !hasChanged}
+              onCancel={onBack}
+              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,6 +47,31 @@ export const CollectionCreate: React.FC = () => {
     }
   });
 
+  const handleCreate = async (formData: CollectionCreatePageFormData) => {
+    const result = await createCollection({
+      variables: {
+        input: {
+          backgroundImage: formData.backgroundImage.value,
+          backgroundImageAlt: formData.backgroundImageAlt,
+          descriptionJson: JSON.stringify(formData.description),
+          isPublished: formData.isPublished,
+          name: formData.name,
+          seo: {
+            description: formData.seoDescription,
+            title: formData.seoTitle
+          }
+        }
+      }
+    });
+
+    return result.data?.collectionCreate.collection?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
+
   return (
     <>
       <WindowTitle
@@ -50,23 +84,7 @@ export const CollectionCreate: React.FC = () => {
         errors={createCollectionOpts.data?.collectionCreate.errors || []}
         onBack={() => navigate(collectionListUrl())}
         disabled={createCollectionOpts.loading}
-        onSubmit={formData =>
+        onSubmit={handleSubmit}
-          createCollection({
-            variables: {
-              input: {
-                backgroundImage: formData.backgroundImage.value,
-                backgroundImageAlt: formData.backgroundImageAlt,
-                descriptionJson: JSON.stringify(formData.description),
-                isPublished: formData.isPublished,
-                name: formData.name,
-                seo: {
-                  description: formData.seoDescription,
-                  title: formData.seoTitle
-                }
-              }
-            }
-          })
-        }
         saveButtonBarState={createCollectionOpts.status}
       />
     </>

src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx

@@ -4,6 +4,7 @@ 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 { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
@@ -12,6 +13,7 @@ import { sectionNames } from "@saleor/intl";
 import { ProductTypeDetails_taxTypes } from "@saleor/productTypes/types/ProductTypeDetails";
 import { UserError } from "@saleor/types";
 import { WeightUnitsEnum } from "@saleor/types/globalTypes";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -19,7 +21,7 @@ import ProductTypeDetails from "../ProductTypeDetails/ProductTypeDetails";
 import ProductTypeShipping from "../ProductTypeShipping/ProductTypeShipping";
 import ProductTypeTaxes from "../ProductTypeTaxes/ProductTypeTaxes";
 
-export interface ProductTypeForm {
+export interface ProductTypeForm extends MetadataFormData {
   name: string;
   isShippingRequired: boolean;
   taxType: string;
@@ -39,7 +41,9 @@ export interface ProductTypeCreatePageProps {
 
 const formInitialData: ProductTypeForm = {
   isShippingRequired: false,
+  metadata: [],
   name: "",
+  privateMetadata: [],
   taxType: "",
   weight: 0
 };
@@ -68,56 +72,65 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
 }: ProductTypeCreatePageProps) => {
   const intl = useIntl();
   const [taxTypeDisplayName, setTaxTypeDisplayName] = useStateFromProps("");
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   return (
     <Form initial={formInitialData} onSubmit={onSubmit} confirmLeave>
-      {({ change, data, hasChanged, submit }) => (
+      {({ change, data, hasChanged, submit }) => {
-        <Container>
+        const changeMetadata = makeMetadataChangeHandler(change);
-          <AppHeader onBack={onBack}>
+
-            {intl.formatMessage(sectionNames.productTypes)}
+        return (
-          </AppHeader>
+          <Container>
-          <PageHeader title={pageTitle} />
+            <AppHeader onBack={onBack}>
-          <Grid>
+              {intl.formatMessage(sectionNames.productTypes)}
-            <div>
+            </AppHeader>
-              <ProductTypeDetails
+            <PageHeader title={pageTitle} />
-                data={data}
+            <Grid>
-                disabled={disabled}
+              <div>
-                errors={errors}
+                <ProductTypeDetails
-                onChange={change}
+                  data={data}
-              />
+                  disabled={disabled}
-              <CardSpacer />
+                  errors={errors}
-              <ProductTypeTaxes
+                  onChange={change}
-                disabled={disabled}
+                />
-                data={data}
+                <CardSpacer />
-                taxTypes={taxTypes}
+                <ProductTypeTaxes
-                taxTypeDisplayName={taxTypeDisplayName}
+                  disabled={disabled}
-                onChange={event =>
+                  data={data}
-                  handleTaxTypeChange(
+                  taxTypes={taxTypes}
-                    event,
+                  taxTypeDisplayName={taxTypeDisplayName}
-                    taxTypes,
+                  onChange={event =>
-                    change,
+                    handleTaxTypeChange(
-                    setTaxTypeDisplayName
+                      event,
-                  )
+                      taxTypes,
-                }
+                      change,
-              />
+                      setTaxTypeDisplayName
-            </div>
+                    )
-            <div>
+                  }
-              <ProductTypeShipping
+                />
-                disabled={disabled}
+                <CardSpacer />
-                data={data}
+                <Metadata data={data} onChange={changeMetadata} />
-                weightUnit={defaultWeightUnit}
+              </div>
-                onChange={change}
+              <div>
-              />
+                <ProductTypeShipping
-            </div>
+                  disabled={disabled}
-          </Grid>
+                  data={data}
-          <SaveButtonBar
+                  weightUnit={defaultWeightUnit}
-            onCancel={onBack}
+                  onChange={change}
-            onSave={submit}
+                />
-            disabled={disabled || !hasChanged}
+              </div>
-            state={saveButtonBarState}
+            </Grid>
-          />
+            <SaveButtonBar
-        </Container>
+              onCancel={onBack}
-      )}
+              onSave={submit}
+              disabled={disabled || !hasChanged}
+              state={saveButtonBarState}
+            />
+          </Container>
+        );
+      }}
     </Form>
   );
 };

src/productTypes/views/ProductTypeCreate.tsx

@@ -1,6 +1,11 @@
 import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -17,6 +22,8 @@ export const ProductTypeCreate: React.FC = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handleCreateSuccess = (updateData: ProductTypeCreateMutation) => {
     if (updateData.productTypeCreate.errors.length === 0) {
@@ -32,8 +39,8 @@ export const ProductTypeCreate: React.FC = () => {
   return (
     <TypedProductTypeCreateMutation onCompleted={handleCreateSuccess}>
       {(createProductType, createProductTypeOpts) => {
-        const handleCreate = (formData: ProductTypeForm) =>
+        const handleCreate = async (formData: ProductTypeForm) => {
-          createProductType({
+          const result = await createProductType({
             variables: {
               input: {
                 hasVariants: false,
@@ -44,6 +51,15 @@ export const ProductTypeCreate: React.FC = () => {
               }
             }
           });
+
+          return result.data?.productTypeCreate.productType?.id || null;
+        };
+        const handleSubmit = createMetadataCreateHandler(
+          handleCreate,
+          updateMetadata,
+          updatePrivateMetadata
+        );
+
         return (
           <TypedProductTypeCreateDataQuery displayLoader>
             {({ data, loading }) => (
@@ -58,19 +74,18 @@ export const ProductTypeCreate: React.FC = () => {
                 <ProductTypeCreatePage
                   defaultWeightUnit={maybe(() => data.shop.defaultWeightUnit)}
                   disabled={loading}
-                  errors={maybe(
+                  errors={
-                    () => createProductTypeOpts.data.productTypeCreate.errors,
+                    createProductTypeOpts.data?.productTypeCreate.errors || []
-                    []
+                  }
-                  )}
                   pageTitle={intl.formatMessage({
                     defaultMessage: "Create Product Type",
                     description: "header",
                     id: "productTypeCreatePageHeader"
                   })}
                   saveButtonBarState={createProductTypeOpts.status}
-                  taxTypes={maybe(() => data.taxTypes, [])}
+                  taxTypes={data?.taxTypes || []}
                   onBack={() => navigate(productTypeListUrl())}
-                  onSubmit={handleCreate}
+                  onSubmit={handleSubmit}
                 />
               </>
             )}

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -4,6 +4,7 @@ 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 { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
@@ -25,6 +26,7 @@ import { SearchProductTypes_search_edges_node_productAttributes } from "@saleor/
 import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -45,7 +47,7 @@ import ProductPricing from "../ProductPricing";
 import ProductShipping from "../ProductShipping/ProductShipping";
 import ProductStocks, { ProductStockInput } from "../ProductStocks";
 
-interface FormData {
+interface FormData extends MetadataFormData {
   basePrice: number;
   publicationDate: string;
   category: string;
@@ -133,6 +135,11 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   const initialDescription = React.useRef(
     convertToRaw(ContentState.createFromText(""))
   );
+
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
   const initialData: FormData = {
     basePrice: 0,
     category: "",
@@ -140,7 +147,9 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
     collections: [],
     description: {} as any,
     isPublished: false,
+    metadata: [],
     name: "",
+    privateMetadata: [],
     productType: "",
     publicationDate: "",
     seoDescription: "",
@@ -170,9 +179,9 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
 
   const handleSubmit = (data: FormData) =>
     onSubmit({
+      ...data,
       attributes,
-      stocks,
+      stocks
-      ...data
     });
 
   return (
@@ -212,6 +221,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
           productTypeChoiceList
         );
 
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
           <Container>
             <AppHeader onBack={onBack}>
@@ -296,6 +307,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                   loading={disabled}
                   onChange={change}
                 />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
               <div>
                 <ProductOrganization

src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx

@@ -4,6 +4,7 @@ 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 { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
@@ -13,6 +14,7 @@ import useFormset, {
 } from "@saleor/hooks/useFormset";
 import { getVariantAttributeInputFromProduct } from "@saleor/products/utils/data";
 import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -26,7 +28,7 @@ import ProductVariantAttributes, {
 import ProductVariantNavigation from "../ProductVariantNavigation";
 import ProductVariantPrice from "../ProductVariantPrice";
 
-interface ProductVariantCreatePageFormData {
+interface ProductVariantCreatePageFormData extends MetadataFormData {
   costPrice: string;
   images: string[];
   price: string;
@@ -83,11 +85,16 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
     data: stocks,
     remove: removeStock
   } = useFormset<null, string>([]);
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   const initialForm: ProductVariantCreatePageFormData = {
     costPrice: "",
     images: maybe(() => product.images.map(image => image.id)),
+    metadata: [],
     price: "",
+    privateMetadata: [],
     quantity: "0",
     sku: "",
     trackInventory: true,
@@ -108,6 +115,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
           changeAttributeData(id, value);
           triggerChange();
         };
+        const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
           <Container>
@@ -176,6 +184,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                     removeStock(id);
                   }}
                 />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
             </Grid>
             <SaveButtonBar

src/products/views/ProductCreate.tsx

@@ -6,6 +6,11 @@ import useShop from "@saleor/hooks/useShop";
 import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -49,6 +54,8 @@ export const ProductCreateView: React.FC = () => {
       first: 50
     }
   });
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const handleBack = () => navigate(productListUrl());
 
@@ -66,8 +73,8 @@ export const ProductCreateView: React.FC = () => {
     }
   });
 
-  const handleSubmit = (formData: ProductCreatePageSubmitData) => {
+  const handleCreate = async (formData: ProductCreatePageSubmitData) => {
-    productCreate({
+    const result = await productCreate({
       variables: {
         attributes: formData.attributes.map(attribute => ({
           id: attribute.id,
@@ -96,7 +103,14 @@ export const ProductCreateView: React.FC = () => {
         weight: weight(formData.weight)
       }
     });
+
+    return result.data.productCreate?.product?.id || null;
   };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
 
   return (
     <>

src/products/views/ProductVariantCreate.tsx

@@ -4,6 +4,11 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
+import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -55,6 +60,8 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
       }
     }
   });
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
 
   const product = data?.product;
 
@@ -63,8 +70,8 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
   }
 
   const handleBack = () => navigate(productUrl(productId));
-  const handleSubmit = (formData: ProductVariantCreatePageSubmitData) =>
+  const handleCreate = async (formData: ProductVariantCreatePageSubmitData) => {
-    variantCreate({
+    const result = await variantCreate({
       variables: {
         input: {
           attributes: formData.attributes
@@ -86,6 +93,14 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
         }
       }
     });
+
+    return result.data.productVariantCreate?.productVariant?.id || null;
+  };
+  const handleSubmit = createMetadataCreateHandler(
+    handleCreate,
+    updateMetadata,
+    updatePrivateMetadata
+  );
   const handleVariantClick = (id: string) =>
     navigate(productVariantEditUrl(productId, id));
 

src/utils/handlers/metadataCreateHandler.ts

@@ -0,0 +1,68 @@
+import { MetadataFormData } from "@saleor/components/Metadata/types";
+import { MutationFunction } from "react-apollo";
+
+import {
+  UpdateMetadata,
+  UpdateMetadataVariables
+} from "../metadata/types/UpdateMetadata";
+import {
+  UpdatePrivateMetadata,
+  UpdatePrivateMetadataVariables
+} from "../metadata/types/UpdatePrivateMetadata";
+
+function createMetadataCreateHandler<T extends MetadataFormData>(
+  create: (data: T) => Promise<string>,
+  setMetadata: MutationFunction<UpdateMetadata, UpdateMetadataVariables>,
+  setPrivateMetadata: MutationFunction<
+    UpdatePrivateMetadata,
+    UpdatePrivateMetadataVariables
+  >
+) {
+  return async (data: T) => {
+    const id = await create(data);
+
+    if (id === null) {
+      return null;
+    }
+
+    if (data.metadata.length > 0) {
+      const updateMetaResult = await setMetadata({
+        variables: {
+          id,
+          input: data.metadata,
+          keysToDelete: []
+        }
+      });
+      const updateMetaErrors = [
+        ...(updateMetaResult.data.deleteMetadata.errors || []),
+        ...(updateMetaResult.data.updateMetadata.errors || [])
+      ];
+
+      if (updateMetaErrors.length > 0) {
+        return updateMetaErrors;
+      }
+    }
+    if (data.privateMetadata.length > 0) {
+      const updatePrivateMetaResult = await setPrivateMetadata({
+        variables: {
+          id,
+          input: data.privateMetadata,
+          keysToDelete: []
+        }
+      });
+
+      const updatePrivateMetaErrors = [
+        ...(updatePrivateMetaResult.data.deletePrivateMetadata.errors || []),
+        ...(updatePrivateMetaResult.data.updatePrivateMetadata.errors || [])
+      ];
+
+      if (updatePrivateMetaErrors.length > 0) {
+        return updatePrivateMetaErrors;
+      }
+    }
+
+    return [];
+  };
+}
+
+export default createMetadataCreateHandler;