@open-mercato/core 0.8.1-develop.7297.1.67605e74f9 → 0.9.0

package/src/modules/availability/backend/availability/check/page.tsx

@@ -0,0 +1,226 @@
+"use client"
+import * as React from 'react'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { StatusBadge, type StatusBadgeVariant } from '@open-mercato/ui/primitives/status-badge'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type AvailabilityState = 'in_stock' | 'low_stock' | 'out_of_stock' | 'backorder' | 'preorder' | 'not_tracked'
+
+type AvailabilityItemResult = {
+  state: AvailabilityState
+  availableQuantity: number | null
+  canFulfil: boolean
+  leadTimeDays: number | null
+  releaseAt: string | null
+  isAuthoritative: boolean
+  policySourceId: string | null
+}
+
+type FieldTrace = { value: unknown; policySourceId: string | null }
+type PolicyTrace = Record<string, FieldTrace>
+
+type CheckResponse = {
+  availability?: AvailabilityItemResult | null
+  policyTrace?: PolicyTrace | null
+  error?: string
+}
+
+const STATE_VARIANTS: Record<AvailabilityState, StatusBadgeVariant> = {
+  in_stock: 'success',
+  low_stock: 'warning',
+  out_of_stock: 'error',
+  backorder: 'info',
+  preorder: 'info',
+  not_tracked: 'neutral',
+}
+
+const TRACE_FIELDS = [
+  'isStockManaged',
+  'allowBackorder',
+  'backorderLeadTimeDays',
+  'preorderReleaseAt',
+  'lowStockThreshold',
+  'minOrderQuantity',
+  'maxOrderQuantity',
+  'quantityIncrement',
+  'hideWhenOutOfStock',
+  'isActive',
+]
+
+function formatTraceValue(value: unknown, t: (key: string) => string): string {
+  if (value === null || value === undefined) return t('availability.policies.form.preview.notSet')
+  if (typeof value === 'boolean') return value ? t('availability.common.yes') : t('availability.common.no')
+  return String(value)
+}
+
+export default function AvailabilityCheckPage() {
+  const t = useT()
+  const [productId, setProductId] = React.useState('')
+  const [variantId, setVariantId] = React.useState('')
+  const [storeId, setStoreId] = React.useState('')
+  const [quantity, setQuantity] = React.useState('1')
+  const [isRunning, setIsRunning] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const [result, setResult] = React.useState<CheckResponse | null>(null)
+
+  const runCheck = React.useCallback(async () => {
+    if (!productId.trim()) {
+      setError(t('availability.check.errors.productRequired'))
+      return
+    }
+    setIsRunning(true)
+    setError(null)
+    setResult(null)
+    try {
+      const call = await apiCall<CheckResponse>(
+        '/api/availability/check',
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            productId: productId.trim(),
+            variantId: variantId.trim() || null,
+            storeId: storeId.trim() || null,
+            quantity: Number(quantity) > 0 ? Number(quantity) : 1,
+          }),
+        },
+        { fallback: null },
+      )
+      if (!call.ok) {
+        const errorPayload = call.result as { error?: string } | undefined
+        setError(typeof errorPayload?.error === 'string' ? errorPayload.error : t('availability.check.errors.failed'))
+        return
+      }
+      setResult(call.result ?? null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : t('availability.check.errors.failed'))
+    } finally {
+      setIsRunning(false)
+    }
+  }, [productId, variantId, storeId, quantity, t])
+
+  const availability = result?.availability ?? null
+  const policyTrace = result?.policyTrace ?? null
+
+  return (
+    <Page>
+      <PageBody>
+        <div
+          className="space-y-6"
+          onKeyDown={(event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+              event.preventDefault()
+              void runCheck()
+            }
+          }}
+        >
+          <h1 className="text-xl font-semibold">{t('availability.check.title')}</h1>
+          <div className="grid grid-cols-1 gap-4 rounded-md border p-4 sm:grid-cols-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="availability-check-product-id">{t('availability.policies.form.field.productId')}</Label>
+              <Input
+                id="availability-check-product-id"
+                value={productId}
+                onChange={(e) => setProductId(e.target.value)}
+                autoFocus
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="availability-check-variant-id">{t('availability.policies.form.field.variantId')}</Label>
+              <Input id="availability-check-variant-id" value={variantId} onChange={(e) => setVariantId(e.target.value)} />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="availability-check-store-id">{t('availability.policies.form.field.storeId')}</Label>
+              <Input id="availability-check-store-id" value={storeId} onChange={(e) => setStoreId(e.target.value)} />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="availability-check-quantity">{t('availability.check.field.quantity')}</Label>
+              <Input
+                id="availability-check-quantity"
+                type="number"
+                min={1}
+                value={quantity}
+                onChange={(e) => setQuantity(e.target.value)}
+              />
+            </div>
+          </div>
+          <Button onClick={() => void runCheck()} disabled={isRunning}>
+            {isRunning ? t('availability.check.action.running') : t('availability.check.action.run')}
+          </Button>
+
+          {error && (
+            <div data-testid="availability-check-error">
+              <ErrorMessage label={error} />
+            </div>
+          )}
+
+          <div role="status" aria-live="polite" data-testid="availability-check-result-region">
+            {availability && (
+              <div className="space-y-4 rounded-md border p-4" data-testid="availability-check-result">
+                <div className="flex items-center gap-3">
+                  <StatusBadge variant={STATE_VARIANTS[availability.state]}>{t(`availability.states.${availability.state}`)}</StatusBadge>
+                  {!availability.isAuthoritative && (
+                    <span className="text-xs text-muted-foreground">{t('availability.check.advisoryNote')}</span>
+                  )}
+                </div>
+                <dl className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+                  <div>
+                    <dt className="text-xs text-muted-foreground">{t('availability.check.result.availableQuantity')}</dt>
+                    <dd className="text-sm">{availability.availableQuantity ?? t('availability.policies.form.preview.notSet')}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-xs text-muted-foreground">{t('availability.check.result.canFulfil')}</dt>
+                    <dd className="text-sm">{availability.canFulfil ? t('availability.common.yes') : t('availability.common.no')}</dd>
+                  </div>
+                  <div>
+                    <dt className="text-xs text-muted-foreground">{t('availability.check.result.policySourceId')}</dt>
+                    <dd className="text-sm">{availability.policySourceId ?? t('availability.policies.form.preview.moduleDefault')}</dd>
+                  </div>
+                  {availability.leadTimeDays != null && (
+                    <div>
+                      <dt className="text-xs text-muted-foreground">{t('availability.policies.form.field.backorderLeadTimeDays')}</dt>
+                      <dd className="text-sm">{availability.leadTimeDays}</dd>
+                    </div>
+                  )}
+                  {availability.releaseAt && (
+                    <div>
+                      <dt className="text-xs text-muted-foreground">{t('availability.policies.form.field.preorderReleaseAt')}</dt>
+                      <dd className="text-sm">{availability.releaseAt}</dd>
+                    </div>
+                  )}
+                </dl>
+                {availability.state === 'not_tracked' && (
+                  <p className="text-xs text-muted-foreground">{t('availability.check.notTrackedExplanation')}</p>
+                )}
+              </div>
+            )}
+          </div>
+
+          {policyTrace && (
+            <div className="rounded-md border bg-muted p-4" data-testid="availability-check-policy-trace">
+              <div className="mb-2 text-sm font-medium">{t('availability.policies.form.preview.title')}</div>
+              <dl className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                {TRACE_FIELDS.map((key) => {
+                  const field = policyTrace[key]
+                  const source = field?.policySourceId ?? t('availability.policies.form.preview.moduleDefault')
+                  return (
+                    <div key={key}>
+                      <dt className="text-xs text-muted-foreground">{t(`availability.policies.form.field.${key}`)}</dt>
+                      <dd className="text-xs">
+                        {formatTraceValue(field?.value, t)} <span className="text-muted-foreground">({source})</span>
+                      </dd>
+                    </div>
+                  )
+                })}
+              </dl>
+            </div>
+          )}
+        </div>
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/availability/backend/availability/policies/ResolutionPreviewPanel.tsx

