orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,183 @@
+'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';
+  productHref?: ProductCardProps['productHref'];
+  renderFooter?: (product: IProduct) => ReactNode;
+  className?: string;
+}
+
+export function ProductGroup({
+  collection = 'products',
+  disabled = false,
+  limit = 0,
+  products: suppliedProducts,
+  productIds,
+  layout = 'responsive',
+  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}
+            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

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

@@ -0,0 +1,320 @@
+.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;
+  }
+}