orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/catalog/CatalogHeader.tsx

@@ -0,0 +1,644 @@
+'use client';
+
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type FocusEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react';
+import {
+  useOrionplace,
+  useOrionplaceCatalog,
+  useOrionplaceProducts,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import type { ICategory } from '@/interfaces/orionplace';
+import {
+  catalogCategoryTrail,
+  catalogRepresentatives,
+  navigationCatalogCategories,
+} from '@/lib/orionplace/catalog';
+import {
+  getAvailableNestedValueFromObject,
+  safePublicUrl,
+} from '@/lib/orionplace/presentation';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import {
+  CatalogRepresentative,
+  type CatalogRepresentativeProps,
+} from './CatalogRepresentative';
+import styles from './CatalogHeader.module.css';
+import { headerLabels } from '@/lib/orionplace/headerLabels';
+
+type ForwardedProductEvents = Pick<
+  CatalogRepresentativeProps,
+  | 'onSelectSeller'
+  | 'onSelectVariant'
+  | 'onRequestSecondaryVariants'
+  | 'onSelectSecondaryVariant'
+  | 'onToggleFavorite'
+  | 'onAdd'
+  | 'onRemove'
+  | 'onSubscribe'
+  | 'onUnsubscribe'
+  | 'onPreorder'
+>;
+
+export interface CatalogHeaderProps extends ForwardedProductEvents {
+  label?: string;
+  disabled?: boolean;
+  productDisabled?: boolean;
+  productActionsDisabled?: boolean;
+  closeLabel?: string;
+  backLabel?: string;
+  viewCategoryLabel?: string;
+  productsLabel?: string;
+  emptyLabel?: string;
+  emptyProductsLabel?: string;
+  categoryHref?: (categoryId: number) => string;
+  /** The product page address: the products shown are links to it. */
+  productHref?: (productId: number) => string;
+  renderNavigation?: (props: {
+    close: (restoreFocus?: boolean) => void;
+  }) => ReactNode;
+  onToggle?: (open: boolean) => void;
+  onSelect?: (category: ICategory) => void;
+  onSelectProduct?: CatalogRepresentativeProps['onSelect'];
+}
+
+export function CatalogHeader({
+  label: labelInput = '',
+  disabled = false,
+  productDisabled = false,
+  productActionsDisabled = false,
+  closeLabel: closeLabelInput = '',
+  backLabel: backLabelInput = '',
+  viewCategoryLabel: viewCategoryLabelInput = '',
+  productsLabel: productsLabelInput = '',
+  emptyLabel: emptyLabelInput = '',
+  emptyProductsLabel: emptyProductsLabelInput = '',
+  categoryHref,
+  productHref,
+  renderNavigation,
+  onToggle,
+  onSelect,
+  onSelectProduct,
+  ...productEvents
+}: CatalogHeaderProps) {
+  const init                        = useOrionplace(selectInit);
+  const catalog                     = useOrionplaceCatalog((state) => state.catalog);
+  const productInit                 = useOrionplaceProducts((state) => state.init);
+  const locale                      = useOrionplaceSelections((state) => state.localeCode);
+  // Empty labels follow the storefront language, also outside the header.
+  const copy                        = headerLabels(locale);
+  const label                       = labelInput || copy.catalog;
+  const closeLabel                  = closeLabelInput || copy.close;
+  const backLabel                   = backLabelInput || copy.back;
+  const viewCategoryLabel           = viewCategoryLabelInput || copy.viewCategory;
+  const productsLabel               = productsLabelInput || copy.highlights;
+  const emptyLabel                  = emptyLabelInput || copy.empty;
+  const emptyProductsLabel          = emptyProductsLabelInput || copy.emptyProducts;
+  const roots                       = useMemo(
+    () => navigationCatalogCategories(catalog),
+    [catalog],
+  );
+  const shortcuts                   = useMemo(
+    () => roots.filter((category) => category.separate_menu),
+    [roots],
+  );
+  const rootCategories              = useMemo(() => {
+    const regular = roots.filter((category) => !category.separate_menu);
+    return regular.length ? regular : roots;
+  }, [roots]);
+  const rootRef                     = useRef<HTMLDivElement>(null);
+  const openerRef                   = useRef<HTMLElement | null>(null);
+  const [opened, setOpened]         = useState(false);
+  const [branchIds, setBranchIds]   = useState<number[]>([]);
+  const [activeId, setActiveId]     = useState<number>();
+  const [shortcutId, setShortcutId] = useState<number>();
+  const id                          = useId();
+  const trail                       = useMemo(
+    () => catalogCategoryTrail(roots, branchIds),
+    [roots, branchIds],
+  );
+  const parent                      = trail.at(-1);
+  const categories                  = parent
+    ? navigationCatalogCategories(parent.childs ?? [])
+    : rootCategories;
+  const activeCategory              =
+    categories.find((category) => category.id === activeId) ??
+    parent ??
+    categories[0];
+  const representatives             = catalogRepresentatives(
+    activeCategory,
+    productInit?.products ?? [],
+    productInit?.featured ?? [],
+  );
+  const selectedHref                = activeCategory
+    ? safePublicUrl(categoryHref?.(activeCategory.id)) || undefined
+    : undefined;
+
+  function categoryName(category: ICategory) {
+    return (
+      getAvailableNestedValueFromObject(category.locale, locale, 'cg_name') ||
+      String(category.id)
+    );
+  }
+
+  function setOpen(value: boolean) {
+    if (opened !== value) {
+      setOpened(value);
+      onToggle?.(value);
+    }
+  }
+
+  function showRoot() {
+    setBranchIds([]);
+    setActiveId(undefined);
+    setShortcutId(undefined);
+  }
+
+  function closeMenu(restoreFocus = false) {
+    setOpen(false);
+    showRoot();
+    if (restoreFocus) {
+      openerRef.current?.focus();
+    }
+  }
+
+  function toggleCatalog(event: MouseEvent<HTMLButtonElement>) {
+    if (disabled || !roots.length) {
+      return;
+    }
+    if (opened && shortcutId === undefined) {
+      closeMenu();
+      return;
+    }
+    openerRef.current = event.currentTarget;
+    showRoot();
+    setOpen(true);
+  }
+
+  function toggleShortcut(
+    category: ICategory,
+    event: MouseEvent<HTMLButtonElement>,
+  ) {
+    if (disabled) {
+      return;
+    }
+    if (opened && shortcutId === category.id) {
+      closeMenu();
+      return;
+    }
+    openerRef.current = event.currentTarget;
+    setShortcutId(category.id);
+    setBranchIds([category.id]);
+    setActiveId(category.id);
+    setOpen(true);
+  }
+
+  function browseCategory(category: ICategory) {
+    setActiveId(category.id);
+    if (!navigationCatalogCategories(category.childs ?? []).length) {
+      return;
+    }
+    setBranchIds([...trail.map((entry) => entry.id), category.id]);
+    requestAnimationFrame(() => {
+      rootRef.current
+        ?.querySelector<HTMLButtonElement>('[data-catalog-back]')
+        ?.focus();
+    });
+  }
+
+  function previewCategory(
+    category: ICategory,
+    event: ReactPointerEvent<HTMLButtonElement>,
+  ) {
+    if (event.pointerType === 'mouse') {
+      setActiveId(category.id);
+    }
+  }
+
+  function goBack() {
+    const previous = trail.at(-1)?.id;
+    setBranchIds(trail.slice(0, -1).map((category) => category.id));
+    setActiveId(previous);
+    if (trail.length <= 1) {
+      setShortcutId(undefined);
+    }
+    requestAnimationFrame(() => {
+      rootRef.current
+        ?.querySelector<HTMLButtonElement>(
+          `[data-catalog-category="${previous}"]`,
+        )
+        ?.focus();
+    });
+  }
+
+  function selectBreadcrumb(
+    category: ICategory,
+    href: string,
+    event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+  ) {
+    const modified =
+      event.button > 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey;
+    if (href) {
+      if (modified) {
+        return;
+      }
+
+      closeMenu(true);
+      onSelect?.(category);
+      return;
+    }
+
+    event.preventDefault();
+    closeMenu(true);
+    onSelect?.(category);
+  }
+
+  function selectCategory(
+    event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+  ) {
+    const modified =
+      event.button > 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey;
+    if (selectedHref && modified) {
+      return;
+    }
+    event.preventDefault();
+    if (activeCategory) {
+      closeMenu(true);
+      onSelect?.(activeCategory);
+    }
+  }
+
+  function selectProduct(
+    product: Parameters<NonNullable<CatalogRepresentativeProps['onSelect']>>[0],
+  ) {
+    closeMenu(true);
+    onSelectProduct?.(product);
+  }
+
+  function isProductActionOverlay(target: EventTarget | null) {
+    return (
+      target instanceof Element &&
+      Boolean(target.closest('[data-product-action-overlay]'))
+    );
+  }
+
+  function onFocusOut(event: FocusEvent<HTMLDivElement>) {
+    if (isProductActionOverlay(event.relatedTarget)) {
+      return;
+    }
+    if (
+      event.relatedTarget instanceof Node &&
+      !rootRef.current?.contains(event.relatedTarget)
+    ) {
+      closeMenu();
+    }
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (event.key === 'Escape' && opened) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeMenu(true);
+    }
+  }
+
+  useEffect(() => {
+    const normalized = catalogCategoryTrail(roots, branchIds).map(
+      (category) => category.id,
+    );
+    if (normalized.join(',') !== branchIds.join(',')) {
+      setBranchIds(normalized);
+    }
+    if ((disabled || !roots.length) && opened) {
+      setOpen(false);
+      showRoot();
+    }
+    if (
+      shortcutId !== undefined &&
+      !shortcuts.some((category) => category.id === shortcutId)
+    ) {
+      setShortcutId(undefined);
+    }
+  }, [roots, shortcuts, branchIds, disabled, opened, shortcutId]);
+
+  useEffect(() => {
+    function outside(event: PointerEvent) {
+      if (isProductActionOverlay(event.target)) {
+        return;
+      }
+      if (
+        event.target instanceof Node &&
+        !rootRef.current?.contains(event.target)
+      ) {
+        closeMenu();
+      }
+    }
+
+    document.addEventListener('pointerdown', outside, true);
+    return () => document.removeEventListener('pointerdown', outside, true);
+  });
+
+  return (
+    <div
+      ref={rootRef}
+      className={styles.catalog}
+      data-orionplace-catalog
+      onKeyDown={onKeyDown}
+      onBlur={onFocusOut}
+    >
+      <nav
+        className={styles.navigationRow}
+        aria-label={label}
+      >
+        <button
+          type="button"
+          aria-expanded={opened && shortcutId === undefined}
+          aria-controls={`${id}-panel`}
+          disabled={disabled || !roots.length}
+          className={`${styles.navigationButton} ${opened && shortcutId === undefined ? styles.active : ''}`.trim()}
+          data-catalog-toggle
+          onClick={toggleCatalog}
+        >
+          <svg
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            aria-hidden="true"
+          >
+            <path
+              d={
+                opened && shortcutId === undefined
+                  ? 'm5 5 10 10M15 5 5 15'
+                  : 'M3 5h14M3 10h14M3 15h14'
+              }
+            />
+          </svg>
+          {label}
+        </button>
+        {renderNavigation?.({ close: closeMenu })}
+        {shortcuts.map((category) => (
+          <button
+            key={category.id}
+            type="button"
+            aria-expanded={opened && shortcutId === category.id}
+            aria-controls={`${id}-panel`}
+            disabled={disabled}
+            data-catalog-shortcut={category.id}
+            className={`${styles.navigationButton} ${
+              opened && shortcutId === category.id ? styles.active : ''
+            }`.trim()}
+            onClick={(event) => toggleShortcut(category, event)}
+          >
+            {init?.visual_settings?.menu_image && category.menu_image && (
+              <OrionplaceImage
+                src={category.menu_image}
+                alt=""
+                width={24}
+                height={24}
+                className={styles.shortcutImage}
+              />
+            )}
+            <span className={styles.truncate}>{categoryName(category)}</span>
+            <svg
+              className={styles.shortcutChevron}
+              viewBox="0 0 20 20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              aria-hidden="true"
+            >
+              <path d="m5 7.5 5 5 5-5" />
+            </svg>
+          </button>
+        ))}
+      </nav>
+      {!roots.length && <p className={styles.emptyCaption}>{emptyLabel}</p>}
+      {opened && (
+        <section
+          id={`${id}-panel`}
+          aria-label={label}
+          className={styles.panel}
+          data-catalog-panel
+        >
+          <header className={styles.panelHeader}>
+            {trail.length > 0 && (
+              <button
+                type="button"
+                aria-label={backLabel}
+                title={backLabel}
+                className={styles.iconButton}
+                data-catalog-back
+                onClick={goBack}
+              >
+                <svg
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  aria-hidden="true"
+                >
+                  <path d="m12 5-5 5 5 5" />
+                </svg>
+              </button>
+            )}
+            <nav
+              className={styles.breadcrumbs}
+              aria-label={label}
+              data-catalog-breadcrumbs
+            >
+              <button
+                type="button"
+                onClick={showRoot}
+              >
+                {label}
+              </button>
+              {trail.map((category) => {
+                const href =
+                  safePublicUrl(categoryHref?.(category.id)) || '';
+
+                return (
+                  <span
+                    key={category.id}
+                    className={styles.crumb}
+                  >
+                    <span aria-hidden="true">/</span>
+                    {href ? (
+                      <a
+                        href={href}
+                        data-catalog-breadcrumb={category.id}
+                        onClick={(event) =>
+                          selectBreadcrumb(category, href, event)
+                        }
+                      >
+                        {categoryName(category)}
+                      </a>
+                    ) : (
+                      <button
+                        type="button"
+                        data-catalog-breadcrumb={category.id}
+                        onClick={(event) =>
+                          selectBreadcrumb(category, '', event)
+                        }
+                      >
+                        {categoryName(category)}
+                      </button>
+                    )}
+                  </span>
+                );
+              })}
+            </nav>
+            <button
+              type="button"
+              aria-label={closeLabel}
+              title={closeLabel}
+              className={styles.iconButton}
+              data-catalog-close
+              onClick={() => closeMenu(true)}
+            >
+              <svg
+                viewBox="0 0 20 20"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                aria-hidden="true"
+              >
+                <path d="m5 5 10 10M15 5 5 15" />
+              </svg>
+            </button>
+          </header>
+          <div className={styles.panelBody}>
+            <nav
+              className={styles.categoryNavigation}
+              aria-label={activeCategory ? categoryName(activeCategory) : label}
+            >
+              <ul data-catalog-categories>
+                {categories.map((category) => (
+                  <li key={category.id}>
+                    <button
+                      type="button"
+                      data-catalog-category={category.id}
+                      aria-current={
+                        activeCategory?.id === category.id ? 'true' : undefined
+                      }
+                      className={styles.categoryButton}
+                      onPointerEnter={(event) =>
+                        previewCategory(category, event)
+                      }
+                      onFocus={() => setActiveId(category.id)}
+                      onClick={() => browseCategory(category)}
+                    >
+                      {init?.visual_settings?.catalog_menu_image && (
+                        <OrionplaceImage
+                          src={category.menu_image}
+                          alt=""
+                          width={32}
+                          height={32}
+                          className={styles.categoryImage}
+                        />
+                      )}
+                      <span>{categoryName(category)}</span>
+                      {navigationCatalogCategories(category.childs ?? []).length >
+                        0 && (
+                        <svg
+                          viewBox="0 0 20 20"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          aria-hidden="true"
+                        >
+                          <path d="m7.5 5 5 5-5 5" />
+                        </svg>
+                      )}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+              {!categories.length && (
+                <OrionplaceEmptyState
+                  kind="generic"
+                  size="compact"
+                  message={emptyLabel}
+                />
+              )}
+            </nav>
+            <div
+              className={styles.representativeArea}
+              data-catalog-representatives
+            >
+              {activeCategory && (
+                <div className={styles.representativeHeader}>
+                  <div>
+                    <p>{productsLabel}</p>
+                    <h2>{categoryName(activeCategory)}</h2>
+                  </div>
+                  {selectedHref ? (
+                    <a
+                      href={selectedHref}
+                      data-catalog-select
+                      aria-label={`${viewCategoryLabel}: ${categoryName(activeCategory)}`}
+                      onClick={selectCategory}
+                    >
+                      {viewCategoryLabel} <span aria-hidden="true">↗</span>
+                    </a>
+                  ) : (
+                    <button
+                      type="button"
+                      data-catalog-select
+                      aria-label={`${viewCategoryLabel}: ${categoryName(activeCategory)}`}
+                      onClick={selectCategory}
+                    >
+                      {viewCategoryLabel} <span aria-hidden="true">↗</span>
+                    </button>
+                  )}
+                </div>
+              )}
+              {representatives.length > 0 ? (
+                <div className={styles.representatives}>
+                  {representatives.map((entry) => (
+                    <CatalogRepresentative
+                      key={`${entry.collection}:${entry.product.id}`}
+                      productId={entry.product.id}
+                      collection={entry.collection}
+                      disabled={disabled || productDisabled}
+                      actionsDisabled={productActionsDisabled}
+                      productHref={productHref}
+                      onSelect={selectProduct}
+                      {...productEvents}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <OrionplaceEmptyState
+                  kind="generic"
+                  size="compact"
+                  message={emptyProductsLabel}
+                />
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}