orionplace-react 0.7.7 → 0.8.0

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

@@ -1,95 +0,0 @@
-.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;
-  /* Full panel width, as the Nuxt and Svelte panels stretch it. */
-  width: 100%;
-  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

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

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

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

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

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

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