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

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/reservations/reservation-list/components/reservation-list-table/use-reservation-table-query.tsx

@@ -13,7 +13,7 @@ export const useReservationTableQuery = ({
     prefix
   )
 
-  const { location_id, created_at, updated_at, quantity, offset, ...rest } = raw
+  const { location_id, created_at, updated_at, order, offset, ...rest } = raw
 
   const searchParams: HttpTypes.AdminGetReservationsParams = {
     limit: pageSize,
@@ -21,6 +21,7 @@ export const useReservationTableQuery = ({
     location_id: location_id,
     created_at: created_at ? JSON.parse(created_at) : undefined,
     updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    order: order ?? "-created_at",
     ...rest,
   }
 

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/shipping-option-types/common/hooks/use-delete-shipping-option-type-action.tsx

@@ -0,0 +1,43 @@
+import { useNavigate } from "react-router-dom"
+import { toast, usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+import { useDeleteShippingOptionType } from "../../../../hooks/api/shipping-option-types"
+
+export const useDeleteShippingOptionTypeAction = (
+  id: string,
+  label: string
+) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+
+  const { mutateAsync } = useDeleteShippingOptionType(id)
+
+  const handleDelete = async () => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("shippingOptionTypes.delete.confirmation", { label }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        navigate("/settings/locations/shipping-option-types", {
+          replace: true,
+        })
+        toast.success(t("shippingOptionTypes.delete.successToast", { label }))
+      },
+      onError: (e) => {
+        toast.error(e.message)
+      },
+    })
+  }
+
+  return handleDelete
+}

package/src/routes/shipping-option-types/shipping-option-type-create/components/create-shipping-option-type-form/create-shipping-option-type-form.tsx

@@ -0,0 +1,168 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Heading, Input, Text, 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 { RouteFocusModal, useRouteModal, } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useCreateShippingOptionType } from "../../../../../hooks/api"
+
+const CreateShippingOptionTypeSchema = z.object({
+  label: z.string().min(1),
+  code: z.string().min(1),
+  description: z.string().optional(),
+})
+
+export const CreateShippingOptionTypeForm = () => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof CreateShippingOptionTypeSchema>>({
+    defaultValues: {
+      label: "",
+      code: "",
+      description: undefined,
+    },
+    resolver: zodResolver(CreateShippingOptionTypeSchema),
+  })
+
+  const generateCodeFromLabel = (label: string) => {
+    return label
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "_")
+      .replace(/_+/g, "_")
+      .replace(/^_|_$/g, "")
+  }
+
+  const { mutateAsync, isPending } = useCreateShippingOptionType()
+
+  const handleSubmit = form.handleSubmit(
+    async (values: z.infer<typeof CreateShippingOptionTypeSchema>) => {
+      await mutateAsync(values, {
+        onSuccess: ({ shipping_option_type }) => {
+          toast.success(
+            t("shippingOptionTypes.create.successToast", {
+              label: shipping_option_type.label.trim(),
+            })
+          )
+
+          handleSuccess(
+            `/settings/locations/shipping-option-types/${shipping_option_type.id}`
+          )
+        },
+        onError: (e) => {
+          toast.error(e.message)
+        },
+      })
+    }
+  )
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <KeyboundForm onSubmit={handleSubmit} className="flex h-full flex-col">
+        <RouteFocusModal.Body className="flex flex-col items-center overflow-auto p-16">
+          <div className="flex w-full max-w-[720px] flex-col gap-y-8">
+            <div>
+              <Heading>{t("shippingOptionTypes.create.header")}</Heading>
+              <Text size="small" className="text-ui-fg-subtle">
+                {t("shippingOptionTypes.create.hint")}
+              </Text>
+            </div>
+            <div className="grid grid-cols-1 gap-4">
+              <Form.Field
+                control={form.control}
+                name="label"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>
+                        {t("shippingOptionTypes.fields.label")}
+                      </Form.Label>
+                      <Form.Control>
+                        <Input
+                          {...field}
+                          onChange={(e) => {
+                            if (
+                              !form.getFieldState("code").isTouched ||
+                              !form.getValues("code")
+                            ) {
+                              form.setValue(
+                                "code",
+                                generateCodeFromLabel(e.target.value)
+                              )
+                            }
+                            field.onChange(e)
+                          }}
+                        />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+              <Form.Field
+                control={form.control}
+                name="code"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>
+                        {t("shippingOptionTypes.fields.code")}
+                      </Form.Label>
+                      <Form.Control>
+                        <Input {...field} />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+              <Form.Field
+                control={form.control}
+                name="description"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>
+                        {t("shippingOptionTypes.fields.description")}
+                        <Text
+                          size="small"
+                          leading="compact"
+                          className="text-ui-fg-muted ml-1 inline"
+                        >
+                          ({t("fields.optional")})
+                        </Text>
+                      </Form.Label>
+                      <Form.Control>
+                        <Input {...field} />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+            </div>
+          </div>
+        </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteFocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("actions.cancel")}
+              </Button>
+            </RouteFocusModal.Close>
+            <Button
+              size="small"
+              variant="primary"
+              type="submit"
+              isLoading={isPending}
+            >
+              {t("actions.create")}
+            </Button>
+          </div>
+        </RouteFocusModal.Footer>
+      </KeyboundForm>
+    </RouteFocusModal.Form>
+  )
+}

