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

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

@@ -0,0 +1,193 @@
+'use client'
+
+import * as React from 'react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { FormHeader } from '@open-mercato/ui/backend/forms'
+import { ErrorMessage, LoadingMessage, RecordNotFoundState } from '@open-mercato/ui/backend/detail'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { raiseCrudError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { StoreStatusBadge } from './StoreStatusBadge'
+import { STORE_LIST_HREF, STORES_API_URL, formatPrimaryDomain, type StoreAdminRecord, type StoreListResponse } from './storeAdmin'
+import {
+  STORE_EDIT_TABS,
+  STORE_TAB_QUERY_PARAM,
+  buildStoreEditHref,
+  isStoreEditTabId,
+  resolveActiveStoreTab,
+  type StoreEditTabDefinition,
+} from './storeEditTabs'
+
+type StoreEditPageProps = {
+  storeId: string | null | undefined
+  tabs?: readonly StoreEditTabDefinition[]
+}
+
+type StoreLoadResult = { store: StoreAdminRecord | null }
+
+function SummaryItem({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <dt className="text-sm text-muted-foreground">{label}</dt>
+      <dd className="text-sm font-medium">{value}</dd>
+    </div>
+  )
+}
+
+export function StoreEditPage({ storeId, tabs = STORE_EDIT_TABS }: StoreEditPageProps) {
+  const t = useT()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const queryClient = useQueryClient()
+  const queryKey = React.useMemo(() => ['ecommerce', 'stores', 'detail', storeId ?? ''], [storeId])
+
+  const storeQuery = useQuery({
+    queryKey,
+    enabled: Boolean(storeId),
+    queryFn: async (): Promise<StoreLoadResult> => {
+      const params = new URLSearchParams({ id: storeId ?? '', page: '1', pageSize: '1' })
+      const call = await apiCall<StoreListResponse>(`${STORES_API_URL}?${params.toString()}`, { cache: 'no-store' })
+      if (!call.ok) {
+        await raiseCrudError(call.response, t('ecommerce.backend.store.errors.load', 'Failed to load the store.'))
+      }
+      return { store: call.result?.items?.[0] ?? null }
+    },
+  })
+
+  const reload = React.useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey })
+  }, [queryClient, queryKey])
+
+  const requestedTab = searchParams?.get(STORE_TAB_QUERY_PARAM)
+  const activeTab = resolveActiveStoreTab(isStoreEditTabId(requestedTab) ? requestedTab : null, tabs)
+
+  const handleTabChange = React.useCallback(
+    (next: string) => {
+      if (!isStoreEditTabId(next) || !storeId) return
+      router.replace(pathname ? `${pathname}?${STORE_TAB_QUERY_PARAM}=${next}` : buildStoreEditHref(storeId, next))
+    },
+    [pathname, router, storeId],
+  )
+
+  const backLabel = t('ecommerce.backend.store.backToList', 'Back to stores')
+
+  if (!storeId || (!storeQuery.isLoading && !storeQuery.isError && !storeQuery.data?.store)) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('ecommerce.backend.store.notFound.label', 'Store not found')}
+            description={t(
+              'ecommerce.backend.store.notFound.description',
+              'This store does not exist in the selected organization, or it was deleted.',
+            )}
+            backHref={STORE_LIST_HREF}
+            backLabel={backLabel}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  if (storeQuery.isLoading) {
+    return (
+      <Page>
+        <PageBody>
+          <LoadingMessage label={t('ecommerce.backend.store.loading', 'Loading store...')} />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  const store = storeQuery.data?.store
+  if (storeQuery.isError || !store) {
+    return (
+      <Page>
+        <PageBody>
+          <ErrorMessage
+            label={t('ecommerce.backend.store.errors.load', 'Failed to load the store.')}
+            action={
+              <Button type="button" variant="outline" size="sm" onClick={() => void storeQuery.refetch()}>
+                {t('ecommerce.backend.store.actions.retry', 'Retry')}
+              </Button>
+            }
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  const summary = store._ecommerce
+  const noValue = '—'
+
+  return (
+    <Page>
+      <PageBody>
+        <div className="space-y-6">
+          <FormHeader
+            mode="detail"
+            backHref={STORE_LIST_HREF}
+            backLabel={backLabel}
+            entityTypeLabel={t('ecommerce.backend.store.entityType', 'Store')}
+            title={store.name}
+            subtitle={`${store.code} — /${store.slug}`}
+            statusBadge={<StoreStatusBadge status={store.status} />}
+          />
+          <Card>
+            <CardHeader>
+              <CardTitle>{t('ecommerce.backend.store.summary.title', 'Store summary')}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <dl className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <SummaryItem label={t('ecommerce.backend.store.summary.code', 'Code')} value={store.code} />
+                <SummaryItem label={t('ecommerce.backend.store.summary.slug', 'Slug')} value={store.slug} />
+                <SummaryItem
+                  label={t('ecommerce.backend.store.summary.defaultLocale', 'Default language')}
+                  value={store.defaultLocale}
+                />
+                <SummaryItem
+                  label={t('ecommerce.backend.store.summary.supportedLocales', 'Supported languages')}
+                  value={store.supportedLocales.join(', ') || noValue}
+                />
+                <SummaryItem
+                  label={t('ecommerce.backend.store.summary.currency', 'Currency')}
+                  value={store.defaultCurrencyCode}
+                />
+                <SummaryItem
+                  label={t('ecommerce.backend.store.summary.primaryDomain', 'Primary domain')}
+                  value={formatPrimaryDomain(summary) ?? noValue}
+                />
+                <SummaryItem
+                  label={t('ecommerce.backend.store.summary.defaultChannel', 'Default channel')}
+                  value={summary?.defaultChannel?.name ?? noValue}
+                />
+              </dl>
+            </CardContent>
+          </Card>
+          {activeTab ? (
+            <Tabs value={activeTab} onValueChange={handleTabChange} variant="underline">
+              <TabsList className="max-w-full overflow-x-auto" aria-label={t('ecommerce.backend.store.tabs.ariaLabel', 'Store sections')}>
+                {tabs.map((tab) => (
+                  <TabsTrigger key={tab.id} value={tab.id}>
+                    {t(tab.labelKey, tab.fallbackLabel)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              {tabs.map((tab) => (
+                <TabsContent key={tab.id} value={tab.id}>
+                  {tab.render({ store, reload })}
+                </TabsContent>
+              ))}
+            </Tabs>
+          ) : null}
+        </div>
+      </PageBody>
+    </Page>
+  )
+}

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

@@ -0,0 +1,189 @@
+'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 { 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 { STORE_STATUS_LABELS } from './StoreStatusBadge'
+import { StoreAvailabilityDefaultsSection } from './StoreAvailabilityDefaultsSection'
+import { STORES_API_PATH, type StoreAdminRecord, type StoreStatus } from './storeAdmin'
+import {
+  buildStoreGeneralInitialValues,
+  buildStoreGeneralPayload,
+  storeGeneralFormSchema,
+  type StoreGeneralFormValues,
+} from './storeGeneral'
+import { useStoreAccess } from './useStoreAccess'
+
+type StoreGeneralTabProps = {
+  store: StoreAdminRecord
+  reload: () => Promise<void>
+}
+
+function selectableStatuses(current: StoreStatus): StoreStatus[] {
+  return current === 'archived' ? ['archived'] : ['draft', 'active']
+}
+
+export function StoreGeneralTab({ store, reload }: StoreGeneralTabProps) {
+  const t = useT()
+  const { canManage } = useStoreAccess()
+  const [formKey, setFormKey] = React.useState(0)
+
+  const fields = React.useMemo<CrudField[]>(
+    () => [
+      {
+        id: 'name',
+        type: 'text',
+        label: t('ecommerce.backend.stores.form.name', 'Name'),
+        required: true,
+        maxLength: 200,
+        disabled: !canManage,
+      },
+      {
+        id: 'code',
+        type: 'text',
+        label: t('ecommerce.backend.stores.form.code', 'Code'),
+        description: t(
+          'ecommerce.backend.stores.form.codeHint',
+          'Internal identifier, unique in the workspace. Lowercase letters, digits, dashes and underscores.',
+        ),
+        required: true,
+        maxLength: 80,
+        layout: 'half',
+        disabled: !canManage,
+      },
+      {
+        id: 'slug',
+        type: 'text',
+        label: t('ecommerce.backend.stores.form.slug', 'Slug'),
+        description: t(
+          'ecommerce.backend.stores.form.slugHint',
+          'Short name used in store addresses, unique in the workspace. Lowercase letters, digits and dashes.',
+        ),
+        required: true,
+        maxLength: 120,
+        layout: 'half',
+        disabled: !canManage,
+      },
+      {
+        id: 'status',
+        type: 'select',
+        label: t('ecommerce.backend.store.general.status', 'Status'),
+        description:
+          store.status === 'archived'
+            ? t('ecommerce.backend.store.general.statusArchivedHint', 'An archived store cannot be unarchived.')
+            : t(
+                'ecommerce.backend.store.general.statusHint',
+                'A draft store does not serve its storefront. Archive a store from the store list.',
+              ),
+        options: selectableStatuses(store.status).map((value) => ({
+          value,
+          label: t(STORE_STATUS_LABELS[value].key, STORE_STATUS_LABELS[value].fallback),
+        })),
+        required: true,
+        layout: 'half',
+        disabled: !canManage || store.status === 'archived',
+      },
+      {
+        id: 'defaultCurrencyCode',
+        type: 'text',
+        label: t('ecommerce.backend.stores.form.currency', 'Currency'),
+        description: t('ecommerce.backend.stores.form.currencyHint', 'Three-letter ISO code, for example EUR.'),
+        placeholder: 'EUR',
+        required: true,
+        maxLength: 3,
+        layout: 'half',
+        disabled: !canManage,
+      },
+      {
+        id: 'defaultLocale',
+        type: 'text',
+        label: t('ecommerce.backend.stores.form.defaultLocale', 'Default language'),
+        description: t('ecommerce.backend.stores.form.defaultLocaleHint', 'A language code such as en or pl-PL.'),
+        required: true,
+        layout: 'half',
+        disabled: !canManage,
+      },
+      {
+        id: 'supportedLocales',
+        type: 'tags',
+        label: t('ecommerce.backend.stores.form.supportedLocales', 'Supported languages'),
+        description: t(
+          'ecommerce.backend.stores.form.supportedLocalesHint',
+          'Languages the store can be shown in. Must include the default language.',
+        ),
+        required: true,
+        disabled: !canManage,
+      },
+    ],
+    [canManage, store.status, t],
+  )
+
+  const initialValues = React.useMemo(() => buildStoreGeneralInitialValues(store), [store])
+
+  const handleSubmit = React.useCallback(
+    async (values: StoreGeneralFormValues) => {
+      await updateCrud(STORES_API_PATH, buildStoreGeneralPayload(store.id, values), {
+        errorMessage: t('ecommerce.backend.store.general.errors.save', 'Failed to save the store.'),
+      })
+      flash(t('ecommerce.backend.store.general.flash.saved', 'Store 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.general.title', 'Identity and localization')}</CardTitle>
+          <CardDescription>
+            {t(
+              'ecommerce.backend.store.general.description',
+              'The store name, its identifiers, the languages it is shown in and its currency.',
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {canManage ? null : (
+            <Alert status="information">
+              <AlertDescription>
+                {t(
+                  'ecommerce.backend.store.general.readOnly',
+                  'You can view this store but not change it. Changing it requires permission to manage stores.',
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+          <div onKeyDown={handleKeyDown}>
+            <CrudForm<StoreGeneralFormValues>
+              key={`${formKey}:${store.updatedAt ?? 'new'}`}
+              schema={storeGeneralFormSchema}
+              fields={fields}
+              initialValues={initialValues}
+              optimisticLockUpdatedAt={store.updatedAt}
+              submitLabel={t('ecommerce.backend.store.general.save', 'Save changes')}
+              onSubmit={handleSubmit}
+              hideFooterActions={!canManage}
+              embedded
+            />
+          </div>
+        </CardContent>
+      </Card>
+      <StoreAvailabilityDefaultsSection store={store} />
+    </div>
+  )
+}