Saleor 1531 add metadata UI for shipping zones and methods (#895)

* Add public and private metadata to shipping zones

* Update initial form

* Fix types

* Update types for metadata in shipping method

* Filter typename of metadata

* Fix price shipping method metadata

* Fetch metadata in weight rate update

* Update storybook

src/fragments/shipping.ts

@@ -1,8 +1,12 @@
 import { fragmentMoney } from "@saleor/fragments/products";
 import gql from "graphql-tag";
 
+import { metadataFragment } from "./metadata";
+
 export const shippingZoneFragment = gql`
+  ${metadataFragment}
   fragment ShippingZoneFragment on ShippingZone {
+    ...MetadataFragment
     id
     countries {
       code
@@ -23,10 +27,12 @@ export const shippingMethodWithZipCodesFragment = gql`
   }
 `;
 export const shippingMethodFragment = gql`
+  ${metadataFragment}
   ${fragmentMoney}
   ${shippingMethodWithZipCodesFragment}
   fragment ShippingMethodFragment on ShippingMethod {
     ...ShippingMethodWithZipCodesFragment
+    ...MetadataFragment
     minimumOrderWeight {
       unit
       value

src/fragments/types/ShippingMethodFragment.ts

@@ -15,6 +15,18 @@ export interface ShippingMethodFragment_zipCodeRules {
   end: string | null;
 }
 
+export interface ShippingMethodFragment_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingMethodFragment_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingMethodFragment_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -65,6 +77,8 @@ export interface ShippingMethodFragment {
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (ShippingMethodFragment_zipCodeRules | null)[] | null;
+  metadata: (ShippingMethodFragment_metadata | null)[];
+  privateMetadata: (ShippingMethodFragment_privateMetadata | null)[];
   minimumOrderWeight: ShippingMethodFragment_minimumOrderWeight | null;
   maximumOrderWeight: ShippingMethodFragment_maximumOrderWeight | null;
   name: string;

src/fragments/types/ShippingMethodWithExcludedProductsFragment.ts

@@ -15,6 +15,18 @@ export interface ShippingMethodWithExcludedProductsFragment_zipCodeRules {
   end: string | null;
 }
 
+export interface ShippingMethodWithExcludedProductsFragment_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingMethodWithExcludedProductsFragment_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -96,6 +108,8 @@ export interface ShippingMethodWithExcludedProductsFragment {
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (ShippingMethodWithExcludedProductsFragment_zipCodeRules | null)[] | null;
+  metadata: (ShippingMethodWithExcludedProductsFragment_metadata | null)[];
+  privateMetadata: (ShippingMethodWithExcludedProductsFragment_privateMetadata | null)[];
   minimumOrderWeight: ShippingMethodWithExcludedProductsFragment_minimumOrderWeight | null;
   maximumOrderWeight: ShippingMethodWithExcludedProductsFragment_maximumOrderWeight | null;
   name: string;

src/fragments/types/ShippingZoneDetailsFragment.ts

@@ -8,6 +8,18 @@ import { WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTyp
 // GraphQL fragment: ShippingZoneDetailsFragment
 // ====================================================
 
+export interface ShippingZoneDetailsFragment_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingZoneDetailsFragment_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingZoneDetailsFragment_countries {
   __typename: "CountryDisplay";
   code: string;
@@ -21,6 +33,18 @@ export interface ShippingZoneDetailsFragment_shippingMethods_zipCodeRules {
   end: string | null;
 }
 
+export interface ShippingZoneDetailsFragment_shippingMethods_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingZoneDetailsFragment_shippingMethods_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingZoneDetailsFragment_shippingMethods_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -71,6 +95,8 @@ export interface ShippingZoneDetailsFragment_shippingMethods {
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (ShippingZoneDetailsFragment_shippingMethods_zipCodeRules | null)[] | null;
+  metadata: (ShippingZoneDetailsFragment_shippingMethods_metadata | null)[];
+  privateMetadata: (ShippingZoneDetailsFragment_shippingMethods_privateMetadata | null)[];
   minimumOrderWeight: ShippingZoneDetailsFragment_shippingMethods_minimumOrderWeight | null;
   maximumOrderWeight: ShippingZoneDetailsFragment_shippingMethods_maximumOrderWeight | null;
   name: string;
@@ -86,6 +112,8 @@ export interface ShippingZoneDetailsFragment_warehouses {
 
 export interface ShippingZoneDetailsFragment {
   __typename: "ShippingZone";
+  metadata: (ShippingZoneDetailsFragment_metadata | null)[];
+  privateMetadata: (ShippingZoneDetailsFragment_privateMetadata | null)[];
   id: string;
   countries: (ShippingZoneDetailsFragment_countries | null)[] | null;
   name: string;

src/fragments/types/ShippingZoneFragment.ts

@@ -6,6 +6,18 @@
 // GraphQL fragment: ShippingZoneFragment
 // ====================================================
 
+export interface ShippingZoneFragment_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingZoneFragment_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingZoneFragment_countries {
   __typename: "CountryDisplay";
   code: string;
@@ -14,6 +26,8 @@ export interface ShippingZoneFragment_countries {
 
 export interface ShippingZoneFragment {
   __typename: "ShippingZone";
+  metadata: (ShippingZoneFragment_metadata | null)[];
+  privateMetadata: (ShippingZoneFragment_privateMetadata | null)[];
   id: string;
   countries: (ShippingZoneFragment_countries | null)[] | null;
   name: string;

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -254,6 +254,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     deleteProductImage({ variables: { id } });
   const handleImageEdit = (imageId: string) => () =>
     navigate(productImageUrl(id, imageId));
+
   const handleSubmit = createMetadataUpdateHandler(
     product,
     createUpdateHandler(

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -5,6 +5,8 @@ import Container from "@saleor/components/Container";
 import CountryList from "@saleor/components/CountryList";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import Metadata from "@saleor/components/Metadata/Metadata";
+import { MetadataFormData } from "@saleor/components/Metadata/types";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
@@ -17,6 +19,8 @@ import {
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
+import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -27,7 +31,7 @@ import ShippingZoneInfo from "../ShippingZoneInfo";
 import ShippingZoneRates from "../ShippingZoneRates";
 import ShippingZoneWarehouses from "../ShippingZoneWarehouses";
 
-export interface FormData {
+export interface FormData extends MetadataFormData {
   name: string;
   warehouses: string[];
 }
@@ -90,7 +94,9 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
 
   const initialForm: FormData = {
     name: shippingZone?.name || "",
-    warehouses: shippingZone?.warehouses?.map(warehouse => warehouse.id) || []
+    warehouses: shippingZone?.warehouses?.map(warehouse => warehouse.id) || [],
+    metadata: shippingZone?.metadata.map(mapMetadataItemToInput),
+    privateMetadata: shippingZone?.privateMetadata.map(mapMetadataItemToInput)
   };
   const [warehouseDisplayValues, setWarehouseDisplayValues] = useStateFromProps<
     MultiAutocompleteChoiceType[]
@@ -103,6 +109,10 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
 
   const warehouseChoices = warehouses.map(warehouseToChoice);
 
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, hasChanged, submit, toggleValue }) => {
@@ -113,6 +123,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
           warehouseChoices
         );
 
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
           <Container>
             <AppHeader onBack={onBack}>
@@ -174,6 +186,8 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                   variant="weight"
                   selectedChannelId={selectedChannelId}
                 />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
               <div>
                 <ShippingZoneWarehouses

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx

@@ -6,6 +6,8 @@ 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 from "@saleor/components/Metadata/Metadata";
+import { MetadataFormData } from "@saleor/components/Metadata/types";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ShippingChannelsErrorFragment } from "@saleor/fragments/types/ShippingChannelsErrorFragment";
@@ -20,6 +22,8 @@ import { createChannelsChangeHandler } from "@saleor/shipping/handlers";
 import { ShippingZone_shippingZone_shippingMethods } from "@saleor/shipping/types/ShippingZone";
 import { ListActions, ListProps } from "@saleor/types";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -27,7 +31,7 @@ import ShippingZoneZipCodes, {
   ZipCodeInclusion
 } from "../ShippingZoneZipCodes";
 
-export interface FormData {
+export interface FormData extends MetadataFormData {
   channelListings: ChannelShippingData[];
   includeZipCodes: ZipCodeInclusion;
   name: string;
@@ -89,9 +93,15 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
     minValue: rate?.minimumOrderWeight?.value.toString() || "",
     name: rate?.name || "",
     noLimits: false,
-    type: rate?.type || null
+    type: rate?.type || null,
+    metadata: rate?.metadata.map(mapMetadataItemToInput),
+    privateMetadata: rate?.privateMetadata.map(mapMetadataItemToInput)
   };
 
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
+
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, hasChanged, submit, triggerChange }) => {
@@ -104,6 +114,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
           validatePrice(channel.price)
         );
 
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
           <Container>
             <AppHeader onBack={onBack}>
@@ -164,6 +176,8 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
                   disabled={disabled}
                   {...listProps}
                 />
+                <CardSpacer />
+                <Metadata data={data} onChange={changeMetadata} />
               </div>
               <div>
                 <ChannelsAvailability

src/shipping/fixtures.ts

@@ -265,7 +265,9 @@ export const shippingZones: ShippingZoneFragment[] = [
       }
     ],
     id: "U2hpcHBpbmdab25lOjE=",
-    name: "Europe"
+    name: "Europe",
+    metadata: [],
+    privateMetadata: []
   },
   {
     __typename: "ShippingZone",
@@ -417,7 +419,9 @@ export const shippingZones: ShippingZoneFragment[] = [
       }
     ],
     id: "U2hpcHBpbmdab25lOjI=",
-    name: "Oceania"
+    name: "Oceania",
+    metadata: [],
+    privateMetadata: []
   },
   {
     __typename: "ShippingZone",
@@ -680,7 +684,9 @@ export const shippingZones: ShippingZoneFragment[] = [
       }
     ],
     id: "U2hpcHBpbmdab25lOjM=",
-    name: "Asia"
+    name: "Asia",
+    metadata: [],
+    privateMetadata: []
   },
   {
     __typename: "ShippingZone",
@@ -973,7 +979,9 @@ export const shippingZones: ShippingZoneFragment[] = [
       }
     ],
     id: "U2hpcHBpbmdab25lOjQ=",
-    name: "Americas"
+    name: "Americas",
+    metadata: [],
+    privateMetadata: []
   },
   {
     __typename: "ShippingZone",
@@ -1282,12 +1290,16 @@ export const shippingZones: ShippingZoneFragment[] = [
       }
     ],
     id: "U2hpcHBpbmdab25lOjU=",
-    name: "Africa"
+    name: "Africa",
+    metadata: [],
+    privateMetadata: []
   }
 ];
 
 export const shippingZone: ShippingZone_shippingZone = {
   __typename: "ShippingZone",
+  metadata: [],
+  privateMetadata: [],
   countries: [
     {
       __typename: "CountryDisplay",
@@ -1551,6 +1563,8 @@ export const shippingZone: ShippingZone_shippingZone = {
   shippingMethods: [
     {
       __typename: "ShippingMethod",
+      metadata: [],
+      privateMetadata: [],
       channelListings: [
         {
           __typename: "ShippingMethodChannelListing",
@@ -1638,6 +1652,8 @@ export const shippingZone: ShippingZone_shippingZone = {
     },
     {
       __typename: "ShippingMethod",
+      metadata: [],
+      privateMetadata: [],
       channelListings: [],
       excludedProducts: {
         __typename: "ProductCountableConnection",
@@ -1695,6 +1711,8 @@ export const shippingZone: ShippingZone_shippingZone = {
     },
     {
       __typename: "ShippingMethod",
+      metadata: [],
+      privateMetadata: [],
       channelListings: [],
       excludedProducts: {
         __typename: "ProductCountableConnection",
@@ -1773,6 +1791,8 @@ export const shippingZone: ShippingZone_shippingZone = {
       },
       name: "DHL",
       type: ShippingMethodTypeEnum.PRICE,
+      metadata: [],
+      privateMetadata: [],
       zipCodeRules: [
         {
           __typename: "ShippingMethodZipCodeRule",

src/shipping/types/CreateShippingRate.ts

@@ -14,6 +14,18 @@ export interface CreateShippingRate_shippingPriceCreate_errors {
   field: string | null;
 }
 
+export interface CreateShippingRate_shippingPriceCreate_shippingZone_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface CreateShippingRate_shippingPriceCreate_shippingZone_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface CreateShippingRate_shippingPriceCreate_shippingZone_countries {
   __typename: "CountryDisplay";
   code: string;
@@ -27,6 +39,18 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMet
   end: string | null;
 }
 
+export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -77,6 +101,8 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone_shippingMet
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_zipCodeRules | null)[] | null;
+  metadata: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_metadata | null)[];
+  privateMetadata: (CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_privateMetadata | null)[];
   minimumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_minimumOrderWeight | null;
   maximumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingZone_shippingMethods_maximumOrderWeight | null;
   name: string;
@@ -92,6 +118,8 @@ export interface CreateShippingRate_shippingPriceCreate_shippingZone_warehouses
 
 export interface CreateShippingRate_shippingPriceCreate_shippingZone {
   __typename: "ShippingZone";
+  metadata: (CreateShippingRate_shippingPriceCreate_shippingZone_metadata | null)[];
+  privateMetadata: (CreateShippingRate_shippingPriceCreate_shippingZone_privateMetadata | null)[];
   id: string;
   countries: (CreateShippingRate_shippingPriceCreate_shippingZone_countries | null)[] | null;
   name: string;
@@ -107,6 +135,18 @@ export interface CreateShippingRate_shippingPriceCreate_shippingMethod_zipCodeRu
   end: string | null;
 }
 
+export interface CreateShippingRate_shippingPriceCreate_shippingMethod_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface CreateShippingRate_shippingPriceCreate_shippingMethod_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface CreateShippingRate_shippingPriceCreate_shippingMethod_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -157,6 +197,8 @@ export interface CreateShippingRate_shippingPriceCreate_shippingMethod {
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (CreateShippingRate_shippingPriceCreate_shippingMethod_zipCodeRules | null)[] | null;
+  metadata: (CreateShippingRate_shippingPriceCreate_shippingMethod_metadata | null)[];
+  privateMetadata: (CreateShippingRate_shippingPriceCreate_shippingMethod_privateMetadata | null)[];
   minimumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingMethod_minimumOrderWeight | null;
   maximumOrderWeight: CreateShippingRate_shippingPriceCreate_shippingMethod_maximumOrderWeight | null;
   name: string;

src/shipping/types/DeleteShippingRate.ts

@@ -14,6 +14,18 @@ export interface DeleteShippingRate_shippingPriceDelete_errors {
   field: string | null;
 }
 
+export interface DeleteShippingRate_shippingPriceDelete_shippingZone_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface DeleteShippingRate_shippingPriceDelete_shippingZone_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface DeleteShippingRate_shippingPriceDelete_shippingZone_countries {
   __typename: "CountryDisplay";
   code: string;
@@ -27,6 +39,18 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMet
   end: string | null;
 }
 
+export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -77,6 +101,8 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMet
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_zipCodeRules | null)[] | null;
+  metadata: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_metadata | null)[];
+  privateMetadata: (DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_privateMetadata | null)[];
   minimumOrderWeight: DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_minimumOrderWeight | null;
   maximumOrderWeight: DeleteShippingRate_shippingPriceDelete_shippingZone_shippingMethods_maximumOrderWeight | null;
   name: string;
@@ -92,6 +118,8 @@ export interface DeleteShippingRate_shippingPriceDelete_shippingZone_warehouses
 
 export interface DeleteShippingRate_shippingPriceDelete_shippingZone {
   __typename: "ShippingZone";
+  metadata: (DeleteShippingRate_shippingPriceDelete_shippingZone_metadata | null)[];
+  privateMetadata: (DeleteShippingRate_shippingPriceDelete_shippingZone_privateMetadata | null)[];
   id: string;
   countries: (DeleteShippingRate_shippingPriceDelete_shippingZone_countries | null)[] | null;
   name: string;

src/shipping/types/ShippingMethodChannelListingUpdate.ts

@@ -15,6 +15,18 @@ export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListing
   end: string | null;
 }
 
+export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -65,6 +77,8 @@ export interface ShippingMethodChannelListingUpdate_shippingMethodChannelListing
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_zipCodeRules | null)[] | null;
+  metadata: (ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_metadata | null)[];
+  privateMetadata: (ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_privateMetadata | null)[];
   minimumOrderWeight: ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_minimumOrderWeight | null;
   maximumOrderWeight: ShippingMethodChannelListingUpdate_shippingMethodChannelListingUpdate_shippingMethod_maximumOrderWeight | null;
   name: string;

src/shipping/types/ShippingZone.ts

@@ -8,6 +8,18 @@ import { WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTyp
 // GraphQL query operation: ShippingZone
 // ====================================================
 
+export interface ShippingZone_shippingZone_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingZone_shippingZone_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingZone_shippingZone_countries {
   __typename: "CountryDisplay";
   code: string;
@@ -21,6 +33,18 @@ export interface ShippingZone_shippingZone_shippingMethods_zipCodeRules {
   end: string | null;
 }
 
+export interface ShippingZone_shippingZone_shippingMethods_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingZone_shippingZone_shippingMethods_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingZone_shippingZone_shippingMethods_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -102,6 +126,8 @@ export interface ShippingZone_shippingZone_shippingMethods {
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (ShippingZone_shippingZone_shippingMethods_zipCodeRules | null)[] | null;
+  metadata: (ShippingZone_shippingZone_shippingMethods_metadata | null)[];
+  privateMetadata: (ShippingZone_shippingZone_shippingMethods_privateMetadata | null)[];
   minimumOrderWeight: ShippingZone_shippingZone_shippingMethods_minimumOrderWeight | null;
   maximumOrderWeight: ShippingZone_shippingZone_shippingMethods_maximumOrderWeight | null;
   name: string;
@@ -118,6 +144,8 @@ export interface ShippingZone_shippingZone_warehouses {
 
 export interface ShippingZone_shippingZone {
   __typename: "ShippingZone";
+  metadata: (ShippingZone_shippingZone_metadata | null)[];
+  privateMetadata: (ShippingZone_shippingZone_privateMetadata | null)[];
   id: string;
   countries: (ShippingZone_shippingZone_countries | null)[] | null;
   name: string;

src/shipping/types/ShippingZones.ts

@@ -6,6 +6,18 @@
 // GraphQL query operation: ShippingZones
 // ====================================================
 
+export interface ShippingZones_shippingZones_edges_node_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ShippingZones_shippingZones_edges_node_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface ShippingZones_shippingZones_edges_node_countries {
   __typename: "CountryDisplay";
   code: string;
@@ -14,6 +26,8 @@ export interface ShippingZones_shippingZones_edges_node_countries {
 
 export interface ShippingZones_shippingZones_edges_node {
   __typename: "ShippingZone";
+  metadata: (ShippingZones_shippingZones_edges_node_metadata | null)[];
+  privateMetadata: (ShippingZones_shippingZones_edges_node_privateMetadata | null)[];
   id: string;
   countries: (ShippingZones_shippingZones_edges_node_countries | null)[] | null;
   name: string;

src/shipping/types/UpdateShippingRate.ts

@@ -21,6 +21,18 @@ export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_zipCodeRu
   end: string | null;
 }
 
+export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
 export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod_minimumOrderWeight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
@@ -71,6 +83,8 @@ export interface UpdateShippingRate_shippingPriceUpdate_shippingMethod {
   __typename: "ShippingMethod";
   id: string;
   zipCodeRules: (UpdateShippingRate_shippingPriceUpdate_shippingMethod_zipCodeRules | null)[] | null;
+  metadata: (UpdateShippingRate_shippingPriceUpdate_shippingMethod_metadata | null)[];
+  privateMetadata: (UpdateShippingRate_shippingPriceUpdate_shippingMethod_privateMetadata | null)[];
   minimumOrderWeight: UpdateShippingRate_shippingPriceUpdate_shippingMethod_minimumOrderWeight | null;
   maximumOrderWeight: UpdateShippingRate_shippingPriceUpdate_shippingMethod_maximumOrderWeight | null;
   name: string;

src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx

@@ -48,6 +48,11 @@ import {
 } from "@saleor/shipping/urls";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -201,7 +206,10 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
     }
   });
 
-  const handleSubmit = async (formData: FormData) => {
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
+
+  const updateData = async (formData: FormData): Promise<unknown[]> => {
     const response = await updateShippingRate({
       variables: getUpdateShippingPriceRateVariables(formData, id, rateId)
     });
@@ -217,8 +225,17 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
         )
       });
     }
+
+    return errors;
   };
 
+  const handleSubmit = createMetadataUpdateHandler(
+    rate,
+    updateData,
+    variables => updateMetadata({ variables }),
+    variables => updatePrivateMetadata({ variables })
+  );
+
   const handleProductAssign = (ids: string[]) =>
     assignProduct({
       variables: { id: rateId, input: { products: ids } }

src/shipping/views/ShippingZoneDetails/index.tsx

@@ -19,6 +19,11 @@ import {
   useShippingZoneUpdate
 } from "@saleor/shipping/mutations";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import { useWarehouseCreate } from "@saleor/warehouses/mutations";
 import { diff } from "fast-array-diff";
 import React from "react";
@@ -125,7 +130,10 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
     }
   });
 
-  const handleSubmit = async (submitData: FormData) => {
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
+
+  const updateData = async (submitData: FormData) => {
     const warehouseDiff = diff(
       data.shippingZone.warehouses.map(warehouse => warehouse.id),
       submitData.warehouses
@@ -145,6 +153,13 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
     return result.data.shippingZoneUpdate.errors;
   };
 
+  const handleSubmit = createMetadataUpdateHandler(
+    data?.shippingZone,
+    updateData,
+    variables => updateMetadata({ variables }),
+    variables => updatePrivateMetadata({ variables })
+  );
+
   if (data?.shippingZone === null) {
     return <NotFoundPage onBack={() => navigate(shippingZonesListUrl())} />;
   }

src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx

@@ -48,6 +48,11 @@ import {
 } from "@saleor/shipping/urls";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
+import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
+import {
+  useMetadataUpdate,
+  usePrivateMetadataUpdate
+} from "@saleor/utils/metadata/updateMetadata";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -203,7 +208,10 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
     }
   });
 
-  const handleSubmit = async (data: FormData) => {
+  const [updateMetadata] = useMetadataUpdate({});
+  const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
+
+  const updateData = async (data: FormData) => {
     const response = await updateShippingRate({
       variables: getUpdateShippingWeightRateVariables(data, id, rateId)
     });
@@ -219,8 +227,17 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
         )
       });
     }
+
+    return errors;
   };
 
+  const handleSubmit = createMetadataUpdateHandler(
+    rate,
+    updateData,
+    variables => updateMetadata({ variables }),
+    variables => updatePrivateMetadata({ variables })
+  );
+
   const handleProductAssign = (ids: string[]) =>
     assignProduct({
       variables: { id: rateId, input: { products: ids } }

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -200626,6 +200626,128 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no private metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -201682,6 +201804,128 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no private metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -202602,6 +202846,80 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -203925,6 +204243,128 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no private metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -205065,6 +205505,128 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no private metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -205758,6 +206320,128 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no private metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -206553,6 +207237,128 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id Metadata-content-id"
+            />
+            <div
+              class="Metadata-emptyContainer-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                There is no private metadata created for this element.
+              </div>
+              <div
+                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+              >
+                Use the button below to add new metadata field
+              </div>
+            </div>
+            <div
+              class="MuiCardActions-root-id MuiCardActions-spacing-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test="addField"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiButton-label-id"
+                >
+                  Add Field
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -207242,6 +208048,80 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="false"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="metadataEditor"
+            data-test-expanded="true"
+            data-test-is-private="true"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Private Metadata
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <span
+                class="Skeleton-skeleton-id"
+              >
+                ‌
+              </span>
+            </div>
+          </div>
         </div>
         <div>
           <div