orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/cart/CartPreview.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { ICartPreviewState } from '@/interfaces/orionplace/cart/ICartModal';
+import {
+  cartPreviewItems,
+  cartPreviewLabels,
+  cartPreviewQuantity,
+} from '@/lib/orionplace/cartPreview';
+import { formatCurrency } from '@/lib/orionplace/currency';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import styles from './CartPreview.module.css';
+
+export interface CartPreviewProps {
+  state: ICartPreviewState;
+  onRetry?: () => void;
+  onSelectProduct?: (productId: number) => void;
+  onSelectCart?: () => void;
+  onRemove?: (cartItemId: number) => void;
+}
+
+export function CartPreview({
+  state,
+  onRetry,
+  onSelectProduct,
+  onSelectCart,
+  onRemove,
+}: CartPreviewProps) {
+  const locale                    = useOrionplaceSelections(
+    (selection) => selection.localeCode,
+  );
+  const currencyId                = useOrionplaceSelections(
+    (selection) => selection.currencyId,
+  );
+  const currency                  = useOrionplaceSelections(
+    (selection) => selection.init?.currencies[currencyId],
+  );
+  const copy                      = cartPreviewLabels(locale);
+  const items                     = cartPreviewItems(state.products, locale, currencyId);
+  const quantity                  = cartPreviewQuantity(items);
+  const listed                    = !state.pending && !state.error && items.length > 0;
+  const panel                     = useRef<HTMLDivElement>(null);
+  const [minHeight, setMinHeight] = useState(0);
+
+  // Removing a row must not shrink the preview under a resting pointer: the
+  // browser would report that as leaving the cart area and the header would
+  // close the preview. The panel keeps its height while open, and focus
+  // moves to the panel instead of falling to the page with the removed row.
+  function remove(cartItem: number) {
+    setMinHeight((current) =>
+      Math.max(current, panel.current?.offsetHeight ?? 0),
+    );
+    panel.current?.focus({ preventScroll: true });
+    onRemove?.(cartItem);
+  }
+
+  return (
+    <section
+      className={styles.root}
+      aria-label={copy.title}
+      aria-busy={state.pending}
+      data-feature-part="CartPreview"
+      data-cart-preview
+    >
+      <div
+        ref={panel}
+        tabIndex={-1}
+        className={styles.panel}
+        style={minHeight ? { minHeight } : undefined}
+      >
+        {state.pending ? (
+          <p
+            className={`${styles.loading} op-feature-loading`}
+            role="status"
+          >
+            <span className={styles.screenReaderOnly}>{copy.loading}</span>
+          </p>
+        ) : state.error ? (
+          <div
+            className={styles.state}
+            role="alert"
+          >
+            <p className={styles.error}>{state.error}</p>
+            <button
+              type="button"
+              className={styles.retry}
+              onClick={() => onRetry?.()}
+            >
+              {copy.retry}
+            </button>
+          </div>
+        ) : !items.length ? (
+          <OrionplaceEmptyState
+            kind="cart"
+            size="compact"
+            role="status"
+            message={copy.empty}
+          />
+        ) : (
+          <>
+            <ul className={styles.items}>
+              {items.map((item) => (
+                <li
+                  key={item.id}
+                  className={styles.row}
+                >
+                  <button
+                    type="button"
+                    className={styles.item}
+                    onClick={() => onSelectProduct?.(item.id)}
+                  >
+                    <OrionplaceImage
+                      src={item.image}
+                      alt={item.name}
+                      width={48}
+                      height={48}
+                      className={styles.image}
+                    />
+                    <span className={styles.product}>
+                      <span className={styles.name}>{item.name}</span>
+                      <span className={styles.details}>
+                        <span>{copy.pieces(item.quantity)}</span>
+                        {item.discounted ? (
+                          <del>{formatCurrency(item.original, currency, locale)}</del>
+                        ) : null}
+                        <span
+                          className={
+                            item.discounted ? styles.discounted : styles.price
+                          }
+                        >
+                          {formatCurrency(item.price, currency, locale)}
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    className={styles.remove}
+                    aria-label={`${copy.remove}: ${item.name}`}
+                    title={copy.remove}
+                    disabled={
+                      !item.cartItem || state.removing.includes(item.cartItem)
+                    }
+                    data-cart-preview-remove
+                    onClick={() => remove(item.cartItem)}
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                    >
+                      <path d="M4 7h16M9 7V4.5h6V7M6 7l1 13h10l1-13M10 11v6M14 11v6" />
+                    </svg>
+                  </button>
+                </li>
+              ))}
+            </ul>
+            {state.removeError ? (
+              <p
+                className={`${styles.error} ${styles.removeError}`}
+                role="alert"
+              >
+                {state.removeError}
+              </p>
+            ) : null}
+          </>
+        )}
+
+        {listed ? (
+          <footer className={styles.footer}>
+            <p className={styles.total}>
+              <span>{copy.quantity}</span>
+              <span>{quantity}</span>
+            </p>
+            <button
+              type="button"
+              className={styles.next}
+              onClick={() => onSelectCart?.()}
+            >
+              {copy.checkout} <span aria-hidden="true">→</span>
+            </button>
+          </footer>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/templates/components/orionplace/cart/DeliveryMap.README.md

@@ -0,0 +1,65 @@
+# DeliveryMap · React
+
+## English
+
+Map of pickup points or physical stores.
+
+## Contract and dependencies
+
+The component renders a map when Application Load provides
+`init.public_keys.map_key` and `markers` contains at least one point with valid
+coordinates. With no key or markers it renders nothing, so the parent can keep
+the complete pickup-point or store list available.
+
+After hydration the default provider loads Yandex Maps JavaScript API 2.1 with
+the current locale. `onSelect` receives the clicked marker ID. Changes to
+`markers` and `activeId` update the existing map. The map and marker listeners
+are destroyed when the component is hidden or unmounted. A load failure shows
+a localized notice while the parent list remains usable.
+
+Wrap a subtree in `OrionplaceMapProvider` from
+`hooks/useOrionplaceMap.tsx` to supply another `DeliveryMapFactory`, including
+for tests. No map script or browser global is accessed during server rendering.
+
+Source is maintained in
+`components/orionplace/cart/DeliveryMap.tsx`; its physical interface is
+`interfaces/orionplace/cart/IDeliveryMap.ts`.
+
+### Props
+
+| Prop                              | Meaning                                                                                                  |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `markers: IDeliveryMapMarker[]`   | Map points with IDs, labels and valid coordinates.                                                       |
+| `activeId?: string`               | ID of the marker or item currently highlighted.                                                          |
+| `label: string`                   | Visible or accessible name for the component’s main control or region.                                   |
+| `onSelect?: (id: string) => void` | Passes the selected pickup point’s string ID when its marker is selected. The application updates the selected point. |
+
+## Русский
+
+Компонент показывает карту, когда в Application Load задан
+`init.public_keys.map_key`, а в `markers` есть хотя бы одна точка с корректными
+координатами. Если ключа или точек нет, компонент ничего не выводит, поэтому
+родительский список пунктов выдачи или магазинов остаётся доступен полностью.
+
+После гидратации стандартный провайдер загружает Yandex Maps JavaScript API 2.1
+для выбранного языка. `onSelect` получает ID выбранной метки. Новые значения
+`markers` и `activeId` обновляют открытую карту. При скрытии или размонтировании
+карта и обработчики меток удаляются. При ошибке загрузки рядом со списком
+появляется локализованное сообщение.
+
+Другой `DeliveryMapFactory` можно передать всему поддереву через
+`OrionplaceMapProvider` из `hooks/useOrionplaceMap.tsx`. Во время серверного
+рендеринга компонент не обращается к карте и браузерным глобальным объектам.
+
+Исходный файл:
+`components/orionplace/cart/DeliveryMap.tsx`; физический интерфейс:
+`interfaces/orionplace/cart/IDeliveryMap.ts`.
+
+### Свойства
+
+| Свойство                          | Назначение                                                                                                |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `markers: IDeliveryMapMarker[]`   | Точки карты с ID, названиями и корректными координатами.                                                  |
+| `activeId?: string`               | ID выделенной метки или записи.                                                                           |
+| `label: string`                   | Видимое или доступное название основного элемента компонента.                                             |
+| `onSelect?: (id: string) => void` | Передаёт строковый ID выбранного пункта выдачи при выборе его метки. Приложение обновляет выбранный пункт. |

package/templates/components/orionplace/cart/DeliveryMap.module.css

@@ -0,0 +1,32 @@
+.root {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.map {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 18rem;
+  overflow: hidden;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+}
+
+.hidden { display: none; }
+
+.notice {
+  margin: 0;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--orionplace-border);
+  color: var(--orionplace-muted);
+  background: var(--orionplace-surface);
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+}
+
+@media (min-width: 640px) {
+  .map { height: 24rem; }
+}

package/templates/components/orionplace/cart/DeliveryMap.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import type {
+  IDeliveryMapMarker,
+  IDeliveryMapView,
+} from '@/interfaces/orionplace/cart/IDeliveryMap';
+import {
+  canShowDeliveryMap,
+  deliveryMapCenter,
+  deliveryMapKey,
+  deliveryMapLanguage,
+} from '@/lib/orionplace/deliveryMap';
+import { cartLabels } from '@/lib/orionplace/cartLabels';
+import { useOrionplaceMap } from '@/hooks/useOrionplaceMap';
+import styles from './DeliveryMap.module.css';
+
+export interface DeliveryMapProps {
+  markers: IDeliveryMapMarker[];
+  activeId?: string;
+  label: string;
+  onSelect?: (id: string) => void;
+}
+
+export function DeliveryMap({
+  markers,
+  activeId,
+  label,
+  onSelect,
+}: DeliveryMapProps) {
+  const init = useOrionplace(selectInit);
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const createMap = useOrionplaceMap();
+  const apiKey = deliveryMapKey(init?.public_keys);
+  const language = deliveryMapLanguage(locale);
+  const visible = canShowDeliveryMap(apiKey, markers);
+  const container = useRef<HTMLDivElement>(null);
+  const view = useRef<IDeliveryMapView | undefined>(undefined);
+  const latestMarkers = useRef(markers);
+  const latestActiveId = useRef(activeId);
+  const latestSelect = useRef(onSelect);
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+  latestMarkers.current = markers;
+  latestActiveId.current = activeId;
+  latestSelect.current = onSelect;
+
+  useEffect(() => {
+    if (!visible || !container.current) {
+      view.current?.destroy();
+      view.current = undefined;
+      setLoading(false);
+      return;
+    }
+
+    let disposed = false;
+    const center = deliveryMapCenter(latestMarkers.current);
+    if (!center) {
+      return;
+    }
+
+    setFailed(false);
+    setLoading(true);
+    void createMap({
+      container: container.current,
+      apiKey,
+      language,
+      center,
+      markers: latestMarkers.current,
+      activeId: latestActiveId.current,
+      onSelect: (id) => latestSelect.current?.(id),
+    }).then((created) => {
+      if (disposed) {
+        created.destroy();
+        return;
+      }
+      view.current = created;
+      created.setMarkers(latestMarkers.current);
+      created.setActive(latestActiveId.current);
+    }).catch(() => {
+      if (!disposed) {
+        setFailed(true);
+      }
+    }).finally(() => {
+      if (!disposed) {
+        setLoading(false);
+      }
+    });
+
+    return () => {
+      disposed = true;
+      view.current?.destroy();
+      view.current = undefined;
+    };
+  }, [visible, apiKey, language, createMap]);
+
+  useEffect(() => {
+    view.current?.setMarkers(markers);
+  }, [markers]);
+
+  useEffect(() => {
+    view.current?.setActive(activeId);
+  }, [activeId]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className={styles.root} data-feature-part="DeliveryMap">
+      <div
+        ref={container}
+        className={failed ? styles.hidden : styles.map}
+        role="region"
+        aria-label={label}
+        aria-busy={loading}
+        data-delivery-map
+      />
+      {failed ? (
+        <p className={styles.notice} role="status">
+          {cartLabels(locale).mapUnavailable}
+        </p>
+      ) : null}
+    </div>
+  );
+}