@open-mercato/core 0.8.1-develop.7221.1.ece7ca874e → 0.8.1-develop.7225.1.73190a4a95

package/src/modules/catalog/backend/catalog/prices/[id]/edit/page.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import * as React from 'react'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { CrudForm } from '@open-mercato/ui/backend/CrudForm'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { updateCrud, deleteCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { ErrorMessage, RecordNotFoundState } from '@open-mercato/ui/backend/detail'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { E } from '#generated/entities.ids.generated'
+import { usePriceFormFields, type PriceFormValues } from '../../../../../components/prices/priceFormFields'
+import { normalizePriceRecord } from '../../../../../components/prices/normalizePriceRecord'
+
+type PriceListResponse = {
+  items?: Array<Record<string, unknown>>
+}
+
+function toDateInputValue(value: string | null | undefined): string {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toISOString().slice(0, 10)
+}
+
+function buildUpdatePayload(
+  id: string,
+  values: PriceFormValues,
+  t: (key: string, fallback?: string) => string,
+): Record<string, unknown> {
+  const productId = values.productId?.trim() || undefined
+  const variantId = values.variantId?.trim() || undefined
+  if (!productId && !variantId) {
+    const message = t('catalog.prices.form.errors.productOrVariantRequired', 'Choose a product or a variant.')
+    throw createCrudFormError(message, { productId: message })
+  }
+  return {
+    id,
+    productId,
+    variantId,
+    priceKindId: values.priceKindId?.trim() || undefined,
+    currencyCode: values.currencyCode?.trim() || undefined,
+    unitPriceNet: values.unitPriceNet?.trim() || undefined,
+    unitPriceGross: values.unitPriceGross?.trim() || undefined,
+    taxRate: values.taxRate?.trim() || undefined,
+    minQuantity: values.minQuantity ?? undefined,
+    maxQuantity: values.maxQuantity ?? undefined,
+    startsAt: values.startsAt?.trim() || undefined,
+    endsAt: values.endsAt?.trim() || undefined,
+    customerId: values.customerId?.trim() || undefined,
+    customerGroupId: values.customerGroupId?.trim() || undefined,
+    channelId: values.channelId?.trim() || undefined,
+    offerId: values.offerId?.trim() || undefined,
+    userId: values.userId?.trim() || undefined,
+    userGroupId: values.userGroupId?.trim() || undefined,
+  }
+}
+
+export default function EditCatalogPricePage({ params }: { params?: { id?: string } }) {
+  const priceId = params?.id ?? ''
+  const t = useT()
+  const { fields, groups } = usePriceFormFields()
+  const [initialValues, setInitialValues] = React.useState<PriceFormValues | null>(null)
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+  const [isNotFound, setIsNotFound] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!priceId) return
+    let cancelled = false
+    async function load() {
+      setLoading(true)
+      setError(null)
+      setIsNotFound(false)
+      try {
+        const { ok, status, result } = await apiCall<PriceListResponse>(
+          `/api/catalog/prices?ids=${encodeURIComponent(priceId)}&pageSize=1`,
+        )
+        if (!ok) {
+          if (status === 404) {
+            if (!cancelled) setIsNotFound(true)
+            return
+          }
+          throw new Error(t('catalog.prices.form.errors.load', 'Failed to load price rule'))
+        }
+        const raw = Array.isArray(result?.items) ? result.items[0] : null
+        if (!raw) {
+          if (!cancelled) setIsNotFound(true)
+          return
+        }
+        if (cancelled) return
+        const record = normalizePriceRecord(raw)
+        setInitialValues({
+          id: record.id,
+          productId: record.productId ?? '',
+          variantId: record.variantId ?? '',
+          priceKindId: record.priceKindId ?? '',
+          currencyCode: record.currencyCode ?? '',
+          unitPriceNet: record.unitPriceNet ?? '',
+          unitPriceGross: record.unitPriceGross ?? '',
+          taxRate: record.taxRate ?? '',
+          minQuantity: record.minQuantity ?? 1,
+          maxQuantity: record.maxQuantity ?? undefined,
+          startsAt: toDateInputValue(record.startsAt),
+          endsAt: toDateInputValue(record.endsAt),
+          customerId: record.customerId ?? '',
+          customerGroupId: record.customerGroupId ?? '',
+          channelId: record.channelId ?? '',
+          offerId: record.offerId ?? '',
+          userId: record.userId ?? '',
+          userGroupId: record.userGroupId ?? '',
+          updatedAt: record.updatedAt ?? null,
+        })
+      } catch (err) {
+        if (!cancelled) {
+          const fallback = t('catalog.prices.form.errors.load', 'Failed to load price rule')
+          const message = err instanceof Error ? err.message : fallback
+          setError(message)
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    load()
+    return () => {
+      cancelled = true
+    }
+  }, [priceId, t])
+
+  if (!priceId) {
+    return (
+      <Page>
+        <PageBody>
+          <p className="text-sm text-destructive">
+            {t('catalog.prices.form.errors.idRequired', 'Price rule identifier is required.')}
+          </p>
+        </PageBody>
+      </Page>
+    )
+  }
+
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('catalog.prices.form.errors.notFound', 'Price rule not found')}
+            backHref="/backend/catalog/prices"
+            backLabel={t('catalog.prices.form.actions.backToList', 'Back to price rules')}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  if (error && !loading) {
+    return (
+      <Page>
+        <PageBody>
+          <ErrorMessage label={error} />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  return (
+    <Page>
+      <PageBody>
+        <CrudForm<PriceFormValues>
+          title={t('catalog.prices.form.editTitle', 'Edit price rule')}
+          titleHeadingLevel={1}
+          backHref="/backend/catalog/prices"
+          fields={fields}
+          groups={groups}
+          collapsibleGroups
+          entityId={E.catalog.catalog_product_price}
+          initialValues={initialValues ?? { id: priceId }}
+          optimisticLockUpdatedAt={initialValues?.updatedAt}
+          isLoading={loading}
+          loadingMessage={t('catalog.prices.form.loading', 'Loading price rule...')}
+          submitLabel={t('catalog.prices.form.action.save', 'Save')}
+          cancelHref="/backend/catalog/prices"
+          successRedirect={`/backend/catalog/prices?flash=${encodeURIComponent(t('catalog.prices.flash.updated', 'Price rule updated'))}&type=success`}
+          onSubmit={async (values) => {
+            const payload = buildUpdatePayload(priceId, values, t)
+            await updateCrud('catalog/prices', payload)
+          }}
+          onDelete={async () => {
+            await deleteCrud('catalog/prices', priceId, {
+              errorMessage: t('catalog.prices.form.errors.delete', 'Failed to delete price rule'),
+            })
+          }}
+          deleteRedirect={`/backend/catalog/prices?flash=${encodeURIComponent(t('catalog.prices.flash.deleted', 'Price rule deleted'))}&type=success`}
+        />
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/catalog/backend/catalog/prices/create/page.meta.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const createPageIcon = React.createElement(
+  'svg',
+  { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },
+  React.createElement('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' }),
+  React.createElement('polyline', { points: '14 2 14 8 20 8' }),
+  React.createElement('path', { d: 'M12 11v6M9 14h6' }),
+)
+
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['catalog.pricing.manage'],
+  pageTitle: 'Create price rule',
+  pageTitleKey: 'catalog.prices.form.createTitle',
+  pageGroup: 'Catalog',
+  pageGroupKey: 'catalog.nav.group',
+  icon: createPageIcon,
+  breadcrumb: [
+    { label: 'Price rules', labelKey: 'catalog.prices.page.title', href: '/backend/catalog/prices' },
+    { label: 'Create', labelKey: 'common.create' },
+  ],
+}

package/src/modules/catalog/backend/catalog/prices/create/page.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { CrudForm } from '@open-mercato/ui/backend/CrudForm'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { E } from '#generated/entities.ids.generated'
+import { PRICE_FORM_INITIAL_VALUES, usePriceFormFields, type PriceFormValues } from '../../../../components/prices/priceFormFields'
+
+function buildPricePayload(values: PriceFormValues, t: (key: string, fallback?: string) => string): Record<string, unknown> {
+  const productId = values.productId?.trim() || undefined
+  const variantId = values.variantId?.trim() || undefined
+  if (!productId && !variantId) {
+    const message = t('catalog.prices.form.errors.productOrVariantRequired', 'Choose a product or a variant.')
+    throw createCrudFormError(message, { productId: message })
+  }
+  const priceKindId = values.priceKindId?.trim() || undefined
+  const currencyCode = values.currencyCode?.trim() || undefined
+  const payload: Record<string, unknown> = {
+    productId,
+    variantId,
+    priceKindId,
+    currencyCode,
+    unitPriceNet: values.unitPriceNet?.trim() || undefined,
+    unitPriceGross: values.unitPriceGross?.trim() || undefined,
+    taxRate: values.taxRate?.trim() || undefined,
+    minQuantity: values.minQuantity ?? undefined,
+    maxQuantity: values.maxQuantity ?? undefined,
+    startsAt: values.startsAt?.trim() || undefined,
+    endsAt: values.endsAt?.trim() || undefined,
+    customerId: values.customerId?.trim() || undefined,
+    customerGroupId: values.customerGroupId?.trim() || undefined,
+    channelId: values.channelId?.trim() || undefined,
+    offerId: values.offerId?.trim() || undefined,
+    userId: values.userId?.trim() || undefined,
+    userGroupId: values.userGroupId?.trim() || undefined,
+  }
+  return payload
+}
+
+export default function CreateCatalogPricePage() {
+  const t = useT()
+  const { fields, groups } = usePriceFormFields()
+  const successMessage = encodeURIComponent(t('catalog.prices.flash.created', 'Price rule created'))
+
+  return (
+    <Page>
+      <PageBody>
+        <CrudForm<PriceFormValues>
+          title={t('catalog.prices.form.createTitle', 'Create price rule')}
+          titleHeadingLevel={1}
+          backHref="/backend/catalog/prices"
+          fields={fields}
+          groups={groups}
+          collapsibleGroups
+          entityId={E.catalog.catalog_product_price}
+          initialValues={PRICE_FORM_INITIAL_VALUES}
+          submitLabel={t('catalog.prices.form.action.save', 'Save')}
+          cancelHref="/backend/catalog/prices"
+          successRedirect={`/backend/catalog/prices?flash=${successMessage}&type=success`}
+          onSubmit={async (values) => {
+            const payload = buildPricePayload(values, t)
+            await createCrud('catalog/prices', payload)
+          }}
+        />
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/catalog/backend/catalog/prices/page.meta.ts

@@ -0,0 +1,12 @@
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['catalog.products.view'],
+  pageTitle: 'Price rules',
+  pageTitleKey: 'catalog.prices.page.title',
+  pageGroup: 'Catalog',
+  pageGroupKey: 'catalog.nav.group',
+  pagePriority: 30,
+  pageOrder: 110,
+  icon: 'tag',
+  breadcrumb: [{ label: 'Price rules', labelKey: 'catalog.prices.page.title' }],
+}

package/src/modules/catalog/backend/catalog/prices/page.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import PricesDataTable from '../../../components/prices/PricesDataTable'
+
+export default function CatalogPricesPage() {
+  return (
+    <Page>
+      <PageBody>
+        <PricesDataTable />
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/catalog/components/prices/PriceScopeSelectors.tsx

@@ -0,0 +1,243 @@
+"use client"
+
+import * as React from 'react'
+import { ComboboxInput, type ComboboxOption } from '@open-mercato/ui/backend/inputs/ComboboxInput'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { createLogger } from '@open-mercato/shared/lib/logger'
+
+const logger = createLogger('catalog').child({ component: 'PriceScopeSelectors' })
+
+type RemoteItem = Record<string, unknown>
+
+function pickString(item: RemoteItem, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = item[key]
+    if (typeof value === 'string' && value.length) return value
+  }
+  return ''
+}
+
+async function loadOptions(
+  path: string,
+  params: Record<string, string>,
+  mapItem: (item: RemoteItem) => ComboboxOption | null,
+): Promise<ComboboxOption[]> {
+  try {
+    const search = new URLSearchParams(params)
+    const payload = await readApiResultOrThrow<{ items?: RemoteItem[] }>(
+      `${path}?${search.toString()}`,
+      undefined,
+      { fallback: { items: [] } },
+    )
+    const items = Array.isArray(payload.items) ? payload.items : []
+    return items.map(mapItem).filter((option): option is ComboboxOption => option !== null)
+  } catch (err) {
+    logger.error('catalog.prices.scopeSelect.load', { err, path })
+    return []
+  }
+}
+
+async function resolveOne(
+  path: string,
+  idParam: string,
+  id: string,
+  mapItem: (item: RemoteItem) => ComboboxOption | null,
+): Promise<string> {
+  const options = await loadOptions(path, { [idParam]: id, pageSize: '1' }, mapItem)
+  return options[0]?.label ?? id
+}
+
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+
+/**
+ * A typed query that is itself a record id (a pasted UUID) is searched via
+ * the generic `ids=` narrowing instead of the entity's free-text `search=`
+ * filter — free-text search matches title/name/sku columns, never the id
+ * column, so pasting an exact id would otherwise return zero suggestions.
+ */
+function buildLookupParams(query: string | undefined, pageSize: string): Record<string, string> {
+  const trimmed = (query ?? '').trim()
+  if (UUID_PATTERN.test(trimmed)) return { ids: trimmed, pageSize: '1' }
+  return { search: trimmed, pageSize }
+}
+
+export function PriceProductSelect({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: string
+  onChange: (next: string) => void
+  disabled?: boolean
+}) {
+  const t = useT()
+  const mapItem = React.useCallback((item: RemoteItem): ComboboxOption | null => {
+    const id = pickString(item, 'id')
+    if (!id) return null
+    const title = pickString(item, 'title', 'name') || id
+    const sku = pickString(item, 'sku')
+    return { value: id, label: sku ? `${title} (${sku})` : title }
+  }, [])
+  return (
+    <ComboboxInput
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      allowCustomValues={false}
+      clearable
+      placeholder={t('catalog.prices.select.product.placeholder', 'Search products…')}
+      loadSuggestions={(query) => loadOptions('/api/catalog/products', buildLookupParams(query, '10'), mapItem)}
+      resolveLabel={(id) => resolveOne('/api/catalog/products', 'id', id, mapItem)}
+    />
+  )
+}
+
+export function PriceVariantSelect({
+  productId,
+  value,
+  onChange,
+}: {
+  productId: string
+  value: string
+  onChange: (next: string) => void
+}) {
+  const t = useT()
+  const mapItem = React.useCallback((item: RemoteItem): ComboboxOption | null => {
+    const id = pickString(item, 'id')
+    if (!id) return null
+    const name = pickString(item, 'name') || id
+    const sku = pickString(item, 'sku')
+    return { value: id, label: sku ? `${name} (${sku})` : name }
+  }, [])
+  const disabled = !productId
+  return (
+    <ComboboxInput
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      allowCustomValues={false}
+      clearable
+      placeholder={
+        disabled
+          ? t('catalog.prices.form.field.product', 'Product')
+          : t('catalog.prices.select.product.placeholder', 'Search products…')
+      }
+      loadSuggestions={(query) =>
+        disabled
+          ? Promise.resolve([])
+          : loadOptions('/api/catalog/variants', { ...buildLookupParams(query, '10'), productId }, mapItem)
+      }
+      resolveLabel={(id) => resolveOne('/api/catalog/variants', 'id', id, mapItem)}
+    />
+  )
+}
+
+export function PriceCustomerSelect({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (next: string) => void
+}) {
+  const t = useT()
+  const mapItem = React.useCallback((item: RemoteItem): ComboboxOption | null => {
+    const id = pickString(item, 'id')
+    if (!id) return null
+    const name = pickString(item, 'displayName', 'display_name', 'name') || id
+    const email = pickString(item, 'primaryEmail', 'primary_email')
+    return { value: id, label: name, description: email || null }
+  }, [])
+  return (
+    <ComboboxInput
+      value={value}
+      onChange={onChange}
+      allowCustomValues={false}
+      clearable
+      placeholder={t('catalog.prices.select.customer.placeholder', 'Search customers…')}
+      loadSuggestions={(query) => loadOptions('/api/customers/people', buildLookupParams(query, '10'), mapItem)}
+      resolveLabel={(id) => resolveOne('/api/customers/people', 'id', id, mapItem)}
+    />
+  )
+}
+
+export function PriceChannelSelect({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (next: string) => void
+}) {
+  const t = useT()
+  const mapItem = React.useCallback((item: RemoteItem): ComboboxOption | null => {
+    const id = pickString(item, 'id')
+    if (!id) return null
+    const name = pickString(item, 'name') || id
+    const code = pickString(item, 'code')
+    return { value: id, label: code ? `${name} (${code})` : name }
+  }, [])
+  return (
+    <ComboboxInput
+      value={value}
+      onChange={onChange}
+      allowCustomValues={false}
+      clearable
+      placeholder={t('catalog.prices.select.channel.placeholder', 'Select a channel…')}
+      loadSuggestions={(query) => loadOptions('/api/sales/channels', buildLookupParams(query, '50'), mapItem)}
+      resolveLabel={(id) => resolveOne('/api/sales/channels', 'id', id, mapItem)}
+    />
+  )
+}
+
+export function PricePriceKindSelect({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (next: string) => void
+}) {
+  const t = useT()
+  const mapItem = React.useCallback((item: RemoteItem): ComboboxOption | null => {
+    const id = pickString(item, 'id')
+    if (!id) return null
+    const title = pickString(item, 'title') || id
+    const code = pickString(item, 'code')
+    return { value: id, label: code ? `${title} (${code})` : title }
+  }, [])
+  return (
+    <ComboboxInput
+      value={value}
+      onChange={onChange}
+      allowCustomValues={false}
+      placeholder={t('catalog.prices.select.priceKind.placeholder', 'Select a price kind…')}
+      loadSuggestions={(query) => loadOptions('/api/catalog/price-kinds', buildLookupParams(query, '20'), mapItem)}
+      resolveLabel={(id) => resolveOne('/api/catalog/price-kinds', 'id', id, mapItem)}
+    />
+  )
+}
+
+export function PriceCurrencySelect({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (next: string) => void
+}) {
+  const t = useT()
+  const mapItem = React.useCallback((item: RemoteItem): ComboboxOption | null => {
+    const code = pickString(item, 'value')
+    if (!code) return null
+    const label = pickString(item, 'label') || code
+    return { value: code, label: label === code ? code : `${code} — ${label}` }
+  }, [])
+  return (
+    <ComboboxInput
+      value={value}
+      onChange={onChange}
+      allowCustomValues={false}
+      placeholder={t('catalog.prices.select.currency.placeholder', 'Select a currency…')}
+      loadSuggestions={(query) => loadOptions('/api/currencies/currencies/options', { search: query ?? '', limit: '20' }, mapItem)}
+      resolveLabel={(id) => resolveOne('/api/currencies/currencies/options', 'search', id, mapItem)}
+    />
+  )
+}