Feat(admin, medusa): add locations to claim and swap creation (#3522)

**What**
- Add location selection to claim and swap creation

Fixes CORE-1269

packages/admin-ui/ui/src/domain/orders/details/claim/register-claim-menu.tsx

@@ -1,15 +1,18 @@
-import { ClaimReason, Order } from "@medusajs/medusa"
-import { useAdminCreateClaim } from "medusa-react"
+import { ClaimReason, Order, StockLocationDTO } from "@medusajs/medusa"
+import { useAdminStockLocations, useAdminCreateClaim } from "medusa-react"
 import { useEffect } from "react"
-import { useForm, useWatch } from "react-hook-form"
+import { Controller, useForm, useWatch } from "react-hook-form"
+import Spinner from "../../../../components/atoms/spinner"
 import Button from "../../../../components/fundamentals/button"
 import Modal from "../../../../components/molecules/modal"
 import LayeredModal, {
   useLayeredModal,
 } from "../../../../components/molecules/modal/layered-modal"
+import Select from "../../../../components/molecules/select/next-select/select"
 import { AddressPayload } from "../../../../components/templates/address-form"
 import useImperativeDialog from "../../../../hooks/use-imperative-dialog"
 import useNotification from "../../../../hooks/use-notification"
+import { useFeatureFlag } from "../../../../providers/feature-flag-provider"
 import { getErrorMessage } from "../../../../utils/error-messages"
 import { nestedForm } from "../../../../utils/nested-form"
 import ClaimTypeForm, {
@@ -35,6 +38,10 @@ export type CreateClaimFormType = {
   return_items: ItemsToReturnFormType
   additional_items: ItemsToSendFormType
   return_shipping: ShippingFormType
+  selected_location?: {
+    value: string
+    label: string
+  }
   replacement_shipping: ShippingFormType
   shipping_address: AddressPayload
   claim_type: ClaimTypeFormType
@@ -50,6 +57,28 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
   const context = useLayeredModal()
   const { mutate, isLoading } = useAdminCreateClaim(order.id)
 
+  const { isFeatureEnabled } = useFeatureFlag()
+  const isLocationFulfillmentEnabled =
+    isFeatureEnabled("inventoryService") &&
+    isFeatureEnabled("stockLocationService")
+
+  const {
+    stock_locations,
+    refetch: refetchLocations,
+    isLoading: isLoadingLocations,
+  } = useAdminStockLocations(
+    {},
+    {
+      enabled: isLocationFulfillmentEnabled,
+    }
+  )
+
+  useEffect(() => {
+    if (isLocationFulfillmentEnabled) {
+      refetchLocations()
+    }
+  }, [isLocationFulfillmentEnabled, refetchLocations])
+
   const form = useForm<CreateClaimFormType>({
     defaultValues: getDefaultClaimValues(order),
   })
@@ -58,6 +87,7 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
     reset,
     formState: { isDirty },
     setError,
+    control,
   } = form
 
   const notification = useNotification()
@@ -91,6 +121,7 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
     const type = data.claim_type.type
     const returnShipping = data.return_shipping
     const refundAmount = data.refund_amount?.amount
+    const returnLocation = data.selected_location?.value
 
     const replacementShipping =
       type === "replace" && data.replacement_shipping.option
@@ -184,6 +215,7 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
                 province: data.shipping_address.province || undefined,
               }
             : undefined,
+        return_location_id: returnLocation,
         shipping_methods: replacementShipping
           ? [replacementShipping]
           : undefined,
@@ -239,6 +271,41 @@ const RegisterClaimMenu = ({ order, onClose }: Props) => {
                 isReturn={true}
                 isClaim={true}
               />
+
+              {isLocationFulfillmentEnabled && (
+                <div className="mb-8">
+                  <h3 className="inter-base-semibold ">Location</h3>
+                  <p className="inter-base-regular text-grey-50">
+                    Choose which location you want to return the items to.
+                  </p>
+                  {isLoadingLocations ? (
+                    <Spinner />
+                  ) : (
+                    <Controller
+                      control={control}
+                      name={"selected_location"}
+                      render={({ field: { value, onChange } }) => {
+                        return (
+                          <Select
+                            className="mt-2"
+                            placeholder="Select Location to Return to"
+                            value={value}
+                            isMulti={false}
+                            onChange={onChange}
+                            options={
+                              stock_locations?.map((sl: StockLocationDTO) => ({
+                                label: sl.name,
+                                value: sl.id,
+                              })) || []
+                            }
+                          />
+                        )
+                      }}
+                    />
+                  )}
+                </div>
+              )}
+
               <ClaimTypeForm form={nestedForm(form, "claim_type")} />
               {watchedType === "replace" && (
                 <>

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

@@ -3,7 +3,9 @@ import {
   Order,
   ProductVariant,
   ReturnReason,
+  StockLocationDTO,
 } from "@medusajs/medusa"
+import { useAdminStockLocations } from "medusa-react"
 import {
   useAdminCreateSwap,
   useAdminOrder,
@@ -23,6 +25,7 @@ import Select from "../../../../components/molecules/select"
 import RMAReturnProductsTable from "../../../../components/organisms/rma-return-product-table"
 import RMASelectProductTable from "../../../../components/organisms/rma-select-product-table"
 import useNotification from "../../../../hooks/use-notification"
+import { useFeatureFlag } from "../../../../providers/feature-flag-provider"
 import { Option } from "../../../../types/shared"
 import { getErrorMessage } from "../../../../utils/error-messages"
 import { formatAmountWithSymbol } from "../../../../utils/prices"
@@ -62,6 +65,32 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
     undefined
   )
   const [noNotification, setNoNotification] = useState(order.no_notification)
+  const [selectedLocation, setSelectedLocation] = React.useState<{
+    value: string
+    label: string
+  } | null>(null)
+
+  const { isFeatureEnabled } = useFeatureFlag()
+  const isLocationFulfillmentEnabled =
+    isFeatureEnabled("inventoryService") &&
+    isFeatureEnabled("stockLocationService")
+
+  const {
+    stock_locations,
+    refetch: refetchLocations,
+    isLoading: isLoadingLocations,
+  } = useAdminStockLocations(
+    {},
+    {
+      enabled: isLocationFulfillmentEnabled,
+    }
+  )
+
+  React.useEffect(() => {
+    if (isLocationFulfillmentEnabled) {
+      refetchLocations()
+    }
+  }, [isLocationFulfillmentEnabled, refetchLocations])
 
   const notification = useNotification()
 
@@ -195,6 +224,10 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
         noNotification !== order.no_notification ? noNotification : undefined,
     }
 
+    if (isLocationFulfillmentEnabled && selectedLocation) {
+      data.return_location_id = selectedLocation.value
+    }
+
     if (shippingMethod) {
       data.return_shipping = {
         option_id: shippingMethod.value,
@@ -263,6 +296,32 @@ const SwapMenu: React.FC<SwapMenuProps> = ({ order, onDismiss }) => {
               />
             )}
           </div>
+          {isLocationFulfillmentEnabled && (
+            <div className="my-8">
+              <h3 className="inter-base-semibold ">Location</h3>
+              <p className="inter-base-regular text-grey-50">
+                Choose which location you want to return the items to.
+              </p>
+              {isLoadingLocations ? (
+                <Spinner />
+              ) : (
+                <Select
+                  className="mt-2"
+                  placeholder="Select Location to Return to"
+                  value={selectedLocation}
+                  isMulti={false}
+                  onChange={setSelectedLocation}
+                  options={
+                    stock_locations?.map((sl: StockLocationDTO) => ({
+                      label: sl.name,
+                      value: sl.id,
+                    })) || []
+                  }
+                />
+              )}
+            </div>
+          )}
+
           <div className="mt-8 flex items-center justify-between">
             <h3 className="inter-base-semibold ">Items to send</h3>
             {itemsToAdd.length === 0 ? (