@akinon/pz-theme 2.0.83-rc.0 → 2.0.84-beta.0

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

@@ -1,21 +1,55 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { useForgotPasswordMutation } from '@akinon/next/data/client/user';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { readToggle } from './product-block-utils';
+import {
+  AuthFieldErrors,
+  AuthFieldErrorsProvider,
+  clearAuthFieldError,
+  collectAuthFieldErrors
+} from '../auth/auth-field-errors';
+import {
+  AuthFormErrorProvider,
+  containsAuthErrorBlock
+} from '../auth/form-error-context';
+import {
+  clearFormSubmitState,
+  publishFormSubmitState
+} from '../auth/form-submit-bus';
+import {
+  AuthFlowIdContext,
+  resolveAuthStepTarget,
+  setAuthStep
+} from '../auth/auth-flow-bus';
+import { renderComposedChildren } from './render-composed-children';
 import { BlockRendererProps } from './block-renderer-registry';
 
 /**
  * Functional auth block: e-mail input that triggers the password reset mail
  * through the v1 `forgotPassword` mutation. Behaviour is fixed (commerce sends
  * the mail); the editor owns the labels and the styling.
+ *
+ * Composable, the same way the Auth Form is: with children the form draws THEM
+ * — an `auth-field` for the address, a Form Error block for the message, the
+ * CTA an ordinary Button — and reads the address back out of `FormData` on
+ * submit. Left empty it renders the fixed row exactly as before, so a published
+ * composition is untouched. Its pieces were reachable only as STYLE parts,
+ * which meant a brand could recolour the input but not put copy above it, move
+ * the message, or replace the button with the drawer's own bottom-bar CTA.
+ *
  * Properties: submitLabel, busyLabel, successLabel, emailLabel,
- * emailPlaceholder, showLabels, errorLabel, previewSuccess.
- * Parts: form, field, label, input, error, submit, success.
+ * emailPlaceholder, showLabels, errorLabel, previewSuccess, requiredMessage,
+ * invalidMessage, formHtmlId, showSubmit, backLabel, backStepTarget,
+ * successStepTarget.
+ * Parts: form, field, label, input, error, submit, success, back.
  */
 const ForgotPasswordBlock = ({
   block,
+  placeholderId,
+  sectionId,
+  selectedBlockId,
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
@@ -50,46 +84,286 @@ const ForgotPasswordBlock = ({
     currentBreakpoint,
     false
   );
+  /**
+   * The copy for an address left empty or typed wrongly — the brand's own
+   * sentence in place of the browser's bubble. See `auth-field-errors.tsx`.
+   */
+  const requiredMessage = prop('requiredMessage', 'This field is required.');
+  const invalidMessage = prop('invalidMessage', 'Please check this field.');
+  /**
+   * Detached submit, the same pair the other auth forms carry: `formHtmlId`
+   * names the <form> so a Button block elsewhere can submit it through the
+   * native `form` attribute — which is how a drawer pins its CTA to the bottom
+   * bar — and `showSubmit` off hides the built-in button.
+   */
+  const formHtmlId = prop('formHtmlId', '').trim();
+  const showSubmit = readToggle(
+    block.properties?.showSubmit,
+    currentBreakpoint,
+    true
+  );
+  /**
+   * The way back once the mail is on its way.
+   *
+   * Only shown in the success state, and only when the designer named a step:
+   * before submitting, the flow's own Back button is the way back, but AFTER
+   * submitting there is nothing left to do in this step and "check your inbox"
+   * with no exit is a dead end. Left empty the block behaves exactly as it
+   * did — the success message and nothing else.
+   */
+  const backLabel = prop('backLabel', 'Back to log in');
+  const backStepTarget = prop('backStepTarget', '').trim();
+
+  /**
+   * Where the flow goes once the mail is on its way.
+   *
+   * The alternative to composing the success state inside this block: a step of
+   * the surrounding flow, authored out of ordinary blocks — a heading, the
+   * brand's own illustration, a "check your inbox" line, a Button back to the
+   * login step — which is more than a message and a link could ever be, and
+   * needs no new kind of block to express. Left empty the block shows its own
+   * success copy, exactly as it did.
+   *
+   * Same shape as the register form's `otpStepTarget` handoff, for the same
+   * reason: the form knows it has finished, the flow knows what to show next.
+   */
+  const successStepTarget = prop('successStepTarget', '').trim();
+
+  const contextFlowId = useContext(AuthFlowIdContext);
+  const backStep = resolveAuthStepTarget(backStepTarget, contextFlowId);
+  const successStep = resolveAuthStepTarget(successStepTarget, contextFlowId);
+
+  /**
+   * Composed mode: the address is a child `auth-field`, the message a Form
+   * Error block, the CTA a Button. Same contract as every other auth form —
+   * children present means they draw the form, empty means the fixed row
+   * renders exactly as it always did.
+   */
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+  const isComposed = childBlocks.length > 0;
 
   const [email, setEmail] = useState('');
   const [error, setError] = useState('');
-  const [forgotPassword, { isLoading, isSuccess }] = useForgotPasswordMutation();
+  // Per FIELD, as opposed to `error`, which is what commerce answered about
+  // the request as a whole.
+  const [fieldErrors, setFieldErrors] = useState<AuthFieldErrors>({});
+  const [forgotPassword, { isLoading, isSuccess }] =
+    useForgotPasswordMutation();
+
+  /**
+   * A message describes what the field WAS: it goes as soon as it is edited.
+   * Both events, because a keystroke raises `input` while autofill raises
+   * `change`.
+   */
+  /**
+   * A detached CTA (a Button carrying this form's id) is outside this subtree
+   * and cannot see `isLoading` — so the form publishes it. See
+   * `auth/form-submit-bus.ts`.
+   */
+  React.useEffect(() => {
+    if (!formHtmlId) return undefined;
+
+    publishFormSubmitState(formHtmlId, isLoading);
+
+    return () => clearFormSubmitState(formHtmlId);
+  }, [formHtmlId, isLoading]);
+
+  const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
+    const target = event.target as { name?: string } | null;
 
-  const submit = async (event: React.FormEvent) => {
+    setFieldErrors((current) =>
+      clearAuthFieldError(current, target?.name || '')
+    );
+  };
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError('');
 
     // Submitting inside the designer would send a real reset mail.
     if (isDesigner || isLoading) return;
 
+    // The form carries `noValidate`, so this is what stops an empty submit —
+    // and it says so under the field rather than in a browser bubble.
+    const { errors: nextFieldErrors, firstInvalid } = collectAuthFieldErrors(
+      event.currentTarget,
+      { required: requiredMessage, invalid: invalidMessage }
+    );
+
+    setFieldErrors(nextFieldErrors);
+
+    if (firstInvalid) {
+      firstInvalid.focus();
+
+      return;
+    }
+
+    // Composed: the address lives in a child Auth Field, so it is read off the
+    // form the way every other composed auth form reads its fields, rather
+    // than from state no child writes to.
+    const address = isComposed
+      ? String(new FormData(event.currentTarget).get('email') ?? '').trim()
+      : email;
+
     try {
-      await forgotPassword({ email }).unwrap();
+      await forgotPassword({ email: address }).unwrap();
+
+      // The mail is away and there is nothing left to do in this step, so a
+      // flow that named a step for it moves there instead of swapping this
+      // block's own contents.
+      if (successStep) {
+        setAuthStep(successStep.flowId, successStep.stepKey);
+      }
     } catch {
       setError(errorLabel);
     }
   };
 
+  const backControl = backStep ? (
+    <button
+      type="button"
+      data-forgot-password-back=""
+      {...partAttrs('back')}
+      onClick={() => {
+        // The canvas has its own step switcher; a click here must not move the
+        // flow under the designer's feet. Same guard as `use-block-action`.
+        if (isDesigner) return;
+
+        setAuthStep(backStep.flowId, backStep.stepKey);
+      }}
+      style={{
+        alignSelf: 'flex-start',
+        padding: 0,
+        margin: 0,
+        border: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        font: 'inherit',
+        textDecoration: 'underline',
+        cursor: 'pointer'
+      }}
+    >
+      {backLabel}
+    </button>
+  ) : null;
+
   // The success copy replaces the form so the shopper is not invited to submit
   // the same address twice; the root attribute is kept so styling still applies.
   if ((isSuccess && !isDesigner) || (isDesigner && previewSuccess)) {
     return (
       <div
         data-forgot-password=""
+        // Fills its block wrapper; see the note in auth-step-block.tsx.
+        className="w-full"
         data-forgot-password-state="success"
         {...partAttrs('success')}
         role="status"
       >
         {successLabel}
+        {backControl}
       </div>
     );
   }
 
+  if (isComposed) {
+    /**
+     * The composed form: the children carry the address (`auth-field`), the
+     * message (a Form Error block) and whatever chrome the design wants around
+     * them, and submit reads the address back out of `FormData`. The built-in
+     * button stays available under its toggle so a fresh composition works
+     * before the designer has wired their own CTA.
+     */
+    const errorIsAuthored = containsAuthErrorBlock(childBlocks);
+
+    return (
+      <AuthFormErrorProvider value={error}>
+        <AuthFieldErrorsProvider value={fieldErrors}>
+          <form
+            id={formHtmlId || undefined}
+            data-forgot-password=""
+            data-forgot-password-composed=""
+            // Fills its block wrapper; see the note in auth-step-block.tsx.
+            className="w-full"
+            data-forgot-password-state={isLoading ? 'busy' : 'idle'}
+            {...partAttrs('form')}
+            onSubmit={submit}
+            // Our own message under the field instead of the browser's bubble
+            // over it; the constraints it reads stay on the controls.
+            noValidate
+            onInput={handleInput}
+            onChange={handleInput}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 'var(--forgot-password-gap, 12px)'
+            }}
+          >
+            {renderComposedChildren({
+              blocks: childBlocks,
+              placeholderId,
+              sectionId,
+              isDesigner,
+              selectedBlockId,
+              currentBreakpoint
+            })}
+
+            {/* The composition's own Form Error block draws the message where
+                the design wants it; this node is the fallback for one that has
+                not placed it. See `auth/form-error-context.tsx`. */}
+            {error && !errorIsAuthored && (
+              <div
+                data-forgot-password-error=""
+                {...partAttrs('error')}
+                role="alert"
+              >
+                {error}
+              </div>
+            )}
+
+            {showSubmit && (
+              <button
+                type="submit"
+                data-forgot-password-submit=""
+                {...partAttrs('submit', {
+                  loading: isLoading,
+                  disabled: isLoading
+                })}
+                disabled={isLoading}
+                aria-busy={isLoading}
+                style={{
+                  padding: '12px 20px',
+                  background: 'var(--forgot-password-cta-bg, #111827)',
+                  color: 'var(--forgot-password-cta-color, #ffffff)',
+                  border: 'none',
+                  cursor: isLoading ? 'not-allowed' : 'pointer',
+                  opacity: isLoading ? 0.7 : 1
+                }}
+              >
+                {isLoading && busyLabel ? busyLabel : submitLabel}
+              </button>
+            )}
+          </form>
+        </AuthFieldErrorsProvider>
+      </AuthFormErrorProvider>
+    );
+  }
+
   return (
     <form
+      id={formHtmlId || undefined}
       data-forgot-password=""
+      // Fills its block wrapper; see the note in auth-step-block.tsx.
+      className="w-full"
       data-forgot-password-state={isLoading ? 'busy' : 'idle'}
       {...partAttrs('form')}
       onSubmit={submit}
+      // Our own message under the field instead of the browser's bubble over
+      // it; `required` below is still what decides.
+      noValidate
+      onInput={handleInput}
+      onChange={handleInput}
       style={{
         display: 'flex',
         flexDirection: 'column',
@@ -112,17 +386,35 @@ const ForgotPasswordBlock = ({
           autoComplete="email"
           placeholder={emailPlaceholder || undefined}
           aria-label={showLabels ? undefined : emailLabel}
+          aria-invalid={fieldErrors.email ? true : undefined}
           required
           {...partAttrs('input')}
           style={{
             width: '100%',
-            border: '1px solid var(--forgot-password-border, #d1d5db)',
+            border: `1px solid ${
+              fieldErrors.email
+                ? 'var(--forgot-password-border-invalid, #dc2626)'
+                : 'var(--forgot-password-border, #d1d5db)'
+            }`,
             background: 'transparent',
             color: 'inherit',
             padding: '10px 12px',
             outline: 'none'
           }}
         />
+        {fieldErrors.email && (
+          <span
+            data-forgot-password-field-error="email"
+            {...partAttrs('error')}
+            role="alert"
+            style={{
+              color: 'var(--forgot-password-error-color, #dc2626)',
+              fontSize: '0.875em'
+            }}
+          >
+            {fieldErrors.email}
+          </span>
+        )}
       </label>
 
       {error && (
@@ -131,23 +423,25 @@ const ForgotPasswordBlock = ({
         </div>
       )}
 
-      <button
-        type="submit"
-        data-forgot-password-submit=""
-        {...partAttrs('submit', { loading: isLoading, disabled: isLoading })}
-        disabled={isLoading}
-        aria-busy={isLoading}
-        style={{
-          padding: '12px 20px',
-          background: 'var(--forgot-password-cta-bg, #111827)',
-          color: 'var(--forgot-password-cta-color, #ffffff)',
-          border: 'none',
-          cursor: isLoading ? 'not-allowed' : 'pointer',
-          opacity: isLoading ? 0.7 : 1
-        }}
-      >
-        {isLoading && busyLabel ? busyLabel : submitLabel}
-      </button>
+      {showSubmit && (
+        <button
+          type="submit"
+          data-forgot-password-submit=""
+          {...partAttrs('submit', { loading: isLoading, disabled: isLoading })}
+          disabled={isLoading}
+          aria-busy={isLoading}
+          style={{
+            padding: '12px 20px',
+            background: 'var(--forgot-password-cta-bg, #111827)',
+            color: 'var(--forgot-password-cta-color, #ffffff)',
+            border: 'none',
+            cursor: isLoading ? 'not-allowed' : 'pointer',
+            opacity: isLoading ? 0.7 : 1
+          }}
+        >
+          {isLoading && busyLabel ? busyLabel : submitLabel}
+        </button>
+      )}
     </form>
   );
 };

package/src/blocks/link-block.tsx

@@ -5,50 +5,16 @@ import NextLink from 'next/link';
 import { useLocalization } from '@akinon/next/hooks';
 import { LocaleUrlStrategy } from '@akinon/next/localization';
 import { urlLocaleMatcherRegex, urlSchemes } from '@akinon/next/utils';
-import { getResponsiveValue } from '../utils';
+import {
+  getInnerRootInlineStyles,
+  getResponsiveValue,
+  partAttrs
+} from '../utils';
+import { useThemeSettingsContext } from '../theme-settings-context';
 import { useBlockAction } from '../hooks/use-block-action';
 import { BlockRendererProps } from './block-renderer-registry';
 import ThemeBlock from '../theme-block';
 
-/**
- * The lines and gaps of the block's box, which this anchor must not draw a
- * second time.
- *
- * `data-block-id` sits on the designer wrapper this anchor renders inside, and
- * the generated stylesheet already paints the block's box there. Copying these
- * keys inline as well draws them twice at two different sizes: the wrapper is
- * the grid item and stretches to fill its row, while the anchor only hugs its
- * content. Measured on a live page: one border set on a card rendered as two,
- * one closing under the label and another at the bottom of the row. Padding
- * and margin compound the same way — the spacing came out doubled.
- *
- * `background` is deliberately NOT here. Painting the same colour on both
- * boxes is idempotent, so there is no artifact to fix, and an iterator resolves
- * a bound colour per row into this inline copy — the shared stylesheet rule
- * cannot hold a different value per row, so stripping it would lose it.
- *
- * Layout keys stay inline too. The wrapper's only child is this anchor, so
- * `display: flex` up there arranges nothing — the anchor is what lays out the
- * card's image and label.
- *
- * A row-bound `border-color` is the one thing this gives up: it would tint a
- * border the anchor no longer has. Row data carries prices and colours for the
- * content, not the outline of the box it sits in.
- */
-const BOX_STYLE_PREFIXES = [
-  'margin',
-  'padding',
-  'border',
-  'outline',
-  'box-shadow'
-];
-
-const isBoxStyleKey = (normalizedKey: string): boolean =>
-  BOX_STYLE_PREFIXES.some(
-    (prefix) =>
-      normalizedKey === prefix || normalizedKey.startsWith(`${prefix}-`)
-  );
-
 import { postToEditor } from '../editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 const LinkBlock = ({
@@ -60,6 +26,7 @@ const LinkBlock = ({
   isDesigner = false
 }: BlockRendererProps) => {
   const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
+  const themeSettings = useThemeSettingsContext();
   const action = useBlockAction(block, { currentBreakpoint, isDesigner });
 
   /**
@@ -144,50 +111,19 @@ const LinkBlock = ({
     return trimmedHref || '#';
   }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
 
-  const getStyleEntry = (kebabKey: string) => {
-    if (!block.styles) return undefined;
-    const styles = block.styles as Record<string, unknown>;
-    const camelKey = kebabKey.replace(/-([a-z])/g, (_, letter) =>
-      letter.toUpperCase()
-    );
-    return styles[kebabKey] ?? styles[camelKey];
-  };
-
-  const normalizeKey = (key: string): string => {
-    if (key.includes('-')) return key;
-    return key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-  };
-
-  const inlineStyles: React.CSSProperties = {};
-  if (block.styles) {
-    const keys = Object.keys(block.styles);
-    keys.forEach((key) => {
-      const normalizedKey = normalizeKey(key);
-
-      if (
-        normalizedKey === 'hover-flex' ||
-        normalizedKey === 'hover-child-flex' ||
-        normalizedKey === 'first-child-flex'
-      ) {
-        return;
-      }
-
-      const styleEntry = getStyleEntry(normalizedKey);
-      if (styleEntry) {
-        const val = getResponsiveValue(styleEntry, currentBreakpoint);
-        if (val !== undefined && val !== null) {
-          if (isBoxStyleKey(normalizedKey)) {
-            return;
-          }
-
-          const camelKey = normalizedKey.replace(/-([a-z])/g, (_, letter) =>
-            letter.toUpperCase()
-          );
-          (inlineStyles as any)[camelKey] = val;
-        }
-      }
-    });
-  }
+  /**
+   * Only the values the generated stylesheet cannot produce; the rest now
+   * arrives as a rule against this element (`data-part="root"`). Inlining the
+   * whole style object here applied every padding twice — once on the designer
+   * wrapper, once on the anchor — and shadowed the media queries and `:hover`
+   * the same stylesheet emits.
+   */
+  const inlineStyles = getInnerRootInlineStyles(
+    block.styles as Record<string, unknown> | undefined,
+    themeSettings,
+    currentBreakpoint,
+    block.rowStyleKeys
+  );
 
   if (!block.blocks || block.blocks.length === 0) {
     return (
@@ -195,6 +131,7 @@ const LinkBlock = ({
         href={isDesigner ? '#' : formattedHref}
         target={isDesigner ? undefined : target}
         rel={isDesigner ? undefined : rel}
+        {...partAttrs('root')}
         style={inlineStyles}
         onClick={handleClick}
         {...action.ariaProps}
@@ -211,6 +148,7 @@ const LinkBlock = ({
       href={isDesigner ? '#' : formattedHref}
       target={isDesigner ? undefined : target}
       rel={isDesigner ? undefined : rel}
+      {...partAttrs('root')}
       style={inlineStyles}
       onClick={handleClick}
       {...action.ariaProps}