@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

package/src/routes/orders/order-create-claim/components/claim-create-form/claim-outbound-section.tsx

@@ -24,13 +24,14 @@ import {
   useRemoveClaimOutboundItem,
   useUpdateClaimOutboundItems,
 } from "../../../../../hooks/api/claims"
-import { useShippingOptions } from "../../../../../hooks/api/shipping-options"
 import { sdk } from "../../../../../lib/client"
 import { OutboundShippingPlaceholder } from "../../../common/placeholders"
 import { AddClaimOutboundItemsTable } from "../add-claim-outbound-items-table"
 import { ClaimOutboundItem } from "./claim-outbound-item"
 import { ItemPlaceholder } from "./item-placeholder"
 import { CreateClaimSchemaType } from "./schema"
+import { useOrderShippingOptions } from "../../../../../hooks/api/orders"
+import { getFormattedShippingOptionLocationName } from "../../../../../lib/shipping-options"
 
 type ClaimOutboundSectionProps = {
   order: AdminOrder
@@ -58,16 +59,12 @@ export const ClaimOutboundSection = ({
   /**
    * HOOKS
    */
-  const { shipping_options = [] } = useShippingOptions({
-    limit: 999,
-    fields: "*prices,+service_zone.fulfillment_set.location.id",
-  })
+  const { shipping_options = [] } = useOrderShippingOptions(order.id)
 
+  // TODO: filter in the API when boolean filter is supported and fulfillment module support partial rule SO filtering
   const outboundShippingOptions = shipping_options.filter(
-    (shippingOption) =>
-      !!shippingOption.rules.find(
-        (r) => r.attribute === "is_return" && r.value === "false"
-      )
+    (so) =>
+      !so.rules?.find((r) => r.attribute === "is_return" && r.value === "true")
   )
 
   const { mutateAsync: addOutboundShipping } = useAddClaimOutboundShipping(
@@ -415,7 +412,7 @@ export const ClaimOutboundSection = ({
                         }}
                         {...field}
                         options={outboundShippingOptions.map((so) => ({
-                          label: so.name,
+                          label: `${so.name} (${getFormattedShippingOptionLocationName(so)})`,
                           value: so.id,
                         }))}
                         disabled={!outboundShippingOptions.length}

package/src/routes/orders/order-create-edit/components/order-edit-create-form/order-edit-create-form.tsx

@@ -179,7 +179,8 @@ export const OrderEditCreateForm = ({
                       <div className="flex items-center">
                         <Form.Control className="mr-4 self-start">
                           <Switch
-                            className="mt-[2px]"
+                            dir="ltr"
+                            className="mt-[2px] rtl:rotate-180"
                             checked={!!value}
                             onCheckedChange={onChange}
                             {...field}

package/src/routes/orders/order-create-edit/components/order-edit-create-form/order-edit-item.tsx

@@ -137,7 +137,7 @@ function OrderEditItem({ item, currencyCode, orderId }: OrderEditItemProps) {
                 {item.variant_sku && <span>({item.variant_sku})</span>}
               </div>
               <Text as="div" className="text-ui-fg-subtle txt-small">
-                {item.product_title}
+                {item.subtitle}
               </Text>
             </div>
           </div>

package/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx

@@ -60,10 +60,18 @@ export const ExchangeCreateForm = ({
     useState(false)
   const [isOutboundShippingPriceEdit, setIsOutboundShippingPriceEdit] =
     useState(false)
+
   const [customInboundShippingAmount, setCustomInboundShippingAmount] =
-    useState<number | string>(0)
+    useState<{ value: string; float: number | null }>({
+      value: "0",
+      float: 0,
+    })
+
   const [customOutboundShippingAmount, setCustomOutboundShippingAmount] =
-    useState<number | string>(0)
+    useState<{ value: string; float: number | null }>({
+      value: "0",
+      float: 0,
+    })
 
   /**
    * MUTATIONS
@@ -252,6 +260,15 @@ export const ExchangeCreateForm = ({
     return (method?.total as number) || 0
   }, [preview.shipping_methods])
 
+  const outboundShippingTotal = useMemo(() => {
+    const method = preview.shipping_methods.find(
+      (sm) =>
+        !!sm.actions?.find((a) => a.action === "SHIPPING_ADD" && !a.return_id)
+    )
+
+    return (method?.total as number) || 0
+  }, [preview.shipping_methods])
+
   return (
     <RouteFocusModal.Form form={form}>
       <KeyboundForm onSubmit={handleSubmit} className="flex h-full flex-col">
@@ -356,10 +373,7 @@ export const ExchangeCreateForm = ({
                           }
                         })
 
-                        const customPrice =
-                          customInboundShippingAmount === ""
-                            ? null
-                            : parseFloat(customInboundShippingAmount)
+                        const customPrice = customInboundShippingAmount.float
 
                         if (actionId) {
                           updateInboundShipping(
@@ -381,8 +395,13 @@ export const ExchangeCreateForm = ({
                           .symbol_native
                       }
                       code={order.currency_code}
-                      onValueChange={setCustomInboundShippingAmount}
-                      value={customInboundShippingAmount}
+                      onValueChange={(value, name, values) =>
+                        setCustomInboundShippingAmount({
+                          value: values?.value ?? "",
+                          float: values?.float ?? null,
+                        })
+                      }
+                      value={customInboundShippingAmount.value}
                       disabled={!inboundPreviewItems?.length}
                     />
                   ) : (
@@ -427,10 +446,7 @@ export const ExchangeCreateForm = ({
                           }
                         })
 
-                        const customPrice =
-                          customOutboundShippingAmount === ""
-                            ? null
-                            : parseFloat(customOutboundShippingAmount)
+                        const customPrice = customOutboundShippingAmount.float
 
                         if (actionId) {
                           updateOutboundShipping(
@@ -452,13 +468,18 @@ export const ExchangeCreateForm = ({
                           .symbol_native
                       }
                       code={order.currency_code}
-                      onValueChange={setCustomOutboundShippingAmount}
-                      value={customOutboundShippingAmount}
+                      onValueChange={(value, name, values) =>
+                        setCustomOutboundShippingAmount({
+                          value: values?.value ?? "",
+                          float: values?.float ?? null,
+                        })
+                      }
+                      value={customOutboundShippingAmount.value}
                       disabled={!outboundPreviewItems?.length}
                     />
                   ) : (
                     getStylizedAmount(
-                      outboundShipping?.amount ?? 0,
+                      outboundShippingTotal,
                       order.currency_code
                     )
                   )}
@@ -488,7 +509,8 @@ export const ExchangeCreateForm = ({
                       <div className="flex items-center">
                         <Form.Control className="mr-4 self-start">
                           <Switch
-                            className="mt-[2px]"
+                            dir="ltr"
+                            className="mt-[2px] rtl:rotate-180"
                             checked={!!value}
                             onCheckedChange={onChange}
                             {...field}

package/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-outbound-item.tsx

@@ -49,7 +49,7 @@ function ExchangeOutboundItem({
               )}
             </div>
             <Text as="div" className="text-ui-fg-subtle txt-small">
-              {previewItem.product_title}
+              {previewItem.subtitle}
             </Text>
           </div>
         </div>

package/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-outbound-section.tsx

@@ -23,13 +23,14 @@ import {
   useRemoveExchangeOutboundItem,
   useUpdateExchangeOutboundItems,
 } from "../../../../../hooks/api/exchanges"
-import { useShippingOptions } from "../../../../../hooks/api/shipping-options"
 import { sdk } from "../../../../../lib/client"
 import { OutboundShippingPlaceholder } from "../../../common/placeholders"
 import { ItemPlaceholder } from "../../../order-create-claim/components/claim-create-form/item-placeholder"
 import { AddExchangeOutboundItemsTable } from "../add-exchange-outbound-items-table"
 import { ExchangeOutboundItem } from "./exchange-outbound-item"
+import { useOrderShippingOptions } from "../../../../../hooks/api/orders"
 import { CreateExchangeSchemaType } from "./schema"
+import { getFormattedShippingOptionLocationName } from "../../../../../lib/shipping-options"
 
 type ExchangeOutboundSectionProps = {
   order: AdminOrder
@@ -57,16 +58,12 @@ export const ExchangeOutboundSection = ({
   /**
    * HOOKS
    */
-  const { shipping_options = [] } = useShippingOptions({
-    limit: 999,
-    fields: "*prices,+service_zone.fulfillment_set.location.id",
-  })
+  const { shipping_options = [] } = useOrderShippingOptions(order.id)
 
+  // TODO: filter in the API when boolean filter is supported and fulfillment module support partial rule SO filtering
   const outboundShippingOptions = shipping_options.filter(
-    (shippingOption) =>
-      !!shippingOption.rules.find(
-        (r) => r.attribute === "is_return" && r.value === "false"
-      )
+    (so) =>
+      !so.rules?.find((r) => r.attribute === "is_return" && r.value === "true")
   )
 
   const { mutateAsync: addOutboundShipping } = useAddExchangeOutboundShipping(
@@ -424,7 +421,7 @@ export const ExchangeOutboundSection = ({
                         }}
                         {...field}
                         options={outboundShippingOptions.map((so) => ({
-                          label: so.name,
+                          label: `${so.name} (${getFormattedShippingOptionLocationName(so)})`,
                           value: so.id,
                         }))}
                         disabled={!outboundShippingOptions.length}

package/src/routes/orders/order-create-fulfillment/components/order-create-fulfillment-form/order-create-fulfillment-form.tsx

@@ -15,7 +15,6 @@ import {
 } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useCreateOrderFulfillment } from "../../../../../hooks/api/orders"
-import { useStockLocations } from "../../../../../hooks/api/stock-locations"
 import { getFulfillableQuantity } from "../../../../../lib/order-item"
 import { CreateFulfillmentSchema } from "./constants"
 import { OrderCreateFulfillmentItem } from "./order-create-fulfillment-item"
@@ -23,6 +22,11 @@ import {
   useReservationItems,
   useShippingOptions,
 } from "../../../../../hooks/api"
+import { getReservationsLimitCount } from "../../../../../lib/orders"
+import { sdk } from "../../../../../lib/client"
+import { useComboboxData } from "../../../../../hooks/use-combobox-data"
+import { Combobox } from "../../../../../components/inputs/combobox"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type OrderCreateFulfillmentFormProps = {
   order: AdminOrder
@@ -35,19 +39,24 @@ export function OrderCreateFulfillmentForm({
 }: OrderCreateFulfillmentFormProps) {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const { mutateAsync: createOrderFulfillment, isPending: isMutating } =
     useCreateOrderFulfillment(order.id)
 
   const { reservations } = useReservationItems({
     line_item_id: order.items.map((i) => i.id),
+    limit: getReservationsLimitCount(order),
   })
 
-  const itemReservedQuantitiesMap = useMemo(
-    () =>
-      new Map((reservations || []).map((r) => [r.line_item_id, r.quantity])),
-    [reservations]
-  )
+  const stockLocations = useComboboxData({
+    queryFn: (params) => sdk.admin.stockLocation.list(params),
+    queryKey: ["stock_locations"],
+    getOptions: (data) =>
+      data.stock_locations.map((location) => ({
+        label: location.name,
+        value: location.id,
+      })),
+  })
 
   const [fulfillableItems, setFulfillableItems] = useState(() =>
     (order.items || []).filter(
@@ -76,8 +85,6 @@ export function OrderCreateFulfillmentForm({
     control: form.control,
   })
 
-  const { stock_locations = [] } = useStockLocations()
-
   const { shipping_options = [], isLoading: isShippingOptionsLoading } =
     useShippingOptions({
       stock_location_id: selectedLocationId,
@@ -153,7 +160,7 @@ export function OrderCreateFulfillmentForm({
   })
 
   useEffect(() => {
-    if (stock_locations?.length && shipping_options?.length) {
+    if (shipping_options?.length) {
       const initialShippingOptionId =
         order.shipping_methods?.[0]?.shipping_option_id
 
@@ -174,7 +181,7 @@ export function OrderCreateFulfillmentForm({
         } // else -> TODO: what if original shipping option is deleted?
       }
     }
-  }, [stock_locations?.length, shipping_options?.length])
+  }, [shipping_options])
 
   const fulfilledQuantityArray = (order.items || []).map(
     (item) =>
@@ -232,7 +239,7 @@ export function OrderCreateFulfillmentForm({
                   <Form.Field
                     control={form.control}
                     name="location_id"
-                    render={({ field: { onChange, ref, ...field } }) => {
+                    render={({ field: { ...field } }) => {
                       return (
                         <Form.Item>
                           <div className="flex flex-col gap-2 xl:flex-row xl:items-center">
@@ -244,21 +251,15 @@ export function OrderCreateFulfillmentForm({
                             </div>
                             <div className="flex-1">
                               <Form.Control>
-                                <Select onValueChange={onChange} {...field}>
-                                  <Select.Trigger
-                                    className="bg-ui-bg-base"
-                                    ref={ref}
-                                  >
-                                    <Select.Value />
-                                  </Select.Trigger>
-                                  <Select.Content>
-                                    {stock_locations.map((l) => (
-                                      <Select.Item key={l.id} value={l.id}>
-                                        {l.name}
-                                      </Select.Item>
-                                    ))}
-                                  </Select.Content>
-                                </Select>
+                                <Combobox
+                                  {...field}
+                                  options={stockLocations.options}
+                                  searchValue={stockLocations.searchValue}
+                                  onSearchValueChange={
+                                    stockLocations.onSearchValueChange
+                                  }
+                                  disabled={stockLocations.disabled}
+                                />
                               </Form.Control>
                             </div>
                           </div>
@@ -288,6 +289,7 @@ export function OrderCreateFulfillmentForm({
                             <div className="flex-1">
                               <Form.Control>
                                 <Select
+                                  dir={direction}
                                   onValueChange={onChange}
                                   {...field}
                                   disabled={!selectedLocationId}
@@ -358,9 +360,7 @@ export function OrderCreateFulfillmentForm({
                             disabled={
                               requiresShipping && !isShippingProfileMatching
                             }
-                            itemReservedQuantitiesMap={
-                              itemReservedQuantitiesMap
-                            }
+                            reservations={reservations}
                           />
                         )
                       })}
@@ -392,6 +392,8 @@ export function OrderCreateFulfillmentForm({
                             <Form.Control>
                               <Form.Control>
                                 <Switch
+                                  dir="ltr"
+                                  className="rtl:rotate-180"
                                   checked={!!value}
                                   onCheckedChange={onChange}
                                   {...field}

package/src/routes/orders/order-create-fulfillment/components/order-create-fulfillment-form/order-create-fulfillment-item.tsx

@@ -17,7 +17,7 @@ type OrderEditItemProps = {
   currencyCode: string
   locationId?: string
   onItemRemove: (itemId: string) => void
-  itemReservedQuantitiesMap: Map<string, number>
+  reservations: HttpTypes.AdminReservation[]
   form: UseFormReturn<zod.infer<typeof CreateFulfillmentSchema>>
   disabled: boolean
 }
@@ -26,7 +26,7 @@ export function OrderCreateFulfillmentItem({
   item,
   form,
   locationId,
-  itemReservedQuantitiesMap,
+  reservations,
   disabled,
 }: OrderEditItemProps) {
   const { t } = useTranslation()
@@ -35,7 +35,7 @@ export function OrderCreateFulfillmentItem({
     item.product_id,
     item.variant_id,
     {
-      fields: "*inventory,*inventory.location_levels",
+      fields: "*inventory,*inventory.location_levels,*inventory_items",
     },
     {
       enabled: !!item.variant,
@@ -43,28 +43,83 @@ export function OrderCreateFulfillmentItem({
   )
 
   const { availableQuantity, inStockQuantity } = useMemo(() => {
-    if (!variant || !locationId) {
+    if (
+      !variant?.inventory_items?.length ||
+      !variant?.inventory?.length ||
+      !locationId
+    ) {
       return {}
     }
 
-    const { inventory } = variant
+    const { inventory, inventory_items } = variant
 
-    const locationInventory = inventory[0]?.location_levels?.find(
-      (inv) => inv.location_id === locationId
+    const locationHasEveryInventoryItem = inventory.every((i) =>
+      i.location_levels?.find((inv) => inv.location_id === locationId)
     )
 
-    if (!locationInventory) {
+    if (!locationHasEveryInventoryItem) {
       return {}
     }
 
-    const reservedQuantityForItem = itemReservedQuantitiesMap.get(item.id) ?? 0
+    const inventoryItemRequiredQuantityMap = new Map(
+      inventory_items.map((i) => [i.inventory_item_id, i.required_quantity])
+    )
+
+    // since we don't allow split fulifllments only one reservation from inventory kit is enough to calculate avalabel product quantity
+    const reservation = reservations?.find((r) => r.line_item_id === item.id)
+    const iitemRequiredQuantity = inventory_items.find(
+      (i) => i.inventory_item_id === reservation?.inventory_item_id
+    )?.required_quantity
+
+    const reservedQuantityForItem = !reservation
+      ? 0
+      : reservation?.quantity / (iitemRequiredQuantity || 1)
+
+    const locationInventoryLevels = inventory.map((i) => {
+      const level = i.location_levels?.find(
+        (inv) => inv.location_id === locationId
+      )
+
+      const requiredQuantity = inventoryItemRequiredQuantityMap.get(i.id)
+
+      if (!level || !requiredQuantity) {
+        return {
+          availableQuantity: Number.MAX_SAFE_INTEGER,
+          stockedQuantity: Number.MAX_SAFE_INTEGER,
+        }
+      }
+
+      const availableQuantity = level.available_quantity / requiredQuantity
+      const stockedQuantity = level.stocked_quantity / requiredQuantity
+
+      return {
+        availableQuantity,
+        stockedQuantity,
+      }
+    })
+
+    const maxAvailableQuantity = Math.min(
+      ...locationInventoryLevels.map((i) => i.availableQuantity)
+    )
+
+    const maxStockedQuantity = Math.min(
+      ...locationInventoryLevels.map((i) => i.stockedQuantity)
+    )
+
+    if (
+      maxAvailableQuantity === Number.MAX_SAFE_INTEGER ||
+      maxStockedQuantity === Number.MAX_SAFE_INTEGER
+    ) {
+      return {}
+    }
 
     return {
-      availableQuantity:
-        locationInventory.available_quantity + reservedQuantityForItem,
-      inStockQuantity: locationInventory.stocked_quantity,
+      availableQuantity: Math.floor(
+        maxAvailableQuantity + reservedQuantityForItem
+      ),
+      inStockQuantity: Math.floor(maxStockedQuantity),
     }
-  }, [variant, locationId, itemReservedQuantitiesMap])
+  }, [variant, locationId, reservations])
 
   const minValue = 0
   const maxValue = Math.min(
@@ -76,7 +131,7 @@ export function OrderCreateFulfillmentItem({
     <div className="bg-ui-bg-subtle shadow-elevation-card-rest my-2 rounded-xl">
       <div className="flex flex-row items-center">
         {disabled && (
-          <div className="inline-flex items-center ml-4">
+          <div className="ml-4 inline-flex items-center">
             <Tooltip
               content={t("orders.fulfillment.disabledItemTooltip")}
               side="top"
@@ -88,8 +143,8 @@ export function OrderCreateFulfillmentItem({
 
         <div
           className={clx(
-            "flex flex-col flex-1 gap-x-2 gap-y-2 border-b p-3 text-sm sm:flex-row",
-            disabled && "opacity-50 pointer-events-none"
+            "flex flex-1 flex-col gap-x-2 gap-y-2 border-b p-3 text-sm sm:flex-row",
+            disabled && "pointer-events-none opacity-50"
           )}
         >
           <div className="flex flex-1 items-center gap-x-3">