fix(admin-ui): Create fulfillment (#3607)

* fix for create-fulfillment

* remove ff check

* add changeset

* Disable Create fulfillment button if no quantities fulfilled

---------

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: Rares Capilnar <rares.capilnar@gmail.com>

.changeset/healthy-geese-worry.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): fix bug with create fulfillment and a couple of other minor tweaks

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

@@ -15,7 +15,6 @@ import clsx from "clsx"
 import { sum } from "lodash"
 import { useAdminStockLocations } from "medusa-react"
 import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
-// import { InventoryLevelDTO, StockLocationDTO } from "@medusajs/medusa"
 
 export type VariantStockFormType = {
   manage_inventory?: boolean

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

@@ -38,7 +38,7 @@ const VariantStockForm = ({ form, locationLevels }: Props) => {
   const { stock_locations: locations, isLoading } = useAdminStockLocations()
 
   const locationsMap = useMemo(() => {
-    if (isLoading) {
+    if (isLoading || !locations) {
       return new Map()
     }
 

packages/admin-ui/ui/src/domain/orders/details/allocations/allocate-items-modal.tsx

@@ -222,7 +222,7 @@ export const AllocationLineItem: React.FC<{
   form.setValue(path("line_item_id"), item.id)
 
   useEffect(() => {
-    if (variant?.inventory) {
+    if (variant?.inventory?.length) {
       form.setValue(path("inventory_item_id"), variant.inventory[0].id)
     }
   }, [variant, form, path])
@@ -232,12 +232,14 @@ export const AllocationLineItem: React.FC<{
       return {}
     }
     const { inventory } = variant
-    const locationInventory = inventory[0].location_levels?.find(
+    const locationInventory = inventory?.[0]?.location_levels?.find(
       (inv) => inv.location_id === locationId
     )
+
     if (!locationInventory) {
       return {}
     }
+
     return {
       availableQuantity: locationInventory.available_quantity,
       inStockQuantity: locationInventory.stocked_quantity,

packages/admin-ui/ui/src/domain/orders/details/create-fulfillment/index.tsx

@@ -223,6 +223,9 @@ const CreateFulfillmentModal: React.FC<CreateFulfillmentModalProps> = ({
               type="submit"
               loading={isSubmitting}
               onClick={createFulfillment}
+              disabled={
+                !Object.values(quantities).some((quantity) => quantity > 0)
+              }
             >
               Create fulfillment
             </Button>

packages/admin-ui/ui/src/domain/orders/details/create-fulfillment/item-table.tsx

@@ -64,7 +64,7 @@ const FulfillmentLine = ({
   handleQuantityUpdate,
   setErrors,
 }: {
-  locationId: string
+  locationId?: string
   item: LineItem
   quantities: Record<string, number>
   handleQuantityUpdate: (value: number, id: string) => void
@@ -79,6 +79,7 @@ const FulfillmentLine = ({
     item.variant_id as string,
     { enabled: isLocationFulfillmentEnabled }
   )
+
   React.useEffect(() => {
     if (isLocationFulfillmentEnabled) {
       refetch()
@@ -86,6 +87,13 @@ const FulfillmentLine = ({
   }, [isLocationFulfillmentEnabled, refetch])
 
   const { availableQuantity, inStockQuantity } = useMemo(() => {
+    if (!isLocationFulfillmentEnabled) {
+      return {
+        availableQuantity: item.variant.inventory_quantity,
+        inStockQuantity: item.variant.inventory_quantity,
+      }
+    }
+
     if (isLoading || !locationId || !variant) {
       return {}
     }
@@ -104,7 +112,13 @@ const FulfillmentLine = ({
       availableQuantity: locationInventory.available_quantity,
       inStockQuantity: locationInventory.stocked_quantity,
     }
-  }, [variant, locationId, isLoading])
+  }, [
+    isLoading,
+    locationId,
+    variant,
+    item.variant,
+    isLocationFulfillmentEnabled,
+  ])
 
   const validQuantity =
     !locationId ||

packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx

@@ -1,5 +1,5 @@
 import { DisplayTotal, PaymentDetails } from "../templates"
-import { Order, ReservationItemDTO } from "@medusajs/medusa"
+import { Order } from "@medusajs/medusa"
 import React, { useContext, useMemo } from "react"
 
 import { ActionType } from "../../../../components/molecules/actionables"
@@ -13,6 +13,7 @@ import StatusIndicator from "../../../../components/fundamentals/status-indicato
 import { sum } from "lodash"
 import { useFeatureFlag } from "../../../../providers/feature-flag-provider"
 import useToggleState from "../../../../hooks/use-toggle-state"
+import { ReservationItemDTO } from "@medusajs/types"
 
 type SummaryCardProps = {
   order: Order

packages/admin-ui/ui/src/domain/orders/details/index.tsx

@@ -62,7 +62,7 @@ import useClipboard from "../../../hooks/use-clipboard"
 import { useHotkeys } from "react-hotkeys-hook"
 import useImperativeDialog from "../../../hooks/use-imperative-dialog"
 import useNotification from "../../../hooks/use-notification"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import useToggleState from "../../../hooks/use-toggle-state"
 import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 
@@ -154,7 +154,9 @@ const OrderDetails = () => {
     enabled: !!order?.region_id,
   })
   const { isFeatureEnabled } = useFeatureFlag()
-  const inventoryEnabled = isFeatureEnabled("inventoryService")
+  const inventoryEnabled = useMemo(() => {
+    return isFeatureEnabled("inventoryService")
+  }, [isFeatureEnabled])
 
   const { reservations, refetch: refetchReservations } = useAdminReservations(
     {
@@ -541,7 +543,7 @@ const OrderDetails = () => {
                 orderToFulfill={order as any}
                 handleCancel={() => setShowFulfillment(false)}
                 orderId={order.id}
-                onComplete={refetchReservations}
+                onComplete={inventoryEnabled ? refetchReservations : () => {}}
               />
             )}
             {showRefund && (

packages/admin-ui/ui/src/hooks/use-stock-locations.ts

@@ -1,7 +1,22 @@
 import { useAdminStockLocations } from "medusa-react"
+import { useEffect } from "react"
+import { useFeatureFlag } from "../providers/feature-flag-provider"
 
 const useStockLocations = () => {
-  const { stock_locations } = useAdminStockLocations()
+  const { isFeatureEnabled } = useFeatureFlag()
+  const isStockLocationsEnabled = isFeatureEnabled("stockLocationService")
+  const { stock_locations, refetch } = useAdminStockLocations(
+    {},
+    {
+      enabled: isStockLocationsEnabled,
+    }
+  )
+
+  useEffect(() => {
+    if (isStockLocationsEnabled) {
+      void refetch()
+    }
+  }, [isStockLocationsEnabled, refetch])
 
   const getLocationNameById = (locationId: string | null) =>
     stock_locations?.find((stock_location) => stock_location.id === locationId)