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

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

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form"
 import { z } from "zod"
 
 import { InformationCircleSolid } from "@medusajs/icons"
-import { Button, Heading, Input, Text, Tooltip, toast } from "@medusajs/ui"
+import { Button, Heading, Input, Text, toast, Tooltip } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { Form } from "../../../../../components/common/form"
 import { CountrySelect } from "../../../../../components/inputs/country-select"
@@ -14,25 +14,59 @@ import {
 } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useCreateTaxRegion } from "../../../../../hooks/api"
+import { useComboboxData } from "../../../../../hooks/use-combobox-data"
+import { Combobox } from "../../../../../components/inputs/combobox"
+import { formatProvider } from "../../../../../lib/format-provider"
+import { sdk } from "../../../../../lib/client"
+import { i18n } from "../../../../../components/utilities/i18n"
 
 type TaxRegionCreateFormProps = {
   parentId?: string
 }
 
-const TaxRegionCreateSchema = z.object({
-  name: z.string().optional(),
-  code: z.string().optional(),
-  rate: z.object({
-    float: z.number().optional(),
-    value: z.string().optional(),
-  }),
-  country_code: z.string().min(1),
-})
+const TaxRegionCreateSchema = z
+  .object({
+    name: z.string().optional(),
+    code: z.string().optional(),
+    rate: z.object({
+      float: z.number().optional(),
+      value: z.string().optional(),
+    }),
+    country_code: z.string(),
+    provider_id: z.string(),
+  })
+  .superRefine(({ provider_id, country_code }, ctx) => {
+    if (!provider_id) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: i18n.t("taxRegions.create.errors.missingProvider"),
+        path: ["provider_id"],
+      })
+    }
+
+    if (!country_code) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: i18n.t("taxRegions.create.errors.missingCountry"),
+        path: ["country_code"],
+      })
+    }
+  })
 
 export const TaxRegionCreateForm = ({ parentId }: TaxRegionCreateFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
 
+  const taxProviders = useComboboxData({
+    queryKey: ["tax_providers"],
+    queryFn: (params) => sdk.admin.taxProvider.list(params),
+    getOptions: (data) =>
+      data.tax_providers.map((provider) => ({
+        label: formatProvider(provider.id),
+        value: provider.id,
+      })),
+  })
+
   const form = useForm<z.infer<typeof TaxRegionCreateSchema>>({
     defaultValues: {
       name: "",
@@ -41,6 +75,7 @@ export const TaxRegionCreateForm = ({ parentId }: TaxRegionCreateFormProps) => {
       },
       code: "",
       country_code: "",
+      provider_id: "",
     },
     resolver: zodResolver(TaxRegionCreateSchema),
   })
@@ -64,6 +99,7 @@ export const TaxRegionCreateForm = ({ parentId }: TaxRegionCreateFormProps) => {
         country_code: values.country_code,
         parent_id: parentId,
         default_tax_rate: defaultRate,
+        provider_id: values.provider_id,
       },
       {
         onSuccess: ({ tax_region }) => {
@@ -112,6 +148,29 @@ export const TaxRegionCreateForm = ({ parentId }: TaxRegionCreateFormProps) => {
                       )
                     }}
                   />
+                  <Form.Field
+                    control={form.control}
+                    name="provider_id"
+                    render={({ field }) => (
+                      <Form.Item>
+                        <Form.Label>
+                          {t("taxRegions.fields.taxProvider")}
+                        </Form.Label>
+                        <Form.Control>
+                          <Combobox
+                            {...field}
+                            options={taxProviders.options}
+                            searchValue={taxProviders.searchValue}
+                            onSearchValueChange={
+                              taxProviders.onSearchValueChange
+                            }
+                            fetchNextPage={taxProviders.fetchNextPage}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )}
+                  />
                 </div>
               </div>
               <div className="flex flex-col gap-4">
@@ -162,6 +221,7 @@ export const TaxRegionCreateForm = ({ parentId }: TaxRegionCreateFormProps) => {
                               <PercentageInput
                                 {...field}
                                 value={value?.value}
+                                decimalsLimit={4}
                                 onValueChange={(value, _name, values) =>
                                   onChange({
                                     value: value,

package/src/routes/tax-regions/tax-region-detail/tax-region-detail.tsx

@@ -1,15 +1,16 @@
 import { useLoaderData, useParams } from "react-router-dom"
+import { useState } from "react"
 
 import { SingleColumnPage } from "../../../components/layout/pages"
 import { useTaxRegion } from "../../../hooks/api/tax-regions"
 import { TaxRegionDetailSection } from "./components/tax-region-detail-section"
 import { TaxRegionProvinceSection } from "./components/tax-region-province-section"
 
-import { useState } from "react"
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { useExtension } from "../../../providers/extension-provider"
 import { TaxRegionOverrideSection } from "./components/tax-region-override-section"
 import { TaxRegionSublevelAlert } from "./components/tax-region-sublevel-alert"
+import { TaxRegionProviderSection } from "./tax-region-provider-section"
 import { taxRegionLoader } from "./loader"
 
 export const TaxRegionDetail = () => {
@@ -41,7 +42,7 @@ export const TaxRegionDetail = () => {
     <SingleColumnPage
       data={taxRegion}
       showJSON
-      // showMetadata // TOOD -> enable when tax region update is added to the API
+      // showMetadata // TOOD -> enable tax region metadata
       widgets={{
         after: getWidgets("tax.details.after"),
         before: getWidgets("tax.details.before"),
@@ -58,6 +59,7 @@ export const TaxRegionDetail = () => {
         showSublevelRegions={showSublevelRegions}
       />
       <TaxRegionOverrideSection taxRegion={taxRegion} />
+      <TaxRegionProviderSection taxRegion={taxRegion} />
     </SingleColumnPage>
   )
 }

package/src/routes/tax-regions/tax-region-detail/tax-region-provider-section/index.ts

@@ -0,0 +1 @@
+export * from "./tax-region-provider-section"

package/src/routes/tax-regions/tax-region-detail/tax-region-provider-section/tax-region-provider-section.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next"
+import { HttpTypes } from "@medusajs/types"
+import { Container, Heading } from "@medusajs/ui"
+
+import { formatProvider } from "../../../../lib/format-provider"
+
+export function TaxRegionProviderSection({
+  taxRegion,
+}: {
+  taxRegion: HttpTypes.AdminTaxRegion
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-y p-0">
+      <Heading level="h2" className="px-6 py-4">
+        {t("taxRegions.provider.header")}
+      </Heading>
+      <div className="px-6 py-4">
+        {taxRegion.provider_id && (
+          <span className="text-ui-fg-subtle">
+            {formatProvider(taxRegion.provider_id!)}
+          </span>
+        )}
+      </div>
+    </Container>
+  )
+}

package/src/routes/tax-regions/tax-region-edit/components/tax-region-edit/index.ts

@@ -0,0 +1 @@
+export * from "./tax-region-edit-form"

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

@@ -0,0 +1,109 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { HttpTypes } from "@medusajs/types"
+import { Button, 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 { useComboboxData } from "../../../../../hooks/use-combobox-data"
+import { sdk } from "../../../../../lib/client"
+import { Combobox } from "../../../../../components/inputs/combobox"
+import { formatProvider } from "../../../../../lib/format-provider"
+import { useUpdateTaxRegion } from "../../../../../hooks/api"
+
+type TaxRegionEditFormProps = {
+  taxRegion: HttpTypes.AdminTaxRegion
+}
+
+const TaxRegionEditSchema = z.object({
+  provider_id: z.string().min(1),
+})
+
+export const TaxRegionEditForm = ({ taxRegion }: TaxRegionEditFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const taxProviders = useComboboxData({
+    queryKey: ["tax_providers"],
+    queryFn: (params) => sdk.admin.taxProvider.list(params),
+    getOptions: (data) =>
+      data.tax_providers.map((provider) => ({
+        label: formatProvider(provider.id),
+        value: provider.id,
+      })),
+  })
+
+  const form = useForm<z.infer<typeof TaxRegionEditSchema>>({
+    defaultValues: {
+      provider_id: taxRegion.provider_id,
+    },
+    resolver: zodResolver(TaxRegionEditSchema),
+  })
+
+  const { mutateAsync, isPending } = useUpdateTaxRegion(taxRegion.id)
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      {
+        provider_id: values.provider_id,
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("taxRegions.edit.successToast"))
+          handleSuccess()
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm
+        className="flex flex-1 flex-col overflow-hidden"
+        onSubmit={handleSubmit}
+      >
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-6 overflow-auto">
+          <div className="flex flex-col gap-y-4">
+            <Form.Field
+              control={form.control}
+              name="provider_id"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label>{t("taxRegions.fields.taxProvider")}</Form.Label>
+                  <Form.Control>
+                    <Combobox
+                      {...field}
+                      options={taxProviders.options}
+                      searchValue={taxProviders.searchValue}
+                      onSearchValueChange={taxProviders.onSearchValueChange}
+                      fetchNextPage={taxProviders.fetchNextPage}
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+          </div>
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer className="shrink-0">
+          <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/tax-regions/tax-region-edit/index.ts

@@ -0,0 +1 @@
+export { TaxRegionEdit as Component } from "./tax-region-edit"

package/src/routes/tax-regions/tax-region-edit/tax-region-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 { TaxRegionEditForm } from "./components/tax-region-edit"
+import { useTaxRegion } from "../../../hooks/api"
+
+export const TaxRegionEdit = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+
+  const { tax_region, isPending, isError, error } = useTaxRegion(id!)
+
+  const ready = !isPending && !!tax_region
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <RouteDrawer.Title asChild>
+          <Heading>{t("taxRegions.edit.header")}</Heading>
+        </RouteDrawer.Title>
+        <RouteDrawer.Description className="sr-only">
+          {t("taxRegions.edit.hint")}
+        </RouteDrawer.Description>
+      </RouteDrawer.Header>
+      {ready && <TaxRegionEditForm taxRegion={tax_region} />}
+    </RouteDrawer>
+  )
+}

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

@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { InformationCircleSolid } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
-import { Button, Heading, Input, Text, Tooltip, toast } from "@medusajs/ui"
+import { Button, Heading, Input, Text, toast, Tooltip } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
@@ -189,6 +189,7 @@ export const TaxRegionProvinceCreateForm = ({
                             <PercentageInput
                               {...field}
                               value={value?.value}
+                              decimalsLimit={4}
                               onValueChange={(value, _name, values) =>
                                 onChange({
                                   value: value,

package/src/routes/tax-regions/tax-region-province-detail/components/tax-region-province-detail-section/tax-region-detail-section.tsx

@@ -33,6 +33,7 @@ export const TaxRegionProvinceDetailSection = ({
           )
         }
       />
+
       {defaultRates.map((rate) => {
         return <TaxRateLine key={rate.id} taxRate={rate} isSublevelTaxRate />
       })}

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

@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import {
   Button,
+  clx,
   Divider,
   Heading,
   Hint,
@@ -8,7 +9,6 @@ import {
   Label,
   Select,
   Text,
-  clx,
   toast,
 } from "@medusajs/ui"
 import { useFieldArray, useForm, useWatch } from "react-hook-form"
@@ -36,6 +36,7 @@ import {
   TaxRateRuleReferenceSchema,
 } from "../../../common/schemas"
 import { createTaxRulePayload } from "../../../common/utils"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 const TaxRegionCreateTaxOverrideSchema = z.object({
   name: z.string().min(1),
@@ -50,12 +51,14 @@ const TaxRegionCreateTaxOverrideSchema = z.object({
   enabled_rules: z.object({
     product: z.boolean(),
     product_type: z.boolean(),
+    shipping_option: z.boolean(),
     // product_collection: z.boolean(),
     // product_tag: z.boolean(),
     // customer_group: z.boolean(),
   }),
   product: z.array(TaxRateRuleReferenceSchema).optional(),
   product_type: z.array(TaxRateRuleReferenceSchema).optional(),
+  shipping_option: z.array(TaxRateRuleReferenceSchema).optional(),
   // product_collection: z.array(TaxRateRuleReferenceSchema).optional(),
   // product_tag: z.array(TaxRateRuleReferenceSchema).optional(),
   // customer_group: z.array(TaxRateRuleReferenceSchema).optional(),
@@ -75,7 +78,7 @@ export const TaxRegionCreateTaxOverrideForm = ({
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
   const { setIsOpen } = useStackedModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<z.infer<typeof TaxRegionCreateTaxOverrideSchema>>({
     defaultValues: {
       name: "",
@@ -87,12 +90,14 @@ export const TaxRegionCreateTaxOverrideForm = ({
       enabled_rules: {
         product: true,
         product_type: false,
+        shipping_option: false,
         // product_collection: false,
         // product_tag: false,
         // customer_group: false,
       },
       product: [],
       product_type: [],
+      shipping_option: [],
       // product_collection: [],
       // product_tag: [],
       // customer_group: [],
@@ -109,6 +114,7 @@ export const TaxRegionCreateTaxOverrideForm = ({
       // customer_group,
       // product_collection,
       // product_tag,
+      shipping_option,
     } = values
 
     const productRules = createTaxRulePayload({
@@ -119,6 +125,10 @@ export const TaxRegionCreateTaxOverrideForm = ({
       reference_type: TaxRateRuleReferenceType.PRODUCT_TYPE,
       references: product_type || [],
     })
+    const shippingOptionRules = createTaxRulePayload({
+      reference_type: TaxRateRuleReferenceType.SHIPPING_OPTION,
+      references: shipping_option || [],
+    })
     // const customerGroupRules = createTaxRulePayload({
     //   reference_type: TaxRateRuleReferenceType.CUSTOMER_GROUP,
     //   references: customer_group || [],
@@ -135,6 +145,7 @@ export const TaxRegionCreateTaxOverrideForm = ({
     const rules = [
       productRules,
       productTypeRules,
+      shippingOptionRules,
       // customerGroupRules,
       // productCollectionRules,
       // productTagRules,
@@ -173,6 +184,11 @@ export const TaxRegionCreateTaxOverrideForm = ({
     name: TaxRateRuleReferenceType.PRODUCT_TYPE,
   })
 
+  const shippingOptions = useFieldArray({
+    control: form.control,
+    name: TaxRateRuleReferenceType.SHIPPING_OPTION,
+  })
+
   // const productCollections = useFieldArray({
   //   control: form.control,
   //   name: TaxRateRuleReferenceType.PRODUCT_COLLECTION,
@@ -195,6 +211,8 @@ export const TaxRegionCreateTaxOverrideForm = ({
         return products
       case TaxRateRuleReferenceType.PRODUCT_TYPE:
         return productTypes
+      case TaxRateRuleReferenceType.SHIPPING_OPTION:
+        return shippingOptions
       // case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
       //   return productCollections
       // case TaxRateRuleReferenceType.PRODUCT_TAG:
@@ -213,6 +231,10 @@ export const TaxRegionCreateTaxOverrideForm = ({
       value: TaxRateRuleReferenceType.PRODUCT_TYPE,
       label: t("taxRegions.fields.targets.options.productType"),
     },
+    {
+      value: TaxRateRuleReferenceType.SHIPPING_OPTION,
+      label: t("taxRegions.fields.targets.options.shippingOption"),
+    },
     // {
     //   value: TaxRateRuleReferenceType.PRODUCT_COLLECTION,
     //   label: t("taxRegions.fields.targets.options.productCollection"),
@@ -234,6 +256,9 @@ export const TaxRegionCreateTaxOverrideForm = ({
     [TaxRateRuleReferenceType.PRODUCT_TYPE]: t(
       "taxRegions.fields.targets.placeholders.productType"
     ),
+    [TaxRateRuleReferenceType.SHIPPING_OPTION]: t(
+      "taxRegions.fields.targets.placeholders.shippingOption"
+    ),
     // [TaxRateRuleReferenceType.PRODUCT_COLLECTION]: t(
     //   "taxRegions.fields.targets.placeholders.productCollection"
     // ),
@@ -390,6 +415,7 @@ export const TaxRegionCreateTaxOverrideForm = ({
                               <PercentageInput
                                 {...field}
                                 placeholder="0.00"
+                                decimalsLimit={4}
                                 value={value?.value}
                                 onValueChange={(value, _name, values) =>
                                   onChange({
@@ -522,6 +548,7 @@ export const TaxRegionCreateTaxOverrideForm = ({
                                   <div className="text-ui-fg-subtle grid gap-1.5 px-1.5 md:grid-cols-2">
                                     {isLast ? (
                                       <Select
+                                        dir={direction}
                                         value={type}
                                         onValueChange={handleChangeType}
                                       >