orionplace-react 0.1.0 → 0.2.0

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

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

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

@@ -0,0 +1,217 @@
+/* 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);
+}