@akinon/pz-theme 2.0.37-rc.0 → 2.0.38-beta.0

package/src/blocks/change-password-form-block.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useUpdatePasswordMutation } from '@akinon/next/data/client/account';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { readToggle } from './product-block-utils';
+
+const EMPTY_FORM = {
+  old_password: '',
+  new_password1: '',
+  new_password2: ''
+};
+
+/**
+ * Where the submit button sits in the form's flex column. `stretch` maps to no
+ * declaration at all: the button has always inherited the container's
+ * alignment, and writing the value out would override a brand that centres its
+ * form from custom CSS.
+ */
+const SUBMIT_ALIGNMENTS: Record<string, string> = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+
+/**
+ * Commerce rejects a password change with a field-keyed payload
+ * (`{ old_password: ['...'] }`) rather than a flat message, so the first usable
+ * string is dug out instead of showing "[object Object]" to the shopper. The
+ * fallback is passed in because the wording is an editor property.
+ */
+const readPasswordError = (error: unknown, fallback: string): string => {
+  const data = (error as { data?: unknown })?.data;
+
+  if (typeof data === 'string') return data;
+
+  if (data && typeof data === 'object') {
+    for (const value of Object.values(data as Record<string, unknown>)) {
+      if (typeof value === 'string') return value;
+      if (Array.isArray(value) && typeof value[0] === 'string') return value[0];
+    }
+  }
+
+  return fallback;
+};
+
+/**
+ * Functional account block: the change-password form. Behavior is fixed
+ * (commerce password service); the editor owns every caption and the styling.
+ * Properties: submitLabel, submitAlign, showLabels, currentPasswordLabel,
+ * newPasswordLabel, confirmPasswordLabel, helpLabel, mismatchMessage,
+ * errorMessage, successMessage.
+ * Parts: form, field, label, input, help, error, success, submit.
+ */
+const ChangePasswordFormBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const text = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const submitLabel = text('submitLabel', 'Change password');
+  const submitAlign = text('submitAlign', 'stretch');
+  const currentPasswordLabel = text('currentPasswordLabel', 'Current password');
+  const newPasswordLabel = text('newPasswordLabel', 'New password');
+  const confirmPasswordLabel = text(
+    'confirmPasswordLabel',
+    'Confirm new password'
+  );
+  const helpLabel = text('helpLabel', '');
+  const mismatchMessage = text(
+    'mismatchMessage',
+    'The new passwords do not match.'
+  );
+  const errorMessage = text(
+    'errorMessage',
+    'Your password could not be changed.'
+  );
+  const successMessage = text(
+    'successMessage',
+    'Your password has been changed.'
+  );
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    true
+  );
+
+  const [updatePassword, { isLoading }] = useUpdatePasswordMutation();
+  const [values, setValues] = useState(EMPTY_FORM);
+  const [error, setError] = useState('');
+  const [isDone, setIsDone] = useState(false);
+
+  const setField =
+    (key: keyof typeof EMPTY_FORM) =>
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.target.value;
+      setError('');
+      setIsDone(false);
+      setValues((current) => ({ ...current, [key]: nextValue }));
+    };
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    // A submit inside the designer must never change the shopper's password.
+    if (isDesigner || isLoading) return;
+
+    setError('');
+    setIsDone(false);
+
+    // Checked before the request so the obvious mistake costs a round trip to
+    // nobody; commerce validates the same rule server side regardless.
+    if (values.new_password1 !== values.new_password2) {
+      setError(mismatchMessage);
+
+      return;
+    }
+
+    try {
+      await updatePassword(values).unwrap();
+      setValues(EMPTY_FORM);
+      setIsDone(true);
+    } catch (requestError) {
+      setError(readPasswordError(requestError, errorMessage));
+    }
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    border: '1px solid var(--change-password-form-border, #d1d5db)',
+    background: 'transparent',
+    color: 'inherit',
+    padding: '10px 12px',
+    outline: 'none'
+  };
+
+  const field = (
+    key: keyof typeof EMPTY_FORM,
+    label: string,
+    autoComplete: string
+  ) => (
+    <label
+      data-change-password-form-field={key}
+      {...partAttrs('field')}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+    >
+      {showLabels && <span {...partAttrs('label')}>{label}</span>}
+      <input
+        type="password"
+        name={key}
+        value={values[key]}
+        onChange={setField(key)}
+        autoComplete={autoComplete}
+        required
+        // The caption is still announced when it is hidden visually, otherwise
+        // hiding labels would leave three identical password inputs.
+        aria-label={showLabels ? undefined : label}
+        {...partAttrs('input', { invalid: Boolean(error) })}
+        style={inputStyle}
+      />
+    </label>
+  );
+
+  return (
+    <form
+      data-change-password-form=""
+      data-change-password-form-state={
+        isLoading ? 'busy' : error ? 'error' : isDone ? 'done' : 'idle'
+      }
+      onSubmit={submit}
+      {...partAttrs('form', {
+        loading: isLoading,
+        invalid: Boolean(error)
+      })}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--change-password-form-gap, 12px)'
+      }}
+    >
+      {field('old_password', currentPasswordLabel, 'current-password')}
+      {field('new_password1', newPasswordLabel, 'new-password')}
+      {field('new_password2', confirmPasswordLabel, 'new-password')}
+
+      {helpLabel && (
+        <div data-change-password-form-help="" {...partAttrs('help')}>
+          {helpLabel}
+        </div>
+      )}
+
+      {error && (
+        <div
+          data-change-password-form-error=""
+          role="alert"
+          {...partAttrs('error', { invalid: true })}
+        >
+          {error}
+        </div>
+      )}
+
+      {isDone && (
+        <div
+          data-change-password-form-success=""
+          role="status"
+          {...partAttrs('success')}
+        >
+          {successMessage}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        data-change-password-form-submit=""
+        disabled={isLoading}
+        aria-busy={isLoading}
+        {...partAttrs('submit', { loading: isLoading })}
+        style={{
+          padding: '12px 20px',
+          background: 'var(--change-password-form-cta-bg, #111827)',
+          color: 'var(--change-password-form-cta-color, #ffffff)',
+          border: 'none',
+          cursor: isLoading ? 'not-allowed' : 'pointer',
+          opacity: isLoading ? 0.7 : 1,
+          ...(SUBMIT_ALIGNMENTS[submitAlign]
+            ? { alignSelf: SUBMIT_ALIGNMENTS[submitAlign] }
+            : null)
+        }}
+      >
+        {submitLabel}
+      </button>
+    </form>
+  );
+};
+
+export default ChangePasswordFormBlock;

