orionplace-react 0.7.8 → 0.8.0

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

@@ -1,216 +0,0 @@
-.root {
-  container: about / inline-size;
-  display: grid;
-  min-width: 0;
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.header {
-  display: grid;
-  gap: 0.25rem;
-  padding-bottom: 1.5rem;
-}
-
-.label,
-.value h3 {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-weight: 400;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.header .label {
-  margin-bottom: 0.25rem;
-}
-
-.company {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 500;
-  line-height: 1.75rem;
-}
-
-/* The company name follows the block's own width, as in the other packages. */
-@container about (min-width: 592px) {
-  .company {
-    font-size: 1.25rem;
-  }
-}
-
-.legal {
-  margin: 0;
-  color: var(--orionplace-muted);
-}
-
-.list {
-  display: grid;
-  margin: 0;
-  padding: 0;
-  border-top: 1px solid var(--orionplace-border);
-  list-style: none;
-}
-
-.row {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 0.75rem 1rem;
-  padding: 1.25rem 0;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-/* Registration details carry their own copy buttons. */
-.registry {
-  grid-template-columns: 2.5rem minmax(0, 1fr);
-}
-
-.copy svg {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-.icon {
-  display: inline-flex;
-  box-sizing: border-box;
-  width: 2.5rem;
-  height: 2.5rem;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-text);
-}
-
-.icon svg {
-  width: 1.25rem;
-  height: 1.25rem;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.value {
-  min-width: 0;
-}
-
-.value h3 {
-  margin-bottom: 0.25rem;
-}
-
-.value p,
-.value a,
-.details,
-.detail dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.value a {
-  color: inherit;
-  font-size: 1rem;
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-}
-
-.value a:focus-visible {
-  border-bottom-color: currentColor;
-  outline: none;
-}
-
-@media (hover: hover) {
-  .value a:hover {
-    border-bottom-color: currentColor;
-    outline: none;
-  }
-}
-
-/* The copy action: an outlined small-caps button, as in the other packages. */
-.copy {
-  display: inline-flex;
-  box-sizing: border-box;
-  height: 2.25rem;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: transparent;
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  line-height: 1rem;
-  text-transform: uppercase;
-  cursor: pointer;
-  outline: none;
-}
-
-.copy:focus-visible {
-  border-color: var(--orionplace-text);
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .copy:hover {
-    border-color: var(--orionplace-text);
-    background: var(--orionplace-hover);
-  }
-}
-
-.details {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.detail {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 1rem;
-}
-
-.detail dt {
-  color: var(--orionplace-muted);
-}
-
-.error {
-  color: var(--orionplace-danger);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* A narrow block keeps the icon; the aria-label still names the action. */
-@container about (max-width: 591px) {
-  .copy {
-    width: 2.25rem;
-    justify-content: center;
-    padding: 0;
-  }
-
-  .copy span {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-  }
-}

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

@@ -1,191 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import { contactLabels } from '@/lib/orionplace/contactLabels';
-import {
-  cleanContactValue,
-  contactPhoneHref,
-} from '@/lib/orionplace/contact';
-import styles from './AboutPage.module.css';
-
-type CopyTarget = 'address' | 'phone' | 'taxId' | 'registrationNumber';
-
-interface ContactEntry {
-  key: CopyTarget;
-  label: string;
-  value: string;
-  copyHint: string;
-  href?: string;
-}
-
-export function AboutPage() {
-  const init = useOrionplace(selectInit);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = contactLabels(locale);
-  const contact = init?.contact;
-  const companyName = cleanContactValue(contact?.company_name);
-  const legalName = cleanContactValue(contact?.company_legal_name);
-  const extraLegal = legalName !== companyName ? legalName : '';
-  const address: ContactEntry = {
-    key: 'address',
-    label: labels.address,
-    value: cleanContactValue(contact?.company_contact_address),
-    copyHint: labels.copyAddress,
-  };
-  const phoneValue = cleanContactValue(contact?.company_contact_phone);
-  const phone: ContactEntry = {
-    key: 'phone',
-    label: labels.phone,
-    value: phoneValue,
-    copyHint: labels.copyPhone,
-    href: contactPhoneHref(phoneValue) || undefined,
-  };
-  const registry: ContactEntry[] = [
-    {
-      key: 'taxId' as const,
-      label: labels.taxId,
-      value: cleanContactValue(contact?.company_tax_id),
-      copyHint: labels.copyTaxId,
-    },
-    {
-      key: 'registrationNumber' as const,
-      label: labels.registrationNumber,
-      value: cleanContactValue(contact?.company_organization_id),
-      copyHint: labels.copyRegistrationNumber,
-    },
-  ].filter((entry) => entry.value);
-  const resetTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const [canCopy, setCanCopy] = useState(false);
-  const [copied, setCopied] = useState<CopyTarget | ''>('');
-  const [failed, setFailed] = useState<CopyTarget | ''>('');
-
-  useEffect(() => {
-    setCanCopy(Boolean(globalThis.navigator?.clipboard?.writeText));
-    return () => clearTimeout(resetTimer.current);
-  }, []);
-
-  async function copy(entry: ContactEntry) {
-    clearTimeout(resetTimer.current);
-    setFailed('');
-
-    try {
-      await navigator.clipboard.writeText(entry.value);
-      setCopied(entry.key);
-    } catch {
-      setCopied('');
-      setFailed(entry.key);
-    }
-
-    resetTimer.current = setTimeout(() => setCopied(''), 2000);
-  }
-
-  function copyButton(entry: ContactEntry) {
-    return canCopy ? (
-      <button
-        type="button"
-        className={styles.copy}
-        aria-label={entry.copyHint}
-        onClick={() => void copy(entry)}
-      >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          aria-hidden="true"
-        >
-          <rect x="8" y="8" width="12" height="12" />
-          <path d="M16 8V4H4v12h4" />
-        </svg>
-        <span>{copied === entry.key ? labels.copied : labels.copy}</span>
-      </button>
-    ) : null;
-  }
-
-  return (
-    <div data-feature-part="AboutPage" className={styles.root}>
-      {companyName || extraLegal ? (
-        <header className={styles.header}>
-          <p className={styles.label}>{labels.companyName}</p>
-          {companyName ? <p className={styles.company}>{companyName}</p> : null}
-          {extraLegal ? (
-            <p className={styles.legal}>
-              <span className={styles.screenReaderOnly}>
-                {labels.legalName}:
-              </span>{' '}
-              {extraLegal}
-            </p>
-          ) : null}
-        </header>
-      ) : null}
-
-      <ul className={styles.list}>
-        {[address, phone].filter((entry) => entry.value).map((entry) => (
-          <li key={entry.key} className={styles.row} data-contact-entry={entry.key}>
-            <span className={styles.icon} aria-hidden="true">
-              {entry.key === 'address' ? (
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                  <path d="M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21Z" />
-                  <circle cx="12" cy="9.5" r="2.5" />
-                </svg>
-              ) : (
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                  <path d="M5 4h3.5l1.5 4-2 1.5a11 11 0 0 0 6.5 6.5l1.5-2 4 1.5V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z" />
-                </svg>
-              )}
-            </span>
-            <div className={styles.value}>
-              <h3>{entry.label}</h3>
-              {entry.href ? (
-                <a href={entry.href}>{entry.value}</a>
-              ) : (
-                <p>{entry.value}</p>
-              )}
-              {failed === entry.key ? (
-                <p className={styles.error}>{labels.copyFailed}</p>
-              ) : null}
-            </div>
-            {copyButton(entry)}
-          </li>
-        ))}
-
-        {registry.length ? (
-          <li className={`${styles.row} ${styles.registry}`} data-contact-entry="registry">
-            <span className={styles.icon} aria-hidden="true">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                <path d="M6 3h8l4 4v14H6Z" />
-                <path d="M14 3v4h4M9 12h6M9 16h6" />
-              </svg>
-            </span>
-            <div className={styles.value}>
-              <h3>{labels.registration}</h3>
-              <dl className={styles.details}>
-                {registry.map((entry) => (
-                  <div key={entry.key} className={styles.detail}>
-                    <div>
-                      <dt>{entry.label}</dt>
-                      <dd>{entry.value}</dd>
-                      {failed === entry.key ? (
-                        <p className={styles.error}>{labels.copyFailed}</p>
-                      ) : null}
-                    </div>
-                    {copyButton(entry)}
-                  </div>
-                ))}
-              </dl>
-            </div>
-          </li>
-        ) : null}
-      </ul>
-
-      <p className={styles.screenReaderOnly} role="status">
-        {copied ? labels.copiedStatus : ''}
-      </p>
-    </div>
-  );
-}

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

@@ -1,93 +0,0 @@
-# ContactForm · React
-
-## English
-
-`ContactForm` sends a question to the store. The visitor enters a 3–32
-character name, a valid email address, a 15–2048 character message and the code
-shown in the verification image. The message field displays its character
-limit and current length. `initialName` and `initialEmail` can prefill the two
-contact fields.
-
-After hydration, `onLoadCaptcha` receives the exact `misc_captcha` action and
-an `AbortSignal`. Return its `{ image }` data to display the PNG returned as
-base64. Refresh repeats that action and clears the entered code. Supplying
-`captchaImage` includes an existing image in server HTML and suppresses the
-initial browser load. Invalid image data keeps submission unavailable.
-
-Submitting calls `onSubmit` with `endpoint: "misc_contact"`, trimmed
-`full_name`, `email` and `captcha`, the message as entered, and an
-`AbortSignal`. A resolved action shows the confirmation. Another restores the
-form, keeps the confirmed name and email, and requests a new image. A rejected
-action keeps the entered fields and shows the messages of the error's `fields`
-(as thrown by the API client) under their inputs and together in the notice, or
-a general localized error when it has none. Every send attempt uses up the
-backend's CAPTCHA answer, so after a rejection the form clears `captcha` and
-asks `onLoadCaptcha` for a new image.
-`error` and `fieldErrors` display host-returned errors; `pending` disables every
-form action. Unmounting aborts an active request. `onSent(request)` runs after a
-confirmed submission.
-
-Source is maintained in `components/orionplace/contact/ContactForm.tsx`; the
-physical request and captcha interfaces are in
-`interfaces/orionplace/accounts/IContact.ts`.
-
-### Props
-
-| Prop                                                                                                                         | Meaning                                                                                                |
-| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `initialName?: string`                                                                                                       | Server-provided initial name used for the first render and hydration.                                  |
-| `initialEmail?: string`                                                                                                      | Server-provided initial email used for the first render and hydration.                                 |
-| `captchaImage?: string`                                                                                                      | Captcha image returned for the current contact request.                                                |
-| `pending?: boolean`                                                                                                          | Shows the loading state and blocks duplicate actions.                                                  |
-| `error?: string`                                                                                                             | Customer-visible error for the component request; omit it when no request failed.                      |
-| `fieldErrors?: Readonly<Record<string, string>>`                                                                             | Validation messages keyed by the submitted field name.                                                 |
-| `onLoadCaptcha?: (action: ContactCaptchaAction, signal: AbortSignal) => Promise<CaptchaData \| void> \| CaptchaData \| void` | Called when the contact form needs a captcha image. The callback payload is shown in its type.         |
-| `onSubmit?: (action: ContactSubmitAction, signal: AbortSignal) => Promise<void> \| void`                                     | Called when the visitor submits the confirmed form values. The callback payload is shown in its type.  |
-| `onSent?: (request: IContactRequest) => void`                                                                                | Called when the contact message has been sent successfully. The callback payload is shown in its type. |
-
-## Русский
-
-`ContactForm` отправляет вопрос магазину. Посетитель вводит имя длиной 3–32
-символа, действующий адрес электронной почты, сообщение длиной 15–2048 символов
-и код с проверочного изображения. Под сообщением показаны ограничение и текущее
-число символов. `initialName` и `initialEmail` позволяют заранее заполнить два
-контактных поля.
-
-После гидратации `onLoadCaptcha` получает точное действие `misc_captcha` и
-`AbortSignal`. Верните данные `{ image }`, чтобы показать PNG, полученный в
-формате base64. Кнопка обновления повторяет запрос и очищает введённый код.
-Свойство `captchaImage` добавляет уже полученное изображение в серверный HTML и
-отменяет начальную загрузку в браузере. С неверными данными изображения
-отправка недоступна.
-
-При отправке `onSubmit` получает `endpoint: "misc_contact"`, очищенные от
-пробелов значения `full_name`, `email` и `captcha`, сообщение без изменений и
-`AbortSignal`. После подтверждённого запроса показывается сообщение об успехе.
-Кнопка «Ещё» возвращает форму, сохраняет подтверждённые имя и почту и запрашивает
-новое изображение. Отклонённый запрос сохраняет введённые поля и показывает
-сообщения из `fields` ошибки (как их передаёт API-клиент) под полями и вместе в
-уведомлении, а без них — общую локализованную ошибку. Каждая попытка отправки
-расходует ответ CAPTCHA на сервере, поэтому после отказа форма очищает `captcha`
-и запрашивает новое изображение через `onLoadCaptcha`. `error` и `fieldErrors`
-показывают ошибки приложения,
-а `pending` блокирует все действия формы. Размонтирование отменяет активный
-запрос. `onSent(request)` вызывается после подтверждённой отправки.
-
-Поддерживаемый исходный файл:
-`components/orionplace/contact/ContactForm.tsx`; физические интерфейсы запроса и
-проверочного изображения находятся в
-`interfaces/orionplace/accounts/IContact.ts`.
-
-### Свойства
-
-| Свойство                                                                                                                     | Назначение                                                                                                    |
-| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `initialName?: string`                                                                                                       | Начальное значение имени, полученное на сервере для первого рендера и гидратации.                             |
-| `initialEmail?: string`                                                                                                      | Начальное значение email, полученное на сервере для первого рендера и гидратации.                             |
-| `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`                                                                                | Вызывается, когда обращение успешно отправлено. Данные обработчика указаны в его типе.                        |