Feat(medusa, admin-ui): Update edit allocation modal (#4071)

* update edit-allocation modal * add changeset * update edit-allocation modal * update allocation modal
medusajs · May 22, 2023 · 0476f52 · 0476f52
1 parent c0e527d
commit 0476f52
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 101 deletions.
diff --git a/.changeset/cool-buckets-explode.md b/.changeset/cool-buckets-explode.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/medusa": patch
+---
+
+feaet(medusa): add description to reservation default fields
diff --git a/.changeset/curly-carpets-remain.md b/.changeset/curly-carpets-remain.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+feat(admin-ui): update edit allocation modal design
diff --git a/packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx b/packages/admin-ui/ui/src/components/atoms/thumbnail/thumbnail.tsx
@@ -1,10 +1,10 @@
-import clsx from "clsx"
 import ImagePlaceholderIcon from "../../fundamentals/icons/image-placeholder-icon"
+import clsx from "clsx"
 
 type Props = {
   src?: string | null
   className?: string
-  size?: "small" | "medium" | "large"
+  size?: "xsmall" | "small" | "medium" | "large"
 }
 
 export const Thumbnail = ({ src, className, size = "small" }: Props) => {
@@ -13,6 +13,7 @@ export const Thumbnail = ({ src, className, size = "small" }: Props) => {
       className={clsx(
         "bg-grey-5 rounded-rounded flex items-center justify-center overflow-hidden",
         {
+          "h-6 w-[18px]": size === "xsmall",
           "h-10 w-[30px]": size === "small",
           "h-12 w-9": size === "medium",
           "h-[226px] w-[170px]": size === "large",

diff --git a/packages/admin-ui/ui/src/domain/orders/details/allocations/allocate-items-modal.tsx b/packages/admin-ui/ui/src/domain/orders/details/allocations/allocate-items-modal.tsx
@@ -1,5 +1,4 @@
 import { Controller, useForm, useWatch } from "react-hook-form"
-import { LineItem } from "@medusajs/medusa"
 import { NestedForm, nestedForm } from "../../../../utils/nested-form"
 import React, { useEffect, useMemo } from "react"
 import {
@@ -13,14 +12,15 @@ import Button from "../../../../components/fundamentals/button"
 import CrossIcon from "../../../../components/fundamentals/icons/cross-icon"
 import FocusModal from "../../../../components/molecules/modal/focus-modal"
 import InputField from "../../../../components/molecules/input"
+import { LineItem } from "@medusajs/medusa"
+import { ReservationItemDTO } from "@medusajs/types"
 import Select from "../../../../components/molecules/select/next-select/select"
 import Thumbnail from "../../../../components/atoms/thumbnail"
 import clsx from "clsx"
 import { getErrorMessage } from "../../../../utils/error-messages"
 import { getFulfillableQuantity } from "../create-fulfillment/item-table"
 import { sum } from "lodash"
 import useNotification from "../../../../hooks/use-notification"
-import { ReservationItemDTO } from "@medusajs/types"
 
 type AllocationModalFormData = {
   location?: { label: string; value: string }
@@ -205,6 +205,7 @@ export type AllocationLineItemForm = {
   inventory_item_id: string
   line_item_id: string
   quantity: number
+  description?: string | null
 }
 
 export const AllocationLineItem: React.FC<{