@open-mercato/core 0.9.1-develop.7474.1.51db10479d → 0.9.1-develop.7475.1.28ca93ed97

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

@@ -0,0 +1,326 @@
+'use client'
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import type { SortingState } from '@tanstack/react-table'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { DataTable } from '@open-mercato/ui/backend/DataTable'
+import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar'
+import { ListEmptyState } from '@open-mercato/ui/backend/filters/ListEmptyState'
+import { RowActions, type RowActionItem } from '@open-mercato/ui/backend/RowActions'
+import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { clearAllOperations } from '@open-mercato/ui/backend/operations/store'
+import { apiCall, withScopedApiRequestHeaders } from '@open-mercato/ui/backend/utils/apiCall'
+import { updateCrud } from '@open-mercato/ui/backend/utils/crud'
+import { buildOptimisticLockHeader, extractOptimisticLockConflict } from '@open-mercato/ui/backend/utils/optimisticLock'
+import { raiseCrudError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { StoreCreateDialog } from './StoreCreateDialog'
+import { STORE_STATUS_LABELS, StoreStatusBadge } from './StoreStatusBadge'
+import {
+  STORE_STATUSES,
+  STORES_API_PATH,
+  STORES_API_URL,
+  formatPrimaryDomain,
+  type StoreAdminRecord,
+  type StoreListResponse,
+  type StoreStatus,
+} from './storeAdmin'
+import { buildStoreEditHref } from './storeEditTabs'
+import { useStoreAccess } from './useStoreAccess'
+
+export const STORE_LIST_PAGE_SIZE = 25
+
+const STORE_LIST_QUERY_KEY = ['ecommerce', 'stores', 'list'] as const
+
+function isStoreStatus(value: unknown): value is StoreStatus {
+  return typeof value === 'string' && (STORE_STATUSES as readonly string[]).includes(value)
+}
+
+function readStatusFilter(values: FilterValues): StoreStatus | null {
+  const value = values.status
+  return isStoreStatus(value) ? value : null
+}
+
+function buildListQuery(input: {
+  page: number
+  search: string
+  status: StoreStatus | null
+  sorting: SortingState
+}): string {
+  const params = new URLSearchParams()
+  params.set('page', String(input.page))
+  params.set('pageSize', String(STORE_LIST_PAGE_SIZE))
+  const search = input.search.trim()
+  if (search) params.set('search', search)
+  if (input.status) params.set('status', input.status)
+  const sort = input.sorting[0]
+  if (sort) {
+    params.set('sortField', sort.id)
+    params.set('sortDir', sort.desc ? 'desc' : 'asc')
+  }
+  return params.toString()
+}
+
+export function StoreListPage() {
+  const t = useT()
+  const locale = useLocale()
+  const router = useRouter()
+  const queryClient = useQueryClient()
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const { runMutation, retryLastMutation } = useGuardedMutation<Record<string, unknown>>({
+    contextId: 'ecommerce-store-list',
+  })
+  const { canManage } = useStoreAccess()
+  const [page, setPage] = React.useState(1)
+  const [search, setSearch] = React.useState('')
+  const [filterValues, setFilterValues] = React.useState<FilterValues>({})
+  const [sorting, setSorting] = React.useState<SortingState>([{ id: 'name', desc: false }])
+  const [createOpen, setCreateOpen] = React.useState(false)
+
+  const status = readStatusFilter(filterValues)
+  const query = buildListQuery({ page, search, status, sorting })
+
+  const storesQuery = useQuery({
+    queryKey: [...STORE_LIST_QUERY_KEY, query],
+    queryFn: async (): Promise<StoreListResponse> => {
+      const call = await apiCall<StoreListResponse>(`${STORES_API_URL}?${query}`, { cache: 'no-store' })
+      if (!call.ok) {
+        await raiseCrudError(call.response, t('ecommerce.backend.stores.errors.load', 'Failed to load stores.'))
+      }
+      return call.result ?? { items: [], total: 0, totalPages: 1 }
+    },
+  })
+
+  const refresh = React.useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: STORE_LIST_QUERY_KEY })
+  }, [queryClient])
+
+  const dateFormatter = React.useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }), [locale])
+
+  const filters = React.useMemo<FilterDef[]>(
+    () => [
+      {
+        id: 'status',
+        type: 'select',
+        label: t('ecommerce.backend.stores.filters.status', 'Status'),
+        options: STORE_STATUSES.map((value) => ({
+          value,
+          label: t(STORE_STATUS_LABELS[value].key, STORE_STATUS_LABELS[value].fallback),
+        })),
+      },
+    ],
+    [t],
+  )
+
+  const hasActiveFilters = status !== null || search.trim().length > 0
+
+  const clearFilters = React.useCallback(() => {
+    setFilterValues({})
+    setSearch('')
+    setPage(1)
+  }, [])
+
+  const handleArchive = React.useCallback(
+    async (row: StoreAdminRecord) => {
+      const confirmed = await confirm({
+        title: t('ecommerce.backend.stores.archive.confirmTitle', 'Archive store "{name}"?', { name: row.name }),
+        text: t(
+          'ecommerce.backend.stores.archive.confirmText',
+          'An archived store stops serving its storefront (HTTP 410). Its configuration and history are kept, but it cannot be unarchived.',
+        ),
+        confirmText: t('ecommerce.backend.stores.archive.confirmButton', 'Archive store'),
+        variant: 'destructive',
+      })
+      if (!confirmed) return
+      const archiveError = t('ecommerce.backend.stores.errors.archive', 'Failed to archive the store.')
+      try {
+        await runMutation({
+          operation: () =>
+            withScopedApiRequestHeaders(buildOptimisticLockHeader(row.updatedAt), () =>
+              updateCrud(STORES_API_PATH, { id: row.id, status: 'archived' }, { errorMessage: archiveError }),
+            ),
+          context: { retryLastMutation },
+          mutationPayload: { id: row.id, status: 'archived' },
+        })
+        clearAllOperations()
+        flash(t('ecommerce.backend.stores.flash.archived', 'Store archived'), 'success')
+        await refresh()
+      } catch (error) {
+        if (extractOptimisticLockConflict(error)) return
+        flash(error instanceof Error && error.message ? error.message : archiveError, 'error')
+      }
+    },
+    [confirm, refresh, retryLastMutation, runMutation, t],
+  )
+
+  const columns = React.useMemo<ColumnDef<StoreAdminRecord>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: t('ecommerce.backend.stores.columns.name', 'Name'),
+        enableSorting: true,
+        cell: ({ row }) => row.original.name,
+      },
+      {
+        accessorKey: 'code',
+        header: t('ecommerce.backend.stores.columns.code', 'Code'),
+        enableSorting: true,
+      },
+      {
+        accessorKey: 'status',
+        header: t('ecommerce.backend.stores.columns.status', 'Status'),
+        enableSorting: true,
+        cell: ({ row }) => <StoreStatusBadge status={row.original.status} />,
+      },
+      {
+        id: 'primaryDomain',
+        header: t('ecommerce.backend.stores.columns.primaryDomain', 'Primary domain'),
+        enableSorting: false,
+        cell: ({ row }) => formatPrimaryDomain(row.original._ecommerce) ?? '—',
+      },
+      {
+        id: 'channel',
+        header: t('ecommerce.backend.stores.columns.channel', 'Channel'),
+        enableSorting: false,
+        cell: ({ row }) => {
+          const channel = row.original._ecommerce?.defaultChannel
+          if (channel) return channel.name
+          return (
+            <span className="text-muted-foreground">
+              {t('ecommerce.backend.stores.columns.noDefaultChannel', 'No default channel')}
+            </span>
+          )
+        },
+      },
+      {
+        accessorKey: 'createdAt',
+        header: t('ecommerce.backend.stores.columns.created', 'Created'),
+        enableSorting: true,
+        cell: ({ row }) => {
+          const value = row.original.createdAt
+          return value ? dateFormatter.format(new Date(value)) : '—'
+        },
+      },
+    ],
+    [dateFormatter, t],
+  )
+
+  const buildRowActions = React.useCallback(
+    (row: StoreAdminRecord): RowActionItem[] => {
+      const items: RowActionItem[] = [
+        { id: 'edit', label: t('ecommerce.backend.stores.actions.edit', 'Edit'), href: buildStoreEditHref(row.id, 'general') },
+        { id: 'domains', label: t('ecommerce.backend.stores.actions.domains', 'Domains'), href: buildStoreEditHref(row.id, 'domains') },
+        { id: 'channels', label: t('ecommerce.backend.stores.actions.channels', 'Channels'), href: buildStoreEditHref(row.id, 'channels') },
+      ]
+      if (canManage && row.status !== 'archived') {
+        items.push({
+          id: 'archive',
+          label: t('ecommerce.backend.stores.actions.archive', 'Archive'),
+          destructive: true,
+          onSelect: () => {
+            void handleArchive(row)
+          },
+        })
+      }
+      return items
+    },
+    [canManage, handleArchive, t],
+  )
+
+  const createAction = canManage ? (
+    <Button type="button" onClick={() => setCreateOpen(true)}>
+      {t('ecommerce.backend.stores.actions.create', 'Create store')}
+    </Button>
+  ) : null
+
+  const emptyState = (
+    <ListEmptyState
+      entityName={t('ecommerce.backend.stores.entityPlural', 'stores')}
+      title={t('ecommerce.backend.stores.empty.title', 'No stores yet')}
+      description={
+        canManage
+          ? t(
+              'ecommerce.backend.stores.empty.description',
+              'A new workspace gets one draft store automatically. If this workspace existed before the Stores module was enabled, run the pending upgrade action from the dashboard to create it, or create a store now.',
+            )
+          : t(
+              'ecommerce.backend.stores.empty.descriptionReadOnly',
+              'A new workspace gets one draft store automatically. If this workspace existed before the Stores module was enabled, an administrator needs to run the pending upgrade action from the dashboard.',
+            )
+      }
+      onCreate={canManage ? () => setCreateOpen(true) : undefined}
+      createLabel={t('ecommerce.backend.stores.actions.create', 'Create store')}
+    />
+  )
+
+  return (
+    <Page>
+      <PageBody>
+        <DataTable<StoreAdminRecord>
+          title={t('ecommerce.module.title', 'Stores')}
+          titleHeadingLevel={1}
+          columns={columns}
+          data={storesQuery.data?.items ?? []}
+          isLoading={storesQuery.isLoading}
+          error={storesQuery.isError ? t('ecommerce.backend.stores.errors.load', 'Failed to load stores.') : null}
+          actions={createAction}
+          searchValue={search}
+          onSearchChange={(value) => {
+            setSearch(value)
+            setPage(1)
+          }}
+          searchPlaceholder={t('ecommerce.backend.stores.search.placeholder', 'Search by name, code or slug')}
+          filters={filters}
+          filterValues={filterValues}
+          onFiltersApply={(values) => {
+            setFilterValues(values)
+            setPage(1)
+          }}
+          onFiltersClear={clearFilters}
+          filterAwareEmptyState={{
+            active: hasActiveFilters,
+            entityNamePlural: t('ecommerce.backend.stores.entityPlural', 'stores'),
+            canRemoveLast: status !== null,
+            onClearAll: clearFilters,
+            onRemoveLast: clearFilters,
+          }}
+          sorting={sorting}
+          onSortingChange={(next) => {
+            setSorting(next)
+            setPage(1)
+          }}
+          sortable
+          manualSorting
+          rowActions={(row) => <RowActions items={buildRowActions(row)} />}
+          onRowClick={(row) => router.push(buildStoreEditHref(row.id, 'general'))}
+          emptyState={emptyState}
+          pagination={{
+            page,
+            pageSize: STORE_LIST_PAGE_SIZE,
+            total: storesQuery.data?.total ?? 0,
+            totalPages: storesQuery.data?.totalPages ?? 1,
+            totalIsCapped: storesQuery.data?.totalIsCapped === true,
+            onPageChange: setPage,
+          }}
+        />
+        {canManage ? (
+          <StoreCreateDialog
+            open={createOpen}
+            onOpenChange={setCreateOpen}
+            onCreated={async () => {
+              clearFilters()
+              await refresh()
+            }}
+          />
+        ) : null}
+        {ConfirmDialogElement}
+      </PageBody>
+    </Page>
+  )
+}

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

