orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/address/StorefrontAddresses.tsx

@@ -0,0 +1,438 @@
+'use client';
+
+import { hasFlag } from 'country-flag-icons';
+import 'country-flag-icons/3x2/flags.css';
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type {
+  IUserAddress,
+  IUserAddressListRequest,
+  IUserAddressShippingRequest,
+} from '@/interfaces/orionplace/address/IUserAddress';
+import {
+  addressCountryName,
+  addressSummary,
+} from '@/lib/orionplace/addressPresentation';
+import { fieldErrorText, OrionplaceApiError } from '@/lib/orionplace/api';
+import { canShipTo } from '@/lib/orionplace/cartAddress';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import {
+  AddressForm,
+  type AddressFormProps,
+} from '@/components/orionplace/address/AddressForm';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import styles from './StorefrontAddresses.module.css';
+
+export interface StorefrontAddressesProps {
+  addresses?: readonly IUserAddress[];
+  loaded?: boolean;
+  pending?: boolean;
+  error?: string;
+  loadOnMount?: boolean;
+  form?: Omit<AddressFormProps, 'address' | 'onSaved' | 'onCancel' | 'onDone'>;
+  onLoad?: (request: IUserAddressListRequest) => Promise<void> | void;
+  onSetDefault?: (
+    request: IUserAddressShippingRequest,
+    address: IUserAddress,
+  ) => Promise<void> | void;
+  onDelete?: (address: IUserAddress) => Promise<void> | void;
+  onSaved?: (addresses: IUserAddress[]) => void;
+}
+
+type Editor = IUserAddress | null | undefined;
+type AddressActionKey = 'edit' | 'default' | 'delete';
+
+// An address abroad can not become the default; clearing stays possible.
+function blockedDefault(address: IUserAddress) {
+  return !address.is_default_for_shipping && !canShipTo(address);
+}
+
+export function StorefrontAddresses({
+  addresses = [],
+  loaded = false,
+  pending = false,
+  error = '',
+  loadOnMount = true,
+  form,
+  onLoad,
+  onSetDefault,
+  onDelete,
+  onSaved,
+}: StorefrontAddressesProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = featureLabels(locale);
+  const copy = labels.addresses;
+  const menuId = useId();
+  const requested = useRef(false);
+  const roots = useRef(new Map<number, HTMLDivElement>());
+  const triggers = useRef(new Map<number, HTMLButtonElement>());
+  const menuItems = useRef<HTMLButtonElement[]>([]);
+  const [editor, setEditor] = useState<Editor>(undefined);
+  const [confirmation, setConfirmation] = useState<number | undefined>();
+  const [openMenuId, setOpenMenuId] = useState<number | undefined>();
+  const [actionPending, setActionPending] = useState(false);
+  const [actionError, setActionError] = useState('');
+  const busy = pending || actionPending;
+  const notice = actionError || error;
+
+  useEffect(() => {
+    if (!requested.current && loadOnMount) {
+      requested.current = true;
+      void onLoad?.({ filters: {} });
+    }
+  }, [loadOnMount]);
+
+  useEffect(() => {
+    function outside(event: PointerEvent) {
+      const root =
+        openMenuId === undefined ? undefined : roots.current.get(openMenuId);
+      if (
+        root &&
+        event.target instanceof Node &&
+        !root.contains(event.target)
+      ) {
+        closeMenu(false);
+      }
+    }
+    document.addEventListener('pointerdown', outside, true);
+    return () => document.removeEventListener('pointerdown', outside, true);
+  }, [openMenuId]);
+
+  function enabledItems() {
+    return menuItems.current.filter((item) => item && !item.disabled);
+  }
+
+  function focusItem(position: 'first' | 'last') {
+    requestAnimationFrame(() => {
+      const items = enabledItems();
+      (position === 'first' ? items[0] : items.at(-1))?.focus();
+    });
+  }
+
+  function openMenu(address: IUserAddress, position: 'first' | 'last') {
+    menuItems.current = [];
+    setOpenMenuId(address.id);
+    focusItem(position);
+  }
+
+  function closeMenu(returnFocus: boolean) {
+    const addressId = openMenuId;
+    setOpenMenuId(undefined);
+    if (returnFocus && addressId !== undefined) {
+      requestAnimationFrame(() => triggers.current.get(addressId)?.focus());
+    }
+  }
+
+  function toggleMenu(address: IUserAddress) {
+    if (openMenuId === address.id) {
+      closeMenu(false);
+    } else {
+      openMenu(address, 'first');
+    }
+  }
+
+  function triggerKeyDown(
+    event: KeyboardEvent<HTMLButtonElement>,
+    address: IUserAddress,
+  ) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      openMenu(address, event.key === 'ArrowDown' ? 'first' : 'last');
+    }
+  }
+
+  function menuKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    const items = enabledItems();
+    const current = items.indexOf(event.currentTarget);
+    const positions: Record<string, number> = {
+      ArrowDown: (current + 1) % items.length,
+      ArrowUp: (current - 1 + items.length) % items.length,
+      Home: 0,
+      End: items.length - 1,
+    };
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeMenu(true);
+    } else if (event.key === 'Tab') {
+      closeMenu(false);
+    } else if (Object.hasOwn(positions, event.key)) {
+      event.preventDefault();
+      items[positions[event.key]!]?.focus();
+    }
+  }
+
+  // The backend's field messages, or the localized fallback (as the Nuxt
+  // task shows them).
+  function failure(reason: unknown) {
+    const fields = reason instanceof OrionplaceApiError ? reason.fields : {};
+    return fieldErrorText(fields) || labels.failed;
+  }
+
+  function reload() {
+    setActionError('');
+    void onLoad?.({ filters: {} });
+  }
+
+  async function setDefault(address: IUserAddress) {
+    if (!onSetDefault || busy) {
+      return;
+    }
+    setActionPending(true);
+    setActionError('');
+    try {
+      await onSetDefault(
+        { is_default_for_shipping: !address.is_default_for_shipping },
+        address,
+      );
+      await onLoad?.({ filters: {} });
+    } catch (reason) {
+      setActionError(failure(reason));
+    } finally {
+      setActionPending(false);
+    }
+  }
+
+  async function remove(address: IUserAddress) {
+    if (!onDelete || busy) {
+      return;
+    }
+    setActionPending(true);
+    setActionError('');
+    try {
+      await onDelete(address);
+      setConfirmation(undefined);
+      await onLoad?.({ filters: {} });
+    } catch (reason) {
+      setActionError(failure(reason));
+    } finally {
+      setActionPending(false);
+    }
+  }
+
+  function choose(key: AddressActionKey, address: IUserAddress) {
+    closeMenu(true);
+    if (key === 'edit') {
+      setEditor(address);
+    } else if (key === 'default') {
+      void setDefault(address);
+    } else {
+      setConfirmation(address.id);
+    }
+  }
+
+  return (
+    <section
+      className={styles.section}
+      data-feature-part="StorefrontAddresses"
+      aria-busy={busy}
+    >
+      <div className={styles.heading}>
+        <div>
+          <h1>{copy.title}</h1>
+          <p>{copy.description}</p>
+        </div>
+        <button
+          type="button"
+          className={styles.primary}
+          data-address-add
+          disabled={busy || editor !== undefined}
+          aria-label={copy.add}
+          onClick={() => setEditor(null)}
+        >
+          + {labels.add}
+        </button>
+      </div>
+      {notice ? (
+        <div
+          className={styles.error}
+          role="alert"
+        >
+          <span>{notice}</span>
+          <button
+            type="button"
+            disabled={busy}
+            onClick={reload}
+          >
+            {labels.retry}
+          </button>
+        </div>
+      ) : null}
+      {editor !== undefined ? (
+        <AddressForm
+          key={editor?.id ?? 'new'}
+          {...form}
+          address={editor ?? undefined}
+          onSaved={(saved) => {
+            // The form stays open on the saved address until it is closed.
+            onSaved?.(saved);
+            void onLoad?.({ filters: {} });
+          }}
+          onDone={() => setEditor(undefined)}
+          onCancel={() => setEditor(undefined)}
+        />
+      ) : null}
+      {busy && !loaded ? (
+        <p
+          className="op-feature-loading"
+          role="status"
+        >
+          <span className={styles.screenReaderOnly}>{labels.loading}</span>
+        </p>
+      ) : null}
+      {loaded && !addresses.length && editor === undefined ? (
+        <OrionplaceEmptyState
+          kind="addresses"
+          message={copy.empty}
+        />
+      ) : null}
+      <ul className={styles.records}>
+        {addresses.map((address) => {
+          const country = addressCountryName(address.country, locale);
+          const code = address.country?.iso_3166_1_a2?.toUpperCase() ?? '';
+          const flag = hasFlag(code) ? code : '';
+          const menuOpen = openMenuId === address.id;
+          return (
+            <li
+              key={address.id}
+              className={styles.record}
+              data-address={address.id}
+            >
+              <div className={styles.recordContent}>
+                <div
+                  className={styles.title}
+                  data-address-title
+                >
+                  {flag ? (
+                    <span
+                      className={`flag:${flag} ${styles.flag}`}
+                      role="img"
+                      aria-label={country}
+                      title={country}
+                      data-address-flag
+                    />
+                  ) : null}
+                  <span className={styles.label}>{address.address_label}</span>
+                </div>
+                <p>{addressSummary(address, locale)}</p>
+                {address.is_default_for_shipping ? (
+                  <span className={styles.default}>{copy.default}</span>
+                ) : null}
+                {canShipTo(address) ? null : (
+                  <p
+                    className={styles.noShipping}
+                    data-address-no-shipping
+                  >
+                    {copy.noShipping}
+                  </p>
+                )}
+                {confirmation === address.id ? (
+                  <div className={styles.confirmation}>
+                    <p>{copy.deleteQuestion}</p>
+                    <div className={styles.confirmationActions}>
+                      <button
+                        type="button"
+                        disabled={busy}
+                        data-address-confirm-delete
+                        onClick={() => void remove(address)}
+                      >
+                        {labels.delete}
+                      </button>
+                      <button
+                        type="button"
+                        disabled={busy}
+                        onClick={() => setConfirmation(undefined)}
+                      >
+                        {labels.cancel}
+                      </button>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+              <div
+                ref={(element) => {
+                  if (element) roots.current.set(address.id, element);
+                  else roots.current.delete(address.id);
+                }}
+                className={styles.menuRoot}
+              >
+                <button
+                  ref={(element) => {
+                    if (element) triggers.current.set(address.id, element);
+                    else triggers.current.delete(address.id);
+                  }}
+                  type="button"
+                  className={styles.menuTrigger}
+                  data-address-menu
+                  aria-haspopup="menu"
+                  aria-expanded={menuOpen}
+                  aria-controls={
+                    menuOpen ? `${menuId}-menu-${address.id}` : undefined
+                  }
+                  aria-label={`${copy.actions}: ${address.address_label}`}
+                  disabled={busy}
+                  onClick={() => toggleMenu(address)}
+                  onKeyDown={(event) => triggerKeyDown(event, address)}
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    aria-hidden="true"
+                  >
+                    <path d="M4 7h16M4 12h16M4 17h16" />
+                  </svg>
+                </button>
+                {menuOpen ? (
+                  <div
+                    id={`${menuId}-menu-${address.id}`}
+                    role="menu"
+                    aria-label={`${copy.actions}: ${address.address_label}`}
+                    className={styles.menu}
+                  >
+                    {(
+                      [
+                        ['edit', labels.edit, '', busy || editor !== undefined],
+                        [
+                          'default',
+                          address.is_default_for_shipping
+                            ? copy.clearDefault
+                            : copy.makeDefault,
+                          address.is_default_for_shipping
+                            ? copy.clearDefaultHint
+                            : blockedDefault(address)
+                              ? copy.noShippingDefault
+                              : copy.makeDefaultHint,
+                          busy || blockedDefault(address),
+                        ],
+                        ['delete', labels.delete, '', busy],
+                      ] as [AddressActionKey, string, string, boolean][]
+                    ).map(([key, label, hint, disabled], index) => (
+                      <button
+                        key={key}
+                        ref={(element) => {
+                          if (element) menuItems.current[index] = element;
+                        }}
+                        type="button"
+                        role="menuitem"
+                        tabIndex={-1}
+                        data-address-action={key}
+                        disabled={disabled}
+                        aria-label={hint || undefined}
+                        data-danger={key === 'delete' || undefined}
+                        onClick={() => choose(key, address)}
+                        onKeyDown={menuKeyDown}
+                      >
+                        {label}
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

package/templates/components/orionplace/banners/MainBanner.README.md

@@ -0,0 +1,65 @@
+# MainBanner
+
+## English
+
+`MainBanner` displays every image from the current locale's main banners as an
+ordered carousel. `format="auto"` selects mobile, tablet, wide or desktop media
+from the browser width after hydration; the server and first client render use
+desktop media. An explicit format stays fixed. When that format has no valid
+public image, the component checks desktop, wide, tablet and mobile images in
+that order. A loaded picture keeps its own shape, so nothing is cut off;
+until it loads, or when it fails, the box has the chosen format's usual shape
+(`bannerFormatSizes`: desktop 1240×500, wide 1024×500, tablet 768×500, mobile
+480×525).
+
+The previous and next buttons wrap around the slides. Slides never advance on a
+timer. A locale, format or Application Load change returns to the first slide.
+`label` supplies the carousel's accessible name and image description; localized
+storefront text is used when it is empty.
+
+A banner with no `category` is not interactive. A banner with a category renders
+as a button and calls `onSelect(banner)`. When `categoryHref(categoryId)` returns
+a safe public path, it renders as a real link: a plain click still calls
+`onSelect`, while modifier clicks retain the browser's new-tab behavior.
+
+### Props
+
+| Prop                                                | Meaning                                                                                                  |
+| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `label?: string`                                    | Visible or accessible name for the component’s main control or region.                                   |
+| `format?: TBannerFormats \| "auto"`                 | Image format selected for the current viewport.                                                          |
+| `categoryHref?: (categoryId: number) => string`     | Builds the category destination from the callback arguments.                                             |
+| `onSelect?: (banner: IAppLoadCommonBanner) => void` | Passes the complete selected banner object when it has a `category`. The application handles navigation to that category. |
+
+## Русский
+
+`MainBanner` показывает каждое изображение главных баннеров текущего языка как
+отдельный слайд в порядке ответа. При `format="auto"` после запуска страницы в
+браузере выбирается мобильное, планшетное, широкое или настольное изображение по
+ширине окна; сервер и первый клиентский рендер используют настольный формат.
+Явно переданный формат не меняется. Если у него нет допустимого общедоступного
+изображения, компонент по очереди проверяет настольный, широкий, планшетный и
+мобильный наборы. Загруженное изображение сохраняет свою форму и не обрезается;
+до загрузки или при ошибке блок имеет обычную форму выбранного формата
+(`bannerFormatSizes`: настольный 1240×500, широкий 1024×500, планшетный 768×500,
+мобильный 480×525).
+
+Кнопки назад и вперёд переходят по слайдам по кругу. Автоматического
+переключения нет. Смена языка, формата или данных Application Load возвращает к
+первому слайду. `label` задаёт доступное название карусели и описание
+изображения; если он пустой, используется локализованный текст магазина.
+
+Баннер без `category` не реагирует на нажатие. Баннер с категорией отображается
+кнопкой и вызывает `onSelect(banner)`. Если `categoryHref(categoryId)` возвращает
+допустимый общедоступный путь, баннер становится настоящей ссылкой: обычное
+нажатие по-прежнему вызывает `onSelect`, а нажатие с модификатором сохраняет
+открытие ссылки средствами браузера, например в новой вкладке.
+
+### Свойства
+
+| Свойство                                            | Назначение                                                                                                |
+| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `label?: string`                                    | Видимое или доступное название основного элемента компонента.                                             |
+| `format?: TBannerFormats \| "auto"`                 | Формат изображения, выбранный для текущей ширины экрана.                                                  |
+| `categoryHref?: (categoryId: number) => string`     | Строит адрес ссылки категории из аргументов обработчика.                                                  |
+| `onSelect?: (banner: IAppLoadCommonBanner) => void` | Передаёт полный объект выбранного баннера, если у него указан `category`. Приложение обрабатывает переход к этой категории. |

package/templates/components/orionplace/banners/MainBanner.module.css

@@ -0,0 +1,112 @@
+.root {
+  position: relative;
+  min-width: 0;
+  container-type: inline-size;
+}
+
+.banner {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  outline: none;
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  text-decoration: none;
+  cursor: default;
+}
+
+.interactive {
+  cursor: pointer;
+}
+
+/* A loaded picture sets the height by its own shape; the format's shape only
+   holds the place while there is no picture. */
+.banner:has(> img) {
+  aspect-ratio: auto !important;
+}
+
+.banner > img {
+  height: auto;
+}
+
+.interactive:focus-visible {
+  opacity: 0.9;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.controls {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  color: var(--orionplace-text);
+  font-size: 12px;
+  line-height: calc(16 / 12);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.counter,
+.control {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0;
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+}
+
+.counter {
+  box-sizing: border-box;
+  padding: 0 12px;
+}
+
+.control {
+  width: 40px;
+  padding: 0;
+  outline: none;
+  /* The arrows keep Nuxt's text-sm, not the counter's 12px medium text. */
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.control:focus-visible {
+  background: var(--orionplace-hover);
+}
+
+@media (hover: hover) {
+  .control:hover {
+    background: var(--orionplace-hover);
+  }
+}
+
+/* The banner's own width (it spans the page, so the former screen widths). */
+@container (min-width: 640px) {
+  .controls {
+    right: 24px;
+    bottom: 24px;
+  }
+}
+
+@container (min-width: 1024px) {
+  .controls {
+    right: 32px;
+  }
+}