@medusajs/dashboard 2.10.4-snapshot-20250923121159 → 2.10.4-snapshot-20250925172615

package/src/routes/inventory/inventory-detail/components/manage-locations/components/manage-locations-form.tsx

@@ -1,111 +1,75 @@
-import * as zod from "zod"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { AdminInventoryItem, AdminStockLocation } from "@medusajs/types"
+import {
+  AdminInventoryItem,
+  AdminStockLocation,
+  HttpTypes,
+} from "@medusajs/types"
 import { Button, Text, toast } from "@medusajs/ui"
-import { useFieldArray, useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
-import { z } from "zod"
 import { RouteDrawer, useRouteModal } from "../../../../../../components/modals"
 import { useBatchInventoryItemLocationLevels } from "../../../../../../hooks/api/inventory"
+import { sdk } from "../../../../../../lib/client"
 
-import { useEffect, useMemo } from "react"
-import { KeyboundForm } from "../../../../../../components/utilities/keybound-form"
+import { useMemo, useState } from "react"
 import { LocationItem } from "./location-item"
+import { LocationSearchInput } from "./location-search-input"
+import { InfiniteList } from "../../../../../../components/common/infinite-list/infinite-list"
+import { useStockLocations } from "../../../../../../hooks/api/stock-locations"
 
 type EditInventoryItemAttributeFormProps = {
   item: AdminInventoryItem
   locations: AdminStockLocation[]
 }
 
-const EditInventoryItemAttributesSchema = z.object({
-  locations: z.array(
-    z.object({
-      id: z.string(),
-      location_id: z.string(),
-      selected: z.boolean(),
-    })
-  ),
-})
-
-const getDefaultValues = (
-  allLocations: AdminStockLocation[],
-  existingLevels: Set<string>
-) => {
-  return {
-    locations: allLocations.map((location) => ({
-      ...location,
-      location_id: location.id,
-      selected: existingLevels.has(location.id),
-    })),
-  }
-}
-
 export const ManageLocationsForm = ({
   item,
-  locations,
 }: EditInventoryItemAttributeFormProps) => {
   const existingLocationLevels = useMemo(
     () => new Set(item.location_levels?.map((l) => l.location_id) ?? []),
-    item.location_levels
+    [item.location_levels]
   )
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedLocationIds, setSelectedLocationIds] = useState<Set<string>>(
+    existingLocationLevels
+  )
 
-  const form = useForm<zod.infer<typeof EditInventoryItemAttributesSchema>>({
-    defaultValues: getDefaultValues(locations, existingLocationLevels),
-    resolver: zodResolver(EditInventoryItemAttributesSchema),
-  })
-
-  const { fields: locationFields, update: updateField } = useFieldArray({
-    control: form.control,
-    name: "locations",
-  })
+  const { count } = useStockLocations({ limit: 1, fields: "id" })
 
-  useEffect(() => {
-    form.setValue(
-      "locations",
-      getDefaultValues(locations, existingLocationLevels).locations
-    )
-  }, [existingLocationLevels, locations])
+  const handleLocationSelect = (locationId: string, selected: boolean) => {
+    setSelectedLocationIds((prev) => {
+      const newSet = new Set(prev)
+      if (selected) {
+        newSet.add(locationId)
+      } else {
+        newSet.delete(locationId)
+      }
+      return newSet
+    })
+  }
 
   const { mutateAsync } = useBatchInventoryItemLocationLevels(item.id)
 
-  const handleSubmit = form.handleSubmit(async ({ locations }) => {
-    // Changes in selected locations
-    const [selectedLocations, unselectedLocations] = locations.reduce(
-      (acc, location) => {
-        // If the location is not changed do nothing
-        if (
-          (!location.selected &&
-            !existingLocationLevels.has(location.location_id)) ||
-          (location.selected &&
-            existingLocationLevels.has(location.location_id))
-        ) {
-          return acc
-        }
+  const handleSubmit = async () => {
+    const toCreate = Array.from(selectedLocationIds).filter(
+      (id) => !existingLocationLevels.has(id)
+    )
 
-        if (location.selected) {
-          acc[0].push(location.location_id)
-        } else {
-          acc[1].push(location.location_id)
-        }
-        return acc
-      },
-      [[], []] as [string[], string[]]
+    const toDeleteLocations = Array.from(existingLocationLevels).filter(
+      (id) => !selectedLocationIds.has(id)
     )
 
-    if (selectedLocations.length === 0 && unselectedLocations.length === 0) {
-      return handleSuccess()
-    }
+    const toDelete = toDeleteLocations
+      .map((id) => item.location_levels?.find((l) => l.location_id === id)?.id)
+      .filter(Boolean) as unknown as string[]
 
     await mutateAsync(
       {
-        create: selectedLocations.map((location_id) => ({
+        create: toCreate.map((location_id) => ({
           location_id,
         })),
-        delete: unselectedLocations,
+        delete: toDelete,
       },
       {
         onSuccess: () => {
@@ -117,80 +81,103 @@ export const ManageLocationsForm = ({
         },
       }
     )
-  })
+  }
 
   return (
-    <RouteDrawer.Form form={form}>
-      <KeyboundForm
-        onSubmit={handleSubmit}
-        className="flex flex-1 flex-col overflow-hidden"
-      >
-        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
-          <div className="text-ui-fg-subtle shadow-elevation-card-rest grid grid-rows-2 divide-y rounded-lg border">
-            <div className="grid grid-cols-2 divide-x">
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {t("fields.title")}
-              </Text>
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {item.title ?? "-"}
-              </Text>
-            </div>
-            <div className="grid grid-cols-2 divide-x">
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {t("fields.sku")}
-              </Text>
-              <Text className="px-2 py-1.5" size="small" leading="compact">
-                {item.sku}
-              </Text>
-            </div>
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
+        <div className="text-ui-fg-subtle shadow-elevation-card-rest grid grid-rows-2 divide-y rounded-lg border">
+          <div className="grid grid-cols-2 divide-x">
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {t("fields.title")}
+            </Text>
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {item.title ?? "-"}
+            </Text>
           </div>
-          <div className="flex flex-col">
-            <Text size="small" weight="plus" leading="compact">
-              {t("locations.domain")}
+          <div className="grid grid-cols-2 divide-x">
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {t("fields.sku")}
+            </Text>
+            <Text className="px-2 py-1.5" size="small" leading="compact">
+              {item.sku}
             </Text>
-            <div className="text-ui-fg-subtle flex w-full justify-between">
-              <Text size="small" leading="compact">
-                {t("locations.selectLocations")}
-              </Text>
-              <Text size="small" leading="compact">
-                {"("}
-                {t("general.countOfTotalSelected", {
-                  count: locationFields.filter((l) => l.selected).length,
-                  total: locations.length,
-                })}
-                {")"}
-              </Text>
-            </div>
           </div>
-          {locationFields.map((location, idx) => {
-            return (
+        </div>
+        <div className="flex flex-col">
+          <Text size="small" weight="plus" leading="compact">
+            {t("locations.domain")}
+          </Text>
+          <div className="text-ui-fg-subtle flex w-full justify-between">
+            <Text size="small" leading="compact">
+              {t("locations.selectLocations")}
+            </Text>
+            <Text size="small" leading="compact">
+              {"("}
+              {t("general.countOfTotalSelected", {
+                count: selectedLocationIds.size,
+                total: count,
+              })}
+              {")"}
+            </Text>
+          </div>
+        </div>
+
+        <LocationSearchInput
+          onSearchChange={setSearchQuery}
+          placeholder={t("general.search")}
+        />
+
+        <div className="min-h-0 flex-1">
+          <InfiniteList<
+            HttpTypes.AdminStockLocationListResponse,
+            HttpTypes.AdminStockLocation,
+            HttpTypes.AdminStockLocationListParams
+          >
+            queryKey={["stock-locations", searchQuery]}
+            queryFn={async (params) => {
+              const response = await sdk.admin.stockLocation.list({
+                limit: params.limit,
+                offset: params.offset,
+                ...(searchQuery && { q: searchQuery }),
+              })
+              return response
+            }}
+            responseKey="stock_locations"
+            renderItem={(location) => (
               <LocationItem
-                selected={location.selected}
-                location={location as any}
-                onSelect={() =>
-                  updateField(idx, {
-                    ...location,
-                    selected: !location.selected,
-                  })
+                selected={selectedLocationIds.has(location.id)}
+                location={location}
+                onSelect={(selected) =>
+                  handleLocationSelect(location.id, selected)
                 }
-                key={location.id}
               />
-            )
-          })}
-        </RouteDrawer.Body>
-        <RouteDrawer.Footer>
-          <div className="flex items-center justify-end gap-x-2">
-            <RouteDrawer.Close asChild>
-              <Button variant="secondary" size="small">
-                {t("actions.cancel")}
-              </Button>
-            </RouteDrawer.Close>
-            <Button type="submit" size="small" isLoading={false}>
-              {t("actions.save")}
+            )}
+            renderEmpty={() => (
+              <div className="flex items-center justify-center py-8">
+                <Text size="small" className="text-ui-fg-subtle">
+                  {searchQuery
+                    ? t("locations.noLocationsFound")
+                    : t("locations.noLocationsFound")}
+                </Text>
+              </div>
+            )}
+            pageSize={20}
+          />
+        </div>
+      </RouteDrawer.Body>
+      <RouteDrawer.Footer>
+        <div className="flex items-center justify-end gap-x-2">
+          <RouteDrawer.Close asChild>
+            <Button variant="secondary" size="small">
+              {t("actions.cancel")}
             </Button>
-          </div>
-        </RouteDrawer.Footer>
-      </KeyboundForm>
-    </RouteDrawer.Form>
+          </RouteDrawer.Close>
+          <Button onClick={handleSubmit} size="small" isLoading={false}>
+            {t("actions.save")}
+          </Button>
+        </div>
+      </RouteDrawer.Footer>
+    </div>
   )
 }

package/src/routes/locations/location-edit/components/edit-location-form/edit-location-form.tsx

@@ -62,7 +62,7 @@ export const EditLocationForm = ({ location }: EditLocationFormProps) => {
       },
       {
         onSuccess: () => {
-          toast.success(t("stockLocations.edit.successToast"))
+          toast.success(t("stockLocations.edit.successToast", { name: name }))
           handleSuccess()
         },
         onError: (e) => {

package/src/routes/locations/location-list/location-list.tsx

@@ -11,6 +11,7 @@ import { DataTable } from "../../../components/data-table"
 import { SidebarLink } from "../../../components/common/sidebar-link/sidebar-link"
 import { TwoColumnPage } from "../../../components/layout/pages"
 import { useExtension } from "../../../providers/extension-provider"
+import { keepPreviousData } from "@tanstack/react-query"
 
 const PAGE_SIZE = 20
 const PREFIX = "loc"
@@ -29,10 +30,15 @@ export function LocationList() {
     isError,
     error,
     isLoading,
-  } = useStockLocations({
-    fields: LOCATION_LIST_FIELDS,
-    ...searchParams,
-  })
+  } = useStockLocations(
+    {
+      fields: LOCATION_LIST_FIELDS,
+      ...searchParams,
+    },
+    {
+      placeholderData: keepPreviousData,
+    }
+  )
 
   const columns = useLocationListTableColumns()
   const { getWidgets } = useExtension()

package/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-option-details-form.tsx

@@ -12,6 +12,7 @@ import { sdk } from "../../../../../lib/client"
 import { formatProvider } from "../../../../../lib/format-provider"
 import { FulfillmentSetType, ShippingOptionPriceType, } from "../../../common/constants"
 import { CreateShippingOptionSchema } from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type CreateShippingOptionDetailsFormProps = {
   form: UseFormReturn<CreateShippingOptionSchema>
@@ -33,7 +34,7 @@ export const CreateShippingOptionDetailsForm = ({
   type,
 }: CreateShippingOptionDetailsFormProps) => {
   const { t } = useTranslation()
-
+  const direction = useDocumentDirection()
   const isPickup = type === FulfillmentSetType.Pickup
 
   const shippingProfiles = useComboboxData({
@@ -105,6 +106,7 @@ export const CreateShippingOptionDetailsForm = ({
                   </Form.Label>
                   <Form.Control>
                     <RadioGroup
+                      dir={direction}
                       className="grid grid-cols-1 gap-4 md:grid-cols-2"
                       {...field}
                       onValueChange={field.onChange}
@@ -252,6 +254,7 @@ export const CreateShippingOptionDetailsForm = ({
                   </Form.Label>
                   <Form.Control>
                     <Select
+                      dir={direction}
                       {...field}
                       onValueChange={field.onChange}
                       disabled={!selectedProviderId}

package/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-form.tsx

@@ -24,6 +24,7 @@ import {
   CreateShippingOptionSchema,
 } from "./schema"
 import { useFulfillmentProviderOptions } from "../../../../../hooks/api"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAILS = "details",
@@ -48,7 +49,7 @@ export function CreateShippingOptionsForm({
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<CreateShippingOptionSchema>({
     defaultValues: {
       name: "",
@@ -271,6 +272,7 @@ export function CreateShippingOptionsForm({
         }}
       >
         <ProgressTabs
+          dir={direction}
           value={activeTab}
           className="flex h-full flex-col overflow-hidden"
           onValueChange={(tab) => onTabChange(tab as Tab)}

package/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx

@@ -20,6 +20,7 @@ import {
   ShippingOptionPriceType,
 } from "../../../common/constants"
 import { formatProvider } from "../../../../../lib/format-provider"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditShippingOptionFormProps = {
   locationId: string
@@ -43,7 +44,7 @@ export const EditShippingOptionForm = ({
 }: EditShippingOptionFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const isPickup = type === FulfillmentSetType.Pickup
 
   const shippingProfiles = useComboboxData({
@@ -147,7 +148,11 @@ export const EditShippingOptionForm = ({
                           )}
                         </Form.Label>
                         <Form.Control>
-                          <RadioGroup {...field} onValueChange={field.onChange}>
+                          <RadioGroup
+                            dir={direction}
+                            {...field}
+                            onValueChange={field.onChange}
+                          >
                             <RadioGroup.ChoiceBox
                               className="flex-1"
                               value={ShippingOptionPriceType.FlatRate}

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

@@ -20,6 +20,7 @@ import { queryClient } from "../../../../../lib/query-client"
 import { AllocateItemsSchema } from "./constants"
 import { OrderAllocateItemsItem } from "./order-allocate-items-item"
 import { checkInventoryKit } from "./utils"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type OrderAllocateItemsFormProps = {
   order: AdminOrder
@@ -28,7 +29,7 @@ type OrderAllocateItemsFormProps = {
 export function OrderAllocateItemsForm({ order }: OrderAllocateItemsFormProps) {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const [disableSubmit, setDisableSubmit] = useState(false)
   const [filterTerm, setFilterTerm] = useState("")
 
@@ -231,7 +232,11 @@ export function OrderAllocateItemsForm({ order }: OrderAllocateItemsFormProps) {
                             </div>
                             <div className="flex-1">
                               <Form.Control>
-                                <Select onValueChange={onChange} {...field}>
+                                <Select
+                                  dir={direction}
+                                  onValueChange={onChange}
+                                  {...field}
+                                >
                                   <Select.Trigger
                                     className="bg-ui-bg-base"
                                     ref={ref}

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

@@ -1028,7 +1028,8 @@ export const ClaimCreateForm = ({
                       <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-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-exchange/components/exchange-create-form/exchange-create-form.tsx

@@ -509,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-fulfillment/components/order-create-fulfillment-form/order-create-fulfillment-form.tsx

@@ -26,6 +26,7 @@ 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
@@ -38,7 +39,7 @@ export function OrderCreateFulfillmentForm({
 }: OrderCreateFulfillmentFormProps) {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const { mutateAsync: createOrderFulfillment, isPending: isMutating } =
     useCreateOrderFulfillment(order.id)
 
@@ -288,6 +289,7 @@ export function OrderCreateFulfillmentForm({
                             <div className="flex-1">
                               <Form.Control>
                                 <Select
+                                  dir={direction}
                                   onValueChange={onChange}
                                   {...field}
                                   disabled={!selectedLocationId}
@@ -390,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-refund/components/create-refund-form/create-refund-form.tsx

@@ -17,12 +17,13 @@ import * as zod from "zod"
 import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
-import { useRefundPayment } from "../../../../../hooks/api"
+import { useRefundPayment, useRefundReasons } from "../../../../../hooks/api"
 import { currencies } from "../../../../../lib/data/currencies"
 import { formatCurrency } from "../../../../../lib/format-currency"
 import { formatProvider } from "../../../../../lib/format-provider"
 import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
 import { getPaymentsFromOrder } from "../../../../../lib/orders"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type CreateRefundFormProps = {
   order: HttpTypes.AdminOrder
@@ -34,11 +35,13 @@ const CreateRefundSchema = zod.object({
     float: zod.number().or(zod.null()),
   }),
   note: zod.string().optional(),
+  refund_reason_id: zod.string().optional(),
 })
 
 export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
+  const { refund_reasons } = useRefundReasons()
 
   const [searchParams] = useSearchParams()
   const [paymentId, setPaymentId] = useState<string | undefined>(
@@ -53,6 +56,7 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
     [order.currency_code]
   )
 
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof CreateRefundSchema>>({
     defaultValues: {
       amount: {
@@ -60,6 +64,7 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
         float: paymentAmount,
       },
       note: "",
+      refund_reason_id: "",
     },
     resolver: zodResolver(CreateRefundSchema),
   })
@@ -88,6 +93,7 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
       {
         amount: data.amount.float!,
         note: data.note,
+        refund_reason_id: data.refund_reason_id,
       },
       {
         onSuccess: () => {
@@ -118,6 +124,7 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
         <RouteDrawer.Body className="flex-1 overflow-auto">
           <div className="flex flex-col gap-y-4">
             <Select
+              dir={direction}
               value={paymentId}
               onValueChange={(value) => {
                 setPaymentId(value)
@@ -205,6 +212,40 @@ export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
               }}
             />
 
+            <Form.Field
+              control={form.control}
+              name="refund_reason_id"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.refundReason")}</Form.Label>
+
+                    <Form.Control>
+                      <Select
+                        dir={direction}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <Select.Trigger>
+                          <Select.Value />
+                        </Select.Trigger>
+
+                        <Select.Content>
+                          {refund_reasons?.map((reason) => (
+                            <Select.Item key={reason.id} value={reason.id}>
+                              {reason.label}
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select>
+                    </Form.Control>
+
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+
             <Form.Field
               control={form.control}
               name={`note`}

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

@@ -726,7 +726,8 @@ export const ReturnCreateForm = ({
                       <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}