@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

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

@@ -1,34 +1,46 @@
-import { ShoppingBag } from "@medusajs/icons"
+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 { shippingListLoader } from "./loader"
+import { useLocationListTableColumns } from "./use-location-list-table-columns"
+import { useLocationListTableQuery } from "./use-location-list-table-query"
 
+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 { LocationListHeader } from "./components/location-list-header"
+import { keepPreviousData } from "@tanstack/react-query"
+
+const PAGE_SIZE = 20
+const PREFIX = "loc"
 
 export function LocationList() {
-  const initialData = useLoaderData() as Awaited<
-    ReturnType<typeof shippingListLoader>
-  >
+  const { t } = useTranslation()
+
+  const searchParams = useLocationListTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX,
+  })
 
   const {
     stock_locations: stockLocations = [],
+    count,
     isError,
     error,
+    isLoading,
   } = useStockLocations(
     {
       fields: LOCATION_LIST_FIELDS,
+      ...searchParams,
     },
-    { initialData }
+    {
+      placeholderData: keepPreviousData,
+    }
   )
 
+  const columns = useLocationListTableColumns()
   const { getWidgets } = useExtension()
 
   if (isError) {
@@ -46,12 +58,38 @@ export function LocationList() {
       showJSON
     >
       <TwoColumnPage.Main>
-        <LocationListHeader />
-        <div className="flex flex-col gap-3 lg:col-span-2">
-          {stockLocations.map((location) => (
-            <LocationListItem key={location.id} location={location} />
-          ))}
-        </div>
+        <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>
       </TwoColumnPage.Main>
       <TwoColumnPage.Sidebar>
         <LinksSection />
@@ -77,6 +115,14 @@ const LinksSection = () => {
         )}
         icon={<ShoppingBag />}
       />
+      <SidebarLink
+        to="/settings/locations/shipping-option-types"
+        labelKey={t("stockLocations.sidebar.shippingOptionTypes.label")}
+        descriptionKey={t(
+          "stockLocations.sidebar.shippingOptionTypes.description"
+        )}
+        icon={<TruckFast />}
+      />
     </Container>
   )
 }

package/src/routes/locations/location-list/use-location-list-table-columns.tsx

@@ -0,0 +1,185 @@
+import { HttpTypes } from "@medusajs/types"
+import { PencilSquare, Trash } from "@medusajs/icons"
+import {
+  createDataTableColumnHelper,
+  StatusBadge,
+  toast,
+  usePrompt,
+} from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useMemo } from "react"
+import { useNavigate } from "react-router-dom"
+import { FetchError } from "@medusajs/js-sdk"
+
+import { PlaceholderCell } from "../../../components/table/table-cells/common/placeholder-cell"
+import { getFormattedAddress } from "../../../lib/addresses"
+import { FulfillmentSetType } from "../common/constants"
+import { queryClient } from "../../../lib/query-client"
+import { stockLocationsQueryKeys } from "../../../hooks/api/stock-locations"
+import { ListSummary } from "../../../components/common/list-summary"
+import { sdk } from "../../../lib/client"
+
+const columnHelper = createDataTableColumnHelper<HttpTypes.AdminStockLocation>()
+
+export const useLocationListTableColumns = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+
+  const handleDelete = async (location: HttpTypes.AdminStockLocation) => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("stockLocations.delete.confirmation", {
+        name: location.name,
+      }),
+      confirmText: t("actions.remove"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    try {
+      await sdk.admin.stockLocation.delete(location.id)
+      queryClient.invalidateQueries({
+        queryKey: stockLocationsQueryKeys.lists(),
+      })
+
+      queryClient.invalidateQueries({
+        queryKey: stockLocationsQueryKeys.detail(location.id),
+      })
+
+      toast.success(
+        t("stockLocations.delete.successToast", {
+          name: location.name,
+        })
+      )
+    } catch (e) {
+      toast.error((e as FetchError).message)
+    }
+  }
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => {
+          const name = getValue()
+          if (!name) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <span className="text-ui-fg-subtle text-small truncate">
+              {name}
+            </span>
+          )
+        },
+      }),
+      columnHelper.accessor("address", {
+        header: t("fields.address"),
+        cell: ({ getValue, row }) => {
+          const address = getValue()
+          const location = row.original
+
+          if (!address) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex flex-col">
+              <span className="text-ui-fg-subtle text-small truncate">
+                {getFormattedAddress({
+                  address: location.address as HttpTypes.AdminOrderAddress,
+                }).join(", ")}
+              </span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("fulfillment_sets", {
+        id: "shipping_fulfillment",
+        header: t("stockLocations.fulfillmentSets.shipping.header"),
+        cell: ({ getValue }) => {
+          const fulfillmentSets = getValue()
+          const shippingSet = fulfillmentSets?.find(
+            (f) => f.type === FulfillmentSetType.Shipping
+          )
+          const fulfillmentSetExists = !!shippingSet
+
+          return (
+            <StatusBadge color={fulfillmentSetExists ? "green" : "grey"}>
+              {t(
+                fulfillmentSetExists ? "statuses.enabled" : "statuses.disabled"
+              )}
+            </StatusBadge>
+          )
+        },
+      }),
+      columnHelper.accessor("fulfillment_sets", {
+        id: "pickup_fulfillment",
+        header: t("stockLocations.fulfillmentSets.pickup.header"),
+        cell: ({ getValue }) => {
+          const fulfillmentSets = getValue()
+          const pickupSet = fulfillmentSets?.find(
+            (f) => f.type === FulfillmentSetType.Pickup
+          )
+          const fulfillmentSetExists = !!pickupSet
+
+          return (
+            <StatusBadge color={fulfillmentSetExists ? "green" : "grey"}>
+              {t(
+                fulfillmentSetExists ? "statuses.enabled" : "statuses.disabled"
+              )}
+            </StatusBadge>
+          )
+        },
+      }),
+      columnHelper.accessor("sales_channels", {
+        header: t("stockLocations.salesChannels.label"),
+        cell: ({ getValue }) => {
+          const salesChannels = getValue()
+
+          if (!salesChannels?.length) {
+            return <PlaceholderCell />
+          }
+
+          return (
+            <div className="flex items-center">
+              <ListSummary
+                inline
+                n={1}
+                list={salesChannels.map((s) => s.name)}
+              />
+            </div>
+          )
+        },
+      }),
+      columnHelper.action({
+        actions: (ctx) => {
+          const location = ctx.row.original
+          return [
+            [
+              {
+                icon: <PencilSquare />,
+                label: t("actions.edit"),
+                onClick: () => {
+                  navigate(`/settings/locations/${location.id}/edit`)
+                },
+              },
+            ],
+            [
+              {
+                icon: <Trash />,
+                label: t("actions.delete"),
+                onClick: () => handleDelete(location),
+              },
+            ],
+          ]
+        },
+      }),
+    ],
+    []
+  )
+}

