@open-mercato/core 0.9.1-develop.7473.1.de5b22888f → 0.9.1-develop.7475.1.28ca93ed97

package/src/modules/ecommerce/commands/stores.ts

@@ -0,0 +1,154 @@
+import type { EntityManager } from '@mikro-orm/postgresql'
+import { registerCommand } from '@open-mercato/shared/lib/commands'
+import type { CommandHandler } from '@open-mercato/shared/lib/commands'
+import { buildChanges } from '@open-mercato/shared/lib/commands/helpers'
+import { ensureOrganizationScope, ensureTenantScope } from '@open-mercato/shared/lib/commands/scope'
+import { extractUndoPayload } from '@open-mercato/shared/lib/commands/undo'
+import { CrudHttpError } from '@open-mercato/shared/lib/crud/errors'
+import { enforceCommandOptimisticLockWithGuards } from '@open-mercato/shared/lib/crud/optimistic-lock-command'
+import { findOneWithDecryption } from '@open-mercato/shared/lib/encryption/find'
+import { resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
+import { EcommerceStore } from '../data/entities'
+import { ecommerceStoreBrandingSchema, type EcommerceStoreBranding } from '../data/validators'
+import { announceStoreBrandingUpdated } from '../lib/crudEvents'
+import {
+  compactBranding,
+  mergeBrandingIntoSettings,
+  STORE_BRANDING_RESOURCE_KIND,
+  STORE_BRANDING_UPDATE_COMMAND_ID,
+} from '../lib/storeBranding'
+
+export type StoreBrandingUpdateInput = {
+  id: string
+  tenantId: string
+  organizationId: string
+  branding: EcommerceStoreBranding
+}
+
+export type StoreBrandingUpdateResult = {
+  id: string
+  updatedAt: string
+  branding: EcommerceStoreBranding
+}
+
+type StoreBrandingSnapshot = {
+  id: string
+  tenantId: string
+  organizationId: string
+  branding: EcommerceStoreBranding
+  updatedAt: string
+}
+
+type StoreBrandingUndoPayload = {
+  before?: StoreBrandingSnapshot | null
+  after?: StoreBrandingSnapshot | null
+}
+
+const BRANDING_CHANGE_KEYS = ['branding'] as const
+
+async function loadStore(
+  em: EntityManager,
+  scope: { id: string; tenantId: string; organizationId: string },
+): Promise<EcommerceStore | null> {
+  return findOneWithDecryption(
+    em,
+    EcommerceStore,
+    { id: scope.id, tenantId: scope.tenantId, organizationId: scope.organizationId, deletedAt: null },
+    undefined,
+    { tenantId: scope.tenantId, organizationId: scope.organizationId },
+  )
+}
+
+function toSnapshot(store: EcommerceStore): StoreBrandingSnapshot {
+  return {
+    id: store.id,
+    tenantId: store.tenantId,
+    organizationId: store.organizationId,
+    branding: compactBranding(store.settings?.branding ?? {}),
+    updatedAt: store.updatedAt.toISOString(),
+  }
+}
+
+async function loadSnapshot(
+  ctx: { container: { resolve: (name: string) => unknown } },
+  scope: { id: string; tenantId: string; organizationId: string },
+): Promise<StoreBrandingSnapshot | null> {
+  const em = (ctx.container.resolve('em') as EntityManager).fork()
+  const store = await loadStore(em, scope)
+  return store ? toSnapshot(store) : null
+}
+
+const updateStoreBrandingCommand: CommandHandler<StoreBrandingUpdateInput, StoreBrandingUpdateResult> = {
+  id: STORE_BRANDING_UPDATE_COMMAND_ID,
+
+  async prepare(input, ctx) {
+    ensureTenantScope(ctx, input.tenantId)
+    ensureOrganizationScope(ctx, input.organizationId)
+    const snapshot = await loadSnapshot(ctx, input)
+    return snapshot ? { before: snapshot } : {}
+  },
+
+  async execute(input, ctx) {
+    ensureTenantScope(ctx, input.tenantId)
+    ensureOrganizationScope(ctx, input.organizationId)
+    const branding = compactBranding(ecommerceStoreBrandingSchema.parse(input.branding))
+    const em = (ctx.container.resolve('em') as EntityManager).fork()
+    const store = await loadStore(em, input)
+    if (!store) {
+      const { translate } = await resolveTranslations()
+      throw new CrudHttpError(404, {
+        error: translate('ecommerce.errors.storeNotFound', 'The selected store does not exist in this organization.'),
+      })
+    }
+    await enforceCommandOptimisticLockWithGuards(ctx.container, {
+      resourceKind: STORE_BRANDING_RESOURCE_KIND,
+      resourceId: store.id,
+      current: store.updatedAt,
+      request: ctx.request,
+    })
+    store.settings = mergeBrandingIntoSettings(store.settings, branding)
+    await em.flush()
+    await announceStoreBrandingUpdated(ctx.container, store)
+    return { id: store.id, updatedAt: store.updatedAt.toISOString(), branding }
+  },
+
+  async captureAfter(input, _result, ctx) {
+    return loadSnapshot(ctx, input)
+  },
+
+  async buildLog({ snapshots, input }) {
+    const before = snapshots.before as StoreBrandingSnapshot | undefined
+    const after = snapshots.after as StoreBrandingSnapshot | undefined
+    if (!before || !after) return null
+    const { translate } = await resolveTranslations()
+    return {
+      actionLabel: translate('ecommerce.audit.stores.branding.update', 'Update store branding'),
+      resourceKind: STORE_BRANDING_RESOURCE_KIND,
+      resourceId: before.id,
+      tenantId: input.tenantId,
+      organizationId: input.organizationId,
+      snapshotBefore: before,
+      snapshotAfter: after,
+      changes: buildChanges(before, after, BRANDING_CHANGE_KEYS),
+      payload: {
+        undo: { before, after } satisfies StoreBrandingUndoPayload,
+      },
+    }
+  },
+
+  async undo({ logEntry, ctx }) {
+    const payload = extractUndoPayload<StoreBrandingUndoPayload>(logEntry)
+    const before = payload?.before
+    if (!before) return
+    ensureTenantScope(ctx, before.tenantId)
+    ensureOrganizationScope(ctx, before.organizationId)
+    const em = (ctx.container.resolve('em') as EntityManager).fork()
+    const store = await loadStore(em, before)
+    if (!store) return
+    store.settings = mergeBrandingIntoSettings(store.settings, before.branding)
+    await em.flush()
+    await announceStoreBrandingUpdated(ctx.container, store)
+  },
+}
+
+registerCommand(updateStoreBrandingCommand)

package/src/modules/ecommerce/components/ChannelAssortmentCount.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import * as React from 'react'
+import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { useChannelAssortmentCount, type AssortmentCountState } from './useChannelAssortmentCount'
+import type { AssortmentCountResult } from './storeChannels'
+
+type Translate = ReturnType<typeof useT>
+
+function useCountFormatter(): (value: number) => string {
+  const locale = useLocale()
+  const formatter = React.useMemo(() => new Intl.NumberFormat(locale), [locale])
+  return React.useCallback((value: number) => formatter.format(value), [formatter])
+}
+
+function describeAuthenticationGate(result: AssortmentCountResult, t: Translate, format: (value: number) => string): string {
+  if (result.reducedByAuthentication) {
+    return t(
+      'ecommerce.backend.store.channels.count.reducedByAuthentication',
+      '0 products for anonymous visitors because sign-in is required; {count} without that requirement.',
+      { count: format(result.countWithoutAuthentication) },
+    )
+  }
+  return t(
+    'ecommerce.backend.store.channels.count.authenticationEmpty',
+    '0 products visible to anonymous visitors: sign-in is required, and the scope matches no products even without that requirement.',
+  )
+}
+
+type ChannelAssortmentCountPanelProps = {
+  state: AssortmentCountState
+  unrestricted: boolean
+}
+
+export function ChannelAssortmentCountPanel({ state, unrestricted }: ChannelAssortmentCountPanelProps) {
+  const t = useT()
+  const format = useCountFormatter()
+
+  if (state.status === 'idle') {
+    return (
+      <Alert status="information">
+        <AlertDescription>
+          {t(
+            'ecommerce.backend.store.channels.count.saveFirst',
+            'Save the binding to see how many products it shows. After that, the count updates as you change the scope.',
+          )}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (state.status === 'error') {
+    return (
+      <Alert status="warning">
+        <AlertDescription>
+          {t('ecommerce.backend.store.channels.count.error', 'The product count is unavailable right now.')}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (state.status === 'loading') {
+    return (
+      <div className="flex items-center gap-2 rounded-md border border-border p-3 text-sm text-muted-foreground" aria-live="polite">
+        <Spinner size="sm" />
+        {t('ecommerce.backend.store.channels.count.loading', 'Counting products…')}
+      </div>
+    )
+  }
+
+  const { result } = state
+  const headline = result.requireAuthentication
+    ? describeAuthenticationGate(result, t, format)
+    : unrestricted
+      ? t('ecommerce.backend.store.channels.count.unrestricted', "All products in this channel's catalog: {count}.", {
+          count: format(result.count),
+        })
+      : t('ecommerce.backend.store.channels.count.restricted', 'Products matching this scope: {count}.', {
+          count: format(result.count),
+        })
+
+  return (
+    <div className="space-y-2" aria-live="polite" data-testid="channel-assortment-count">
+      {result.requireAuthentication ? (
+        <Alert status="warning">
+          <AlertTitle>{t('ecommerce.backend.store.channels.count.title', 'Live product count')}</AlertTitle>
+          <AlertDescription>{headline}</AlertDescription>
+        </Alert>
+      ) : (
+        <div className="space-y-1 rounded-md border border-border p-3">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            {t('ecommerce.backend.store.channels.count.title', 'Live product count')}
+            {state.refreshing ? <Spinner size="sm" /> : null}
+          </div>
+          <p className="text-sm">{headline}</p>
+        </div>
+      )}
+      <p className="text-xs text-muted-foreground">
+        {t(
+          'ecommerce.backend.store.channels.count.basis',
+          "Counted for an anonymous visitor, including the default customer group's own restrictions. Unsaved changes are counted too.",
+        )}
+      </p>
+      {result.unindexedCount > 0 ? (
+        <p className="text-xs text-muted-foreground">
+          {t(
+            'ecommerce.backend.store.channels.count.unindexed',
+            '{count} active products are not indexed for visibility yet. Under a restricted scope they stay hidden and are not counted until indexing catches up.',
+            { count: format(result.unindexedCount) },
+          )}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+export function ChannelAssortmentCountCell({ bindingId, updatedAt }: { bindingId: string; updatedAt?: string | null }) {
+  const t = useT()
+  const format = useCountFormatter()
+  const state = useChannelAssortmentCount(bindingId, null, 0, updatedAt ?? null)
+  if (state.status === 'loading' || state.status === 'idle') return <Spinner size="sm" />
+  if (state.status === 'error') return <span className="text-muted-foreground">—</span>
+  const { result } = state
+  if (result.requireAuthentication) {
+    return (
+      <span>
+        {result.reducedByAuthentication
+          ? t('ecommerce.backend.store.channels.count.cellReduced', '0 ({count} without the sign-in requirement)', {
+              count: format(result.countWithoutAuthentication),
+            })
+          : format(0)}
+      </span>
+    )
+  }
+  return <span>{format(result.count)}</span>
+}

package/src/modules/ecommerce/components/ChannelBindingFormSections.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import * as React from 'react'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { ChannelAssortmentCountPanel } from './ChannelAssortmentCount'
+import { buildAssortmentCountDraft, isPriceSortFallback, PRICE_SORT_CAP } from './storeChannels'
+import { useChannelAssortmentCount } from './useChannelAssortmentCount'
+
+type FormValuesProps = { values: Record<string, unknown> }
+
+export function ChannelBindingLiveCount({ bindingId, values }: FormValuesProps & { bindingId: string | null }) {
+  const draft = buildAssortmentCountDraft(values)
+  const state = useChannelAssortmentCount(bindingId, draft)
+  return <ChannelAssortmentCountPanel state={state} unrestricted={draft.scope === null} />
+}
+
+export function PriceSortFallbackConsequence({ values }: FormValuesProps) {
+  const t = useT()
+  const locale = useLocale()
+  const cap = new Intl.NumberFormat(locale).format(PRICE_SORT_CAP)
+  const fallback = isPriceSortFallback(values.priceSortFallback) ? values.priceSortFallback : 'approximate'
+  const text =
+    fallback === 'unavailable'
+      ? t(
+          'ecommerce.backend.store.channels.priceSortFallback.unavailableConsequence',
+          'When more than {cap} products match, price sorting is withdrawn on this channel: price ascending and descending are no longer offered, and a buyer arriving on a shared price-sorted link gets the catalogue in the default order rather than an error.',
+          { cap },
+        )
+      : t(
+          'ecommerce.backend.store.channels.priceSortFallback.approximateConsequence',
+          "When more than {cap} products match, the price order is computed from the default price kind, not from the buyer's own prices. The only signal is a response header no shopper sees, so contract-priced buyers may see an order that does not match what they pay.",
+          { cap },
+        )
+  return (
+    <Alert status="information" data-testid="price-sort-fallback-consequence">
+      <AlertDescription>{text}</AlertDescription>
+    </Alert>
+  )
+}

package/src/modules/ecommerce/components/ChannelLookupPicker.tsx

@@ -0,0 +1,5 @@
+export {
+  LookupMultiPicker as ChannelLookupMultiPicker,
+  LookupSinglePicker as ChannelLookupSinglePicker,
+  useLookupLabelMap,
+} from '@open-mercato/ui/backend/inputs/LookupPickers'

package/src/modules/ecommerce/components/DomainStatusWarning.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { describeDomainStatus, isServingStatus } from './storeDomains'
+
+type DomainStatusWarningProps = {
+  status: string
+  hostname: string
+  appearance?: 'alert' | 'inline'
+}
+
+export function DomainStatusWarning({ status, hostname, appearance = 'inline' }: DomainStatusWarningProps) {
+  const t = useT()
+  if (isServingStatus(status)) return null
+  const described = describeDomainStatus(status)
+  const statusLabel = described.key ? t(described.key, described.fallback) : described.fallback
+  const message = t(
+    'ecommerce.backend.store.domains.warning.notServing',
+    'This domain is {status}. Only an active domain serves, so the store does not answer at {hostname} yet.',
+    { status: statusLabel, hostname },
+  )
+  if (appearance === 'alert') {
+    return (
+      <Alert status="warning">
+        <AlertDescription>{message}</AlertDescription>
+      </Alert>
+    )
+  }
+  return <p className="text-xs text-status-warning-text">{message}</p>
+}

package/src/modules/ecommerce/components/StoreAvailabilityDefaultsSection.tsx

@@ -0,0 +1,219 @@
+'use client'
+
+import * as React from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { CrudForm, type CrudField } from '@open-mercato/ui/backend/CrudForm'
+import { ErrorMessage, LoadingMessage } from '@open-mercato/ui/backend/detail'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { createCrud, updateCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError, raiseCrudError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { AVAILABILITY_POLICIES_API_PATH, AVAILABILITY_POLICIES_API_URL, type StoreAdminRecord } from './storeAdmin'
+import {
+  availabilityDefaultsFormSchema,
+  buildAvailabilityCreatePayload,
+  buildAvailabilityInitialValues,
+  buildAvailabilityUpdatePayload,
+  isStoreDefaultPolicy,
+  type AvailabilityDefaultsFormValues,
+  type PolicyListResponse,
+  type StoreDefaultPolicy,
+} from './storeGeneral'
+import { useStoreAccess } from './useStoreAccess'
+
+const POLICY_PAGE_SIZE = 100
+
+type Translate = (key: string, fallback?: string) => string
+
+export async function fetchStoreDefaultPolicy(storeId: string, translate: Translate): Promise<StoreDefaultPolicy | null> {
+  for (let page = 1; ; page += 1) {
+    const params = new URLSearchParams({
+      storeId,
+      page: String(page),
+      pageSize: String(POLICY_PAGE_SIZE),
+      sortField: 'createdAt',
+      sortDir: 'asc',
+    })
+    const call = await apiCall<PolicyListResponse>(`${AVAILABILITY_POLICIES_API_URL}?${params.toString()}`, {
+      cache: 'no-store',
+    })
+    if (!call.ok) {
+      await raiseCrudError(
+        call.response,
+        translate('ecommerce.backend.store.availability.errors.load', 'Failed to load the availability defaults.'),
+      )
+    }
+    const match = (call.result?.items ?? []).find((item) => isStoreDefaultPolicy(item, storeId))
+    if (match) return match
+    if (page >= (call.result?.totalPages ?? 1)) return null
+  }
+}
+
+type StoreAvailabilityDefaultsSectionProps = {
+  store: StoreAdminRecord
+}
+
+export function StoreAvailabilityDefaultsSection({ store }: StoreAvailabilityDefaultsSectionProps) {
+  const t = useT()
+  const queryClient = useQueryClient()
+  const { canManage, canViewAvailability, canManageAvailability } = useStoreAccess()
+  const queryKey = React.useMemo(() => ['ecommerce', 'stores', 'availability-default', store.id], [store.id])
+  const [formKey, setFormKey] = React.useState(0)
+
+  const policyQuery = useQuery({
+    queryKey,
+    enabled: canViewAvailability,
+    queryFn: async () => ({ policy: await fetchStoreDefaultPolicy(store.id, t) }),
+  })
+
+  const editable = canManage && canManageAvailability
+  const policy = policyQuery.data?.policy ?? null
+
+  const readOnlyReason = React.useMemo(() => {
+    if (!canViewAvailability) {
+      return t(
+        'ecommerce.backend.store.availability.readOnly.noView',
+        'You do not have access to availability policies, so the store defaults cannot be shown.',
+      )
+    }
+    if (!canManage) {
+      return t(
+        'ecommerce.backend.store.availability.readOnly.noStoreManage',
+        'You can view these defaults but not change them. Changing them requires permission to manage stores.',
+      )
+    }
+    if (!canManageAvailability) {
+      return t(
+        'ecommerce.backend.store.availability.readOnly.noAvailabilityManage',
+        'You can view these defaults but not change them. Saving them requires permission to manage availability policies.',
+      )
+    }
+    return null
+  }, [canManage, canManageAvailability, canViewAvailability, t])
+
+  const fields = React.useMemo<CrudField[]>(
+    () => [
+      {
+        id: 'hideWhenOutOfStock',
+        type: 'checkbox',
+        label: t('ecommerce.backend.store.availability.hideWhenOutOfStock', 'Hide out-of-stock products'),
+        description: t(
+          'ecommerce.backend.store.availability.hideWhenOutOfStockHint',
+          'Products with no stock left are not shown in this store.',
+        ),
+        disabled: !editable,
+      },
+      {
+        id: 'allowBackorder',
+        type: 'checkbox',
+        label: t('ecommerce.backend.store.availability.allowBackorder', 'Allow backorders'),
+        description: t(
+          'ecommerce.backend.store.availability.allowBackorderHint',
+          'Shoppers can order products that are out of stock.',
+        ),
+        disabled: !editable,
+      },
+      {
+        id: 'backorderLeadTimeDays',
+        type: 'number',
+        label: t('ecommerce.backend.store.availability.leadTime', 'Backorder lead time (days)'),
+        description: t(
+          'ecommerce.backend.store.availability.leadTimeHint',
+          'How many days a backordered product takes to ship. Required while backorders are allowed.',
+        ),
+        visibleWhen: { field: 'allowBackorder', equals: true },
+        disabled: !editable,
+        layout: 'half',
+      },
+    ],
+    [editable, t],
+  )
+
+  const initialValues = React.useMemo(() => buildAvailabilityInitialValues(policy), [policy])
+
+  const refresh = React.useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey })
+    setFormKey((current) => current + 1)
+  }, [queryClient, queryKey])
+
+  const handleSubmit = React.useCallback(
+    async (values: AvailabilityDefaultsFormValues) => {
+      const errorMessage = t('ecommerce.backend.store.availability.errors.save', 'Failed to save the availability defaults.')
+      if (policy) {
+        await updateCrud(AVAILABILITY_POLICIES_API_PATH, buildAvailabilityUpdatePayload(policy.id, values), { errorMessage })
+      } else {
+        const payload = buildAvailabilityCreatePayload(store, values)
+        if (!payload) throw createCrudFormError(errorMessage)
+        await createCrud(AVAILABILITY_POLICIES_API_PATH, payload, { errorMessage })
+      }
+      flash(t('ecommerce.backend.store.availability.flash.saved', 'Availability defaults saved'), 'success')
+      await refresh()
+    },
+    [policy, refresh, store, t],
+  )
+
+  const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Escape' || event.defaultPrevented) return
+    setFormKey((current) => current + 1)
+  }, [])
+
+  const renderBody = () => {
+    if (!canViewAvailability) return null
+    if (policyQuery.isLoading) {
+      return <LoadingMessage label={t('ecommerce.backend.store.availability.loading', 'Loading availability defaults...')} />
+    }
+    if (policyQuery.isError) {
+      return (
+        <ErrorMessage
+          label={t('ecommerce.backend.store.availability.errors.load', 'Failed to load the availability defaults.')}
+          action={
+            <Button type="button" variant="outline" size="sm" onClick={() => void policyQuery.refetch()}>
+              {t('ecommerce.backend.store.actions.retry', 'Retry')}
+            </Button>
+          }
+        />
+      )
+    }
+    return (
+      <div onKeyDown={handleKeyDown}>
+        <CrudForm<AvailabilityDefaultsFormValues>
+          key={`${formKey}:${policy?.updatedAt ?? 'new'}`}
+          schema={availabilityDefaultsFormSchema}
+          fields={fields}
+          initialValues={initialValues}
+          optimisticLockUpdatedAt={policy?.updatedAt ?? null}
+          submitLabel={t('ecommerce.backend.store.availability.save', 'Save availability defaults')}
+          onSubmit={handleSubmit}
+          hideFooterActions={!editable}
+          embedded
+        />
+      </div>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('ecommerce.backend.store.availability.title', 'Availability defaults')}</CardTitle>
+        <CardDescription>
+          {t(
+            'ecommerce.backend.store.availability.description',
+            'Default stock rules for every product in this store. A policy set on a product or variant overrides these defaults, so those policies only need to describe exceptions.',
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {readOnlyReason ? (
+          <Alert status="information">
+            <AlertDescription>{readOnlyReason}</AlertDescription>
+          </Alert>
+        ) : null}
+        {renderBody()}
+      </CardContent>
+    </Card>
+  )
+}

package/src/modules/ecommerce/components/StoreBrandingControls.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Slider } from '@open-mercato/ui/primitives/slider'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { normalizeBrandingColor } from '../lib/brandingStyles'
+import {
+  RADIUS_SLIDER_MAX,
+  RADIUS_SLIDER_MIN,
+  RADIUS_SLIDER_STEP,
+  formatRadiusRem,
+  parseRadiusRem,
+} from './storeBrandingForm'
+
+type ControlProps = {
+  id: string
+  value: unknown
+  error?: string
+  disabled?: boolean
+  setValue: (value: unknown) => void
+}
+
+function readText(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+export function BrandingColorInput({ id, value, error, disabled, setValue }: ControlProps) {
+  const t = useT()
+  const text = readText(value)
+  const swatch = normalizeBrandingColor(text.trim())
+  return (
+    <Input
+      id={id}
+      value={text}
+      disabled={disabled}
+      aria-invalid={error ? true : undefined}
+      placeholder={t('ecommerce.backend.store.branding.colorPlaceholder', 'oklch(0.3 0.15 270) or #1a2b3c')}
+      leading={
+        <span
+          aria-hidden="true"
+          data-testid={`branding-swatch-${id}`}
+          className="size-5 rounded-sm border border-input"
+          style={swatch ? { backgroundColor: swatch } : undefined}
+        />
+      }
+      onChange={(event) => setValue(event.target.value)}
+    />
+  )
+}
+
+export function BrandingRadiusSlider({ id, value, disabled, setValue }: ControlProps) {
+  const t = useT()
+  const text = readText(value)
+  const rem = parseRadiusRem(text)
+  return (
+    <div className="flex items-center gap-4">
+      <Slider
+        id={id}
+        min={RADIUS_SLIDER_MIN}
+        max={RADIUS_SLIDER_MAX}
+        step={RADIUS_SLIDER_STEP}
+        value={[rem]}
+        disabled={disabled}
+        aria-label={t('ecommerce.backend.store.branding.radius', 'Corner radius')}
+        onValueChange={(next) => setValue(formatRadiusRem(next[0] ?? rem))}
+      />
+      <span className="w-20 shrink-0 text-right text-sm tabular-nums text-muted-foreground" data-testid="branding-radius-value">
+        {text}
+      </span>
+    </div>
+  )
+}