orionplace-react 0.7.7 → 0.8.0

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

@@ -1,644 +0,0 @@
-'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>
-  );
-}