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

package/src/blocks/account-button-block.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { useSession } from 'next-auth/react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { readToggle } from './product-block-utils';
+
+const clampNumber = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+/**
+ * Functional chrome block: session-aware account entry point. Renders a
+ * login link for guests and an account link for authenticated users; the
+ * editor owns placement, labels, icon and styling.
+ * Properties: accountHref, loginHref, accountLabel, loginLabel, showLabel,
+ * showIcon, iconSize, gap, labelPosition, ariaLabel.
+ * Parts: link, icon, label. The signed-in state stays readable from custom
+ * CSS through the block's own `data-auth-state` attribute.
+ */
+const AccountButtonBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const { status } = useSession();
+  const isAuthenticated = status === 'authenticated';
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const href = isAuthenticated
+    ? prop('accountHref', '/account')
+    : prop('loginHref', '/auth');
+  const label = isAuthenticated
+    ? prop('accountLabel', 'Account')
+    : prop('loginLabel', 'Login');
+  const showLabel =
+    getResponsiveValue(
+      block.properties?.showLabel,
+      currentBreakpoint,
+      false
+    ) === true ||
+    String(
+      getResponsiveValue(
+        block.properties?.showLabel,
+        currentBreakpoint,
+        'false'
+      )
+    ) === 'true';
+  const showIcon = readToggle(
+    block.properties?.showIcon,
+    currentBreakpoint,
+    true
+  );
+  const iconSize = clampNumber(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 24),
+    24,
+    12,
+    64
+  );
+  const gap = clampNumber(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 6),
+    6,
+    0,
+    32
+  );
+  const labelPosition = prop('labelPosition', 'after');
+  // Empty on purpose: the link has always announced itself with its own
+  // label, so an unset override must keep doing exactly that.
+  const ariaLabel = prop('ariaLabel', '');
+
+  const labelNode = showLabel ? (
+    <span data-account-label="" {...partAttrs('label')}>
+      {label}
+    </span>
+  ) : null;
+
+  return (
+    <NextLink
+      href={href}
+      data-account-button=""
+      data-auth-state={isAuthenticated ? 'authenticated' : 'guest'}
+      {...partAttrs('link')}
+      aria-label={ariaLabel || label}
+      // Navigating inside the designer iframe would drop the author out of the
+      // page they are editing.
+      onClick={(event) => {
+        if (isDesigner) event.preventDefault();
+      }}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: `${gap}px`,
+        color: 'inherit',
+        textDecoration: 'none'
+      }}
+    >
+      {labelPosition === 'before' && labelNode}
+
+      {showIcon && (
+        <svg
+          width={iconSize}
+          height={iconSize}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          data-account-icon=""
+          {...partAttrs('icon')}
+        >
+          <circle cx="12" cy="8" r="4" />
+          <path d="M4 20c0-4 3.6-6 8-6s8 2 8 6" />
+        </svg>
+      )}
+
+      {labelPosition !== 'before' && labelNode}
+    </NextLink>
+  );
+};
+
+export default AccountButtonBlock;

package/src/blocks/announcement-bar-block.tsx

