@medusajs/dashboard 2.10.4-preview-20250927210155 → 2.10.4-snapshot-20250918173105

package/src/routes/inventory/inventory-create/components/inventory-create-form/inventory-create-form.tsx

@@ -36,7 +36,6 @@ import {
 import { queryClient } from "../../../../../lib/query-client"
 import { InventoryAvailabilityForm } from "./inventory-availability-form"
 import { CreateInventoryItemSchema } from "./schema"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAILS = "details",
@@ -55,7 +54,7 @@ export function InventoryCreateForm({ locations }: InventoryCreateFormProps) {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
   const [tab, setTab] = useState<Tab>(Tab.DETAILS)
-  const direction = useDocumentDirection()
+
   const form = useForm<CreateInventoryItemSchema>({
     defaultValues: {
       title: "",
@@ -202,7 +201,6 @@ export function InventoryCreateForm({ locations }: InventoryCreateFormProps) {
   return (
     <RouteFocusModal.Form form={form}>
       <ProgressTabs
-        dir={direction}
         value={tab}
         className="h-full"
         onValueChange={(tab) => onTabChange(tab as Tab)}

package/src/routes/inventory/inventory-detail/components/inventory-item-variants/variants-section.tsx

@@ -46,7 +46,7 @@ export const InventoryItemVariantsSection = ({
                   </span>
                 </div>
                 <div className="size-7 flex items-center justify-center">
-                  <TriangleRightMini className="text-ui-fg-muted rtl:rotate-180" />
+                  <TriangleRightMini className="text-ui-fg-muted" />
                 </div>
               </div>
             </div>

package/src/routes/inventory/inventory-detail/components/location-levels-table/use-location-list-table-columns.tsx

@@ -49,16 +49,9 @@ export const useLocationListTableColumns = () => {
         level.location_id
       )
 
-      toast.success(t("inventory.levelDeleted"))
-
       queryClient.invalidateQueries({
         queryKey: inventoryItemsQueryKeys.lists(),
       })
-      queryClient.invalidateQueries({
-        queryKey: inventoryItemLevelsQueryKeys.list({
-          inventoryItemId: level.inventory_item_id,
-        }),
-      })
       queryClient.invalidateQueries({
         queryKey: inventoryItemsQueryKeys.detail(level.inventory_item_id),
       })

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

@@ -1,11 +1,11 @@
 import { Checkbox, Text, clx } from "@medusajs/ui"
 
-import { HttpTypes } from "@medusajs/types"
+import { StockLocationDTO } from "@medusajs/types"
 
 type LocationItemProps = {
   selected: boolean
   onSelect: (selected: boolean) => void
-  location: HttpTypes.AdminStockLocation
+  location: StockLocationDTO
 }
 
 export const LocationItem = ({

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

@@ -1,75 +1,111 @@
-import {
-  AdminInventoryItem,
-  AdminStockLocation,
-  HttpTypes,
-} from "@medusajs/types"
+import * as zod from "zod"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { AdminInventoryItem, AdminStockLocation } 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 { useMemo, useState } from "react"
+import { useEffect, useMemo } from "react"
+import { KeyboundForm } from "../../../../../../components/utilities/keybound-form"
 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 { count } = useStockLocations({ limit: 1, fields: "id" })
+  const form = useForm<zod.infer<typeof EditInventoryItemAttributesSchema>>({
+    defaultValues: getDefaultValues(locations, existingLocationLevels),
+    resolver: zodResolver(EditInventoryItemAttributesSchema),
+  })
 
-  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 { fields: locationFields, update: updateField } = useFieldArray({
+    control: form.control,
+    name: "locations",
+  })
+
+  useEffect(() => {
+    form.setValue(
+      "locations",
+      getDefaultValues(locations, existingLocationLevels).locations
+    )
+  }, [existingLocationLevels, locations])
 
   const { mutateAsync } = useBatchInventoryItemLocationLevels(item.id)
 
-  const handleSubmit = async () => {
-    const toCreate = Array.from(selectedLocationIds).filter(
-      (id) => !existingLocationLevels.has(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 toDeleteLocations = Array.from(existingLocationLevels).filter(
-      (id) => !selectedLocationIds.has(id)
+        if (location.selected) {
+          acc[0].push(location.location_id)
+        } else {
+          acc[1].push(location.location_id)
+        }
+        return acc
+      },
+      [[], []] as [string[], string[]]
     )
 
-    const toDelete = toDeleteLocations
-      .map((id) => item.location_levels?.find((l) => l.location_id === id)?.id)
-      .filter(Boolean) as unknown as string[]
+    if (selectedLocations.length === 0 && unselectedLocations.length === 0) {
+      return handleSuccess()
+    }
 
     await mutateAsync(
       {
-        create: toCreate.map((location_id) => ({
+        create: selectedLocations.map((location_id) => ({
           location_id,
         })),
-        delete: toDelete,
+        delete: unselectedLocations,
       },
       {
         onSuccess: () => {
@@ -81,103 +117,80 @@ export const ManageLocationsForm = ({
         },
       }
     )
-  }
+  })
 
   return (
-    <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>
+    <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>
-          <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}
+          <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: locationFields.filter((l) => l.selected).length,
+                  total: locations.length,
+                })}
+                {")"}
+              </Text>
+            </div>
           </div>
-        </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) => (
+          {locationFields.map((location, idx) => {
+            return (
               <LocationItem
-                selected={selectedLocationIds.has(location.id)}
-                location={location}
-                onSelect={(selected) =>
-                  handleLocationSelect(location.id, selected)
+                selected={location.selected}
+                location={location as any}
+                onSelect={() =>
+                  updateField(idx, {
+                    ...location,
+                    selected: !location.selected,
+                  })
                 }
+                key={location.id}
               />
-            )}
-            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")}
+            )
+          })}
+        </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")}
             </Button>
-          </RouteDrawer.Close>
-          <Button onClick={handleSubmit} size="small" isLoading={false}>
-            {t("actions.save")}
-          </Button>
-        </div>
-      </RouteDrawer.Footer>
-    </div>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
   )
 }

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", { name: name }))
+          toast.success(t("stockLocations.edit.successToast"))
           handleSuccess()
         },
         onError: (e) => {

package/src/routes/locations/location-list/components/location-list-header/index.ts

@@ -0,0 +1 @@
+export * from "./location-list-header"

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

@@ -0,0 +1,21 @@
+import { Button, Container, Heading, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+export const LocationListHeader = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="flex h-fit items-center justify-between gap-x-4 px-6 py-4">
+      <div>
+        <Heading>{t("stockLocations.domain")}</Heading>
+        <Text className="text-ui-fg-subtle txt-small">
+          {t("stockLocations.list.description")}
+        </Text>
+      </div>
+      <Button size="small" className="shrink-0" variant="secondary" asChild>
+        <Link to="create">{t("actions.create")}</Link>
+      </Button>
+    </Container>
+  )
+}

package/src/routes/locations/location-list/index.ts

@@ -1 +1,2 @@
+export { shippingListLoader as loader } from "./loader"
 export { LocationList as Component } from "./location-list"

package/src/routes/locations/location-list/loader.ts

@@ -0,0 +1,36 @@
+import { FetchError } from "@medusajs/js-sdk"
+import { LoaderFunctionArgs, redirect } from "react-router-dom"
+
+import { HttpTypes } from "@medusajs/types"
+import { stockLocationsQueryKeys } from "../../../hooks/api/stock-locations"
+import { sdk } from "../../../lib/client"
+import { queryClient } from "../../../lib/query-client"
+import { LOCATION_LIST_FIELDS } from "./constants"
+
+const shippingListQuery = () => ({
+  queryKey: stockLocationsQueryKeys.lists(),
+  queryFn: async () => {
+    return await sdk.admin.stockLocation
+      .list({
+        // TODO: change this when RQ is fixed
+        fields: LOCATION_LIST_FIELDS,
+      })
+      .catch((error: FetchError) => {
+        if (error.status === 401) {
+          throw redirect("/login")
+        }
+
+        throw error
+      })
+  },
+})
+
+export const shippingListLoader = async (_: LoaderFunctionArgs) => {
+  const query = shippingListQuery()
+
+  return (
+    queryClient.getQueryData<HttpTypes.AdminStockLocationListResponse>(
+      query.queryKey
+    ) ?? (await queryClient.fetchQuery(query))
+  )
+}

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

@@ -1,46 +1,34 @@
 import { ShoppingBag, TruckFast } from "@medusajs/icons"
 import { Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
+import { useLoaderData } from "react-router-dom"
 
 import { useStockLocations } from "../../../hooks/api/stock-locations"
+import LocationListItem from "./components/location-list-item/location-list-item"
 import { LOCATION_LIST_FIELDS } from "./constants"
-import { useLocationListTableColumns } from "./use-location-list-table-columns"
-import { useLocationListTableQuery } from "./use-location-list-table-query"
+import { shippingListLoader } from "./loader"
 
-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"
+import { LocationListHeader } from "./components/location-list-header"
 
 export function LocationList() {
-  const { t } = useTranslation()
-
-  const searchParams = useLocationListTableQuery({
-    pageSize: PAGE_SIZE,
-    prefix: PREFIX,
-  })
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof shippingListLoader>
+  >
 
   const {
     stock_locations: stockLocations = [],
-    count,
     isError,
     error,
-    isLoading,
   } = useStockLocations(
     {
       fields: LOCATION_LIST_FIELDS,
-      ...searchParams,
     },
-    {
-      placeholderData: keepPreviousData,
-    }
+    { initialData }
   )
 
-  const columns = useLocationListTableColumns()
   const { getWidgets } = useExtension()
 
   if (isError) {
@@ -58,38 +46,12 @@ export function LocationList() {
       showJSON
     >
       <TwoColumnPage.Main>
-        <Container className="flex flex-col divide-y p-0">
-          <DataTable
-            data={stockLocations}
-            columns={columns}
-            rowCount={count}
-            pageSize={PAGE_SIZE}
-            getRowId={(row) => row.id}
-            heading={t("stockLocations.domain")}
-            subHeading={t("stockLocations.list.description")}
-            emptyState={{
-              empty: {
-                heading: t("stockLocations.list.noRecordsMessage"),
-                description: t("stockLocations.list.noRecordsMessageEmpty"),
-              },
-              filtered: {
-                heading: t("stockLocations.list.noRecordsMessage"),
-                description: t("stockLocations.list.noRecordsMessageFiltered"),
-              },
-            }}
-            actions={[
-              {
-                label: t("actions.create"),
-                to: "create",
-              },
-            ]}
-            isLoading={isLoading}
-            rowHref={(row) => `/settings/locations/${row.id}`}
-            enableSearch={true}
-            prefix={PREFIX}
-            layout="fill"
-          />
-        </Container>
+        <LocationListHeader />
+        <div className="flex flex-col gap-3 lg:col-span-2">
+          {stockLocations.map((location) => (
+            <LocationListItem key={location.id} location={location} />
+          ))}
+        </div>
       </TwoColumnPage.Main>
       <TwoColumnPage.Sidebar>
         <LinksSection />

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

@@ -12,7 +12,6 @@ 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>
@@ -34,7 +33,7 @@ export const CreateShippingOptionDetailsForm = ({
   type,
 }: CreateShippingOptionDetailsFormProps) => {
   const { t } = useTranslation()
-  const direction = useDocumentDirection()
+
   const isPickup = type === FulfillmentSetType.Pickup
 
   const shippingProfiles = useComboboxData({
@@ -106,7 +105,6 @@ 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}
@@ -254,7 +252,6 @@ 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,7 +24,6 @@ import {
   CreateShippingOptionSchema,
 } from "./schema"
 import { useFulfillmentProviderOptions } from "../../../../../hooks/api"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAILS = "details",
@@ -49,7 +48,7 @@ export function CreateShippingOptionsForm({
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const form = useForm<CreateShippingOptionSchema>({
     defaultValues: {
       name: "",
@@ -272,7 +271,6 @@ 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,7 +20,6 @@ import {
   ShippingOptionPriceType,
 } from "../../../common/constants"
 import { formatProvider } from "../../../../../lib/format-provider"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditShippingOptionFormProps = {
   locationId: string
@@ -44,7 +43,7 @@ export const EditShippingOptionForm = ({
 }: EditShippingOptionFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const isPickup = type === FulfillmentSetType.Pickup
 
   const shippingProfiles = useComboboxData({
@@ -148,11 +147,7 @@ export const EditShippingOptionForm = ({
                           )}
                         </Form.Label>
                         <Form.Control>
-                          <RadioGroup
-                            dir={direction}
-                            {...field}
-                            onValueChange={field.onChange}
-                          >
+                          <RadioGroup {...field} onValueChange={field.onChange}>
                             <RadioGroup.ChoiceBox
                               className="flex-1"
                               value={ShippingOptionPriceType.FlatRate}