package/src/routes/shipping-option-types/shipping-option-type-create/components/create-shipping-option-type-form/index.ts

@@ -0,0 +1 @@
+export * from "./create-shipping-option-type-form"

package/src/routes/shipping-option-types/shipping-option-type-create/index.ts

@@ -0,0 +1 @@
+export { ShippingOptionTypeCreate as Component } from "./shipping-option-type-create"

package/src/routes/shipping-option-types/shipping-option-type-create/shipping-option-type-create.tsx

@@ -0,0 +1,10 @@
+import { RouteFocusModal } from "../../../components/modals"
+import { CreateShippingOptionTypeForm } from "./components/create-shipping-option-type-form"
+
+export const ShippingOptionTypeCreate = () => {
+  return (
+    <RouteFocusModal>
+      <CreateShippingOptionTypeForm />
+    </RouteFocusModal>
+  )
+}

package/src/routes/shipping-option-types/shipping-option-type-detail/breadcrumb.tsx

@@ -0,0 +1,24 @@
+import { HttpTypes } from "@medusajs/types"
+import { UIMatch } from "react-router-dom"
+
+import { useShippingOptionType } from "../../../hooks/api"
+
+type ShippingOptionTypeDetailBreadcrumbProps =
+  UIMatch<HttpTypes.AdminShippingOptionTypeResponse>
+
+export const ShippingOptionTypeDetailBreadcrumb = (
+  props: ShippingOptionTypeDetailBreadcrumbProps
+) => {
+  const { id } = props.params || {}
+
+  const { shipping_option_type } = useShippingOptionType(id!, undefined, {
+    initialData: props.data,
+    enabled: Boolean(id),
+  })
+
+  if (!shipping_option_type) {
+    return null
+  }
+
+  return <span>{shipping_option_type.label}</span>
+}

package/src/routes/shipping-option-types/shipping-option-type-detail/components/shipping-option-type-general-section/index.ts

@@ -0,0 +1 @@
+export * from "./shipping-option-type-general-section"

package/src/routes/shipping-option-types/shipping-option-type-detail/components/shipping-option-type-general-section/shipping-option-type-general-section.tsx

@@ -0,0 +1,66 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Container, Heading, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { useDeleteShippingOptionTypeAction } from "../../../common/hooks/use-delete-shipping-option-type-action"
+
+type ShippingOptionTypeGeneralSectionProps = {
+  shippingOptionType: HttpTypes.AdminShippingOptionType
+}
+
+export const ShippingOptionTypeGeneralSection = ({
+  shippingOptionType,
+}: ShippingOptionTypeGeneralSectionProps) => {
+  const { t } = useTranslation()
+  const handleDelete = useDeleteShippingOptionTypeAction(
+    shippingOptionType.id,
+    shippingOptionType.label
+  )
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between  px-6 py-4">
+        <Heading>{shippingOptionType.label}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  icon: <PencilSquare />,
+                  to: "edit",
+                },
+              ],
+            },
+            {
+              actions: [
+                {
+                  label: t("actions.delete"),
+                  icon: <Trash />,
+                  onClick: handleDelete,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.code")}
+        </Text>
+        <Text size="small" leading="compact">
+          {shippingOptionType.code}
+        </Text>
+      </div>
+      <div className="text-ui-fg-subtle grid grid-cols-2 items-start px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.description")}
+        </Text>
+        <Text size="small" leading="compact">
+          {shippingOptionType.description || "-"}
+        </Text>
+      </div>
+    </Container>
+  )
+}

package/src/routes/shipping-option-types/shipping-option-type-detail/index.ts

@@ -0,0 +1,3 @@
+export { ShippingOptionTypeDetailBreadcrumb as Breadcrumb } from "./breadcrumb"
+export { shippingOptionTypeLoader as loader } from "./loader"
+export { ShippingOptionTypeDetail as Component } from "./shipping-option-type-detail"

package/src/routes/shipping-option-types/shipping-option-type-detail/loader.ts

@@ -0,0 +1,19 @@
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { shippingOptionTypesQueryKeys } from "../../../hooks/api/shipping-option-types"
+import { sdk } from "../../../lib/client"
+import { queryClient } from "../../../lib/query-client"
+
+const shippingOptionTypeDetailQuery = (id: string) => ({
+  queryKey: shippingOptionTypesQueryKeys.detail(id),
+  queryFn: async () => sdk.admin.shippingOptionType.retrieve(id),
+})
+
+export const shippingOptionTypeLoader = async ({
+  params,
+}: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = shippingOptionTypeDetailQuery(id!)
+
+  return queryClient.ensureQueryData(query)
+}

