@open-mercato/core 0.6.6-develop.6184.1.b7e55f8d61 → 0.6.6-develop.6201.1.8ceb502c4b

package/src/modules/sales/components/documents/SalesDocumentForm.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from 'react'
-import { CrudForm, type CrudCustomFieldRenderProps, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { CrudForm, type CrudCustomFieldRenderProps, type CrudField, type CrudFormGroup, type CrudFormGroupComponentProps } from '@open-mercato/ui/backend/CrudForm'
 import { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { EmailInput } from '@open-mercato/ui/primitives/email-input'
@@ -406,6 +406,353 @@ function normalizeAddressDraft(draft?: AddressDraft | null): Record<string, unkn
   return Object.keys(normalized).length ? normalized : null
 }
 
+type DocumentNumberFieldProps = CrudCustomFieldRenderProps & { t: Translator }
+
+type BillingAddressSectionFieldProps = CrudCustomFieldRenderProps & {
+  t: Translator
+  addressesLoading: boolean
+  addressOptions: AddressOption[]
+  addressFormat: AddressFormatStrategy
+}
+
+type CustomerGroupComponentProps = CrudFormGroupComponentProps & {
+  t: Translator
+  customers: CustomerOption[]
+  setCustomers: React.Dispatch<React.SetStateAction<CustomerOption[]>>
+  customerQuerySetter: React.MutableRefObject<((value: string) => void) | null>
+  loadAddresses: (customerId?: string | null) => Promise<AddressOption[]>
+  loadCustomers: (query?: string) => Promise<CustomerOption[]>
+  fetchCustomerEmail: (id: string, kindHint?: 'person' | 'company') => Promise<string | null>
+  resetAddressFormState: (updateValue: (key: string, value: unknown) => void) => void
+}
+
+function DocumentNumberField({ value, setValue, values, t }: DocumentNumberFieldProps) {
+  const formValues = (values ?? {}) as Partial<SalesDocumentFormValues>
+  const kind: DocumentKind = formValues.documentKind === 'order' ? 'order' : 'quote'
+  const [loading, setLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const autoValueRef = React.useRef<string | null>(null)
+  const lastKindRef = React.useRef<DocumentKind | null>(null)
+
+  const requestNumber = React.useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const call = await apiCall<{ number?: string; error?: string }>('/api/sales/document-numbers', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ kind }),
+      })
+      const nextNumber = typeof call.result?.number === 'string' ? call.result.number : null
+      if (call.ok && nextNumber) {
+        autoValueRef.current = nextNumber
+        lastKindRef.current = kind
+        setValue(nextNumber)
+      } else {
+        setError(call.result?.error || t('sales.documents.form.errors.numberGenerate', 'Could not generate a document number.'))
+      }
+    } catch (err) {
+      console.error('sales.documents.generateNumber', err)
+      setError(t('sales.documents.form.errors.numberGenerate', 'Could not generate a document number.'))
+    } finally {
+      setLoading(false)
+    }
+  }, [kind, setValue, t])
+
+  React.useEffect(() => {
+    const current = typeof value === 'string' ? value.trim() : ''
+    if (!current.length && !lastKindRef.current) {
+      void requestNumber()
+    } else {
+      lastKindRef.current = kind
+    }
+  }, [kind, requestNumber, value])
+
+  return (
+    <div className="space-y-2">
+      <div className="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-3">
+        <Input
+          value={typeof value === 'string' ? value : ''}
+          onChange={(event) => setValue(event.target.value)}
+          disabled={loading}
+          spellCheck={false}
+          className="w-full md:flex-1"
+        />
+        <Button type="button" variant="outline" onClick={requestNumber} disabled={loading}>
+          {loading
+            ? t('sales.documents.form.numberLoading', 'Generating…')
+            : t('sales.documents.form.numberRefresh', 'Generate')}
+        </Button>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {kind === 'order'
+          ? t('sales.documents.form.numberHintOrder', 'Format applies to orders and uses the configured counter.')
+          : t('sales.documents.form.numberHintQuote', 'Format applies to quotes and uses the configured counter.')}
+      </p>
+      {error ? <p className="text-xs text-destructive">{error}</p> : null}
+    </div>
+  )
+}
+
+function BillingAddressSectionField({ values, setFormValue, t, addressesLoading, addressOptions, addressFormat }: BillingAddressSectionFieldProps) {
+  const formValues = (values ?? {}) as Partial<SalesDocumentFormValues>
+  const updateValue = setFormValue ?? (() => {})
+  const useCustom = formValues.useCustomBilling === true
+  const selectedId = typeof formValues.billingAddressId === 'string' ? formValues.billingAddressId : ''
+  const draft = (formValues.billingAddressDraft ?? {}) as AddressDraft
+  const customerRequired = !formValues.customerEntityId
+  const sameAsShipping = formValues.sameAsShipping !== false
+  const shippingId = typeof formValues.shippingAddressId === 'string' ? formValues.shippingAddressId : null
+  const shippingDraft = (formValues.shippingAddressDraft ?? {}) as AddressDraft
+  const shippingDraftKey = JSON.stringify(shippingDraft)
+  const billingDraftKey = JSON.stringify(draft)
+  const useCustomShipping = formValues.useCustomShipping === true
+
+  React.useEffect(() => {
+    if (!sameAsShipping) return
+    if ((formValues.billingAddressId ?? null) !== shippingId) {
+      updateValue('billingAddressId', shippingId)
+    }
+    if (useCustomShipping !== (formValues.useCustomBilling === true)) {
+      updateValue('useCustomBilling', useCustomShipping)
+    }
+    if (useCustomShipping && shippingDraftKey !== billingDraftKey) {
+      updateValue('billingAddressDraft', shippingDraft)
+    }
+  }, [
+    billingDraftKey,
+    sameAsShipping,
+    updateValue,
+    shippingDraft,
+    shippingDraftKey,
+    shippingId,
+    useCustomShipping,
+    formValues.billingAddressId,
+    formValues.useCustomBilling,
+  ])
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
+        <div>
+          <p className="text-base font-semibold">
+            {t('sales.documents.form.billing.title', 'Billing address')}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            {sameAsShipping
+              ? t('sales.documents.form.address.sameAsShippingHint', 'Billing will mirror the shipping address. Uncheck to edit.')
+              : t('sales.documents.form.billing.hint', 'Select an address or define a new one.')}
+          </p>
+        </div>
+        <SwitchField
+          label={t('sales.documents.form.address.sameAsShipping', 'Same as shipping')}
+          flip
+          checked={sameAsShipping}
+          onCheckedChange={(checked) => {
+            updateValue('sameAsShipping', checked)
+            if (checked) {
+              updateValue('useCustomBilling', useCustomShipping)
+              updateValue('billingAddressId', shippingId)
+              updateValue('billingAddressDraft', shippingDraft)
+            }
+          }}
+        />
+      </div>
+
+      {!sameAsShipping ? (
+        <>
+          {!useCustom ? (
+            <Select
+              value={selectedId || undefined}
+              onValueChange={(value) => updateValue('billingAddressId', value || null)}
+              disabled={addressesLoading || customerRequired}
+            >
+              <SelectTrigger>
+                <SelectValue
+                  placeholder={
+                    addressesLoading
+                      ? t('sales.documents.form.address.loading', 'Loading addresses…')
+                      : t('sales.documents.form.address.placeholder', 'Select address')
+                  }
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {addressOptions.map((addr) => {
+                  const optionLabel = addr.summary ? `${addr.label} — ${addr.summary}` : addr.label
+                  return (
+                    <SelectItem key={addr.id} value={addr.id}>{optionLabel}</SelectItem>
+                  )
+                })}
+              </SelectContent>
+            </Select>
+          ) : null}
+
+          <SwitchField
+            label={t('sales.documents.form.shipping.custom', 'Define new address')}
+            flip
+            checked={useCustom}
+            onCheckedChange={(checked) => updateValue('useCustomBilling', checked)}
+            disabled={false}
+          />
+
+          {useCustom ? (
+            <div className="space-y-3">
+              <AddressEditor
+                value={draft}
+                format={addressFormat}
+                t={t}
+                onChange={(next) => updateValue('billingAddressDraft', next)}
+                hidePrimaryToggle
+              />
+              <SwitchField
+                containerClassName="col-span-2"
+                label={t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
+                flip
+                checked={formValues.saveBillingAddress === true}
+                onCheckedChange={(checked) => updateValue('saveBillingAddress', checked)}
+              />
+            </div>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+function CustomerGroupComponent({ values, setValue, t, customers, setCustomers, customerQuerySetter, loadAddresses, loadCustomers, fetchCustomerEmail, resetAddressFormState }: CustomerGroupComponentProps) {
+  const emailValue = typeof values.customerEmail === 'string' ? values.customerEmail : ''
+  const { duplicate, checking } = useEmailDuplicateCheck(emailValue, {
+    disabled: false,
+    debounceMs: 400,
+    matchMode: 'prefix',
+  })
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        <LookupSelect
+          value={typeof values.customerEntityId === 'string' ? values.customerEntityId : null}
+          onChange={(next) => {
+            if (next !== values.customerEntityId) {
+              resetAddressFormState(setValue)
+            }
+            setValue('customerEntityId', next)
+            loadAddresses(next).then((addrs) => {
+              const primary = addrs.find((addr) => addr.isPrimary)
+              if (primary) {
+                setValue('shippingAddressId', primary.id)
+              }
+            }).catch((err) => { console.error('sales.documents.autoSelectAddress', err) })
+            if (next) {
+              const match = customers.find((entry) => entry.id === next)
+              const possibleEmail =
+                typeof match?.primaryEmail === 'string' && match.primaryEmail.length
+                  ? match.primaryEmail
+                  : null
+              if (possibleEmail) {
+                setValue('customerEmail', possibleEmail)
+              } else {
+                fetchCustomerEmail(next, match?.kind)
+                  .then((email) => {
+                    if (email) setValue('customerEmail', email)
+                  })
+                  .catch(() => {})
+              }
+            }
+          }}
+          fetchItems={async (query) => {
+            const options = await loadCustomers(query)
+            return options.map<LookupSelectItem>((opt) => ({
+              id: opt.id,
+              title: opt.label,
+              subtitle: opt.subtitle ?? undefined,
+              icon:
+                opt.kind === 'person' ? (
+                  <UserRound className="h-5 w-5 text-muted-foreground" />
+                ) : (
+                  <Building2 className="h-5 w-5 text-muted-foreground" />
+                ),
+            }))
+          }}
+          actionSlot={
+            <CustomerQuickCreate
+              t={t}
+              onCreated={({ id, email, label, kind, subtitle }) => {
+                // Seed the search box with the new customer's display name so it renders immediately
+                customerQuerySetter.current?.(label)
+                setCustomers((prev) => {
+                  const exists = prev.some((entry) => entry.id === id)
+                  if (exists) return prev
+                  const next: CustomerOption = {
+                    id,
+                    label,
+                    subtitle: subtitle ?? undefined,
+                    kind,
+                    primaryEmail: email ?? null,
+                  }
+                  return [next, ...prev]
+                })
+                setValue('customerEntityId', id)
+                resetAddressFormState(setValue)
+                loadAddresses(id).then((addrs) => {
+                  const primary = addrs.find((addr) => addr.isPrimary)
+                  if (primary) {
+                    setValue('shippingAddressId', primary.id)
+                  }
+                }).catch((err) => { console.error('sales.documents.autoSelectAddress', err) })
+                if (email && !values.customerEmail) {
+                  setValue('customerEmail', email)
+                }
+              }}
+            />
+          }
+          onReady={({ setQuery }) => {
+            customerQuerySetter.current = setQuery
+          }}
+          searchPlaceholder={t('sales.documents.form.customer.placeholder', 'Search customers…')}
+          loadingLabel={t('sales.documents.form.customer.loading', 'Loading customers…')}
+          emptyLabel={t('sales.documents.form.customer.empty', 'No customers found.')}
+          selectedHintLabel={(id) => t('sales.documents.form.customer.selected', 'Selected customer: {{id}}', { id })}
+        />
+      </div>
+      <div className="space-y-2">
+        <EmailInput
+          value={emailValue}
+          onChange={(event) => setValue('customerEmail', event.target.value)}
+          placeholder={t('sales.documents.form.email.placeholder', 'Email used for the document')}
+          spellCheck={false}
+        />
+        {duplicate ? (
+          <div className="flex items-center justify-between rounded border bg-muted px-3 py-2 text-xs text-muted-foreground">
+            <span>
+              {t('customers.people.form.emailDuplicateNotice', undefined, { name: duplicate.displayName })}
+            </span>
+            <Button
+              size="sm"
+              variant="secondary"
+              className="px-4"
+              type="button"
+              disabled={values.customerEntityId === duplicate.id}
+              aria-disabled={values.customerEntityId === duplicate.id}
+              onClick={() => {
+                setValue('customerEntityId', duplicate.id)
+                resetAddressFormState(setValue)
+                loadAddresses(duplicate.id)
+              }}
+            >
+              {values.customerEntityId === duplicate.id
+                ? t('sales.documents.form.email.alreadySelected', 'Selected customer')
+                : t('sales.documents.form.email.selectCustomer', 'Select customer')}
+            </Button>
+          </div>
+        ) : null}
+        {!duplicate && checking ? (
+          <p className="text-xs text-muted-foreground">{t('customers.people.form.emailChecking')}</p>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
 export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind, inboxPreFill }: SalesDocumentFormProps) {
   const t = useT()
   const [customers, setCustomers] = React.useState<CustomerOption[]>([])
@@ -717,74 +1064,6 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
     [],
   )
 
-  function DocumentNumberField({ value, setValue, values }: CrudCustomFieldRenderProps) {
-    const formValues = (values ?? {}) as Partial<SalesDocumentFormValues>
-    const kind: DocumentKind = formValues.documentKind === 'order' ? 'order' : 'quote'
-    const [loading, setLoading] = React.useState(false)
-    const [error, setError] = React.useState<string | null>(null)
-    const autoValueRef = React.useRef<string | null>(null)
-    const lastKindRef = React.useRef<DocumentKind | null>(null)
-
-    const requestNumber = React.useCallback(async () => {
-      setLoading(true)
-      setError(null)
-      try {
-        const call = await apiCall<{ number?: string; error?: string }>('/api/sales/document-numbers', {
-          method: 'POST',
-          headers: { 'content-type': 'application/json' },
-          body: JSON.stringify({ kind }),
-        })
-        const nextNumber = typeof call.result?.number === 'string' ? call.result.number : null
-        if (call.ok && nextNumber) {
-          autoValueRef.current = nextNumber
-          lastKindRef.current = kind
-          setValue(nextNumber)
-        } else {
-          setError(call.result?.error || t('sales.documents.form.errors.numberGenerate', 'Could not generate a document number.'))
-        }
-      } catch (err) {
-        console.error('sales.documents.generateNumber', err)
-        setError(t('sales.documents.form.errors.numberGenerate', 'Could not generate a document number.'))
-      } finally {
-        setLoading(false)
-      }
-    }, [kind, setValue, t])
-
-    React.useEffect(() => {
-      const current = typeof value === 'string' ? value.trim() : ''
-      if (!current.length && !lastKindRef.current) {
-        void requestNumber()
-      } else {
-        lastKindRef.current = kind
-      }
-    }, [kind, requestNumber, value])
-
-    return (
-      <div className="space-y-2">
-        <div className="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-3">
-          <Input
-            value={typeof value === 'string' ? value : ''}
-            onChange={(event) => setValue(event.target.value)}
-            disabled={loading}
-            spellCheck={false}
-            className="w-full md:flex-1"
-          />
-          <Button type="button" variant="outline" onClick={requestNumber} disabled={loading}>
-            {loading
-              ? t('sales.documents.form.numberLoading', 'Generating…')
-              : t('sales.documents.form.numberRefresh', 'Generate')}
-          </Button>
-        </div>
-        <p className="text-xs text-muted-foreground">
-          {kind === 'order'
-            ? t('sales.documents.form.numberHintOrder', 'Format applies to orders and uses the configured counter.')
-            : t('sales.documents.form.numberHintQuote', 'Format applies to quotes and uses the configured counter.')}
-        </p>
-        {error ? <p className="text-xs text-destructive">{error}</p> : null}
-      </div>
-    )
-  }
-
   const fields = React.useMemo<CrudField[]>(() => [
     {
       id: 'documentKind',
@@ -826,7 +1105,7 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
       label: t('sales.documents.form.number', 'Document number'),
       type: 'custom',
       required: true,
-      component: DocumentNumberField,
+      component: (props) => <DocumentNumberField {...props} t={t} />,
     },
     {
       id: 'currencyCode',
@@ -967,130 +1246,7 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
       id: 'billingAddressSection',
       label: '',
       type: 'custom',
-      component: function BillingAddressSectionField({ values, setFormValue }) {
-        const formValues = (values ?? {}) as Partial<SalesDocumentFormValues>
-        const updateValue = setFormValue ?? (() => {})
-        const useCustom = formValues.useCustomBilling === true
-        const selectedId = typeof formValues.billingAddressId === 'string' ? formValues.billingAddressId : ''
-        const draft = (formValues.billingAddressDraft ?? {}) as AddressDraft
-        const customerRequired = !formValues.customerEntityId
-        const sameAsShipping = formValues.sameAsShipping !== false
-        const shippingId = typeof formValues.shippingAddressId === 'string' ? formValues.shippingAddressId : null
-        const shippingDraft = (formValues.shippingAddressDraft ?? {}) as AddressDraft
-        const shippingDraftKey = JSON.stringify(shippingDraft)
-        const billingDraftKey = JSON.stringify(draft)
-        const useCustomShipping = formValues.useCustomShipping === true
-
-        React.useEffect(() => {
-          if (!sameAsShipping) return
-          if ((formValues.billingAddressId ?? null) !== shippingId) {
-            updateValue('billingAddressId', shippingId)
-          }
-          if (useCustomShipping !== (formValues.useCustomBilling === true)) {
-            updateValue('useCustomBilling', useCustomShipping)
-          }
-          if (useCustomShipping && shippingDraftKey !== billingDraftKey) {
-            updateValue('billingAddressDraft', shippingDraft)
-          }
-        }, [
-          billingDraftKey,
-          sameAsShipping,
-          updateValue,
-          shippingDraft,
-          shippingDraftKey,
-          shippingId,
-          useCustomShipping,
-          formValues.billingAddressId,
-          formValues.useCustomBilling,
-        ])
-
-        return (
-          <div className="space-y-3">
-            <div className="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
-              <div>
-                <p className="text-base font-semibold">
-                  {t('sales.documents.form.billing.title', 'Billing address')}
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  {sameAsShipping
-                    ? t('sales.documents.form.address.sameAsShippingHint', 'Billing will mirror the shipping address. Uncheck to edit.')
-                    : t('sales.documents.form.billing.hint', 'Select an address or define a new one.')}
-                </p>
-              </div>
-              <SwitchField
-                label={t('sales.documents.form.address.sameAsShipping', 'Same as shipping')}
-                flip
-                checked={sameAsShipping}
-                onCheckedChange={(checked) => {
-                  updateValue('sameAsShipping', checked)
-                  if (checked) {
-                    updateValue('useCustomBilling', useCustomShipping)
-                    updateValue('billingAddressId', shippingId)
-                    updateValue('billingAddressDraft', shippingDraft)
-                  }
-                }}
-              />
-            </div>
-
-            {!sameAsShipping ? (
-              <>
-                {!useCustom ? (
-                  <Select
-                    value={selectedId || undefined}
-                    onValueChange={(value) => updateValue('billingAddressId', value || null)}
-                    disabled={addressesLoading || customerRequired}
-                  >
-                    <SelectTrigger>
-                      <SelectValue
-                        placeholder={
-                          addressesLoading
-                            ? t('sales.documents.form.address.loading', 'Loading addresses…')
-                            : t('sales.documents.form.address.placeholder', 'Select address')
-                        }
-                      />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {addressOptions.map((addr) => {
-                        const optionLabel = addr.summary ? `${addr.label} — ${addr.summary}` : addr.label
-                        return (
-                          <SelectItem key={addr.id} value={addr.id}>{optionLabel}</SelectItem>
-                        )
-                      })}
-                    </SelectContent>
-                  </Select>
-                ) : null}
-
-                <SwitchField
-                  label={t('sales.documents.form.shipping.custom', 'Define new address')}
-                  flip
-                  checked={useCustom}
-                  onCheckedChange={(checked) => updateValue('useCustomBilling', checked)}
-                  disabled={false}
-                />
-
-                {useCustom ? (
-                  <div className="space-y-3">
-                    <AddressEditor
-                      value={draft}
-                      format={addressFormat}
-                      t={t}
-                      onChange={(next) => updateValue('billingAddressDraft', next)}
-                      hidePrimaryToggle
-                    />
-                    <SwitchField
-                      containerClassName="col-span-2"
-                      label={t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
-                      flip
-                      checked={formValues.saveBillingAddress === true}
-                      onCheckedChange={(checked) => updateValue('saveBillingAddress', checked)}
-                    />
-                  </div>
-                ) : null}
-              </>
-            ) : null}
-          </div>
-        )
-      },
+      component: (props) => <BillingAddressSectionField {...props} t={t} addressesLoading={addressesLoading} addressOptions={addressOptions} addressFormat={addressFormat} />,
     },
     {
       id: 'comments',
@@ -1128,139 +1284,7 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
       title: '',
       column: 1,
       fields: [],
-      component: function CustomerGroupComponent({ values, setValue }) {
-        const emailValue = typeof values.customerEmail === 'string' ? values.customerEmail : ''
-        const { duplicate, checking } = useEmailDuplicateCheck(emailValue, {
-          disabled: false,
-          debounceMs: 400,
-          matchMode: 'prefix',
-        })
-        return (
-          <div className="space-y-4">
-            <div className="space-y-3">
-              <LookupSelect
-                value={typeof values.customerEntityId === 'string' ? values.customerEntityId : null}
-                onChange={(next) => {
-                  if (next !== values.customerEntityId) {
-                    resetAddressFormState(setValue)
-                  }
-                  setValue('customerEntityId', next)
-                  loadAddresses(next).then((addrs) => {
-                    const primary = addrs.find((addr) => addr.isPrimary)
-                    if (primary) {
-                      setValue('shippingAddressId', primary.id)
-                    }
-                  }).catch((err) => { console.error('sales.documents.autoSelectAddress', err) })
-                  if (next) {
-                    const match = customers.find((entry) => entry.id === next)
-                    const possibleEmail =
-                      typeof match?.primaryEmail === 'string' && match.primaryEmail.length
-                        ? match.primaryEmail
-                        : null
-                    if (possibleEmail) {
-                      setValue('customerEmail', possibleEmail)
-                    } else {
-                      fetchCustomerEmail(next, match?.kind)
-                        .then((email) => {
-                          if (email) setValue('customerEmail', email)
-                        })
-                        .catch(() => {})
-                    }
-                  }
-                }}
-                fetchItems={async (query) => {
-                  const options = await loadCustomers(query)
-                  return options.map<LookupSelectItem>((opt) => ({
-                    id: opt.id,
-                    title: opt.label,
-                    subtitle: opt.subtitle ?? undefined,
-                    icon:
-                      opt.kind === 'person' ? (
-                        <UserRound className="h-5 w-5 text-muted-foreground" />
-                      ) : (
-                        <Building2 className="h-5 w-5 text-muted-foreground" />
-                      ),
-                  }))
-                }}
-                actionSlot={
-                  <CustomerQuickCreate
-                    t={t}
-                    onCreated={({ id, email, label, kind, subtitle }) => {
-                      // Seed the search box with the new customer's display name so it renders immediately
-                      customerQuerySetter.current?.(label)
-                      setCustomers((prev) => {
-                        const exists = prev.some((entry) => entry.id === id)
-                        if (exists) return prev
-                        const next: CustomerOption = {
-                          id,
-                          label,
-                          subtitle: subtitle ?? undefined,
-                          kind,
-                          primaryEmail: email ?? null,
-                        }
-                        return [next, ...prev]
-                      })
-                      setValue('customerEntityId', id)
-                      resetAddressFormState(setValue)
-                      loadAddresses(id).then((addrs) => {
-                        const primary = addrs.find((addr) => addr.isPrimary)
-                        if (primary) {
-                          setValue('shippingAddressId', primary.id)
-                        }
-                      }).catch((err) => { console.error('sales.documents.autoSelectAddress', err) })
-                      if (email && !values.customerEmail) {
-                        setValue('customerEmail', email)
-                      }
-                    }}
-                  />
-                }
-                onReady={({ setQuery }) => {
-                  customerQuerySetter.current = setQuery
-                }}
-                searchPlaceholder={t('sales.documents.form.customer.placeholder', 'Search customers…')}
-                loadingLabel={t('sales.documents.form.customer.loading', 'Loading customers…')}
-                emptyLabel={t('sales.documents.form.customer.empty', 'No customers found.')}
-                selectedHintLabel={(id) => t('sales.documents.form.customer.selected', 'Selected customer: {{id}}', { id })}
-              />
-            </div>
-            <div className="space-y-2">
-              <EmailInput
-                value={emailValue}
-                onChange={(event) => setValue('customerEmail', event.target.value)}
-                placeholder={t('sales.documents.form.email.placeholder', 'Email used for the document')}
-                spellCheck={false}
-              />
-              {duplicate ? (
-                <div className="flex items-center justify-between rounded border bg-muted px-3 py-2 text-xs text-muted-foreground">
-                  <span>
-                    {t('customers.people.form.emailDuplicateNotice', undefined, { name: duplicate.displayName })}
-                  </span>
-                  <Button
-                    size="sm"
-                    variant="secondary"
-                    className="px-4"
-                    type="button"
-                    disabled={values.customerEntityId === duplicate.id}
-                    aria-disabled={values.customerEntityId === duplicate.id}
-                    onClick={() => {
-                      setValue('customerEntityId', duplicate.id)
-                      resetAddressFormState(setValue)
-                      loadAddresses(duplicate.id)
-                    }}
-                  >
-                    {values.customerEntityId === duplicate.id
-                      ? t('sales.documents.form.email.alreadySelected', 'Selected customer')
-                      : t('sales.documents.form.email.selectCustomer', 'Select customer')}
-                  </Button>
-                </div>
-              ) : null}
-              {!duplicate && checking ? (
-                <p className="text-xs text-muted-foreground">{t('customers.people.form.emailChecking')}</p>
-              ) : null}
-            </div>
-          </div>
-        )
-      },
+      component: (ctx) => <CustomerGroupComponent {...ctx} t={t} customers={customers} setCustomers={setCustomers} customerQuerySetter={customerQuerySetter} loadAddresses={loadAddresses} loadCustomers={loadCustomers} fetchCustomerEmail={fetchCustomerEmail} resetAddressFormState={resetAddressFormState} />,
     },
     { id: 'channels-comments', title: '', column: 1, fields: ['channelId', 'comments'] },
     { id: 'currency', title: '', column: 2, fields: ['currencyCode'] },