orionplace-react 0.7.8 → 0.8.0

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

@@ -1,346 +0,0 @@
-'use client';
-
-import '@/components/orionplace/shared/dialogs.css';
-
-import {
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type FormEvent,
-  type MouseEvent,
-} from 'react';
-import {
-  useOrionplace,
-  useOrionplaceProducts,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { productActionLabels } from '@/lib/orionplace/productActionLabels';
-import { phoneWithCountryCode } from '@/lib/orionplace/phone';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import { useDialogLayoutEffect } from '@/hooks/useOrionplaceDialog';
-import {
-  createPageScrollLock,
-  focusedElement,
-  restoreFocus,
-} from '@/lib/orionplace/modalWindow';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import { ProductCardPrice } from './ProductCardPrice';
-import styles from './ProductPreorderDialog.module.css';
-
-export interface ProductPreorderSelection {
-  product: number;
-  email: string;
-  phone: string;
-}
-
-export interface ProductPreorderDialogProps {
-  productId?: number;
-  collection?: OrionplaceProductCollection;
-  pending?: boolean;
-  error?: string;
-  /** OrionMarketplace's messages per field; `email` and `phone` show under the fields. */
-  fieldErrors?: Record<string, string>;
-  /** OrionMarketplace asks the guest to sign in (error code `sign_in`). */
-  suggestSignIn?: boolean;
-  modal?: boolean;
-  onSubmit?: (selection: ProductPreorderSelection) => void;
-  onClose?: () => void;
-  /** Opens the sign-in page; the sign-in button needs it. */
-  onSignIn?: () => void;
-}
-
-const noFieldErrors: Record<string, string> = {};
-
-export function ProductPreorderDialog({
-  productId,
-  collection = 'products',
-  pending = false,
-  error = '',
-  fieldErrors = noFieldErrors,
-  suggestSignIn = false,
-  modal = true,
-  onSubmit,
-  onClose,
-  onSignIn,
-}: ProductPreorderDialogProps) {
-  const init = useOrionplace(selectInit);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const primary = useOrionplaceProducts((state) =>
-    productId === undefined ? undefined : state.getProduct(productId, collection),
-  );
-  const fallbackCollection: OrionplaceProductCollection = collection === 'products'
-    ? 'featured'
-    : 'products';
-  const fallback = useOrionplaceProducts((state) =>
-    productId === undefined
-      ? undefined
-      : state.getProduct(productId, fallbackCollection),
-  );
-  const resolvedCollection = primary ? collection : fallbackCollection;
-  const product = primary ?? fallback;
-  const copy = productActionLabels(locale);
-  const id = useId();
-  const dialog = useRef<HTMLDialogElement>(null);
-  const opener = useRef<HTMLElement | undefined>(undefined);
-  const [pageScroll] = useState(() => createPageScrollLock());
-  const [email, setEmail] = useState('');
-  const [phone, setPhone] = useState('');
-  const [validation, setValidation] = useState(false);
-  const authenticated = Boolean(init?.is_authenticated);
-  const shown = productId !== undefined && Boolean(product);
-  const name = getAvailableNestedValueFromObject(
-    product?.locale,
-    locale,
-    'product_name',
-  ) || '';
-  // OrionMarketplace's errors for the guest's contact fields are shown under them.
-  const emailError = authenticated ? '' : fieldErrors.email ?? '';
-  const phoneError = authenticated ? '' : fieldErrors.phone ?? '';
-  // The message above the buttons leaves out what a field already shows.
-  const rest = [emailError, phoneError]
-    .filter(Boolean)
-    .reduce((text, message) => text.split(message).join(''), error);
-  const generalError = rest.trim() ? error : '';
-  // Sign in is offered in the message that refused the contact.
-  const signInPlace  =
-    !suggestSignIn || !onSignIn || authenticated
-      ? ''
-      : emailError
-        ? 'email'
-        : phoneError
-          ? 'phone'
-          : 'general';
-  const signInLink   = (
-    <button
-      type="button"
-      disabled={pending}
-      className={styles.signIn}
-      data-preorder-sign-in
-      onClick={onSignIn}
-    >
-      {copy.signIn}
-    </button>
-  );
-
-  function close() {
-    if (!pending) {
-      onClose?.();
-    }
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (pending || !product) {
-      return;
-    }
-    const nextEmail = email.trim();
-    const nextPhone = phone.trim();
-    if (!authenticated && !nextEmail && !nextPhone) {
-      setValidation(true);
-      return;
-    }
-    setValidation(false);
-    const sentPhone = phoneWithCountryCode(nextPhone, locale);
-    setPhone(sentPhone);
-    onSubmit?.({ product: product.id, email: nextEmail, phone: sentPhone });
-  }
-
-  function backdrop(event: MouseEvent<HTMLDialogElement>) {
-    const element = dialog.current;
-    if (!modal || !element || event.target !== element) {
-      return;
-    }
-    const bounds = element.getBoundingClientRect();
-    if (
-      event.clientX < bounds.left ||
-      event.clientX > bounds.right ||
-      event.clientY < bounds.top ||
-      event.clientY > bounds.bottom
-    ) {
-      close();
-    }
-  }
-
-  // A new product starts with empty fields.
-  useEffect(() => {
-    setEmail('');
-    setPhone('');
-    setValidation(false);
-  }, [productId]);
-
-  // The window is open while its product is in the store. The element with
-  // the focus outside the window is its opener: a modal window gives it the
-  // focus back when it closes. An open window that switches between the
-  // modal and the inline mode leaves the focus on the field the visitor is
-  // in.
-  useDialogLayoutEffect(() => {
-    const element   = dialog.current;
-    if (!element) {
-      return;
-    }
-    if (!shown) {
-      element.close();
-      if (pageScroll.locked) {
-        pageScroll.unlock();
-        restoreFocus(opener.current);
-      }
-      return;
-    }
-    const switching = element.open && pageScroll.locked !== modal;
-    const focused   = focusedElement();
-    const inside    =
-      focused && element.contains(focused) ? focused : undefined;
-    if (!inside) {
-      opener.current = focused;
-    }
-    if (element.open) {
-      element.close();
-    }
-    if (modal) {
-      pageScroll.lock();
-      element.showModal();
-    } else {
-      // The page scrolls again once the window leaves the modal mode.
-      // Opened by its attribute, not show(): an inline dialog leaves focus
-      // where it is.
-      pageScroll.unlock();
-      element.setAttribute('open', '');
-    }
-    if (switching) {
-      restoreFocus(inside, { reveal: true });
-    }
-  }, [productId, shown, modal]);
-
-  // Unmounting closes the window as a close does.
-  useDialogLayoutEffect(() => {
-    const element = dialog.current;
-
-    return () => {
-      element?.close();
-      if (pageScroll.locked) {
-        pageScroll.unlock();
-        restoreFocus(opener.current);
-      }
-    };
-  }, [pageScroll]);
-
-  return (
-    <dialog
-      data-stable-modal="fit"
-      ref={dialog}
-      aria-labelledby={`${id}-title`}
-      aria-describedby={`${id}-hint`}
-      aria-busy={pending}
-      className={`${styles.dialog} ${modal ? styles.modal : styles.inline}`}
-      data-preorder-dialog
-      onKeyDown={(event) => {
-        // Escape belongs to this window, not to the page behind it.
-        if (event.key === 'Escape') {
-          event.stopPropagation();
-        }
-      }}
-      onCancel={(event) => {
-        event.preventDefault();
-        close();
-      }}
-      onClick={backdrop}
-    >
-      <form className={styles.form} onSubmit={submit}>
-        <header>
-          <h2 id={`${id}-title`}>{copy.preorder}</h2>
-          <button
-            type="button"
-            disabled={pending}
-            aria-label={copy.close}
-            className={styles.close}
-            onClick={close}
-          >
-            <span aria-hidden="true">×</span>
-          </button>
-        </header>
-        {product ? (
-          <div className={styles.product} data-preorder-product>
-            <OrionplaceImage
-              src={product.images?.full[0] || product.images?.small[0]}
-              alt={name}
-              width={84}
-              height={112}
-              className={styles.image}
-            />
-            <div>
-              <p>{name}</p>
-              <ProductCardPrice
-                productId={product.id}
-                collection={resolvedCollection}
-              />
-            </div>
-          </div>
-        ) : null}
-        <p id={`${id}-hint`} className={styles.hint}>
-          {authenticated ? copy.preorderAccount : copy.preorderContact}
-        </p>
-        {!authenticated ? (
-          <div className={styles.fields}>
-            <label>
-              {copy.emailLabel}
-              <input
-                value={email}
-                type="email"
-                autoComplete="email"
-                disabled={pending}
-                aria-invalid={emailError ? true : undefined}
-                aria-describedby={emailError ? `${id}-email-error` : undefined}
-                placeholder="name@example.com"
-                onChange={(event) => setEmail(event.target.value)}
-              />
-              {emailError ? (
-                <small id={`${id}-email-error`} className={styles.fieldError}>
-                  {emailError}
-                  {signInPlace === 'email' ? signInLink : null}
-                </small>
-              ) : null}
-            </label>
-            <label>
-              {copy.phoneLabel}
-              <input
-                value={phone}
-                type="tel"
-                autoComplete="tel"
-                disabled={pending}
-                aria-invalid={phoneError ? true : undefined}
-                aria-describedby={phoneError ? `${id}-phone-error` : undefined}
-                placeholder="+"
-                onChange={(event) => setPhone(event.target.value)}
-                onBlur={() => setPhone(phoneWithCountryCode(phone, locale))}
-              />
-              {phoneError ? (
-                <small id={`${id}-phone-error`} className={styles.fieldError}>
-                  {phoneError}
-                  {signInPlace === 'phone' ? signInLink : null}
-                </small>
-              ) : null}
-            </label>
-          </div>
-        ) : null}
-        {validation || generalError ? (
-          <p role="alert" className={styles.error}>
-            {validation ? copy.contact : generalError}
-            {!validation && signInPlace === 'general' ? signInLink : null}
-          </p>
-        ) : null}
-        <div className={styles.actions}>
-          <button type="button" disabled={pending} onClick={close}>
-            {copy.cancel}
-          </button>
-          <button type="submit" className={styles.primary} disabled={pending}>
-            {pending ? <span className={styles.spinner} aria-hidden="true" /> : null}
-            {pending ? copy.preorderPending : copy.submit}
-          </button>
-        </div>
-      </form>
-    </dialog>
-  );
-}

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

@@ -1,72 +0,0 @@
-# ProductReviewForm
-
-## English
-
-`ProductReviewForm` collects a review or reply rating, text and photos. Review
-text is trimmed and may contain up to 1024 characters. The minimum is OrionMarketplace's
-domain setting `feedback_text_min_length` (default 10, 0 means no minimum),
-read from `init.variables.feedback_text_min_length`; the counter under the text
-names it and the submit button stays disabled below it. A review needs 1–5 stars:
-nothing is preselected, and submitting without stars shows “Rate the product
-from 1 to 5 stars.” under the stars instead of calling `onSubmit`. Edit mode
-starts from the values in `initial`; an older review saved without stars (0)
-chooses them there. A reply does not rate: the stars are hidden and `onSubmit`
-receives rating 0, also when `initial.is_reply` marks an edited reply.
-`ratingError` shows OrionMarketplace's error on `rating` under the stars until another
-rating is chosen; `ProductReviews` passes it from the failed add or edit
-request. `textError` shows OrionMarketplace's error on `text` (code `text_too_short`, a
-text shorter than the domain minimum) under the text until the text changes.
-
-Up to five saved and newly selected photos may remain. Removing a saved photo
-adds its ID to `remove`; new browser files are returned in `files`. Submitting
-calls `onSubmit` with the text, numeric rating, new files and removed image IDs.
-The host keeps the form mounted until the corresponding add or edit request is
-confirmed. `pending` disables changes, and `onCancel` closes the form.
-
-### Props
-
-| Prop                                                                                                                                                                                       | Meaning                                                                                                             |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| `initial?: { id: number; text: string; rating: number; status: { int: EProductFeedbackStatus; text: string; }; got_reply: boolean; is_reply?: boolean; images: IProductFeedbackImage[]; }` | Server-provided initial data used for the first render and hydration.                                               |
-| `replyingTo?: string`                                                                                                                                                                      | Review or comment that will receive the new reply.                                                                  |
-| `pending?: boolean`                                                                                                                                                                        | Shows the loading state and blocks duplicate actions.                                                               |
-| `ratingError?: string`                                                                                                                                                                     | OrionMarketplace's error on `rating` from the failed add or edit request; shown under the stars until another rating is chosen. |
-| `textError?: string`                                                                                                                                                                       | OrionMarketplace's error on `text` from the failed add or edit request; shown under the text until it changes.                  |
-| `onSubmit?: (value: ProductReviewFormValue) => void`                                                                                                                                       | Called when the visitor submits the confirmed form values. The callback payload is shown in its type.               |
-| `onCancel?: () => void`                                                                                                                                                                    | Called when the visitor cancels the current form or action. The callback has no payload.                            |
-
-## Русский
-
-`ProductReviewForm` собирает оценку, текст и фотографии отзыва или ответа.
-Пробелы по краям текста удаляются; текст может содержать до 1024 символов.
-Минимум задаёт настройка домена OrionMarketplace `feedback_text_min_length` (по умолчанию
-10, 0 — без минимума) из `init.variables.feedback_text_min_length`; счётчик под
-текстом называет его, а кнопка отправки неактивна, пока текст короче. Отзыву нужно 1–5 звёзд: заранее ничего не выбрано, а отправка без
-звёзд показывает под ними «Оцените товар от 1 до 5 звёзд.» вместо вызова
-`onSubmit`. Режим изменения получает начальные значения через `initial`; старый
-отзыв, сохранённый без звёзд (0), выбирает их там. Ответ не оценивает товар:
-звёзды скрыты, а `onSubmit` получает оценку 0, в том числе когда
-`initial.is_reply` отмечает изменяемый ответ. `ratingError` показывает ошибку
-OrionMarketplace в поле `rating` под звёздами, пока не выбрана другая оценка;
-`ProductReviews` передаёт её из неудачного запроса добавления или изменения.
-`textError` показывает ошибку OrionMarketplace в поле `text` (код `text_too_short`, текст
-короче минимума домена) под текстом, пока текст не изменится.
-
-После удаления сохранённых и добавления новых фотографий их должно остаться не
-больше пяти. ID удалённых фотографий передаются в `remove`, а выбранные в
-браузере файлы — в `files`. При отправке `onSubmit` получает текст, числовую
-оценку, новые файлы и ID удаляемых изображений. Родитель сохраняет форму до
-подтверждения запроса добавления или изменения. `pending` блокирует поля, а
-`onCancel` закрывает форму.
-
-### Свойства
-
-| Свойство                                                                                                                                                                                   | Назначение                                                                                                                            |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `initial?: { id: number; text: string; rating: number; status: { int: EProductFeedbackStatus; text: string; }; got_reply: boolean; is_reply?: boolean; images: IProductFeedbackImage[]; }` | Начальные данные с сервера для первого рендера и гидратации.                                                                          |
-| `replyingTo?: string`                                                                                                                                                                      | Отзыв или комментарий, на который отправляют ответ.                                                                                   |
-| `pending?: boolean`                                                                                                                                                                        | Показывает загрузку и блокирует повторные действия.                                                                                   |
-| `ratingError?: string`                                                                                                                                                                     | Ошибка OrionMarketplace в поле `rating` из неудачного запроса добавления или изменения; показывается под звёздами, пока не выбрана другая оценка. |
-| `textError?: string`                                                                                                                                                                       | Ошибка OrionMarketplace в поле `text` из неудачного запроса добавления или изменения; показывается под текстом, пока он не изменится.             |
-| `onSubmit?: (value: ProductReviewFormValue) => void`                                                                                                                                       | Вызывается, когда покупатель отправляет подтверждённые значения формы. Данные обработчика указаны в его типе.                         |
-| `onCancel?: () => void`                                                                                                                                                                    | Вызывается, когда покупатель отменяет текущую форму или действие. Обработчик не получает данные.                                      |

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