package/src/blocks/checkout-steps-block.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import React from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+const DEFAULT_STEPS = 'Address, Shipping, Payment';
+
+/**
+ * URL segments that mean "the flow is over". pz sends the shopper to
+ * /orders/completed/<token> after payment, so the last step is highlighted
+ * there without the author having to configure anything.
+ */
+const COMPLETION_SEGMENTS = new Set([
+  'completed',
+  'complete',
+  'success',
+  'confirmation',
+  'thank-you'
+]);
+
+const slugify = (value: string) =>
+  value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+/**
+ * Resolves the active step from the URL. Returns null when the URL says
+ * nothing about the step, which is the normal case on pz checkout: the flow
+ * itself is redux-driven and never writes the step into the address bar.
+ */
+const resolveStepFromUrl = (
+  slugs: string[],
+  pathname: string,
+  stepParam: string | null
+): number | null => {
+  if (stepParam) {
+    const numeric = Number(stepParam);
+
+    if (Number.isFinite(numeric) && numeric >= 1 && numeric <= slugs.length) {
+      return Math.round(numeric) - 1;
+    }
+
+    const matched = slugs.indexOf(slugify(stepParam));
+    if (matched >= 0) return matched;
+  }
+
+  const segments = String(pathname || '')
+    .split('/')
+    .filter(Boolean)
+    .map(slugify);
+
+  // Scanned from the end: the deepest segment is the most specific one, so
+  // /orders/checkout/payment resolves to "payment" and not to "checkout".
+  for (let index = segments.length - 1; index >= 0; index -= 1) {
+    const segment = segments[index];
+
+    if (COMPLETION_SEGMENTS.has(segment)) return slugs.length - 1;
+
+    const matched = slugs.indexOf(segment);
+    if (matched >= 0) return matched;
+  }
+
+  return null;
+};
+
+const CheckGlyph = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="3"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M4 12l6 6L20 6" />
+  </svg>
+);
+
+/**
+ * Presentational checkout step indicator. It reflects progress, it does not
+ * produce it: there are no links, no buttons and no dispatches, so clicking a
+ * step cannot move the shopper between checkout steps. Step transitions stay
+ * owned by the checkout variant (which validates addresses, shipping options
+ * and payment state before advancing).
+ *
+ * The active step comes from the URL when the URL carries one (a `step` query
+ * parameter, a matching path segment, or a completion segment). In the
+ * designer the `activeStep` property wins instead, so an author can preview
+ * every state without a live checkout behind the preview.
+ *
+ * Parts: root, step (states: selected = current, checked = done,
+ * disabled = upcoming), step-index, step-label, connector, empty. A child
+ * marked as the item template replaces the built-in step.
+ */
+const CheckoutStepsBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const rawSteps = prop('steps', DEFAULT_STEPS);
+  const steps = rawSteps
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+
+  const rawActiveStep = Number(
+    getResponsiveValue(block.properties?.activeStep, currentBreakpoint, 1)
+  );
+
+  const showIndex = readToggle(
+    block.properties?.showIndex,
+    currentBreakpoint,
+    true
+  );
+  const showLabel = readToggle(
+    block.properties?.showLabel,
+    currentBreakpoint,
+    true
+  );
+  const showConnector = readToggle(
+    block.properties?.showConnector,
+    currentBreakpoint,
+    false
+  );
+  const doneIcon = prop('doneIcon', 'number');
+  const emptyLabel = prop('emptyLabel', '').trim();
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const slugs = steps.map(slugify);
+  const propertyIndex = Number.isFinite(rawActiveStep)
+    ? Math.min(
+        Math.max(steps.length - 1, 0),
+        Math.max(0, Math.round(rawActiveStep) - 1)
+      )
+    : 0;
+  const urlIndex = isDesigner
+    ? null
+    : resolveStepFromUrl(slugs, pathname || '', searchParams?.get('step') ?? null);
+
+  const activeIndex = urlIndex ?? propertyIndex;
+
+  const stepState = (index: number): 'done' | 'current' | 'upcoming' =>
+    index < activeIndex ? 'done' : index === activeIndex ? 'current' : 'upcoming';
+
+  // Plain objects so a designer binds item.label / item.index / item.state in
+  // their own step layout.
+  const templateSteps = steps.map((label, index) => ({
+    key: `${slugs[index]}-${index}`,
+    label,
+    index: index + 1,
+    slug: slugs[index],
+    state: stepState(index)
+  }));
+
+  const customSteps = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={templateSteps as unknown as Record<string, unknown>[]}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  if (steps.length === 0) {
+    if (!isDesigner && !emptyLabel) return null;
+
+    return (
+      <div
+        data-checkout-steps=""
+        data-checkout-steps-state="empty"
+        {...partAttrs('empty', { empty: true })}
+      >
+        {emptyLabel || (isDesigner ? 'Checkout steps (no steps configured)' : '')}
+      </div>
+    );
+  }
+
+  return (
+    <ol
+      data-checkout-steps=""
+      data-checkout-steps-active={slugs[activeIndex] || ''}
+      {...partAttrs('root')}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--checkout-steps-gap, 16px)',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0
+      }}
+    >
+      {customSteps ??
+        steps.map((label, index) => {
+          const state = stepState(index);
+          const isDone = state === 'done';
+
+          return (
+            <li
+              key={`${slugs[index]}-${index}`}
+              data-checkout-step=""
+              data-checkout-step-state={state}
+              aria-current={state === 'current' ? 'step' : undefined}
+              {...partAttrs('step', {
+                selected: state === 'current',
+                checked: isDone,
+                disabled: state === 'upcoming'
+              })}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '8px',
+                opacity: state === 'upcoming' ? 0.5 : 1,
+                fontWeight: state === 'current' ? 600 : 400
+              }}
+            >
+              {showIndex && (
+                <span
+                  data-checkout-step-index=""
+                  aria-hidden="true"
+                  {...partAttrs('step-index', {
+                    selected: state === 'current',
+                    checked: isDone,
+                    disabled: state === 'upcoming'
+                  })}
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '24px',
+                    height: '24px',
+                    borderRadius: '50%',
+                    border: '1px solid currentColor',
+                    fontSize: '0.8em',
+                    flex: '0 0 auto'
+                  }}
+                >
+                  {isDone && doneIcon === 'check' ? <CheckGlyph /> : index + 1}
+                </span>
+              )}
+              {showLabel && (
+                <span data-checkout-step-label="" {...partAttrs('step-label')}>
+                  {label}
+                </span>
+              )}
+              {showConnector && index < steps.length - 1 && (
+                <span
+                  data-checkout-step-connector=""
+                  aria-hidden="true"
+                  {...partAttrs('connector', { checked: isDone })}
+                  style={{
+                    display: 'block',
+                    width: '24px',
+                    height: '1px',
+                    background: 'currentColor',
+                    opacity: 0.35,
+                    flex: '0 0 auto'
+                  }}
+                />
+              )}
+            </li>
+          );
+        })}
+    </ol>
+  );
+};
+
+export default CheckoutStepsBlock;