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

package/src/blocks/product-title-block.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  DesignerPlaceholder,
+  getProductName,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+const ALLOWED_TAGS = ['h1', 'h2', 'h3', 'div', 'span'];
+const ALLOWED_BRAND_POSITIONS = ['before', 'after'];
+
+/**
+ * Commerce sends the brand as a bare string on some payloads and as a
+ * `{ name }` record on others, so both shapes resolve to the same caption.
+ */
+const readBrandName = (value: unknown): string => {
+  if (typeof value === 'string') return value.trim();
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+    const name = record.name ?? record.label ?? record.title;
+    if (typeof name === 'string') return name.trim();
+  }
+  return '';
+};
+
+/**
+ * Functional PDP block: the product name. Content stays commerce-driven; the
+ * editor owns the heading level (one h1 per page), the optional brand caption,
+ * line clamping and — through named parts — the styling.
+ * Properties: tag, showBrand, brandPosition, maxLines.
+ */
+const ProductTitleBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+
+  const tagValue = String(
+    getResponsiveValue(block.properties?.tag, currentBreakpoint, 'h1')
+  );
+  const Tag = (
+    ALLOWED_TAGS.includes(tagValue) ? tagValue : 'h1'
+  ) as React.ElementType;
+
+  const showBrand = readToggle(
+    block.properties?.showBrand,
+    currentBreakpoint,
+    false
+  );
+  const brandPositionValue = String(
+    getResponsiveValue(block.properties?.brandPosition, currentBreakpoint, 'before')
+  );
+  const brandPosition = ALLOWED_BRAND_POSITIONS.includes(brandPositionValue)
+    ? brandPositionValue
+    : 'before';
+  const maxLines = Number(
+    getResponsiveValue(block.properties?.maxLines, currentBreakpoint, 0)
+  );
+
+  const title = getProductName(product);
+  const brand = showBrand
+    ? readBrandName(pickProductField(product, 'brand'))
+    : '';
+
+  if (!title) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Product title (no product)"
+        attribute="data-product-title"
+      />
+    ) : null;
+  }
+
+  // 0 means "no clamp": the clamp declarations are only added when a brand
+  // asked for one, so an unclamped title keeps its original box model.
+  const clampLines = Number.isFinite(maxLines) && maxLines > 0 ? maxLines : 0;
+  const clampStyle: React.CSSProperties = clampLines
+    ? {
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        WebkitLineClamp: clampLines,
+        overflow: 'hidden'
+      }
+    : {};
+
+  const brandNode = brand ? (
+    <span
+      data-product-title-brand=""
+      {...partAttrs('brand')}
+      style={{
+        display: 'block',
+        fontSize: '0.75em',
+        fontWeight: 'inherit',
+        opacity: 0.7
+      }}
+    >
+      {brand}
+    </span>
+  ) : null;
+
+  return (
+    <Tag
+      data-product-title=""
+      {...partAttrs('title')}
+      style={{
+        // Reset the browser heading defaults so the editor styles on the block
+        // wrapper are what actually decides size, weight and spacing.
+        margin: 0,
+        color: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        lineHeight: 'inherit',
+        ...clampStyle
+      }}
+    >
+      {brandPosition === 'before' && brandNode}
+      {title}
+      {brandPosition === 'after' && brandNode}
+    </Tag>
+  );
+};
+
+export default ProductTitleBlock;

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

