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

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

@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { buildBrandingPreviewDocument } from './storeBrandingForm'
+
+export const BRANDING_PREVIEW_DEBOUNCE_MS = 250
+
+const SAMPLE_PRODUCT_PRICE = 29
+
+export function formatPreviewPrice(amount: number, currencyCode: string, locale: string): string {
+  const code = currencyCode.trim().toUpperCase()
+  try {
+    return new Intl.NumberFormat(locale, { style: 'currency', currency: code }).format(amount)
+  } catch {
+    const formatted = new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount)
+    return code ? `${formatted} ${code}` : formatted
+  }
+}
+
+type StoreBrandingPreviewProps = {
+  values: Record<string, unknown>
+  storeName: string
+  currencyCode: string
+}
+
+function useDebouncedValue<TValue>(value: TValue, delayMs: number): TValue {
+  const [debounced, setDebounced] = React.useState(value)
+  React.useEffect(() => {
+    const handle = setTimeout(() => setDebounced(value), delayMs)
+    return () => clearTimeout(handle)
+  }, [value, delayMs])
+  return debounced
+}
+
+export function StoreBrandingPreview({ values, storeName, currencyCode }: StoreBrandingPreviewProps) {
+  const t = useT()
+  const locale = useLocale()
+  const debouncedValues = useDebouncedValue(values, BRANDING_PREVIEW_DEBOUNCE_MS)
+  const document = React.useMemo(
+    () =>
+      buildBrandingPreviewDocument(debouncedValues, {
+        storeName,
+        navShop: t('ecommerce.backend.store.branding.preview.navShop', 'Shop'),
+        navCategories: t('ecommerce.backend.store.branding.preview.navCategories', 'Categories'),
+        navCart: t('ecommerce.backend.store.branding.preview.navCart', 'Cart'),
+        heroTitle: t('ecommerce.backend.store.branding.preview.heroTitle', 'New arrivals'),
+        heroText: t(
+          'ecommerce.backend.store.branding.preview.heroText',
+          'A preview of your storefront with the colours, corners and fonts you chose.',
+        ),
+        heroButton: t('ecommerce.backend.store.branding.preview.heroButton', 'Shop now'),
+        productName: t('ecommerce.backend.store.branding.preview.productName', 'Sample product'),
+        productPrice: formatPreviewPrice(SAMPLE_PRODUCT_PRICE, currencyCode, locale),
+      }),
+    [currencyCode, debouncedValues, locale, storeName, t],
+  )
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground">
+        {t(
+          'ecommerce.backend.store.branding.preview.hint',
+          'The preview updates as you edit and is never saved until you save the branding.',
+        )}
+      </p>
+      <iframe
+        title={t('ecommerce.backend.store.branding.preview.title', 'Storefront preview')}
+        sandbox=""
+        referrerPolicy="no-referrer"
+        srcDoc={document}
+        data-testid="branding-preview-frame"
+        className="h-96 w-full rounded-md border border-border bg-background"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,242 @@
+'use client'
+
+import * as React from 'react'
+import { CrudForm, type CrudCustomFieldRenderProps, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { raiseCrudError } 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 { ECOMMERCE_BRANDING_FONTS } from '../lib/brandingStyles'
+import { BrandingColorInput, BrandingRadiusSlider } from './StoreBrandingControls'
+import { StoreBrandingPreview } from './StoreBrandingPreview'
+import {
+  BRANDING_COLOR_KEYS,
+  BRANDING_FONT_INHERIT,
+  STORE_BRANDING_API_PATH,
+  buildStoreBrandingInitialValues,
+  buildStoreBrandingPayload,
+  storeBrandingFormSchema,
+  type StoreBrandingFormValues,
+} from './storeBrandingForm'
+import type { StoreAdminRecord } from './storeAdmin'
+import { useStoreAccess } from './useStoreAccess'
+
+type StoreBrandingTabProps = {
+  store: StoreAdminRecord
+  reload: () => Promise<void>
+}
+
+const COLOR_LABELS: Record<(typeof BRANDING_COLOR_KEYS)[number], { key: string; fallback: string }> = {
+  primaryColor: { key: 'ecommerce.backend.store.branding.primaryColor', fallback: 'Primary colour' },
+  primaryForeground: { key: 'ecommerce.backend.store.branding.primaryForeground', fallback: 'Text on primary' },
+  accentColor: { key: 'ecommerce.backend.store.branding.accentColor', fallback: 'Accent colour' },
+  accentForeground: { key: 'ecommerce.backend.store.branding.accentForeground', fallback: 'Text on accent' },
+  backgroundColor: { key: 'ecommerce.backend.store.branding.backgroundColor', fallback: 'Background colour' },
+  foregroundColor: { key: 'ecommerce.backend.store.branding.foregroundColor', fallback: 'Text colour' },
+}
+
+const SYSTEM_FONT_LABELS: Record<string, { key: string; fallback: string }> = {
+  'system-sans': { key: 'ecommerce.backend.store.branding.font.systemSans', fallback: 'System sans-serif' },
+  'system-serif': { key: 'ecommerce.backend.store.branding.font.systemSerif', fallback: 'System serif' },
+  'system-mono': { key: 'ecommerce.backend.store.branding.font.systemMono', fallback: 'System monospace' },
+}
+
+export function StoreBrandingTab({ store, reload }: StoreBrandingTabProps) {
+  const t = useT()
+  const { canManageBranding } = useStoreAccess()
+  const [formKey, setFormKey] = React.useState(0)
+
+  const fontOptions = React.useMemo(
+    () =>
+      ECOMMERCE_BRANDING_FONTS.map((font) => {
+        const system = SYSTEM_FONT_LABELS[font.id]
+        return { value: font.id, label: system ? t(system.key, system.fallback) : font.label }
+      }),
+    [t],
+  )
+
+  const fields = React.useMemo<CrudField[]>(() => {
+    const colorFields: CrudField[] = BRANDING_COLOR_KEYS.map((key) => ({
+      id: key,
+      type: 'custom',
+      label: t(COLOR_LABELS[key].key, COLOR_LABELS[key].fallback),
+      layout: 'half',
+      disabled: !canManageBranding,
+      component: (props: CrudCustomFieldRenderProps) => (
+        <BrandingColorInput
+          id={props.id}
+          value={props.value}
+          error={props.error}
+          disabled={props.disabled || !canManageBranding}
+          setValue={props.setValue}
+        />
+      ),
+    }))
+    return [
+      ...colorFields,
+      {
+        id: 'borderRadius',
+        type: 'custom',
+        label: t('ecommerce.backend.store.branding.radius', 'Corner radius'),
+        description: t(
+          'ecommerce.backend.store.branding.radiusHint',
+          'How rounded buttons, cards and inputs are, from square (0) to 5rem.',
+        ),
+        disabled: !canManageBranding,
+        component: (props: CrudCustomFieldRenderProps) => (
+          <BrandingRadiusSlider
+            id={props.id}
+            value={props.value}
+            error={props.error}
+            disabled={props.disabled || !canManageBranding}
+            setValue={props.setValue}
+          />
+        ),
+      },
+      {
+        id: 'fontFamilyBase',
+        type: 'select',
+        label: t('ecommerce.backend.store.branding.fontBase', 'Body font'),
+        options: fontOptions,
+        layout: 'half',
+        disabled: !canManageBranding,
+      },
+      {
+        id: 'fontFamilyHeading',
+        type: 'select',
+        label: t('ecommerce.backend.store.branding.fontHeading', 'Heading font'),
+        options: [
+          { value: BRANDING_FONT_INHERIT, label: t('ecommerce.backend.store.branding.fontInherit', 'Same as body font') },
+          ...fontOptions,
+        ],
+        layout: 'half',
+        disabled: !canManageBranding,
+      },
+      {
+        id: 'logoUrl',
+        type: 'text',
+        label: t('ecommerce.backend.store.branding.logoUrl', 'Logo URL'),
+        description: t(
+          'ecommerce.backend.store.branding.assetUrlHint',
+          'An http(s) address or a path starting with /. Leave empty for none.',
+        ),
+        maxLength: 2048,
+        disabled: !canManageBranding,
+      },
+      {
+        id: 'faviconUrl',
+        type: 'text',
+        label: t('ecommerce.backend.store.branding.faviconUrl', 'Favicon URL'),
+        description: t(
+          'ecommerce.backend.store.branding.assetUrlHint',
+          'An http(s) address or a path starting with /. Leave empty for none.',
+        ),
+        maxLength: 2048,
+        disabled: !canManageBranding,
+      },
+    ]
+  }, [canManageBranding, fontOptions, t])
+
+  const groups = React.useMemo<CrudFormGroup[]>(
+    () => [
+      {
+        id: 'colours',
+        title: t('ecommerce.backend.store.branding.coloursTitle', 'Colours'),
+        column: 1,
+        fields: [...BRANDING_COLOR_KEYS],
+      },
+      {
+        id: 'style',
+        title: t('ecommerce.backend.store.branding.styleTitle', 'Shape and typography'),
+        column: 1,
+        fields: ['borderRadius', 'fontFamilyBase', 'fontFamilyHeading'],
+      },
+      {
+        id: 'assets',
+        title: t('ecommerce.backend.store.branding.assetsTitle', 'Logo and favicon'),
+        column: 1,
+        fields: ['logoUrl', 'faviconUrl'],
+      },
+      {
+        id: 'preview',
+        title: t('ecommerce.backend.store.branding.preview.groupTitle', 'Live preview'),
+        column: 2,
+        component: ({ values }) => (
+          <StoreBrandingPreview values={values} storeName={store.name} currencyCode={store.defaultCurrencyCode} />
+        ),
+      },
+    ],
+    [store.defaultCurrencyCode, store.name, t],
+  )
+
+  const initialValues = React.useMemo(() => buildStoreBrandingInitialValues(store), [store])
+
+  const handleSubmit = React.useCallback(
+    async (values: StoreBrandingFormValues) => {
+      const payload = buildStoreBrandingPayload(values, store)
+      const call = await apiCall(STORE_BRANDING_API_PATH(store.id), {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+      if (!call.ok) {
+        await raiseCrudError(call.response, t('ecommerce.backend.store.branding.errors.save', 'Failed to save the branding.'))
+      }
+      flash(t('ecommerce.backend.store.branding.flash.saved', 'Branding saved'), 'success')
+      await reload()
+    },
+    [reload, store, 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 (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('ecommerce.backend.store.branding.title', 'Branding')}</CardTitle>
+        <CardDescription>
+          {t(
+            'ecommerce.backend.store.branding.description',
+            'The colours, corner radius, fonts and logo your storefront uses. Empty values use the defaults shown.',
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {canManageBranding ? null : (
+          <Alert status="information">
+            <AlertDescription>
+              {t(
+                'ecommerce.backend.store.branding.readOnly',
+                'You can view this branding but not change it. Changing it requires permission to manage store branding.',
+              )}
+            </AlertDescription>
+          </Alert>
+        )}
+        <div onKeyDown={handleKeyDown}>
+          <CrudForm<StoreBrandingFormValues>
+            key={`${formKey}:${store.updatedAt ?? 'new'}`}
+            schema={storeBrandingFormSchema}
+            fields={fields}
+            groups={groups}
+            initialValues={initialValues}
+            optimisticLockUpdatedAt={store.updatedAt}
+            submitLabel={t('ecommerce.backend.store.branding.save', 'Save branding')}
+            onSubmit={handleSubmit}
+            hideFooterActions={!canManageBranding}
+            embedded
+          />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,306 @@
+'use client'
+
+import * as React from 'react'
+import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { createCrud, updateCrud } from '@open-mercato/ui/backend/utils/crud'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { ChannelBindingLiveCount, PriceSortFallbackConsequence } from './ChannelBindingFormSections'
+import { ChannelLookupMultiPicker, ChannelLookupSinglePicker } from './ChannelLookupPicker'
+import {
+  categoryLookupSource,
+  priceKindLookupSource,
+  productLookupSource,
+  salesChannelLookupSource,
+  tagLookupSource,
+  type LookupSource,
+} from './channelLookups'
+import {
+  CHANNEL_BINDINGS_API_PATH,
+  PRICE_SORT_CAP,
+  PRICE_SORT_FALLBACKS,
+  PRICE_SORT_FALLBACK_LABELS,
+  buildChannelBindingCreatePayload,
+  buildChannelBindingInitialValues,
+  buildChannelBindingUpdatePayload,
+  channelBindingFormSchema,
+  type ChannelBindingFormValues,
+  type ChannelBindingRecord,
+  type ScopeIdField,
+} from './storeChannels'
+
+type StoreChannelBindingDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  storeId: string
+  binding: ChannelBindingRecord | null
+  firstBinding: boolean
+  readOnly: boolean
+  onSaved: () => void | Promise<void>
+}
+
+function toIdList(value: unknown): string[] {
+  return Array.isArray(value) ? value.filter((entry): entry is string => typeof entry === 'string') : []
+}
+
+function scopePickerField(
+  id: ScopeIdField,
+  label: string,
+  placeholder: string,
+  source: LookupSource,
+  readOnly: boolean,
+): CrudField {
+  return {
+    id,
+    type: 'custom',
+    label,
+    disabled: readOnly,
+    component: ({ value, setValue, disabled }) => (
+      <ChannelLookupMultiPicker
+        source={source}
+        value={toIdList(value)}
+        onChange={(next) => setValue(next)}
+        placeholder={placeholder}
+        disabled={disabled || readOnly}
+      />
+    ),
+  }
+}
+
+export function StoreChannelBindingDialog({
+  open,
+  onOpenChange,
+  storeId,
+  binding,
+  firstBinding,
+  readOnly,
+  onSaved,
+}: StoreChannelBindingDialogProps) {
+  const t = useT()
+  const locale = useLocale()
+  const cap = React.useMemo(() => new Intl.NumberFormat(locale).format(PRICE_SORT_CAP), [locale])
+  const isCurrentDefault = binding?.isDefault === true
+
+  const fields = React.useMemo<CrudField[]>(
+    () => [
+      {
+        id: 'salesChannelId',
+        type: 'custom',
+        label: t('ecommerce.backend.store.channels.form.salesChannel', 'Sales channel'),
+        required: true,
+        disabled: readOnly,
+        component: ({ value, setValue, disabled }) => (
+          <ChannelLookupSinglePicker
+            source={salesChannelLookupSource}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(next) => setValue(next)}
+            placeholder={t('ecommerce.backend.store.channels.form.salesChannelPlaceholder', 'Select a sales channel…')}
+            disabled={disabled || readOnly}
+          />
+        ),
+      },
+      {
+        id: 'priceKindId',
+        type: 'custom',
+        label: t('ecommerce.backend.store.channels.form.priceKind', 'Price kind override'),
+        description: t(
+          'ecommerce.backend.store.channels.form.priceKindHint',
+          'Optional. The price kind anonymous visitors see on this channel. Leave empty to use the default price kind.',
+        ),
+        disabled: readOnly,
+        component: ({ value, setValue, disabled }) => (
+          <ChannelLookupSinglePicker
+            source={priceKindLookupSource}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(next) => setValue(next)}
+            placeholder={t('ecommerce.backend.store.channels.form.priceKindPlaceholder', 'Default price kind')}
+            disabled={disabled || readOnly}
+            clearable
+          />
+        ),
+      },
+      {
+        id: 'isDefault',
+        type: 'checkbox',
+        label: t('ecommerce.backend.store.channels.form.isDefault', 'Default channel of this store'),
+        description: isCurrentDefault
+          ? t(
+              'ecommerce.backend.store.channels.form.isDefaultLocked',
+              'This is the default binding. To change it, make another binding the default; a store without a default channel cannot serve its storefront.',
+            )
+          : t(
+              'ecommerce.backend.store.channels.form.isDefaultHint',
+              'The storefront serves the default binding. Making this binding the default removes the mark from the current default.',
+            ),
+        disabled: readOnly || isCurrentDefault,
+      },
+      scopePickerField(
+        'categoryIds',
+        t('ecommerce.backend.store.channels.form.categoryIds', 'Categories'),
+        t('ecommerce.backend.store.channels.form.categoryPlaceholder', 'Search categories'),
+        categoryLookupSource,
+        readOnly,
+      ),
+      scopePickerField(
+        'tagIds',
+        t('ecommerce.backend.store.channels.form.tagIds', 'Tags'),
+        t('ecommerce.backend.store.channels.form.tagPlaceholder', 'Search tags'),
+        tagLookupSource,
+        readOnly,
+      ),
+      scopePickerField(
+        'excludeProductIds',
+        t('ecommerce.backend.store.channels.form.excludeProductIds', 'Products'),
+        t('ecommerce.backend.store.channels.form.productPlaceholder', 'Search products'),
+        productLookupSource,
+        readOnly,
+      ),
+      scopePickerField(
+        'excludeCategoryIds',
+        t('ecommerce.backend.store.channels.form.excludeCategoryIds', 'Categories'),
+        t('ecommerce.backend.store.channels.form.categoryPlaceholder', 'Search categories'),
+        categoryLookupSource,
+        readOnly,
+      ),
+      scopePickerField(
+        'excludeTagIds',
+        t('ecommerce.backend.store.channels.form.excludeTagIds', 'Tags'),
+        t('ecommerce.backend.store.channels.form.tagPlaceholder', 'Search tags'),
+        tagLookupSource,
+        readOnly,
+      ),
+      {
+        id: 'requireAuthentication',
+        type: 'checkbox',
+        label: t('ecommerce.backend.store.channels.form.requireAuthentication', 'Require sign-in to see products'),
+        description: t(
+          'ecommerce.backend.store.channels.form.requireAuthenticationHint',
+          'Anonymous visitors see no products on this channel; signed-in buyers see their usual assortment. This governs catalog visibility only, not the whole storefront: pages and sign-in stay reachable. Takes effect on save.',
+        ),
+        disabled: readOnly,
+      },
+      {
+        id: 'priceSortFallback',
+        type: 'select',
+        label: t('ecommerce.backend.store.channels.form.priceSortFallback', 'Price sorting past {cap} products', { cap }),
+        description: t(
+          'ecommerce.backend.store.channels.form.priceSortFallbackHint',
+          'The storefront sorts by price for at most {cap} matching products. Choose what happens on this channel when more products match.',
+          { cap },
+        ),
+        options: PRICE_SORT_FALLBACKS.map((value) => ({
+          value,
+          label: t(PRICE_SORT_FALLBACK_LABELS[value].key, PRICE_SORT_FALLBACK_LABELS[value].fallback),
+        })),
+        required: true,
+        disabled: readOnly,
+      },
+    ],
+    [cap, isCurrentDefault, readOnly, t],
+  )
+
+  const bindingId = binding?.id ?? null
+
+  const groups = React.useMemo<CrudFormGroup[]>(
+    () => [
+      { id: 'binding', fields: ['salesChannelId', 'priceKindId', 'isDefault'] },
+      {
+        id: 'scopeInclude',
+        title: t('ecommerce.backend.store.channels.form.includeTitle', 'Show only products in'),
+        description: t(
+          'ecommerce.backend.store.channels.form.includeHint',
+          "A product shows when it is in any of the chosen categories and carries any of the chosen tags. An empty picker does not filter, so leave both empty to show the channel's whole catalog; clearing a picker never hides everything.",
+        ),
+        fields: ['categoryIds', 'tagIds'],
+      },
+      {
+        id: 'scopeExclude',
+        title: t('ecommerce.backend.store.channels.form.excludeTitle', 'Always hide'),
+        description: t(
+          'ecommerce.backend.store.channels.form.excludeHint',
+          'Hidden products, categories and tags win over the selection above.',
+        ),
+        fields: ['excludeProductIds', 'excludeCategoryIds', 'excludeTagIds'],
+      },
+      {
+        id: 'policies',
+        title: t('ecommerce.backend.store.channels.form.policiesTitle', 'Catalogue policies'),
+        fields: ['requireAuthentication', 'priceSortFallback'],
+      },
+      {
+        id: 'priceSortConsequence',
+        bare: true,
+        component: ({ values }) => <PriceSortFallbackConsequence values={values} />,
+      },
+      {
+        id: 'liveCount',
+        bare: true,
+        component: ({ values }) => <ChannelBindingLiveCount bindingId={bindingId} values={values} />,
+      },
+    ],
+    [bindingId, t],
+  )
+
+  const initialValues = React.useMemo(
+    () => buildChannelBindingInitialValues(binding, { firstBinding }),
+    [binding, firstBinding],
+  )
+
+  const handleSubmit = React.useCallback(
+    async (values: ChannelBindingFormValues) => {
+      if (binding) {
+        await updateCrud(CHANNEL_BINDINGS_API_PATH, buildChannelBindingUpdatePayload(binding.id, values), {
+          errorMessage: t('ecommerce.backend.store.channels.errors.update', 'Failed to update the channel binding.'),
+        })
+        flash(t('ecommerce.backend.store.channels.flash.updated', 'Channel binding updated'), 'success')
+      } else {
+        await createCrud(CHANNEL_BINDINGS_API_PATH, buildChannelBindingCreatePayload(storeId, values), {
+          errorMessage: t('ecommerce.backend.store.channels.errors.create', 'Failed to add the channel binding.'),
+        })
+        flash(t('ecommerce.backend.store.channels.flash.created', 'Channel binding added'), 'success')
+      }
+      onOpenChange(false)
+      await onSaved()
+    },
+    [binding, onOpenChange, onSaved, storeId, t],
+  )
+
+  const title = readOnly
+    ? t('ecommerce.backend.store.channels.view.title', 'Channel binding')
+    : binding
+      ? t('ecommerce.backend.store.channels.edit.title', 'Edit channel binding')
+      : t('ecommerce.backend.store.channels.add.title', 'Add channel binding')
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-screen max-w-3xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>
+            {t(
+              'ecommerce.backend.store.channels.dialog.description',
+              'Bind a sales channel to this store and decide what it shows and to whom: the assortment scope, the sign-in requirement and how price sorting behaves on a large catalogue.',
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <CrudForm<ChannelBindingFormValues>
+          key={`${binding?.id ?? 'new'}:${binding?.updatedAt ?? ''}`}
+          schema={channelBindingFormSchema}
+          fields={fields}
+          groups={groups}
+          initialValues={initialValues}
+          optimisticLockUpdatedAt={binding?.updatedAt ?? null}
+          readOnly={readOnly}
+          submitLabel={
+            binding
+              ? t('ecommerce.backend.store.channels.edit.submit', 'Save binding')
+              : t('ecommerce.backend.store.channels.add.submit', 'Add binding')
+          }
+          onSubmit={handleSubmit}
+          embedded
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}