@medusajs/dashboard 2.10.4-snapshot-20250923121159 → 2.10.4-snapshot-20250925180256

package/src/routes/refund-reasons/refund-reason-edit/components/refund-reason-edit-form/refund-reason-edit-form.tsx

@@ -0,0 +1,119 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { HttpTypes } from "@medusajs/types"
+import { Button, Input, Textarea, toast } from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+
+import { Form } from "../../../../../components/common/form"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useUpdateRefundReason } from "../../../../../hooks/api/refund-reasons"
+
+type RefundReasonEditFormProps = {
+  refundReason: HttpTypes.AdminRefundReason
+}
+
+const RefundReasonEditSchema = z.object({
+  label: z.string().min(1),
+  description: z.string().optional(),
+})
+
+export const RefundReasonEditForm = ({
+  refundReason,
+}: RefundReasonEditFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof RefundReasonEditSchema>>({
+    defaultValues: {
+      label: refundReason.label,
+      description: refundReason.description ?? undefined,
+    },
+    resolver: zodResolver(RefundReasonEditSchema),
+  })
+
+  const { mutateAsync, isPending } = useUpdateRefundReason(refundReason.id)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(data, {
+      onSuccess: ({ refund_reason }) => {
+        toast.success(
+          t("refundReasons.edit.successToast", {
+            label: refund_reason.label,
+          })
+        )
+        handleSuccess()
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    })
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm
+        className="flex size-full flex-col overflow-hidden"
+        onSubmit={handleSubmit}
+      >
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
+          <Form.Field
+            control={form.control}
+            name="label"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("refundReasons.fields.label.label")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Input
+                      {...field}
+                      placeholder={t("refundReasons.fields.label.placeholder")}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="description"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label optional>
+                    {t("refundReasons.fields.description.label")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Textarea
+                      {...field}
+                      placeholder={t(
+                        "refundReasons.fields.description.placeholder"
+                      )}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button variant="secondary" size="small" type="button">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button size="small" type="submit" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/refund-reasons/refund-reason-edit/index.ts

@@ -0,0 +1 @@
+export { RefundReasonEdit as Component } from "./refund-reason-edit"

package/src/routes/refund-reasons/refund-reason-edit/refund-reason-edit.tsx

@@ -0,0 +1,33 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../components/modals"
+import { useRefundReason } from "../../../hooks/api/refund-reasons"
+import { RefundReasonEditForm } from "./components/refund-reason-edit-form"
+
+export const RefundReasonEdit = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { refund_reason, isPending, isError, error } = useRefundReason(id!)
+
+  const ready = !isPending && !!refund_reason
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <RouteDrawer.Title asChild>
+          <Heading>{t("refundReasons.edit.header")}</Heading>
+        </RouteDrawer.Title>
+        <RouteDrawer.Description className="sr-only">
+          {t("refundReasons.edit.subtitle")}
+        </RouteDrawer.Description>
+      </RouteDrawer.Header>
+      {ready && <RefundReasonEditForm refundReason={refund_reason} />}
+    </RouteDrawer>
+  )
+}

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

@@ -0,0 +1 @@
+export { RefundReasonListTable } from "./refund-reason-list-table"

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

@@ -0,0 +1,138 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+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 { useRefundReasonTableColumns } from "../../../../../hooks/table/columns"
+import { useRefundReasonTableQuery } from "../../../../../hooks/table/query"
+
+const PAGE_SIZE = 20
+
+export const RefundReasonListTable = () => {
+  const { t } = useTranslation()
+  const { searchParams } = useRefundReasonTableQuery({
+    pageSize: PAGE_SIZE,
+  })
+
+  const { refund_reasons, count, isLoading, isError, error } = useRefundReasons(
+    searchParams,
+    {
+      placeholderData: keepPreviousData,
+    }
+  )
+
+  const columns = useColumns()
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y px-0 py-0">
+      <DataTable
+        data={refund_reasons}
+        columns={columns}
+        rowCount={count}
+        pageSize={PAGE_SIZE}
+        getRowId={(row) => row.id}
+        heading={t("refundReasons.domain")}
+        subHeading={t("refundReasons.subtitle")}
+        emptyState={{
+          empty: {
+            heading: t("general.noRecordsMessage"),
+          },
+          filtered: {
+            heading: t("general.noRecordsMessage"),
+            description: t("general.noRecordsMessageFiltered"),
+          },
+        }}
+        actions={[
+          {
+            label: t("actions.create"),
+            to: "create",
+          },
+        ]}
+        isLoading={isLoading}
+        enableSearch={true}
+      />
+    </Container>
+  )
+}
+
+const columnHelper = createDataTableColumnHelper<HttpTypes.AdminRefundReason>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+  const base = useRefundReasonTableColumns()
+
+  const { mutateAsync } = useDeleteRefundReasonLazy()
+
+  const handleDelete = useCallback(
+    async (refundReason: HttpTypes.AdminRefundReason) => {
+      const confirm = await prompt({
+        title: t("general.areYouSure"),
+        description: t("refundReasons.delete.confirmation", {
+          label: refundReason.label,
+        }),
+        confirmText: t("actions.delete"),
+        cancelText: t("actions.cancel"),
+      })
+
+      if (!confirm) {
+        return
+      }
+
+      await mutateAsync(refundReason.id, {
+        onSuccess: () => {
+          toast.success(t("refundReasons.delete.successToast"))
+        },
+        onError: (e) => {
+          toast.error(e.message)
+        },
+      })
+    },
+    [t, prompt, mutateAsync]
+  )
+
+  return useMemo(
+    () => [
+      ...base,
+      columnHelper.action({
+        actions: (ctx) => [
+          [
+            {
+              icon: <PencilSquare />,
+              label: t("actions.edit"),
+              onClick: () =>
+                navigate(
+                  `/settings/refund-reasons/${ctx.row.original.id}/edit`
+                ),
+            },
+          ],
+          [
+            {
+              icon: <Trash />,
+              label: t("actions.delete"),
+              onClick: () => handleDelete(ctx.row.original),
+            },
+          ],
+        ],
+      }),
+    ],
+    [base, handleDelete, navigate, t]
+  )
+}

