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

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

@@ -0,0 +1,270 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
+import { useAuthFieldError } from '../auth/auth-field-errors';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * One field of an auth form, as a block of its own.
+ *
+ * The monolithic auth form draws its fields in a fixed order the designer
+ * cannot touch — its layer-tree "elements" are style parts, not blocks. This
+ * block is the composable alternative: dropped INSIDE an Auth Form (or
+ * Register Form) it renders a native input whose `name` the form reads
+ * through FormData on submit, so the fields, the links between them and the
+ * CTA order are all ordinary block arrangement.
+ *
+ * Purely presentational on purpose: no state, no submit logic — the hosting
+ * 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, and for
+ * a `gender` field the two option captions (femaleLabel, maleLabel).
+ * Parts: field, label, input, error.
+ */
+
+type AuthFieldType =
+  | 'email'
+  | 'password'
+  | 'first_name'
+  | 'last_name'
+  | 'phone'
+  | 'gender'
+  | 'date_of_birth'
+  | 'custom';
+
+const FIELD_TYPES: AuthFieldType[] = [
+  'email',
+  'password',
+  'first_name',
+  'last_name',
+  'phone',
+  'gender',
+  'date_of_birth',
+  'custom'
+];
+
+/**
+ * What a `custom` field may be, so an author can add a key this list has never
+ * heard of — a national id, a company name, a brand's own attribute — without
+ * waiting for a release. Everything else about it is an ordinary auth field:
+ * the form submits it by name, validates it, and reports its message under it.
+ *
+ * A short list rather than free text: these are the input types whose built-in
+ * validity the form's own check already reads, and a typo'd `type` silently
+ * degrades to text.
+ */
+const CUSTOM_INPUT_TYPES = [
+  'text',
+  'tel',
+  'email',
+  'number',
+  'date',
+  'password'
+] as const;
+
+/**
+ * The two values commerce stores for `gender`, which is why they are not
+ * authorable: the brand's own profile page posts exactly these strings, so a
+ * composition that invented its own would write a value the account page could
+ * not read back. Their CAPTIONS are authorable, which is the part a brand
+ * actually wants to change (and to translate).
+ */
+const GENDER_VALUES = ['female', 'male'] as const;
+
+/** Input semantics per field: type, autocomplete, default caption. */
+const FIELD_PRESETS: Record<
+  AuthFieldType,
+  { type: string; autoComplete: string; label: string }
+> = {
+  email: { type: 'email', autoComplete: 'email', label: 'E-mail' },
+  password: {
+    type: 'password',
+    autoComplete: 'current-password',
+    label: 'Password'
+  },
+  first_name: {
+    type: 'text',
+    autoComplete: 'given-name',
+    label: 'First name'
+  },
+  last_name: { type: 'text', autoComplete: 'family-name', label: 'Last name' },
+  phone: { type: 'tel', autoComplete: 'tel', label: 'Phone' },
+  // A native date control rather than a masked text box: its value is already
+  // the `YYYY-MM-DD` commerce stores, and the browser shows the day/month/year
+  // order of the shopper's own locale — which is what a placeholder like
+  // "GG/AA/YYYY" was trying to say by hand.
+  date_of_birth: { type: 'date', autoComplete: 'bday', label: 'Birth date' },
+  // Rendered as a select rather than an input; the type is unused for it.
+  gender: { type: 'text', autoComplete: 'sex', label: 'Gender' },
+  // The author names it and picks its type; nothing here can guess either.
+  custom: { type: 'text', autoComplete: 'off', label: 'Field' }
+};
+
+const AuthFieldBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const fieldType = resolveOption<AuthFieldType>(
+    block.properties?.fieldType,
+    currentBreakpoint,
+    'email',
+    FIELD_TYPES
+  );
+  const preset = FIELD_PRESETS[fieldType];
+
+  /**
+   * What the form will call this value.
+   *
+   * For every known field the type IS the name — `email` submits `email` — which
+   * is what lets a form validate and message by field without being told. A
+   * `custom` field has no such name until the author gives it one, and an input
+   * without a name submits nothing at all, so an unnamed one is refused below
+   * rather than drawn as a control that quietly collects into the void.
+   */
+  const customName = prop('name', '').trim();
+  const controlName = fieldType === 'custom' ? customName : fieldType;
+  const controlType =
+    fieldType === 'custom'
+      ? resolveOption<(typeof CUSTOM_INPUT_TYPES)[number]>(
+          block.properties?.inputType,
+          currentBreakpoint,
+          'text',
+          CUSTOM_INPUT_TYPES as unknown as (typeof CUSTOM_INPUT_TYPES)[number][]
+        )
+      : preset.type;
+
+  const label = prop('label', preset.label);
+  const placeholder = prop('placeholder', '');
+  const showLabel = readToggle(
+    block.properties?.showLabel,
+    currentBreakpoint,
+    true
+  );
+  const required = readToggle(
+    block.properties?.required,
+    currentBreakpoint,
+    true
+  );
+  /**
+   * What the surrounding form found wrong about THIS field on its last submit.
+   * The form validates (it owns submit) and publishes the messages by control
+   * name; a field standing outside any form simply never has one.
+   */
+  const errorMessage = useAuthFieldError(controlName);
+
+  /** Authorable captions for a fixed pair of stored values. */
+  const femaleLabel = prop('femaleLabel', 'Female');
+  const maleLabel = prop('maleLabel', 'Male');
+
+  // One declaration for both controls: a select that does not look like the
+  // inputs beside it reads as a different form.
+  const controlStyle: React.CSSProperties = {
+    width: '100%',
+    border: `1px solid ${
+      errorMessage
+        ? 'var(--auth-field-border-invalid, #dc2626)'
+        : 'var(--auth-field-border, #d1d5db)'
+    }`,
+    background: 'transparent',
+    color: 'inherit',
+    padding: '10px 12px',
+    outline: 'none'
+  };
+
+  // A custom field with no name collects nothing, so a shopper must not be
+  // given it to fill in — but the author has to be told what it is waiting for,
+  // or dropping the block looks like nothing happened.
+  if (!controlName) {
+    if (!isDesigner) return null;
+
+    return (
+      <DesignerPlaceholder label="Custom field (give this field a Name)" />
+    );
+  }
+
+  return (
+    <label
+      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"
+      {...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={preset.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={preset.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}
+        />
+      )}
+      {/* 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. */}
+      {errorMessage && (
+        <span
+          data-auth-field-error={controlName}
+          {...partAttrs('error')}
+          role="alert"
+          style={{
+            color: 'var(--auth-field-error-color, #dc2626)',
+            fontSize: '0.875em'
+          }}
+        >
+          {errorMessage}
+        </span>
+      )}
+    </label>
+  );
+};
+
+export default AuthFieldBlock;

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

