orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,94 @@
+.root {
+  display: grid;
+  box-sizing: border-box;
+  width: min(100%, 36rem);
+  gap: 1.25rem;
+  margin: 0 auto;
+  /*
+   * 2rem once the column around the panel is 592px wide (a padding
+   * percentage is a share of that column), so a narrow preview frame and a
+   * wide page show the same panel.
+   */
+  padding: clamp(1.25rem, calc((100% - 591px) * 1000), 2rem);
+  border: 1px solid var(--orionplace-border);
+  color: var(--orionplace-text);
+  background: var(--orionplace-surface);
+  font: inherit;
+  container-type: inline-size;
+}
+
+.root h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.15;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.description,
+.success,
+.error {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.success,
+.error {
+  padding: 0.875rem 1rem;
+  border: 1px solid;
+}
+
+.success {
+  border-color: var(--orionplace-success);
+  color: var(--orionplace-success);
+}
+
+.error {
+  border-color: var(--orionplace-danger);
+  color: var(--orionplace-danger);
+}
+
+.root button {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: fit-content;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.25rem;
+  border: 1px solid var(--orionplace-accent);
+  border-radius: 0;
+  color: var(--orionplace-surface);
+  background: var(--orionplace-accent);
+  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 {
+  opacity: 0.85;
+  outline: none;
+}
+
+@media (hover: hover) {
+  .root button:hover {
+    opacity: 0.85;
+    outline: none;
+  }
+}
+
+.root button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* The title follows the component's own width, as in the other packages. */
+@container (min-width: 592px) {
+  .root h1 { font-size: 1.875rem; }
+}

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

@@ -0,0 +1,130 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { IUnsubscribeRequest } from '@/interfaces/orionplace/accounts/IContact';
+import { contactLabels } from '@/lib/orionplace/contactLabels';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { unsubscribeRequest } from '@/lib/orionplace/contact';
+import { apiErrorMessage } from '@/lib/orionplace/api';
+import styles from './EmailUnsubscribe.module.css';
+
+export interface EmailUnsubscribeAction {
+  endpoint: 'misc_unsubscribe';
+  request: IUnsubscribeRequest;
+}
+
+export interface EmailUnsubscribeProps {
+  token: string;
+  kind: string;
+  pending?: boolean;
+  error?: string;
+  onSubmit?: (
+    action: EmailUnsubscribeAction,
+    signal: AbortSignal,
+  ) => Promise<void> | void;
+  onDone?: (request: IUnsubscribeRequest) => void;
+}
+
+export function EmailUnsubscribe({
+  token,
+  kind,
+  pending = false,
+  error = '',
+  onSubmit,
+  onDone,
+}: EmailUnsubscribeProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = contactLabels(locale);
+  const common = featureLabels(locale);
+  const request = unsubscribeRequest(token, kind);
+  const controller = useRef<AbortController>(null);
+  const [ready, setReady] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [localError, setLocalError] = useState('');
+  const [done, setDone] = useState(false);
+  const busy = pending || submitting;
+
+  useEffect(() => {
+    setReady(true);
+    return () => controller.current?.abort();
+  }, []);
+
+  useEffect(() => {
+    controller.current?.abort();
+    controller.current = null;
+    setSubmitting(false);
+    setLocalError('');
+    setDone(false);
+  }, [token, kind]);
+
+  async function submit() {
+    if (!ready || busy || done || !request || !onSubmit) {
+      return;
+    }
+
+    const active = new AbortController();
+    controller.current = active;
+    setSubmitting(true);
+    setLocalError('');
+
+    try {
+      await onSubmit(
+        { endpoint: 'misc_unsubscribe', request },
+        active.signal,
+      );
+      if (!active.signal.aborted) {
+        setDone(true);
+        onDone?.(request);
+      }
+    } catch (reason) {
+      // The backend's own reason (an unknown or used link) as in the other
+      // packages; the generic text only when it gave none.
+      if (!active.signal.aborted) {
+        setLocalError(apiErrorMessage(reason) || common.failed);
+      }
+    } finally {
+      if (controller.current === active) {
+        controller.current = null;
+        setSubmitting(false);
+      }
+    }
+  }
+
+  return (
+    <section className={styles.root} data-feature-part="EmailUnsubscribe">
+      <h1>{labels.unsubscribe}</h1>
+
+      {done ? (
+        <p className={styles.success} role="status">
+          {labels.unsubscribeDone}
+        </p>
+      ) : !request ? (
+        <p className={styles.error} role="alert">
+          {labels.invalidLink}
+        </p>
+      ) : (
+        <>
+          <p className={styles.description}>
+            {request.unsubcribe_type === 'products'
+              ? labels.products
+              : labels.newsletter}
+          </p>
+          <button
+            type="button"
+            disabled={!ready || busy || !onSubmit}
+            onClick={() => void submit()}
+          >
+            {busy ? common.loading : labels.unsubscribeAction}
+          </button>
+        </>
+      )}
+
+      {!done && (error || localError) ? (
+        <p className={styles.error} role="alert">
+          {error || localError}
+        </p>
+      ) : null}
+    </section>
+  );
+}

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

@@ -0,0 +1,73 @@
+# StorefrontContact · React
+
+## English
+
+`StorefrontContact` is the complete contact-page composition. It displays the
+localized page heading and combines company details, safe social links and
+`ContactForm`. Company details come from Application Load `init.contact`.
+`SocialLinks` includes only entries with valid public HTTP(S) addresses.
+
+When company or social data is available, the page shows it beside the form in
+a wide container and above the form in a narrow container. When both sources
+are empty, the details section is omitted and the form keeps a readable maximum
+width. All `ContactForm` properties are accepted unchanged, including the exact
+captcha and submission action callbacks, server captcha image, pending state
+and errors.
+
+The complete available company and social text is present in guest server HTML.
+Captcha loading and clipboard controls start only after hydration. Source is
+maintained in `components/orionplace/contact/StorefrontContact.tsx`; its direct
+maintained children are `AboutPage.tsx`, `ContactForm.tsx` and
+`components/orionplace/social/SocialLinks.tsx`.
+
+### Props
+
+| Prop                                                                                                                         | Meaning                                                                                                |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `className?: string`                                                                                                         | Additional CSS class for the component root.                                                           |
+| `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. |
+
+## Русский
+
+`StorefrontContact` — полная композиция страницы контактов. Компонент показывает
+локализованный заголовок страницы и объединяет реквизиты компании, безопасные
+ссылки на соцсети и `ContactForm`. Реквизиты берутся из `init.contact` ответа
+Application Load. `SocialLinks` включает только записи с допустимыми
+общедоступными адресами HTTP(S).
+
+Если есть реквизиты компании или соцсети, в широком контейнере они расположены
+рядом с формой, а в узком — над ней. Если оба источника пусты, раздел реквизитов
+скрыт, а форма сохраняет удобную максимальную ширину. Все свойства
+`ContactForm` передаются без изменений, включая точные обработчики загрузки
+проверочного изображения и отправки, серверное изображение, состояние ожидания
+и ошибки.
+
+Весь доступный текст компании и соцсетей входит в гостевой серверный HTML.
+Загрузка проверочного изображения и кнопки копирования начинают работать только
+после гидратации. Поддерживаемый исходный файл:
+`components/orionplace/contact/StorefrontContact.tsx`; его прямые поддерживаемые
+дочерние компоненты — `AboutPage.tsx`, `ContactForm.tsx` и
+`components/orionplace/social/SocialLinks.tsx`.
+
+### Свойства
+
+| Свойство                                                                                                                     | Назначение                                                                                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `className?: string`                                                                                                         | Дополнительный CSS-класс корневого элемента.                                                                  |
+| `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`                                                                                | Вызывается, когда обращение успешно отправлено. Данные обработчика указаны в его типе.                        |

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

@@ -0,0 +1,101 @@
+.root {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  color: var(--orionplace-text);
+  font: inherit;
+  /* The page's base text, as `op-feature` in the other packages. */
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  container-type: inline-size;
+}
+
+.header {
+  display: grid;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.25;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.header p {
+  max-width: 42rem;
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.layout,
+.details,
+.social {
+  display: grid;
+  min-width: 0;
+}
+
+.layout {
+  align-items: start;
+  gap: 2.5rem;
+}
+
+.details {
+  gap: 1.5rem;
+}
+
+.details > h2 {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.social {
+  gap: 0.75rem;
+}
+
+.social 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;
+}
+
+.formOnly {
+  width: min(100%, 42rem);
+}
+
+/* The page's own gap still follows the screen (a container cannot query
+   itself); everything inside follows the page, as in the other packages. */
+/* The header's margin spaces the page, so it follows the page's own width. */
+@container (min-width: 592px) {
+  .header {
+    margin-bottom: 3rem;
+    padding-bottom: 2rem;
+  }
+}
+
+@container (min-width: 960px) {
+  .withDetails {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    gap: 4rem;
+  }
+}
+
+/* The title follows the component's own width, as in the other packages. */
+@container (min-width: 592px) {
+  .header h1 { font-size: 1.875rem; }
+}

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { useOrionplace, useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import { contactLabels } from '@/lib/orionplace/contactLabels';
+import { safePublicUrl } from '@/lib/orionplace/presentation';
+import { SocialLinks } from '@/components/orionplace/social/SocialLinks';
+import { AboutPage } from './AboutPage';
+import { ContactForm, type ContactFormProps } from './ContactForm';
+import styles from './StorefrontContact.module.css';
+
+export interface StorefrontContactProps extends ContactFormProps {
+  className?: string;
+}
+
+export function StorefrontContact({
+  className = '',
+  ...contactFormProps
+}: StorefrontContactProps) {
+  const init = useOrionplace(selectInit);
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = contactLabels(locale);
+  const hasContact = Object.values(init?.contact ?? {}).some((value) =>
+    String(value ?? '').trim(),
+  );
+  const hasSocial = (init?.sm ?? []).some((item) => safePublicUrl(item.link));
+  const hasDetails = hasContact || hasSocial;
+
+  return (
+    <section
+      data-feature-part="StorefrontContact"
+      className={`${styles.root} ${className}`.trim()}
+    >
+      <header className={styles.header}>
+        <h1>{labels.pageTitle}</h1>
+        <p>{labels.intro}</p>
+      </header>
+
+      <div className={`${styles.layout} ${hasDetails ? styles.withDetails : ''}`.trim()}>
+        {hasDetails ? (
+          <section
+            aria-labelledby="orionplace-contact-details"
+            className={styles.details}
+          >
+            <h2 id="orionplace-contact-details">{labels.company}</h2>
+            {hasContact ? <AboutPage /> : null}
+            {hasSocial ? (
+              <div className={styles.social}>
+                <h3>{labels.social}</h3>
+                <SocialLinks />
+              </div>
+            ) : null}
+          </section>
+        ) : null}
+
+        <div className={hasDetails ? '' : styles.formOnly}>
+          <ContactForm {...contactFormProps} />
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/components/orionplace/currencies/MainCurrencySwitcher.README.md

@@ -0,0 +1,37 @@
+# MainCurrencySwitcher
+
+## English
+
+Shows the currencies from Application Load that have `allowed_select: true`.
+Each option shows the currency code and its name in the selected language,
+with the configured `symbol_left` and `symbol_right`. Choosing another
+currency updates only the current currency ID and calls `onChange(currency)`
+with its complete object. Choosing the already selected currency calls
+nothing. Without selectable currencies the control is disabled.
+
+### Props
+
+| Prop                                                    | Meaning                                                                                  |
+| ------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `label?: string`                                        | Name of the control; visible unless `codeOnly` is set, then available to assistive technology only. |
+| `disabled?: boolean`                                    | Disables currency selection.                                           |
+| `codeOnly?: boolean`                                    | Compact control: when closed, shows only the code with the configured symbols. |
+| `onChange?: (currency: IAppLoadCommonCurrency) => void` | Receives the selected currency object after `currencyId` changes. The language and the selected weight and length units are preserved. |
+
+## Русский
+
+Показывает валюты из ответа Загрузки приложения с `allowed_select: true`.
+Каждый вариант содержит код валюты и её название на выбранном языке,
+с заданными `symbol_left` и `symbol_right`. Выбор другой валюты меняет
+только ID текущей валюты и вызывает `onChange(currency)` с полным объектом
+валюты. Повторный выбор уже выбранной валюты ничего не вызывает. Если
+доступных валют нет, поле заблокировано.
+
+### Свойства
+
+| Свойство                                                | Назначение                                                                                       |
+| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `label?: string`                                        | Название поля; видно, если не задан `codeOnly`, иначе доступно только вспомогательным технологиям. |
+| `disabled?: boolean`                                    | Блокирует выбор валюты.                                                    |
+| `codeOnly?: boolean`                                    | Компактное поле: в закрытом виде показывает только код с заданными символами. |
+| `onChange?: (currency: IAppLoadCommonCurrency) => void` | Получает объект выбранной валюты после изменения `currencyId`. Язык и выбранные единицы веса и длины сохраняются. |

package/templates/components/orionplace/currencies/MainCurrencySwitcher.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import {
+  useOrionplaceSelections,
+  useOrionplaceSelectionsStore,
+} from '@/providers/OrionplaceProvider';
+import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
+import { currencyLabel } from '@/lib/orionplace/currency';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import type { IAppLoadCommonCurrency } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonCurrency';
+
+export interface MainCurrencySwitcherProps {
+  label?: string;
+  disabled?: boolean;
+  codeOnly?: boolean;
+  onChange?: (currency: IAppLoadCommonCurrency) => void;
+}
+
+export function MainCurrencySwitcher({
+  label = 'Currency',
+  disabled = false,
+  codeOnly = false,
+  onChange,
+}: MainCurrencySwitcherProps) {
+  const selections   = useOrionplaceSelections((state) => state);
+  const store        = useOrionplaceSelectionsStore();
+  const currencies   = selections.init?.currencies ?? {};
+  const options      = Object.fromEntries(
+    Object.entries(currencies)
+      .filter(([, currency]) => currency.allowed_select)
+      .map(([id, currency]) => {
+        const title = getAvailableNestedValueFromObject(
+          currency.locales,
+          selections.localeCode,
+          'currency_title',
+        );
+
+        return [id, currencyLabel(currency, title)];
+      }),
+  );
+
+  // The compact control shows only the symbols or code of the selection.
+  const displayValue = codeOnly
+    ? currencyLabel(currencies[selections.currencyId])
+    : undefined;
+
+  function selectCurrency(id: string) {
+    const currency = currencies[id];
+
+    if (currency?.allowed_select) {
+      onChange?.(currency);
+    }
+  }
+
+  return (
+    <OrionplaceSelect
+      value={selections.currencyId}
+      onValueChange={(id) => store.getState().setCurrency(id)}
+      onChange={selectCurrency}
+      options={options}
+      label={label}
+      compact={codeOnly}
+      borderless
+      displayValue={displayValue}
+      disabled={disabled}
+    />
+  );
+}