feat(admin-ui): move inventory item fields into manage inventory modal (#3591)

.changeset/wise-colts-pretend.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/medusa": minor
+---
+
+feat(admin-ui): move customs and shipping into manage inventory modal

packages/admin-ui/ui/src/components/forms/product/variant-form/edit-flow-variant-form/index.tsx

@@ -2,7 +2,7 @@ import { useFieldArray, UseFormReturn } from "react-hook-form"
 import CustomsForm, { CustomsFormType } from "../../customs-form"
 import DimensionsForm, { DimensionsFormType } from "../../dimensions-form"
 import VariantGeneralForm, {
-  VariantGeneralFormType
+  VariantGeneralFormType,
 } from "../variant-general-form"
 import VariantStockForm, { VariantStockFormType } from "../variant-stock-form"
 
@@ -115,6 +115,7 @@ const EditFlowVariantForm = ({ form, isEdit }: Props) => {
           </p>
           <DimensionsForm form={nestedForm(form, "dimensions")} />
         </div>
+        {showStockAndInventory && (
           <div className="mt-xlarge">
             <h3 className="inter-base-semibold mb-2xsmall">Customs</h3>
             <p className="inter-base-regular text-grey-50 mb-large">
@@ -122,6 +123,7 @@ const EditFlowVariantForm = ({ form, isEdit }: Props) => {
             </p>
             <CustomsForm form={nestedForm(form, "customs")} />
           </div>
+        )}
       </Accordion.Item>
     </Accordion>
   )

packages/admin-ui/ui/src/components/forms/product/variant-inventory-form/edit-flow-variant-form/index.tsx

@@ -1,11 +1,8 @@
-import { InventoryLevelDTO } from "@medusajs/medusa"
+import { InventoryLevelDTO } from "@medusajs/types"
 import { UseFormReturn } from "react-hook-form"
-import { nestedForm } from "../../../../../utils/nested-form"
 import VariantStockForm, { VariantStockFormType } from "../variant-stock-form"
 
-export type EditFlowVariantFormType = {
+export type EditFlowVariantFormType = VariantStockFormType
-  stock: VariantStockFormType
-}
 
 type Props = {
   form: UseFormReturn<EditFlowVariantFormType, any>
@@ -39,10 +36,7 @@ const EditFlowVariantForm = ({ form, isLoading, locationLevels }: Props) => {
 
   return (
     <>
-      <VariantStockForm
+      <VariantStockForm locationLevels={locationLevels} form={form} />
-        locationLevels={locationLevels}
-        form={nestedForm(form, "stock")}
-      />
     </>
   )
 }

packages/admin-ui/ui/src/components/forms/product/variant-inventory-form/variant-stock-form/index.tsx

@@ -1,15 +1,19 @@
-import { InventoryLevelDTO, StockLocationDTO } from "@medusajs/medusa"
+import { Controller, useFieldArray, UseFormReturn } from "react-hook-form"
-import { useAdminStockLocations } from "medusa-react"
+import { nestedForm } from "../../../../../utils/nested-form"
 import React, { useMemo, useState } from "react"
-import { Controller, useFieldArray } from "react-hook-form"
+
-import { NestedForm } from "../../../../../utils/nested-form"
+import Accordion from "../../../../organisms/accordion"
-import Switch from "../../../../atoms/switch"
-import Button from "../../../../fundamentals/button"
-import IconBadge from "../../../../fundamentals/icon-badge"
 import BuildingsIcon from "../../../../fundamentals/icons/buildings-icon"
+import Button from "../../../../fundamentals/button"
+import CustomsForm, { CustomsFormType } from "../../customs-form"
+import DimensionsForm, { DimensionsFormType } from "../../dimensions-form"
+import IconBadge from "../../../../fundamentals/icon-badge"
 import InputField from "../../../../molecules/input"
 import Modal from "../../../../molecules/modal"
+import Switch from "../../../../atoms/switch"
+import { useAdminStockLocations } from "medusa-react"
 import { useLayeredModal } from "../../../../molecules/modal/layered-modal"
+import { InventoryLevelDTO, StockLocationDTO } from "@medusajs/types"
 
 export type VariantStockFormType = {
   manage_inventory?: boolean
@@ -20,11 +24,13 @@ export type VariantStockFormType = {
   upc: string | null
   barcode: string | null
   location_levels?: Partial<InventoryLevelDTO>[] | null
+  dimensions: DimensionsFormType
+  customs: CustomsFormType
 }
 
 type Props = {
   locationLevels: InventoryLevelDTO[]
-  form: NestedForm<VariantStockFormType>
+  form: UseFormReturn<VariantStockFormType>
 }
 
 const VariantStockForm = ({ form, locationLevels }: Props) => {
@@ -44,9 +50,9 @@ const VariantStockForm = ({ form, locationLevels }: Props) => {
 
     return new Map(locations.map((l) => [l.id, l]))
   }, [locations, isLoading])
-  const { path, control, register, watch } = form
+  const { control, register, watch } = form
 
-  const manageInventory = watch(path("manage_inventory"))
+  const manageInventory = watch("manage_inventory")
 
   const {
     fields: selectedLocations,
@@ -54,10 +60,10 @@ const VariantStockForm = ({ form, locationLevels }: Props) => {
     remove,
   } = useFieldArray({
     control,
-    name: path("location_levels"),
+    name: "location_levels",
   })
 
-  const selectedLocationLevels = watch(path("location_levels"))
+  const selectedLocationLevels = watch("location_levels")
 
   const levelMap = new Map(
     selectedLocationLevels?.map((l) => [l.location_id, l])
@@ -83,39 +89,45 @@ const VariantStockForm = ({ form, locationLevels }: Props) => {
   }
 
   return (
-    <div>
+    <Accordion type="multiple" defaultValue={["general"]}>
-      <div className="gap-y-xlarge flex flex-col">
+      <Accordion.Item title="General" value="general">
+        <div className="gap-y-xlarge mt-large flex flex-col">
           <div className="flex flex-col gap-y-4">
-          <h3 className="inter-base-semibold">General</h3>
             <div className="gap-large grid grid-cols-2">
               <InputField
                 label="Stock keeping unit (SKU)"
                 placeholder="SUN-G, JK1234..."
-              {...register(path("sku"))}
+                {...register("sku")}
               />
               <InputField
                 label="EAN (Barcode)"
                 placeholder="123456789102..."
-              {...register(path("ean"))}
+                {...register("ean")}
               />
               <InputField
                 label="UPC (Barcode)"
                 placeholder="023456789104..."
-              {...register(path("upc"))}
+                {...register("upc")}
               />
               <InputField
                 label="Barcode"
                 placeholder="123456789104..."
-              {...register(path("barcode"))}
+                {...register("barcode")}
               />
             </div>
           </div>
+        </div>
+      </Accordion.Item>
+      <Accordion.Item title="Inventory" value="inventory">
+        <div className="gap-y-small mt-large flex flex-col">
           <div className="gap-y-2xsmall flex flex-col">
             <div className="flex items-center justify-between">
-            <h3 className="inter-base-semibold mb-2xsmall">Manage inventory</h3>
+              <h3 className="inter-base-semibold mb-2xsmall">
+                Manage inventory
+              </h3>
               <Controller
                 control={control}
-              name={path("manage_inventory")}
+                name={"manage_inventory"}
                 render={({ field: { value, onChange } }) => {
                   return <Switch checked={value} onCheckedChange={onChange} />
                 }}
@@ -135,15 +147,17 @@ const VariantStockForm = ({ form, locationLevels }: Props) => {
                   </h3>
                   <Controller
                     control={control}
-                  name={path("allow_backorder")}
+                    name={"allow_backorder"}
                     render={({ field: { value, onChange } }) => {
-                    return <Switch checked={value} onCheckedChange={onChange} />
+                      return (
+                        <Switch checked={value} onCheckedChange={onChange} />
+                      )
                     }}
                   />
                 </div>
                 <p className="inter-base-regular text-grey-50">
-                When checked the product will be available for purchase despite
+                  When checked the product will be available for purchase
-                the product being sold out
+                  despite the product being sold out
                 </p>
               </div>
               <div className="flex w-full flex-col text-base">
@@ -155,7 +169,9 @@ const VariantStockForm = ({ form, locationLevels }: Props) => {
                       <div className="">In Stock</div>
                     </div>
                     {selectedLocations.map((level, i) => {
-                    const locationDetails = locationsMap.get(level.location_id)
+                      const locationDetails = locationsMap.get(
+                        level.location_id
+                      )
                       const locationLevel = levelMap.get(level.location_id)
 
                       return (
@@ -181,7 +197,7 @@ const VariantStockForm = ({ form, locationLevels }: Props) => {
                               type="number"
                               min={0}
                               {...register(
-                              path(`location_levels.${i}.stocked_quantity`),
+                                `location_levels.${i}.stocked_quantity`,
                                 { valueAsNumber: true }
                               )}
                             />
@@ -216,7 +232,28 @@ const VariantStockForm = ({ form, locationLevels }: Props) => {
             </>
           )}
         </div>
+      </Accordion.Item>
+      <Accordion.Item title="Shipping" value="shipping">
+        <p className="inter-base-regular text-grey-50">
+          Shipping information can be required depending on your shipping
+          provider, and whether or not you are shipping internationally.
+        </p>
+        <div className="mt-large">
+          <h3 className="inter-base-semibold mb-2xsmall">Dimensions</h3>
+          <p className="inter-base-regular text-grey-50 mb-large">
+            Configure to calculate the most accurate shipping rates.
+          </p>
+          <DimensionsForm form={nestedForm(form, "dimensions")} />
         </div>
+        <div className="mt-xlarge">
+          <h3 className="inter-base-semibold mb-2xsmall">Customs</h3>
+          <p className="inter-base-regular text-grey-50 mb-large">
+            Configure if you are shipping internationally.
+          </p>
+          <CustomsForm form={nestedForm(form, "customs")} />
+        </div>
+      </Accordion.Item>
+    </Accordion>
   )
 }
 

packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variant-inventory-modal.tsx

@@ -14,12 +14,13 @@ import {
 import Button from "../../fundamentals/button"
 import { InventoryLevelDTO } from "@medusajs/types"
 import Modal from "../../molecules/modal"
-import { createUpdatePayload } from "./edit-variants-modal/edit-variant-screen"
 import { queryClient } from "../../../constants/query-client"
 import { removeNullish } from "../../../utils/remove-nullish"
 import { useContext } from "react"
 import useEditProductActions from "../../../hooks/use-edit-product-actions"
 import { useForm } from "react-hook-form"
+import { countries } from "../../../utils/countries"
+import { Option } from "../../../types/shared"
 
 type Props = {
   onClose: () => void
@@ -44,19 +45,41 @@ const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
 
   const { onUpdateVariant, updatingVariant } = useEditProductActions(product.id)
 
+  const createUpdateInventoryItemPayload = (
+    data: Partial<EditFlowVariantFormType>
+  ) => {
+    const updateDimensions = data.dimensions || {}
+    const updateCustoms = data.customs || {}
+    const originCountry = data.customs?.origin_country?.value
+
+    delete data.dimensions
+    delete data.customs
+    delete data.ean
+    delete data.barcode
+    delete data.upc
+
+    return removeNullish({
+      ...updateDimensions,
+      ...updateCustoms,
+      ...data,
+      ...(originCountry && { origin_country: originCountry }),
+    })
+  }
+
   const onSubmit = async (data: EditFlowVariantFormType) => {
-    const locationLevels = data.stock.location_levels || []
+    const locationLevels = data.location_levels || []
-    const manageInventory = data.stock.manage_inventory
+    const manageInventory = data.manage_inventory
 
     const variantInventoryItem = variantInventory?.inventory?.[0]
     const itemId = variantInventoryItem?.id
 
-    delete data.stock.manage_inventory
+    delete data.manage_inventory
-    delete data.stock.location_levels
+    delete data.location_levels
 
     let inventoryItemId: string | undefined = itemId
 
-    const upsertPayload = removeNullish(data.stock)
+    const { ean, barcode, upc } = data
+    const upsertPayload = createUpdateInventoryItemPayload(data)
     let shouldInvalidateCache = false
 
     if (variantInventoryItem) {
@@ -135,14 +158,27 @@ const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
       }
     }
 
+    const { dimensions, customs, ...stock } = data
+
     // @ts-ignore
-    onUpdateVariant(variant.id, createUpdatePayload(data), () => {
+    onUpdateVariant(
+      variant.id,
+      removeNullish({
+        ...dimensions,
+        ...customs,
+        ...stock,
+        ean,
+        barcode,
+        upc,
+      }),
+      () => {
         refetch()
         if (shouldInvalidateCache) {
           queryClient.invalidateQueries(adminInventoryItemsKeys.lists())
         }
         handleClose()
-    })
+      }
+    )
   }
 
   return (
@@ -154,6 +190,7 @@ const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
         <StockForm
           variantInventory={variantInventory!}
           onSubmit={onSubmit}
+          variant={variant}
           isLoadingInventory={isLoadingInventory}
           handleClose={handleClose}
           updatingVariant={updatingVariant}
@@ -169,8 +206,10 @@ const StockForm = ({
   isLoadingInventory,
   handleClose,
   updatingVariant,
+  variant,
 }: {
   variantInventory: VariantInventory
+  variant: ProductVariant
   onSubmit: (data: EditFlowVariantFormType) => void
   isLoadingInventory: boolean
   handleClose: () => void
@@ -178,7 +217,7 @@ const StockForm = ({
 }) => {
   const form = useForm<EditFlowVariantFormType>({
     // @ts-ignore
-    defaultValues: getEditVariantDefaultValues(variantInventory),
+    defaultValues: getEditVariantDefaultValues(variantInventory, variant),
   })
 
   const {
@@ -231,34 +270,68 @@ const StockForm = ({
 }
 
 export const getEditVariantDefaultValues = (
-  variantInventory?: any
+  variantInventory?: any,
+  variant?: ProductVariant
 ): EditFlowVariantFormType => {
   const inventoryItem = variantInventory?.inventory[0]
   if (!inventoryItem) {
     return {
-      stock: {
       sku: null,
-        ean: null,
+      ean: variant?.ean || null,
+      barcode: variant?.barcode || null,
+      upc: variant?.upc || null,
       inventory_quantity: null,
       manage_inventory: false,
       allow_backorder: false,
-        barcode: null,
-        upc: null,
       location_levels: null,
+      dimensions: {
+        height: null,
+        length: null,
+        width: null,
+        weight: null,
+      },
+      customs: {
+        origin_country: null,
+        mid_code: null,
+        hs_code: null,
       },
     }
   }
 
+  let originCountry: Option | null = null
+  if (inventoryItem.origin_country) {
+    const country = countries.find(
+      (c) =>
+        c.alpha2 === inventoryItem.origin_country ||
+        c.alpha3 === inventoryItem.origin_country
+    )
+    if (country) {
+      originCountry = {
+        label: country?.name,
+        value: country?.alpha2,
+      }
+    }
+  }
+
   return {
-    stock: {
     sku: inventoryItem.sku,
-      ean: inventoryItem.ean,
+    ean: variant?.ean || null,
+    barcode: variant?.barcode || null,
+    upc: variant?.upc || null,
     inventory_quantity: inventoryItem.inventory_quantity,
     manage_inventory: !!inventoryItem,
     allow_backorder: inventoryItem.allow_backorder,
-      barcode: inventoryItem.barcode,
-      upc: inventoryItem.upc,
     location_levels: inventoryItem.location_levels,
+    dimensions: {
+      height: inventoryItem.height,
+      length: inventoryItem.length,
+      width: inventoryItem.width,
+      weight: inventoryItem.weight,
+    },
+    customs: {
+      origin_country: originCountry,
+      mid_code: inventoryItem.mid_code,
+      hs_code: inventoryItem.hs_code,
     },
   }
 }