@@ -0,0 +1,251 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import {
+  ActiveAuthStepContext,
+  AuthFlowIdContext,
+  DEFAULT_AUTH_FLOW_ID,
+  goBackAuthStep,
+  registerAuthFlowMount,
+  useAuthFlowState
+} from '../auth/auth-flow-bus';
+import { Block } from '../theme-block';
+import { renderComposedChildren } from './render-composed-children';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+
+/**
+ * A step-by-step auth journey assembled from `auth-step` children.
+ *
+ * The flow renders exactly one step at a time and any non-step children
+ * always (a shared heading above the journey, say). Which step is active
+ * lives on the auth-flow bus, so ANYTHING can drive it: a button inside a
+ * step (`actionType: 'auth-step'`, resolved to this flow through context), a
+ * header trigger in another placeholder (`actionTarget: 'auth:register'`), or
+ * the register form jumping to its verification step. The flow itself owns
+ * only the fallback (its authored initial step) and the optional back
+ * control.
+ *
+ * Nothing here is auth-specific beyond the name: the steps' contents are
+ * whatever blocks the author composed, which is what lets the same flow be a
+ * right-hand drawer on one brand and an inline page area on another.
+ *
+ * In the designer the bus is inert, so the canvas shows the step that owns
+ * the current selection — clicking a step (or anything inside one) in the
+ * layer tree brings that step up — then the author's `previewStep`, then the
+ * initial step.
+ *
+ * Properties: flowId, initialStep, showBack, backLabel, previewStep,
+ * startFresh.
+ * Parts: flow, back.
+ */
+
+const containsBlockId = (
+  blocks: Block[] | undefined,
+  blockId: string
+): boolean =>
+  (blocks || []).some(
+    (candidate) =>
+      candidate.id === blockId || containsBlockId(candidate.blocks, blockId)
+  );
+
+/** A step with no authored key still needs a stable one for matching. */
+const stepTitleOf = (step: Block, currentBreakpoint: string): string =>
+  String(
+    getResponsiveValue(step.properties?.title, currentBreakpoint, '')
+  ).trim();
+
+const stepKeyOf = (step: Block, currentBreakpoint: string): string =>
+  String(
+    getResponsiveValue(step.properties?.stepKey, currentBreakpoint, '')
+  ).trim() || step.id;
+
+const AuthFlowBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner = false,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const flowId = prop('flowId', '').trim() || DEFAULT_AUTH_FLOW_ID;
+  const initialStep = prop('initialStep', '').trim();
+  const previewStep = prop('previewStep', '').trim();
+  const backLabel = prop('backLabel', 'Back');
+  const showBack = readToggle(
+    block.properties?.showBack,
+    currentBreakpoint,
+    false
+  );
+  // On: a flow that leaves the page (a drawer closing unmounts its content)
+  // forgets the abandoned journey and reopens on its initial step.
+  const startFresh = readToggle(
+    block.properties?.startFresh,
+    currentBreakpoint,
+    true
+  );
+
+  const flowState = useAuthFlowState(isDesigner ? '' : flowId);
+
+  useEffect(() => {
+    if (isDesigner) return undefined;
+
+    return registerAuthFlowMount(flowId, { resetOnLastUnmount: startFresh });
+  }, [isDesigner, flowId, startFresh]);
+
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+  const steps = childBlocks.filter(
+    (childBlock) => childBlock.type === 'auth-step'
+  );
+
+  const stepKeys = steps.map((step) => stepKeyOf(step, currentBreakpoint));
+
+  /**
+   * Which step to show. Every candidate is validated against the authored
+   * steps — a stale bus entry (a step the author renamed away) or a typo'd
+   * initial step must fall through, not blank the flow.
+   */
+  const resolveActiveKey = (): string => {
+    if (isDesigner && selectedBlockId) {
+      const selected = steps.find(
+        (step) =>
+          step.id === selectedBlockId ||
+          containsBlockId(step.blocks, selectedBlockId)
+      );
+      if (selected) return stepKeyOf(selected, currentBreakpoint);
+    }
+
+    const candidates = isDesigner
+      ? [previewStep, initialStep]
+      : [flowState?.active ?? '', initialStep];
+
+    for (const candidate of candidates) {
+      if (candidate && stepKeys.includes(candidate)) return candidate;
+    }
+
+    return stepKeys[0] ?? '';
+  };
+
+  const activeKey = resolveActiveKey();
+
+  if (steps.length === 0 && !isDesigner) return null;
+
+  /**
+   * The children, with the six editor callbacks each one needs to be movable,
+   * duplicable, hideable, deletable and renamable on the canvas.
+   *
+   * Through the package's own `renderComposedChildren` rather than a private
+   * copy of it. The copies each posted their messages to `'*'`, which
+   * `editor-bridge.ts` exists to prevent — it addresses the editor's real
+   * origin, so an editor command never reaches whatever other page happens to
+   * be embedding the storefront — and every copy was a place a new message
+   * field had to be remembered.
+   */
+  const renderChild = (childBlock: Block) =>
+    renderComposedChildren({
+      blocks: [childBlock],
+      placeholderId,
+      sectionId,
+      isDesigner,
+      selectedBlockId,
+      currentBreakpoint
+    })[0] ?? null;
+
+  // Shown on the storefront only once there is somewhere to go back TO; in the
+  // canvas it shows whenever enabled, so it can be styled without navigating.
+  const canGoBack = isDesigner
+    ? showBack
+    : showBack &&
+      Boolean(
+        flowState && (flowState.history.length > 0 || initialStep !== activeKey)
+      );
+
+  const backButton = canGoBack ? (
+    <button
+      type="button"
+      data-auth-flow-back=""
+      {...partAttrs('back')}
+      onClick={() => {
+        if (isDesigner) return;
+        goBackAuthStep(flowId);
+      }}
+      style={{
+        alignSelf: 'flex-start',
+        padding: 0,
+        margin: 0,
+        border: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        font: 'inherit',
+        cursor: 'pointer',
+        textDecoration: 'underline'
+      }}
+    >
+      {backLabel}
+    </button>
+  ) : null;
+
+  /**
+   * What the shared title row renders. Derived here because this is where the
+   * active step is decided — a row that is a SIBLING of the steps could never
+   * work it out for itself.
+   */
+  const activeStepBlock = steps.find(
+    (step) => stepKeyOf(step, currentBreakpoint) === activeKey
+  );
+  const activeStep = {
+    key: activeKey,
+    title: activeStepBlock
+      ? stepTitleOf(activeStepBlock, currentBreakpoint)
+      : ''
+  };
+
+  return (
+    <AuthFlowIdContext.Provider value={flowId}>
+      <ActiveAuthStepContext.Provider value={activeStep}>
+        <div
+          data-auth-flow=""
+          // Fills its block wrapper; see the note in auth-step-block.tsx.
+          className="w-full"
+          data-auth-flow-id={flowId}
+          data-auth-flow-step={activeKey || undefined}
+          {...partAttrs('flow')}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--auth-flow-gap, 16px)'
+          }}
+        >
+          {backButton}
+
+          {childBlocks.length === 0 ? (
+            <DesignerPlaceholder label="Auth flow (add an Auth Step per screen)" />
+          ) : (
+            childBlocks.map((childBlock) => {
+              if (childBlock.type !== 'auth-step') {
+                return renderChild(childBlock);
+              }
+
+              if (stepKeyOf(childBlock, currentBreakpoint) !== activeKey) {
+                return null;
+              }
+
+              return renderChild(childBlock);
+            })
+          )}
+        </div>
+      </ActiveAuthStepContext.Provider>
+    </AuthFlowIdContext.Provider>
+  );
+};
+
+export default AuthFlowBlock;