@spree/dashboard-core 0.13.0 → 1.0.0-beta.1

package/src/products/normalize-money.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+import { normalizeMoneyInput } from './normalize-money'
+
+describe('normalizeMoneyInput', () => {
+  it('passes through canonical en input', () => {
+    expect(normalizeMoneyInput('19.99', 'en')).toBe('19.99')
+    expect(normalizeMoneyInput('1,234.56', 'en')).toBe('1234.56')
+    expect(normalizeMoneyInput('1234.56', 'en')).toBe('1234.56')
+  })
+
+  it('converts de comma-decimal + dot grouping to canonical', () => {
+    expect(normalizeMoneyInput('19,99', 'de')).toBe('19.99')
+    expect(normalizeMoneyInput('1.234,56', 'de')).toBe('1234.56')
+    expect(normalizeMoneyInput('1.000.000,00', 'de')).toBe('1000000.00')
+  })
+
+  it('handles fr narrow-space grouping', () => {
+    // fr groups with U+202F (narrow no-break space) and uses a comma decimal.
+    expect(normalizeMoneyInput('1 234,56', 'fr')).toBe('1234.56')
+    expect(normalizeMoneyInput('73,45', 'fr')).toBe('73.45')
+  })
+
+  it('returns empty string for blank input', () => {
+    expect(normalizeMoneyInput('', 'de')).toBe('')
+    expect(normalizeMoneyInput('   ', 'de')).toBe('')
+    expect(normalizeMoneyInput(null, 'de')).toBe('')
+    expect(normalizeMoneyInput(undefined, 'de')).toBe('')
+  })
+
+  it('preserves a leading minus', () => {
+    expect(normalizeMoneyInput('-5,00', 'de')).toBe('-5.00')
+    expect(normalizeMoneyInput('-5.00', 'en')).toBe('-5.00')
+  })
+
+  it('drops stray currency symbols and whitespace', () => {
+    expect(normalizeMoneyInput(' € 1.234,56 ', 'de')).toBe('1234.56')
+    expect(normalizeMoneyInput('$19.99', 'en')).toBe('19.99')
+  })
+
+  it('keeps no-decimal values intact', () => {
+    expect(normalizeMoneyInput('50', 'de')).toBe('50')
+    expect(normalizeMoneyInput('1.000', 'de')).toBe('1000') // de: dot is grouping
+    expect(normalizeMoneyInput('1,000', 'en')).toBe('1000') // en: comma is grouping
+  })
+
+  it('collapses stray separators to a single decimal point', () => {
+    // Malformed multi-dot/interior-minus input must canonicalize, not pass through.
+    expect(normalizeMoneyInput('1.2.3', 'en')).toBe('1.23')
+    expect(normalizeMoneyInput('12-3.4', 'en')).toBe('123.4')
+    expect(normalizeMoneyInput('-12-3.4', 'en')).toBe('-123.4')
+  })
+
+  it('returns empty for inputs with no digits', () => {
+    expect(normalizeMoneyInput('.', 'en')).toBe('')
+    expect(normalizeMoneyInput('-', 'en')).toBe('')
+    expect(normalizeMoneyInput('abc', 'en')).toBe('')
+  })
+})

package/src/products/normalize-money.ts