@@ -0,0 +1,112 @@
+"use client"
+import * as React from 'react'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type FieldTrace = { value: unknown; policySourceId: string | null }
+export type PolicyTrace = Record<string, FieldTrace>
+
+type ResponsePayload = { policyTrace?: PolicyTrace }
+
+const TRACE_FIELDS: Array<{ key: string; labelKey: string }> = [
+  { key: 'isStockManaged', labelKey: 'availability.policies.form.field.isStockManaged' },
+  { key: 'allowBackorder', labelKey: 'availability.policies.form.field.allowBackorder' },
+  { key: 'backorderLeadTimeDays', labelKey: 'availability.policies.form.field.backorderLeadTimeDays' },
+  { key: 'preorderReleaseAt', labelKey: 'availability.policies.form.field.preorderReleaseAt' },
+  { key: 'lowStockThreshold', labelKey: 'availability.policies.form.field.lowStockThreshold' },
+  { key: 'minOrderQuantity', labelKey: 'availability.policies.form.field.minOrderQuantity' },
+  { key: 'maxOrderQuantity', labelKey: 'availability.policies.form.field.maxOrderQuantity' },
+  { key: 'quantityIncrement', labelKey: 'availability.policies.form.field.quantityIncrement' },
+  { key: 'hideWhenOutOfStock', labelKey: 'availability.policies.form.field.hideWhenOutOfStock' },
+  { key: 'isActive', labelKey: 'availability.policies.form.field.isActive' },
+]
+
+function formatValue(value: unknown, t: (key: string) => string): string {
+  if (value === null || value === undefined) return t('availability.policies.form.preview.notSet')
+  if (typeof value === 'boolean') return value ? t('availability.common.yes') : t('availability.common.no')
+  return String(value)
+}
+
+/**
+ * Live "resolution-chain preview" — US-A2. Shows the currently PERSISTED
+ * resolution for the (product, variant, store) target the admin is editing,
+ * refetched (debounced) whenever the target changes. Does not simulate the
+ * in-progress, unsaved field edits — see PLAN.md § Key design decisions.
+ */
+export function ResolutionPreviewPanel({
+  productId,
+  variantId,
+  storeId,
+  onTraceChange,
+}: {
+  productId: string
+  variantId: string | null
+  storeId: string | null
+  onTraceChange?: (trace: PolicyTrace | null) => void
+}) {
+  const t = useT()
+  const [trace, setTrace] = React.useState<PolicyTrace | null>(null)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const onTraceChangeRef = React.useRef(onTraceChange)
+  onTraceChangeRef.current = onTraceChange
+
+  React.useEffect(() => {
+    onTraceChangeRef.current?.(trace)
+  }, [trace])
+
+  React.useEffect(() => {
+    setTrace(null)
+    if (!productId) return
+    let cancelled = false
+    const handle = setTimeout(() => {
+      setIsLoading(true)
+      const params = new URLSearchParams({ productId })
+      if (variantId) params.set('variantId', variantId)
+      if (storeId) params.set('storeId', storeId)
+      apiCall<ResponsePayload>(`/api/availability/policies/resolve-preview?${params.toString()}`, undefined, { fallback: null })
+        .then((call) => {
+          if (!cancelled && call.ok) setTrace(call.result?.policyTrace ?? null)
+        })
+        .finally(() => {
+          if (!cancelled) setIsLoading(false)
+        })
+    }, 300)
+    return () => {
+      cancelled = true
+      clearTimeout(handle)
+    }
+  }, [productId, variantId, storeId])
+
+  if (!productId) {
+    return (
+      <div className="rounded-md border bg-muted p-4 text-sm text-muted-foreground" data-testid="availability-resolution-preview">
+        {t('availability.policies.form.preview.enterProduct')}
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-md border bg-muted p-4 text-sm" data-testid="availability-resolution-preview">
+      <div className="mb-2 font-medium">{t('availability.policies.form.preview.title')}</div>
+      {isLoading && !trace ? (
+        <div className="text-muted-foreground">{t('availability.common.loading')}</div>
+      ) : (
+        <dl className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          {TRACE_FIELDS.map(({ key, labelKey }) => {
+            const field = trace?.[key]
+            const source = field?.policySourceId ?? t('availability.policies.form.preview.moduleDefault')
+            return (
+              <div key={key}>
+                <dt className="text-xs text-muted-foreground">{t(labelKey)}</dt>
+                <dd className="text-xs">
+                  {formatValue(field?.value, t)}{' '}
+                  <span className="text-muted-foreground">({source})</span>
+                </dd>
+              </div>
+            )
+          })}
+        </dl>
+      )}
+    </div>
+  )
+}

package/src/modules/availability/backend/availability/policies/ScopeFields.tsx

@@ -0,0 +1,55 @@
+"use client"
+import * as React from 'react'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type PolicyScope = {
+  productId: string
+  variantId: string
+  storeId: string
+}
+
+/**
+ * Product/variant/store target fields, kept as controlled local state
+ * (outside `CrudForm`'s own field list) so a value change can drive the live
+ * resolution-chain preview immediately — `CrudForm` does not expose a
+ * live-values callback. Rendered via `CrudForm`'s `contentHeader` slot.
+ */
+export function ScopeFields({ value, onChange, disabled }: { value: PolicyScope; onChange: (next: PolicyScope) => void; disabled?: boolean }) {
+  const t = useT()
+  return (
+    <div className="grid grid-cols-1 gap-4 rounded-md border p-4 sm:grid-cols-3">
+      <div className="space-y-1.5">
+        <Label htmlFor="availability-policy-product-id">{t('availability.policies.form.field.productId')}</Label>
+        <Input
+          id="availability-policy-product-id"
+          value={value.productId}
+          disabled={disabled}
+          onChange={(e) => onChange({ ...value, productId: e.target.value.trim() })}
+          placeholder={t('availability.policies.form.field.productId.placeholder')}
+        />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="availability-policy-variant-id">{t('availability.policies.form.field.variantId')}</Label>
+        <Input
+          id="availability-policy-variant-id"
+          value={value.variantId}
+          disabled={disabled}
+          onChange={(e) => onChange({ ...value, variantId: e.target.value.trim() })}
+          placeholder={t('availability.policies.form.field.variantId.placeholder')}
+        />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="availability-policy-store-id">{t('availability.policies.form.field.storeId')}</Label>
+        <Input
+          id="availability-policy-store-id"
+          value={value.storeId}
+          disabled={disabled}
+          onChange={(e) => onChange({ ...value, storeId: e.target.value.trim() })}
+          placeholder={t('availability.policies.form.field.storeId.placeholder')}
+        />
+      </div>
+    </div>
+  )
+}

package/src/modules/availability/backend/availability/policies/StockManagedField.tsx

@@ -0,0 +1,37 @@
+import type { CrudFieldOption } from '@open-mercato/ui/backend/CrudForm'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+
+export const STOCK_MANAGED_INHERIT = 'inherit'
+export const STOCK_MANAGED_ON = 'true'
+export const STOCK_MANAGED_OFF = 'false'
+
+export type StockManagedChoice = typeof STOCK_MANAGED_INHERIT | typeof STOCK_MANAGED_ON | typeof STOCK_MANAGED_OFF
+
+export function toStockManagedChoice(value: boolean | null | undefined): StockManagedChoice {
+  if (value === true) return STOCK_MANAGED_ON
+  if (value === false) return STOCK_MANAGED_OFF
+  return STOCK_MANAGED_INHERIT
+}
+
+export function fromStockManagedChoice(value: unknown): boolean | null {
+  if (value === true || value === STOCK_MANAGED_ON) return true
+  if (value === false || value === STOCK_MANAGED_OFF) return false
+  return null
+}
+
+export function buildStockManagedOptions(
+  t: TranslateFn,
+  resolved: boolean | null = null,
+): CrudFieldOption[] {
+  const inheritLabel =
+    typeof resolved === 'boolean'
+      ? t('availability.policies.form.field.isStockManaged.inheritResolved', 'Inherit (currently: {value})', {
+          value: resolved ? t('availability.common.yes') : t('availability.common.no'),
+        })
+      : t('availability.policies.form.field.isStockManaged.inherit')
+  return [
+    { value: STOCK_MANAGED_INHERIT, label: inheritLabel },
+    { value: STOCK_MANAGED_ON, label: t('availability.common.yes') },
+    { value: STOCK_MANAGED_OFF, label: t('availability.common.no') },
+  ]
+}

package/src/modules/availability/backend/availability/policies/[id]/page.meta.ts

@@ -0,0 +1,8 @@
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['availability.policies.view'],
+  breadcrumb: [
+    { label: 'Availability Policies', labelKey: 'availability.policies.nav.title', href: '/backend/availability/policies' },
+    { label: 'Edit', labelKey: 'availability.policies.edit.title' },
+  ],
+}

