diff --git a/.changeset/large-months-yawn.md b/.changeset/large-months-yawn.md new file mode 100644 index 0000000000..eed3fc7b05 --- /dev/null +++ b/.changeset/large-months-yawn.md @@ -0,0 +1,5 @@ +--- +"@medusajs/dashboard": patch +--- + +fix(dashboard): support more decimals for tx rates diff --git a/packages/admin/dashboard/src/components/inputs/percentage-input/percentage-input.tsx b/packages/admin/dashboard/src/components/inputs/percentage-input/percentage-input.tsx index 945b7693b0..860f81b301 100644 --- a/packages/admin/dashboard/src/components/inputs/percentage-input/percentage-input.tsx +++ b/packages/admin/dashboard/src/components/inputs/percentage-input/percentage-input.tsx @@ -1,10 +1,22 @@ -import { Input, Text, clx } from "@medusajs/ui" +import { clx, Input, Text } from "@medusajs/ui" +import { getNumberOfDecimalPlaces } from "../../../lib/number-helper" import { ComponentProps, ElementRef, forwardRef } from "react" import Primitive from "react-currency-input-field" -/** - * @deprecated Use `PercentageInput` instead - */ +const MIN_DECIMAL_SCALE = 2 + +function resolveDecimalScale( + value: string | readonly string[] | number | undefined | null +): number | undefined { + if (value == null || Array.isArray(value)) { + return MIN_DECIMAL_SCALE + } + return Math.max( + getNumberOfDecimalPlaces(parseFloat(value.toString())), + MIN_DECIMAL_SCALE + ) +} + export const DeprecatedPercentageInput = forwardRef< ElementRef, Omit, "type"> @@ -38,38 +50,56 @@ DeprecatedPercentageInput.displayName = "PercentageInput" export const PercentageInput = forwardRef< ElementRef<"input">, ComponentProps ->(({ min = 0, decimalScale = 2, className, ...props }, ref) => { - return ( -
- -
- - % - +>( + ( + { + min = 0, + max = 100, + decimalScale, + decimalsLimit, + value, + className, + ...props + }, + ref + ) => { + const resolvedDecimalScale = decimalScale ?? resolveDecimalScale(value) + const resolvedDecimalsLimit = decimalsLimit ?? resolvedDecimalScale + + return ( +
+ +
+ + % + +
-
- ) -}) + ) + } +) PercentageInput.displayName = "PercentageInput" diff --git a/packages/admin/dashboard/src/lib/number-helper.ts b/packages/admin/dashboard/src/lib/number-helper.ts new file mode 100644 index 0000000000..861fd5cda6 --- /dev/null +++ b/packages/admin/dashboard/src/lib/number-helper.ts @@ -0,0 +1,19 @@ +/** + * Gets the number of decimal places in a number + * @param num - The number for which we are getting the number of decimal places + * @returns The number of decimal places + * + * @example + * getDecimalPlaces(123.456) // 3 + * getDecimalPlaces(42) // 0 + * getDecimalPlaces(10.0000) // 0 + */ +export function getNumberOfDecimalPlaces(num: number): number { + // Convert to string and check if it contains a decimal point + const str = num.toString() + if (str.indexOf(".") === -1) { + return 0 + } + // Return the length of the part after the decimal point + return str.split(".")[1].length +} diff --git a/packages/admin/dashboard/src/lib/percentage-helpers.ts b/packages/admin/dashboard/src/lib/percentage-helpers.ts index 20af15db63..b0d48b51c8 100644 --- a/packages/admin/dashboard/src/lib/percentage-helpers.ts +++ b/packages/admin/dashboard/src/lib/percentage-helpers.ts @@ -1,6 +1,7 @@ const formatter = new Intl.NumberFormat([], { style: "percent", minimumFractionDigits: 2, + maximumFractionDigits: 4, }) /** diff --git a/packages/admin/dashboard/src/routes/tax-regions/tax-region-create/components/tax-region-create-form/tax-region-create-form.tsx b/packages/admin/dashboard/src/routes/tax-regions/tax-region-create/components/tax-region-create-form/tax-region-create-form.tsx index b7f91fcb61..9a13962238 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/tax-region-create/components/tax-region-create-form/tax-region-create-form.tsx +++ b/packages/admin/dashboard/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" @@ -221,6 +221,7 @@ export const TaxRegionCreateForm = ({ parentId }: TaxRegionCreateFormProps) => { onChange({ value: value, diff --git a/packages/admin/dashboard/src/routes/tax-regions/tax-region-province-create/components/tax-region-province-create-form/tax-region-province-create-form.tsx b/packages/admin/dashboard/src/routes/tax-regions/tax-region-province-create/components/tax-region-province-create-form/tax-region-province-create-form.tsx index bd69bdf7e4..868baf98f5 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/tax-region-province-create/components/tax-region-province-create-form/tax-region-province-create-form.tsx +++ b/packages/admin/dashboard/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 = ({ onChange({ value: value, diff --git a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-create/components/tax-region-override-create-form/tax-region-tax-override-create.tsx b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-create/components/tax-region-override-create-form/tax-region-tax-override-create.tsx index 7d9a043ca7..e33513266f 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-create/components/tax-region-override-create-form/tax-region-tax-override-create.tsx +++ b/packages/admin/dashboard/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" @@ -414,6 +414,7 @@ export const TaxRegionCreateTaxOverrideForm = ({ onChange({ diff --git a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/components/tax-region-tax-override-edit-form/tax-region-tax-override-edit-form.tsx b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/components/tax-region-tax-override-edit-form/tax-region-tax-override-edit-form.tsx index 7065100d0f..94e28fc126 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/components/tax-region-tax-override-edit-form/tax-region-tax-override-edit-form.tsx +++ b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-override-edit/components/tax-region-tax-override-edit-form/tax-region-tax-override-edit-form.tsx @@ -3,6 +3,7 @@ import { MagnifyingGlass } from "@medusajs/icons" import { HttpTypes } from "@medusajs/types" import { Button, + clx, Divider, Heading, Hint, @@ -10,7 +11,6 @@ import { Label, Select, Text, - clx, toast, } from "@medusajs/ui" import { useFieldArray, useForm, useWatch } from "react-hook-form" @@ -414,6 +414,7 @@ export const TaxRegionTaxOverrideEditForm = ({ onChange({ value: value, diff --git a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-rate-create/components/tax-region-tax-rate-create-form/tax-region-tax-rate-create-form.tsx b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-rate-create/components/tax-region-tax-rate-create-form/tax-region-tax-rate-create-form.tsx index 1df9421617..7b5ed57641 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-rate-create/components/tax-region-tax-rate-create-form/tax-region-tax-rate-create-form.tsx +++ b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-rate-create/components/tax-region-tax-rate-create-form/tax-region-tax-rate-create-form.tsx @@ -119,6 +119,7 @@ export const TaxRegionTaxRateCreateForm = ({ onChange({ value: value, diff --git a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-rate-edit/components/tax-region-tax-rate-edit-form/tax-region-tax-rate-edit-form.tsx b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-rate-edit/components/tax-region-tax-rate-edit-form/tax-region-tax-rate-edit-form.tsx index 7332db173d..b402095297 100644 --- a/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-rate-edit/components/tax-region-tax-rate-edit-form/tax-region-tax-rate-edit-form.tsx +++ b/packages/admin/dashboard/src/routes/tax-regions/tax-region-tax-rate-edit/components/tax-region-tax-rate-edit-form/tax-region-tax-rate-edit-form.tsx @@ -117,6 +117,7 @@ export const TaxRegionTaxRateEditForm = ({ onChange({ value: value,