orionplace-react 0.7.7 → 0.8.0

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

@@ -1,288 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type ChangeEvent,
-  type FormEvent,
-} from 'react';
-import {
-  useOrionplace,
-  useOrionplaceProducts,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectProfile } from '@/stores/orionplace';
-import type {
-  IProductFeedbackPreloadResponse,
-} from '@/interfaces/orionplace/products/IProductFeedbackApi';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import {
-  REVIEW_TEXT_MAX_LENGTH,
-  reviewLabels,
-  reviewTextMinLength,
-} from '@/lib/orionplace/reviewLabels';
-import { OrionplaceAvatar } from '@/components/orionplace/shared/OrionplaceAvatar';
-import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
-import styles from './ProductReviewForm.module.css';
-
-export interface ProductReviewFormValue {
-  text: string;
-  rating: number;
-  files: File[];
-  remove: number[];
-}
-
-export interface ProductReviewFormProps {
-  initial?: NonNullable<IProductFeedbackPreloadResponse['page_data']>;
-  replyingTo?: string;
-  pending?: boolean;
-  ratingError?: string;
-  textError?: string;
-  onSubmit?: (value: ProductReviewFormValue) => void;
-  onCancel?: () => void;
-}
-
-export function ProductReviewForm({
-  initial,
-  replyingTo,
-  pending = false,
-  ratingError,
-  textError,
-  onSubmit,
-  onCancel,
-}: ProductReviewFormProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const profile = useOrionplace(selectProfile);
-  const labels = reviewLabels(locale);
-  const common = featureLabels(locale);
-  const fileInput = useRef<HTMLInputElement>(null);
-  const [text, setText] = useState(initial?.text ?? '');
-  // Replies do not rate. A review needs 1-5 stars: nothing is preselected,
-  // and an older review saved without stars chooses them when it is edited.
-  const isReply = Boolean(replyingTo || initial?.is_reply);
-  const [rating, setRating] = useState(
-    initial?.rating ? String(initial.rating) : '',
-  );
-  const [ratingMessage, setRatingMessage] = useState('');
-  // OrionMarketplace's domain setting feedback_text_min_length (0 - no minimum).
-  const minLength = reviewTextMinLength(useOrionplaceProducts(
-    (state) => state.init?.variables?.feedback_text_min_length,
-  ));
-  const [textMessage, setTextMessage] = useState('');
-  const textTooShort = text.trim().length < Math.max(minLength, 1);
-  // The counter names the minimum, so a too short text explains the
-  // disabled submit button before OrionMarketplace is asked.
-  const counter = minLength
-    ? `${text.length} / ${REVIEW_TEXT_MAX_LENGTH} · ${labels.textMinimum.replace('{count}', String(minLength))}`
-    : `${text.length} / ${REVIEW_TEXT_MAX_LENGTH}`;
-  const [files, setFiles] = useState<File[]>([]);
-  const [removed, setRemoved] = useState<number[]>([]);
-  const [error, setError] = useState('');
-  const existing = (initial?.images ?? []).filter(
-    (image) => !removed.includes(image.id),
-  );
-  const author = profile
-    ? {
-      name: [profile.first_name, profile.last_name].filter(Boolean).join(' '),
-      avatar: profile.avatar,
-    }
-    : null;
-  const heading = initial
-    ? labels.editing
-    : replyingTo
-      ? `${labels.repliesTo}: ${replyingTo}`
-      : labels.write;
-  const options = {
-    '1': '★',
-    '2': '★★',
-    '3': '★★★',
-    '4': '★★★★',
-    '5': '★★★★★',
-  };
-
-  // OrionMarketplace answers a review without stars with an error on `rating`; it stays
-  // under the stars until another rating is chosen.
-  useEffect(() => {
-    setRatingMessage(ratingError ?? '');
-  }, [ratingError]);
-
-  // OrionMarketplace's error on `text` (shorter than the domain minimum) stays under the
-  // text until it is changed.
-  useEffect(() => {
-    setTextMessage(textError ?? '');
-  }, [textError]);
-
-  function changeText(value: string) {
-    setText(value);
-    setTextMessage('');
-  }
-
-  function chooseRating(value: string) {
-    setRating(value);
-    setRatingMessage('');
-  }
-
-  function addFiles(event: ChangeEvent<HTMLInputElement>) {
-    const selected = Array.from(event.target.files ?? []);
-    setError('');
-    if (existing.length + files.length + selected.length > 5) {
-      setError(labels.tooMany);
-    } else {
-      setFiles((current) => [...current, ...selected]);
-    }
-    if (fileInput.current) {
-      fileInput.current.value = '';
-    }
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (pending) {
-      return;
-    }
-    if (!isReply && !rating) {
-      setRatingMessage(labels.ratingRequired);
-      return;
-    }
-    if (!textTooShort && text.length <= REVIEW_TEXT_MAX_LENGTH) {
-      onSubmit?.({
-        text: text.trim(),
-        rating: isReply ? 0 : Number(rating),
-        files,
-        remove: removed,
-      });
-    }
-  }
-
-  return (
-    <form
-      className={styles.form}
-      data-feature-part="ProductReviewForm"
-      onSubmit={submit}
-    >
-      <div className={styles.heading}>
-        {author ? (
-          <OrionplaceAvatar src={author.avatar} name={author.name} />
-        ) : null}
-        <h3>{heading}</h3>
-      </div>
-      {isReply ? null : (
-        <div className={styles.rating} data-review-rating>
-          <OrionplaceSelect
-            value={rating}
-            options={options}
-            label={labels.rating}
-            displayValue={rating ? undefined : labels.chooseRating}
-            disabled={pending}
-            required
-            onValueChange={chooseRating}
-          />
-          {ratingMessage ? (
-            <span
-              role="alert"
-              className={styles.fieldError}
-              data-review-rating-error
-            >
-              {ratingMessage}
-            </span>
-          ) : null}
-        </div>
-      )}
-      <label className={styles.field}>
-        <span>
-          {labels.text}{' '}
-          <span className={styles.required} aria-hidden="true">*</span>
-        </span>
-        <textarea
-          value={text}
-          disabled={pending}
-          required
-          minLength={minLength || undefined}
-          maxLength={REVIEW_TEXT_MAX_LENGTH}
-          aria-label={labels.text}
-          aria-invalid={textMessage ? 'true' : undefined}
-          onChange={(event) => changeText(event.target.value)}
-        />
-      </label>
-      {textMessage ? (
-        <span
-          role="alert"
-          className={styles.fieldError}
-          data-review-text-error
-        >
-          {textMessage}
-        </span>
-      ) : null}
-      <span className={styles.counter} data-review-text-counter>
-        {counter}
-      </span>
-      <label className={styles.field}>
-        <span>{labels.addImages}</span>
-        <input
-          ref={fileInput}
-          type="file"
-          accept="image/jpeg,image/png,image/gif,image/webp,image/x-icon"
-          multiple
-          disabled={pending}
-          onChange={addFiles}
-        />
-      </label>
-      {existing.length ? (
-        <div className={styles.images}>
-          {existing.map((image) => (
-            <div key={image.id} className={styles.savedImage}>
-              <img
-                src={image.image}
-                alt={labels.image}
-                width={96}
-                height={96}
-                loading="lazy"
-                decoding="async"
-              />
-              <button
-                type="button"
-                aria-label={`${labels.imageRemove} ${image.id}`}
-                disabled={pending}
-                onClick={() => setRemoved((current) => [...current, image.id])}
-              >
-                ×
-              </button>
-            </div>
-          ))}
-        </div>
-      ) : null}
-      {files.length ? (
-        <ul className={styles.files}>
-          {files.map((file, index) => (
-            <li key={`${file.name}-${file.lastModified}-${index}`}>
-              <span>{file.name}</span>
-              <button
-                type="button"
-                aria-label={`${common.delete}: ${file.name}`}
-                disabled={pending}
-                onClick={() => setFiles((current) =>
-                  current.filter((_, position) => position !== index))}
-              >
-                ×
-              </button>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-      {error ? <p role="alert" className={styles.error}>{error}</p> : null}
-      <div className={styles.actions}>
-        <button
-          type="submit"
-          className={styles.primary}
-          disabled={pending || textTooShort}
-        >
-          {pending ? common.loading : initial ? labels.save : labels.send}
-        </button>
-        <button type="button" disabled={pending} onClick={() => onCancel?.()}>
-          {common.cancel}
-        </button>
-      </div>
-    </form>
-  );
-}

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

@@ -1,61 +0,0 @@
-# ProductReviewGallery
-
-## English
-
-`ProductReviewGallery` shows square thumbnails from reviews of one product or
-all products sold by one seller. When mounted, retried or paginated, `onLoad`
-receives an `IProductFeedbackImagesRequest` with the matching product or seller
-filter. The host supplies the returned `images`, `pagination`, loading and error
-state.
-
-Each thumbnail shows its review rating when present. Selecting it calls
-`onSelect` with the image's `feedback_id`, so the parent can load that complete
-review and show its text and photos. Every image reserves a square before it
-loads and uses native lazy loading.
-
-The grid shows more photos per row as the gallery itself gets wider, whatever
-the screen width, so it looks the same inside `ProductReviews` and on its own.
-
-### Props
-
-| Prop                                                        | Meaning                                                                                                  |
-| ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `productId?: number`                                        | ID of the product handled by ProductReviewGallery.                                                       |
-| `sellerId?: number`                                         | ID of the seller handled by ProductReviewGallery.                                                        |
-| `images?: readonly IProductReviewImage[]`                   | Ordered images available to the gallery.                                                                 |
-| `pagination?: Partial<IApiPagination>`                      | Current API pagination values.                                                                           |
-| `loaded?: boolean`                                          | Distinguishes a confirmed empty result from data that has not loaded yet.                                |
-| `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.                        |
-| `onLoad?: (request: IProductFeedbackImagesRequest) => void` | Called when the component needs its primary data. The callback payload is shown in its type.             |
-| `onSelect?: (feedbackId: number) => void`                   | Called when the visitor chooses the component’s primary item. The callback payload is shown in its type. |
-
-## Русский
-
-`ProductReviewGallery` показывает квадратные миниатюры из отзывов об одном
-товаре или обо всех товарах одного продавца. После монтирования, при повторе и
-переходе между страницами `onLoad` получает `IProductFeedbackImagesRequest` с
-фильтром товара или продавца. Родитель передаёт полученные `images`,
-`pagination`, состояние загрузки и ошибку.
-
-Под миниатюрой выводится оценка отзыва, если она есть. Выбор вызывает
-`onSelect` с `feedback_id` фотографии, чтобы родитель загрузил полный отзыв с
-его текстом и фотографиями. Для каждого изображения заранее зарезервирован
-квадрат, а загрузка начинается средствами браузера по мере приближения к нему.
-
-Чем шире сама галерея, тем больше фотографий в ряду, независимо от ширины
-экрана, поэтому она выглядит одинаково и внутри `ProductReviews`, и отдельно.
-
-### Свойства
-
-| Свойство                                                    | Назначение                                                                                                |
-| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `productId?: number`                                        | ID товара, с которым работает ProductReviewGallery.                                                       |
-| `sellerId?: number`                                         | ID продавца, с которым работает ProductReviewGallery.                                                     |
-| `images?: readonly IProductReviewImage[]`                   | Упорядоченные изображения галереи.                                                                        |
-| `pagination?: Partial<IApiPagination>`                      | Текущие данные пагинации API.                                                                             |
-| `loaded?: boolean`                                          | Отличает подтверждённый пустой результат от ещё не загруженных данных.                                    |
-| `pending?: boolean`                                         | Показывает загрузку и блокирует повторные действия.                                                       |
-| `error?: string`                                            | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                      |
-| `onLoad?: (request: IProductFeedbackImagesRequest) => void` | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.                |
-| `onSelect?: (feedbackId: number) => void`                   | Вызывается, когда покупатель выбирает основной элемент компонента. Данные обработчика указаны в его типе. |

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

@@ -1,108 +0,0 @@
-/*
- * The photo grid follows the gallery's own width: 5 photos per row from
- * 592px (tiles of about 112px) and 6 from 760px (about 120px). On the
- * supplied product and seller pages that gives 3 per row on phones, 5 on a
- * 768px screen and 6 on a 1280px screen, as with the former screen rules.
- */
-.section {
-  display: grid;
-  /* The gap and base text of `op-feature-stack` in the other packages. */
-  gap: 1.25rem;
-  color: var(--orionplace-text);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  container: review-photos / inline-size;
-}
-
-/* `op-feature-heading-text`: the browser's h3 size, regular weight. */
-.section h3 {
-  margin: 0;
-  font-size: 1.17em;
-  line-height: 1.5rem;
-  font-weight: 400;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: .5rem;
-}
-
-.grid button {
-  display: grid;
-  gap: .25rem;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: .75rem;
-  line-height: calc(1 / 0.75);
-  text-align: left;
-  cursor: pointer;
-}
-
-.grid button:focus-visible {
-  opacity: .75;
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-@media (hover: hover) {
-  .grid button:hover {
-    opacity: .75;
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-  }
-}
-
-.grid img {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 1;
-  border: 1px solid var(--orionplace-border);
-  object-fit: cover;
-}
-
-.error {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-  padding: .75rem 1rem;
-  border: 1px solid var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-
-.error button {
-  min-height: 2.5rem;
-  padding-inline: .75rem;
-  border: 1px solid currentColor;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-}
-
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-@container review-photos (min-width: 592px) {
-  .grid {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-}
-
-@container review-photos (min-width: 760px) {
-  .grid {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-}

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

@@ -1,110 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
-import type {
-  IProductFeedbackImagesRequest,
-  IProductReviewImage,
-} from '@/interfaces/orionplace/products/IProductFeedbackApi';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { reviewLabels } from '@/lib/orionplace/reviewLabels';
-import { reviewImageScopeFilters } from '@/lib/orionplace/reviewScope';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
-import styles from './ProductReviewGallery.module.css';
-
-export interface ProductReviewGalleryProps {
-  productId?: number;
-  sellerId?: number;
-  images?: readonly IProductReviewImage[];
-  pagination?: Partial<IApiPagination>;
-  loaded?: boolean;
-  pending?: boolean;
-  error?: string;
-  onLoad?: (request: IProductFeedbackImagesRequest) => void;
-  onSelect?: (feedbackId: number) => void;
-}
-
-export function ProductReviewGallery({
-  productId,
-  sellerId,
-  images = [],
-  pagination = {},
-  loaded = false,
-  pending = false,
-  error = '',
-  onLoad,
-  onSelect,
-}: ProductReviewGalleryProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = reviewLabels(locale);
-  const common = featureLabels(locale);
-  const requested = useRef(false);
-
-  function load(page = 1) {
-    onLoad?.({
-      filters: reviewImageScopeFilters({ productId, sellerId }),
-      paginate: { page, pp_items: 15 },
-    });
-  }
-
-  useEffect(() => {
-    if (!requested.current) {
-      requested.current = true;
-      load();
-    }
-  }, []);
-
-  return (
-    <section className={styles.section} data-feature-part="ProductReviewGallery">
-      <h3>{labels.allPhotos}</h3>
-      {error ? (
-        <div className={styles.error} role="alert">
-          <span>{error}</span>
-          <button type="button" disabled={pending} onClick={() => load(pagination.page ?? 1)}>
-            {common.retry}
-          </button>
-        </div>
-      ) : null}
-      {pending ? (
-        <p
-          className="op-feature-loading"
-          role="status"
-        >
-          <span className={styles.srOnly}>{common.loading}</span>
-        </p>
-      ) : null}
-      {!pending && loaded && !images.length ? (
-        <OrionplaceEmptyState kind="photos" size="compact" message={labels.emptyImages} />
-      ) : null}
-      <div className={styles.grid}>
-        {images.map((image) => (
-          <button
-            key={image.id}
-            type="button"
-            aria-label={`${labels.image} ${image.id}`}
-            onClick={() => onSelect?.(image.feedback_id)}
-          >
-            <img
-              src={image.image}
-              alt=""
-              width={1}
-              height={1}
-              loading="lazy"
-              decoding="async"
-            />
-            {image.feedback_rating ? (
-              <span>{'★'.repeat(Math.min(5, Math.max(0, image.feedback_rating)))}</span>
-            ) : null}
-          </button>
-        ))}
-      </div>
-      <StorefrontPagination
-        pagination={pagination}
-        pending={pending}
-        onChange={load}
-      />
-    </section>
-  );
-}

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

@@ -1,60 +0,0 @@
-# ProductReviewImageViewer
-
-## English
-
-Opens the supplied review photos in a dialog. `images` contains photo IDs
-and public image URLs. `index` chooses the first displayed photo and resets
-the viewer when it changes. Previous and Next, arrow keys, Home, End and
-thumbnail buttons change the photo, and so does a sideways swipe on the large
-photo; `onChange` receives its ID and position. `StorefrontProduct` opens the
-product's own photos here with `label` and `alt`. `BlogArticle` opens the
-images of an article with `captions`, a caption under each photo, and `wide`,
-which lets the viewer use up to 1600px of the screen width instead of 960px
-and adds full-size zoom: the magnifier button or a click on the image shows it
-at its own size, scrolling inside the viewer.
-`onClose` handles the close button, Escape and a click outside the dialog.
-The component returns keyboard focus to the element that opened it. The
-dialog's images are mounted when it opens, so an unopened viewer starts no
-image requests.
-
-### Props
-
-| Prop                                                         | Meaning                                                                                  |
-| ------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
-| `images: IProductFeedbackImage[]`                            | Ordered images available to the gallery.                                                 |
-| `index?: number`                                             | Zero-based index of the current item in its collection.                                  |
-| `label?: string`                                             | Dialog name instead of «Review photos».                                                  |
-| `alt?: string`                                               | Photo text before the photo number instead of «Review photo».                            |
-| `captions?: string[]`                                        | Caption under each photo, in the order of `images`.                                      |
-| `wide?: boolean`                                             | Up to 1600px wide instead of 960px, with full-size zoom, for detailed images.            |
-| `onChange?: (photo: { id: number; index: number; }) => void` | Called when the visitor confirms a new value. The callback payload is shown in its type. |
-| `onClose?: () => void`                                       | Called when the visitor closes the panel or dialog. The callback has no payload.         |
-
-## Русский
-
-Открывает переданные фотографии к отзыву в диалоге. `images` содержит ID
-фотографий и их общедоступные адреса. `index` задаёт первую показанную
-фотографию и сбрасывает выбор при изменении. Кнопки «Назад» и «Вперёд»,
-клавиши стрелок, Home, End, миниатюры и смахивание по большой фотографии
-меняют фотографию; `StorefrontProduct` открывает здесь фотографии товара с
-`label` и `alt`; `onChange`
-получает её ID и номер в списке. `BlogArticle` открывает изображения статьи с
-`captions` — подписью под каждой фотографией — и `wide`, при котором
-просмотрщик занимает до 1600px ширины экрана вместо 960px, а кнопка с лупой или
-нажатие на изображение показывает его в полный размер с прокруткой. `onClose` обрабатывает кнопку закрытия,
-Escape и щелчок вне диалога. При закрытии фокус возвращается на элемент,
-который открыл просмотрщик. Изображения появляются при открытии диалога,
-поэтому закрытый просмотрщик не начинает их загрузку.
-
-### Свойства
-
-| Свойство                                                     | Назначение                                                                                       |
-| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
-| `images: IProductFeedbackImage[]`                            | Упорядоченные изображения галереи.                                                               |
-| `label?: string`                                             | Название диалога вместо «Фотографии к отзыву». |
-| `alt?: string`                                               | Текст фотографии перед её номером вместо «Фотография к отзыву». |
-| `captions?: string[]`                                        | Подпись под каждой фотографией в порядке `images`. |
-| `wide?: boolean`                                             | До 1600px ширины вместо 960px и показ в полный размер — для подробных изображений. |
-| `index?: number`                                             | Индекс текущего элемента в коллекции, начиная с нуля.                                            |
-| `onChange?: (photo: { id: number; index: number; }) => void` | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |
-| `onClose?: () => void`                                       | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.         |