Add metadata editor to product type creator

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}
                 />
               </>
             )}