diff --git a/.changeset/mighty-planes-beg.md b/.changeset/mighty-planes-beg.md new file mode 100644 index 0000000000..fa29ac712e --- /dev/null +++ b/.changeset/mighty-planes-beg.md @@ -0,0 +1,5 @@ +--- +"@medusajs/dashboard": patch +--- + +fix(dashboard): payment providers select diff --git a/packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx b/packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx index b67a317d26..a887544328 100644 --- a/packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx +++ b/packages/admin/dashboard/src/components/inputs/combobox/combobox.tsx @@ -58,6 +58,7 @@ interface ComboboxProps onCreateOption?: (value: string) => void noResultsPlaceholder?: ReactNode allowClear?: boolean + forceHideInput?: boolean // always hide input -> used for singe value select that don't have query/filter } const ComboboxImpl = ( @@ -74,6 +75,7 @@ const ComboboxImpl = ( onCreateOption, noResultsPlaceholder, allowClear, + forceHideInput, ...inputProps }: ComboboxProps, ref: ForwardedRef @@ -152,10 +154,15 @@ const ComboboxImpl = ( return [] } + // do not use `matcher` if the input is hidden + if (forceHideInput) { + return options + } + return matchSorter(options, defferedSearchValue, { keys: ["label"], }) - }, [options, defferedSearchValue, isSearchControlled]) + }, [options, defferedSearchValue, isSearchControlled, forceHideInput]) const observer = useRef( new IntersectionObserver( @@ -197,7 +204,7 @@ const ComboboxImpl = ( const showTag = hasValue && isArrayValue const showSelected = showTag && !searchValue && !open - const hideInput = !isArrayValue && hasValue && !open + const hideInput = forceHideInput || (!isArrayValue && hasValue && !open) const selectedLabel = options.find((o) => o.value === selectedValues)?.label const hidePlaceholder = showSelected || open @@ -251,7 +258,7 @@ const ComboboxImpl = ( e.preventDefault() handleValueChange(isArrayValue ? ([] as unknown as T) : undefined) }} - className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] ps-1.5 pe-1 outline-none" + className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pe-1 ps-1.5 outline-none" > {selectedValues.length} @@ -293,7 +300,7 @@ const ComboboxImpl = ( ref={comboboxRef} onFocus={() => setOpen(true)} className={clx( - "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent ps-2 pe-8 outline-none focus:cursor-text", + "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-2 outline-none focus:cursor-text", "hover:bg-ui-bg-field-hover", { "opacity-0": hideInput, diff --git a/packages/admin/dashboard/src/hooks/api/payments.tsx b/packages/admin/dashboard/src/hooks/api/payments.tsx index 439299f780..b6f9533013 100644 --- a/packages/admin/dashboard/src/hooks/api/payments.tsx +++ b/packages/admin/dashboard/src/hooks/api/payments.tsx @@ -15,6 +15,11 @@ import { FetchError } from "@medusajs/js-sdk" const PAYMENT_QUERY_KEY = "payment" as const export const paymentQueryKeys = queryKeysFactory(PAYMENT_QUERY_KEY) +const PAYMENT_PROVIDERS_QUERY_KEY = "payment_providers" as const +export const paymentProvidersQueryKeys = queryKeysFactory( + PAYMENT_PROVIDERS_QUERY_KEY +) + export const usePaymentProviders = ( query?: HttpTypes.AdminGetPaymentProvidersParams, options?: Omit< @@ -29,7 +34,7 @@ export const usePaymentProviders = ( ) => { const { data, ...rest } = useQuery({ queryFn: async () => sdk.admin.payment.listPaymentProviders(query), - queryKey: [], + queryKey: paymentProvidersQueryKeys.list(query), ...options, }) diff --git a/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx b/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx index 2508795674..92f34cb481 100644 --- a/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx +++ b/packages/admin/dashboard/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({}) 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 ( ({ - label: formatProvider(pp.id), - value: pp.id, - }))} + forceHideInput + options={comboboxProviders.options} + fetchNextPage={comboboxProviders.fetchNextPage} {...field} /> diff --git a/packages/admin/dashboard/src/routes/regions/region-create/region-create.tsx b/packages/admin/dashboard/src/routes/regions/region-create/region-create.tsx index 4583a3f7eb..85dfc10db9 100644 --- a/packages/admin/dashboard/src/routes/regions/region-create/region-create.tsx +++ b/packages/admin/dashboard/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 ( - {!isLoading && store && ( - - )} + {!isLoading && store && } ) } diff --git a/packages/admin/dashboard/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx b/packages/admin/dashboard/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx index 9b7cb9626c..6bf28ecfc6 100644 --- a/packages/admin/dashboard/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx +++ b/packages/admin/dashboard/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 ( - +
@@ -205,10 +219,9 @@ export const EditRegionForm = ({ {t("fields.paymentProviders")} ({ - label: formatProvider(pp.id), - value: pp.id, - }))} + forceHideInput + options={comboboxProviders.options} + fetchNextPage={comboboxProviders.fetchNextPage} {...field} /> diff --git a/packages/admin/dashboard/src/routes/regions/region-edit/region-edit.tsx b/packages/admin/dashboard/src/routes/regions/region-edit/region-edit.tsx index 0068f80e7a..afa287f461 100644 --- a/packages/admin/dashboard/src/routes/regions/region-edit/region-edit.tsx +++ b/packages/admin/dashboard/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 = () => { )}