@medusajs/dashboard 2.10.4-preview-20250924060154 → 2.10.4-preview-20250924120212

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/orders/order-detail/components/order-activity-section/order-timeline.tsx

@@ -1,4 +1,4 @@
-import { Button, Text, Tooltip, clx, usePrompt } from "@medusajs/ui"
+import { Button, Text, Tooltip, clx, toast, usePrompt } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 
 import { PropsWithChildren, ReactNode, useMemo, useState } from "react"
@@ -785,7 +785,9 @@ const ReturnBody = ({
       return
     }
 
-    await cancelReturnRequest()
+    await cancelReturnRequest().catch((error) => {
+      toast.error(error.message)
+    })
   }
 
   const numberOfItems = orderReturn.items.reduce((acc, item) => {
@@ -842,7 +844,9 @@ const ClaimBody = ({
       return
     }
 
-    await cancelClaim()
+    await cancelClaim().catch((error) => {
+      toast.error(error.message)
+    })
   }
 
   const outboundItems = (claim.additional_items || []).reduce(
@@ -916,7 +920,9 @@ const ExchangeBody = ({
       return
     }
 
-    await cancelExchange()
+    await cancelExchange().catch((error) => {
+      toast.error(error.message)
+    })
   }
 
   const outboundItems = (exchange.additional_items || []).reduce(
@@ -1015,7 +1021,9 @@ const TransferOrderRequestBody = ({
       return
     }
 
-    await cancelTransfer()
+    await cancelTransfer().catch((error) => {
+      toast.error(error.message)
+    })
   }
 
   /**

package/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/add-campaign-promotion-form.tsx

@@ -1,9 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { AdminCampaign, AdminPromotion } from "@medusajs/types"
-import { Button, RadioGroup, Select, Text, toast } from "@medusajs/ui"
+import { Button, RadioGroup, toast } from "@medusajs/ui"
 import { useEffect } from "react"
 import { useForm, useWatch } from "react-hook-form"
-import { Trans, useTranslation } from "react-i18next"
+import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
@@ -11,11 +11,14 @@ import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdatePromotion } from "../../../../../hooks/api/promotions"
 import { CreateCampaignFormFields } from "../../../../campaigns/common/components/create-campaign-form-fields"
 import { CampaignDetails } from "./campaign-details"
+import { sdk } from "../../../../../lib/client"
+import { useComboboxData } from "../../../../../hooks/use-combobox-data"
+import { Combobox } from "../../../../../components/inputs/combobox"
+import { useCampaign } from "../../../../../hooks/api/campaigns"
 import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditPromotionFormProps = {
   promotion: AdminPromotion
-  campaigns: AdminCampaign[]
 }
 
 const EditPromotionSchema = zod.object({
@@ -25,14 +28,16 @@ const EditPromotionSchema = zod.object({
 
 export const AddCampaignPromotionFields = ({
   form,
-  campaigns,
   withNewCampaign = true,
+  promotionCurrencyCode,
 }: {
   form: any
-  campaigns: AdminCampaign[]
   withNewCampaign?: boolean
+  promotionCurrencyCode?: string
 }) => {
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
+
   const watchCampaignId = useWatch({
     control: form.control,
     name: "campaign_id",
@@ -43,8 +48,31 @@ export const AddCampaignPromotionFields = ({
     name: "campaign_choice",
   })
 
-  const selectedCampaign = campaigns.find((c) => c.id === watchCampaignId)
-  const direction = useDocumentDirection()
+  const campaignsCombobox = useComboboxData({
+    queryFn: (params) =>
+      sdk.admin.campaign.list({
+        ...params,
+      }),
+    queryKey: ["campaigns"],
+    getOptions: (data) =>
+      data.campaigns.map((campaign) => ({
+        label: campaign.name.toUpperCase(),
+        value: campaign.id,
+        disabled:
+          campaign.budget?.currency_code &&
+          campaign.budget?.currency_code?.toLowerCase() !==
+            promotionCurrencyCode?.toLowerCase(), // also cannot add promotion which doesn't have currency defined to a campaign with a currency amount budget
+      })),
+  })
+
+  const { campaign: selectedCampaign } = useCampaign(
+    watchCampaignId as string,
+    undefined,
+    {
+      enabled: !!watchCampaignId,
+    }
+  )
+
   return (
     <div className="flex flex-col gap-y-8">
       <Form.Field
@@ -99,58 +127,24 @@ export const AddCampaignPromotionFields = ({
         <Form.Field
           control={form.control}
           name="campaign_id"
-          render={({ field: { onChange, ref, ...field } }) => {
+          render={({ field: { onChange, ...field } }) => {
             return (
               <Form.Item>
-                <Form.Label>
+                <Form.Label tooltip={t("campaigns.fields.campaign_id.hint")}>
                   {t("promotions.form.campaign.existing.title")}
                 </Form.Label>
 
                 <Form.Control>
-                  <Select
+                  <Combobox
                     dir={direction}
-                    onValueChange={onChange}
+                    options={campaignsCombobox.options}
+                    searchValue={campaignsCombobox.searchValue}
+                    onSearchValueChange={campaignsCombobox.onSearchValueChange}
+                    onChange={onChange}
                     {...field}
-                  >
-                    <Select.Trigger ref={ref}>
-                      <Select.Value />
-                    </Select.Trigger>
-
-                    <Select.Content>
-                      {!campaigns.length && (
-                        <div className="flex h-[120px] flex-col items-center justify-center gap-2 p-2">
-                          <span className="txt-small text-ui-fg-subtle font-medium">
-                            {t(
-                              "promotions.form.campaign.existing.placeholder.title"
-                            )}
-                          </span>
-                          <span className="txt-small text-ui-fg-muted">
-                            {t(
-                              "promotions.form.campaign.existing.placeholder.desc"
-                            )}
-                          </span>
-                        </div>
-                      )}
-                      {campaigns.map((c) => (
-                        <Select.Item key={c.id} value={c.id}>
-                          {c.name?.toUpperCase()}
-                        </Select.Item>
-                      ))}
-                    </Select.Content>
-                  </Select>
+                  ></Combobox>
                 </Form.Control>
 
-                <Text
-                  size="small"
-                  leading="compact"
-                  className="text-ui-fg-subtle"
-                >
-                  <Trans
-                    t={t}
-                    i18nKey="campaigns.fields.campaign_id.hint"
-                    components={[<br key="break" />]}
-                  />
-                </Text>
                 <Form.ErrorMessage />
               </Form.Item>
             )
@@ -162,14 +156,13 @@ export const AddCampaignPromotionFields = ({
         <CreateCampaignFormFields form={form} fieldScope="campaign." />
       )}
 
-      <CampaignDetails campaign={selectedCampaign} />
+      <CampaignDetails campaign={selectedCampaign as AdminCampaign} />
     </div>
   )
 }
 
 export const AddCampaignPromotionForm = ({
   promotion,
-  campaigns,
 }: EditPromotionFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
@@ -227,8 +220,8 @@ export const AddCampaignPromotionForm = ({
         <RouteDrawer.Body className="size-full overflow-auto">
           <AddCampaignPromotionFields
             form={form}
-            campaigns={campaigns}
             withNewCampaign={false}
+            promotionCurrencyCode={promotion.application_method?.currency_code}
           />
         </RouteDrawer.Body>
 

package/src/routes/promotions/promotion-add-campaign/promotion-add-campaign.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next"
 import { useParams } from "react-router-dom"
 
 import { RouteDrawer } from "../../../components/modals"
-import { useCampaigns } from "../../../hooks/api/campaigns"
 import { usePromotion } from "../../../hooks/api/promotions"
 import { AddCampaignPromotionForm } from "./components/add-campaign-promotion-form"
 
@@ -12,24 +11,8 @@ export const PromotionAddCampaign = () => {
   const { t } = useTranslation()
   const { promotion, isPending, isError, error } = usePromotion(id!)
 
-  let campaignQuery = {}
-
-  if (promotion?.application_method?.currency_code) {
-    campaignQuery = {
-      budget: {
-        currency_code: promotion?.application_method?.currency_code,
-      },
-    }
-  }
-
-  const {
-    campaigns,
-    isPending: areCampaignsLoading,
-    isError: isCampaignError,
-    error: campaignError,
-  } = useCampaigns(campaignQuery)
-  if (isError || isCampaignError) {
-    throw error || campaignError
+  if (isError) {
+    throw error
   }
 
   return (
@@ -38,8 +21,8 @@ export const PromotionAddCampaign = () => {
         <Heading>{t("promotions.campaign.edit.header")}</Heading>
       </RouteDrawer.Header>
 
-      {!isPending && !areCampaignsLoading && promotion && campaigns && (
-        <AddCampaignPromotionForm promotion={promotion} campaigns={campaigns} />
+      {!isPending && promotion && (
+        <AddCampaignPromotionForm promotion={promotion} />
       )}
     </RouteDrawer>
   )

package/src/routes/refund-reasons/refund-reason-list/components/refund-reason-list-table/refund-reason-list-table.tsx

@@ -1,12 +1,20 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
-import { Container, createDataTableColumnHelper, toast, usePrompt, } from "@medusajs/ui"
+import {
+  Container,
+  createDataTableColumnHelper,
+  toast,
+  usePrompt,
+} from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { useCallback, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 import { DataTable } from "../../../../../components/data-table"
-import { useDeleteRefundReasonLazy, useRefundReasons, } from "../../../../../hooks/api"
+import {
+  useDeleteRefundReasonLazy,
+  useRefundReasons,
+} from "../../../../../hooks/api"
 import { useRefundReasonTableColumns } from "../../../../../hooks/table/columns"
 import { useRefundReasonTableQuery } from "../../../../../hooks/table/query"
 
@@ -18,7 +26,7 @@ export const RefundReasonListTable = () => {
     pageSize: PAGE_SIZE,
   })
 
-  const { refund_reasons, count, isPending, isError, error } = useRefundReasons(
+  const { refund_reasons, count, isLoading, isError, error } = useRefundReasons(
     searchParams,
     {
       placeholderData: keepPreviousData,
@@ -56,7 +64,7 @@ export const RefundReasonListTable = () => {
             to: "create",
           },
         ]}
-        isLoading={isPending}
+        isLoading={isLoading}
         enableSearch={true}
       />
     </Container>

package/dist/chunk-BKJC5BGQ.mjs

@@ -1,53 +0,0 @@
-// src/components/common/badge-list-summary/badge-list-summary.tsx
-import { Badge, Tooltip, clx } from "@medusajs/ui";
-import { useTranslation } from "react-i18next";
-import { jsx, jsxs } from "react/jsx-runtime";
-var BadgeListSummary = ({
-  list,
-  className,
-  inline,
-  rounded = false,
-  n = 2
-}) => {
-  const { t } = useTranslation();
-  const title = t("general.plusCount", {
-    count: list.length - n
-  });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clx(
-        "text-ui-fg-subtle txt-compact-small gap-x-2 overflow-hidden",
-        {
-          "inline-flex": inline,
-          flex: !inline
-        },
-        className
-      ),
-      children: [
-        list.slice(0, n).map((item) => {
-          return /* @__PURE__ */ jsx(Badge, { rounded: rounded ? "full" : "base", size: "2xsmall", children: item }, item);
-        }),
-        list.length > n && /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap", children: /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            content: /* @__PURE__ */ jsx("ul", { children: list.slice(n).map((c) => /* @__PURE__ */ jsx("li", { children: c }, c)) }),
-            children: /* @__PURE__ */ jsx(
-              Badge,
-              {
-                rounded: rounded ? "full" : "base",
-                size: "2xsmall",
-                className: "cursor-default whitespace-nowrap",
-                children: title
-              }
-            )
-          }
-        ) })
-      ]
-    }
-  );
-};
-
-export {
-  BadgeListSummary
-};