orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,216 @@
+.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

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

@@ -0,0 +1,93 @@
+# 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`                                                                                | Вызывается, когда обращение успешно отправлено. Данные обработчика указаны в его типе.                        |