@@ -0,0 +1,152 @@
+'use client'
+
+import * as React from 'react'
+import { CrudForm, type CrudField } from '@open-mercato/ui/backend/CrudForm'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { updateCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError, type CrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { STORES_API_PATH, type StoreAdminRecord } from './storeAdmin'
+import {
+  buildStoreSeoInitialValues,
+  buildStoreSeoPayload,
+  remapStoreSeoFieldErrors,
+  STORE_SEO_FIELD_LIMITS,
+  storeSeoFormSchema,
+  type StoreSeoFormValues,
+} from './storeSeo'
+import { useStoreAccess } from './useStoreAccess'
+
+type StoreSeoTabProps = {
+  store: StoreAdminRecord
+  reload: () => Promise<void>
+}
+
+export function StoreSeoTab({ store, reload }: StoreSeoTabProps) {
+  const t = useT()
+  const { canManage } = useStoreAccess()
+  const [formKey, setFormKey] = React.useState(0)
+
+  const fields = React.useMemo<CrudField[]>(
+    () => [
+      {
+        id: 'siteName',
+        type: 'text',
+        label: t('ecommerce.backend.store.seo.siteName', 'Site name'),
+        description: t(
+          'ecommerce.backend.store.seo.siteNameHint',
+          'The name of your store shown in search results and the browser tab.',
+        ),
+        maxLength: STORE_SEO_FIELD_LIMITS.siteName,
+        disabled: !canManage,
+      },
+      {
+        id: 'defaultMetaDescription',
+        type: 'textarea',
+        label: t('ecommerce.backend.store.seo.defaultMetaDescription', 'Default meta description'),
+        description: t(
+          'ecommerce.backend.store.seo.defaultMetaDescriptionHint',
+          'A short description of your store shown in search results when no product description is available.',
+        ),
+        maxLength: STORE_SEO_FIELD_LIMITS.defaultMetaDescription,
+        disabled: !canManage,
+      },
+      {
+        id: 'googleSiteVerification',
+        type: 'text',
+        label: t('ecommerce.backend.store.seo.googleSiteVerification', 'Google site verification token'),
+        description: t(
+          'ecommerce.backend.store.seo.googleSiteVerificationHint',
+          'The token provided by Google Search Console to verify site ownership.',
+        ),
+        maxLength: STORE_SEO_FIELD_LIMITS.googleSiteVerification,
+        disabled: !canManage,
+      },
+      {
+        id: 'robotsTxt',
+        type: 'textarea',
+        label: t('ecommerce.backend.store.seo.robotsTxt', 'robots.txt'),
+        description: t(
+          'ecommerce.backend.store.seo.robotsTxtHint',
+          'Instructions for search engine crawlers on which parts of your store to index.',
+        ),
+        maxLength: STORE_SEO_FIELD_LIMITS.robotsTxt,
+        disabled: !canManage,
+      },
+    ],
+    [canManage, t],
+  )
+
+  const initialValues = React.useMemo(() => buildStoreSeoInitialValues(store), [store])
+
+  const handleSubmit = React.useCallback(
+    async (values: StoreSeoFormValues) => {
+      try {
+        await updateCrud(STORES_API_PATH, buildStoreSeoPayload(store.id, values), {
+          errorMessage: t('ecommerce.backend.store.seo.errors.save', 'Failed to save the SEO settings.'),
+        })
+      } catch (error) {
+        const failure = error as CrudFormError
+        const fieldErrors = remapStoreSeoFieldErrors(failure.fieldErrors)
+        if (!fieldErrors) throw error
+        throw createCrudFormError(failure.message, fieldErrors, { status: failure.status, details: failure.details })
+      }
+      flash(t('ecommerce.backend.store.seo.flash.saved', 'SEO settings saved'), 'success')
+      await reload()
+    },
+    [reload, store.id, t],
+  )
+
+  const resetForm = React.useCallback(() => setFormKey((current) => current + 1), [])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== 'Escape' || event.defaultPrevented) return
+      resetForm()
+    },
+    [resetForm],
+  )
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('ecommerce.backend.store.seo.title', 'Search engine optimization')}</CardTitle>
+          <CardDescription>
+            {t(
+              'ecommerce.backend.store.seo.description',
+              'Configure how your store appears in search results and to automated crawlers.',
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {canManage ? null : (
+            <Alert status="information">
+              <AlertDescription>
+                {t(
+                  'ecommerce.backend.store.seo.readOnly',
+                  'You can view these SEO settings but not change them. Changing them requires permission to manage stores.',
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+          <div onKeyDown={handleKeyDown}>
+            <CrudForm<StoreSeoFormValues>
+              key={`${formKey}:${store.updatedAt ?? 'new'}`}
+              schema={storeSeoFormSchema}
+              fields={fields}
+              initialValues={initialValues}
+              optimisticLockUpdatedAt={store.updatedAt}
+              submitLabel={t('ecommerce.backend.store.seo.save', 'Save SEO settings')}
+              onSubmit={handleSubmit}
+              hideFooterActions={!canManage}
+              embedded
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import { STORE_STATUS_VARIANTS, type StoreStatus } from './storeAdmin'
+
+export const STORE_STATUS_LABELS: Record<StoreStatus, { key: string; fallback: string }> = {
+  draft: { key: 'ecommerce.backend.stores.status.draft', fallback: 'Draft' },
+  active: { key: 'ecommerce.backend.stores.status.active', fallback: 'Active' },
+  archived: { key: 'ecommerce.backend.stores.status.archived', fallback: 'Archived' },
+}
+
+export function StoreStatusBadge({ status }: { status: StoreStatus }) {
+  const t = useT()
+  const label = STORE_STATUS_LABELS[status]
+  return (
+    <StatusBadge variant={STORE_STATUS_VARIANTS[status] ?? 'neutral'} dot>
+      {label ? t(label.key, label.fallback) : status}
+    </StatusBadge>
+  )
+}

package/src/modules/ecommerce/components/channelLookups.ts

@@ -0,0 +1,24 @@
+import {
+  createIdsLookupSource,
+  lookupLabelWithCode,
+  pickLookupString,
+} from '@open-mercato/ui/backend/inputs/lookupSources'
+
+export type { LookupOption, LookupSource } from '@open-mercato/ui/backend/inputs/lookupSources'
+export {
+  categoryLookupSource,
+  productLookupSource,
+  tagLookupSource,
+} from '@open-mercato/core/modules/catalog/components/lookupSources'
+
+export const salesChannelLookupSource = createIdsLookupSource('sales-channels', '/api/sales/channels', (item) => {
+  const value = pickLookupString(item, 'id')
+  if (!value) return null
+  return { value, label: lookupLabelWithCode(pickLookupString(item, 'name') || value, pickLookupString(item, 'code')) }
+})
+
+export const priceKindLookupSource = createIdsLookupSource('price-kinds', '/api/catalog/price-kinds', (item) => {
+  const value = pickLookupString(item, 'id')
+  if (!value) return null
+  return { value, label: lookupLabelWithCode(pickLookupString(item, 'title', 'name') || value, pickLookupString(item, 'code')) }
+})

package/src/modules/ecommerce/components/storeAdmin.ts

@@ -0,0 +1,56 @@
+import type { StatusBadgeVariant } from '@open-mercato/ui/primitives/status-badge'
+import type { StoreListBindingSummary } from '../data/enrichers'
+
+export const STORE_STATUSES = ['draft', 'active', 'archived'] as const
+
+export type StoreStatus = (typeof STORE_STATUSES)[number]
+
+export type StoreAdminRecord = {
+  id: string
+  organizationId?: string | null
+  tenantId?: string | null
+  code: string
+  name: string
+  slug: string
+  status: StoreStatus
+  defaultLocale: string
+  supportedLocales: string[]
+  defaultCurrencyCode: string
+  isPrimary: boolean
+  settings?: Record<string, unknown> | null
+  createdAt: string | null
+  updatedAt: string | null
+  _ecommerce?: StoreListBindingSummary
+}
+
+export type StoreListResponse = {
+  items: StoreAdminRecord[]
+  total: number
+  totalPages: number
+  totalIsCapped?: boolean
+}
+
+export const STORES_API_PATH = 'ecommerce/stores'
+export const STORES_API_URL = `/api/${STORES_API_PATH}`
+export const STORE_LIST_HREF = '/backend/config/ecommerce'
+export const STORE_MANAGE_FEATURE = 'ecommerce.stores.manage'
+export const STORE_VIEW_FEATURE = 'ecommerce.stores.view'
+export const BRANDING_MANAGE_FEATURE = 'ecommerce.branding.manage'
+export const DOMAINS_MANAGE_FEATURE = 'ecommerce.domains.manage'
+export const CHANNELS_MANAGE_FEATURE = 'ecommerce.channels.manage'
+export const AVAILABILITY_POLICIES_API_PATH = 'availability/policies'
+export const AVAILABILITY_POLICIES_API_URL = `/api/${AVAILABILITY_POLICIES_API_PATH}`
+export const AVAILABILITY_VIEW_FEATURE = 'availability.policies.view'
+export const AVAILABILITY_MANAGE_FEATURE = 'availability.policies.manage'
+
+export const STORE_STATUS_VARIANTS: Record<StoreStatus, StatusBadgeVariant> = {
+  draft: 'neutral',
+  active: 'success',
+  archived: 'warning',
+}
+
+export function formatPrimaryDomain(summary: StoreListBindingSummary | undefined): string | null {
+  const domain = summary?.primaryDomain
+  if (!domain) return null
+  return `${domain.hostname}${domain.pathPrefix ?? ''}`
+}