@@ -0,0 +1,73 @@
+// Normalize a merchant's locale-formatted money input into the canonical
+// decimal string the Admin API expects (`"1234.56"` — period decimal, no
+// grouping). Industry-standard: localization is a presentation concern, so the
+// dashboard converts here, in the browser, and never relies on the server to
+// parse comma-vs-period. See docs/plans/5.5-client-side-money-normalization.md.
+//
+// The locale is the currency's display locale (its market locale, e.g. EUR →
+// `de`), so the same locale drives both display formatting and this parse.
+
+/**
+ * Derives a locale's decimal and group separators via `Intl`. `fr` groups with
+ * a narrow no-break space (U+202F), so we read the real characters rather than
+ * assuming `,`/`.`/`" "`.
+ */
+function separatorsFor(locale: string): { decimal: string; group: string } {
+  try {
+    const parts = new Intl.NumberFormat(locale, { useGrouping: true }).formatToParts(11111.1)
+    return {
+      decimal: parts.find((p) => p.type === 'decimal')?.value ?? '.',
+      group: parts.find((p) => p.type === 'group')?.value ?? '',
+    }
+  } catch {
+    return { decimal: '.', group: '' }
+  }
+}
+
+/**
+ * Converts a locale-formatted amount string to a canonical decimal string.
+ *
+ * - `"1.234,56"` under `de` → `"1234.56"`
+ * - `"1 234,56"` under `fr` → `"1234.56"` (narrow-space grouping)
+ * - `"19.99"` under `en` → `"19.99"`
+ * - `""` / whitespace → `""`
+ *
+ * Strips the locale's group separator and any whitespace, standardizes the
+ * decimal separator to `.`, and drops stray characters. Keeps the value as a
+ * string throughout — never `Number()`-coerces — to preserve precision.
+ *
+ * @param raw the merchant's typed value
+ * @param locale the display locale the value was entered in (e.g. `de`)
+ * @returns canonical `"1234.56"`-form string, or `''` for blank input
+ */
+export function normalizeMoneyInput(raw: string | null | undefined, locale: string): string {
+  if (raw == null) return ''
+  const trimmed = raw.trim()
+  if (trimmed === '') return ''
+
+  const { decimal, group } = separatorsFor(locale)
+
+  let out = trimmed
+  // Remove the locale's grouping separator (explicit char) plus any whitespace
+  // (covers narrow/no-break spaces used by some locales as the group char).
+  if (group) out = out.split(group).join('')
+  out = out.replace(/\s/g, '')
+  // Standardize the decimal separator to `.`.
+  if (decimal !== '.') out = out.split(decimal).join('.')
+  // Drop anything that isn't a digit, dot, or minus.
+  out = out.replace(/[^0-9.-]/g, '')
+
+  // Enforce the canonical shape: a single optional leading minus, then digits
+  // with at most one decimal point. Stray separators (`1.2.3`) or interior
+  // minus signs (`12-3.4`) would otherwise reach the API as malformed values.
+  const negative = out.startsWith('-')
+  const digitsAndDots = out.replace(/-/g, '')
+  const firstDot = digitsAndDots.indexOf('.')
+  const canonical =
+    firstDot === -1
+      ? digitsAndDots
+      : `${digitsAndDots.slice(0, firstDot)}.${digitsAndDots.slice(firstDot + 1).replace(/\./g, '')}`
+
+  if (canonical === '' || canonical === '.') return ''
+  return negative ? `-${canonical}` : canonical
+}

package/src/products/normalize-quantity.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { normalizeQuantityRule } from './normalize-quantity'
+
+describe('normalizeQuantityRule', () => {
+  it('reads a whole number', () => {
+    expect(normalizeQuantityRule('48')).toBe(48)
+    expect(normalizeQuantityRule(24)).toBe(24)
+  })
+
+  // Blank means the rule is unset, which is not zero: an empty minimum lets
+  // a buyer take one.
+  it('treats a blank field as unset', () => {
+    expect(normalizeQuantityRule('')).toBeNull()
+    expect(normalizeQuantityRule('   ')).toBeNull()
+    expect(normalizeQuantityRule(null)).toBeNull()
+    expect(normalizeQuantityRule(undefined)).toBeNull()
+  })
+
+  it('rejects values a rule cannot mean', () => {
+    expect(normalizeQuantityRule('0')).toBeNull()
+    expect(normalizeQuantityRule('-5')).toBeNull()
+    expect(normalizeQuantityRule('abc')).toBeNull()
+  })
+
+  // Truncating would be the same silent adjustment the whole feature exists
+  // to prevent, one level up.
+  it('refuses a fraction rather than truncating it', () => {
+    expect(normalizeQuantityRule('48.9')).toBeNull()
+    expect(normalizeQuantityRule('2.5')).toBeNull()
+    expect(normalizeQuantityRule(1.5)).toBeNull()
+  })
+})

package/src/products/normalize-quantity.ts