@@ -1,217 +0,0 @@
-/* As `op-feature op-feature-stack op-feature-panel` in the other packages. */
-.form {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  min-width: 0;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font-size: .875rem;
-  line-height: 1.5rem;
-}
-
-.heading {
-  display: flex;
-  align-items: center;
-  gap: .75rem;
-}
-
-.heading h3 {
-  margin: 0;
-  font-size: 1.17em;
-  line-height: 1.5rem;
-  font-weight: 400;
-}
-
-.rating {
-  display: flex;
-  flex-direction: column;
-  gap: .5rem;
-  min-width: 0;
-}
-
-.fieldError {
-  color: var(--orionplace-danger);
-  font-size: .75rem;
-  line-height: calc(1 / 0.75);
-}
-
-/* As `op-feature-label` and `op-feature-input`. */
-.field {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: .5rem;
-}
-
-.field > span:first-child {
-  color: var(--orionplace-muted);
-  font-size: .75rem;
-  line-height: 1rem;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-}
-
-.required {
-  color: var(--orionplace-danger);
-  letter-spacing: 0;
-}
-
-.field textarea,
-.field input {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: .5rem .75rem;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  outline: none;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: .875rem;
-  line-height: 1.5rem;
-}
-
-.field textarea:focus-visible,
-.field input:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-.field textarea:disabled,
-.field input:disabled {
-  cursor: default;
-  opacity: .6;
-}
-
-.field textarea {
-  /* As Nuxt `op-feature-input`: 7rem tall at least, panel line height. */
-  min-height: 7rem;
-  resize: vertical;
-}
-
-.counter {
-  color: var(--orionplace-muted);
-  font-size: .75rem;
-  line-height: calc(1 / 0.75);
-}
-
-.images {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .75rem;
-}
-
-.savedImage {
-  display: grid;
-  width: 6rem;
-  gap: .375rem;
-}
-
-.savedImage img {
-  width: 6rem;
-  height: 6rem;
-  object-fit: cover;
-}
-
-.files {
-  display: grid;
-  gap: .5rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.files li {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: .75rem;
-}
-
-.files span {
-  overflow-wrap: anywhere;
-}
-
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: .75rem;
-}
-
-/* As `op-feature-button` (and `op-feature-primary`). */
-.actions button,
-.savedImage button,
-.files button {
-  box-sizing: border-box;
-  display: inline-flex;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  gap: .5rem;
-  padding: .5rem 1.25rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  outline: none;
-  background: transparent;
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: .75rem;
-  font-weight: 500;
-  line-height: 1rem;
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.actions button:focus-visible,
-.savedImage button:focus-visible,
-.files button:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .actions button:hover,
-  .savedImage button:hover,
-  .files button:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.actions .primary {
-  border-color: var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-}
-
-.actions .primary:focus-visible {
-  background: var(--orionplace-accent);
-  opacity: .85;
-}
-
-@media (hover: hover) {
-  .actions .primary:hover {
-    background: var(--orionplace-accent);
-    opacity: .85;
-  }
-}
-
-.actions button:disabled,
-.savedImage button:disabled,
-.files button:disabled {
-  cursor: default;
-  opacity: .6;
-}
-
-.error {
-  margin: 0;
-  padding: .75rem;
-  border: 1px solid var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}