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

package/src/blocks/faq-accordion-block.tsx

@@ -0,0 +1,358 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { readToggle } from './product-block-utils';
+import { listingPlaceholderStyle } from './listing-context';
+import ThemeBlock, { Block } from '../theme-block';
+import { findItemTemplate, ItemTemplateList } from './item-template';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * Functional content block: a question/answer accordion whose items are
+ * authored in the editor as child blocks. Each child block is one entry — its
+ * label is the question, its rendered content is the answer — so the answer can
+ * be any composition (text, links, images) instead of a plain string property.
+ * Properties: searchable, searchPlaceholder, searchAriaLabel, noResultsLabel,
+ * emptyLabel, questionFallbackLabel, iconStyle, iconOpen, iconClosed,
+ * iconPosition, allowMultiple, openFirst.
+ * Parts: list, search, item, question, label, icon, answer, empty.
+ */
+const FaqAccordionBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false,
+  placeholderId,
+  sectionId,
+  selectedBlockId
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const searchable = readToggle(
+    block.properties?.searchable,
+    currentBreakpoint,
+    false
+  );
+  const searchPlaceholder = prop('searchPlaceholder', 'Search questions');
+  const searchAriaLabel = prop('searchAriaLabel', '');
+  const noResultsLabel = prop('noResultsLabel', 'No matching questions.');
+  const emptyLabel = prop(
+    'emptyLabel',
+    'FAQ accordion (add a block per question)'
+  );
+  const questionFallbackLabel = prop('questionFallbackLabel', 'Question');
+  const iconStyle = prop('iconStyle', 'chevron');
+  const iconOpenGlyph = prop('iconOpen', '−');
+  const iconClosedGlyph = prop('iconClosed', '+');
+  const iconPosition = prop('iconPosition', 'end') === 'start' ? 'start' : 'end';
+  const allowMultiple = readToggle(
+    block.properties?.allowMultiple,
+    currentBreakpoint,
+    false
+  );
+  const openFirst = readToggle(
+    block.properties?.openFirst,
+    currentBreakpoint,
+    false
+  );
+
+  const [query, setQuery] = useState('');
+  // null means "the shopper has not touched the accordion yet", which is what
+  // lets `openFirst` decide the initial state without a second effect.
+  const [openIds, setOpenIds] = useState<string[] | null>(null);
+
+  const template = findItemTemplate(block, currentBreakpoint);
+
+  const items = useMemo(
+    () =>
+      (block.blocks || [])
+        // The row-layout child is a template, not a question.
+        .filter((child) => !template || child.id !== template.id)
+        // Hidden children stay visible to the author so they can be selected
+        // and unhidden, exactly as the other container blocks behave.
+        .filter((child) => (isDesigner ? true : !child.hidden))
+        .sort((a, b) => (a.order || 0) - (b.order || 0)),
+    [block.blocks, isDesigner, template]
+  );
+
+  const visibleItems = useMemo(() => {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed) return items;
+
+    return items.filter((child) =>
+      String(child.label || '')
+        .toLowerCase()
+        .includes(trimmed)
+    );
+  }, [items, query]);
+
+  if (items.length === 0) {
+    if (!isDesigner) return null;
+
+    return (
+      <div
+        data-faq-accordion=""
+        data-faq-accordion-state="empty"
+        {...partAttrs('empty')}
+        style={listingPlaceholderStyle}
+      >
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  const firstItemId = items[0]?.id || 'faq-item-0';
+  const resolvedOpenIds =
+    openIds ?? (openFirst && firstItemId ? [firstItemId] : []);
+
+  const toggleItem = (itemId: string) =>
+    setOpenIds((current) => {
+      const open = current ?? (openFirst && firstItemId ? [firstItemId] : []);
+
+      if (open.includes(itemId)) {
+        return open.filter((id) => id !== itemId);
+      }
+
+      // Single-open is the shipped behaviour: opening one entry closes the
+      // previous unless the author asked for a multi-open accordion.
+      return allowMultiple ? [...open, itemId] : [itemId];
+    });
+
+  const iconGlyph = (isOpen: boolean): string => {
+    if (iconStyle === 'plus') return isOpen ? '−' : '+';
+    if (iconStyle === 'custom') return isOpen ? iconOpenGlyph : iconClosedGlyph;
+    return '⌄';
+  };
+
+  // Only the chevron flips: a plus/minus pair already encodes the state, and
+  // rotating it would read as a rotating cross.
+  const iconRotates = iconStyle === 'chevron';
+
+  /**
+   * The template lives under this block alongside the questions, so each entry
+   * gets its own copy with a distinct id — otherwise every repeated row would
+   * share one clone id and selecting a header in the designer would highlight
+   * all of them. `styleSourceId` still points at the authored template so the
+   * generated stylesheet keeps matching.
+   */
+  const templateHostFor = (entryIndex: number): Block =>
+    ({
+      ...block,
+      id: `${block.id}-faq-${entryIndex}`,
+      blocks: template
+        ? [
+            {
+              ...template,
+              id: `${template.id}-${entryIndex}`,
+              styleSourceId: template.styleSourceId || template.id
+            }
+          ]
+        : []
+    } as Block);
+
+  return (
+    <div
+      data-faq-accordion=""
+      {...partAttrs('list')}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--faq-accordion-gap, 8px)'
+      }}
+    >
+      {searchable && (
+        <input
+          type="search"
+          data-faq-accordion-search=""
+          {...partAttrs('search')}
+          value={query}
+          placeholder={searchPlaceholder}
+          aria-label={searchAriaLabel || undefined}
+          // Filtering is local state only, so it is safe to leave live in the
+          // designer — the author can preview the filtered result.
+          onChange={(event) => setQuery(event.target.value)}
+          style={{
+            width: '100%',
+            border: '1px solid var(--faq-accordion-border, #e5e7eb)',
+            background: 'transparent',
+            color: 'inherit',
+            padding: '10px 12px',
+            outline: 'none'
+          }}
+        />
+      )}
+
+      {visibleItems.length === 0 ? (
+        <div
+          data-faq-accordion-empty=""
+          {...partAttrs('empty')}
+          role="status"
+          style={{ opacity: 0.7 }}
+        >
+          {noResultsLabel}
+        </div>
+      ) : (
+        visibleItems.map((child, index) => {
+          const itemId = child.id || `faq-item-${index}`;
+          const isOpen = resolvedOpenIds.includes(itemId);
+          const question =
+            child.label || `${questionFallbackLabel} ${index + 1}`;
+
+          // Without these the child renders no designer toolbar at all, and a
+          // question becomes uneditable: the question text IS `child.label`, so
+          // rename is the only way to change it.
+          const createActionHandler = (actionType: string) => () => {
+            if (window.parent) {
+              window.parent.postMessage(
+                {
+                  type: actionType,
+                  data: { placeholderId, sectionId, blockId: child.id }
+                },
+                '*'
+              );
+            }
+          };
+
+          const handleRename = (newLabel: string) => {
+            if (window.parent) {
+              window.parent.postMessage(
+                {
+                  type: 'RENAME_BLOCK',
+                  data: {
+                    placeholderId,
+                    sectionId,
+                    blockId: child.id,
+                    label: newLabel
+                  }
+                },
+                '*'
+              );
+            }
+          };
+
+          const icon = iconStyle !== 'none' && (
+            <span
+              aria-hidden="true"
+              {...partAttrs('icon', { open: isOpen })}
+              style={{
+                transform: iconRotates
+                  ? isOpen
+                    ? 'rotate(180deg)'
+                    : 'rotate(0deg)'
+                  : undefined,
+                transition: iconRotates ? 'transform 200ms ease' : undefined
+              }}
+            >
+              {iconGlyph(isOpen)}
+            </span>
+          );
+
+          // The designer's row layout fills the header while the header itself
+          // keeps owning the toggle, so a custom question row does not cost the
+          // block the accordion it exists for.
+          const questionContent = template ? (
+            <ItemTemplateList
+              block={templateHostFor(index)}
+              items={[
+                {
+                  question,
+                  label: question,
+                  name: question,
+                  number: index + 1,
+                  index,
+                  open: isOpen
+                }
+              ]}
+              placeholderId={placeholderId}
+              sectionId={sectionId}
+              isDesigner={isDesigner}
+              selectedBlockId={selectedBlockId}
+              currentBreakpoint={currentBreakpoint}
+            />
+          ) : (
+            <span {...partAttrs('label')}>{question}</span>
+          );
+
+          return (
+            <div
+              key={itemId}
+              data-faq-accordion-item=""
+              data-faq-accordion-open={isOpen ? 'true' : 'false'}
+              {...partAttrs('item', { open: isOpen })}
+              style={{
+                borderBottom: '1px solid var(--faq-accordion-border, #e5e7eb)'
+              }}
+            >
+              <button
+                type="button"
+                data-faq-accordion-question=""
+                {...partAttrs('question', { open: isOpen })}
+                aria-expanded={isOpen}
+                onClick={() => toggleItem(itemId)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '12px',
+                  width: '100%',
+                  padding: '12px 0',
+                  border: 'none',
+                  background: 'transparent',
+                  color: 'inherit',
+                  font: 'inherit',
+                  textAlign: 'left',
+                  cursor: 'pointer'
+                }}
+              >
+                {iconPosition === 'start' && icon}
+                {questionContent}
+                {iconPosition === 'end' && icon}
+              </button>
+
+              <div
+                data-faq-accordion-answer=""
+                // Height is animated through grid rows so the answer keeps its
+                // natural height instead of needing a measured pixel value.
+                style={{
+                  display: 'grid',
+                  gridTemplateRows: isOpen ? '1fr' : '0fr',
+                  transition: 'grid-template-rows 200ms ease'
+                }}
+              >
+                <div style={{ overflow: 'hidden' }}>
+                  <div
+                    {...partAttrs('answer', { open: isOpen })}
+                    style={{ paddingBottom: '12px' }}
+                  >
+                    <ThemeBlock
+                      block={child}
+                      placeholderId={placeholderId}
+                      sectionId={sectionId}
+                      isDesigner={isDesigner}
+                      isSelected={selectedBlockId === child.id}
+                      selectedBlockId={selectedBlockId}
+                      currentBreakpoint={currentBreakpoint}
+                      onMoveUp={createActionHandler('MOVE_BLOCK_UP')}
+                      onMoveDown={createActionHandler('MOVE_BLOCK_DOWN')}
+                      onDuplicate={createActionHandler('DUPLICATE_BLOCK')}
+                      onToggleVisibility={createActionHandler(
+                        'TOGGLE_BLOCK_VISIBILITY'
+                      )}
+                      onDelete={createActionHandler('DELETE_BLOCK')}
+                      onRename={handleRename}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+};
+
+export default FaqAccordionBlock;

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

@@ -0,0 +1,252 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { useSession } from 'next-auth/react';
+import {
+  useAddFavoriteMutation,
+  useGetFavoritesQuery,
+  useRemoveFavoriteMutation
+} from '@akinon/next/data/client/wishlist';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  DesignerPlaceholder,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+const FAVORITES_PAGE_SIZE = 100;
+
+const ALLOWED_ICONS = ['heart', 'star', 'bookmark'];
+const ALLOWED_LABEL_POSITIONS = ['before', 'after'];
+
+const ICON_PATHS: Record<string, string> = {
+  heart: 'M12 20s-7-4.35-7-9a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 4.65-7 9-7 9z',
+  star: 'M12 4l2.5 5.2 5.5.8-4 3.9 1 5.6-5-2.7-5 2.7 1-5.6-4-3.9 5.5-.8L12 4z',
+  bookmark: 'M7 4h10a1 1 0 0 1 1 1v15l-6-3.5L6 20V5a1 1 0 0 1 1-1z'
+};
+
+/**
+ * Extra props land on the <svg> itself rather than on a wrapper: the icon is
+ * the element a brand styles, and wrapping it would change the markup every
+ * published composition already renders.
+ */
+const FavoriteIcon = ({
+  filled,
+  name,
+  size,
+  ...rest
+}: {
+  filled: boolean;
+  name: string;
+  size: number;
+} & React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill={filled ? 'currentColor' : 'none'}
+    stroke="currentColor"
+    strokeWidth="1.5"
+    aria-hidden="true"
+    {...rest}
+  >
+    <path d={ICON_PATHS[name] || ICON_PATHS.heart} />
+  </svg>
+);
+
+/**
+ * Functional commerce block: favourite (wishlist) toggle for the ambient
+ * product — the product on the page on a PDP, and the row's own product when
+ * the block sits inside a repeated product card. Favourites are user-scoped,
+ * so guests get a link to the login page instead of a mutation they cannot
+ * complete. The editor owns labels, the icon, placement and — through named
+ * parts — the styling in both states.
+ *
+ * Both mutations are addressed by id: adding needs the PRODUCT's pk, removing
+ * needs the favourite ENTRY's pk, which is looked up in the favourites list.
+ * The item scope rewrites a row's `pk` to the product's, so a card carrying a
+ * favourite entry id cannot add the wrong thing.
+ *
+ * Properties: loginHref, showLabel, addLabel, removeLabel, activeColor, icon,
+ * iconSize, labelPosition.
+ */
+const FavoriteButtonBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+  const { status } = useSession();
+  const isAuthenticated = status === 'authenticated';
+
+  const productPk = Number(pickProductField(product, 'pk'));
+  const hasProduct = Number.isFinite(productPk) && productPk > 0;
+
+  // The v1 core has no "is this product favourited" endpoint, so the current
+  // state is derived from the favourites list. It is skipped for guests (the
+  // endpoint 401s) and in the designer (no shopper session to reflect).
+  const { data: favorites } = useGetFavoritesQuery(
+    { limit: FAVORITES_PAGE_SIZE },
+    { skip: !isAuthenticated || !hasProduct || isDesigner }
+  );
+  const [addFavorite, addState] = useAddFavoriteMutation();
+  const [removeFavorite, removeState] = useRemoveFavoriteMutation();
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const loginHref = prop('loginHref', '/auth');
+  const addLabel = prop('addLabel', 'Add to Favourites');
+  const removeLabel = prop('removeLabel', 'Remove from Favourites');
+  const activeColor = prop('activeColor', '');
+  const showLabel = readToggle(
+    block.properties?.showLabel,
+    currentBreakpoint,
+    false
+  );
+  const iconValue = prop('icon', 'heart');
+  const icon = ALLOWED_ICONS.includes(iconValue) ? iconValue : 'heart';
+  const iconSizeValue = Number(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 24)
+  );
+  const iconSize =
+    Number.isFinite(iconSizeValue) && iconSizeValue > 0 ? iconSizeValue : 24;
+  const labelPositionValue = prop('labelPosition', 'after');
+  const labelPosition = ALLOWED_LABEL_POSITIONS.includes(labelPositionValue)
+    ? labelPositionValue
+    : 'after';
+
+  if (!hasProduct) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Favourite button (no product)"
+        attribute="data-favorite-button"
+      />
+    ) : null;
+  }
+
+  const baseStyle: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '6px',
+    padding: 0,
+    margin: 0,
+    border: 'none',
+    background: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    textDecoration: 'none'
+  };
+
+  const renderContent = (filled: boolean, text: string) => {
+    const iconNode = (
+      <FavoriteIcon
+        key="icon"
+        filled={filled}
+        name={icon}
+        size={iconSize}
+        data-favorite-icon={filled ? 'active' : 'default'}
+        {...partAttrs('icon', { selected: filled })}
+      />
+    );
+
+    if (!showLabel) return iconNode;
+
+    const labelNode = (
+      <span
+        key="label"
+        data-favorite-label=""
+        {...partAttrs('label', { selected: filled })}
+      >
+        {text}
+      </span>
+    );
+
+    return labelPosition === 'before'
+      ? [labelNode, iconNode]
+      : [iconNode, labelNode];
+  };
+
+  if (!isAuthenticated) {
+    return (
+      <NextLink
+        href={loginHref}
+        data-favorite-button=""
+        data-favorite-state="guest"
+        {...partAttrs('button')}
+        aria-label={addLabel}
+        onClick={(event) => {
+          if (isDesigner) event.preventDefault();
+        }}
+        style={{ ...baseStyle, cursor: 'pointer' }}
+      >
+        {renderContent(false, addLabel)}
+      </NextLink>
+    );
+  }
+
+  const favorite = (favorites?.results || []).find(
+    (item) => Number(item?.product?.pk) === productPk
+  );
+  const isFavorite = Boolean(favorite);
+  const busy = addState.isLoading || removeState.isLoading;
+
+  const handleToggle = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    // A product card is usually one big link, and the heart sits inside it.
+    // Cancelling the click stops the card navigating away mid-mutation; on a
+    // PDP, where nothing wraps the button, this is a no-op.
+    event.preventDefault();
+
+    // Only stop the bubble when there IS a link to stop. Stopping it always
+    // would also swallow a brand's delegated card handler — the analytics
+    // click, the quick-view opener — which has nothing to do with navigation.
+    if (
+      event.currentTarget instanceof Element &&
+      event.currentTarget.closest('a')
+    ) {
+      event.stopPropagation();
+    }
+
+    if (isDesigner || busy) return;
+
+    try {
+      if (favorite) {
+        await removeFavorite(favorite.pk).unwrap();
+      } else {
+        await addFavorite(productPk).unwrap();
+      }
+    } catch {
+      // Commerce rejected the toggle; the list query stays authoritative so
+      // the icon simply keeps its previous state.
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      data-favorite-button=""
+      data-favorite-state={isFavorite ? 'active' : 'default'}
+      {...partAttrs('button', { selected: isFavorite, loading: busy })}
+      aria-pressed={isFavorite}
+      aria-label={isFavorite ? removeLabel : addLabel}
+      aria-busy={busy}
+      disabled={busy}
+      onClick={handleToggle}
+      style={{
+        ...baseStyle,
+        cursor: busy ? 'progress' : 'pointer',
+        color: isFavorite && activeColor ? activeColor : 'inherit',
+        opacity: busy ? 0.6 : 1
+      }}
+    >
+      {renderContent(isFavorite, isFavorite ? removeLabel : addLabel)}
+    </button>
+  );
+};
+
+export default FavoriteButtonBlock;