@@ -0,0 +1,31 @@
+// Purchasing-rule normalization for the variant editors, mirroring
+// `Spree::Variant`'s own validations so a merchant hears about a bad value
+// while typing rather than on save.
+
+/** What a buyer is quoted in. Stored quantities stay units at every level. */
+export const PURCHASE_UNITS = ['unit', 'carton'] as const
+
+export type PurchaseUnit = (typeof PURCHASE_UNITS)[number]
+
+/**
+ * Reads a quantity rule from a number input. Blank means the rule is unset,
+ * which is not the same as zero: an empty minimum lets a buyer take one, a
+ * minimum of zero is meaningless and the server refuses it.
+ *
+ * A fraction is refused rather than truncated. These rules are whole units,
+ * and this feature exists because silently adjusting a wholesale quantity is
+ * a five-figure surprise — a rule of 2.5 saved as 2 is the same mistake one
+ * level up.
+ *
+ * @returns a positive whole number, or null when the field says nothing or
+ *   cannot be one.
+ */
+export function normalizeQuantityRule(value: unknown): number | null {
+  const trimmed = String(value ?? '').trim()
+  if (trimmed === '') return null
+
+  const parsed = Number(trimmed)
+  if (!Number.isInteger(parsed) || parsed < 1) return null
+
+  return parsed
+}

package/src/products/product-bulk-price-editor.tsx