package/src/routes/shipping-option-types/shipping-option-type-detail/shipping-option-type-detail.tsx

@@ -0,0 +1,46 @@
+import { useLoaderData, useParams } from "react-router-dom"
+
+import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { useShippingOptionType } from "../../../hooks/api"
+import { useExtension } from "../../../providers/extension-provider"
+import { ShippingOptionTypeGeneralSection } from "./components/shipping-option-type-general-section"
+import { shippingOptionTypeLoader } from "./loader"
+
+export const ShippingOptionTypeDetail = () => {
+  const { id } = useParams()
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof shippingOptionTypeLoader>
+  >
+
+  const { shipping_option_type, isPending, isError, error } =
+    useShippingOptionType(id!, undefined, {
+      initialData,
+    })
+
+  const { getWidgets } = useExtension()
+
+  if (isPending || !shipping_option_type) {
+    return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <SingleColumnPage
+      widgets={{
+        after: getWidgets("shipping_option_type.details.after"),
+        before: getWidgets("shipping_option_type.details.before"),
+      }}
+      showJSON
+      showMetadata
+      data={shipping_option_type}
+    >
+      <ShippingOptionTypeGeneralSection
+        shippingOptionType={shipping_option_type}
+      />
+    </SingleColumnPage>
+  )
+}

package/src/routes/shipping-option-types/shipping-option-type-edit/components/edit-shipping-option-type-form/edit-shipping-option-type-form.tsx

@@ -0,0 +1,145 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { HttpTypes } from "@medusajs/types"
+import { Button, Input, Text, 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 { useUpdateShippingOptionType } from "../../../../../hooks/api/shipping-option-types"
+
+const EditShippingOptionTypeSchema = z.object({
+  label: z.string().min(1),
+  code: z.string().min(1),
+  description: z.string().optional(),
+})
+
+type EditShippingOptionTypeFormProps = {
+  shippingOptionType: HttpTypes.AdminShippingOptionType
+}
+
+export const EditShippingOptionTypeForm = ({
+  shippingOptionType,
+}: EditShippingOptionTypeFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<z.infer<typeof EditShippingOptionTypeSchema>>({
+    defaultValues: {
+      label: shippingOptionType.label,
+      code: shippingOptionType.code,
+      description: shippingOptionType.description,
+    },
+    resolver: zodResolver(EditShippingOptionTypeSchema),
+  })
+
+  const { mutateAsync, isPending } = useUpdateShippingOptionType(
+    shippingOptionType.id
+  )
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        label: data.label,
+        code: data.code,
+        description: data.description,
+      },
+      {
+        onSuccess: ({ shipping_option_type }) => {
+          toast.success(
+            t("shippingOptionTypes.edit.successToast", {
+              label: shipping_option_type.label,
+            })
+          )
+          handleSuccess()
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-8 overflow-y-auto">
+          <Form.Field
+            control={form.control}
+            name="label"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("shippingOptionTypes.fields.label")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="code"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("shippingOptionTypes.fields.code")}
+                  </Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="description"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>
+                    {t("shippingOptionTypes.fields.description")}
+                    <Text
+                      size="small"
+                      leading="compact"
+                      className="text-ui-fg-muted ml-1 inline"
+                    >
+                      ({t("fields.optional")})
+                    </Text>
+                  </Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {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/shipping-option-types/shipping-option-type-edit/components/edit-shipping-option-type-form/index.ts

@@ -0,0 +1 @@
+export * from "./edit-shipping-option-type-form"

package/src/routes/shipping-option-types/shipping-option-type-edit/index.ts

@@ -0,0 +1 @@
+export { ShippingOptionTypeEdit as Component } from "./shipping-option-type-edit"

package/src/routes/shipping-option-types/shipping-option-type-edit/shipping-option-type-edit.tsx

@@ -0,0 +1,31 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../components/modals"
+import { useShippingOptionType } from "../../../hooks/api"
+import { EditShippingOptionTypeForm } from "./components/edit-shipping-option-type-form"
+
+export const ShippingOptionTypeEdit = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { shipping_option_type, isPending, isError, error } =
+    useShippingOptionType(id!)
+
+  const ready = !isPending && !!shipping_option_type
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t("shippingOptionTypes.edit.header")}</Heading>
+      </RouteDrawer.Header>
+      {ready && (
+        <EditShippingOptionTypeForm shippingOptionType={shipping_option_type} />
+      )}
+    </RouteDrawer>
+  )
+}

package/src/routes/shipping-option-types/shipping-option-type-list/components/shipping-option-type-list-table/index.ts

@@ -0,0 +1 @@
+export * from "./shipping-option-type-list-table"