@akinon/pz-theme 2.0.165-beta.0 → 2.0.165

package/src/auth/auth-field-errors.tsx

@@ -56,6 +56,51 @@ export interface AuthFieldValidation {
 
 type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
+/**
+ * Every control a form checks: the named ones, plus the parts of a compound
+ * field.
+ *
+ * A compound field — the day, month and year selects of a birth date — submits
+ * ONE value under one name through a hidden input, and a hidden input is never
+ * validated. So the visible parts carry no name of their own (they would post
+ * three stray keys) and say which field they belong to through
+ * `data-field-name` instead; their `required` is then reported under that
+ * field's name, which is where the field draws its message.
+ */
+const VALIDATED_CONTROLS =
+  'input[name], select[name], textarea[name], [data-field-name]';
+
+/**
+ * The box a control is presented in: its Auth Field or Consent Row when it has
+ * one, so "can the shopper see this question" is asked of the field rather
+ * than of the native control. A brand that draws its own tick or radio hides
+ * the native input and styles a sibling — the question is still on screen —
+ * and a compound field's hidden input is visible exactly when its parts are.
+ */
+export const fieldBoxOf = (control: HTMLElement): HTMLElement =>
+  control.closest<HTMLElement>('[data-auth-field], [data-auth-consent]') ??
+  (control instanceof HTMLInputElement && control.type === 'hidden'
+    ? (control.parentElement ?? control)
+    : control);
+
+/** The name a control's message is filed under. */
+const fieldNameOf = (control: FormControl): string =>
+  control.name || control.dataset.fieldName || '';
+
+/**
+ * The field an `input`/`change` event was about, for the form that clears that
+ * field's message as soon as it is edited. Same rule as the collector: a
+ * compound field's part answers with the field's name.
+ */
+export const eventFieldName = (target: EventTarget | null): string => {
+  const element = target as {
+    name?: string;
+    dataset?: { fieldName?: string };
+  } | null;
+
+  return element?.name || element?.dataset?.fieldName || '';
+};
+
 /**
  * Whether a control is actually on screen for this breakpoint.
  *
@@ -65,7 +110,7 @@ type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
  * scrolled out of view, sized to nothing, or covered by another is still a
  * control the shopper can be sent to.
  */
-const isVisibleControl = (control: FormControl): boolean => {
+export const isVisibleControl = (control: HTMLElement): boolean => {
   if (typeof control.checkVisibility === 'function') {
     return control.checkVisibility();
   }
@@ -98,9 +143,7 @@ export const collectAuthFieldErrors = (
   let firstInvalid: HTMLElement | null = null;
 
   const controls = Array.from(
-    form.querySelectorAll<FormControl>(
-      'input[name], select[name], textarea[name]'
-    )
+    form.querySelectorAll<FormControl>(VALIDATED_CONTROLS)
   );
 
   controls.forEach((control) => {
@@ -116,12 +159,15 @@ export const collectAuthFieldErrors = (
     // `noValidate` had already suppressed the browser's bubble, and the
     // message this function returns was drawn inside the hidden wrapper. A
     // field the shopper cannot see is not one they can be asked to fill in.
-    if (!isVisibleControl(control)) return;
+    if (!isVisibleControl(fieldBoxOf(control))) return;
+
+    // First one wins per name: a radio group, a compound field's parts, or a
+    // name a composition duplicated, is one question to the shopper rather
+    // than several.
+    const name = fieldNameOf(control);
 
-    // First one wins per name: a radio group, or a name a composition
-    // duplicated, is one question to the shopper rather than several.
-    if (!errors[control.name]) {
-      errors[control.name] = control.validity.valueMissing
+    if (!errors[name]) {
+      errors[name] = control.validity.valueMissing
         ? messages.required
         : messages.invalid;
     }
@@ -151,13 +197,13 @@ export const focusFirstAuthFieldError = (
   if (!form || Object.keys(errors).length === 0) return;
 
   const controls = Array.from(
-    form.querySelectorAll<FormControl>(
-      'input[name], select[name], textarea[name]'
-    )
+    form.querySelectorAll<FormControl>(VALIDATED_CONTROLS)
   );
 
   const first = controls.find(
-    (control) => Boolean(errors[control.name]) && isVisibleControl(control)
+    (control) =>
+      Boolean(errors[fieldNameOf(control)]) &&
+      isVisibleControl(fieldBoxOf(control))
   );
 
   first?.focus();

package/src/auth/form-field-defaults.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+
+/**
+ * What a composed form already knows about each of its fields, keyed by the
+ * name the field submits under.
+ *
+ * A sign-up starts empty, so the field blocks were written as empty controls
+ * the form reads back through `FormData`. A form that EDITS a record — the
+ * profile form — has to start from the record instead: the shopper's name in
+ * the name box, their birth date in the date selects, their current answer in
+ * each consent tick. The fields are child blocks at any depth, so the form has
+ * no reference to hand a value to; each field reads its own entry here, the
+ * same way it reads its error message from `auth-field-errors.tsx`.
+ *
+ * `readOnly` names the fields the form shows but cannot change — the profile's
+ * e-mail, which commerce only moves through its own verified flow. Such a
+ * field is drawn disabled, so it is neither submitted nor validated.
+ *
+ * Outside such a form nothing is provided and every field starts empty, which
+ * is exactly what a register or auth form has always drawn.
+ */
+export interface FormFieldDefaultsValue {
+  values: Readonly<Record<string, unknown>>;
+  readOnly: ReadonlyArray<string>;
+}
+
+const NO_DEFAULTS: FormFieldDefaultsValue = { values: {}, readOnly: [] };
+
+const FormFieldDefaultsContext =
+  React.createContext<FormFieldDefaultsValue>(NO_DEFAULTS);
+
+export const FormFieldDefaultsProvider = FormFieldDefaultsContext.Provider;
+
+/** The value a text-like control starts with: '' when the form has none. */
+export const useFormFieldDefault = (name: string): string => {
+  const { values } = React.useContext(FormFieldDefaultsContext);
+  const value = name ? values[name] : undefined;
+
+  if (value === null || value === undefined) return '';
+
+  return String(value);
+};
+
+/**
+ * Whether a tick starts ticked. Only an explicit `true` counts: commerce keeps
+ * `null` for a consent the shopper was never asked about, and drawing that as
+ * ticked would put an agreement in their mouth.
+ */
+export const useFormFieldChecked = (
+  name: string,
+  tickedValue = 'true'
+): boolean => {
+  const { values } = React.useContext(FormFieldDefaultsContext);
+  const stored = name ? values[name] : undefined;
+
+  if (stored === true) return true;
+  // A custom tick that sends its own value (`yes`, `1`) is ticked when that is
+  // what is stored.
+  return (
+    tickedValue !== 'true' &&
+    stored !== undefined &&
+    stored !== null &&
+    String(stored) === tickedValue
+  );
+};
+
+/** Whether the hosting form shows this field without letting it change. */
+export const useFormFieldReadOnly = (name: string): boolean => {
+  const { readOnly } = React.useContext(FormFieldDefaultsContext);
+
+  return Boolean(name) && readOnly.includes(name);
+};

package/src/blocks/auth-consent-block.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { useAuthFieldError } from '../auth/auth-field-errors';
+import { useFormFieldChecked } from '../auth/form-field-defaults';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -27,12 +28,37 @@ import { BlockRendererProps } from './block-renderer-registry';
  * reads out of `FormData` — and an unticked checkbox simply is not in there,
  * which is exactly the "did they agree" question the form asks.
  *
+ * A contact-channel tick (`email`, `sms`, `call`, `whatsapp`) is one channel's
+ * answer under the flag commerce stores for it (`email_allowed` …). A register
+ * form reads it in place of its blanket marketing answer for that channel; a
+ * profile form starts it from the shopper's stored answer and saves it back.
+ *
  * Properties: consentType, text, required, and for a `custom` tick the
  * name it submits and the value it sends when ticked.
  * Parts: consent, checkbox, consent-text, error.
  */
 
-export type AuthConsentType = 'legal' | 'marketing' | 'custom';
+export type AuthContactChannel = 'email' | 'sms' | 'call' | 'whatsapp';
+
+export type AuthConsentType =
+  | 'legal'
+  | 'marketing'
+  | 'custom'
+  | AuthContactChannel;
+
+/**
+ * The contact channels and the profile flag each one is stored under. The same
+ * four flags the register form fans its marketing answer out to.
+ */
+export const AUTH_CONTACT_CHANNEL_FLAGS: Record<AuthContactChannel, string> = {
+  email: 'email_allowed',
+  sms: 'sms_allowed',
+  call: 'call_allowed',
+  whatsapp: 'whatsapp_allowed'
+};
+
+const isContactChannel = (value: string): value is AuthContactChannel =>
+  value in AUTH_CONTACT_CHANNEL_FLAGS;
 
 /**
  * What each tick is called on the wire.
@@ -74,7 +100,13 @@ const DEFAULT_TEXT: Record<AuthConsentType, string> = {
   marketing: 'I would like to receive campaign and marketing messages.',
   // A custom tick is whatever the brand has to ask this month; nothing here
   // could guess its sentence.
-  custom: ''
+  custom: '',
+  // A channel row is usually one of a list under a heading, so its caption
+  // is the channel's name rather than a sentence.
+  email: 'E-mail',
+  sms: 'SMS',
+  call: 'Phone call',
+  whatsapp: 'WhatsApp'
 };
 
 const AuthConsentBlock = ({
@@ -90,7 +122,10 @@ const AuthConsentBlock = ({
     )
   ).trim();
   const consentType: AuthConsentType =
-    rawType === 'marketing' || rawType === 'custom' ? rawType : 'legal';
+    rawType === 'marketing' || rawType === 'custom' || isContactChannel(rawType)
+      ? rawType
+      : 'legal';
+  const isChannel = isContactChannel(consentType);
 
   /**
    * The two known ticks own their names because commerce owns their meaning: the
@@ -109,7 +144,9 @@ const AuthConsentBlock = ({
   const name =
     consentType === 'custom'
       ? customName
-      : AUTH_CONSENT_NAMES[consentType as 'legal' | 'marketing'];
+      : isContactChannel(consentType)
+        ? AUTH_CONTACT_CHANNEL_FLAGS[consentType]
+        : AUTH_CONSENT_NAMES[consentType as 'legal' | 'marketing'];
 
   /**
    * What a ticked custom consent sends. `true` by default because that is what
@@ -117,10 +154,11 @@ const AuthConsentBlock = ({
    * by typing that instead. (The browser's own default for a valueless checkbox
    * is `on`, which is why the value is set explicitly rather than left off.)
    */
-  const tickedValue =
-    String(
-      getResponsiveValue(block.properties?.tickedValue, currentBreakpoint, '')
-    ).trim() || 'true';
+  const tickedValue = isChannel
+    ? 'true'
+    : String(
+        getResponsiveValue(block.properties?.tickedValue, currentBreakpoint, '')
+      ).trim() || 'true';
 
   const text = String(
     getResponsiveValue(
@@ -135,18 +173,30 @@ const AuthConsentBlock = ({
    * because that is what each one IS — but it stays a toggle: a brand whose
    * agreement is not mandatory in its market must be able to say so without
    * swapping the block for another.
+   *
+   * A contact permission is the shopper's choice by definition: a form that
+   * refused to save until it was ticked would be extracting consent, not
+   * asking for it. So a channel tick is never required, whatever the toggle
+   * (which the editor seeds on for every new row) says.
    */
-  const required = readToggle(
-    block.properties?.required,
-    currentBreakpoint,
-    consentType === 'legal'
-  );
+  const required =
+    !isChannel &&
+    readToggle(
+      block.properties?.required,
+      currentBreakpoint,
+      consentType === 'legal'
+    );
 
   // The form puts its own sentence here — "you have to accept the agreement"
   // beats "this field is required" for a legal opt-in — and clears it as soon
   // as the box is ticked.
   const errorMessage = useAuthFieldError(name);
   const insideConsentHost = React.useContext(AuthConsentHostContext);
+  /**
+   * The shopper's stored answer, when the hosting form edits a record (the
+   * Profile Form). Unticked everywhere else, which is what a sign-up asks.
+   */
+  const startsTicked = useFormFieldChecked(name, tickedValue);
 
   // Same refusal as an unnamed custom field: a tick that submits nothing is not
   // a consent, and the canvas has to say what it is waiting for.
@@ -158,8 +208,10 @@ const AuthConsentBlock = ({
 
   // A membership or marketing tick outside the form that reads it would post a
   // string commerce ignores. A CUSTOM tick is the brand's own key, forwarded
-  // verbatim by any composed form, so it belongs wherever the author puts it.
-  if (consentType !== 'custom' && !insideConsentHost) {
+  // verbatim by any composed form, and a channel tick is a flag both the
+  // register and the profile form read by name, so those belong wherever the
+  // author puts them.
+  if (consentType !== 'custom' && !isChannel && !insideConsentHost) {
     if (!isDesigner) return null;
 
     return (
@@ -177,12 +229,19 @@ const AuthConsentBlock = ({
         style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}
       >
         <input
+          // Keyed by name so a tick whose type changes on the canvas (e-mail
+          // → WhatsApp) starts again from ITS stored answer: `defaultChecked`
+          // is only read when the box mounts.
+          key={name}
           type="checkbox"
           name={name}
-          // Only the custom tick carries a value: the two known ones are read
-          // by presence and re-expressed as flags, so a value on them would be
-          // a string the form throws away.
-          value={consentType === 'custom' ? tickedValue : undefined}
+          // Only the custom and channel ticks carry a value: the two known ones
+          // are read by presence and re-expressed as flags, so a value on them
+          // would be a string the form throws away.
+          value={
+            consentType === 'custom' || isChannel ? tickedValue : undefined
+          }
+          defaultChecked={startsTicked || undefined}
           required={required || undefined}
           aria-invalid={errorMessage ? true : undefined}
           {...partAttrs('checkbox')}

package/src/blocks/auth-field-block.tsx

@@ -3,8 +3,13 @@
 import React from 'react';
 import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
 import { useAuthFieldError } from '../auth/auth-field-errors';
+import {
+  useFormFieldDefault,
+  useFormFieldReadOnly
+} from '../auth/form-field-defaults';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
+import BirthDateSelects from './birth-date-selects';
 
 /**
  * One field of an auth form, as a block of its own.
@@ -20,9 +25,17 @@ import { BlockRendererProps } from './block-renderer-registry';
  * form owns those. Standalone (outside any form) it still renders, but
  * nothing collects its value, which the designer sees immediately.
  *
- * Properties: fieldType, label, placeholder, showLabel, required, autoComplete, and for
- * a `gender` field the two option captions (femaleLabel, maleLabel).
- * Parts: field, label, input, error.
+ * Inside a form that edits a record (the Profile Form) the field starts from
+ * the record's value, and a field that form cannot change (the e-mail) is drawn
+ * disabled — see `auth/form-field-defaults.tsx`.
+ *
+ * Properties: fieldType, label, placeholder, showLabel, required, autoComplete;
+ * for a `gender` field the two option captions (femaleLabel, maleLabel) and
+ * choiceControl (select | radio); for a `date_of_birth` field dateControl
+ * (native | selects) and, for the selects, dayPlaceholder, monthPlaceholder,
+ * yearPlaceholder, monthLabels, minAge, maxAge.
+ * Parts: field, label, input, error; `choices`, `choice`, `choice-label` for
+ * gender radios; `date-parts` around the three date selects.
  */
 
 type AuthFieldType =
@@ -74,6 +87,28 @@ const CUSTOM_INPUT_TYPES = [
  */
 const GENDER_VALUES = ['female', 'male'] as const;
 
+/** How the gender answer is asked: a select, or one radio per answer. */
+const CHOICE_CONTROLS = ['select', 'radio'] as const;
+type ChoiceControl = (typeof CHOICE_CONTROLS)[number];
+
+/** How a birth date is asked: the browser's date control, or three selects. */
+const DATE_CONTROLS = ['native', 'selects'] as const;
+type DateControl = (typeof DATE_CONTROLS)[number];
+
+/** Comma-separated month captions → a list; blanks dropped. */
+const readMonthLabels = (raw: string): string[] =>
+  raw
+    .split(',')
+    .map((caption) => caption.trim())
+    .filter(Boolean);
+
+/** A whole number property, or its fallback when it is not one. */
+const readCount = (raw: string, fallback: number): number => {
+  const parsed = Number.parseInt(raw, 10);
+
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+};
+
 /** Input semantics per field: type, autocomplete, default caption. */
 const FIELD_PRESETS: Record<
   AuthFieldType,
@@ -170,10 +205,28 @@ const AuthFieldBlock = ({
    * name; a field standing outside any form simply never has one.
    */
   const errorMessage = useAuthFieldError(controlName);
+  /**
+   * Where the hosting form says this field starts, and whether it may change.
+   * Empty and editable outside a record-editing form, which is every auth form.
+   */
+  const defaultValue = useFormFieldDefault(controlName);
+  const readOnly = useFormFieldReadOnly(controlName);
 
   /** Authorable captions for a fixed pair of stored values. */
   const femaleLabel = prop('femaleLabel', 'Female');
   const maleLabel = prop('maleLabel', 'Male');
+  const choiceControl = resolveOption<ChoiceControl>(
+    block.properties?.choiceControl,
+    currentBreakpoint,
+    'select',
+    CHOICE_CONTROLS as unknown as ChoiceControl[]
+  );
+  const dateControl = resolveOption<DateControl>(
+    block.properties?.dateControl,
+    currentBreakpoint,
+    'native',
+    DATE_CONTROLS as unknown as DateControl[]
+  );
 
   // One declaration for both controls: a select that does not look like the
   // inputs beside it reads as a different form.
@@ -187,7 +240,140 @@ const AuthFieldBlock = ({
     background: 'transparent',
     color: 'inherit',
     padding: '10px 12px',
-    outline: 'none'
+    outline: 'none',
+    // Shown, not editable: dimmed the way the profile form has always drawn
+    // its e-mail, so it does not read as a box the shopper forgot to fill.
+    ...(readOnly ? { opacity: 0.6 } : null)
+  };
+
+  /**
+   * The control itself, per field type. Every variant carries the same
+   * `data-part="input"` on what the shopper types into or picks from, so one
+   * set of input styles in the inspector dresses all of them.
+   */
+  const renderControl = () => {
+    if (fieldType === 'gender' && choiceControl === 'radio') {
+      /**
+       * One radio per stored value, for a design that shows both answers at
+       * once. They share the field's name, so the form reads one answer and
+       * its validation reports one message for the group.
+       */
+      return (
+        <div
+          {...partAttrs('choices')}
+          style={{ display: 'flex', flexWrap: 'wrap', gap: '24px' }}
+        >
+          {GENDER_VALUES.map((value) => (
+            <label
+              key={value}
+              data-auth-field-choice={value}
+              {...partAttrs('choice')}
+              style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}
+            >
+              <input
+                key={`${controlName}-${value}`}
+                type="radio"
+                name={controlName}
+                value={value}
+                defaultChecked={defaultValue === value}
+                required={required}
+                aria-invalid={errorMessage ? true : undefined}
+                disabled={readOnly}
+                {...partAttrs('input', { disabled: readOnly })}
+                style={{ margin: 0 }}
+              />
+              <span {...partAttrs('choice-label')}>
+                {value === 'female' ? femaleLabel : maleLabel}
+              </span>
+            </label>
+          ))}
+        </div>
+      );
+    }
+
+    if (fieldType === 'gender') {
+      /**
+       * A select, because the answer is one of two stored values rather than
+       * free text — and it carries the SAME `data-part="input"` as every other
+       * field's control, so a brand's border, height and focus ring reach it
+       * without a second set of controls in the inspector.
+       *
+       * The empty first option is what makes "not answered" expressible: with
+       * `required` off a shopper may leave it, and with `required` on the form
+       * reports it like any other empty field.
+       */
+      return (
+        <select
+          key={`${controlName}-select`}
+          name={controlName}
+          autoComplete={autoComplete}
+          defaultValue={defaultValue}
+          aria-label={showLabel ? undefined : label}
+          aria-invalid={errorMessage ? true : undefined}
+          required={required}
+          disabled={readOnly}
+          {...partAttrs('input', { disabled: readOnly })}
+          style={controlStyle}
+        >
+          <option value="">{placeholder || label}</option>
+          {GENDER_VALUES.map((value) => (
+            <option key={value} value={value}>
+              {value === 'female' ? femaleLabel : maleLabel}
+            </option>
+          ))}
+        </select>
+      );
+    }
+
+    if (fieldType === 'date_of_birth' && dateControl === 'selects') {
+      return (
+        <BirthDateSelects
+          key={`${controlName}-selects`}
+          name={controlName}
+          defaultValue={defaultValue}
+          required={required}
+          label={label}
+          dayPlaceholder={prop('dayPlaceholder', 'Day')}
+          monthPlaceholder={prop('monthPlaceholder', 'Month')}
+          yearPlaceholder={prop('yearPlaceholder', 'Year')}
+          monthLabels={readMonthLabels(prop('monthLabels', ''))}
+          minAge={readCount(prop('minAge', ''), 0)}
+          maxAge={readCount(prop('maxAge', ''), 100)}
+          invalid={Boolean(errorMessage)}
+          controlStyle={controlStyle}
+          disabled={readOnly}
+        />
+      );
+    }
+
+    return (
+      <input
+        // Uncontrolled controls read their starting value once, on mount; the
+        // keys make a field whose type or name changes on the canvas start
+        // again from the value stored for what it is now.
+        key={`${controlName}-${controlType}`}
+        type={controlType}
+        name={controlName}
+        autoComplete={autoComplete}
+        placeholder={placeholder || undefined}
+        // A date control only takes `YYYY-MM-DD`; commerce may send a time
+        // after it, which would leave the control blank.
+        defaultValue={
+          (controlType === 'date' ? defaultValue.slice(0, 10) : defaultValue) ||
+          undefined
+        }
+        aria-label={showLabel ? undefined : label}
+        aria-invalid={errorMessage ? true : undefined}
+        // `required` stays on the control even though the form runs the check
+        // itself: it IS the check. `noValidate` up on the form suppresses the
+        // browser's bubble, not its `validity` reporting.
+        required={required}
+        readOnly={readOnly}
+        disabled={readOnly}
+        {...partAttrs('input', { disabled: readOnly })}
+        style={controlStyle}
+      />
+    );
   };
 
   // A custom field with no name collects nothing, so a shopper must not be
@@ -201,62 +387,38 @@ const AuthFieldBlock = ({
     );
   }
 
+  /**
+   * A field with several controls — two gender radios, three date selects — is
+   * a group, not a label: a `<label>` names exactly one control, and wrapped
+   * around several it would hand every click on its caption to the first.
+   */
+  const isGroup =
+    (fieldType === 'gender' && choiceControl === 'radio') ||
+    (fieldType === 'date_of_birth' && dateControl === 'selects');
+  const Wrapper = isGroup ? 'div' : 'label';
+
   return (
-    <label
+    <Wrapper
       data-auth-field={controlName}
       // Fills its block wrapper; see the note in auth-step-block.tsx. In a row
       // Group two fields still share the row — a flex item shrinks from 100%.
       className="w-full"
+      {...(isGroup
+        ? {
+            role: fieldType === 'gender' ? 'radiogroup' : 'group',
+            'aria-label': label,
+            ...(fieldType === 'gender' && required
+              ? { 'aria-required': true }
+              : null)
+          }
+        : null)}
       {...partAttrs('field')}
       style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
     >
       {/* Hiding the caption must not cost the input its accessible name, so
           the label text moves onto aria-label instead of disappearing. */}
       {showLabel && <span {...partAttrs('label')}>{label}</span>}
-      {fieldType === 'gender' ? (
-        /**
-         * A select, because the answer is one of two stored values rather than
-         * free text — and it carries the SAME `data-part="input"` as every other
-         * field's control, so a brand's border, height and focus ring reach it
-         * without a second set of controls in the inspector.
-         *
-         * The empty first option is what makes "not answered" expressible: with
-         * `required` off a shopper may leave it, and with `required` on the form
-         * reports it like any other empty field.
-         */
-        <select
-          name={controlName}
-          autoComplete={autoComplete}
-          defaultValue=""
-          aria-label={showLabel ? undefined : label}
-          aria-invalid={errorMessage ? true : undefined}
-          required={required}
-          {...partAttrs('input')}
-          style={controlStyle}
-        >
-          <option value="">{placeholder || label}</option>
-          {GENDER_VALUES.map((value) => (
-            <option key={value} value={value}>
-              {value === 'female' ? femaleLabel : maleLabel}
-            </option>
-          ))}
-        </select>
-      ) : (
-        <input
-          type={controlType}
-          name={controlName}
-          autoComplete={autoComplete}
-          placeholder={placeholder || undefined}
-          aria-label={showLabel ? undefined : label}
-          aria-invalid={errorMessage ? true : undefined}
-          // `required` stays on the control even though the form runs the check
-          // itself: it IS the check. `noValidate` up on the form suppresses the
-          // browser's bubble, not its `validity` reporting.
-          required={required}
-          {...partAttrs('input')}
-          style={controlStyle}
-        />
-      )}
+      {renderControl()}
       {/* Under the field and in the flow, so the layout makes room for it
           instead of the message floating over the next control — which is the
           half of the native bubble no brand ever wanted. */}
@@ -273,7 +435,7 @@ const AuthFieldBlock = ({
           {errorMessage}
         </span>
       )}
-    </label>
+    </Wrapper>
   );
 };