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

* update edit-allocation modal * add changeset * update edit-allocation modal * update allocation modal
2023-05-22 15:58:51 +02:00
parent c0e527d6e0
commit 0476f52519
6 changed files with 173 additions and 101 deletions
@@ -0,0 +1,5 @@
+---
+"@medusajs/medusa": patch
+---
+
+feaet(medusa): add description to reservation default fields
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+feat(admin-ui): update edit allocation modal design
@@ -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",
@@ -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,6 +12,8 @@ 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"
@@ -20,7 +21,6 @@ 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<{
@@ -1,47 +1,72 @@
-import { AllocationLineItemForm } from "./allocate-items-modal"
 import { Controller, useForm, useWatch } from "react-hook-form"
-import { LineItem, ReservationItemDTO } from "@medusajs/medusa"
+import {
+  InventoryLevelDTO,
+  ReservationItemDTO,
+  StockLocationDTO,
+} from "@medusajs/types"
+import MetadataForm, {
+  MetadataFormType,
+  getMetadataFormValues,
+  getSubmittableMetadata,
+} from "../../../../components/forms/general/metadata-form"
 import {
  useAdminDeleteReservation,
+  useAdminInventoryItem,
  useAdminStockLocations,
  useAdminUpdateReservation,
-  useAdminVariantsInventory,
 } from "medusa-react"
 import { useEffect, useMemo } from "react"

+import { AllocationLineItemForm } from "./allocate-items-modal"
 import Button from "../../../../components/fundamentals/button"
 import CrossIcon from "../../../../components/fundamentals/icons/cross-icon"
+import InputField from "../../../../components/molecules/input"
+import { LineItem } from "@medusajs/medusa"
 import Select from "../../../../components/molecules/select/next-select/select"
 import SideModal from "../../../../components/molecules/modal/side-modal"
-import useNotification from "../../../../hooks/use-notification"
 import Thumbnail from "../../../../components/atoms/thumbnail"
 import { getFulfillableQuantity } from "../create-fulfillment/item-table"
+import { nestedForm } from "../../../../utils/nested-form"
+import useNotification from "../../../../hooks/use-notification"
+import useToggleState from "../../../../hooks/use-toggle-state"

 type EditAllocationLineItemForm = {
  location: { label: string; value: string }
  item: AllocationLineItemForm
+  metadata: MetadataFormType
 }

 const EditAllocationDrawer = ({
  close,
  reservation,
  item,
-  totalReservedQuantity,
+  totalReservedQuantity = 0,
 }: {
  close: () => void
-  reservation?: ReservationItemDTO
-  item: LineItem
-  totalReservedQuantity: number
+  reservation: ReservationItemDTO
+  item?: LineItem
+  totalReservedQuantity?: number
 }) => {
-  const form = useForm<EditAllocationLineItemForm>()
+  const form = useForm<EditAllocationLineItemForm>({
+    defaultValues: {
+      item: {
+        description: reservation.description,
+      },
+      metadata: getMetadataFormValues(reservation?.metadata),
+    },
+  })

-  const { control, setValue, handleSubmit } = form
+  const { state: hasMetadata, toggle: toggleHasMetadata } = useToggleState(
+    !!reservation.metadata
+  )
+
+  const { control, setValue, handleSubmit, register } = form

  const { stock_locations, isLoading: isLoadingStockLocations } =
    useAdminStockLocations()

-  const { variant, isLoading } = useAdminVariantsInventory(
-    item.variant_id as string
+  const { inventory_item, isLoading } = useAdminInventoryItem(
+    reservation.inventory_item_id
  )

  const { mutate: updateReservation } = useAdminUpdateReservation(
@@ -55,7 +80,8 @@ const EditAllocationDrawer = ({
    if (!stock_locations || isLoadingStockLocations) {
      return []
    }
-    return stock_locations.map((sl) => ({
+
+    return stock_locations.map((sl: StockLocationDTO) => ({
      value: sl.id,
      label: sl.name,
    }))
@@ -86,7 +112,7 @@ const EditAllocationDrawer = ({
  useEffect(() => {
    if (stock_locations?.length && reservation) {
      const defaultLocation = stock_locations.find(
-        (sl) => sl.id === reservation.location_id
+        (sl: StockLocationDTO) => sl.id === reservation.location_id
      )

      if (defaultLocation) {
@@ -113,6 +139,8 @@ const EditAllocationDrawer = ({
      {
        quantity: data.item.quantity,
        location_id: data.location.value,
+        description: data.item.description,
+        metadata: hasMetadata ? getSubmittableMetadata(data.metadata) : null,
      },
      {
        onSuccess: () => {
@@ -131,12 +159,12 @@ const EditAllocationDrawer = ({
  }

  const { availableQuantity, inStockQuantity } = useMemo(() => {
-    if (isLoading || !selectedLocation?.value || !variant) {
+    if (isLoading || !selectedLocation?.value || !inventory_item) {
      return {}
    }
-    const { inventory } = variant
-    const locationInventory = inventory[0].location_levels?.find(
-      (inv) => inv.location_id === selectedLocation?.value
+
+    const locationInventory = inventory_item.location_levels?.find(
+      (inv: InventoryLevelDTO) => inv.location_id === selectedLocation?.value
    )
    if (!locationInventory) {
      return {}
@@ -145,20 +173,30 @@ const EditAllocationDrawer = ({
      availableQuantity: locationInventory.available_quantity,
      inStockQuantity: locationInventory.stocked_quantity,
    }
-  }, [variant, selectedLocation, isLoading])
+  }, [isLoading, selectedLocation?.value, inventory_item])

-  // we can adjust up to fulfillable quantity - the quantity reserved in other reservations
-  const lineItemReservationCapacity =
-    getFulfillableQuantity(item) -
-    (totalReservedQuantity - (reservation?.quantity || 0))
+  const maxReservation = useMemo(() => {
+    if (!item) {
+      return typeof availableQuantity === "number" ? availableQuantity : 0
+    }

-  const inventoryItemReservationCapacity =
-    typeof availableQuantity === "number" ? availableQuantity : 0
+    const lineItemReservationCapacity =
+      getFulfillableQuantity(item) -
+      (totalReservedQuantity - (reservation?.quantity || 0))

-  const maxReservation = Math.min(
-    lineItemReservationCapacity,
-    inventoryItemReservationCapacity
-  )
+    const inventoryItemReservationCapacity =
+      typeof availableQuantity === "number" ? availableQuantity : 0
+
+    return Math.min(
+      lineItemReservationCapacity,
+      inventoryItemReservationCapacity
+    )
+  }, [availableQuantity, item, reservation?.quantity, totalReservedQuantity])
+
+  const closeModal = (e) => {
+    e.preventDefault()
+    close()
+  }

  return (
    <SideModal isVisible close={close}>
@@ -167,98 +205,118 @@ const EditAllocationDrawer = ({
        onSubmit={handleSubmit(submit)}
      >
        <div className="flex h-full flex-col justify-between">
-          <div className="flex grow flex-col">
-            <div className="border-grey-20 flex items-center justify-between border-b px-8 py-6">
-              <h1 className="inter-large-semibold ">Edit allocation</h1>
-              <Button variant="ghost" className="p-1.5" onClick={close}>
-                <CrossIcon />
-              </Button>
-            </div>
+          <div className="border-grey-20 flex items-center justify-between border-b px-8 py-6">
+            <h1 className="inter-large-semibold ">Edit allocation</h1>
+            <Button
+              variant="ghost"
+              className="p-1.5"
+              type="button"
+              onClick={closeModal}
+            >
+              <CrossIcon />
+            </Button>
+          </div>
+          <div className="flex grow flex-col overflow-y-auto">
            <div className="flex h-full flex-col justify-between gap-y-8 px-8 pb-8 pt-6">
-              <div>
-                <h2 className="inter-base-semibold">Location</h2>
-                <span className="inter-base-regular text-grey-50">
-                  Choose which location you want to ship the items from.
-                </span>
-                <Controller
-                  name="location"
-                  control={control}
-                  rules={{ required: true }}
-                  render={({ field: { value, onChange } }) => (
-                    <Select
-                      className="mt-4"
-                      value={value}
-                      onChange={onChange}
-                      options={locationOptions}
-                    />
-                  )}
-                />
+              <div className="flex flex-col gap-y-6">
                <div>
-                  <h2 className="inter-base-semibold mt-8">
-                    Items to Allocate
-                  </h2>
+                  <h2 className="inter-base-semibold">Location</h2>
+                  <span className="inter-base-regular text-grey-50">
+                    Choose which location you want to ship the items from.
+                  </span>
+                  <Controller
+                    name="location"
+                    control={control}
+                    rules={{ required: true }}
+                    render={({ field: { value, onChange } }) => (
+                      <Select
+                        className="mt-4"
+                        value={value}
+                        onChange={onChange}
+                        options={locationOptions}
+                      />
+                    )}
+                  />
+                </div>
+
+                <div>
+                  <h2 className="inter-base-semibold">Items to Allocate</h2>
                  <span className="inter-base-regular text-grey-50">
                    Select the number of items that you wish to allocate.
                  </span>
-                  <div className="gap-x-base mt-6 flex w-full">
-                    <div className="min-w-9">
-                      <Thumbnail size="medium" src={item.thumbnail} />
-                    </div>
-                    <div className="text-grey-50 truncate">
-                      <p className="inter-base-semibold text-grey-90 truncate">
-                        {item.title}
-                      </p>
-                      <p className="inter-base-semibold gap-x-2xsmall flex">
-                        <p>{`(${item.variant.sku})`}</p>
-                        <span>&#183;</span>
-                        <span className="inter-base-regular gap-x-2xsmall flex">
-                          {item.variant.options
-                            ?.map((option, i) => [
-                              <span key={`${option.id}-${i}`}>
-                                {option.value}
-                              </span>,
-                              <span key={`${option.id}-${i}.dot`}>&#183;</span>,
-                            ])
-                            .flat()
-                            .slice(0, -1) ||
-                            item.variant.title ||
-                            "-"}
-                        </span>
-                      </p>
-                    </div>
-                  </div>
-
                  <div
                    className={`
                  bg-grey-5 text-grey-50 border-grey-20 
-                  mt-8
+                  inter-base-regular
+                  mt-6
                  grid border-collapse grid-cols-2 grid-rows-3 
                  [&>*]:border-r [&>*]:border-b [&>*]:py-2 
                  [&>*:nth-child(odd)]:border-l [&>*:nth-child(odd)]:pl-4 
                  [&>*:nth-child(even)]:pr-4 [&>*:nth-child(even)]:text-right 
                  [&>*:nth-child(-n+2)]:border-t`}
                  >
-                    <div className="rounded-tl-rounded">In stock</div>
-                    <div className="rounded-tr-rounded">
-                      {inStockQuantity ?? "N/A"}
+                    <div className="rounded-tl-rounded">Item</div>
+                    <div className="rounded-tr-rounded flex justify-end space-x-3">
+                      <p className="inter-base-regular text-grey-50 truncate ">
+                        {inventory_item?.title ?? item?.title ?? "-"}
+                      </p>
+                      <Thumbnail
+                        size="xsmall"
+                        src={inventory_item?.thumbnail ?? item?.thumbnail}
+                      />
                    </div>
-                    <div className="">Available</div>
-                    <div className="">{availableQuantity ?? "N/A"}</div>
+                    <div>SKU</div>
+                    <div>{inventory_item?.sku ?? "N/A"}</div>
+                    <div>In stock</div>
+                    <div>{inStockQuantity ?? "N/A"}</div>
+                    <div>Available</div>
+                    <div>{availableQuantity ?? "N/A"}</div>
                    <div className="rounded-bl-rounded">Allocate</div>
                    <div className="bg-grey-0 rounded-br-rounded text-grey-80 flex items-center">
                      <input
                        className="remove-number-spinner inter-base-regular w-full shrink border-none bg-transparent text-right font-normal outline-none outline-0"
-                        {...form.register("item.quantity", {
+                        {...register("item.quantity", {
                          valueAsNumber: true,
                        })}
                        type="number"
                        min={0}
                        max={maxReservation}
                      />
-                      <span className="text-grey-50 nowrap whitespace-nowrap pl-2">{` / ${maxReservation} requested`}</span>
+                      <span className="text-grey-50 nowrap whitespace-nowrap pl-2">
+                        {maxReservation
+                          ? ` / ${maxReservation} requested`
+                          : " reserved"}
+                      </span>
                    </div>
                  </div>
                </div>
+                <div className="border-grey-20 inter-base-regular border-t pt-6">
+                  <p className="inter-base-semibold">Description</p>
+                  <p className="text-grey-50 mb-6">
+                    What type of reservation is this?
+                  </p>
+                  <InputField
+                    {...register("item.description")}
+                    placeholder="Description"
+                  />
+                </div>
+                <div className="border-grey border-grey-20 w-full items-center border-t pt-6">
+                  <div className="mb-2 flex justify-between">
+                    <p className="inter-base-semibold ">Metadata</p>
+                    <Button
+                      size="small"
+                      variant="ghost"
+                      type="button"
+                      className="border"
+                      onClick={toggleHasMetadata}
+                    >
+                      {hasMetadata ? "Remove metadata" : "Add metadata"}
+                    </Button>
+                  </div>
+                  {hasMetadata && (
+                    <MetadataForm form={nestedForm(form, "metadata")} />
+                  )}
+                </div>
              </div>

              <Button
@@ -1,14 +1,15 @@
-import { ReservationItemDTO } from "@medusajs/types"
-import { Router } from "express"
 import { DeleteResponse, PaginatedResponse } from "../../../../types/common"
 import middlewares, {
  transformBody,
  transformQuery,
 } from "../../../middlewares"
-import { checkRegisteredModules } from "../../../middlewares/check-registered-modules"
-import { AdminPostReservationsReq } from "./create-reservation"
+
 import { AdminGetReservationsParams } from "./list-reservations"
+import { AdminPostReservationsReq } from "./create-reservation"
 import { AdminPostReservationsReservationReq } from "./update-reservation"
+import { ReservationItemDTO } from "@medusajs/types"
+import { Router } from "express"
+import { checkRegisteredModules } from "../../../middlewares/check-registered-modules"

 const route = Router()

@@ -102,6 +103,7 @@ export const defaultReservationFields = [
  "inventory_item_id",
  "quantity",
  "line_item_id",
+  "description",
  "metadata",
  "created_at",
  "updated_at",