orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/contact/ContactForm.module.css

@@ -1,264 +0,0 @@
-.root {
-  display: flex;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1.5rem;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  font: inherit;
-}
-
-.header {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.header h2 {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.header p {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.header p {
-  color: var(--orionplace-muted);
-}
-
-.form,
-.field {
-  display: grid;
-}
-
-.form {
-  gap: 1.25rem;
-}
-
-.columns {
-  display: grid;
-  gap: 1rem;
-}
-
-.field {
-  min-width: 0;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  line-height: calc(1.25 / 0.875);
-}
-
-.field > span:first-child {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-/* The required marker follows the label text, as in the other packages. */
-.field b {
-  color: var(--orionplace-danger);
-  font-weight: 400;
-  letter-spacing: 0;
-}
-
-.field input,
-.field textarea {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  font: inherit;
-  outline: none;
-}
-
-.field input {
-  min-height: 2.75rem;
-  padding: 0 0.75rem;
-}
-
-.field textarea {
-  /* As Nuxt `op-feature-input`: seven rows at the panel line height. */
-  min-height: 7rem;
-  padding: 0.5rem 0.75rem;
-  line-height: 1.5rem;
-  resize: vertical;
-}
-
-.field input:focus,
-.field textarea:focus {
-  border-color: var(--orionplace-text);
-}
-
-.field input:disabled,
-.field textarea:disabled,
-.root button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.messageMeta {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 0.5rem 1rem;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-}
-
-.fieldError {
-  color: var(--orionplace-danger);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-}
-
-.captchaRow,
-.captchaActions {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.captchaRow > .field {
-  min-width: 12rem;
-  flex: 1;
-}
-
-.captchaActions {
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.captchaImage {
-  display: flex;
-  box-sizing: border-box;
-  width: 11rem;
-  height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--orionplace-border);
-}
-
-.captchaImage img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.root button {
-  display: inline-flex;
-  box-sizing: border-box;
-  width: fit-content;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1.25rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: transparent;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-}
-
-.root button:focus-visible {
-  background: var(--orionplace-hover);
-  outline: none;
-}
-
-@media (hover: hover) {
-  .root button:hover {
-    background: var(--orionplace-hover);
-    outline: none;
-  }
-}
-
-.root button svg {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-/* Send spans a narrow form, as in the other packages. */
-.root .primary {
-  width: 100%;
-  border-color: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  background: var(--orionplace-accent);
-}
-
-.root .primary:focus-visible {
-  background: var(--orionplace-accent);
-  opacity: 0.85;
-}
-
-@media (hover: hover) {
-  .root .primary:hover {
-    background: var(--orionplace-accent);
-    opacity: 0.85;
-  }
-}
-
-/* The shared notices, as op-notice in Nuxt and Svelte: an icon, the
-   tinted surface, and the Another button beside the text when it fits. */
-.errorNotice {
-  composes: notice noticeError from '../account/account.module.css';
-}
-
-.successNotice {
-  composes: notice noticeSuccess from '../account/account.module.css';
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* The contact page around the form, as in the other packages. */
-@container (min-width: 592px) {
-  .root {
-    padding: 2rem;
-  }
-
-  .root .primary {
-    width: fit-content;
-    justify-self: start;
-  }
-
-  /* Level with the code field under its label. */
-  .captchaActions {
-    margin-top: 1.5rem;
-  }
-
-  .columns {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}

package/templates/components/orionplace/contact/ContactForm.tsx

@@ -1,382 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type FormEvent,
-} from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type {
-  ICaptchaResponse,
-  IContactRequest,
-} from '@/interfaces/orionplace/accounts/IContact';
-import { contactLabels } from '@/lib/orionplace/contactLabels';
-import { contactCaptchaUrl, contactRequest } from '@/lib/orionplace/contact';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import styles from './ContactForm.module.css';
-import { fieldErrorText } from '@/lib/orionplace/api';
-
-export interface ContactCaptchaAction {
-  endpoint: 'misc_captcha';
-  request: Record<string, never>;
-}
-
-export interface ContactSubmitAction {
-  endpoint: 'misc_contact';
-  request: IContactRequest;
-}
-
-type CaptchaData = NonNullable<ICaptchaResponse['page_data']>;
-
-export interface ContactFormProps {
-  initialName?: string;
-  initialEmail?: string;
-  captchaImage?: string;
-  pending?: boolean;
-  error?: string;
-  fieldErrors?: Readonly<Record<string, string>>;
-  onLoadCaptcha?: (
-    action: ContactCaptchaAction,
-    signal: AbortSignal,
-  ) => Promise<CaptchaData | void> | CaptchaData | void;
-  onSubmit?: (
-    action: ContactSubmitAction,
-    signal: AbortSignal,
-  ) => Promise<void> | void;
-  onSent?: (request: IContactRequest) => void;
-}
-
-export function ContactForm({
-  initialName = '',
-  initialEmail = '',
-  captchaImage = '',
-  pending = false,
-  error = '',
-  fieldErrors = {},
-  onLoadCaptcha,
-  onSubmit,
-  onSent,
-}: ContactFormProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = contactLabels(locale);
-  const common = featureLabels(locale);
-  const controller = useRef<AbortController>(null);
-  const mounted = useRef(false);
-  const [fields, setFields] = useState<IContactRequest>({
-    full_name: initialName,
-    email: initialEmail,
-    message: '',
-    captcha: '',
-  });
-  const [image, setImage] = useState(() => contactCaptchaUrl(captchaImage));
-  const [action, setAction] = useState<'' | 'captcha' | 'submit'>('');
-  const [localError, setLocalError] = useState('');
-  const [localFieldErrors, setLocalFieldErrors] = useState<
-    Record<string, string>
-  >({});
-  const [sent, setSent] = useState(false);
-  const busy = pending || Boolean(action);
-  const shownFieldErrors: Readonly<Record<string, string>> = {
-    ...localFieldErrors,
-    ...fieldErrors,
-  };
-
-  useEffect(() => {
-    mounted.current = true;
-    if (captchaImage) {
-      setImage(contactCaptchaUrl(captchaImage));
-    } else if (onLoadCaptcha) {
-      void loadCaptcha();
-    }
-
-    return () => {
-      mounted.current = false;
-      controller.current?.abort();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (captchaImage) {
-      setImage(contactCaptchaUrl(captchaImage));
-      setFields((current) => ({ ...current, captcha: '' }));
-    }
-  }, [captchaImage]);
-
-  function update(name: keyof IContactRequest, value: string) {
-    setFields((current) => ({ ...current, [name]: value }));
-  }
-
-  async function loadCaptcha() {
-    if (pending || action) {
-      return;
-    }
-
-    controller.current?.abort();
-    const request = new AbortController();
-    controller.current = request;
-    setAction('captcha');
-    setLocalError('');
-    setLocalFieldErrors({});
-    setFields((current) => ({ ...current, captcha: '' }));
-
-    try {
-      const data = await onLoadCaptcha?.(
-        { endpoint: 'misc_captcha', request: {} },
-        request.signal,
-      );
-      if (mounted.current && !request.signal.aborted && data) {
-        const nextImage = contactCaptchaUrl(data.image);
-        setImage(nextImage);
-        if (!nextImage) {
-          setLocalError(common.failed);
-        }
-      }
-    } catch {
-      if (mounted.current && !request.signal.aborted) {
-        setLocalError(common.failed);
-      }
-    } finally {
-      if (mounted.current && controller.current === request) {
-        controller.current = null;
-        setAction('');
-      }
-    }
-  }
-
-  async function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (busy || !image || !onSubmit) {
-      return;
-    }
-
-    const requestFields = contactRequest(fields);
-    if (
-      requestFields.full_name.length < 3 ||
-      requestFields.full_name.length > 32 ||
-      requestFields.message.length < 15 ||
-      requestFields.message.length > 2048 ||
-      !requestFields.email ||
-      !requestFields.captcha
-    ) {
-      return;
-    }
-
-    controller.current?.abort();
-    const request = new AbortController();
-    controller.current = request;
-    setAction('submit');
-    setLocalError('');
-    setLocalFieldErrors({});
-
-    try {
-      await onSubmit?.(
-        { endpoint: 'misc_contact', request: requestFields },
-        request.signal,
-      );
-      if (mounted.current && !request.signal.aborted) {
-        setSent(true);
-        setFields((current) => ({
-          ...current,
-          full_name: requestFields.full_name,
-          email: requestFields.email,
-          message: '',
-          captcha: '',
-        }));
-        onSent?.(requestFields);
-      }
-    } catch (reason) {
-      if (mounted.current && !request.signal.aborted) {
-        const errors =
-          (reason as { fields?: Record<string, string> } | null)?.fields ?? {};
-        setLocalFieldErrors(errors);
-        setLocalError(
-          fieldErrorText(errors) || common.failed,
-        );
-        await refreshCaptchaAfterFailure(request.signal);
-      }
-    } finally {
-      if (mounted.current && controller.current === request) {
-        controller.current = null;
-        setAction('');
-      }
-    }
-  }
-
-  // Every attempt uses up the CAPTCHA answer, so a failed send needs a new
-  // image. The send error stays the one shown.
-  async function refreshCaptchaAfterFailure(signal: AbortSignal) {
-    setFields((current) => ({ ...current, captcha: '' }));
-    try {
-      const data = await onLoadCaptcha?.(
-        { endpoint: 'misc_captcha', request: {} },
-        signal,
-      );
-      const nextImage = data ? contactCaptchaUrl(data.image) : '';
-      if (mounted.current && !signal.aborted && nextImage) {
-        setImage(nextImage);
-      }
-    } catch {
-      // Refresh stays available beside the image.
-    }
-  }
-
-  function another() {
-    setSent(false);
-    setImage('');
-    void loadCaptcha();
-  }
-
-  return (
-    <section
-      className={styles.root}
-      data-feature-part="ContactForm"
-      aria-busy={busy}
-    >
-      <header className={styles.header}>
-        <h2>{labels.title}</h2>
-        <p>{labels.description}</p>
-      </header>
-
-      {error || localError ? (
-        <p className={styles.errorNotice} role="alert">
-          {error || localError}
-        </p>
-      ) : null}
-
-      {sent ? (
-        <div className={styles.successNotice} role="status">
-          <p>{labels.sent}</p>
-          <button
-            type="button"
-            aria-label={labels.anotherHint}
-            onClick={another}
-          >
-            {labels.another}
-          </button>
-        </div>
-      ) : (
-        <form className={styles.form} onSubmit={submit}>
-          <div className={styles.columns}>
-            <label className={styles.field}>
-              <span>{labels.name} <b aria-hidden="true">*</b></span>
-              <input
-                value={fields.full_name}
-                name="full_name"
-                autoComplete="name"
-                minLength={3}
-                maxLength={32}
-                required
-                disabled={busy}
-                onChange={(event) => update('full_name', event.target.value)}
-              />
-              {shownFieldErrors.full_name ? (
-                <span className={styles.fieldError}>{shownFieldErrors.full_name}</span>
-              ) : null}
-            </label>
-
-            <label className={styles.field}>
-              <span>{labels.email} <b aria-hidden="true">*</b></span>
-              <input
-                value={fields.email}
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                disabled={busy}
-                onChange={(event) => update('email', event.target.value)}
-              />
-              {shownFieldErrors.email ? (
-                <span className={styles.fieldError}>{shownFieldErrors.email}</span>
-              ) : null}
-            </label>
-          </div>
-
-          <label className={styles.field}>
-            <span>{labels.message} <b aria-hidden="true">*</b></span>
-            <textarea
-              value={fields.message}
-              name="message"
-              rows={7}
-              minLength={15}
-              maxLength={2048}
-              required
-              disabled={busy}
-              onChange={(event) => update('message', event.target.value)}
-            />
-            <span className={styles.messageMeta}>
-              <span>{labels.messageHint}</span>
-              <span>{fields.message.length} / 2048</span>
-            </span>
-            {shownFieldErrors.message ? (
-              <span className={styles.fieldError}>{shownFieldErrors.message}</span>
-            ) : null}
-          </label>
-
-          <div className={styles.captchaRow}>
-            <div className={styles.captchaActions}>
-              <div className={styles.captchaImage}>
-                {image ? (
-                  <img
-                    src={image}
-                    alt={labels.captcha}
-                    width={176}
-                    height={44}
-                    decoding="async"
-                  />
-                ) : null}
-              </div>
-              <button
-                type="button"
-                disabled={busy}
-                aria-label={labels.refreshCaptchaHint}
-                onClick={() => void loadCaptcha()}
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  aria-hidden="true"
-                >
-                  <path d="M20 12a8 8 0 1 1-2.3-5.6" />
-                  <path d="M20 4v5h-5" />
-                </svg>
-                {labels.refreshCaptcha}
-              </button>
-            </div>
-
-            <label className={styles.field}>
-              <span>{labels.captcha} <b aria-hidden="true">*</b></span>
-              <input
-                value={fields.captcha}
-                name="captcha"
-                autoComplete="off"
-                maxLength={8}
-                required
-                disabled={busy || !image}
-                onChange={(event) => update('captcha', event.target.value)}
-              />
-              {shownFieldErrors.captcha ? (
-                <span className={styles.fieldError}>{shownFieldErrors.captcha}</span>
-              ) : null}
-            </label>
-          </div>
-
-          <button
-            type="submit"
-            className={styles.primary}
-            disabled={busy || !image || !onSubmit}
-          >
-            {labels.send}
-          </button>
-          <span className={styles.screenReaderOnly} role="status">
-            {busy ? common.loading : ''}
-          </span>
-        </form>
-      )}
-    </section>
-  );
-}

package/templates/components/orionplace/contact/EmailUnsubscribe.README.md

@@ -1,67 +0,0 @@
-# EmailUnsubscribe · React
-
-## English
-
-`EmailUnsubscribe` confirms an unsubscribe request opened from an email link.
-Pass the query parameter `t` as `token` and `ut` as `kind`. A valid token is
-non-empty and at most 64 characters. `kind="newsletter"` turns off promotional emails
-only, while order, preorder, support-reply and subscription emails stay on;
-`kind="products"` stops product-availability emails. Any other value shows the
-incomplete-link message and no action.
-
-The button is disabled in server HTML and becomes available after hydration.
-It calls `onSubmit` only after the visitor presses it, passing
-`endpoint: "misc_unsubscribe"`, `{ hash: token, unsubcribe_type: kind }` and an
-`AbortSignal`. A resolved action replaces the choice with the confirmation and
-calls `onDone(request)`. A rejected action keeps the button available for retry
-and shows a localized error. `pending` and `error` display host-controlled
-request state. Unmounting or changing the link values aborts the active action;
-new link values clear the previous result.
-
-Source is maintained in
-`components/orionplace/contact/EmailUnsubscribe.tsx`; the physical request
-interface is `interfaces/orionplace/accounts/IContact.ts`.
-
-### Props
-
-| Prop                                                                                        | Meaning                                                                                                |
-| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `token: string`                                                                             | Confirmation token read from the notification link.                                                    |
-| `kind: string`                                                                              | Selects the component mode or empty-state illustration.                                                |
-| `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.                      |
-| `onSubmit?: (action: EmailUnsubscribeAction, signal: AbortSignal) => Promise<void> \| void` | Called when the visitor submits the confirmed form values. The callback payload is shown in its type.  |
-| `onDone?: (request: IUnsubscribeRequest) => void`                                           | Called when the requested operation completes successfully. The callback payload is shown in its type. |
-
-## Русский
-
-`EmailUnsubscribe` подтверждает отказ от рассылки по ссылке из письма. Передайте
-параметр запроса `t` как `token`, а `ut` — как `kind`. Допустимый токен не пуст
-и содержит не более 64 символов. `kind="newsletter"` отключает только рекламные
-письма (письма о заказах, предзаказах, ответах поддержки и подписке остаются), а
-`kind="products"` — письма о наличии товаров. При другом значении
-показывается сообщение о неполной ссылке, а действие недоступно.
-
-В серверном HTML кнопка заблокирована и становится доступной после гидратации.
-Только после нажатия `onSubmit` получает `endpoint: "misc_unsubscribe"`,
-`{ hash: token, unsubcribe_type: kind }` и `AbortSignal`. Подтверждённое действие
-заменяет выбор сообщением об успехе и вызывает `onDone(request)`. Отклонённое
-действие сохраняет кнопку для повтора и показывает локализованную ошибку.
-`pending` и `error` передают состояние запроса из приложения. Размонтирование
-или изменение параметров ссылки отменяет активное действие; новые параметры
-очищают предыдущий результат.
-
-Поддерживаемый исходный файл:
-`components/orionplace/contact/EmailUnsubscribe.tsx`; физический интерфейс
-запроса находится в `interfaces/orionplace/accounts/IContact.ts`.
-
-### Свойства
-
-| Свойство                                                                                    | Назначение                                                                                                    |
-| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `token: string`                                                                             | Токен подтверждения из ссылки уведомления.                                                                    |
-| `kind: string`                                                                              | Выбирает режим компонента или иллюстрацию пустого состояния.                                                  |
-| `pending?: boolean`                                                                         | Показывает загрузку и блокирует повторные действия.                                                           |
-| `error?: string`                                                                            | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                          |
-| `onSubmit?: (action: EmailUnsubscribeAction, signal: AbortSignal) => Promise<void> \| void` | Вызывается, когда покупатель отправляет подтверждённые значения формы. Данные обработчика указаны в его типе. |
-| `onDone?: (request: IUnsubscribeRequest) => void`                                           | Вызывается, когда запрошенное действие успешно завершено. Данные обработчика указаны в его типе.              |