@@ -0,0 +1,297 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useSession } from 'next-auth/react';
+import {
+  useGetProfileInfoQuery,
+  useUpdateProfileMutation
+} from '@akinon/next/data/client/account';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+
+interface ProfileLike {
+  first_name?: string;
+  last_name?: string;
+  email?: string;
+  phone?: string;
+  date_of_birth?: string;
+  gender?: string | null;
+  sms_allowed?: boolean;
+  email_allowed?: boolean;
+}
+
+const EMPTY_FORM = {
+  first_name: '',
+  last_name: '',
+  phone: '',
+  date_of_birth: ''
+};
+
+/**
+ * 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'
+};
+
+/**
+ * Functional account block: the shopper's profile form. Profile CONTENT stays
+ * commerce-driven (account profile service); the editor owns every caption,
+ * which fields are exposed and the styling.
+ *
+ * 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.
+ * Parts: form, field, label, input, help, error, success, submit.
+ */
+const ProfileFormBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const text = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const submitLabel = text('submitLabel', 'Save changes');
+  const submitAlign = text('submitAlign', 'stretch');
+  const firstNameLabel = text('firstNameLabel', 'First name');
+  const lastNameLabel = text('lastNameLabel', 'Last name');
+  const emailLabel = text('emailLabel', 'E-mail');
+  const phoneLabel = text('phoneLabel', 'Phone');
+  const birthDateLabel = text('birthDateLabel', 'Date of birth');
+  const helpLabel = text('helpLabel', '');
+  const errorMessage = text('errorMessage', 'Your profile could not be saved.');
+  const successMessage = text(
+    'successMessage',
+    'Your profile has been saved.'
+  );
+  const showPhone = readToggle(
+    block.properties?.showPhone,
+    currentBreakpoint,
+    true
+  );
+  const showEmail = readToggle(
+    block.properties?.showEmail,
+    currentBreakpoint,
+    true
+  );
+  const showBirthDate = readToggle(
+    block.properties?.showBirthDate,
+    currentBreakpoint,
+    true
+  );
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    true
+  );
+
+  const { status: sessionStatus } = useSession();
+  const isAuthenticated = sessionStatus === 'authenticated';
+
+  // Guests have no profile endpoint; skipping avoids a guaranteed 403 on every
+  // page that hosts this block.
+  const { data: profile, isLoading } = useGetProfileInfoQuery(undefined, {
+    skip: !isAuthenticated
+  });
+  const [updateProfile, { isLoading: isSaving }] = useUpdateProfileMutation();
+
+  const [values, setValues] = useState(EMPTY_FORM);
+  const [status, setStatus] = useState<'idle' | 'saved' | 'error'>('idle');
+
+  const loadedProfile = (profile ?? null) as ProfileLike | null;
+
+  useEffect(() => {
+    if (!loadedProfile) return;
+
+    setValues({
+      first_name: loadedProfile.first_name || '',
+      last_name: loadedProfile.last_name || '',
+      phone: loadedProfile.phone || '',
+      // A date input's value must be ISO 8601 per the HTML spec, so it is fed
+      // the raw commerce value rather than a display-formatted date; the
+      // control localises its own presentation.
+      date_of_birth: String(loadedProfile.date_of_birth || '').slice(0, 10)
+    });
+  }, [loadedProfile]);
+
+  const setField =
+    (key: keyof typeof EMPTY_FORM) =>
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.target.value;
+      setStatus('idle');
+      setValues((current) => ({ ...current, [key]: nextValue }));
+    };
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    // A submit inside the designer must never write to the shopper's account.
+    if (isDesigner || isSaving) return;
+
+    setStatus('idle');
+
+    try {
+      await updateProfile({
+        first_name: values.first_name,
+        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.
+        gender: loadedProfile?.gender ?? '',
+        sms_allowed: loadedProfile?.sms_allowed ?? false,
+        email_allowed: loadedProfile?.email_allowed ?? false
+      }).unwrap();
+
+      setStatus('saved');
+    } catch {
+      setStatus('error');
+    }
+  };
+
+  if (!isDesigner && !isAuthenticated) return null;
+
+  if (isDesigner && !loadedProfile && !isLoading) {
+    return (
+      <DesignerPlaceholder
+        label="Profile form (no profile data)"
+        attribute="data-profile-form"
+      />
+    );
+  }
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    border: '1px solid var(--profile-form-border, #d1d5db)',
+    background: 'transparent',
+    color: 'inherit',
+    padding: '10px 12px',
+    outline: 'none'
+  };
+
+  const field = (
+    key: keyof typeof EMPTY_FORM,
+    label: string,
+    type: string,
+    autoComplete: string
+  ) => (
+    <label
+      data-profile-form-field={key}
+      {...partAttrs('field')}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+    >
+      {showLabels && <span {...partAttrs('label')}>{label}</span>}
+      <input
+        type={type}
+        name={key}
+        value={values[key]}
+        onChange={setField(key)}
+        autoComplete={autoComplete}
+        // The caption is still announced when it is hidden visually, otherwise
+        // hiding labels would leave a row of unnamed inputs.
+        aria-label={showLabels ? undefined : label}
+        {...partAttrs('input')}
+        style={inputStyle}
+      />
+    </label>
+  );
+
+  return (
+    <form
+      data-profile-form=""
+      data-profile-form-state={isSaving ? 'busy' : status}
+      onSubmit={submit}
+      {...partAttrs('form', { loading: isSaving, invalid: status === 'error' })}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--profile-form-gap, 12px)'
+      }}
+    >
+      {field('first_name', firstNameLabel, 'text', 'given-name')}
+      {field('last_name', lastNameLabel, 'text', 'family-name')}
+
+      {showEmail && (
+        <label
+          data-profile-form-field="email"
+          {...partAttrs('field')}
+          style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+        >
+          {showLabels && <span {...partAttrs('label')}>{emailLabel}</span>}
+          <input
+            type="email"
+            name="email"
+            value={loadedProfile?.email || ''}
+            readOnly
+            disabled
+            autoComplete="email"
+            aria-label={showLabels ? undefined : emailLabel}
+            {...partAttrs('input', { disabled: true })}
+            style={{ ...inputStyle, opacity: 0.6 }}
+          />
+        </label>
+      )}
+
+      {showPhone && field('phone', phoneLabel, 'tel', 'tel')}
+      {showBirthDate && field('date_of_birth', birthDateLabel, 'date', 'bday')}
+
+      {helpLabel && (
+        <div data-profile-form-help="" {...partAttrs('help')}>
+          {helpLabel}
+        </div>
+      )}
+
+      {status === 'error' && (
+        <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>
+  );
+};
+
+export default ProfileFormBlock;

