feat(admin-ui, medusa): admin UI metadata (#3644)

packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/edit-modal.tsx

@@ -2,6 +2,10 @@ import { ShippingOption } from "@medusajs/medusa"
 import { useAdminUpdateShippingOption } from "medusa-react"
 import { useEffect } from "react"
 import { useForm } from "react-hook-form"
+import {
+  getMetadataFormValues,
+  getSubmittableMetadata,
+} from "../../../../../components/forms/general/metadata-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
 import useNotification from "../../../../../hooks/use-notification"
@@ -32,8 +36,10 @@ const EditModal = ({ open, onClose, option }: Props) => {
   } = form
 
   useEffect(() => {
-    reset(getDefaultValues(option))
-  }, [option])
+    if (open) {
+      reset(getDefaultValues(option))
+    }
+  }, [option, reset, open])
 
   const closeAndReset = () => {
     reset(getDefaultValues(option))
@@ -48,6 +54,7 @@ const EditModal = ({ open, onClose, option }: Props) => {
         requirements: getRequirementsData(data),
         admin_only: !data.store_option,
         amount: data.amount!,
+        metadata: getSubmittableMetadata(data.metadata),
       },
       {
         onSuccess: () => {
@@ -72,7 +79,7 @@ const EditModal = ({ open, onClose, option }: Props) => {
             <div>
               <p className="inter-base-semibold">Fulfillment Method</p>
               <p className="inter-base-regular text-grey-50">
-                {option.data.id} via {option.provider_id}
+                {option.data.id as string} via {option.provider_id}
               </p>
             </div>
             <div className="bg-grey-20 my-xlarge h-px w-full" />
@@ -133,6 +140,7 @@ const getDefaultValues = (option: ShippingOption): ShippingOptionFormType => {
         : null,
     },
     amount: option.amount,
+    metadata: getMetadataFormValues(option.metadata),
   }
 }
 

packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-form/index.tsx

@@ -2,12 +2,16 @@ import { Region } from "@medusajs/medusa"
 import { Controller, UseFormReturn } from "react-hook-form"
 import IncludesTaxTooltip from "../../../../../components/atoms/includes-tax-tooltip"
 import Switch from "../../../../../components/atoms/switch"
+import MetadataForm, {
+  MetadataFormType,
+} from "../../../../../components/forms/general/metadata-form"
 import PriceFormInput from "../../../../../components/forms/general/prices-form/price-form-input"
 import InputHeader from "../../../../../components/fundamentals/input-header"
 import InputField from "../../../../../components/molecules/input"
 import { NextSelect } from "../../../../../components/molecules/select/next-select"
 import { Option, ShippingOptionPriceType } from "../../../../../types/shared"
 import FormValidator from "../../../../../utils/form-validator"
+import { nestedForm } from "../../../../../utils/nested-form"
 import { useShippingOptionFormData } from "./use-shipping-option-form-data"
 
 type Requirement = {
@@ -26,6 +30,7 @@ export type ShippingOptionFormType = {
     min_subtotal: Requirement | null
     max_subtotal: Requirement | null
   }
+  metadata: MetadataFormType
 }
 
 type Props = {
@@ -272,6 +277,11 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
           />
         </div>
       </div>
+      <div className="bg-grey-20 my-xlarge h-px w-full" />
+      <div>
+        <h3 className="inter-base-semibold mb-base">Metadata</h3>
+        <MetadataForm form={nestedForm(form, "metadata")} />
+      </div>
     </div>
   )
 }

packages/admin-ui/ui/src/domain/settings/regions/edit/general-section/edit-region.modal.tsx

@@ -2,6 +2,11 @@ import { AdminPostRegionsRegionReq, Region } from "@medusajs/medusa"
 import { useAdminUpdateRegion } from "medusa-react"
 import { useEffect } from "react"
 import { useForm } from "react-hook-form"
+import MetadataForm, {
+  getMetadataFormValues,
+  getSubmittableMetadata,
+  MetadataFormType,
+} from "../../../../../components/forms/general/metadata-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
 import useNotification from "../../../../../hooks/use-notification"
@@ -27,6 +32,7 @@ type Props = {
 type RegionEditFormType = {
   details: RegionDetailsFormType
   providers: RegionProvidersFormType
+  metadata: MetadataFormType
 }
 
 const EditRegionModal = ({ region, onClose, open }: Props) => {
@@ -48,7 +54,7 @@ const EditRegionModal = ({ region, onClose, open }: Props) => {
 
   useEffect(() => {
     reset(getDefaultValues(region))
-  }, [region])
+  }, [region, reset])
 
   const { mutate, isLoading } = useAdminUpdateRegion(region.id)
   const notifcation = useNotification()
@@ -62,6 +68,7 @@ const EditRegionModal = ({ region, onClose, open }: Props) => {
         (fp) => fp.value
       ),
       countries: data.details.countries.map((c) => c.value),
+      metadata: getSubmittableMetadata(data.metadata),
     }
 
     if (isFeatureEnabled("tax_inclusive_pricing")) {
@@ -96,6 +103,11 @@ const EditRegionModal = ({ region, onClose, open }: Props) => {
               <h3 className="inter-base-semibold mb-base">Providers</h3>
               <RegionProvidersForm form={nestedForm(form, "providers")} />
             </div>
+            <div className="bg-grey-20 my-xlarge h-px w-full" />
+            <div>
+              <h3 className="inter-base-semibold mb-base">Metadata</h3>
+              <MetadataForm form={nestedForm(form, "metadata")} />
+            </div>
           </Modal.Content>
           <Modal.Footer>
             <div className="gap-x-xsmall flex w-full items-center justify-end">
@@ -152,6 +164,7 @@ const getDefaultValues = (region: Region): RegionEditFormType => {
         ? region.payment_providers.map((p) => paymentProvidersMapper(p.id))
         : [],
     },
+    metadata: getMetadataFormValues(region.metadata),
   }
 }
 

packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/create-return-shipping-option.modal.tsx

@@ -1,6 +1,7 @@
 import { Region } from "@medusajs/medusa"
 import { useAdminCreateShippingOption } from "medusa-react"
 import { useForm } from "react-hook-form"
+import { getSubmittableMetadata } from "../../../../../components/forms/general/metadata-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
 import useNotification from "../../../../../hooks/use-notification"
@@ -51,6 +52,7 @@ const CreateReturnShippingOptionModal = ({ open, onClose, region }: Props) => {
         admin_only: !data.store_option,
         amount: data.amount!,
         requirements: getRequirementsData(data),
+        metadata: getSubmittableMetadata(data.metadata),
       },
       {
         onSuccess: () => {

packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/create-shipping-option-modal.tsx

@@ -1,6 +1,7 @@
 import { Region } from "@medusajs/medusa"
 import { useAdminCreateShippingOption } from "medusa-react"
 import { useForm } from "react-hook-form"
+import { getSubmittableMetadata } from "../../../../../components/forms/general/metadata-form"
 import Button from "../../../../../components/fundamentals/button"
 import Modal from "../../../../../components/molecules/modal"
 import useNotification from "../../../../../hooks/use-notification"
@@ -51,6 +52,7 @@ const CreateShippingOptionModal = ({ open, onClose, region }: Props) => {
         admin_only: !data.store_option,
         amount: data.amount!,
         requirements: getRequirementsData(data),
+        metadata: getSubmittableMetadata(data.metadata),
       },
       {
         onSuccess: () => {