feat(dashboard): claims first implementation

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

@@ -56,7 +56,10 @@ export const useClaims = (
 export const useCreateClaim = (
   orderId: string,
   options?: UseMutationOptions<
-    HttpTypes.AdminClaimResponse,
+    {
+      claim: HttpTypes.AdminClaimResponse
+      order: HttpTypes.AdminOrderResponse
+    },
     Error,
     HttpTypes.AdminCreateClaim
   >
@@ -75,6 +78,11 @@ export const useCreateClaim = (
       queryClient.invalidateQueries({
         queryKey: ordersQueryKeys.preview(orderId),
       })
+
+      queryClient.invalidateQueries({
+        queryKey: claimsQueryKeys.lists(),
+      })
+
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
@@ -103,6 +111,7 @@ export const useCancelClaim = (
       queryClient.invalidateQueries({
         queryKey: claimsQueryKeys.details(),
       })
+
       queryClient.invalidateQueries({
         queryKey: claimsQueryKeys.lists(),
       })
@@ -231,7 +240,7 @@ export const useAddClaimInboundItems = (
   })
 }
 
-export const useUpdateClaimInboundItems = (
+export const useUpdateClaimInboundItem = (
   id: string,
   orderId: string,
   options?: UseMutationOptions<

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -882,6 +882,12 @@
         }
       }
     },
+    "claims": {
+      "create": "Create Claim",
+      "outbound": "Outbound",
+      "refundAmount": "Estimated difference",
+      "activeChangeError": "There is an active order change on this order. Please finish or discard the previous change."
+    },
     "reservations": {
       "allocatedLabel": "Allocated",
       "notAllocatedLabel": "Not allocated"

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

@@ -243,6 +243,11 @@ export const RouteMap: RouteObject[] = [
                     lazy: () =>
                       import("../../routes/orders/order-create-return"),
                   },
+                  {
+                    path: "claims",
+                    lazy: () =>
+                      import("../../routes/orders/order-create-claim"),
+                  },
                   {
                     path: "payments/:paymentId/refund",
                     lazy: () =>

packages/admin-next/dashboard/src/routes/orders/order-create-claim/claim-create.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate, useParams } from "react-router-dom"
+
+import { toast } from "@medusajs/ui"
+
+import { RouteFocusModal } from "../../../components/modals"
+import { ClaimCreateForm } from "./components/claim-create-form"
+
+import { useOrder, useOrderPreview } from "../../../hooks/api/orders"
+import { useClaims, useCreateClaim } from "../../../hooks/api/claims"
+import { DEFAULT_FIELDS } from "../order-detail/constants"
+
+let IS_REQUEST_RUNNING = false
+
+export const ClaimCreate = () => {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+
+  const { order } = useOrder(id!, {
+    fields: DEFAULT_FIELDS,
+  })
+
+  const { order: preview } = useOrderPreview(id!)
+
+  const [activeClaimId, setActiveClaimId] = useState()
+
+  const { mutateAsync: createClaim } = useCreateClaim(order.id)
+
+  // TODO: GET /claims/:id is not implemented
+  // const { claim } = useClaim(activeClaimId, undefined, {
+  //   enabled: !!activeClaimId,
+  // })
+
+  // TEMP HACK: until the endpoint above is implemented
+  const { claims } = useClaims(undefined, {
+    enabled: !!activeClaimId,
+    limit: 999,
+  })
+
+  const claim = useMemo(() => {
+    if (claims) {
+      return claims.find((c) => c.id === activeClaimId)
+    }
+  }, [claims, activeClaimId])
+
+  useEffect(() => {
+    async function run() {
+      if (IS_REQUEST_RUNNING || !preview) {
+        return
+      }
+
+      if (preview.order_change) {
+        if (preview.order_change.change_type === "claim") {
+          setActiveClaimId(preview.order_change.claim_id)
+        } else {
+          navigate(`/orders/${preview.id}`, { replace: true })
+          toast.error(t("orders.claims.activeChangeError"))
+        }
+
+        return
+      }
+
+      IS_REQUEST_RUNNING = true
+
+      try {
+        const { claim } = await createClaim({
+          order_id: preview.id,
+          type: "replace",
+        })
+        setActiveClaimId(claim.id)
+      } catch (e) {
+        navigate(`/orders/${preview.id}`, { replace: true })
+        toast.error(e.message)
+      } finally {
+        IS_REQUEST_RUNNING = false
+      }
+    }
+
+    run()
+  }, [preview])
+
+  return (
+    <RouteFocusModal>
+      {claim && preview && order && (
+        <ClaimCreateForm order={order} claim={claim} preview={preview} />
+      )}
+    </RouteFocusModal>
+  )
+}