@@ -0,0 +1,407 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import ThemeBlock, { Block } from '../theme-block';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { readToggle } from './product-block-utils';
+import {
+  findItemTemplate,
+  hasItemTemplate,
+  ItemTemplateList
+} from './item-template';
+
+const DISMISS_KEY_PREFIX = 'pz-announcement-dismissed:';
+
+const readDismissed = (key: string): boolean => {
+  // sessionStorage throws in Safari private mode and is absent during SSR.
+  try {
+    return window.sessionStorage.getItem(key) === '1';
+  } catch {
+    return false;
+  }
+};
+
+const writeDismissed = (key: string) => {
+  try {
+    window.sessionStorage.setItem(key, '1');
+  } catch {
+    // A storage failure only costs the shopper the memory of the dismissal.
+  }
+};
+
+/**
+ * Close glyphs on the same 24x24 stroke grid the other chrome blocks draw on,
+ * so `stroke: currentColor` keeps the strip's colour. `cross` is the shape the
+ * bar has always shipped with and stays the default.
+ */
+const CLOSE_ICONS: Record<string, React.ReactNode> = {
+  cross: <path d="M6 6l12 12M18 6L6 18" />,
+  'cross-circle': (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M9.5 9.5l5 5M14.5 9.5l-5 5" />
+    </>
+  ),
+  chevron: <path d="M9 6l6 6-6 6" />,
+  minus: <path d="M6 12h12" />
+};
+
+const ALIGNMENTS = new Set([
+  'center',
+  'flex-start',
+  'flex-end',
+  'space-between'
+]);
+
+const clampNumber = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+/**
+ * Functional chrome block: the thin strip above the header. Messages are
+ * authored either as child blocks (text, link, icon — the richer path, which
+ * wins when present) or as a separator-delimited list in the `messages`
+ * property; a group marked as the row layout repeats the designer's own layout
+ * once per message instead. The strip rotates on an editor-owned interval and
+ * can be dismissed for the rest of the browsing session.
+ * Properties: messages, separator, maxMessages, rotateSeconds, pauseOnHover,
+ * align, gap, regionLabel, dismissible, closeLabel, closeIcon, closeIconSize,
+ * closePosition.
+ * Parts: strip, message-list, message, close, icon, empty-state.
+ */
+const AnnouncementBarBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const readText = (key: string, fallback: string): string => {
+    const value = getResponsiveValue(
+      block.properties?.[key],
+      currentBreakpoint,
+      fallback
+    );
+    return value === undefined || value === null ? fallback : String(value);
+  };
+
+  const rotateSeconds = Number(
+    getResponsiveValue(block.properties?.rotateSeconds, currentBreakpoint, 5)
+  );
+  const dismissible = readToggle(
+    block.properties?.dismissible,
+    currentBreakpoint,
+    true
+  );
+  const pauseOnHover = readToggle(
+    block.properties?.pauseOnHover,
+    currentBreakpoint,
+    false
+  );
+  const messagesText = String(
+    getResponsiveValue(block.properties?.messages, currentBreakpoint, '')
+  );
+  // An empty separator would split the text into single characters, so the
+  // authored value only counts when it has something to split on.
+  const separatorValue = readText('separator', '|');
+  const separator = separatorValue.length > 0 ? separatorValue : '|';
+  const regionLabel = readText('regionLabel', 'Announcements');
+  const closeLabel = readText('closeLabel', 'Close announcement');
+  const closeIcon =
+    CLOSE_ICONS[readText('closeIcon', 'cross')] || CLOSE_ICONS.cross;
+  const closeIconSize = clampNumber(
+    getResponsiveValue(block.properties?.closeIconSize, currentBreakpoint, 16),
+    16,
+    8,
+    48
+  );
+  const closeAtStart = readText('closePosition', 'end') === 'start';
+  const alignValue = readText('align', 'center');
+  const align = ALIGNMENTS.has(alignValue) ? alignValue : 'center';
+  const gap = clampNumber(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 12),
+    12,
+    0,
+    64
+  );
+  const maxMessages = clampNumber(
+    getResponsiveValue(block.properties?.maxMessages, currentBreakpoint, 0),
+    0,
+    0,
+    20
+  );
+
+  // The row layout lives among the children, so it must not also be drawn as
+  // one of the messages.
+  const template = findItemTemplate(block, currentBreakpoint);
+  const templateId = template?.id;
+
+  const childBlocks: Block[] = useMemo(
+    () =>
+      (block.blocks || [])
+        .filter((child) => (isDesigner ? true : !child.hidden))
+        .filter((child) => !templateId || child.id !== templateId)
+        .sort((a, b) => (a.order || 0) - (b.order || 0)),
+    [block.blocks, isDesigner, templateId]
+  );
+
+  const textMessages = useMemo(() => {
+    const entries = messagesText
+      .split(separator)
+      .map((entry) => entry.trim())
+      .filter(Boolean);
+
+    return maxMessages > 0 ? entries.slice(0, maxMessages) : entries;
+  }, [messagesText, separator, maxMessages]);
+
+  const messageItems = useMemo(
+    () =>
+      textMessages.map((text, index) => ({
+        text,
+        label: text,
+        value: text,
+        index: index + 1
+      })),
+    [textMessages]
+  );
+
+  const visibleChildBlocks =
+    maxMessages > 0 ? childBlocks.slice(0, maxMessages) : childBlocks;
+
+  const useCustomRows =
+    hasItemTemplate(block, currentBreakpoint) &&
+    (textMessages.length > 0 || isDesigner);
+
+  const count = useCustomRows
+    ? textMessages.length
+    : visibleChildBlocks.length > 0
+    ? visibleChildBlocks.length
+    : textMessages.length;
+
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [dismissed, setDismissed] = useState(false);
+  const [paused, setPaused] = useState(false);
+
+  const dismissKey = `${DISMISS_KEY_PREFIX}${block.id || 'announcement'}`;
+
+  useEffect(() => {
+    // Read after mount only: the server has no session storage, so deciding
+    // during render would hydrate as a mismatch. The designer always shows the
+    // strip, otherwise an author could not style a bar they once closed.
+    if (isDesigner) return;
+    setDismissed(readDismissed(dismissKey));
+  }, [dismissKey, isDesigner]);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [count]);
+
+  useEffect(() => {
+    // The designer stacks every message so each one stays selectable, so there
+    // is nothing to rotate there.
+    if (isDesigner || count < 2 || paused) return;
+    if (!Number.isFinite(rotateSeconds) || rotateSeconds <= 0) return;
+
+    const timer = setInterval(
+      () => setActiveIndex((index) => (index + 1) % count),
+      rotateSeconds * 1000
+    );
+
+    return () => clearInterval(timer);
+  }, [isDesigner, count, rotateSeconds, paused]);
+
+  if (count === 0 && !useCustomRows) {
+    return isDesigner ? (
+      <div
+        data-announcement-bar=""
+        data-announcement-bar-state="empty"
+        {...partAttrs('empty-state', { empty: true })}
+      >
+        Announcement bar (no messages)
+      </div>
+    ) : null;
+  }
+
+  if (dismissed && !isDesigner) return null;
+
+  const dismiss = () => {
+    // Dismissal must not leak out of the designer into the author's session.
+    if (isDesigner) return;
+    setDismissed(true);
+    writeDismissed(dismissKey);
+  };
+
+  const messageStyle = (index: number): React.CSSProperties =>
+    isDesigner
+      ? { display: 'block' }
+      : { display: index === activeIndex ? 'block' : 'none' };
+
+  const createActionHandler = (actionType: string, blockId?: string) => () => {
+    if (window.parent) {
+      window.parent.postMessage(
+        { type: actionType, data: { placeholderId, sectionId, blockId } },
+        '*'
+      );
+    }
+  };
+
+  // Rename is a separate message because it carries the new label; without it
+  // the toolbar exposes no way to retitle a message block.
+  const createRenameHandler =
+    (blockId?: string) => (newLabel: string) => {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            type: 'RENAME_BLOCK',
+            data: { placeholderId, sectionId, blockId, label: newLabel }
+          },
+          '*'
+        );
+      }
+    };
+
+  const customRows = useCustomRows ? (
+    <ItemTemplateList
+      block={block}
+      items={messageItems}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+      designerPlaceholderCount={2}
+    />
+  ) : null;
+
+  // Custom rows are rendered by the iterator, so the per-message `display`
+  // the built-in path applies inline is not available. A scoped rule hides
+  // every row but the active one, which keeps rotation working for a
+  // designer-authored layout. `:not()` rather than a display value so the
+  // row keeps whatever display its own styles give it.
+  const stripId = String(block.id || 'announcement').replace(
+    /[^a-zA-Z0-9_-]/g,
+    ''
+  );
+  const rotationCss =
+    !isDesigner && useCustomRows && count > 1
+      ? `[data-announcement-id="${stripId}"] [data-part="message-list"] > *:not(:nth-child(${
+          activeIndex + 1
+        })){display:none !important;}`
+      : '';
+
+  return (
+    <div
+      data-announcement-bar=""
+      data-announcement-bar-index={activeIndex}
+      data-announcement-id={stripId}
+      {...partAttrs('strip')}
+      role="region"
+      aria-label={regionLabel || undefined}
+      aria-live="polite"
+      onMouseEnter={pauseOnHover ? () => setPaused(true) : undefined}
+      onMouseLeave={pauseOnHover ? () => setPaused(false) : undefined}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: align,
+        flexDirection: closeAtStart ? 'row-reverse' : 'row',
+        gap: `${gap}px`,
+        width: '100%'
+      }}
+    >
+      {rotationCss && <style>{rotationCss}</style>}
+
+      <div
+        data-announcement-messages=""
+        {...partAttrs('message-list')}
+        style={{ flex: '1 1 auto', textAlign: 'center', minWidth: 0 }}
+      >
+        {customRows ??
+          (visibleChildBlocks.length > 0
+            ? visibleChildBlocks.map((child, index) => (
+                <div
+                  key={child.id || `announcement-${index}`}
+                  data-announcement-message=""
+                  {...partAttrs('message', { selected: index === activeIndex })}
+                  style={messageStyle(index)}
+                >
+                  <ThemeBlock
+                    block={child}
+                    placeholderId={placeholderId}
+                    sectionId={sectionId}
+                    isDesigner={isDesigner}
+                    isSelected={selectedBlockId === child.id}
+                    selectedBlockId={selectedBlockId}
+                    currentBreakpoint={currentBreakpoint}
+                    onMoveUp={createActionHandler('MOVE_BLOCK_UP', child.id)}
+                    onMoveDown={createActionHandler('MOVE_BLOCK_DOWN', child.id)}
+                    onDuplicate={createActionHandler(
+                      'DUPLICATE_BLOCK',
+                      child.id
+                    )}
+                    onToggleVisibility={createActionHandler(
+                      'TOGGLE_BLOCK_VISIBILITY',
+                      child.id
+                    )}
+                    onDelete={createActionHandler('DELETE_BLOCK', child.id)}
+                    onRename={createRenameHandler(child.id)}
+                  />
+                </div>
+              ))
+            : textMessages.map((message, index) => (
+                <div
+                  key={`${message}-${index}`}
+                  data-announcement-message=""
+                  {...partAttrs('message', { selected: index === activeIndex })}
+                  style={messageStyle(index)}
+                >
+                  {message}
+                </div>
+              )))}
+      </div>
+
+      {dismissible && (
+        <button
+          type="button"
+          data-announcement-close=""
+          {...partAttrs('close')}
+          aria-label={closeLabel || undefined}
+          onClick={dismiss}
+          style={{
+            flex: '0 0 auto',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            cursor: 'pointer',
+            color: 'inherit',
+            lineHeight: 0
+          }}
+        >
+          <svg
+            width={closeIconSize}
+            height={closeIconSize}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            {...partAttrs('icon')}
+          >
+            {closeIcon}
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default AnnouncementBarBlock;

package/src/blocks/block-renderer-registry.tsx

@@ -18,6 +18,13 @@ import LinkBlock from './link-block';
 import LottieBlock from './lottie-block';
 import EmbedBlock from './embed-block';
 import MapBlock from './map-block';
+import NavMenuBlock from './nav-menu-block';
+import MiniBasketBlock from './mini-basket-block';
+import HamburgerMenuBlock from './hamburger-menu-block';
+import AccountButtonBlock from './account-button-block';
+import SearchBoxBlock from './search-box-block';
+import WishlistButtonBlock from './wishlist-button-block';
+import LanguageSelectorBlock from './language-selector-block';
 import ProductGalleryBlock from './product-gallery-block';
 import ProductTitleBlock from './product-title-block';
 import ProductPriceBlock from './product-price-block';
@@ -43,6 +50,12 @@ import ChangePasswordFormBlock from './change-password-form-block';
 import OrderDetailBlock from './order-detail-block';
 import CouponListBlock from './coupon-list-block';
 import FavouritesGridBlock from './favourites-grid-block';
+import MegaMenuBlock from './mega-menu-block';
+import CurrencySelectorBlock from './currency-selector-block';
+import AnnouncementBarBlock from './announcement-bar-block';
+import NewsletterFormBlock from './newsletter-form-block';
+import SocialLinksBlock from './social-links-block';
+import PaymentBadgesBlock from './payment-badges-block';
 import CheckoutSummaryBlock from './checkout-summary-block';
 import CheckoutStepsBlock from './checkout-steps-block';
 import OrderSuccessBlock from './order-success-block';
@@ -115,6 +128,13 @@ blockRendererRegistry.register('link', LinkBlock);
 blockRendererRegistry.register('lottie', LottieBlock);
 blockRendererRegistry.register('embed', EmbedBlock);
 blockRendererRegistry.register('map', MapBlock);
+blockRendererRegistry.register('nav-menu', NavMenuBlock);
+blockRendererRegistry.register('mini-basket', MiniBasketBlock);
+blockRendererRegistry.register('hamburger-menu', HamburgerMenuBlock);
+blockRendererRegistry.register('account-button', AccountButtonBlock);
+blockRendererRegistry.register('search-box', SearchBoxBlock);
+blockRendererRegistry.register('wishlist-button', WishlistButtonBlock);
+blockRendererRegistry.register('language-selector', LanguageSelectorBlock);
 blockRendererRegistry.register('product-gallery', ProductGalleryBlock);
 blockRendererRegistry.register('product-title', ProductTitleBlock);
 blockRendererRegistry.register('product-price', ProductPriceBlock);
@@ -144,6 +164,12 @@ blockRendererRegistry.register('coupon-list', CouponListBlock);
 blockRendererRegistry.register('favourites-grid', FavouritesGridBlock);
 
 // Chrome extras
+blockRendererRegistry.register('mega-menu', MegaMenuBlock);
+blockRendererRegistry.register('currency-selector', CurrencySelectorBlock);
+blockRendererRegistry.register('announcement-bar', AnnouncementBarBlock);
+blockRendererRegistry.register('newsletter-form', NewsletterFormBlock);
+blockRendererRegistry.register('social-links', SocialLinksBlock);
+blockRendererRegistry.register('payment-badges', PaymentBadgesBlock);
 
 // Order flow
 blockRendererRegistry.register('checkout-summary', CheckoutSummaryBlock);