orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/products/ProductGroup.tsx

@@ -1,186 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import type { ReactNode } from 'react';
-import { useOrionplaceProducts, useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { homeLabels } from '@/lib/orionplace/homeLabels';
-import { ProductCard } from './ProductCard';
-import type { ProductCardProps } from './ProductCard';
-import styles from './ProductGroup.module.css';
-
-export type ProductGroupEvents = Pick<
-  ProductCardProps,
-  | 'onSelect'
-  | 'onSelectSeller'
-  | 'onSelectVariant'
-  | 'onRequestSecondaryVariants'
-  | 'onSelectSecondaryVariant'
-  | 'onToggleFavorite'
-  | 'onAdd'
-  | 'onRemove'
-  | 'onSubscribe'
-  | 'onUnsubscribe'
-  | 'onPreorder'
->;
-
-export interface ProductGroupProps extends ProductGroupEvents {
-  collection?: OrionplaceProductCollection;
-  disabled?: boolean;
-  limit?: number;
-  products?: readonly IProduct[];
-  productIds?: number[];
-  layout?: 'responsive' | 'grid';
-  hiddenBadges?: ProductCardProps['hiddenBadges'];
-  productHref?: ProductCardProps['productHref'];
-  renderFooter?: (product: IProduct) => ReactNode;
-  className?: string;
-}
-
-export function ProductGroup({
-  collection = 'products',
-  disabled = false,
-  limit = 0,
-  products: suppliedProducts,
-  productIds,
-  layout = 'responsive',
-  hiddenBadges,
-  productHref,
-  renderFooter,
-  className = '',
-  onSelect,
-  onSelectSeller,
-  onSelectVariant,
-  onRequestSecondaryVariants,
-  onSelectSecondaryVariant,
-  onToggleFavorite,
-  onAdd,
-  onRemove,
-  onSubscribe,
-  onUnsubscribe,
-  onPreorder,
-}: ProductGroupProps) {
-  const init = useOrionplaceProducts((state) => state.init);
-  const updates = useOrionplaceProducts((state) => state.updates[collection]);
-  const localeCode = useOrionplaceSelections((state) => state.localeCode);
-  const track = useRef<HTMLDivElement>(null);
-  const [mobile, setMobile] = useState(false);
-  const [canPrevious, setCanPrevious] = useState(false);
-  const [canNext, setCanNext] = useState(false);
-  const storeProducts = collection === 'featured'
-    ? init?.featured ?? []
-    : init?.products ?? [];
-  const source = suppliedProducts ?? storeProducts;
-  const allProducts = productIds
-    ? productIds.map((id) => updates[id] ?? source.find((item) => item.id === id))
-      .filter((item): item is IProduct => Boolean(item))
-    : source.map((item) => updates[item.id] ?? item);
-  const products = Number.isFinite(limit) && limit > 0
-    ? allProducts.slice(0, Math.floor(limit))
-    : allProducts;
-  const labels = homeLabels(localeCode);
-  const showArrows = Boolean(init?.visual_settings?.mobile_show_arrows);
-
-  useEffect(() => {
-    function measure() {
-      const element = track.current;
-      setMobile(window.innerWidth < 640);
-      setCanPrevious(Boolean(element && element.scrollLeft > 1));
-      setCanNext(Boolean(
-        element && element.scrollLeft + element.clientWidth < element.scrollWidth - 1,
-      ));
-    }
-
-    measure();
-    window.addEventListener('resize', measure);
-    const observer = typeof ResizeObserver !== 'undefined' && track.current
-      ? new ResizeObserver(measure)
-      : undefined;
-    if (observer && track.current) {
-      observer.observe(track.current);
-    }
-    return () => {
-      observer?.disconnect();
-      window.removeEventListener('resize', measure);
-    };
-  }, [products.length, layout]);
-
-  function scroll(direction: number) {
-    const element = track.current;
-    if (element) {
-      element.scrollBy({
-        left: direction * element.clientWidth,
-        behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches
-          ? 'instant'
-          : 'smooth',
-      });
-    }
-  }
-
-  return (
-    <section
-      className={`${styles.group} ${className}`.trim()}
-      data-product-part="ProductGroup"
-      data-product-group
-    >
-      <div
-        ref={track}
-        className={`${styles.track} ${layout === 'grid' ? styles.grid : ''}`.trim()}
-        onScroll={() => {
-          const element = track.current;
-          setCanPrevious(Boolean(element && element.scrollLeft > 1));
-          setCanNext(Boolean(
-            element && element.scrollLeft + element.clientWidth < element.scrollWidth - 1,
-          ));
-        }}
-      >
-        {products.map((listedProduct) => (
-          <ProductCard
-            key={listedProduct.id}
-            productId={listedProduct.id}
-            initialProduct={listedProduct}
-            collection={collection}
-            disabled={disabled}
-            hiddenBadges={hiddenBadges}
-            productHref={productHref}
-            renderFooter={renderFooter
-              ? () => renderFooter(listedProduct)
-              : undefined}
-            onSelect={onSelect}
-            onSelectSeller={onSelectSeller}
-            onSelectVariant={onSelectVariant}
-            onRequestSecondaryVariants={onRequestSecondaryVariants}
-            onSelectSecondaryVariant={onSelectSecondaryVariant}
-            onToggleFavorite={onToggleFavorite}
-            onAdd={onAdd}
-            onRemove={onRemove}
-            onSubscribe={onSubscribe}
-            onUnsubscribe={onUnsubscribe}
-            onPreorder={onPreorder}
-          />
-        ))}
-      </div>
-      {mobile && layout !== 'grid' && showArrows && (canPrevious || canNext) && (
-        <div className={styles.scrollControls} data-product-scroll-controls>
-          <button
-            type="button"
-            aria-label={labels.previousProducts}
-            disabled={!canPrevious}
-            onClick={() => scroll(-1)}
-          >
-            ←
-          </button>
-          <button
-            type="button"
-            aria-label={labels.nextProducts}
-            disabled={!canNext}
-            onClick={() => scroll(1)}
-          >
-            →
-          </button>
-        </div>
-      )}
-    </section>
-  );
-}

package/templates/components/orionplace/products/ProductPreorderDialog.README.md

@@ -1,89 +0,0 @@
-# ProductPreorderDialog · React
-
-## English
-
-`ProductPreorderDialog` displays the selected product and its current price
-from the isolated product store. `productId` first uses `collection`, then the
-other `products` or `featured` collection when that ID is available there.
-Changing the product clears the contact draft and validation state.
-
-A signed-in customer can confirm directly. A guest must enter at least an
-email address or phone number. Submit trims both values and calls `onSubmit`
-with `{ product, email, phone }`; the host verifies eligibility and sends
-`preorders_create`. `error` remains beside the fields. `pending` disables
-contact fields, submission and dismissal, so the host can close only after a
-confirmed response.
-A guest may not use the email or phone of a registered customer: the backend refuses it with the error code `sign_in` on the matching field. Pass the API error's `fields` as `fieldErrors` and `codes.includes('sign_in')` as `suggestSignIn`: the message appears under the email or phone field, the general error leaves it out, and a Sign in link at the end of that message calls `onSignIn`. `OrionplaceStorefrontProvider` and `StorefrontProduct` pass all three. Guest requests are limited by the storefront setting `guest_preorders_per_hour` (default 5 per IP address and per contact an hour); over it the backend error stays in the form.
-
-`modal=true` opens a native modal dialog, locks page scrolling and returns
-focus to the element that opened it when it closes. Close, Cancel, Escape and a
-backdrop click call `onClose` when no request is pending. `modal=false` shows
-the same native dialog inside its container without scroll locking. Changing
-`modal` while the dialog is open switches it in place and keeps the entered
-contacts and the focused field. The product image reserves its displayed area
-while it loads.
-
-Source is maintained in
-`components/orionplace/products/ProductPreorderDialog.tsx`; the product
-contract is in `interfaces/orionplace/products/IProduct.ts`.
-
-On the Russian storefront a phone number typed without «+» the way it is written in Russia — «8 900 555-01-72» or «900 555-01-72» — becomes «+79005550172» when the field loses focus and before it is sent: the backend accepts only international numbers. A number typed with «+», other numbers and other languages are sent as typed (`phoneWithCountryCode()`).
-
-### Props
-
-| Prop                                                       | Meaning                                                                                               |
-| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `productId?: number`                                       | ID of the product handled by ProductPreorderDialog.                                                   |
-| `collection?: OrionplaceProductCollection`                 | Product-store collection used to resolve the supplied product ID.                                     |
-| `pending?: boolean`                                        | Shows the loading state and blocks duplicate actions.                                                 |
-| `error?: string`                                           | Customer-visible error for the component request; omit it when no request failed.                     |
-| `fieldErrors?: Record<string, string>`                     | Backend messages per field; `email` and `phone` are shown under the guest fields.                     |
-| `suggestSignIn?: boolean`                                  | Shows a guest a Sign in link in the refusing message (code `sign_in`).                               |
-| `modal?: boolean`                                          | Uses a native modal dialog when true and an inline panel when false.                                  |
-| `onSubmit?: (selection: ProductPreorderSelection) => void` | Called when the visitor submits the confirmed form values. The callback payload is shown in its type. |
-| `onClose?: () => void`                                     | Called when the visitor closes the panel or dialog. The callback has no payload.                      |
-| `onSignIn?: () => void`                                    | Opens the sign-in page; the Sign in link is shown only with this callback.                              |
-
-## Русский
-
-`ProductPreorderDialog` показывает выбранный товар и его текущую цену из
-отдельного хранилища товаров. `productId` сначала ищется в `collection`,
-затем в другой коллекции `products` или `featured`. Изменение товара очищает
-контактные поля и ошибку проверки.
-
-Вошедший покупатель может сразу подтвердить предзаказ. Гость должен
-указать хотя бы электронную почту или телефон. Отправка удаляет крайние
-пробелы и вызывает `onSubmit` с `{ product, email, phone }`; родитель проверяет
-доступность и вызывает `preorders_create`. `error` остаётся рядом с полями.
-`pending` блокирует поля, отправку и закрытие, чтобы родитель закрыл окно только
-после подтверждённого ответа.
-Гость не может указать email или телефон зарегистрированного покупателя: бэкенд отклоняет запрос с кодом ошибки `sign_in` в соответствующем поле. Передайте `fields` ошибки API как `fieldErrors` и `codes.includes('sign_in')` как `suggestSignIn`: сообщение появится под полем email или телефона, общая ошибка его не повторит, а ссылка «Войти» в конце этого сообщения вызовет `onSignIn`. `OrionplaceStorefrontProvider` и `StorefrontProduct` передают все три. Запросы гостей ограничены настройкой магазина `guest_preorders_per_hour` (по умолчанию 5 в час на IP-адрес и на контакт); сверх предела ошибка бэкенда остаётся в форме.
-
-При `modal=true` открывается нативное модальное окно, прокрутка страницы
-блокируется, а после закрытия фокус возвращается на элемент, который открыл
-окно. Крестик, «Отмена», Escape и щелчок по фону вызывают `onClose`, если
-запрос не выполняется. При `modal=false` то же нативное окно показано внутри
-контейнера без блокировки прокрутки. Если изменить `modal`, пока окно открыто,
-оно переключается на месте, а введённые контакты и поле с фокусом сохраняются.
-Фото товара заранее резервирует место во время загрузки.
-
-Исходный файл:
-`components/orionplace/products/ProductPreorderDialog.tsx`; контракт товара находится в
-`interfaces/orionplace/products/IProduct.ts`.
-
-В русской витрине номер без «+», набранный по-российски — «8 900 555-01-72» или «900 555-01-72», — при выходе из поля и перед отправкой становится «+79005550172»: бэкенд принимает только международный формат. Номер с «+», другие номера и другие языки отправляются как набраны (`phoneWithCountryCode()`).
-
-### Свойства
-
-| Свойство                                                   | Назначение                                                                                                    |
-| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `productId?: number`                                       | ID товара, с которым работает ProductPreorderDialog.                                                          |
-| `collection?: OrionplaceProductCollection`                 | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                       |
-| `pending?: boolean`                                        | Показывает загрузку и блокирует повторные действия.                                                           |
-| `error?: string`                                           | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                          |
-| `fieldErrors?: Record<string, string>`                     | Сообщения бэкенда по полям; `email` и `phone` показываются под полями гостя.                                |
-| `suggestSignIn?: boolean`                                  | Показывает гостю ссылку «Войти» в сообщении с кодом `sign_in`.                                                  |
-| `modal?: boolean`                                          | Показывает нативное модальное окно при `true` и встроенную панель при `false`.                                |
-| `onSubmit?: (selection: ProductPreorderSelection) => void` | Вызывается, когда покупатель отправляет подтверждённые значения формы. Данные обработчика указаны в его типе. |
-| `onClose?: () => void`                                     | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                      |
-| `onSignIn?: () => void`                                    | Открывает страницу входа; ссылка «Войти» показывается только с этим обработчиком.                               |

package/templates/components/orionplace/products/ProductPreorderDialog.module.css

@@ -1,320 +0,0 @@
-.dialog {
-  box-sizing: border-box;
-  max-height: calc(100dvh - 2rem);
-  overflow: auto;
-  padding: 0;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  font: inherit;
-  container-type: inline-size;
-}
-
-.dialog::backdrop {
-  background: rgb(0 0 0 / 35%);
-  backdrop-filter: blur(2px);
-}
-
-.modal {
-  width: 31.25rem;
-  max-width: calc(100vw - 2rem);
-  margin: auto;
-}
-
-.inline {
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-  margin: 0;
-}
-
-.form {
-  display: grid;
-  gap: 1.5rem;
-  padding: 1.5rem;
-}
-
-.form > header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.form h2,
-.form p {
-  margin: 0;
-}
-
-.form h2 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.close {
-  display: grid;
-  width: 2.5rem;
-  height: 2.5rem;
-  flex-shrink: 0;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  color: inherit;
-  background: transparent;
-  font: inherit;
-  font-size: 1.5rem;
-  line-height: calc(2 / 1.5);
-  cursor: pointer;
-}
-
-.close:focus-visible {
-  outline: none;
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .close:hover {
-    outline: none;
-    background: var(--orionplace-hover);
-  }
-}
-
-.product {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.25rem 0;
-  border-top: 1px solid var(--orionplace-border);
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.image {
-  width: 5.25rem;
-  height: 7rem;
-  flex-shrink: 0;
-  object-fit: contain;
-}
-
-.product > div {
-  display: grid;
-  min-width: 0;
-  gap: 0.75rem;
-}
-
-.product p,
-.hint {
-  overflow-wrap: anywhere;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-/* The product name is one 20px line per row, as in Nuxt. */
-.product p {
-  line-height: 1.25rem;
-}
-
-.hint {
-  color: var(--orionplace-muted);
-}
-
-.fields {
-  display: grid;
-  gap: 1rem;
-}
-
-.fields label {
-  display: grid;
-  gap: 0.5rem;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.fields input {
-  width: 100%;
-  height: 2.75rem;
-  box-sizing: border-box;
-  padding: 0 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.fields input:focus {
-  outline: none;
-  border-color: var(--orionplace-text);
-}
-
-.fieldError {
-  color: var(--orionplace-danger);
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.signIn {
-  margin-left: 0.25rem;
-  padding: 0;
-  border: 0;
-  color: var(--orionplace-text);
-  background: transparent;
-  font: inherit;
-  font-weight: 500;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-
-.signIn:focus-visible {
-  outline: none;
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .signIn:hover {
-    outline: none;
-    opacity: 0.7;
-  }
-}
-
-.close,
-.fields input,
-.actions button {
-  transition:
-    background-color 0.15s,
-    border-color 0.15s,
-    opacity 0.15s;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .signIn,
-  .close,
-  .fields input,
-  .actions button {
-    transition: none;
-  }
-}
-
-.error {
-  padding: 1rem;
-  border: 1px solid var(--orionplace-danger);
-  color: var(--orionplace-danger);
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-
-.actions {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 0.5rem;
-}
-
-.actions button {
-  display: inline-flex;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0 1.5rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  color: inherit;
-  background: transparent;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.actions .primary {
-  border-color: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  background: var(--orionplace-accent);
-}
-
-.actions button:not(.primary):focus-visible {
-  outline: none;
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .actions button:not(.primary):hover {
-    outline: none;
-    background: var(--orionplace-hover);
-  }
-}
-
-.actions .primary:focus-visible {
-  outline: none;
-  opacity: 0.85;
-}
-
-@media (hover: hover) {
-  .actions .primary:hover {
-    outline: none;
-    opacity: 0.85;
-  }
-}
-
-.actions .primary:disabled {
-  opacity: 0.4;
-}
-
-.dialog button:disabled {
-  cursor: wait;
-  opacity: 0.5;
-}
-
-.spinner {
-  width: 0.875rem;
-  height: 0.875rem;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 800ms linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-@media (max-width: 39.99rem) {
-  .form {
-    padding: 1.5rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner { animation: none; }
-}
-
-/* The dialog's own width, as in the other packages: roomier once it is
-   nearly full width. */
-@container (min-width: 29rem) {
-  .form {
-    padding: 2rem;
-  }
-
-  .form h2 {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}