orionplace-react 0.7.8 → 0.8.0

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

@@ -1,188 +0,0 @@
-'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

@@ -1,65 +0,0 @@
-# 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

@@ -1,32 +0,0 @@
-.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

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