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

package/src/blocks/currency-selector-block.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import React from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+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: currency switcher, the mirror of the language
+ * selector. Currencies come from the storefront settings through
+ * `useLocalization()`; the editor owns placement, wording, separator and
+ * styling.
+ * Properties: mode, separator, showSeparator, uppercase, labelSource, gap,
+ * ariaLabel, emptyText.
+ * Parts: option-list, option (selected/hover), separator, dropdown.
+ */
+const CurrencySelectorBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const { currency, currencies, setCurrency } = useLocalization();
+
+  const mode = String(
+    getResponsiveValue(block.properties?.mode, currentBreakpoint, 'inline')
+  );
+  const separator = String(
+    getResponsiveValue(block.properties?.separator, currentBreakpoint, '|')
+  );
+  const labelSource = String(
+    getResponsiveValue(
+      block.properties?.labelSource,
+      currentBreakpoint,
+      'label'
+    )
+  );
+  const ariaLabel = String(
+    getResponsiveValue(
+      block.properties?.ariaLabel,
+      currentBreakpoint,
+      'Currency'
+    )
+  );
+  // Empty on purpose: the editor placeholder has always been built from the
+  // separator, so an unset override must keep doing exactly that.
+  const emptyText = String(
+    getResponsiveValue(block.properties?.emptyText, currentBreakpoint, '')
+  );
+  const gap = clampNumber(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 6),
+    6,
+    0,
+    32
+  );
+  const showSeparator = readToggle(
+    block.properties?.showSeparator,
+    currentBreakpoint,
+    true
+  );
+  const uppercase = readToggle(
+    block.properties?.uppercase,
+    currentBreakpoint,
+    false
+  );
+
+  const items = Array.isArray(currencies) ? currencies : [];
+
+  const format = (value: string) =>
+    uppercase ? String(value).toUpperCase() : String(value);
+
+  const readLabel = (item: { label?: string; code?: string }): string =>
+    labelSource === 'code'
+      ? String(item.code ?? '')
+      : String(item.label || item.code || '');
+
+  const change = (value: string) => {
+    // setCurrency drops a cookie and reloads the page, which would tear the
+    // designer iframe out from under the author.
+    if (isDesigner || !value || value === currency) return;
+    setCurrency?.(value);
+  };
+
+  if (items.length === 0) {
+    return isDesigner ? (
+      <span
+        data-currency-selector=""
+        {...partAttrs('option-list', { empty: true })}
+      >
+        {emptyText || `TRY ${separator} USD`}
+      </span>
+    ) : null;
+  }
+
+  if (mode === 'select') {
+    return (
+      <select
+        data-currency-selector=""
+        {...partAttrs('dropdown')}
+        value={currency || ''}
+        onChange={(event) => change(event.target.value)}
+        aria-label={ariaLabel}
+        style={{
+          background: 'transparent',
+          border: 'none',
+          color: 'inherit',
+          cursor: 'pointer',
+          outline: 'none'
+        }}
+      >
+        {items.map((item) => (
+          <option key={item.code} value={item.code}>
+            {format(readLabel(item))}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  return (
+    <span
+      data-currency-selector=""
+      {...partAttrs('option-list')}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: `${gap}px`
+      }}
+    >
+      {items.map((item, index) => {
+        const active = item.code === currency;
+
+        return (
+          <React.Fragment key={item.code}>
+            {index > 0 && showSeparator && (
+              <span aria-hidden="true" {...partAttrs('separator')}>
+                {separator}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={() => change(item.code)}
+              aria-current={active}
+              data-currency-option={active ? 'selected' : 'default'}
+              {...partAttrs('option', { selected: active })}
+              style={{
+                background: 'none',
+                border: 'none',
+                padding: 0,
+                cursor: 'pointer',
+                color: 'inherit',
+                font: 'inherit',
+                opacity: active ? 1 : 0.6,
+                fontWeight: active ? 600 : 400
+              }}
+            >
+              {format(readLabel(item))}
+            </button>
+          </React.Fragment>
+        );
+      })}
+    </span>
+  );
+};
+
+export default CurrencySelectorBlock;

package/src/blocks/hamburger-menu-block.tsx

@@ -0,0 +1,461 @@
+'use client';
+
+import React, { useState } from 'react';
+import NextLink from 'next/link';
+import { useGetMenuQuery } from '@akinon/next/data/client/misc';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { useOverlay } from '../hooks/use-overlay';
+import { BlockRendererProps } from './block-renderer-registry';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readToggle } from './product-block-utils';
+
+interface MenuItemLike {
+  pk?: number | string;
+  label?: string;
+  url?: string;
+  children?: MenuItemLike[];
+}
+
+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: hamburger button opening a slide-in drawer
+ * with the commerce menu tree — the standard mobile navigation. Menu
+ * CONTENT stays commerce-driven; the editor owns placement/visibility
+ * (typically visible on mobile only), the drawer geometry, every label and
+ * the styling of each piece.
+ * Properties: depth, parent, side, drawerWidth, drawerMaxWidth, iconSize,
+ * showTriggerLabel, triggerLabel, ariaLabel, closeLabel, toggleLabel,
+ * showOverlay, showClose, lockScroll, closeOnNavigate, expandMode, maxItems,
+ * emptyText.
+ * Parts: trigger, icon, overlay, drawer, header, close, menu, item-row, item,
+ * toggle, submenu, submenu-item, empty.
+ */
+const HamburgerMenuBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState<string[]>([]);
+
+  const depth = Number(
+    getResponsiveValue(block.properties?.depth, currentBreakpoint, 2)
+  );
+  const parent = block.properties?.parent
+    ? String(getResponsiveValue(block.properties.parent, currentBreakpoint, ''))
+    : undefined;
+  const side = String(
+    getResponsiveValue(block.properties?.side, currentBreakpoint, 'left')
+  );
+  const drawerWidth = clampNumber(
+    getResponsiveValue(block.properties?.drawerWidth, currentBreakpoint, 320),
+    320,
+    200,
+    720
+  );
+  const drawerMaxWidth = clampNumber(
+    getResponsiveValue(block.properties?.drawerMaxWidth, currentBreakpoint, 85),
+    85,
+    40,
+    100
+  );
+  const iconSize = clampNumber(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 24),
+    24,
+    12,
+    64
+  );
+  const ariaLabel = String(
+    getResponsiveValue(block.properties?.ariaLabel, currentBreakpoint, 'Menu')
+  );
+  const triggerLabel = String(
+    getResponsiveValue(
+      block.properties?.triggerLabel,
+      currentBreakpoint,
+      'Menu'
+    )
+  );
+  const showTriggerLabel = readToggle(
+    block.properties?.showTriggerLabel,
+    currentBreakpoint,
+    false
+  );
+  const closeLabel = String(
+    getResponsiveValue(
+      block.properties?.closeLabel,
+      currentBreakpoint,
+      'Close menu'
+    )
+  );
+  const toggleLabel = String(
+    getResponsiveValue(
+      block.properties?.toggleLabel,
+      currentBreakpoint,
+      'Toggle submenu'
+    )
+  );
+  const emptyText = String(
+    getResponsiveValue(
+      block.properties?.emptyText,
+      currentBreakpoint,
+      'Menu (no items)'
+    )
+  );
+  const showOverlay = readToggle(
+    block.properties?.showOverlay,
+    currentBreakpoint,
+    true
+  );
+  const showClose = readToggle(
+    block.properties?.showClose,
+    currentBreakpoint,
+    true
+  );
+  const lockScroll = readToggle(
+    block.properties?.lockScroll,
+    currentBreakpoint,
+    true
+  );
+  const closeOnNavigate = readToggle(
+    block.properties?.closeOnNavigate,
+    currentBreakpoint,
+    true
+  );
+  const expandMode = String(
+    getResponsiveValue(
+      block.properties?.expandMode,
+      currentBreakpoint,
+      'single'
+    )
+  );
+  const maxItems = clampNumber(
+    getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0),
+    0,
+    0,
+    60
+  );
+
+  const { data: menu } = useGetMenuQuery(
+    {
+      depth: Number.isFinite(depth) && depth > 0 ? depth : 2,
+      ...(parent ? { parent } : {})
+    } as Parameters<typeof useGetMenuQuery>[0],
+    { skip: !open }
+  );
+
+  const allItems: MenuItemLike[] = Array.isArray(menu) ? menu : [];
+  const items = maxItems > 0 ? allItems.slice(0, maxItems) : allItems;
+
+  /**
+   * The scroll lock is page-wide state, so it is the shared overlay
+   * primitive's counted one rather than a capture of `document.body` taken
+   * here.
+   *
+   * This block used to record the body's overflow itself, with no counter at
+   * all. Opened over a panel that had already frozen the page — a filter
+   * drawer, a quick view — it recorded `hidden` as "the page's own value", so
+   * that panel closing thawed the page under a drawer still up, and this
+   * drawer closing wrote `hidden` back for good and left a storefront nobody
+   * could scroll. The primitive keeps the page's own value with the first
+   * holder and restores it only when the last one lets go.
+   *
+   * `modal: false` is deliberate: the drawer draws a backdrop but has never
+   * carried `role="dialog"`, `aria-modal` or a focus trap, and giving it any
+   * of those means moving markup a published storefront already renders.
+   * `closeOnEscape: false` for the same reason — the drawer has never answered
+   * Escape, and arming it is a product decision, not part of this migration.
+   * What it joins the primitive for is the one counted lock and the one stack.
+   *
+   * `isDesigner` keeps it inert: the preview iframe is the author's canvas,
+   * not a shopper's viewport.
+   */
+  useOverlay({
+    open,
+    isDesigner,
+    modal: false,
+    lockScroll,
+    closeOnEscape: false
+  });
+
+  const isExpanded = (key: string) => expanded.includes(key);
+
+  const toggleExpanded = (key: string) =>
+    setExpanded((current) => {
+      if (current.includes(key)) {
+        return current.filter((entry) => entry !== key);
+      }
+      return expandMode === 'multi' ? [...current, key] : [key];
+    });
+
+  // Navigating inside the designer iframe would drop the author out of the
+  // page they are editing, so every drawer link is inert there.
+  const handleNavigate = (event: React.MouseEvent) => {
+    if (isDesigner) event.preventDefault();
+    if (closeOnNavigate) setOpen(false);
+  };
+
+  // A designer who marked a child as the row layout gets that layout repeated
+  // per drawer entry; otherwise the built-in rows render unchanged.
+  const customRows = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={items.map((item, index) => ({
+        key: String(item.pk ?? index),
+        name: String(item.label ?? ''),
+        label: String(item.label ?? ''),
+        url: String(item.url ?? ''),
+        hasChildren: (item.children || []).length > 0
+      }))}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+      designerPlaceholderCount={4}
+    />
+  ) : null;
+
+  return (
+    <>
+      <button
+        type="button"
+        data-hamburger-menu=""
+        {...partAttrs('trigger', { open })}
+        aria-label={ariaLabel}
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: showTriggerLabel ? '8px' : undefined,
+          background: 'none',
+          border: 'none',
+          padding: 0,
+          cursor: 'pointer',
+          color: 'inherit'
+        }}
+      >
+        <svg
+          width={iconSize}
+          height={iconSize}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+          data-hamburger-icon=""
+          {...partAttrs('icon')}
+        >
+          <path d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+        {showTriggerLabel && (
+          <span data-hamburger-label="" {...partAttrs('label')}>
+            {triggerLabel}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div
+          data-hamburger-drawer=""
+          style={{ position: 'fixed', inset: 0, zIndex: 1000 }}
+        >
+          {showOverlay && (
+            <div
+              data-hamburger-overlay=""
+              {...partAttrs('overlay')}
+              onClick={() => setOpen(false)}
+              style={{
+                position: 'absolute',
+                inset: 0,
+                background: 'rgba(0,0,0,0.5)'
+              }}
+            />
+          )}
+          <div
+            data-hamburger-panel=""
+            {...partAttrs('drawer', { open: true })}
+            style={{
+              position: 'absolute',
+              top: 0,
+              bottom: 0,
+              [side === 'right' ? 'right' : 'left']: 0,
+              width: `min(${drawerWidth}px, ${drawerMaxWidth}vw)`,
+              background: '#ffffff',
+              color: '#111827',
+              display: 'flex',
+              flexDirection: 'column',
+              boxShadow: '0 0 24px rgba(0,0,0,0.2)',
+              overflowY: 'auto'
+            }}
+          >
+            {showClose && (
+              <div
+                data-hamburger-header=""
+                {...partAttrs('header')}
+                style={{
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                  padding: '12px'
+                }}
+              >
+                <button
+                  type="button"
+                  aria-label={closeLabel}
+                  data-hamburger-close=""
+                  {...partAttrs('close')}
+                  onClick={() => setOpen(false)}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: '4px'
+                  }}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.8"
+                    strokeLinecap="round"
+                  >
+                    <path d="M6 6l12 12M18 6L6 18" />
+                  </svg>
+                </button>
+              </div>
+            )}
+            <nav
+              data-hamburger-nav=""
+              {...partAttrs('menu')}
+              style={{ padding: '0 16px 24px' }}
+            >
+              {items.length === 0 && !customRows && isDesigner && (
+                <span
+                  data-hamburger-empty=""
+                  {...partAttrs('empty', { empty: true })}
+                  style={{ display: 'block', padding: '14px 0', opacity: 0.6 }}
+                >
+                  {emptyText}
+                </span>
+              )}
+
+              {customRows ??
+                items.map((item, index) => {
+                  const key = String(item.pk ?? index);
+                  const hasChildren = (item.children || []).length > 0;
+                  const rowOpen = hasChildren && isExpanded(key);
+
+                  return (
+                    <div
+                      key={key}
+                      data-hamburger-item=""
+                      {...partAttrs('item-row', { open: rowOpen })}
+                      style={{ borderBottom: '1px solid #f3f4f6' }}
+                    >
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between'
+                        }}
+                      >
+                        <NextLink
+                          href={item.url || '#'}
+                          data-hamburger-link=""
+                          {...partAttrs('item')}
+                          onClick={handleNavigate}
+                          style={{
+                            display: 'block',
+                            padding: '14px 0',
+                            color: 'inherit',
+                            textDecoration: 'none',
+                            fontWeight: 500
+                          }}
+                        >
+                          {item.label}
+                        </NextLink>
+                        {hasChildren && (
+                          <button
+                            type="button"
+                            aria-label={toggleLabel}
+                            aria-expanded={rowOpen}
+                            data-hamburger-toggle=""
+                            {...partAttrs('toggle', { open: rowOpen })}
+                            onClick={() => toggleExpanded(key)}
+                            style={{
+                              background: 'none',
+                              border: 'none',
+                              cursor: 'pointer',
+                              padding: '8px'
+                            }}
+                          >
+                            <svg
+                              width="16"
+                              height="16"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="1.8"
+                              style={{
+                                transform: rowOpen ? 'rotate(180deg)' : 'none',
+                                transition: 'transform 150ms'
+                              }}
+                            >
+                              <path d="M6 9l6 6 6-6" />
+                            </svg>
+                          </button>
+                        )}
+                      </div>
+                      {hasChildren && rowOpen && (
+                        <div
+                          data-hamburger-submenu=""
+                          {...partAttrs('submenu', { open: true })}
+                          style={{ paddingBottom: '10px' }}
+                        >
+                          {(item.children || []).map((child, childIndex) => (
+                            <NextLink
+                              key={child.pk ?? childIndex}
+                              href={child.url || '#'}
+                              data-hamburger-submenu-link=""
+                              {...partAttrs('submenu-item')}
+                              onClick={handleNavigate}
+                              style={{
+                                display: 'block',
+                                padding: '8px 0 8px 12px',
+                                color: '#4b5563',
+                                textDecoration: 'none',
+                                fontSize: '14px'
+                              }}
+                            >
+                              {child.label}
+                            </NextLink>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+            </nav>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default HamburgerMenuBlock;