package/src/routes/locations/location-list/use-location-list-table-query.tsx

@@ -0,0 +1,22 @@
+import { HttpTypes } from "@medusajs/types"
+import { useQueryParams } from "../../../hooks/use-query-params"
+
+export const useLocationListTableQuery = ({
+  pageSize = 20,
+  prefix,
+}: {
+  pageSize?: number
+  prefix?: string
+}) => {
+  const queryObject = useQueryParams(["order", "offset", "q"], prefix)
+
+  const { offset, ...rest } = queryObject
+
+  const searchParams: HttpTypes.AdminStockLocationListParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    ...rest,
+  }
+
+  return searchParams
+}

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

@@ -31,7 +31,7 @@ const EditSalesChannelsSchema = zod.object({
   sales_channels: zod.array(zod.string()).optional(),
 })
 
-const PAGE_SIZE = 50
+const PAGE_SIZE = 20
 const PREFIX = "sc"
 
 export const LocationEditSalesChannelsForm = ({

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

@@ -10,11 +10,9 @@ import { Combobox } from "../../../../../components/inputs/combobox"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../lib/client"
 import { formatProvider } from "../../../../../lib/format-provider"
-import {
-  FulfillmentSetType,
-  ShippingOptionPriceType,
-} from "../../../common/constants"
+import { FulfillmentSetType, ShippingOptionPriceType, } from "../../../common/constants"
 import { CreateShippingOptionSchema } from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type CreateShippingOptionDetailsFormProps = {
   form: UseFormReturn<CreateShippingOptionSchema>
@@ -36,7 +34,7 @@ export const CreateShippingOptionDetailsForm = ({
   type,
 }: CreateShippingOptionDetailsFormProps) => {
   const { t } = useTranslation()
-
+  const direction = useDocumentDirection()
   const isPickup = type === FulfillmentSetType.Pickup
 
   const shippingProfiles = useComboboxData({
@@ -49,6 +47,16 @@ export const CreateShippingOptionDetailsForm = ({
       })),
   })
 
+  const shippingOptionTypes = useComboboxData({
+    queryFn: (params) => sdk.admin.shippingOptionType.list(params),
+    queryKey: ["shipping_option_types"],
+    getOptions: (data) =>
+      data.shipping_option_types.map((type) => ({
+        label: type.label,
+        value: type.id,
+      })),
+  })
+
   const fulfillmentProviders = useComboboxData({
     queryFn: (params) =>
       sdk.admin.fulfillmentProvider.list({
@@ -98,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}
@@ -170,6 +179,31 @@ export const CreateShippingOptionDetailsForm = ({
               )
             }}
           />
+          <Form.Field
+            control={form.control}
+            name="shipping_option_type_id"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("stockLocations.shippingOptions.fields.type")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Combobox
+                      {...field}
+                      options={shippingOptionTypes.options}
+                      searchValue={shippingOptionTypes.searchValue}
+                      onSearchValueChange={
+                        shippingOptionTypes.onSearchValueChange
+                      }
+                      disabled={shippingOptionTypes.disabled}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
         </div>
 
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -220,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: "",
@@ -167,12 +168,7 @@ export function CreateShippingOptionsForm({
             operator: "eq",
           },
         ],
-        type: {
-          // TODO: FETCH TYPES
-          label: "Type label",
-          description: "Type description",
-          code: "type-code",
-        },
+        type_id: data.shipping_option_type_id,
       },
       {
         onSuccess: ({ shipping_option }) => {
@@ -276,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-create/components/create-shipping-options-form/schema.ts

@@ -13,6 +13,7 @@ export const CreateShippingOptionDetailsSchema = z.object({
   shipping_profile_id: z.string().min(1),
   provider_id: z.string().min(1),
   fulfillment_option_id: z.string().min(1),
+  shipping_option_type_id: z.string().min(1),
 })
 
 export const ShippingOptionConditionalPriceSchema = z.object({

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

@@ -19,6 +19,8 @@ import {
   FulfillmentSetType,
   ShippingOptionPriceType,
 } from "../../../common/constants"
+import { formatProvider } from "../../../../../lib/format-provider"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditShippingOptionFormProps = {
   locationId: string
@@ -31,6 +33,8 @@ const EditShippingOptionSchema = zod.object({
   price_type: zod.nativeEnum(ShippingOptionPriceType),
   enabled_in_store: zod.boolean().optional(),
   shipping_profile_id: zod.string(),
+  shipping_option_type_id: zod.string(),
+  provider_id: zod.string().optional(), // just for UI purposes
 })
 
 export const EditShippingOptionForm = ({
@@ -40,7 +44,7 @@ export const EditShippingOptionForm = ({
 }: EditShippingOptionFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const isPickup = type === FulfillmentSetType.Pickup
 
   const shippingProfiles = useComboboxData({
@@ -54,12 +58,24 @@ export const EditShippingOptionForm = ({
     defaultValue: shippingOption.shipping_profile_id,
   })
 
+  const shippingOptionTypes = useComboboxData({
+    queryFn: (params) => sdk.admin.shippingOptionType.list(params),
+    queryKey: ["shipping_option_types"],
+    getOptions: (data) =>
+      data.shipping_option_types.map((type) => ({
+        label: type.label,
+        value: type.id,
+      })),
+  })
+
   const form = useForm<zod.infer<typeof EditShippingOptionSchema>>({
     defaultValues: {
       name: shippingOption.name,
       price_type: shippingOption.price_type as ShippingOptionPriceType,
       enabled_in_store: isOptionEnabledInStore(shippingOption),
       shipping_profile_id: shippingOption.shipping_profile_id,
+      shipping_option_type_id: shippingOption.type.id,
+      provider_id: shippingOption.provider_id,
     },
     resolver: zodResolver(EditShippingOptionSchema),
   })
@@ -92,6 +108,7 @@ export const EditShippingOptionForm = ({
         price_type: values.price_type,
         shipping_profile_id: values.shipping_profile_id,
         rules,
+        type_id: values.shipping_option_type_id,
       },
       {
         onSuccess: ({ shipping_option }) => {
@@ -111,8 +128,11 @@ export const EditShippingOptionForm = ({
 
   return (
     <RouteDrawer.Form form={form}>
-      <KeyboundForm onSubmit={handleSubmit} className="flex flex-1 flex-col">
-        <RouteDrawer.Body>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <RouteDrawer.Body className="overflow-y-auto">
           <div className="flex flex-col gap-y-8">
             <div className="flex flex-col gap-y-8">
               {!isPickup && (
@@ -128,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}
@@ -200,6 +224,62 @@ export const EditShippingOptionForm = ({
                     )
                   }}
                 />
+
+                <Form.Field
+                  control={form.control}
+                  name="shipping_option_type_id"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>
+                          {t("stockLocations.shippingOptions.fields.type")}
+                        </Form.Label>
+                        <Form.Control>
+                          <Combobox
+                            {...field}
+                            options={shippingOptionTypes.options}
+                            searchValue={shippingOptionTypes.searchValue}
+                            onSearchValueChange={
+                              shippingOptionTypes.onSearchValueChange
+                            }
+                            disabled={shippingOptionTypes.disabled}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+
+                <Form.Field
+                  control={form.control}
+                  name="provider_id"
+                  disabled={true}
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>
+                          {t("stockLocations.shippingOptions.fields.provider")}
+                        </Form.Label>
+                        <Form.Control>
+                          <Combobox
+                            value={shippingOption.provider_id}
+                            disabled={true}
+                            options={[
+                              {
+                                label: `${formatProvider(
+                                  shippingOption.provider_id
+                                )} (${shippingOption?.data?.id || "N/A"})`, // FO is stored in so.data and only guaranteed proeprty is `id`
+                                value: shippingOption.provider_id,
+                              },
+                            ]}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
               </div>
 
               <Divider />