package/src/blocks/recently-viewed-store.ts

@@ -0,0 +1,201 @@
+'use client';
+
+/**
+ * The browser's own "recently viewed" list.
+ *
+ * WHY A COPY OF THE PRODUCT IS STORED, NOT JUST ITS ID
+ * ----------------------------------------------------
+ * The right thing is to store ids and resolve them at read time, so the strip
+ * always shows today's price, name and photo. v1/v2 core exposes exactly one
+ * product read endpoint — `/product/{pk}/` (`useGetProductByPkQuery`) — and it
+ * takes ONE pk. There is no `pk__in`, no product-list-by-id, and the
+ * collection/widget endpoint the block's other source uses is addressed by
+ * slug, not by pk. Resolving a strip of up to 24 cards would therefore mean up
+ * to 24 separate PDP-sized round trips fired from every page the strip sits
+ * on, from a `useEffect` whose length is not known until storage has been
+ * read (so it cannot even be expressed as a fixed set of hooks). That is not a
+ * trade a storefront can make for a secondary strip.
+ *
+ * So the minimum a card needs is copied instead: name, url, image, the RAW
+ * price amount and its currency.
+ *
+ * WHAT GOES STALE, AND HOW IT IS CONTAINED
+ * ----------------------------------------
+ * - price: a discount that started after the view is not reflected. The RAW
+ *   amount is stored rather than a formatted string, so at least the money is
+ *   re-formatted at read time with the CURRENT locale and money format and a
+ *   shopper who switches language never sees a frozen "1,299.00" string.
+ * - name / image: a re-merchandised product shows its old title or photo.
+ * - availability and the URL: a delisted product can still appear, and its
+ *   link can 404.
+ * All four are bounded by `maxAgeDays`: entries older than the author's window
+ * are dropped on read, so the copy has a shelf life rather than living
+ * forever. The card is a navigation aid; the PDP it links to is the source of
+ * truth and re-reads everything from commerce.
+ *
+ * Every storage access is wrapped: reading `window.localStorage` THROWS (it
+ * does not return null) in a Safari private window and under a "block all
+ * cookies" policy, `getItem` can hold another app's payload, and `setItem`
+ * throws `QuotaExceededError` on a full origin.
+ */
+
+export interface RecentlyViewedEntry {
+  /** Commerce pk, as text — the identity used for dedupe and exclusion. */
+  pk: string;
+  name: string;
+  url: string;
+  image: string;
+  /** RAW commerce amount. Formatting happens at read time, never here. */
+  price: string;
+  currency: string;
+  /** Epoch ms of the view, so `maxAgeDays` can expire the entry. */
+  viewedAt: number;
+}
+
+export const DEFAULT_RECENTLY_VIEWED_KEY = 'pz-recently-viewed';
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+const toText = (value: unknown): string =>
+  typeof value === 'string'
+    ? value
+    : typeof value === 'number' && Number.isFinite(value)
+    ? String(value)
+    : '';
+
+const getStorage = (): Storage | null => {
+  try {
+    // The property access itself is what throws when storage is blocked, so it
+    // has to be inside the try rather than guarded by a typeof check.
+    return typeof window === 'undefined' ? null : window.localStorage ?? null;
+  } catch {
+    return null;
+  }
+};
+
+const normalizeEntry = (value: unknown): RecentlyViewedEntry | null => {
+  if (!value || typeof value !== 'object') return null;
+
+  const record = value as Record<string, unknown>;
+  const pk = toText(record.pk);
+  // Without a pk there is nothing to dedupe on and nothing to exclude the
+  // viewed product by, so the row is unusable rather than merely incomplete.
+  if (!pk) return null;
+
+  const viewedAt = Number(record.viewedAt);
+
+  return {
+    pk,
+    name: toText(record.name),
+    url: toText(record.url),
+    image: toText(record.image),
+    price: toText(record.price),
+    currency: toText(record.currency),
+    viewedAt: Number.isFinite(viewedAt) ? viewedAt : 0
+  };
+};
+
+/**
+ * Most recent first. `maxAgeDays` of 0 disables expiry — used internally by
+ * the writer, which must not silently drop the entries it is about to rewrite.
+ */
+export const readRecentlyViewed = (
+  storageKey: string,
+  maxAgeDays = 0
+): RecentlyViewedEntry[] => {
+  const storage = getStorage();
+  if (!storage || !storageKey) return [];
+
+  let raw: string | null = null;
+  try {
+    raw = storage.getItem(storageKey);
+  } catch {
+    return [];
+  }
+  if (!raw) return [];
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    // Someone else's key, or a half-written value: treat as no history rather
+    // than taking the page down.
+    return [];
+  }
+  if (!Array.isArray(parsed)) return [];
+
+  const cutoff = maxAgeDays > 0 ? Date.now() - maxAgeDays * DAY_MS : null;
+
+  return parsed
+    .map(normalizeEntry)
+    .filter((entry): entry is RecentlyViewedEntry => {
+      if (!entry) return false;
+      // viewedAt 0 means "written by an older format"; it is kept rather than
+      // expired, because dropping it would empty every existing strip at once.
+      if (cutoff === null || !entry.viewedAt) return true;
+      return entry.viewedAt >= cutoff;
+    });
+};
+
+/** Newest first, deduped by pk, capped at `capacity`. Never throws. */
+export const recordRecentlyViewed = (
+  storageKey: string,
+  entry: RecentlyViewedEntry,
+  capacity: number
+): void => {
+  const storage = getStorage();
+  if (!storage || !storageKey || !entry.pk || capacity < 1) return;
+
+  const previous = readRecentlyViewed(storageKey);
+  const next = [
+    entry,
+    ...previous.filter((existing) => existing.pk !== entry.pk)
+  ].slice(0, capacity);
+
+  try {
+    storage.setItem(storageKey, JSON.stringify(next));
+  } catch {
+    // Quota exceeded. Our own key is the likeliest bloat, so one retry with
+    // just this view reclaims it; if the origin is full because of something
+    // else, the view is simply not recorded.
+    try {
+      storage.setItem(storageKey, JSON.stringify([entry]));
+    } catch {
+      /* Recording history is never worth an exception on a page the shopper
+         is already reading. */
+    }
+  }
+};
+
+/**
+ * Runs `task` off the critical path and returns its canceller. The recording
+ * is a side effect on a page the shopper came to read, so it waits for idle
+ * time; the timeout fallback covers browsers without `requestIdleCallback`
+ * (Safari) and guarantees the write still happens on a busy page.
+ */
+export const deferIdleTask = (task: () => void): (() => void) => {
+  const scope = typeof window === 'undefined' ? null : window;
+  if (!scope) return () => undefined;
+
+  const idle = (
+    scope as Window & {
+      requestIdleCallback?: (cb: () => void, opts?: { timeout: number }) => number;
+      cancelIdleCallback?: (handle: number) => void;
+    }
+  ).requestIdleCallback;
+
+  if (typeof idle === 'function') {
+    const handle = idle.call(scope, task, { timeout: 2000 });
+
+    return () => {
+      const cancel = (
+        scope as Window & { cancelIdleCallback?: (handle: number) => void }
+      ).cancelIdleCallback;
+      if (typeof cancel === 'function') cancel.call(scope, handle);
+    };
+  }
+
+  const timer = scope.setTimeout(task, 0);
+
+  return () => scope.clearTimeout(timer);
+};