package/src/routes/refund-reasons/refund-reason-list/index.ts

@@ -0,0 +1,2 @@
+export { refundReasonListLoader as loader } from "./loader"
+export { RefundReasonList as Component } from "./refund-reason-list"

package/src/routes/refund-reasons/refund-reason-list/loader.ts

@@ -0,0 +1,16 @@
+import { refundReasonsQueryKeys } from "../../../hooks/api"
+import { sdk } from "../../../lib/client"
+import { queryClient } from "../../../lib/query-client"
+
+const refundReasonListQuery = () => ({
+  queryKey: refundReasonsQueryKeys.list(),
+  queryFn: async () => sdk.admin.refundReason.list(),
+})
+
+export const refundReasonListLoader = async () => {
+  const query = refundReasonListQuery()
+  return (
+    queryClient.getQueryData(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}

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

@@ -0,0 +1,21 @@
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { useExtension } from "../../../providers/extension-provider"
+import { RefundReasonListTable } from "./components/refund-reason-list-table"
+
+export const RefundReasonList = () => {
+  const { getWidgets } = useExtension()
+
+  return (
+    <SingleColumnPage
+      showMetadata={false}
+      showJSON={false}
+      hasOutlet
+      widgets={{
+        after: getWidgets("refund_reason.list.after"),
+        before: getWidgets("refund_reason.list.before"),
+      }}
+    >
+      <RefundReasonListTable />
+    </SingleColumnPage>
+  )
+}

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"
@@ -37,10 +37,12 @@ import { formatProvider } from "../../../../../lib/format-provider"
 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({
@@ -57,14 +59,11 @@ 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()
-
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof CreateRegionSchema>>({
     defaultValues: {
       name: "",
@@ -180,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
@@ -226,7 +236,11 @@ export const CreateRegionForm = ({
                         <Form.Item>
                           <Form.Label>{t("fields.currency")}</Form.Label>
                           <Form.Control>
-                            <Select {...field} onValueChange={onChange}>
+                            <Select
+                              dir={direction}
+                              {...field}
+                              onValueChange={onChange}
+                            >
                               <Select.Trigger ref={ref}>
                                 <Select.Value />
                               </Select.Trigger>
@@ -260,6 +274,8 @@ export const CreateRegionForm = ({
                           <Form.Label>{t("fields.automaticTaxes")}</Form.Label>
                           <Form.Control>
                             <Switch
+                              dir="ltr"
+                              className="rtl:rotate-180"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}
@@ -287,6 +303,8 @@ export const CreateRegionForm = ({
                           </Form.Label>
                           <Form.Control>
                             <Switch
+                              className="rtl:rotate-180"
+                              dir="ltr"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}
@@ -406,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,
@@ -14,11 +14,13 @@ import { KeyboundForm } from "../../../../../components/utilities/keybound-form/
 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[]
 }
 
@@ -33,7 +35,6 @@ const EditRegionSchema = zod.object({
 export const EditRegionForm = ({
   region,
   currencies,
-  paymentProviders,
   pricePreferences,
 }: EditRegionFormProps) => {
   const { t } = useTranslation()
@@ -42,7 +43,7 @@ export const EditRegionForm = ({
     (preference) =>
       preference.attribute === "region_id" && preference.value === region.id
   )
-
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof EditRegionSchema>>({
     defaultValues: {
       name: region.name,
@@ -53,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)
 
@@ -79,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">
@@ -106,7 +121,11 @@ export const EditRegionForm = ({
                     <Form.Item>
                       <Form.Label>{t("fields.currency")}</Form.Label>
                       <Form.Control>
-                        <Select onValueChange={onChange} {...field}>
+                        <Select
+                          dir={direction}
+                          onValueChange={onChange}
+                          {...field}
+                        >
                           <Select.Trigger ref={ref}>
                             <Select.Value />
                           </Select.Trigger>
@@ -137,6 +156,8 @@ export const EditRegionForm = ({
                           <Form.Label>{t("fields.automaticTaxes")}</Form.Label>
                           <Form.Control>
                             <Switch
+                              dir="ltr"
+                              className="rtl:rotate-180"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}
@@ -164,6 +185,8 @@ export const EditRegionForm = ({
                           </Form.Label>
                           <Form.Control>
                             <Switch
+                              dir="ltr"
+                              className="rtl:rotate-180"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}
@@ -196,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/src/routes/reservations/reservation-detail/components/edit-reservation/components/edit-reservation-form.tsx

@@ -10,6 +10,7 @@ import { z } from "zod"
 import { Form } from "../../../../../../components/common/form"
 import { KeyboundForm } from "../../../../../../components/utilities/keybound-form"
 import { useUpdateReservationItem } from "../../../../../../hooks/api/reservations"
+import { useDocumentDirection } from "../../../../../../hooks/use-document-direction"
 
 type EditReservationFormProps = {
   reservation: HttpTypes.AdminReservationResponse["reservation"]
@@ -59,7 +60,7 @@ export const EditReservationForm = ({
 }: EditReservationFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof EditReservationSchema>>({
     defaultValues: getDefaultValues(reservation),
     resolver: zodResolver(EditReservationSchema),
@@ -102,6 +103,7 @@ export const EditReservationForm = ({
                   <Form.Label>{t("inventory.reservation.location")}</Form.Label>
                   <Form.Control>
                     <Select
+                      dir={direction}
                       value={value}
                       onValueChange={(v) => {
                         onChange(v)

package/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/create-sales-channel-form.tsx

@@ -119,6 +119,8 @@ export const CreateSalesChannelForm = () => {
                         <Form.Label>{t("general.enabled")}</Form.Label>
                         <Form.Control>
                           <Switch
+                            dir="ltr"
+                            className="rtl:rotate-180"
                             {...field}
                             checked={value}
                             onCheckedChange={onChange}

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

@@ -103,6 +103,8 @@ export const EditSalesChannelForm = ({
                     <Form.Label>{t("general.enabled")}</Form.Label>
                     <Form.Control>
                       <Switch
+                        dir="ltr"
+                        className="rtl:rotate-180"
                         onCheckedChange={onChange}
                         checked={value}
                         {...field}

package/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx

@@ -287,6 +287,8 @@ const useColumns = (
           return (
             <div className="flex items-center justify-end">
               <Switch
+                dir="ltr"
+                className="rtl:rotate-180"
                 disabled={isPreSelected}
                 checked={isTaxInclusive ?? false}
                 onCheckedChange={(val) => {