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

package/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx

@@ -17,7 +17,7 @@ import { useForm, useWatch } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
-import { PaymentProviderDTO, RegionCountryDTO } from "@medusajs/types"
+import { RegionCountryDTO } from "@medusajs/types"
 
 import { Form } from "../../../../../components/common/form"
 import { Combobox } from "../../../../../components/inputs/combobox"
@@ -38,10 +38,11 @@ import { useCountries } from "../../../common/hooks/use-countries"
 import { useCountryTableColumns } from "../../../common/hooks/use-country-table-columns"
 import { useCountryTableQuery } from "../../../common/hooks/use-country-table-query"
 import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
+import { useComboboxData } from "../../../../../hooks/use-combobox-data"
+import { sdk } from "../../../../../lib/client"
 
 type CreateRegionFormProps = {
   currencies: CurrencyInfo[]
-  paymentProviders: PaymentProviderDTO[]
 }
 
 const CreateRegionSchema = zod.object({
@@ -58,10 +59,7 @@ const PAGE_SIZE = 50
 
 const STACKED_MODAL_ID = "countries-modal"
 
-export const CreateRegionForm = ({
-  currencies,
-  paymentProviders,
-}: CreateRegionFormProps) => {
+export const CreateRegionForm = ({ currencies }: CreateRegionFormProps) => {
   const { setIsOpen } = useStackedModal()
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const { handleSuccess } = useRouteModal()
@@ -181,6 +179,17 @@ export const CreateRegionForm = ({
     setRowSelection({})
   }
 
+  const comboboxProviders = useComboboxData({
+    queryFn: (params) =>
+      sdk.admin.payment.listPaymentProviders({ ...params, is_enabled: true }),
+    queryKey: ["payment_providers"],
+    getOptions: (data) =>
+      data.payment_providers.map((pp) => ({
+        label: formatProvider(pp.id),
+        value: pp.id,
+      })),
+  })
+
   return (
     <RouteFocusModal.Form form={form}>
       <KeyboundForm
@@ -415,10 +424,9 @@ export const CreateRegionForm = ({
                           </Form.Label>
                           <Form.Control>
                             <Combobox
-                              options={paymentProviders.map((pp) => ({
-                                label: formatProvider(pp.id),
-                                value: pp.id,
-                              }))}
+                              forceHideInput
+                              options={comboboxProviders.options}
+                              fetchNextPage={comboboxProviders.fetchNextPage}
                               {...field}
                             />
                           </Form.Control>

package/src/routes/regions/region-create/region-create.tsx

@@ -1,5 +1,4 @@
 import { RouteFocusModal } from "../../../components/modals/route-focus-modal"
-import { usePaymentProviders } from "../../../hooks/api/payments"
 import { useStore } from "../../../hooks/api/store"
 import { currencies } from "../../../lib/data/currencies"
 import { CreateRegionForm } from "./components/create-region-form"
@@ -10,9 +9,6 @@ export const RegionCreate = () => {
   const storeCurrencies = (store?.supported_currencies ?? []).map(
     (c) => currencies[c.currency_code.toUpperCase()]
   )
-  const { payment_providers: paymentProviders = [] } = usePaymentProviders({
-    is_enabled: true,
-  })
 
   if (isError) {
     throw error
@@ -20,12 +16,7 @@ export const RegionCreate = () => {
 
   return (
     <RouteFocusModal>
-      {!isLoading && store && (
-        <CreateRegionForm
-          currencies={storeCurrencies}
-          paymentProviders={paymentProviders}
-        />
-      )}
+      {!isLoading && store && <CreateRegionForm currencies={storeCurrencies} />}
     </RouteFocusModal>
   )
 }

package/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
 import { Form } from "../../../../../components/common/form/index.ts"
-import { Combobox } from "../../../../../components/inputs/combobox/index.ts"
+import { Combobox } from "../../../../../components/inputs/combobox"
 import {
   RouteDrawer,
   useRouteModal,
@@ -15,11 +15,12 @@ import { useUpdateRegion } from "../../../../../hooks/api/regions.tsx"
 import { CurrencyInfo } from "../../../../../lib/data/currencies.ts"
 import { formatProvider } from "../../../../../lib/format-provider.ts"
 import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
+import { useComboboxData } from "../../../../../hooks/use-combobox-data.tsx"
+import { sdk } from "../../../../../lib/client/index.ts"
 
 type EditRegionFormProps = {
   region: HttpTypes.AdminRegion
   currencies: CurrencyInfo[]
-  paymentProviders: PaymentProviderDTO[]
   pricePreferences: HttpTypes.AdminPricePreference[]
 }
 
@@ -34,7 +35,6 @@ const EditRegionSchema = zod.object({
 export const EditRegionForm = ({
   region,
   currencies,
-  paymentProviders,
   pricePreferences,
 }: EditRegionFormProps) => {
   const { t } = useTranslation()
@@ -54,6 +54,17 @@ export const EditRegionForm = ({
     },
   })
 
+  const comboboxProviders = useComboboxData({
+    queryKey: ["payment_providers"],
+    queryFn: (params) =>
+      sdk.admin.payment.listPaymentProviders({ ...params, is_enabled: true }),
+    getOptions: (data) =>
+      data.payment_providers.map((pp) => ({
+        label: formatProvider(pp.id),
+        value: pp.id,
+      })),
+  })
+
   const { mutateAsync: updateRegion, isPending: isPendingRegion } =
     useUpdateRegion(region.id)
 
@@ -80,7 +91,10 @@ export const EditRegionForm = ({
 
   return (
     <RouteDrawer.Form form={form}>
-      <KeyboundForm onSubmit={handleSubmit} className="flex flex-1 flex-col overflow-hidden">
+      <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-4">
@@ -205,10 +219,9 @@ export const EditRegionForm = ({
                       <Form.Label>{t("fields.paymentProviders")}</Form.Label>
                       <Form.Control>
                         <Combobox
-                          options={paymentProviders.map((pp) => ({
-                            label: formatProvider(pp.id),
-                            value: pp.id,
-                          }))}
+                          forceHideInput
+                          options={comboboxProviders.options}
+                          fetchNextPage={comboboxProviders.fetchNextPage}
                           {...field}
                         />
                       </Form.Control>

package/src/routes/regions/region-edit/region-edit.tsx

@@ -48,10 +48,6 @@ export const RegionEdit = () => {
   const storeCurrencies = (store?.supported_currencies ?? []).map(
     (c) => currencies[c.currency_code.toUpperCase()]
   )
-  const { payment_providers: paymentProviders = [] } = usePaymentProviders({
-    limit: 999,
-    is_enabled: true,
-  })
 
   if (isRegionError) {
     throw regionError
@@ -74,7 +70,6 @@ export const RegionEdit = () => {
         <EditRegionForm
           region={region}
           currencies={storeCurrencies}
-          paymentProviders={paymentProviders}
           pricePreferences={pricePreferences}
         />
       )}

package/dist/chunk-EA5GGT2Q.mjs

@@ -1,64 +0,0 @@
-import {
-  ordersQueryKeys
-} from "./chunk-U25RCIX2.mjs";
-import {
-  queryClient
-} from "./chunk-FXYH54JP.mjs";
-import {
-  queryKeysFactory
-} from "./chunk-774WSTCC.mjs";
-import {
-  sdk
-} from "./chunk-DEQUVHHE.mjs";
-
-// src/hooks/api/payments.tsx
-import {
-  useMutation,
-  useQuery
-} from "@tanstack/react-query";
-var PAYMENT_QUERY_KEY = "payment";
-var paymentQueryKeys = queryKeysFactory(PAYMENT_QUERY_KEY);
-var usePaymentProviders = (query, options) => {
-  const { data, ...rest } = useQuery({
-    queryFn: async () => sdk.admin.payment.listPaymentProviders(query),
-    queryKey: [],
-    ...options
-  });
-  return { ...data, ...rest };
-};
-var useCapturePayment = (orderId, paymentId, options) => {
-  return useMutation({
-    mutationFn: (payload) => sdk.admin.payment.capture(paymentId, payload),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.details()
-      });
-      queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.preview(orderId)
-      });
-      options?.onSuccess?.(data, variables, context);
-    },
-    ...options
-  });
-};
-var useRefundPayment = (orderId, paymentId, options) => {
-  return useMutation({
-    mutationFn: (payload) => sdk.admin.payment.refund(paymentId, payload),
-    onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.details()
-      });
-      queryClient.invalidateQueries({
-        queryKey: ordersQueryKeys.preview(orderId)
-      });
-      options?.onSuccess?.(data, variables, context);
-    },
-    ...options
-  });
-};
-
-export {
-  usePaymentProviders,
-  useCapturePayment,
-  useRefundPayment
-};

package/dist/region-edit-DSYIUI7W.mjs

@@ -1,301 +0,0 @@
-import {
-  formatProvider
-} from "./chunk-IR5DHEKS.mjs";
-import {
-  Combobox
-} from "./chunk-CD7VQIPA.mjs";
-import {
-  currencies
-} from "./chunk-DK4WIVY6.mjs";
-import {
-  KeyboundForm
-} from "./chunk-6HTZNHPT.mjs";
-import {
-  RouteDrawer,
-  useRouteModal
-} from "./chunk-4TC5YS65.mjs";
-import {
-  useDocumentDirection
-} from "./chunk-S4DMV3ZT.mjs";
-import {
-  Form
-} from "./chunk-OBQI23QM.mjs";
-import {
-  usePaymentProviders
-} from "./chunk-EA5GGT2Q.mjs";
-import "./chunk-U25RCIX2.mjs";
-import "./chunk-ITJEYJNB.mjs";
-import {
-  useStore
-} from "./chunk-V2LANK5S.mjs";
-import {
-  useRegion,
-  useUpdateRegion
-} from "./chunk-QZ6PT4QV.mjs";
-import {
-  usePricePreferences
-} from "./chunk-QL4XKIVL.mjs";
-import "./chunk-4QUHWHBD.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-DEQUVHHE.mjs";
-import "./chunk-RPUOO7AV.mjs";
-
-// src/routes/regions/region-edit/region-edit.tsx
-import { Heading } from "@medusajs/ui";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { useParams } from "react-router-dom";
-
-// src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx
-import { Button, Input, Select, Switch, Text, toast } from "@medusajs/ui";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import * as zod from "zod";
-import { jsx, jsxs } from "react/jsx-runtime";
-var EditRegionSchema = zod.object({
-  name: zod.string().min(1),
-  currency_code: zod.string(),
-  payment_providers: zod.array(zod.string()),
-  automatic_taxes: zod.boolean(),
-  is_tax_inclusive: zod.boolean()
-});
-var EditRegionForm = ({
-  region,
-  currencies: currencies2,
-  paymentProviders,
-  pricePreferences
-}) => {
-  const { t } = useTranslation();
-  const { handleSuccess } = useRouteModal();
-  const pricePreferenceForRegion = pricePreferences?.find(
-    (preference) => preference.attribute === "region_id" && preference.value === region.id
-  );
-  const direction = useDocumentDirection();
-  const form = useForm({
-    defaultValues: {
-      name: region.name,
-      currency_code: region.currency_code.toUpperCase(),
-      payment_providers: region.payment_providers?.map((pp) => pp.id) || [],
-      automatic_taxes: region.automatic_taxes,
-      is_tax_inclusive: pricePreferenceForRegion?.is_tax_inclusive || false
-    }
-  });
-  const { mutateAsync: updateRegion, isPending: isPendingRegion } = useUpdateRegion(region.id);
-  const handleSubmit = form.handleSubmit(async (values) => {
-    await updateRegion(
-      {
-        name: values.name,
-        automatic_taxes: values.automatic_taxes,
-        currency_code: values.currency_code.toLowerCase(),
-        payment_providers: values.payment_providers,
-        is_tax_inclusive: values.is_tax_inclusive
-      },
-      {
-        onSuccess: () => {
-          toast.success(t("regions.toast.edit"));
-          handleSuccess();
-        },
-        onError: (e) => {
-          toast.error(e.message);
-        }
-      }
-    );
-  });
-  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { onSubmit: handleSubmit, className: "flex flex-1 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx(RouteDrawer.Body, { className: "overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
-        /* @__PURE__ */ jsx(
-          Form.Field,
-          {
-            control: form.control,
-            name: "name",
-            render: ({ field }) => {
-              return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                /* @__PURE__ */ jsx(Form.Label, { children: t("fields.name") }),
-                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
-                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-              ] });
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Form.Field,
-          {
-            control: form.control,
-            name: "currency_code",
-            render: ({ field: { onChange, ref, ...field } }) => {
-              return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                /* @__PURE__ */ jsx(Form.Label, { children: t("fields.currency") }),
-                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(
-                  Select,
-                  {
-                    dir: direction,
-                    onValueChange: onChange,
-                    ...field,
-                    children: [
-                      /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
-                      /* @__PURE__ */ jsx(Select.Content, { children: currencies2.map((c) => /* @__PURE__ */ jsx(Select.Item, { value: c.code, children: c.code.toUpperCase() }, c.code)) })
-                    ]
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-              ] });
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
-        /* @__PURE__ */ jsx(
-          Form.Field,
-          {
-            control: form.control,
-            name: "automatic_taxes",
-            render: ({ field: { value, onChange, ...field } }) => {
-              return /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-                  /* @__PURE__ */ jsx(Form.Label, { children: t("fields.automaticTaxes") }),
-                  /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
-                    Switch,
-                    {
-                      dir: "ltr",
-                      className: "rtl:rotate-180",
-                      ...field,
-                      checked: value,
-                      onCheckedChange: onChange
-                    }
-                  ) })
-                ] }),
-                /* @__PURE__ */ jsx(Form.Hint, { children: t("regions.automaticTaxesHint") }),
-                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-              ] }) });
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Form.Field,
-          {
-            control: form.control,
-            name: "is_tax_inclusive",
-            render: ({ field: { value, onChange, ...field } }) => {
-              return /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-                  /* @__PURE__ */ jsx(Form.Label, { children: t("fields.taxInclusivePricing") }),
-                  /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
-                    Switch,
-                    {
-                      dir: "ltr",
-                      className: "rtl:rotate-180",
-                      ...field,
-                      checked: value,
-                      onCheckedChange: onChange
-                    }
-                  ) })
-                ] }),
-                /* @__PURE__ */ jsx(Form.Hint, { children: t("regions.taxInclusiveHint") }),
-                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-              ] }) });
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", weight: "plus", children: "Providers" }),
-          /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("regions.providersHint") })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Form.Field,
-          {
-            control: form.control,
-            name: "payment_providers",
-            render: ({ field }) => {
-              return /* @__PURE__ */ jsxs(Form.Item, { children: [
-                /* @__PURE__ */ jsx(Form.Label, { children: t("fields.paymentProviders") }),
-                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
-                  Combobox,
-                  {
-                    options: paymentProviders.map((pp) => ({
-                      label: formatProvider(pp.id),
-                      value: pp.id
-                    })),
-                    ...field
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
-              ] });
-            }
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
-      /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPendingRegion, children: t("actions.save") })
-    ] }) })
-  ] }) });
-};
-
-// src/routes/regions/region-edit/region-edit.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var RegionEdit = () => {
-  const { t } = useTranslation2();
-  const { id } = useParams();
-  const {
-    region,
-    isPending: isRegionLoading,
-    isError: isRegionError,
-    error: regionError
-  } = useRegion(id, {
-    fields: "*payment_providers,*countries,+automatic_taxes"
-  });
-  const {
-    store,
-    isPending: isStoreLoading,
-    isError: isStoreError,
-    error: storeError
-  } = useStore();
-  const {
-    price_preferences: pricePreferences = [],
-    isPending: isPreferenceLoading,
-    isError: isPreferenceError,
-    error: preferenceError
-  } = usePricePreferences(
-    {
-      attribute: "region_id",
-      value: id
-    },
-    { enabled: !!region }
-  );
-  const isLoading = isRegionLoading || isStoreLoading || isPreferenceLoading;
-  const storeCurrencies = (store?.supported_currencies ?? []).map(
-    (c) => currencies[c.currency_code.toUpperCase()]
-  );
-  const { payment_providers: paymentProviders = [] } = usePaymentProviders({
-    limit: 999,
-    is_enabled: true
-  });
-  if (isRegionError) {
-    throw regionError;
-  }
-  if (isStoreError) {
-    throw storeError;
-  }
-  if (isPreferenceError) {
-    throw preferenceError;
-  }
-  return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
-    /* @__PURE__ */ jsx2(RouteDrawer.Header, { children: /* @__PURE__ */ jsx2(Heading, { children: t("regions.editRegion") }) }),
-    !isLoading && region && /* @__PURE__ */ jsx2(
-      EditRegionForm,
-      {
-        region,
-        currencies: storeCurrencies,
-        paymentProviders,
-        pricePreferences
-      }
-    )
-  ] });
-};
-export {
-  RegionEdit as Component
-};