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

2023-03-31 12:07:24 +02:00
parent 4f4ccee7fb
commit 4342ac884b
59 changed files with 1904 additions and 963 deletions
@@ -85,7 +85,7 @@ const Item: React.FC<AccordionItemProps> = ({
      <AccordionPrimitive.Content
        forceMount={forceMountContent}
        className={clsx(
-          "radix-state-closed:animate-accordion-close radix-state-open:animate-accordion-open overflow-hidden px-1"
+          "radix-state-closed:animate-accordion-close radix-state-open:animate-accordion-open radix-state-closed:pointer-events-none px-1"
        )}
      >
        <div className="inter-base-regular group-radix-state-closed:animate-accordion-close">
@@ -18,6 +18,8 @@ type BodyCardProps = {
  status?: React.ReactNode
  customHeader?: React.ReactNode
  compact?: boolean
+  footerMinHeight?: number
+  setBorders?: boolean
 } & React.HTMLAttributes<HTMLDivElement>

 const BodyCard: React.FC<BodyCardProps> = ({
@@ -94,7 +96,7 @@ const BodyCard: React.FC<BodyCardProps> = ({
          {children && (
            <div
              className={clsx("flex flex-col", {
-                "my-large grow": !compact,
+                grow: !compact,
              })}
            >
              {children}
@@ -109,7 +109,7 @@ const EditDenominationsModal = ({
    <Modal open={open} handleClose={handleClose}>
      <Modal.Body>
        <Modal.Header handleClose={handleClose}>
-          <h1 className="inter-xlarge-semibold">Edit Denominations</h1>
+          <h1 className="inter-xlarge-semibold">Edit Denomination</h1>
        </Modal.Header>
        <form onSubmit={onSubmit}>
          <Modal.Content>
@@ -6,13 +6,18 @@ import OrganizeForm, {
  OrganizeFormType,
 } from "../../forms/product/organize-form"

-import Button from "../../fundamentals/button"
-import Modal from "../../molecules/modal"
 import { Product } from "@medusajs/medusa"
-import { nestedForm } from "../../../utils/nested-form"
-import useEditProductActions from "../../../hooks/use-edit-product-actions"
 import { useEffect } from "react"
 import { useForm } from "react-hook-form"
+import useEditProductActions from "../../../hooks/use-edit-product-actions"
+import { nestedForm } from "../../../utils/nested-form"
+import MetadataForm, {
+  getMetadataFormValues,
+  getSubmittableMetadata,
+  MetadataFormType,
+} from "../../forms/general/metadata-form"
+import Button from "../../fundamentals/button"
+import Modal from "../../molecules/modal"

 type Props = {
  product: Product
@@ -24,6 +29,7 @@ type GeneralFormWrapper = {
  general: GeneralFormType
  organize: OrganizeFormType
  discountable: DiscountableFormType
+  metadata: MetadataFormType
 }

 const GeneralModal = ({ product, open, onClose }: Props) => {
@@ -76,6 +82,7 @@ const GeneralModal = ({ product, open, onClose }: Props) => {

        categories: data.organize.categories?.map((id) => ({ id })),
        discountable: data.discountable.value,
+        metadata: getSubmittableMetadata(data.metadata),
      },
      onReset
    )
@@ -105,6 +112,10 @@ const GeneralModal = ({ product, open, onClose }: Props) => {
              form={nestedForm(form, "discountable")}
              isGiftCard={product.is_giftcard}
            />
+            <div className="mt-xlarge">
+              <h2 className="inter-base-semibold mb-base">Metadata</h2>
+              <MetadataForm form={nestedForm(form, "metadata")} />
+            </div>
          </Modal.Content>
          <Modal.Footer>
            <div className="flex w-full justify-end gap-x-2">
@@ -155,6 +166,7 @@ const getDefaultValues = (product: Product): GeneralFormWrapper => {
    discountable: {
      value: product.discountable,
    },
+    metadata: getMetadataFormValues(product.metadata),
  }
 }

@@ -141,6 +141,18 @@ const ProductDetails = ({ product }: Props) => {
        title="Discountable"
        value={product.discountable ? "True" : "False"}
      />
+      <Detail
+        title="Metadata"
+        value={
+          Object.entries(product.metadata || {}).length > 0
+            ? `${Object.entries(product.metadata || {}).length} ${
+                Object.keys(product.metadata || {}).length === 1
+                  ? "item"
+                  : "items"
+              }`
+            : undefined
+        }
+      />
    </div>
  )
 }
@@ -1,15 +1,16 @@
 import { AdminPostProductsProductVariantsReq, Product } from "@medusajs/medusa"
-import { useContext, useEffect } from "react"
+import { useEffect } from "react"
 import EditFlowVariantForm, {
  EditFlowVariantFormType,
 } from "../../forms/product/variant-form/edit-flow-variant-form"
 import LayeredModal, {
-  LayeredModalContext,
+  useLayeredModal,
 } from "../../molecules/modal/layered-modal"

 import { useMedusa } from "medusa-react"
 import { useForm } from "react-hook-form"
 import useEditProductActions from "../../../hooks/use-edit-product-actions"
+import { getSubmittableMetadata } from "../../forms/general/metadata-form"
 import Button from "../../fundamentals/button"
 import Modal from "../../molecules/modal"

@@ -20,7 +21,8 @@ type Props = {
 }

 const AddVariantModal = ({ open, onClose, product }: Props) => {
-  const context = useContext(LayeredModalContext)
+  const context = useLayeredModal()
+
  const { client } = useMedusa()
  const form = useForm<EditFlowVariantFormType>({
    defaultValues: getDefaultValues(product),
@@ -160,6 +162,10 @@ const getDefaultValues = (product: Product): EditFlowVariantFormType => {
      hs_code: null,
      origin_country: null,
    },
+    metadata: {
+      entries: [],
+      deleted: [],
+    },
  }
 }

@@ -192,6 +198,7 @@ export const createAddPayload = (
      : null,
    // @ts-ignore
    prices: priceArray,
+    metadata: getSubmittableMetadata(data.metadata),
    title: data.general.title || `${options?.map((o) => o.value).join(" / ")}`,
    options: options.map((option) => ({
      option_id: option.id,
@@ -11,6 +11,7 @@ import { useContext } from "react"
 import { useForm } from "react-hook-form"
 import useEditProductActions from "../../../hooks/use-edit-product-actions"
 import { countries } from "../../../utils/countries"
+import { getMetadataFormValues } from "../../forms/general/metadata-form"
 import Button from "../../fundamentals/button"
 import Modal from "../../molecules/modal"
 import { createAddPayload } from "./add-variant-modal"
@@ -204,6 +205,7 @@ export const getEditVariantDefaultValues = (
      })),
    },
    options,
+    metadata: getMetadataFormValues(variant.metadata),
  }
 }

@@ -10,6 +10,7 @@ import EditFlowVariantForm, {

 import { useForm } from "react-hook-form"
 import useEditProductActions from "../../../../hooks/use-edit-product-actions"
+import { getSubmittableMetadata } from "../../../forms/general/metadata-form"
 import Button from "../../../fundamentals/button"
 import Modal from "../../../molecules/modal"
 import { LayeredModalContext } from "../../../molecules/modal/layered-modal"
@@ -117,6 +118,7 @@ export const createUpdatePayload = (
    ...stock,
    ...dimensions,
    ...customs,
+    metadata: getSubmittableMetadata(data.metadata),
    // @ts-ignore
    origin_country: customs?.origin_country
      ? customs.origin_country.value
@@ -78,12 +78,12 @@ const EditVariantsModal = ({ open, onClose, product }: Props) => {
        />
      )
    },
-    [product]
+    [moveCard, product]
  )

-  const handleFormReset = () => {
+  const handleFormReset = useCallback(() => {
    reset(getDefaultValues(product))
-  }
+  }, [product, reset])

  const resetAndClose = () => {
    handleFormReset()
@@ -93,7 +93,7 @@ const EditVariantsModal = ({ open, onClose, product }: Props) => {

  useEffect(() => {
    handleFormReset()
-  }, [product])
+  }, [product, handleFormReset])

  const onSubmit = handleSubmit((data) => {
    onUpdate(
@@ -28,7 +28,7 @@ function RawJSON(props: RawJSONProps) {

  return (
    <BodyCard className={"mb-4 h-auto min-h-0 w-full"} title={title}>
-      <div className="mt-4 flex flex-grow items-center">
+      <div className="flex flex-grow items-center">
        <JSONView data={data} />
      </div>
    </BodyCard>