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

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

@@ -8,8 +8,28 @@ import {
 } from '@akinon/next/data/client/account';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { useHostModalCloser } from '../overlays/modal-host-context';
+import {
+  AuthFieldErrors,
+  AuthFieldErrorsProvider,
+  clearAuthFieldError,
+  collectAuthFieldErrors,
+  eventFieldName,
+  fieldBoxOf,
+  isVisibleControl
+} from '../auth/auth-field-errors';
+import {
+  AuthFormErrorProvider,
+  containsAuthErrorBlock
+} from '../auth/form-error-context';
+import {
+  AuthFormStateProvider,
+  AuthFormStateValue,
+  showsInFormState
+} from '../auth/form-state-context';
+import { FormFieldDefaultsProvider } from '../auth/form-field-defaults';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
+import { renderComposedChildren } from './render-composed-children';
 
 interface ProfileLike {
   first_name?: string;
@@ -22,6 +42,102 @@ interface ProfileLike {
   email_allowed?: boolean;
 }
 
+/**
+ * Fields the profile shows but this form cannot change: commerce moves the
+ * e-mail through its own verified flow, and its profile serializer marks it
+ * read-only, so a value typed here would be silently dropped.
+ */
+const READ_ONLY_FIELDS = ['email'];
+
+type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+/** A tick whose value is the plain agreement flag rather than a brand's own. */
+const isFlagValue = (value: string) => value === 'true' || value === 'on';
+
+/**
+ * What a composed profile form saves: the answers of the fields the shopper can
+ * actually see, and nothing else.
+ *
+ * The profile is saved with a PATCH (`updateProfile` in @akinon/next, commerce's
+ * `partial_update`), so a key that is not sent is a key that is not changed.
+ * That is what makes leaving things out the safe default:
+ *  - a field the composition does not place, or hides on this breakpoint, keeps
+ *    its stored value — a consent tick the design took off mobile must not
+ *    post "unticked" and withdraw a consent the shopper never saw;
+ *  - a question that was never answered and is still empty (a gender left on
+ *    its empty option, a half-picked date, a box that started blank) is not
+ *    written, so it cannot turn into an error from commerce's validation;
+ *  - a box that started filled and was emptied IS an answer — the shopper
+ *    deleted their phone — so it is sent as `''`, as the fixed form sent it;
+ *  - a tick is an answer either way: a visible consent row posts `true` or
+ *    `false`, because leaving it unticked is how a shopper withdraws. A custom
+ *    tick with a value of its own posts that value, or `''` when unticked.
+ *
+ * Visibility is the FIELD's (see `fieldBoxOf`), not the native control's, and
+ * first control per name wins — the rules the field validation applies too.
+ */
+export const readProfilePayload = (
+  form: HTMLFormElement
+): Record<string, string | boolean> => {
+  const payload: Record<string, string | boolean> = {};
+  const answered = new Set<string>();
+
+  form
+    .querySelectorAll<FormControl>('input[name], select[name], textarea[name]')
+    .forEach((control) => {
+      const { name } = control;
+
+      if (!name || answered.has(name) || READ_ONLY_FIELDS.includes(name)) {
+        return;
+      }
+
+      // Disabled controls (or a disabled fieldset around them) are what the
+      // form shows but does not own.
+      if (control.matches(':disabled')) return;
+
+      if (!isVisibleControl(fieldBoxOf(control))) return;
+
+      if (control instanceof HTMLInputElement && control.type === 'checkbox') {
+        answered.add(name);
+
+        if (isFlagValue(control.value)) {
+          payload[name] = control.checked;
+        } else {
+          payload[name] = control.checked ? control.value : '';
+        }
+
+        return;
+      }
+
+      if (control instanceof HTMLInputElement && control.type === 'radio') {
+        // The group's answer is its checked radio; one with none checked is a
+        // question the shopper left, and later radios may still answer it.
+        if (!control.checked) return;
+
+        answered.add(name);
+        payload[name] = control.value;
+
+        return;
+      }
+
+      if (control.value === '') {
+        // Emptied by the shopper: the box started with the stored value.
+        const wasFilled =
+          (control instanceof HTMLInputElement && control.type !== 'hidden') ||
+          control instanceof HTMLTextAreaElement
+            ? control.defaultValue !== ''
+            : false;
+
+        if (!wasFilled) return;
+      }
+
+      answered.add(name);
+      payload[name] = control.value;
+    });
+
+  return payload;
+};
+
 const EMPTY_FORM = {
   first_name: '',
   last_name: '',
@@ -49,15 +165,27 @@ const SUBMIT_ALIGNMENTS: Record<string, string> = {
  * E-mail is rendered read-only on purpose: `updateProfile` has no e-mail field
  * — commerce moves it through a separate verified `updateEmail` flow — so an
  * editable input here would silently discard what the shopper typed.
- * Properties: submitLabel, submitAlign, showPhone, showEmail, showBirthDate,
- * showLabels, firstNameLabel, lastNameLabel, emailLabel, phoneLabel,
- * birthDateLabel, helpLabel, errorMessage, successMessage.
+ *
+ * Composable, the way the Register Form is: with children the form draws THEM
+ * — an `auth-field` per input (gender, a day/month/year birth date, a brand's
+ * own custom field), an `auth-consent` per contact channel, any text, link or
+ * group around them — starts each one from the shopper's profile, and saves
+ * what the visible ones say (see `readProfilePayload`). Left empty it renders
+ * the fixed rows exactly as before, so a published composition is untouched.
+ *
+ * Properties: submitLabel, submitAlign, showName, showPhone, showEmail,
+ * showBirthDate, showLabels, firstNameLabel, lastNameLabel, emailLabel,
+ * phoneLabel, birthDateLabel, helpLabel, errorMessage, successMessage,
+ * requiredMessage, invalidMessage, closeHostModalOnSuccess.
  * Parts: form, field, label, input, help, error, success, submit.
  */
 const ProfileFormBlock = ({
   block,
+  placeholderId,
+  sectionId,
   currentBreakpoint = 'desktop',
-  isDesigner = false
+  isDesigner = false,
+  selectedBlockId
 }: BlockRendererProps) => {
   const text = (key: string, fallback: string) =>
     String(
@@ -88,9 +216,13 @@ const ProfileFormBlock = ({
     'successMessage',
     'Your profile has been saved.'
   );
+  // The copy a composed field shows under itself when it is left empty or
+  // filled in wrongly — see `auth/auth-field-errors.tsx`.
+  const requiredMessage = text('requiredMessage', 'This field is required.');
+  const invalidMessage = text('invalidMessage', 'Please check this field.');
   // Lets a composition scope the form to one field (e.g. a birth-date-only
   // drawer). The hidden name fields still submit their loaded values, so the
-  // whole-record PUT keeps them untouched.
+  // save leaves them as they were.
   const showName = readToggle(
     block.properties?.showName,
     currentBreakpoint,
@@ -122,16 +254,30 @@ const ProfileFormBlock = ({
 
   // Guests have no profile endpoint; skipping avoids a guaranteed 403 on every
   // page that hosts this block.
-  const { data: profile, isLoading } = useGetProfileInfoQuery(undefined, {
+  const {
+    data: profile,
+    isLoading,
+    isError: profileFailed
+  } = useGetProfileInfoQuery(undefined, {
     skip: !isAuthenticated
   });
   const [updateProfile, { isLoading: isSaving }] = useUpdateProfileMutation();
 
   const [values, setValues] = useState(EMPTY_FORM);
   const [status, setStatus] = useState<'idle' | 'saved' | 'error'>('idle');
+  const [fieldErrors, setFieldErrors] = useState<AuthFieldErrors>({});
 
   const loadedProfile = (profile ?? null) as ProfileLike | null;
 
+  /**
+   * The children a composition authored. Hidden ones are dropped for a shopper
+   * and kept on the canvas, so an author can dress a row they switched off.
+   */
+  const childBlocks = (block.blocks || []).filter((childBlock) =>
+    isDesigner ? true : !childBlock.hidden
+  );
+  const isComposed = childBlocks.length > 0;
+
   useEffect(() => {
     if (!loadedProfile) return;
 
@@ -168,9 +314,9 @@ const ProfileFormBlock = ({
         last_name: values.last_name,
         phone: values.phone,
         date_of_birth: values.date_of_birth,
-        // The endpoint replaces the whole profile record, so the fields this
-        // block does not render are echoed back untouched — otherwise saving a
-        // name would silently clear the shopper's notification consents.
+        // The fields this block does not render are echoed back as loaded.
+        // The save is a PATCH, so leaving them out would keep them too; the
+        // echo is kept because published forms have always sent it.
         gender: loadedProfile?.gender ?? '',
         sms_allowed: loadedProfile?.sms_allowed ?? false,
         email_allowed: loadedProfile?.email_allowed ?? false
@@ -183,8 +329,201 @@ const ProfileFormBlock = ({
     }
   };
 
+  /**
+   * The composed save: the fields validate themselves (their own Required
+   * toggle, their own type), then only the answers on screen are sent.
+   */
+  const submitComposed = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    // A submit inside the designer must never write to the shopper's account.
+    if (isDesigner || isSaving) return;
+
+    setStatus('idle');
+
+    const { errors, firstInvalid } = collectAuthFieldErrors(
+      event.currentTarget,
+      { required: requiredMessage, invalid: invalidMessage }
+    );
+
+    setFieldErrors(errors);
+
+    if (firstInvalid) {
+      firstInvalid.focus();
+
+      return;
+    }
+
+    const payload = readProfilePayload(event.currentTarget);
+
+    try {
+      // Nothing on screen to save is still a save the shopper asked for; it
+      // just has nothing to change.
+      if (Object.keys(payload).length > 0) {
+        await updateProfile(payload as never).unwrap();
+      }
+
+      setStatus('saved');
+      closeHostModal();
+    } catch {
+      setStatus('error');
+    }
+  };
+
+  /** A message describes what a field WAS: it goes once that field is edited. */
+  const handleComposedInput = (event: React.FormEvent<HTMLFormElement>) => {
+    const name = eventFieldName(event.target);
+
+    setStatus('idle');
+    setFieldErrors((current) => clearAuthFieldError(current, name));
+  };
+
   if (!isDesigner && !isAuthenticated) return null;
 
+  if (isComposed) {
+    /**
+     * The fields are uncontrolled — each starts from the profile and the form
+     * reads them back on submit — so they are only drawn once the profile is
+     * there to start from. Drawing them earlier would show empty boxes and
+     * unticked consents that a quick "save" would then write back.
+     *
+     * The canvas draws them regardless, empty when the editor has no profile,
+     * so the author always has something to arrange.
+     */
+    if (!isDesigner && !loadedProfile) {
+      // Still loading: nothing yet. Failed: say so, rather than leave an empty
+      // drawer that looks like a form nobody built.
+      if (!profileFailed || isLoading) return null;
+
+      return (
+        <div
+          data-profile-form=""
+          data-profile-form-state="unavailable"
+          role="alert"
+          {...partAttrs('error', { invalid: true })}
+        >
+          {errorMessage}
+        </div>
+      );
+    }
+
+    const errorMessageNode = status === 'error' ? errorMessage : '';
+    const formStateValue: AuthFormStateValue = {
+      screen: 'form',
+      busy: isSaving,
+      hasError: status === 'error'
+    };
+
+    return (
+      <AuthFormErrorProvider value={errorMessageNode}>
+        <AuthFormStateProvider value={formStateValue}>
+          <AuthFieldErrorsProvider value={fieldErrors}>
+            <FormFieldDefaultsProvider
+              value={{
+                values: (loadedProfile ?? {}) as Record<string, unknown>,
+                readOnly: READ_ONLY_FIELDS
+              }}
+            >
+              <form
+                // Remounted once a profile arrives on the canvas, so the
+                // fields pick up the values they start from.
+                key={loadedProfile ? 'profile' : 'empty'}
+                data-profile-form=""
+                data-profile-form-composed=""
+                data-profile-form-state={isSaving ? 'busy' : status}
+                onSubmit={submitComposed}
+                onInput={handleComposedInput}
+                onChange={handleComposedInput}
+                // The fields draw their own messages; see auth-field-errors.
+                noValidate
+                {...partAttrs('form', {
+                  loading: isSaving,
+                  invalid: status === 'error'
+                })}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 'var(--profile-form-gap, 12px)'
+                }}
+              >
+                {renderComposedChildren({
+                  // A Form State container shows only in the state it is
+                  // scoped to (submitting, refused); anything else is shared
+                  // chrome. There is no success SCREEN here — the form stays
+                  // and says "saved" — so a success-scoped container never
+                  // shows to a shopper, as in a register form.
+                  blocks: childBlocks.filter((childBlock) =>
+                    showsInFormState({
+                      block: childBlock,
+                      state: formStateValue,
+                      isDesigner,
+                      selectedBlockId: selectedBlockId ?? undefined,
+                      currentBreakpoint
+                    })
+                  ),
+                  placeholderId,
+                  sectionId,
+                  isDesigner,
+                  selectedBlockId,
+                  currentBreakpoint
+                })}
+
+                {helpLabel && (
+                  <div data-profile-form-help="" {...partAttrs('help')}>
+                    {helpLabel}
+                  </div>
+                )}
+
+                {/* The fallback for a composition that has not placed a Form
+                    Error block of its own. */}
+                {status === 'error' && !containsAuthErrorBlock(childBlocks) && (
+                  <div
+                    data-profile-form-error=""
+                    role="alert"
+                    {...partAttrs('error', { invalid: true })}
+                  >
+                    {errorMessage}
+                  </div>
+                )}
+
+                {status === 'saved' && (
+                  <div
+                    data-profile-form-success=""
+                    role="status"
+                    {...partAttrs('success')}
+                  >
+                    {successMessage}
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  data-profile-form-submit=""
+                  disabled={isSaving}
+                  aria-busy={isSaving}
+                  {...partAttrs('submit', { loading: isSaving })}
+                  style={{
+                    padding: '12px 20px',
+                    background: 'var(--profile-form-cta-bg, #111827)',
+                    color: 'var(--profile-form-cta-color, #ffffff)',
+                    border: 'none',
+                    cursor: isSaving ? 'not-allowed' : 'pointer',
+                    opacity: isSaving ? 0.7 : 1,
+                    ...(SUBMIT_ALIGNMENTS[submitAlign]
+                      ? { alignSelf: SUBMIT_ALIGNMENTS[submitAlign] }
+                      : null)
+                  }}
+                >
+                  {submitLabel}
+                </button>
+              </form>
+            </FormFieldDefaultsProvider>
+          </AuthFieldErrorsProvider>
+        </AuthFormStateProvider>
+      </AuthFormErrorProvider>
+    );
+  }
+
   if (isDesigner && !loadedProfile && !isLoading) {
     return (
       <DesignerPlaceholder
@@ -286,7 +625,11 @@ const ProfileFormBlock = ({
       )}
 
       {status === 'saved' && (
-        <div data-profile-form-success="" role="status" {...partAttrs('success')}>
+        <div
+          data-profile-form-success=""
+          role="status"
+          {...partAttrs('success')}
+        >
           {successMessage}
         </div>
       )}

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

@@ -16,8 +16,11 @@ import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
+  eventFieldName,
   collectAuthFieldErrors,
-  focusFirstAuthFieldError
+  fieldBoxOf,
+  focusFirstAuthFieldError,
+  isVisibleControl
 } from '../auth/auth-field-errors';
 import {
   AuthFormErrorProvider,
@@ -395,11 +398,9 @@ const RegisterFormBlock = ({
   }, [formHtmlId, isSubmitting]);
 
   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>) => {
@@ -551,7 +552,12 @@ const RegisterFormBlock = ({
         `input[type="checkbox"][name="${name}"]`
       ) as HTMLInputElement | null;
 
-      return control ? control.checked : undefined;
+      // A tick the design took off this breakpoint is a question nobody was
+      // asked here: it falls back to the blanket answer, instead of posting
+      // the refusal its untouched box would read as.
+      if (!control || !isVisibleControl(fieldBoxOf(control))) return undefined;
+
+      return control.checked;
     };
 
     const agreedToLegal = legalControl ? agreedToTerms : true;

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

@@ -10,6 +10,7 @@ import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
+  eventFieldName,
   collectAuthFieldErrors,
   focusFirstAuthFieldError
 } from '../auth/auth-field-errors';
@@ -290,11 +291,9 @@ const ResetPasswordBlock = ({
   const [passwordReset, { isLoading, isSuccess }] = usePasswordResetMutation();
 
   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));
   };
 
   /**

package/src/blocks/text-block.tsx

@@ -19,7 +19,7 @@ const TextBlock = ({
 }: BlockRendererProps) => {
   const { locale } = useLocalization();
   const localize = useLocalizeHref();
-  const { defaultLocale } = useValueLocale();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
   const themeSettings = useThemeSettingsContext();
 
   const getLocalizedContent = (): string => {
@@ -35,10 +35,7 @@ const TextBlock = ({
 
     if (typeof value === 'object' && value !== null) {
       return (
-        value[locale] ||
-        (defaultLocale && value[defaultLocale]) ||
-        Object.values(value)[0] ||
-        ''
+        value[locale] || value[defaultLocale] || Object.values(value)[0] || ''
       );
     }