@open-mercato/core 0.8.1-develop.7297.1.67605e74f9 → 0.9.0

package/src/modules/customer_groups/backend/customer-groups/[id]/edit/page.tsx

@@ -0,0 +1,392 @@
+"use client"
+
+import * as React from 'react'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { updateCrud, deleteCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { ErrorMessage, RecordNotFoundState } from '@open-mercato/ui/backend/detail'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { hasFeature } from '@open-mercato/shared/security/features'
+import { useBackendChrome } from '@open-mercato/ui/backend/BackendChromeProvider'
+import { E } from '#generated/entities.ids.generated'
+import { customerGroupKindValues } from '../../../../data/validators'
+import {
+  findDefaultConflict,
+  mapListItemsToSummaries,
+  mapListItemToSummary,
+  type CustomerGroupSummary,
+} from '../../../../components/customerGroupTree'
+import { CustomerGroupParentField } from '../../../../components/CustomerGroupParentField'
+import { CustomerGroupDefaultField } from '../../../../components/CustomerGroupDefaultField'
+import {
+  CustomerGroupTermsSection,
+  type CustomerGroupTermsDTO,
+} from '../../../../components/CustomerGroupTermsSection'
+
+const GROUPS_MANAGE_FEATURE = 'customer_groups.groups.manage'
+const TERMS_MANAGE_FEATURE = 'customer_groups.terms.manage'
+
+type CustomerGroupListResponse = {
+  items?: unknown[]
+}
+
+type CustomerGroupTermsResponse = {
+  terms?: CustomerGroupTermsDTO | null
+}
+
+type CustomerGroupFormValues = {
+  id?: string
+  code: string
+  name: string
+  description?: string
+  kind: string
+  parentId?: string | null
+  priority?: number
+  isDefault?: boolean
+  isActive?: boolean
+  updatedAt?: string | null
+}
+
+// An adopted orphan group carries a negative priority; it must round-trip unchanged,
+// so a numeric string from the list API is parsed rather than collapsed to 0.
+function readPriority(raw: unknown): number {
+  if (typeof raw === 'number' && Number.isFinite(raw)) return raw
+  if (typeof raw === 'string' && raw.trim().length) {
+    const parsed = Number(raw)
+    if (Number.isFinite(parsed)) return parsed
+  }
+  return 0
+}
+
+async function submitCustomerGroupUpdate(
+  groupId: string,
+  values: CustomerGroupFormValues,
+  t: (key: string, fallback?: string) => string,
+) {
+  const resolvedId = typeof values.id === 'string' && values.id.length ? values.id : groupId
+  if (!resolvedId) {
+    const message = t('customer_groups.groups.form.errors.idRequired', 'Customer group identifier is required.')
+    throw createCrudFormError(message, { id: message })
+  }
+  const code = typeof values.code === 'string' ? values.code.trim() : ''
+  if (!code) {
+    const message = t('customer_groups.groups.form.errors.code', 'Provide a group code.')
+    throw createCrudFormError(message, { code: message })
+  }
+  const name = typeof values.name === 'string' ? values.name.trim() : ''
+  if (!name) {
+    const message = t('customer_groups.groups.form.errors.name', 'Provide the group name.')
+    throw createCrudFormError(message, { name: message })
+  }
+  const description =
+    typeof values.description === 'string' && values.description.trim().length
+      ? values.description.trim()
+      : null
+  const priority = typeof values.priority === 'number' && Number.isFinite(values.priority) ? values.priority : 0
+  const payload: Record<string, unknown> = {
+    id: resolvedId,
+    code,
+    name,
+    description,
+    kind: values.kind,
+    parentId: values.parentId ?? null,
+    priority,
+    isDefault: values.isDefault === true,
+    isActive: values.isActive !== false,
+  }
+  await updateCrud('customer_groups/customer-groups', payload)
+}
+
+export default function EditCustomerGroupPage({ params }: { params?: { id?: string } }) {
+  const groupId = params?.id ?? ''
+  const t = useT()
+  const { payload: backendChromePayload, isReady: backendChromeReady } = useBackendChrome()
+  // The page is reachable with `groups.view`; without `groups.manage` it renders read-only
+  // so view-only staff can still see the group and its commercial terms.
+  const canManageGroup = backendChromeReady && hasFeature(backendChromePayload?.grantedFeatures, GROUPS_MANAGE_FEATURE)
+  const canManageTerms = backendChromeReady && hasFeature(backendChromePayload?.grantedFeatures, TERMS_MANAGE_FEATURE)
+  const [initialValues, setInitialValues] = React.useState<CustomerGroupFormValues | null>(null)
+  const [defaultGroups, setDefaultGroups] = React.useState<CustomerGroupSummary[]>([])
+  const [loading, setLoading] = React.useState<boolean>(true)
+  const [error, setError] = React.useState<string | null>(null)
+  const [isNotFound, setIsNotFound] = React.useState<boolean>(false)
+  // `undefined` = not fetched yet, `null` = confirmed no terms row for this group.
+  const [terms, setTerms] = React.useState<CustomerGroupTermsDTO | null | undefined>(undefined)
+  // A failed terms GET must never read as "no terms": saving from the empty state
+  // would then skip the optimistic-lock header and overwrite the existing row.
+  const [termsAccess, setTermsAccess] = React.useState<'ok' | 'forbidden' | 'error'>('ok')
+
+  React.useEffect(() => {
+    if (!groupId) return
+    let cancelled = false
+    async function load() {
+      setLoading(true)
+      setError(null)
+      setIsNotFound(false)
+      try {
+        const [recordCall, defaultsCall, termsCall] = await Promise.all([
+          apiCall<CustomerGroupListResponse>(`/api/customer_groups/customer-groups?id=${encodeURIComponent(groupId)}`),
+          apiCall<CustomerGroupListResponse>('/api/customer_groups/customer-groups?isDefault=true&pageSize=2'),
+          apiCall<CustomerGroupTermsResponse>(`/api/customer_groups/customer-groups/${encodeURIComponent(groupId)}/terms`),
+        ])
+        if (!recordCall.ok) {
+          if (recordCall.status === 404) {
+            if (!cancelled) setIsNotFound(true)
+            return
+          }
+          throw new Error(t('customer_groups.groups.form.errors.load', 'Failed to load customer group'))
+        }
+        const items = Array.isArray(recordCall.result?.items) ? recordCall.result.items : []
+        const summary = mapListItemToSummary(items[0])
+        if (!summary) {
+          if (!cancelled) setIsNotFound(true)
+          return
+        }
+        const record = items[0] as Record<string, unknown>
+        if (cancelled) return
+        setInitialValues({
+          id: summary.id,
+          code: summary.code,
+          name: summary.name,
+          description: typeof record.description === 'string' ? record.description : '',
+          kind: typeof record.kind === 'string' ? record.kind : 'b2c',
+          parentId: summary.parentId ?? '',
+          priority: readPriority(record.priority),
+          isDefault: summary.isDefault,
+          isActive: record.isActive === true || record.is_active === true,
+          updatedAt: (record.updatedAt as string | undefined) ?? (record.updated_at as string | undefined) ?? null,
+        })
+        if (defaultsCall.ok) {
+          setDefaultGroups(mapListItemsToSummaries(defaultsCall.result?.items))
+        }
+        if (termsCall.ok) {
+          setTermsAccess('ok')
+          setTerms(termsCall.result?.terms ?? null)
+        } else {
+          setTermsAccess(termsCall.status === 403 ? 'forbidden' : 'error')
+          setTerms(undefined)
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const fallback = t('customer_groups.groups.form.errors.load', 'Failed to load customer group')
+          const message = err instanceof Error ? err.message : fallback
+          setError(message)
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    load()
+    return () => {
+      cancelled = true
+    }
+  }, [groupId, t])
+
+  const fields = React.useMemo<CrudField[]>(
+    () => [
+      {
+        id: 'code',
+        label: t('customer_groups.groups.form.field.code', 'Code'),
+        type: 'text',
+        required: true,
+        placeholder: t('customer_groups.groups.form.field.codePlaceholder', 'e.g., wholesale-partners'),
+        description: t(
+          'customer_groups.groups.form.field.codeHelp',
+          'Lowercase letters, numbers, dashes, or underscores only.',
+        ),
+      },
+      {
+        id: 'name',
+        label: t('customer_groups.groups.form.field.name', 'Name'),
+        type: 'text',
+        required: true,
+        placeholder: t('customer_groups.groups.form.field.namePlaceholder', 'e.g., Wholesale Partners'),
+      },
+      {
+        id: 'description',
+        label: t('customer_groups.groups.form.field.description', 'Description'),
+        type: 'textarea',
+      },
+      {
+        id: 'kind',
+        label: t('customer_groups.groups.form.field.kind', 'Kind'),
+        type: 'select',
+        required: true,
+        options: customerGroupKindValues.map((value) => ({
+          value,
+          label: t(`customer_groups.groups.form.field.kindOptions.${value}`, value),
+        })),
+      },
+      {
+        id: 'parentId',
+        label: t('customer_groups.groups.form.field.parent', 'Parent group'),
+        type: 'custom',
+        component: ({ value, setValue, disabled }) => (
+          <CustomerGroupParentField
+            value={value}
+            setValue={setValue}
+            disabled={disabled}
+            excludeId={groupId}
+          />
+        ),
+      },
+      {
+        id: 'priority',
+        label: t('customer_groups.groups.form.field.priority', 'Priority'),
+        type: 'number',
+        required: true,
+        description: t(
+          'customer_groups.groups.form.field.priorityHelp',
+          'Whole number, unique per tenant. When a customer belongs to several groups, the group with the higher number wins when resolving pricing and terms. The group list shows the lowest number first.',
+        ),
+      },
+      {
+        id: 'isDefault',
+        label: '',
+        type: 'custom',
+        component: ({ value, setValue, disabled }) => (
+          <CustomerGroupDefaultField
+            value={value}
+            setValue={setValue}
+            disabled={disabled}
+            conflictGroupName={findDefaultConflict(defaultGroups, groupId)?.name ?? null}
+          />
+        ),
+      },
+      {
+        id: 'isActive',
+        label: t('customer_groups.groups.form.field.isActive', 'Active'),
+        type: 'checkbox',
+      },
+    ],
+    [t, defaultGroups, groupId],
+  )
+
+  const groupConfig = React.useMemo<CrudFormGroup[]>(
+    () => [
+      {
+        id: 'details',
+        title: t('customer_groups.groups.form.group.details', 'Details'),
+        column: 1,
+        fields: ['code', 'name', 'description', 'kind'],
+      },
+      {
+        id: 'hierarchy',
+        title: t('customer_groups.groups.form.group.hierarchy', 'Hierarchy'),
+        column: 1,
+        fields: ['parentId', 'priority'],
+      },
+      {
+        id: 'status',
+        title: t('customer_groups.groups.form.group.status', 'Status'),
+        column: 2,
+        fields: ['isDefault', 'isActive'],
+      },
+    ],
+    [t],
+  )
+
+  if (!groupId) {
+    return (
+      <Page>
+        <PageBody>
+          <ErrorMessage
+            label={t('customer_groups.groups.form.errors.idRequired', 'Customer group identifier is required.')}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  if (isNotFound) {
+    return (
+      <Page>
+        <PageBody>
+          <RecordNotFoundState
+            label={t('customer_groups.groups.form.errors.notFound', 'Customer group not found')}
+            backHref="/backend/customer-groups"
+            backLabel={t('customer_groups.groups.form.actions.backToList', 'Back to customer groups')}
+          />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  if (error && !loading) {
+    return (
+      <Page>
+        <PageBody>
+          <ErrorMessage label={error} />
+        </PageBody>
+      </Page>
+    )
+  }
+
+  return (
+    <Page>
+      <PageBody>
+        <CrudForm<CustomerGroupFormValues>
+          title={t('customer_groups.groups.form.editTitle', 'Edit customer group')}
+          titleHeadingLevel={1}
+          backHref="/backend/customer-groups"
+          fields={fields}
+          groups={groupConfig}
+          entityId={E.customer_groups.customer_group}
+          initialValues={
+            initialValues ?? {
+              id: groupId,
+              code: '',
+              name: '',
+              description: '',
+              kind: 'b2c',
+              parentId: '',
+              priority: 0,
+              isDefault: false,
+              isActive: true,
+            }
+          }
+          optimisticLockUpdatedAt={initialValues?.updatedAt}
+          readOnly={!canManageGroup}
+          readOnlyOverlay={(
+            <div className="rounded-xl border border-border/70 bg-background/95 px-4 py-3 text-sm text-muted-foreground shadow-sm">
+              {t(
+                'customer_groups.groups.form.readOnly',
+                'This group is view-only. You do not have permission to change it.',
+              )}
+            </div>
+          )}
+          isLoading={loading}
+          loadingMessage={t('customer_groups.groups.form.loading', 'Loading customer group...')}
+          submitLabel={t('customer_groups.groups.form.action.save', 'Save')}
+          cancelHref="/backend/customer-groups"
+          successRedirect={`/backend/customer-groups?flash=${encodeURIComponent(t('customer_groups.groups.flash.updated', 'Customer group updated'))}&type=success`}
+          onSubmit={async (values) => {
+            await submitCustomerGroupUpdate(groupId, values, t)
+          }}
+          onDelete={async () => {
+            await deleteCrud('customer_groups/customer-groups', groupId, {
+              errorMessage: t('customer_groups.groups.form.errors.delete', 'Failed to delete customer group'),
+            })
+          }}
+          deleteRedirect={`/backend/customer-groups?flash=${encodeURIComponent(t('customer_groups.groups.flash.deleted', 'Customer group deleted'))}&type=success`}
+        />
+        {termsAccess === 'forbidden' ? null : (
+          <CustomerGroupTermsSection
+            groupId={groupId}
+            terms={terms}
+            loading={loading}
+            loadError={
+              termsAccess === 'error'
+                ? t('customer_groups.groups.form.terms.errors.load', 'Failed to load commercial terms.')
+                : null
+            }
+            canManage={canManageTerms}
+            onSaved={setTerms}
+          />
+        )}
+      </PageBody>
+    </Page>
+  )
+}

package/src/modules/customer_groups/backend/customer-groups/create/page.meta.ts

@@ -0,0 +1,25 @@
+import React from 'react'
+
+const createIcon = React.createElement(
+  'svg',
+  { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },
+  React.createElement('path', { d: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2' }),
+  React.createElement('circle', { cx: 9, cy: 7, r: 4 }),
+  React.createElement('path', { d: 'M23 21v-2a4 4 0 0 0-3-3.87' }),
+  React.createElement('path', { d: 'M16 3.13a4 4 0 0 1 0 7.75' }),
+)
+
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['customer_groups.groups.manage'],
+  pageTitle: 'Create Customer Group',
+  pageTitleKey: 'customer_groups.groups.form.createTitle',
+  pageGroup: 'Customers',
+  pageGroupKey: 'customers.nav.group',
+  navHidden: true,
+  icon: createIcon,
+  breadcrumb: [
+    { label: 'Customer Groups', labelKey: 'customer_groups.groups.page.title', href: '/backend/customer-groups' },
+    { label: 'Create', labelKey: 'common.create' },
+  ],
+}

package/src/modules/customer_groups/backend/customer-groups/create/page.tsx

@@ -0,0 +1,279 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { createCrud } from '@open-mercato/ui/backend/utils/crud'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
+import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { E } from '#generated/entities.ids.generated'
+import { customerGroupKindValues } from '../../../data/validators'
+import {
+  findDefaultConflict,
+  mapListItemsToSummaries,
+  nextFreePriority,
+  type CustomerGroupSummary,
+} from '../../../components/customerGroupTree'
+import { CustomerGroupParentField } from '../../../components/CustomerGroupParentField'
+import { CustomerGroupDefaultField } from '../../../components/CustomerGroupDefaultField'
+
+type CustomerGroupFormValues = {
+  code: string
+  name: string
+  description?: string
+  kind: string
+  parentId?: string | null
+  priority?: number
+  isDefault?: boolean
+  isActive?: boolean
+}
+
+async function loadDefaultGroups(errorMessage: string): Promise<CustomerGroupSummary[]> {
+  const response = await readApiResultOrThrow<{ items?: unknown[] }>(
+    '/api/customer_groups/customer-groups?isDefault=true&pageSize=1',
+    undefined,
+    { errorMessage, allowNullResult: true },
+  )
+  return mapListItemsToSummaries(response?.items)
+}
+
+async function loadNextFreePriority(errorMessage: string): Promise<number> {
+  const response = await readApiResultOrThrow<{ items?: unknown[] }>(
+    '/api/customer_groups/customer-groups?sortField=priority&sortDir=desc&pageSize=1',
+    undefined,
+    { errorMessage, allowNullResult: true },
+  )
+  return nextFreePriority(response?.items)
+}
+
+async function submitCustomerGroupCreate(
+  values: CustomerGroupFormValues,
+  t: (key: string, fallback?: string) => string,
+) {
+  const code = typeof values.code === 'string' ? values.code.trim() : ''
+  if (!code) {
+    const message = t('customer_groups.groups.form.errors.code', 'Provide a group code.')
+    throw createCrudFormError(message, { code: message })
+  }
+  const name = typeof values.name === 'string' ? values.name.trim() : ''
+  if (!name) {
+    const message = t('customer_groups.groups.form.errors.name', 'Provide the group name.')
+    throw createCrudFormError(message, { name: message })
+  }
+  const description =
+    typeof values.description === 'string' && values.description.trim().length
+      ? values.description.trim()
+      : undefined
+  const priority = typeof values.priority === 'number' && Number.isFinite(values.priority) ? values.priority : 0
+  const payload: Record<string, unknown> = {
+    code,
+    name,
+    description,
+    kind: values.kind,
+    parentId: values.parentId ?? null,
+    priority,
+    isDefault: values.isDefault === true,
+    isActive: values.isActive !== false,
+  }
+  const { result } = await createCrud<{ id?: string | null; isDefault?: boolean }>(
+    'customer_groups/customer-groups',
+    payload,
+  )
+  if (payload.isDefault === true && result?.isDefault === false) {
+    flash(
+      t(
+        'customer_groups.groups.flash.defaultNotApplied',
+        'The group was created, but another group was made the default at the same time. Edit the group to make it the default.',
+      ),
+      'warning',
+    )
+    return
+  }
+  flash(t('customer_groups.groups.flash.created', 'Customer group created'), 'success')
+}
+
+export default function CreateCustomerGroupPage() {
+  const t = useT()
+  const router = useRouter()
+  const [defaultGroups, setDefaultGroups] = React.useState<CustomerGroupSummary[]>([])
+  const [defaultGroupsLoading, setDefaultGroupsLoading] = React.useState<boolean>(true)
+  const [initialPriority, setInitialPriority] = React.useState<number | null>(null)
+
+  React.useEffect(() => {
+    let cancelled = false
+    const errorMessage = t('customer_groups.groups.form.errors.loadGroups', 'Failed to load customer groups')
+    loadNextFreePriority(errorMessage)
+      .then((priority) => {
+        if (!cancelled) setInitialPriority(priority)
+      })
+      .catch(() => {
+        if (!cancelled) setInitialPriority(0)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [t])
+
+  React.useEffect(() => {
+    let cancelled = false
+    const errorMessage = t('customer_groups.groups.form.errors.loadGroups', 'Failed to load customer groups')
+    setDefaultGroupsLoading(true)
+    loadDefaultGroups(errorMessage)
+      .then((items) => {
+        if (!cancelled) setDefaultGroups(items)
+      })
+      .catch(() => {
+        if (!cancelled) setDefaultGroups([])
+      })
+      .finally(() => {
+        if (!cancelled) setDefaultGroupsLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [t])
+
+  const fields = React.useMemo<CrudField[]>(
+    () => [
+      {
+        id: 'code',
+        label: t('customer_groups.groups.form.field.code', 'Code'),
+        type: 'text',
+        required: true,
+        placeholder: t('customer_groups.groups.form.field.codePlaceholder', 'e.g., wholesale-partners'),
+        description: t(
+          'customer_groups.groups.form.field.codeHelp',
+          'Lowercase letters, numbers, dashes, or underscores only.',
+        ),
+      },
+      {
+        id: 'name',
+        label: t('customer_groups.groups.form.field.name', 'Name'),
+        type: 'text',
+        required: true,
+        placeholder: t('customer_groups.groups.form.field.namePlaceholder', 'e.g., Wholesale Partners'),
+      },
+      {
+        id: 'description',
+        label: t('customer_groups.groups.form.field.description', 'Description'),
+        type: 'textarea',
+      },
+      {
+        id: 'kind',
+        label: t('customer_groups.groups.form.field.kind', 'Kind'),
+        type: 'select',
+        required: true,
+        options: customerGroupKindValues.map((value) => ({
+          value,
+          label: t(`customer_groups.groups.form.field.kindOptions.${value}`, value),
+        })),
+      },
+      {
+        id: 'parentId',
+        label: t('customer_groups.groups.form.field.parent', 'Parent group'),
+        type: 'custom',
+        component: ({ value, setValue, disabled }) => (
+          <CustomerGroupParentField
+            value={value}
+            setValue={setValue}
+            disabled={disabled}
+          />
+        ),
+      },
+      {
+        id: 'priority',
+        label: t('customer_groups.groups.form.field.priority', 'Priority'),
+        type: 'number',
+        required: true,
+        description: t(
+          'customer_groups.groups.form.field.priorityHelp',
+          'Whole number, unique per tenant. When a customer belongs to several groups, the group with the higher number wins when resolving pricing and terms. The group list shows the lowest number first.',
+        ),
+      },
+      {
+        id: 'isDefault',
+        label: '',
+        type: 'custom',
+        component: ({ value, setValue, disabled }) => (
+          <CustomerGroupDefaultField
+            value={value}
+            setValue={setValue}
+            disabled={disabled}
+            conflictGroupName={findDefaultConflict(defaultGroups)?.name ?? null}
+            isLoading={defaultGroupsLoading}
+          />
+        ),
+      },
+      {
+        id: 'isActive',
+        label: t('customer_groups.groups.form.field.isActive', 'Active'),
+        type: 'checkbox',
+      },
+    ],
+    [t, defaultGroups, defaultGroupsLoading],
+  )
+
+  const groupConfig = React.useMemo<CrudFormGroup[]>(
+    () => [
+      {
+        id: 'details',
+        title: t('customer_groups.groups.form.group.details', 'Details'),
+        column: 1,
+        fields: ['code', 'name', 'description', 'kind'],
+      },
+      {
+        id: 'hierarchy',
+        title: t('customer_groups.groups.form.group.hierarchy', 'Hierarchy'),
+        column: 1,
+        fields: ['parentId', 'priority'],
+      },
+      {
+        id: 'status',
+        title: t('customer_groups.groups.form.group.status', 'Status'),
+        column: 2,
+        fields: ['isDefault', 'isActive'],
+      },
+    ],
+    [t],
+  )
+
+  const initialValues = React.useMemo<Partial<CustomerGroupFormValues>>(
+    () => ({
+      code: '',
+      name: '',
+      description: '',
+      kind: 'b2c',
+      parentId: '',
+      priority: initialPriority ?? 0,
+      isDefault: false,
+      isActive: true,
+    }),
+    [initialPriority],
+  )
+
+  return (
+    <Page>
+      <PageBody>
+        <CrudForm<CustomerGroupFormValues>
+          title={t('customer_groups.groups.form.createTitle', 'Create customer group')}
+          titleHeadingLevel={1}
+          backHref="/backend/customer-groups"
+          fields={fields}
+          groups={groupConfig}
+          entityId={E.customer_groups.customer_group}
+          initialValues={initialValues}
+          isLoading={initialPriority === null}
+          submitLabel={t('customer_groups.groups.form.action.create', 'Create')}
+          cancelHref="/backend/customer-groups"
+          onSubmit={async (values) => {
+            await submitCustomerGroupCreate(values, t)
+            router.push('/backend/customer-groups')
+          }}
+        />
+      </PageBody>
+    </Page>
+  )
+}