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

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

@@ -0,0 +1,717 @@
+'use client';
+
+import React, { useContext, useState } from 'react';
+import { useParams, useSearchParams } from 'next/navigation';
+import {
+  usePasswordResetMutation,
+  useGetValidatePasswordResetTokenQuery
+} from '@akinon/next/data/client/account';
+import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
+import { readToggle } from './product-block-utils';
+import {
+  AuthFieldErrors,
+  AuthFieldErrorsProvider,
+  clearAuthFieldError,
+  collectAuthFieldErrors,
+  focusFirstAuthFieldError
+} from '../auth/auth-field-errors';
+import {
+  authFormMessage,
+  readCommerceError,
+  splitByKnownFields
+} from '../auth/read-auth-error';
+import {
+  AuthFormErrorProvider,
+  containsAuthErrorBlock
+} from '../auth/form-error-context';
+import {
+  AuthFormSuccessProvider,
+  containsAuthSuccessBlock
+} from '../auth/form-success-context';
+import {
+  AuthFormStateProvider,
+  AuthFormStateValue,
+  containsFormStateBlock,
+  showsInFormState
+} from '../auth/form-state-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 { useHostModalCloser } from '../overlays/modal-host-context';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * The two names this form submits under, and therefore the only two a
+ * field-level refusal can be hung on.
+ */
+const RESET_PASSWORD_FIELD_NAMES = ['password', 'repeatPassword'] as const;
+
+/**
+ * What commerce calls the two boxes, and what this form calls them.
+ *
+ * The mutation posts `new_password1` / `new_password2` (see
+ * `account.passwordReset`), so a refusal comes back under those names — which
+ * no control on screen submits under. Without the map every "this password is
+ * too common" would be lifted to the form-level slot as an orphan instead of
+ * landing under the box it is about.
+ */
+const SERVER_FIELD_ALIASES: Record<string, string> = {
+  new_password1: 'password',
+  new_password2: 'repeatPassword'
+};
+
+const RESET_PREVIEW_STATES = [
+  'form',
+  'success',
+  'expired',
+  'checking'
+] as const;
+
+type ResetPreviewState = (typeof RESET_PREVIEW_STATES)[number];
+
+const TOKEN_SOURCES = ['path', 'query'] as const;
+
+/** The token, as the reset mail's link carries it. */
+const readToken = (
+  source: (typeof TOKEN_SOURCES)[number],
+  params: Record<string, string | string[] | undefined>,
+  search: URLSearchParams | null,
+  queryKey: string
+): string => {
+  if (source === 'query') return (search?.get(queryKey) || '').trim();
+
+  /**
+   * A catch-all route segment, joined back into the token commerce issued:
+   * pz's own route is `/users/reset/[[...id]]`, and the token contains
+   * slashes, so the segments have to be put back together. The three names are
+   * the ones brands actually use for that segment; a brand whose segment is
+   * named otherwise points the block at the query instead.
+   */
+  const raw = params.id ?? params.token ?? params.slug;
+
+  return (Array.isArray(raw) ? raw.join('/') : raw || '').trim();
+};
+
+/**
+ * Functional auth block: the screen the password-reset MAIL lands on — the two
+ * new-password boxes, the link's own validity, and what the shopper sees when
+ * it has expired or when the password has been changed.
+ *
+ * The other half of the reset journey was the half the editor could not see.
+ * `forgot-password` composes the request, and then handed the shopper to a page
+ * every brand hand-wrote: the same two inputs, the same four states, restyled
+ * per brand and drifting from the drawer they started in. This block is that
+ * page, composable the same way every other auth form is.
+ *
+ * Composable: with children the form draws THEM — an `auth-field` per box, the
+ * message a Form Error block, the CTA an ordinary Button — and reads the values
+ * back out of `FormData` on submit. Left empty it draws its own two rows, so a
+ * brand that only wants the screen gets it without composing anything.
+ *
+ * The three states that are not the form are authored copy, and each can hand
+ * the journey to a STEP instead: an expired link belongs back at the
+ * `forgot-password` step (a fresh mail is the only way forward), and a changed
+ * password belongs wherever the brand wants the shopper next. That is the same
+ * handoff `forgot-password` and `register-form` already use, and it is why
+ * those states need no blocks of their own.
+ *
+ * Properties: submitLabel, busyLabel, showLabels, passwordLabel,
+ * passwordPlaceholder, repeatPasswordLabel, repeatPasswordPlaceholder,
+ * requiredMessage, invalidMessage, mismatchMessage, errorLabel, successLabel,
+ * successStepTarget, expiredLabel, expiredStepTarget, checkingLabel,
+ * backLabel, backStepTarget, tokenSource, tokenQueryKey, previewState,
+ * formHtmlId, showSubmit.
+ * Parts: form, field, label, input, error, submit, success, expired, checking,
+ * back.
+ */
+const ResetPasswordBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  /**
+   * Whether finishing closes the modal this block is inside. OFF by default
+   * here, because this block's success state is something the shopper is meant
+   * to read — see `useHostModalCloser`.
+   */
+  const closeHostModalOnSuccess = readToggle(
+    block.properties?.closeHostModalOnSuccess,
+    currentBreakpoint,
+    false
+  );
+  const closeHostModal = useHostModalCloser(closeHostModalOnSuccess);
+
+
+  const submitLabel = prop('submitLabel', 'Save new password');
+  const busyLabel = prop('busyLabel', '');
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    true
+  );
+  const passwordLabel = prop('passwordLabel', 'New password');
+  const passwordPlaceholder = prop('passwordPlaceholder', '');
+  const repeatPasswordLabel = prop('repeatPasswordLabel', 'New password again');
+  const repeatPasswordPlaceholder = prop('repeatPasswordPlaceholder', '');
+
+  const requiredMessage = prop('requiredMessage', 'This field is required.');
+  const invalidMessage = prop('invalidMessage', 'Please check this field.');
+  /**
+   * The one rule this form checks that no `required` can express, and the
+   * reason it is checked at all: commerce answers a mismatch with a refusal
+   * the shopper has to read at the bottom of a round trip, when the browser
+   * could have said it before the request left.
+   */
+  const mismatchMessage = prop(
+    'mismatchMessage',
+    'The two passwords do not match.'
+  );
+  const errorLabel = prop(
+    'errorLabel',
+    'Could not set the new password. Please try again.'
+  );
+  const successLabel = prop('successLabel', 'Your password has been changed.');
+  const expiredLabel = prop(
+    'expiredLabel',
+    'This link has expired or has already been used.'
+  );
+  /**
+   * Empty on purpose: a link that is still being checked is a fraction of a
+   * second on a warm connection, and a sentence that appears and vanishes is
+   * worse than nothing. A brand that wants one types it.
+   */
+  const checkingLabel = prop('checkingLabel', '');
+  const backLabel = prop('backLabel', 'Back to log in');
+  const backStepTarget = prop('backStepTarget', '').trim();
+  const successStepTarget = prop('successStepTarget', '').trim();
+  /**
+   * Where an expired link sends the shopper. A step holding a
+   * `forgot-password` block is the only useful destination — a new mail is the
+   * only way forward — which is exactly what a flow can express and this block
+   * cannot.
+   */
+  const expiredStepTarget = prop('expiredStepTarget', '').trim();
+
+  const tokenSource = resolveOption<(typeof TOKEN_SOURCES)[number]>(
+    block.properties?.tokenSource,
+    currentBreakpoint,
+    'path',
+    TOKEN_SOURCES as unknown as (typeof TOKEN_SOURCES)[number][]
+  );
+  const tokenQueryKey = prop('tokenQueryKey', 'token').trim() || 'token';
+
+  /**
+   * Which state the canvas shows. Three of the four are unreachable in the
+   * editor — they need a real token, a real refusal or a real success — so
+   * without this a designer could style the form and nothing else.
+   */
+  const previewState = resolveOption<ResetPreviewState>(
+    block.properties?.previewState,
+    currentBreakpoint,
+    'form',
+    RESET_PREVIEW_STATES as unknown as ResetPreviewState[]
+  );
+
+  const formHtmlId = prop('formHtmlId', '').trim();
+  const showSubmit = readToggle(
+    block.properties?.showSubmit,
+    currentBreakpoint,
+    true
+  );
+
+  const contextFlowId = useContext(AuthFlowIdContext);
+  const backStep = resolveAuthStepTarget(backStepTarget, contextFlowId);
+  const successStep = resolveAuthStepTarget(successStepTarget, contextFlowId);
+  const expiredStep = resolveAuthStepTarget(expiredStepTarget, contextFlowId);
+
+  const params = useParams() as Record<string, string | string[] | undefined>;
+  const search = useSearchParams();
+  const token = readToken(tokenSource, params || {}, search, tokenQueryKey);
+
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+  const isComposed = childBlocks.length > 0;
+  /**
+   * Whether the composition draws the confirmation itself, with a Form Success
+   * block — in which case the form is not replaced by the built-in copy, since
+   * a block inside a form that has been swapped out is unmounted and draws
+   * nothing. See `auth/form-success-context.tsx`.
+   */
+  /**
+   * Which of this block's four screens the COMPOSITION draws itself, in a Form
+   * State container. Each one the composition owns is a built-in replacement
+   * that stands down — and it has to, since those replacements swap out the
+   * whole composition and would unmount the very container meant to draw the
+   * screen.
+   */
+  const composedScreen = (want: string) =>
+    isComposed && containsFormStateBlock(childBlocks, want, currentBreakpoint);
+  const successScreenIsComposed = composedScreen('success');
+  const successIsAuthored =
+    successScreenIsComposed ||
+    (isComposed && containsAuthSuccessBlock(childBlocks));
+
+  const [values, setValues] = useState({ password: '', repeatPassword: '' });
+  const [error, setError] = useState('');
+  const [fieldErrors, setFieldErrors] = useState<AuthFieldErrors>({});
+
+  /**
+   * The link's own validity, asked before the shopper is invited to type
+   * anything. Skipped in the canvas — the designer has no token, and asking
+   * commerce about one would answer "expired" for every composition.
+   */
+  const {
+    data: validation,
+    isLoading: isValidating,
+    isError: validationFailed
+  } = useGetValidatePasswordResetTokenQuery(token, {
+    skip: !token || isDesigner
+  });
+
+  const [passwordReset, { isLoading, isSuccess }] = usePasswordResetMutation();
+
+  const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
+    const target = event.target as { name?: string } | null;
+
+    setFieldErrors((current) =>
+      clearAuthFieldError(current, target?.name || '')
+    );
+  };
+
+  /**
+   * A detached CTA (a Button carrying this form's id) is outside this subtree,
+   * so the busy state travels through the module bus rather than through
+   * props. Same contract as the other auth forms.
+   */
+  React.useEffect(() => {
+    if (!formHtmlId) return undefined;
+
+    publishFormSubmitState(formHtmlId, isLoading);
+
+    return () => clearFormSubmitState(formHtmlId);
+  }, [formHtmlId, isLoading]);
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError('');
+
+    // Submitting inside the designer would spend the shopper's real token.
+    // `isSuccess` closes the one path that survives the success state: the
+    // composed form stays on screen when it draws its own confirmation, so a
+    // DETACHED CTA — a Button carrying this form's id, outside this subtree and
+    // therefore outside the branch that drops the built-in one — could still
+    // submit a token that has already been spent.
+    if (isDesigner || isLoading || isSuccess) return;
+
+    // Held onto because `currentTarget` is only the form for as long as the
+    // handler runs, and the refusal is read after an await.
+    const formElement = event.currentTarget;
+
+    const { errors: nextFieldErrors, firstInvalid } = collectAuthFieldErrors(
+      formElement,
+      { required: requiredMessage, invalid: invalidMessage }
+    );
+
+    const entries = new FormData(formElement);
+    const typed = isComposed
+      ? {
+          password: String(entries.get('password') ?? ''),
+          repeatPassword: String(entries.get('repeatPassword') ?? '')
+        }
+      : values;
+
+    /**
+     * The mismatch, checked only once both boxes are filled: telling a shopper
+     * the passwords do not match while they are still typing the second one is
+     * a message about work in progress.
+     */
+    const mismatched =
+      Boolean(typed.password) &&
+      Boolean(typed.repeatPassword) &&
+      typed.password !== typed.repeatPassword;
+
+    const withMismatch = mismatched
+      ? { ...nextFieldErrors, repeatPassword: mismatchMessage }
+      : nextFieldErrors;
+
+    setFieldErrors(withMismatch);
+
+    if (firstInvalid) {
+      firstInvalid.focus();
+
+      return;
+    }
+
+    if (mismatched) {
+      focusFirstAuthFieldError(formElement, withMismatch);
+
+      return;
+    }
+
+    try {
+      await passwordReset({
+        password: typed.password,
+        repeatPassword: typed.repeatPassword,
+        slug: token
+      }).unwrap();
+
+      if (successStep) setAuthStep(successStep.flowId, successStep.stepKey);
+
+      // Same rule as the forgot-password form: off by default, because
+      // "your password has been changed" is what the shopper came for.
+      closeHostModal();
+    } catch (rejection) {
+      /**
+       * What commerce actually refused — a password policy, a reused password,
+       * a token that expired between the check and the submit — routed to the
+       * box it is about through the alias map above.
+       */
+      const reading = readCommerceError((rejection as { data?: unknown })?.data);
+      const aliased = Object.entries(reading.fieldMessages).reduce(
+        (acc, [name, message]) => {
+          acc[SERVER_FIELD_ALIASES[name] || name] = message;
+
+          return acc;
+        },
+        {} as Record<string, string>
+      );
+
+      const attributed = splitByKnownFields(
+        { ...reading, fieldMessages: aliased },
+        formElement,
+        RESET_PASSWORD_FIELD_NAMES
+      );
+
+      setFieldErrors((current) => ({ ...current, ...attributed.fieldMessages }));
+      focusFirstAuthFieldError(formElement, attributed.fieldMessages);
+      setError(authFormMessage(attributed, errorLabel));
+    }
+  };
+
+  const stepControl = (
+    step: { flowId: string; stepKey: string } | null,
+    label: string,
+    marker: string
+  ) =>
+    step ? (
+      <button
+        type="button"
+        {...{ [marker]: '' }}
+        {...partAttrs('back')}
+        onClick={() => {
+          // The canvas has its own step switcher; a click here must not move
+          // the flow under the designer's feet.
+          if (isDesigner) return;
+
+          setAuthStep(step.flowId, step.stepKey);
+        }}
+        style={{
+          alignSelf: 'flex-start',
+          padding: 0,
+          margin: 0,
+          border: 'none',
+          background: 'transparent',
+          color: 'inherit',
+          font: 'inherit',
+          textDecoration: 'underline',
+          cursor: 'pointer'
+        }}
+      >
+        {label}
+      </button>
+    ) : null;
+
+  const shows = (state: ResetPreviewState) =>
+    isDesigner ? previewState === state : false;
+
+  /** Changed — for real on a storefront, on the preview select in the canvas. */
+  const inSuccessState =
+    (!isDesigner && isSuccess && !successStep) || shows('success');
+
+  // Changed. The form is replaced rather than left on screen: the token is
+  // spent, so submitting it again could only fail. A composition that placed a
+  // Form Success block keeps its own layout instead, and loses the submit for
+  // the same reason the replacement existed — see below.
+  if (inSuccessState && !successIsAuthored) {
+    return (
+      <div
+        data-reset-password=""
+        className="w-full"
+        data-reset-password-state="success"
+        {...partAttrs('success')}
+        role="status"
+      >
+        {successLabel}
+        {stepControl(backStep, backLabel, 'data-reset-password-back')}
+      </div>
+    );
+  }
+
+  // No token at all is the same dead end as a spent one — the shopper reached
+  // this screen without a link — so it is answered the same way.
+  const linkIsDead =
+    !isDesigner &&
+    !isValidating &&
+    (!token || validationFailed || validation?.validlink === false);
+
+  if ((linkIsDead || shows('expired')) && !composedScreen('expired')) {
+    return (
+      <div
+        data-reset-password=""
+        className="w-full"
+        data-reset-password-state="expired"
+        {...partAttrs('expired')}
+        role="alert"
+      >
+        {expiredLabel}
+        {stepControl(expiredStep, backLabel, 'data-reset-password-expired-back')}
+      </div>
+    );
+  }
+
+  if (
+    ((!isDesigner && isValidating) || shows('checking')) &&
+    !composedScreen('checking')
+  ) {
+    // Nothing at all unless the brand authored a sentence: see `checkingLabel`.
+    if (!checkingLabel) return null;
+
+    return (
+      <div
+        data-reset-password=""
+        className="w-full"
+        data-reset-password-state="checking"
+        {...partAttrs('checking')}
+        role="status"
+        aria-busy
+      >
+        {checkingLabel}
+      </div>
+    );
+  }
+
+  /**
+   * What the composition's Form State containers read. The screen is exclusive
+   * — the shopper is on one of the four — while `busy` and `hasError` sit
+   * beside it, so a refusal does not take the two boxes away with it.
+   */
+  const formStateValue: AuthFormStateValue = {
+    screen: inSuccessState
+      ? 'success'
+      : linkIsDead || shows('expired')
+      ? 'expired'
+      : (!isDesigner && isValidating) || shows('checking')
+      ? 'checking'
+      : 'form',
+    busy: isLoading,
+    hasError: Boolean(error)
+  };
+
+  const formStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--reset-password-gap, 12px)'
+  };
+
+  const submitButton = showSubmit ? (
+    <button
+      type="submit"
+      data-reset-password-submit=""
+      {...partAttrs('submit', { loading: isLoading, disabled: isLoading })}
+      disabled={isLoading}
+      aria-busy={isLoading}
+      style={{
+        padding: '12px 20px',
+        background: 'var(--reset-password-cta-bg, #111827)',
+        color: 'var(--reset-password-cta-color, #ffffff)',
+        border: 'none',
+        cursor: isLoading ? 'not-allowed' : 'pointer',
+        opacity: isLoading ? 0.7 : 1
+      }}
+    >
+      {isLoading && busyLabel ? busyLabel : submitLabel}
+    </button>
+  ) : null;
+
+  if (isComposed) {
+    const errorIsAuthored = containsAuthErrorBlock(childBlocks);
+
+    return (
+      <AuthFormErrorProvider value={error}>
+        {/* The confirmation, for the block the composition placed for it. Empty
+            until the password has actually been changed. */}
+        <AuthFormSuccessProvider value={inSuccessState ? successLabel : ''}>
+        <AuthFormStateProvider value={formStateValue}>
+        <AuthFieldErrorsProvider value={fieldErrors}>
+          <form
+            id={formHtmlId || undefined}
+            data-reset-password=""
+            data-reset-password-composed=""
+            className="w-full"
+            data-reset-password-state={
+              inSuccessState ? 'success' : isLoading ? 'busy' : 'idle'
+            }
+            {...partAttrs('form')}
+            onSubmit={submit}
+            noValidate
+            onInput={handleInput}
+            onChange={handleInput}
+            style={formStyle}
+          >
+            {renderComposedChildren({
+              // Only the containers this screen calls for; a child that is not
+              // a container is shared chrome and shows on all four.
+              blocks: childBlocks.filter((childBlock) =>
+                showsInFormState({
+                  block: childBlock,
+                  state: formStateValue,
+                  isDesigner,
+                  selectedBlockId,
+                  currentBreakpoint
+                })
+              ),
+              placeholderId,
+              sectionId,
+              isDesigner,
+              selectedBlockId,
+              currentBreakpoint
+            })}
+
+            {/* The fallback for a composition that has not placed a Form Error
+                block; see `auth/form-error-context.tsx`. */}
+            {error && !errorIsAuthored && (
+              <div
+                data-reset-password-error=""
+                {...partAttrs('error')}
+                role="alert"
+              >
+                {error}
+              </div>
+            )}
+
+            {/* Only on the form itself: the token is spent once the password
+                is changed and there is nothing to submit on a dead or
+                unchecked link, so a button there could only fail. */}
+            {formStateValue.screen === 'form' && submitButton}
+
+            {/* The authored way back. Not when a container owns the screen —
+                the way onward is then part of the composition. */}
+            {inSuccessState &&
+              !successScreenIsComposed &&
+              stepControl(backStep, backLabel, 'data-reset-password-back')}
+          </form>
+        </AuthFieldErrorsProvider>
+        </AuthFormStateProvider>
+        </AuthFormSuccessProvider>
+      </AuthFormErrorProvider>
+    );
+  }
+
+  const row = (
+    name: 'password' | 'repeatPassword',
+    label: string,
+    placeholder: string,
+    autoComplete: string
+  ) => (
+    <label
+      data-reset-password-field={name}
+      {...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. */}
+      {showLabels && <span {...partAttrs('label')}>{label}</span>}
+      <input
+        type="password"
+        name={name}
+        value={values[name]}
+        onChange={(event) =>
+          setValues((current) => ({ ...current, [name]: event.target.value }))
+        }
+        // `new-password` on both: this screen is where a password manager
+        // should offer to GENERATE one and save what it generated, which it
+        // will not do for a field that claims to be the current password.
+        autoComplete={autoComplete}
+        placeholder={placeholder || undefined}
+        aria-label={showLabels ? undefined : label}
+        aria-invalid={fieldErrors[name] ? true : undefined}
+        required
+        {...partAttrs('input')}
+        style={{
+          width: '100%',
+          border: `1px solid ${
+            fieldErrors[name]
+              ? 'var(--reset-password-border-invalid, #dc2626)'
+              : 'var(--reset-password-border, #d1d5db)'
+          }`,
+          background: 'transparent',
+          color: 'inherit',
+          padding: '10px 12px',
+          outline: 'none'
+        }}
+      />
+      {fieldErrors[name] && (
+        <span
+          data-reset-password-field-error={name}
+          {...partAttrs('error')}
+          role="alert"
+          style={{
+            color: 'var(--reset-password-error-color, #dc2626)',
+            fontSize: '0.875em'
+          }}
+        >
+          {fieldErrors[name]}
+        </span>
+      )}
+    </label>
+  );
+
+  return (
+    <form
+      id={formHtmlId || undefined}
+      data-reset-password=""
+      className="w-full"
+      data-reset-password-state={isLoading ? 'busy' : 'idle'}
+      {...partAttrs('form')}
+      onSubmit={submit}
+      noValidate
+      onInput={handleInput}
+      onChange={handleInput}
+      style={formStyle}
+    >
+      {row('password', passwordLabel, passwordPlaceholder, 'new-password')}
+      {row(
+        'repeatPassword',
+        repeatPasswordLabel,
+        repeatPasswordPlaceholder,
+        'new-password'
+      )}
+
+      {error && (
+        <div data-reset-password-error="" {...partAttrs('error')} role="alert">
+          {error}
+        </div>
+      )}
+
+      {submitButton}
+    </form>
+  );
+};
+
+export default ResetPasswordBlock;