Merge pull request #2620 from graphcommerce-org/feat/signup-form-fieldsets-render-props

feat(magento-customer): forward fieldsets + render props on SignUpForm

Author: paales

.changeset/signup-form-fieldsets-render-props.md

@@ -0,0 +1,12 @@
+---
+'@graphcommerce/magento-customer': minor
+'@graphcommerce/magento-store': patch
+---
+
+`SignUpForm` now accepts `fieldsets` and `render` props (mirroring `CustomerUpdateForm`), so consumers can group dynamic customer attributes into custom labelled sections via `AttributesFormAutoLayout`. Defaults to the existing `[nameFieldset(attributes)]` / `CustomerAttributeField` behaviour, so unchanged for projects that don't supply the props.
+
+This avoids the unstyled, untranslated `Other` fallback header that `AttributesFormAutoLayout` adds whenever attributes don't fit any registered fieldset — projects that extend the customer schema (e.g. with a `club` attribute) can now declare their own fieldset alongside `nameFieldset`.
+
+The fallback header itself in `AttributesFormAutoLayout` is now wrapped in `<Trans>Other</Trans>` so it picks up project translations instead of rendering as a hardcoded English string.
+
+Bug fix in `nameFieldset`: when a store doesn't register `dob`/`gender` on the registration form, the `additional` row was empty and the helper produced `grid-template-areas: "firstname lastname" ""`, which is invalid CSS and made the whole declaration fall back to the default single-column layout — firstname/lastname stacked on separate rows even at md+. Empty rows are now filtered out, so the side-by-side md layout works as intended.

packages/magento-customer/components/CustomerForms/nameFieldset.tsx

@@ -19,13 +19,21 @@ export function nameFieldset(
 
   const additional = extractAttributes(attributes, ['dob', 'gender'])[0].map((f) => f.code)
 
+  // Skip empty rows — an empty `""` row produces invalid `grid-template-areas`
+  // and silently makes the whole declaration fall back to the default
+  // single-column layout. Hit when a store doesn't register `dob`/`gender` on
+  // the registration form, leaving `additional` empty.
+  const rows = [nameFields, additional]
+    .filter((row) => row.length > 0)
+    .map((row) => `"${row.join(' ')}"`)
+
   return {
     label: withLabel ? <Trans>Name</Trans> : undefined,
     gridAreas: [...nameFields, ...additional],
     // xs is shown in one column by default
     sx: {
       gridTemplateAreas: {
-        md: [`"${nameFields.join(' ')}"`, `"${additional.join(' ')}"`].join(' '),
+        md: rows.join(' '),
       },
     },
   }

packages/magento-customer/components/SignUpForm/SignUpForm.tsx

@@ -1,6 +1,10 @@
 import { FormPersist, PasswordRepeatElement, SwitchElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
-import { AttributesFormAutoLayout, StoreConfigDocument } from '@graphcommerce/magento-store'
+import {
+  AttributesFormAutoLayout,
+  StoreConfigDocument,
+  type AttributeFormAutoLayoutProps,
+} from '@graphcommerce/magento-store'
 import { magentoVersion } from '@graphcommerce/next-config/config'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import type { UseFormClearErrors, UseFormSetError } from '@graphcommerce/react-hook-form'
@@ -11,18 +15,24 @@ import { useSignInForm } from '../../hooks/useSignInForm'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
 import { CustomerAttributeField } from '../CustomerForms/CustomerAttributeField'
 import { nameFieldset } from '../CustomerForms/nameFieldset'
-import { useCustomerCreateForm } from '../CustomerForms/useCustomerCreateForm'
+import {
+  useCustomerCreateForm,
+  type CreateCustomerFormValues,
+} from '../CustomerForms/useCustomerCreateForm'
 import { NameFields } from '../NameFields/NameFields'
 import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 
-type SignUpFormProps = {
+export type SignUpFormProps = Pick<
+  AttributeFormAutoLayoutProps<CreateCustomerFormValues, 'CustomerAttributeMetadata'>,
+  'fieldsets' | 'render'
+> & {
   email?: string
   setError: UseFormSetError<{ email?: string; requestedMode?: 'signin' | 'signup' }>
   clearErrors: UseFormClearErrors<{ email?: string; requestedMode?: 'signin' | 'signup' }>
 }
 
 export function SignUpForm(props: SignUpFormProps) {
-  const { email, setError, clearErrors } = props
+  const { email, setError, clearErrors, fieldsets, render } = props
 
   const storeConfig = useQuery(StoreConfigDocument)
 
@@ -109,8 +119,8 @@ export function SignUpForm(props: SignUpFormProps) {
         <AttributesFormAutoLayout
           attributes={attributes}
           control={control}
-          render={CustomerAttributeField}
-          fieldsets={[nameFieldset(attributes)]}
+          render={render ?? CustomerAttributeField}
+          fieldsets={fieldsets ?? [nameFieldset(attributes)]}
         />
       )}
 

packages/magento-store/components/AttributeForm/AttributesFormAutoLayout.tsx

@@ -5,6 +5,7 @@ import {
   type SectionContainerProps,
 } from '@graphcommerce/next-ui'
 import type { Control, FieldValues } from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/react/macro'
 import { Box, type SxProps, type Theme } from '@mui/material'
 import { AttributeFormField, type AttributeFormFieldProps } from './AttributeFormField'
 import type {
@@ -54,7 +55,8 @@ export function AttributesFormAutoLayout<
       .filter(nonNullable),
   }))
 
-  if (itemsRemaining.length > 0) byFieldSet.push({ label: 'Other', attributes: itemsRemaining })
+  if (itemsRemaining.length > 0)
+    byFieldSet.push({ label: <Trans>Other</Trans>, attributes: itemsRemaining })
 
   return byFieldSet.map((fieldSet) => {
     const key = fieldSet.attributes.map((fieldName) => fieldName.gridArea).join('-')