package/src/modules/availability/backend/availability/policies/[id]/page.tsx

@@ -0,0 +1,202 @@
+"use client"
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { CrudForm } from '@open-mercato/ui/backend/CrudForm'
+import { updateCrud, deleteCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useBackendChrome } from '@open-mercato/ui/backend/BackendChromeProvider'
+import { hasFeature } from '@open-mercato/shared/security/features'
+import { ScopeFields, type PolicyScope } from '../ScopeFields'
+import { ResolutionPreviewPanel } from '../ResolutionPreviewPanel'
+import { buildPolicyFieldGroups } from '../formGroups'
+import { findIntegerFieldAboveMax, toIsoDateTimeOrNull } from '../policyPayload'
+import { fromStockManagedChoice, toStockManagedChoice } from '../StockManagedField'
+
+type PolicyRecord = {
+  id: string
+  storeId: string | null
+  productId: string | null
+  variantId: string | null
+  isStockManaged: boolean | null
+  allowBackorder: boolean
+  backorderLeadTimeDays: number | null
+  preorderReleaseAt: string | null
+  lowStockThreshold: number | null
+  minOrderQuantity: number | null
+  maxOrderQuantity: number | null
+  quantityIncrement: number | null
+  hideWhenOutOfStock: boolean
+  isActive: boolean
+  updatedAt: string | null
+}
+
+type FormValues = {
+  isStockManaged?: string | null
+  allowBackorder?: boolean
+  backorderLeadTimeDays?: number | string | null
+  preorderReleaseAt?: string | null
+  lowStockThreshold?: number | string | null
+  minOrderQuantity?: number | string | null
+  maxOrderQuantity?: number | string | null
+  quantityIncrement?: number | string | null
+  hideWhenOutOfStock?: boolean
+  isActive?: boolean
+}
+
+function toNullableInt(value: number | string | null | undefined): number | null {
+  if (value === null || value === undefined || value === '') return null
+  const parsed = typeof value === 'number' ? value : parseInt(value, 10)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+export default function AvailabilityPolicyEditPage({ params }: { params?: { id?: string } }) {
+  const t = useT()
+  const router = useRouter()
+  const id = params?.id ?? ''
+  const { payload } = useBackendChrome()
+  const canManage = hasFeature(payload?.grantedFeatures, 'availability.policies.manage')
+
+  const [policy, setPolicy] = React.useState<PolicyRecord | null>(null)
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+  const [scope, setScope] = React.useState<PolicyScope>({ productId: '', variantId: '', storeId: '' })
+
+  React.useEffect(() => {
+    if (!id) return
+    let cancelled = false
+    async function load() {
+      setIsLoading(true)
+      setError(null)
+      try {
+        const call = await apiCall<{ items: PolicyRecord[] }>(`/api/availability/policies?id=${encodeURIComponent(id)}`, undefined, {
+          fallback: { items: [] },
+        })
+        if (cancelled) return
+        const record = call.ok ? call.result?.items?.[0] ?? null : null
+        if (!record) {
+          setError(t('availability.policies.edit.notFound'))
+          return
+        }
+        setPolicy(record)
+        setScope({ productId: record.productId ?? '', variantId: record.variantId ?? '', storeId: record.storeId ?? '' })
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : t('availability.policies.list.error.loadFailed'))
+      } finally {
+        if (!cancelled) setIsLoading(false)
+      }
+    }
+    load()
+    return () => { cancelled = true }
+  }, [id, t])
+
+  const groups = React.useMemo(() => buildPolicyFieldGroups(t), [t])
+
+  if (isLoading) return <LoadingMessage label={t('availability.common.loading')} />
+  if (error || !policy) return <ErrorMessage label={error ?? t('availability.policies.edit.notFound')} />
+
+  return (
+    <CrudForm<FormValues>
+      title={t('availability.policies.edit.title')}
+      titleHeadingLevel={1}
+      backHref="/backend/availability/policies"
+      fields={[]}
+      groups={groups}
+      readOnly={!canManage}
+      readOnlyOverlay={(
+        <div className="rounded-xl border border-border/70 bg-background/95 px-4 py-3 text-sm text-muted-foreground shadow-sm">
+          {t('availability.policies.edit.readOnly')}
+        </div>
+      )}
+      submitLabel={t('availability.policies.form.action.save')}
+      cancelHref="/backend/availability/policies"
+      optimisticLockUpdatedAt={policy.updatedAt ?? null}
+      initialValues={{
+        isStockManaged: toStockManagedChoice(policy.isStockManaged),
+        allowBackorder: policy.allowBackorder,
+        backorderLeadTimeDays: policy.backorderLeadTimeDays,
+        preorderReleaseAt: policy.preorderReleaseAt,
+        lowStockThreshold: policy.lowStockThreshold,
+        minOrderQuantity: policy.minOrderQuantity,
+        maxOrderQuantity: policy.maxOrderQuantity,
+        quantityIncrement: policy.quantityIncrement,
+        hideWhenOutOfStock: policy.hideWhenOutOfStock,
+        isActive: policy.isActive,
+      }}
+      contentHeader={(
+        <div className="space-y-4">
+          <ScopeFields value={scope} onChange={setScope} disabled={!canManage} />
+          <ResolutionPreviewPanel
+            productId={scope.productId}
+            variantId={scope.variantId || null}
+            storeId={scope.storeId || null}
+          />
+        </div>
+      )}
+      deleteVisible={canManage}
+      onDelete={async () => {
+        await deleteCrud('availability/policies', id)
+        flash(t('availability.policies.flash.deleted'), 'success')
+        router.push('/backend/availability/policies')
+      }}
+      onSubmit={async (values) => {
+        if (scope.variantId && !scope.productId) {
+          throw createCrudFormError(
+            t('availability.policies.errors.variantRequiresProduct'),
+            { productId: t('availability.policies.errors.variantRequiresProduct') },
+          )
+        }
+        if (values.allowBackorder && toNullableInt(values.backorderLeadTimeDays) == null) {
+          throw createCrudFormError(
+            t('availability.policies.errors.backorderRequiresLeadTime'),
+            { backorderLeadTimeDays: t('availability.policies.errors.backorderRequiresLeadTime') },
+          )
+        }
+        const min = toNullableInt(values.minOrderQuantity)
+        const max = toNullableInt(values.maxOrderQuantity)
+        const integerFieldAboveMax = findIntegerFieldAboveMax({
+          backorderLeadTimeDays: toNullableInt(values.backorderLeadTimeDays),
+          lowStockThreshold: toNullableInt(values.lowStockThreshold),
+          minOrderQuantity: min,
+          maxOrderQuantity: max,
+          quantityIncrement: toNullableInt(values.quantityIncrement),
+        })
+        if (integerFieldAboveMax) {
+          throw createCrudFormError(
+            t('availability.policies.errors.integerTooLarge'),
+            { [integerFieldAboveMax]: t('availability.policies.errors.integerTooLarge') },
+          )
+        }
+        if (min != null && max != null && max < min) {
+          throw createCrudFormError(
+            t('availability.policies.errors.maxBelowMin'),
+            { maxOrderQuantity: t('availability.policies.errors.maxBelowMin') },
+          )
+        }
+
+        const payloadBody = {
+          id,
+          productId: scope.productId || null,
+          variantId: scope.variantId || null,
+          storeId: scope.storeId || null,
+          isStockManaged: fromStockManagedChoice(values.isStockManaged),
+          allowBackorder: !!values.allowBackorder,
+          backorderLeadTimeDays: toNullableInt(values.backorderLeadTimeDays),
+          preorderReleaseAt: toIsoDateTimeOrNull(values.preorderReleaseAt),
+          lowStockThreshold: toNullableInt(values.lowStockThreshold),
+          minOrderQuantity: min,
+          maxOrderQuantity: max,
+          quantityIncrement: toNullableInt(values.quantityIncrement),
+          hideWhenOutOfStock: !!values.hideWhenOutOfStock,
+          isActive: values.isActive !== false,
+        }
+        await updateCrud('availability/policies', payloadBody)
+        flash(t('availability.policies.flash.updated'), 'success')
+        router.push('/backend/availability/policies')
+      }}
+    />
+  )
+}

package/src/modules/availability/backend/availability/policies/create/page.meta.ts

@@ -0,0 +1,8 @@
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['availability.policies.manage'],
+  breadcrumb: [
+    { label: 'Availability Policies', labelKey: 'availability.policies.nav.title', href: '/backend/availability/policies' },
+    { label: 'Create', labelKey: 'availability.policies.create.title' },
+  ],
+}