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

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>) => {

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

@@ -24,6 +24,7 @@ import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
+  eventFieldName,
   collectAuthFieldErrors
 } from '../auth/auth-field-errors';
 import {
@@ -424,11 +425,9 @@ const OtpFormBlock = ({
    * `change`.
    */
   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 submitPhone = async (event: React.FormEvent<HTMLFormElement>) => {