feat(dashboard): order fulfillment UI

.changeset/long-islands-press.md

@@ -0,0 +1,9 @@
+---
+"@medusajs/link-modules": patch
+"@medusajs/core-flows": patch
+"@medusajs/types": patch
+"@medusajs/utils": patch
+"@medusajs/medusa": patch
+---
+
+feat: add Order<>Fulfillment link

integration-tests/modules/__tests__/fixtures/fulfillment/index.ts

@@ -49,6 +49,7 @@ export function generateCreateFulfillmentData(
       },
     ],
     order: data.order ?? {},
+    order_id: data.order_id,
   }
 }
 

integration-tests/modules/__tests__/fulfillment/index.spec.ts

@@ -140,6 +140,7 @@ medusaIntegrationTestRunner({
         const data = generateCreateFulfillmentData({
           provider_id: providerId,
           shipping_option_id: shippingOption.id,
+          order_id: "order_123",
         })
 
         const response = await api

packages/admin-next/dashboard/public/locales/en-US/translation.json

@@ -528,8 +528,20 @@
       "unfulfilledItems": "Unfulfilled Items",
       "statusLabel": "Fulfillment status",
       "statusTitle": "Fulfillment Status",
-      "awaitingFullfillmentBadge": "Awaiting fulfillment",
+      "fulfillItems": "Fulfill items",
+      "awaitingFulfillmentBadge": "Awaiting fulfillment",
       "number": "Fulfillment #{{number}}",
+      "itemsToFulfill": "Items to fulfill",
+      "create": "Create Fulfillment",
+      "available": "Available",
+      "inStock": "In stock",
+      "itemsToFulfillDesc": "Choose items and quantities to fulfill",
+      "locationDescription": "Choose which location you want to fulfill items from.",
+      "error": {
+        "wrongQuantity": "Only one item is available for fulfillment",
+        "wrongQuantity_other": "Quantity should be a number between 1 and {{number}}",
+        "noItems": "No items to fulfill."
+      },
       "status": {
         "notFulfilled": "Not fulfilled",
         "partiallyFulfilled": "Partially fulfilled",
@@ -542,6 +554,7 @@
         "requiresAction": "Requires action"
       },
       "toast": {
+        "created": "Fulfillment created successfully",
         "canceled": "Fulfillment successfully canceled",
         "fulfillmentShipped": "Cannot cancel an already shipped fulfillment"
       },

packages/admin-next/dashboard/src/hooks/api/fulfillment.tsx

@@ -0,0 +1,43 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query"
+
+import { queryKeysFactory } from "../../lib/query-key-factory"
+
+import { client } from "../../lib/client"
+import { queryClient } from "../../lib/medusa"
+import { ordersQueryKeys } from "./orders"
+
+const FULFILLMENTS_QUERY_KEY = "fulfillments" as const
+export const fulfillmentsQueryKeys = queryKeysFactory(FULFILLMENTS_QUERY_KEY)
+
+export const useCreateFulfillment = (
+  options?: UseMutationOptions<any, Error, any>
+) => {
+  return useMutation({
+    mutationFn: (payload: any) => client.fulfillments.create(payload),
+    onSuccess: (data: any, variables: any, context: any) => {
+      queryClient.invalidateQueries({ queryKey: fulfillmentsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: ordersQueryKeys.details(),
+      })
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
+
+export const useCancelFulfillment = (
+  id: string,
+  options?: UseMutationOptions<any, Error, any>
+) => {
+  return useMutation({
+    mutationFn: () => client.fulfillments.cancel(id),
+    onSuccess: (data: any, variables: any, context: any) => {
+      queryClient.invalidateQueries({ queryKey: fulfillmentsQueryKeys.lists() })
+      queryClient.invalidateQueries({
+        queryKey: ordersQueryKeys.details(),
+      })
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

packages/admin-next/dashboard/src/lib/client/client.ts

@@ -14,6 +14,7 @@ import { productTypes } from "./product-types"
 import { products } from "./products"
 import { promotions } from "./promotions"
 import { regions } from "./regions"
+import { fulfillments } from "./fulfillments"
 import { fulfillmentProviders } from "./fulfillment-providers"
 import { reservations } from "./reservations"
 import { salesChannels } from "./sales-channels"
@@ -50,6 +51,7 @@ export const client = {
   invites: invites,
   inventoryItems: inventoryItems,
   reservations: reservations,
+  fulfillments: fulfillments,
   fulfillmentProviders: fulfillmentProviders,
   products: products,
   productTypes: productTypes,

packages/admin-next/dashboard/src/lib/client/fulfillments.ts

@@ -0,0 +1,17 @@
+import { CreateFulfillmentDTO } from "@medusajs/types"
+
+import { FulfillmentRes } from "../../types/api-responses"
+import { postRequest } from "./common"
+
+async function createFulfillment(payload: CreateFulfillmentDTO) {
+  return postRequest<FulfillmentRes>(`/admin/fulfillments`, payload)
+}
+
+async function cancelFulfillment(id: string) {
+  return postRequest<FulfillmentRes>(`/admin/fulfillments/${id}/cancel`)
+}
+
+export const fulfillments = {
+  create: createFulfillment,
+  cancel: cancelFulfillment,
+}

packages/admin-next/dashboard/src/lib/common.ts

@@ -14,3 +14,19 @@ export function pick(obj: Record<string, any>, keys: string[]) {
 
   return ret
 }
+
+/**
+ * Remove properties that are `null` or `undefined` from the object.
+ * @param obj
+ */
+export function cleanNonValues(obj: Record<string, any>) {
+  const ret: Record<string, any> = {}
+
+  for (const key in obj) {
+    if (obj[key] !== null && typeof obj[key] !== "undefined") {
+      ret[key] = obj[key]
+    }
+  }
+
+  return ret
+}

packages/admin-next/dashboard/src/lib/order-item.ts

@@ -0,0 +1,5 @@
+import { OrderLineItemDTO } from "@medusajs/types"
+
+export const getFulfillableQuantity = (item: OrderLineItemDTO) => {
+  return item.quantity - item.detail.fulfilled_quantity
+}

packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx

@@ -159,6 +159,13 @@ export const RouteMap: RouteObject[] = [
               {
                 path: ":id",
                 lazy: () => import("../../v2-routes/orders/order-detail"),
+                children: [
+                  {
+                    path: "fulfillment",
+                    lazy: () =>
+                      import("../../v2-routes/orders/order-create-fulfillment"),
+                  },
+                ],
               },
             ],
           },

packages/admin-next/dashboard/src/types/api-responses.ts

@@ -6,6 +6,7 @@ import {
   CampaignDTO,
   CurrencyDTO,
   CustomerGroupDTO,
+  FulfillmentDTO,
   FulfillmentProviderDTO,
   InventoryNext,
   InviteDTO,
@@ -73,6 +74,11 @@ export type RegionRes = { region: RegionDTO }
 export type RegionListRes = { regions: RegionDTO[] } & ListRes
 export type RegionDeleteRes = DeleteRes
 
+// Fulfillments
+export type FulfillmentRes = { fulfillment: FulfillmentDTO }
+export type FulfillmentListRes = { fulfillments: FulfillmentDTO[] } & ListRes
+export type FulfillmentDeleteRes = DeleteRes
+
 // Reservations
 export type ReservationRes = { reservation: InventoryNext.ReservationItemDTO }
 export type ReservationListRes = {

packages/admin-next/dashboard/src/v2-routes/orders/order-create-fulfillment/components/order-create-fulfillment-form/constants.ts

@@ -0,0 +1,8 @@
+import { z } from "zod"
+
+export const CreateFulfillmentSchema = z.object({
+  quantity: z.record(z.string(), z.number()),
+
+  location_id: z.string(),
+  send_notification: z.boolean().optional(),
+})

packages/admin-next/dashboard/src/v2-routes/orders/order-create-fulfillment/components/order-create-fulfillment-form/index.ts

@@ -0,0 +1 @@
+export * from "./order-create-fulfillment-form"