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

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>
   );
 };
 

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

@@ -11,6 +11,7 @@ import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
+  eventFieldName,
   collectAuthFieldErrors,
   focusFirstAuthFieldError
 } from '../auth/auth-field-errors';
@@ -413,11 +414,9 @@ const AuthFormBlock = ({
     );
 
   const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
-    const target = event.target as { name?: string } | null;
+    const name = eventFieldName(event.target);
 
-    setFieldErrors((current) =>
-      clearAuthFieldError(current, target?.name || '')
-    );
+    setFieldErrors((current) => clearAuthFieldError(current, name));
   };
 
   const submit = async (event: React.FormEvent<HTMLFormElement>) => {

package/src/blocks/birth-date-selects.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import React, { useState } from 'react';
+import { partAttrs } from '../utils';
+
+/**
+ * A birth date asked as three selects — day, month, year — instead of the
+ * browser's date control.
+ *
+ * The native control is the right default (its value is already the
+ * `YYYY-MM-DD` commerce stores, and it follows the shopper's locale), but it
+ * cannot be dressed: its popup, its separators and its empty "gg.aa.yyyy" mask
+ * belong to the browser. A design that draws "Gün / Ay / Yıl" as three boxes
+ * of the brand's own select styling had no way to get there.
+ *
+ * The three selects carry no `name` — they would post three stray keys — and
+ * one hidden input submits the composed date under the field's name, so the
+ * hosting form reads exactly what it read from the native control. Each select
+ * says which field it belongs to through `data-field-name`, which is how the
+ * form's validation files a missing part under that field.
+ */
+
+export interface BirthDateSelectsProps {
+  /** The name the composed `YYYY-MM-DD` value submits under. */
+  name: string;
+  /** A stored date to start from; anything that is not `YYYY-MM-DD…` is none. */
+  defaultValue: string;
+  required: boolean;
+  /** The field's caption, prefixed to each select's accessible name. */
+  label: string;
+  dayPlaceholder: string;
+  monthPlaceholder: string;
+  yearPlaceholder: string;
+  /**
+   * Twelve captions for the month select, January first. Anything shorter is
+   * ignored and the months are numbered instead (01–12), which reads right in
+   * every language.
+   */
+  monthLabels: string[];
+  /** The youngest age offered: the latest year is this many years ago. */
+  minAge: number;
+  /** The oldest age offered: the earliest year is this many years ago. */
+  maxAge: number;
+  invalid: boolean;
+  controlStyle: React.CSSProperties;
+  disabled?: boolean;
+}
+
+const pad = (value: string) => value.padStart(2, '0');
+
+/** Days in a month (1–12); 31 until the month is known, 29 for February until the year is. */
+export const daysInMonth = (year: string, month: string): number => {
+  if (!month) return 31;
+
+  // Day 0 of the next month is the last day of this one; a leap year stands in
+  // until a year is picked, so 29 February stays choosable.
+  return new Date(Number(year) || 2000, Number(month), 0).getDate();
+};
+
+/** `YYYY-MM-DD` → its parts as the selects hold them (no zero padding). */
+export const splitIsoDate = (
+  value: string
+): { day: string; month: string; year: string } => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value || '');
+
+  if (!match) return { day: '', month: '', year: '' };
+
+  return {
+    year: match[1],
+    month: String(Number(match[2])),
+    day: String(Number(match[3]))
+  };
+};
+
+/** The parts → `YYYY-MM-DD`, or '' while any part is missing. */
+export const joinIsoDate = (day: string, month: string, year: string) =>
+  day && month && year ? `${year}-${pad(month)}-${pad(day)}` : '';
+
+const BirthDateSelects = ({
+  name,
+  defaultValue,
+  required,
+  label,
+  dayPlaceholder,
+  monthPlaceholder,
+  yearPlaceholder,
+  monthLabels,
+  minAge,
+  maxAge,
+  invalid,
+  controlStyle,
+  disabled = false
+}: BirthDateSelectsProps) => {
+  const [parts, setParts] = useState(() => splitIsoDate(defaultValue));
+
+  const latestYear = new Date().getFullYear() - Math.max(0, minAge);
+  const earliestYear =
+    new Date().getFullYear() - Math.max(Math.max(0, minAge), maxAge);
+  const years: string[] = [];
+
+  for (let year = latestYear; year >= earliestYear; year -= 1) {
+    years.push(String(year));
+  }
+
+  // A stored year outside the offered range is still the shopper's answer; it
+  // stays selectable rather than being silently dropped on the next save.
+  if (parts.year && !years.includes(parts.year)) {
+    years.push(parts.year);
+    years.sort((a, b) => Number(b) - Number(a));
+  }
+
+  const dayCount = daysInMonth(parts.year, parts.month);
+  const months =
+    monthLabels.length >= 12
+      ? monthLabels.slice(0, 12)
+      : Array.from({ length: 12 }, (_, index) => pad(String(index + 1)));
+
+  const update =
+    (key: 'day' | 'month' | 'year') =>
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const nextValue = event.target.value;
+
+      setParts((current) => {
+        const next = { ...current, [key]: nextValue };
+
+        // 31 April does not exist; a day the new month cannot hold is cleared
+        // rather than rolled into the next month.
+        if (Number(next.day) > daysInMonth(next.year, next.month)) {
+          next.day = '';
+        }
+
+        return next;
+      });
+    };
+
+  // A half-answered date is not a date: once any part is picked, the others
+  // are asked for too, even on an optional field.
+  const partRequired =
+    required || Boolean(parts.day || parts.month || parts.year);
+
+  const select = (
+    key: 'day' | 'month' | 'year',
+    placeholder: string,
+    options: { value: string; caption: string }[]
+  ) => (
+    <select
+      data-field-name={name}
+      data-date-part={key}
+      value={parts[key]}
+      onChange={update(key)}
+      required={partRequired}
+      disabled={disabled}
+      aria-label={`${label} ${placeholder}`.trim()}
+      aria-invalid={invalid ? true : undefined}
+      autoComplete={`bday-${key}`}
+      {...partAttrs('input', { disabled })}
+      style={{ ...controlStyle, flex: '1 1 0', minWidth: 0 }}
+    >
+      <option value="">{placeholder}</option>
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.caption}
+        </option>
+      ))}
+    </select>
+  );
+
+  return (
+    <div
+      data-birth-date-selects=""
+      {...partAttrs('date-parts')}
+      style={{ display: 'flex', gap: '8px', width: '100%' }}
+    >
+      {select(
+        'day',
+        dayPlaceholder,
+        Array.from({ length: dayCount }, (_, index) => ({
+          value: String(index + 1),
+          caption: pad(String(index + 1))
+        }))
+      )}
+      {select(
+        'month',
+        monthPlaceholder,
+        months.map((caption, index) => ({
+          value: String(index + 1),
+          caption
+        }))
+      )}
+      {select(
+        'year',
+        yearPlaceholder,
+        years.map((year) => ({ value: year, caption: year }))
+      )}
+      <input
+        type="hidden"
+        name={name}
+        value={joinIsoDate(parts.day, parts.month, parts.year)}
+        disabled={disabled}
+        readOnly
+      />
+    </div>
+  );
+};
+
+export default BirthDateSelects;

package/src/blocks/forgot-password-block.tsx

@@ -8,6 +8,7 @@ import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
+  eventFieldName,
   collectAuthFieldErrors,
   focusFirstAuthFieldError
 } from '../auth/auth-field-errors';
@@ -224,11 +225,9 @@ const ForgotPasswordBlock = ({
   }, [formHtmlId, isLoading]);
 
   const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
-    const target = event.target as { name?: string } | null;
+    const name = eventFieldName(event.target);
 
-    setFieldErrors((current) =>
-      clearAuthFieldError(current, target?.name || '')
-    );
+    setFieldErrors((current) => clearAuthFieldError(current, name));
   };
 
   const submit = async (event: React.FormEvent<HTMLFormElement>) => {