@@ -0,0 +1,165 @@
+import type { ProductFormValues, VariantPriceFormValues } from '@spree/dashboard-core'
+import { type BulkPriceRow, BulkPriceTable } from '@spree/dashboard-ui'
+import { useCallback, useMemo } from 'react'
+import { type UseFormReturn, useWatch } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { composeOptionsText } from '../products/variants-matrix'
+import { currencyParts } from './currency-parts'
+import { normalizeMoneyInput } from './normalize-money'
+import {
+  useFormCurrencyLocale as useCurrencyLocale,
+  useFormOptionTypes as useOptionTypes,
+} from './use-product-form-data'
+
+interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: UseFormReturn<ProductFormValues, any, any>
+  /** ISO currency code (e.g. "USD", "EUR"). */
+  currency: string
+  /** Display label for the product, used as the table's section header. */
+  productName: string
+}
+
+/**
+ * Form-backed prices spreadsheet for ONE product's variants in ONE currency.
+ * Reads from and writes to the parent product form's `variants[].prices`
+ * array — works equally for persisted and unsaved variants, since both live
+ * in form state the same way. No server fetch, no edit-tracking map: the
+ * parent form's `isDirty` is the single source of truth for save gating.
+ *
+ * Amounts are STRINGS, not numbers. The merchant's raw input flows straight
+ * through to the API; the backend's `Spree::LocalizedNumber.parse` handles
+ * locale-aware parsing (comma decimals, grouped digits, etc.) so the
+ * frontend doesn't have to reimplement it. Frontend coercion via `Number()`
+ * would silently mangle inputs like `"1.234,56"` into `NaN` and drop the
+ * price entirely.
+ */
+export function ProductBulkPriceEditor({ form, currency, productName }: Props) {
+  const { t } = useTranslation()
+  const variants = useWatch({ control: form.control, name: 'variants' }) ?? []
+  const { data: optionTypesData } = useOptionTypes()
+  const optionTypes = useMemo(() => optionTypesData?.data ?? [], [optionTypesData])
+  const localeForCurrency = useCurrencyLocale()
+
+  // Format the grid in the currency's market locale (e.g. EUR → `de`, comma
+  // decimal). The same locale normalizes the merchant's input back to canonical
+  // form on commit (see `handleChange`), so form state — like the API value it
+  // hydrates from — is ALWAYS canonical `"1234.56"`. Untouched prices therefore
+  // never get re-normalized on save.
+  //
+  // Fall back to `en` (canonical period-decimal), NOT the UI language: money
+  // formatting/parsing must never depend on the dashboard's language, or a USD
+  // value under a German UI would be parsed as `40.00` → 4000.
+  const marketLocale = localeForCurrency(currency) || 'en'
+  const { symbol, decimal } = useMemo(
+    () => currencyParts(currency, marketLocale),
+    [currency, marketLocale],
+  )
+
+  // Project the form's variants into BulkPriceRow[] for the picked currency.
+  // One header row per product (always this product), then one row per variant.
+  // Row id is the variant's array index so onChange can write back unambiguously,
+  // even for variants without a persisted id.
+  const rows = useMemo<BulkPriceRow[]>(() => {
+    if (variants.length === 0) return []
+    const out: BulkPriceRow[] = [{ id: `header:product`, kind: 'header', groupLabel: productName }]
+    variants.forEach((v, idx) => {
+      const price = (v.prices ?? []).find((p) => p.currency === currency)
+      const label = v.options.length > 0 ? composeOptionsText(v.options, optionTypes) : null
+      out.push({
+        id: `variant:${idx}`,
+        kind: 'item',
+        variantLabel: label,
+        sku: v.sku ?? null,
+        // Display the canonical-decimal string swapped into the user's
+        // locale separator. The merchant's raw input is stored as-is in
+        // form state — this swap is presentation-only.
+        amount: price?.amount ? price.amount.replace('.', decimal) : null,
+        compareAt: price?.compare_at_amount ? price.compare_at_amount.replace('.', decimal) : null,
+      })
+    })
+    return out
+  }, [variants, currency, productName, decimal, optionTypes])
+
+  const handleChange = useCallback(
+    (rowId: string, field: 'amount' | 'compareAt', next: string | null) => {
+      if (!rowId.startsWith('variant:')) return
+      const idx = Number.parseInt(rowId.slice('variant:'.length), 10)
+      if (Number.isNaN(idx)) return
+
+      const current = form.getValues(`variants.${idx}.prices`) ?? []
+      const existingIdx = current.findIndex((p) => p.currency === currency)
+      // Normalize the merchant's localized input to canonical `"1234.56"` here,
+      // on commit — so form state is always canonical (matching the API values
+      // it hydrates from) and the save path never re-normalizes. Empty,
+      // whitespace, OR malformed input (normalizes to `''`) all mean "no value"
+      // — never persist `''` as a real amount.
+      const trimmed = next == null ? '' : next.trim()
+      const normalized = trimmed === '' ? '' : normalizeMoneyInput(trimmed, marketLocale)
+      const raw = normalized === '' ? null : normalized
+
+      const nextPrices: VariantPriceFormValues[] = [...current]
+
+      if (existingIdx === -1) {
+        // No price entry in this currency yet. Only create one when the user
+        // sets the AMOUNT — a compare-at-only edit without a base amount is
+        // meaningless (and would otherwise persist a real $0 price). Defer
+        // compare-at until amount exists.
+        if (raw == null) return
+        if (field !== 'amount') return
+        nextPrices.push({
+          currency,
+          amount: raw,
+          compare_at_amount: null,
+        })
+      } else {
+        const existing = nextPrices[existingIdx]
+        if (field === 'amount') {
+          // Clearing the amount removes the price entry for this currency.
+          // Coercing to "0" would persist a real $0 price and never allow
+          // the merchant to drop a currency from a variant.
+          if (raw == null) {
+            nextPrices.splice(existingIdx, 1)
+          } else {
+            nextPrices[existingIdx] = { ...existing, amount: raw }
+          }
+        } else {
+          nextPrices[existingIdx] = { ...existing, compare_at_amount: raw }
+        }
+      }
+
+      form.setValue(`variants.${idx}.prices`, nextPrices, {
+        shouldDirty: true,
+      })
+    },
+    [form, currency, marketLocale],
+  )
+
+  return (
+    <BulkPriceTable
+      rows={rows}
+      symbol={symbol}
+      decimal={decimal}
+      onChange={handleChange}
+      labels={{
+        variant: t('admin.pages.products.price_lists.edit_prices.columns.variant'),
+        sku: t('admin.pages.products.price_lists.edit_prices.columns.sku'),
+        price: t('admin.pages.products.price_lists.edit_prices.columns.price'),
+        compareAt: t('admin.pages.products.price_lists.edit_prices.columns.compare_at_price'),
+        variantDefault: t('admin.pages.products.price_lists.edit_prices.variant_default'),
+        loading: t('admin.common.loading'),
+        pageOf: t('admin.common.page_of', { page: '{page}', total: '{total}' }),
+        prev: t('admin.common.prev'),
+        next: t('admin.common.next'),
+        emptyMessage: t('admin.pages.products.edit.bulk_prices.no_variants'),
+        gridAriaLabel: t('admin.pages.products.price_lists.edit_prices.grid_aria'),
+        priceAriaTemplate: t('admin.pages.products.price_lists.edit_prices.price_aria', {
+          label: '{label}',
+        }),
+        compareAtAriaTemplate: t('admin.pages.products.price_lists.edit_prices.compare_at_aria', {
+          label: '{label}',
+        }),
+      }}
+    />
+  )
+}