orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/events/EventEnrollmentDialog.README.md

@@ -1,108 +0,0 @@
-# EventEnrollmentDialog · React
-
-## English
-
-`EventEnrollmentDialog` confirms participation in one Application Load event.
-It displays `image_wide`, then `image`, with a reserved 3:1 area. An event with
-`promo=false` cannot be submitted. `modal=true` uses a native modal dialog,
-locks page scrolling and restores focus when the component unmounts. With
-`modal=false`, the native dialog stays in the page flow and opening it leaves
-focus where it is. Changing `modal` while the dialog is open switches it in
-place, keeps the focused control and lets a running enrollment request finish.
-The close button, and Escape in the modal window, call
-`onClose` while no enrollment or email action is pending.
-
-A guest who selects Participate calls `onRequireSignIn` with the event ID and a
-same-origin `returnPath` that adds `event=<id>` to `currentPath`. The host can
-use that path after sign-in to reopen the same event. A signed-in customer
-without a confirmed email sees
-`ProfileEmailSettings`; `profileState` and `onProfileRequest` retain that
-component's typed contract. Its failed initial load also provides a Retry
-action.
-
-A signed-in customer with a confirmed email calls `onEnroll` with
-`endpoint: "profile_event_subscribe"`, `{ event: event.id }` and an
-`AbortSignal`. A resolved action shows a success panel with the confirmed
-delivery address, prevents repeat submission and calls `onEnrolled(event.id)`.
-The response confirms enrollment and contains no promo code; the backend turns
-the account's email messages on, then creates and emails the code later while
-the event and promo type remain active and the customer does not turn
-promotional messages off. A rejected action preserves the dialog and
-allows retry. `pending` and `error` add host-controlled enrollment state.
-Changing the event aborts an active request and clears the prior result;
-unmounting aborts it as well.
-
-Source is maintained in
-`components/orionplace/events/EventEnrollmentDialog.tsx`; the event interface
-is
-`interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonEvents.ts`, and the
-request field is defined in `interfaces/orionplace/accounts/IProfileMedia.ts`.
-
-### Props
-
-| Prop                                                                                       | Meaning                                                                                             |
-| ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
-| `event: IAppLoadCommonEvents`                                                              | Storefront event the visitor is enrolling in.                                                       |
-| `profileState: IStorefrontProfileState`                                                    | Current customer profile data, loading state and errors.                                            |
-| `modal?: boolean`                                                                          | Uses a native modal dialog when true and an inline panel when false.                                |
-| `currentPath?: string`                                                                     | Current safe storefront path used as the return destination after sign-in.                          |
-| `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.                   |
-| `onEnroll?: (action: EventEnrollmentAction, signal: AbortSignal) => Promise<void> \| void` | Called when the visitor submits event enrollment. The callback payload is shown in its type.        |
-| `onRequireSignIn?: (request: EventSignInRequest) => void`                                  | Called when the visitor must sign in before continuing. The callback payload is shown in its type.  |
-| `onProfileRequest?: (action: IStorefrontProfileAction) => void`                            | Called when the component emits a typed profile request. The callback payload is shown in its type. |
-| `onClose?: () => void`                                                                     | Called when the visitor closes the panel or dialog. The callback has no payload.                    |
-| `onEnrolled?: (eventId: number) => void`                                                   | Called when event enrollment completes successfully. The callback payload is shown in its type.     |
-
-## Русский
-
-`EventEnrollmentDialog` подтверждает участие в выбранной акции из Application
-Load. Компонент сначала использует `image_wide`, затем `image`, и резервирует
-для изображения область 3:1. Акцию с `promo=false` отправить нельзя. При
-`modal=true` используется нативное модальное окно, прокрутка страницы
-блокируется, а после размонтирования фокус возвращается на прежний элемент. При
-`modal=false` нативное окно остаётся в потоке страницы, а при открытии фокус
-остаётся на прежнем месте. Если изменить `modal`, пока окно открыто, оно
-переключается на месте: фокус остаётся на прежнем элементе, а начатый запрос
-участия завершается. Кнопка закрытия, а в модальном окне и Escape,
-вызывают `onClose`, пока не выполняется запрос участия или почты.
-
-Для гостя кнопка участия вызывает `onRequireSignIn` с ID акции и безопасным
-адресом `returnPath` того же сайта, в который добавлен `event=<id>` к
-`currentPath`. После входа приложение может открыть по этому адресу ту же
-акцию. Вошедший покупатель без подтверждённой почты видит `ProfileEmailSettings`; `profileState` и `onProfileRequest` сохраняют
-типизированный контракт этого компонента. При ошибке его начальной загрузки
-доступен повтор.
-
-Для вошедшего покупателя с подтверждённой почтой `onEnroll` получает
-`endpoint: "profile_event_subscribe"`, `{ event: event.id }` и `AbortSignal`.
-Подтверждённое действие показывает оформленный результат с адресом доставки,
-запрещает повторную отправку и вызывает `onEnrolled(event.id)`. Ответ
-подтверждает участие и не содержит промокод; сервер включает письма аккаунта,
-а магазин создаёт код и позже отправляет его письмом, пока событие и тип
-промокода активны, а покупатель не выключил рекламные письма.
-Отклонённое действие сохраняет окно и позволяет повторить запрос. `pending` и
-`error` добавляют состояние участия из приложения. Изменение акции отменяет
-активный запрос и очищает прежний результат; размонтирование также отменяет
-запрос.
-
-Поддерживаемый исходный файл:
-`components/orionplace/events/EventEnrollmentDialog.tsx`; интерфейс акции:
-`interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonEvents.ts`, а поле
-запроса описано в `interfaces/orionplace/accounts/IProfileMedia.ts`.
-
-### Свойства
-
-| Свойство                                                                                   | Назначение                                                                                                   |
-| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
-| `event: IAppLoadCommonEvents`                                                              | Событие магазина, на которое записывается посетитель.                                                        |
-| `profileState: IStorefrontProfileState`                                                    | Текущие данные профиля, загрузка и ошибки.                                                                   |
-| `modal?: boolean`                                                                          | Показывает нативное модальное окно при `true` и встроенную панель при `false`.                               |
-| `currentPath?: string`                                                                     | Текущий безопасный путь магазина для возврата после входа.                                                   |
-| `pending?: boolean`                                                                        | Показывает загрузку и блокирует повторные действия.                                                          |
-| `error?: string`                                                                           | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                         |
-| `onEnroll?: (action: EventEnrollmentAction, signal: AbortSignal) => Promise<void> \| void` | Вызывается, когда покупатель отправляет запись на событие. Данные обработчика указаны в его типе.            |
-| `onRequireSignIn?: (request: EventSignInRequest) => void`                                  | Вызывается, когда покупателю нужно войти перед продолжением. Данные обработчика указаны в его типе.          |
-| `onProfileRequest?: (action: IStorefrontProfileAction) => void`                            | Вызывается, когда компонент отправляет типизированный запрос профиля. Данные обработчика указаны в его типе. |
-| `onClose?: () => void`                                                                     | Вызывается, когда покупатель закрывает панель или диалог. Обработчик не получает данные.                     |
-| `onEnrolled?: (eventId: number) => void`                                                   | Вызывается, когда запись на событие успешно завершена. Данные обработчика указаны в его типе.                |

package/templates/components/orionplace/events/EventEnrollmentDialog.module.css

@@ -1,110 +0,0 @@
-/*
- * The look of Nuxt's and Svelte's event dialog: the shared feature classes
- * (op-feature-stack, op-feature-heading, op-feature-button) and notices.
- */
-.dialog {
-  box-sizing: border-box;
-  width: min(35rem, calc(100% - 2rem));
-  max-height: calc(100dvh - 2rem);
-  margin: auto;
-  padding: 1.5rem;
-  overflow: auto;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  box-shadow: none;
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.dialog::backdrop {
-  background: rgb(0 0 0 / 35%);
-  backdrop-filter: blur(2px);
-}
-
-.dialog:not(:modal) {
-  position: relative;
-  max-height: none;
-}
-
-/* Children stretch to the full width, as in op-feature-stack. */
-.content {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.title {
-  composes: subtitle from '../shared/features.module.css';
-}
-
-.button {
-  composes: button from '../shared/features.module.css';
-}
-
-.primary {
-  composes: primary from '../shared/features.module.css';
-}
-
-.image {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 3 / 1;
-  object-fit: cover;
-  background: var(--orionplace-surface);
-}
-
-.copy {
-  margin: 0;
-  font-weight: 400;
-}
-
-.success {
-  composes: notice noticeSuccess from '../account/account.module.css';
-}
-
-.error {
-  composes: notice noticeError from '../account/account.module.css';
-}
-
-.successCopy {
-  display: grid;
-  min-width: 0;
-  flex: 1;
-  gap: 0.5rem;
-}
-
-.successCopy h3,
-.successCopy p {
-  margin: 0;
-}
-
-.successCopy h3 {
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.successEmail {
-  display: grid;
-  gap: 0.125rem;
-  overflow-wrap: anywhere;
-}
-
-.successEmail span {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  opacity: 0.75;
-}

package/templates/components/orionplace/events/EventEnrollmentDialog.tsx

@@ -1,315 +0,0 @@
-'use client';
-
-import '@/components/orionplace/shared/dialogs.css';
-
-import { useEffect, useId, useRef, useState } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectIsAuthenticated, selectProfile } from '@/stores/orionplace';
-import type { IAppLoadCommonEvents } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonEvents';
-import type { IProfileEventRequest } from '@/interfaces/orionplace/accounts/IProfileMedia';
-import type {
-  IStorefrontProfileAction,
-  IStorefrontProfileState,
-} from '@/interfaces/orionplace/accounts/IStorefrontProfile';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-import { contactLabels } from '@/lib/orionplace/contactLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { eventEnrollmentReturnPath } from '@/lib/orionplace/eventEnrollment';
-import {
-  createPageScrollLock,
-  focusedElement,
-  restoreFocus,
-} from '@/lib/orionplace/modalWindow';
-import { useDialogLayoutEffect } from '@/hooks/useOrionplaceDialog';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import { ProfileEmailSettings } from '@/components/orionplace/account/ProfileEmailSettings';
-import styles from './EventEnrollmentDialog.module.css';
-
-export interface EventEnrollmentAction {
-  endpoint: 'profile_event_subscribe';
-  request: IProfileEventRequest;
-}
-
-export interface EventSignInRequest {
-  eventId: number;
-  returnPath: string;
-}
-
-export interface EventEnrollmentDialogProps {
-  event: IAppLoadCommonEvents;
-  profileState: IStorefrontProfileState;
-  modal?: boolean;
-  currentPath?: string;
-  pending?: boolean;
-  error?: string;
-  onEnroll?: (
-    action: EventEnrollmentAction,
-    signal: AbortSignal,
-  ) => Promise<void> | void;
-  onRequireSignIn?: (request: EventSignInRequest) => void;
-  onProfileRequest?: (action: IStorefrontProfileAction) => void;
-  onClose?: () => void;
-  onEnrolled?: (eventId: number) => void;
-}
-
-export function EventEnrollmentDialog({
-  event,
-  profileState,
-  modal = true,
-  currentPath = '/',
-  pending = false,
-  error = '',
-  onEnroll,
-  onRequireSignIn,
-  onProfileRequest,
-  onClose,
-  onEnrolled,
-}: EventEnrollmentDialogProps) {
-  const authenticated = useOrionplace(selectIsAuthenticated);
-  const profile = useOrionplace(selectProfile);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = contactLabels(locale);
-  const common = featureLabels(locale);
-  const titleId = useId();
-  const dialog = useRef<HTMLDialogElement>(null);
-  const controller = useRef<AbortController>(null);
-  const opener = useRef<HTMLElement | undefined>(undefined);
-  const [pageScroll] = useState(() => createPageScrollLock());
-  const [submitting, setSubmitting] = useState(false);
-  const [localError, setLocalError] = useState('');
-  const [confirmed, setConfirmed] = useState(false);
-  const busy = pending || submitting || Boolean(profileState.pending);
-  // Enrollment needs only a confirmed email: the backend turns email
-  // messages on when the customer enrolls.
-  const needsDeliverySettings = authenticated && !profile?.email;
-
-  // The window opens when it mounts. The element with the focus outside the
-  // window is its opener: a modal window gives it the focus back when it
-  // closes. An open window that switches between the modal and the inline
-  // mode leaves the focus on the control the visitor is on.
-  useDialogLayoutEffect(() => {
-    const element   = dialog.current;
-
-    if (!element) {
-      return;
-    }
-
-    const switching = element.open && pageScroll.locked !== modal;
-    const focused   = focusedElement();
-    const inside    =
-      focused && element.contains(focused) ? focused : undefined;
-
-    if (!inside) {
-      opener.current = focused;
-    }
-    element.close();
-    if (modal) {
-      pageScroll.lock();
-      element.showModal();
-    } else {
-      // The page scrolls again once the window leaves the modal mode.
-      // Opened by its attribute, not show(): an inline dialog leaves focus
-      // where it is.
-      pageScroll.unlock();
-      element.setAttribute('open', '');
-    }
-    if (switching) {
-      restoreFocus(inside, { reveal: true });
-    }
-  }, [modal]);
-
-  // Unmounting cancels the enrollment request and closes the window as a
-  // close does. A switch of `modal` keeps the request running.
-  useDialogLayoutEffect(() => {
-    const element = dialog.current;
-
-    return () => {
-      controller.current?.abort();
-      element?.close();
-      if (pageScroll.locked) {
-        pageScroll.unlock();
-        restoreFocus(opener.current);
-      }
-    };
-  }, [pageScroll]);
-
-  useEffect(() => {
-    controller.current?.abort();
-    controller.current = null;
-    setSubmitting(false);
-    setLocalError('');
-    setConfirmed(false);
-  }, [event.id]);
-
-  function close() {
-    if (!busy) {
-      onClose?.();
-    }
-  }
-
-  async function enroll() {
-    if (!event.promo || confirmed || busy) {
-      return;
-    }
-
-    if (!authenticated) {
-      onRequireSignIn?.({
-        eventId: event.id,
-        returnPath: eventEnrollmentReturnPath(currentPath, event.id),
-      });
-      return;
-    }
-
-    if (!profile?.email || !onEnroll) {
-      return;
-    }
-
-    const active = new AbortController();
-    controller.current = active;
-    setSubmitting(true);
-    setLocalError('');
-    const request = { event: event.id };
-
-    try {
-      await onEnroll(
-        { endpoint: 'profile_event_subscribe', request },
-        active.signal,
-      );
-      if (!active.signal.aborted) {
-        setConfirmed(true);
-        onEnrolled?.(event.id);
-      }
-    } catch (reason) {
-      // The backend's reason, e.g. an offer the customer has already joined.
-      if (!active.signal.aborted) {
-        setLocalError(apiErrorMessage(reason) || common.failed);
-      }
-    } finally {
-      if (controller.current === active) {
-        controller.current = null;
-        setSubmitting(false);
-      }
-    }
-  }
-
-  return (
-    <dialog
-      data-stable-modal="form"
-      ref={dialog}
-      aria-labelledby={titleId}
-      data-feature-part="EventEnrollmentDialog"
-      data-event-id={event.id}
-      className={styles.dialog}
-      onCancel={(cancelEvent) => {
-        cancelEvent.preventDefault();
-        close();
-      }}
-    >
-      <div className={styles.content}>
-        <header className={styles.header}>
-          <h2
-            id={titleId}
-            className={styles.title}
-          >
-            {labels.event}
-          </h2>
-          <button
-            type="button"
-            className={styles.button}
-            aria-label={common.close}
-            disabled={busy}
-            onClick={close}
-          >
-            ×
-          </button>
-        </header>
-
-        {event.image || event.image_wide ? (
-          <OrionplaceImage
-            src={event.image_wide || event.image}
-            alt={labels.event}
-            width={3}
-            height={1}
-            className={styles.image}
-          />
-        ) : null}
-
-        {confirmed ? (
-          <section
-            className={styles.success}
-            role="status"
-          >
-            <div className={styles.successCopy}>
-              <h3>{labels.eventDoneTitle}</h3>
-              <p>{labels.eventDone}</p>
-              {profile?.email ? (
-                <p className={styles.successEmail}>
-                  <span>{labels.eventDoneAddress}</span>
-                  <strong>{profile.email}</strong>
-                </p>
-              ) : null}
-            </div>
-          </section>
-        ) : (
-          <>
-            <p className={styles.copy}>{labels.eventDescription}</p>
-            {needsDeliverySettings ? (
-              <>
-                <p className={styles.copy}>{labels.eventEmail}</p>
-                <ProfileEmailSettings
-                  state={profileState}
-                  onRequest={onProfileRequest}
-                />
-              </>
-            ) : (
-              <button
-                type="button"
-                className={styles.primary}
-                disabled={
-                  busy ||
-                  !event.promo ||
-                  (authenticated ? !onEnroll : !onRequireSignIn)
-                }
-                onClick={() => void enroll()}
-              >
-                {busy ? common.loading : labels.eventJoin}
-              </button>
-            )}
-          </>
-        )}
-
-        {error || localError ? (
-          <p
-            className={styles.error}
-            role="alert"
-          >
-            {error || localError}
-          </p>
-        ) : null}
-
-        {authenticated && profileState.error ? (
-          <p
-            className={styles.error}
-            role="alert"
-          >
-            {profileState.error}
-          </p>
-        ) : null}
-
-        {authenticated && !profileState.loaded && profileState.error ? (
-          <button
-            type="button"
-            className={styles.button}
-            disabled={busy}
-            onClick={() => onProfileRequest?.({ action: 'load' })}
-          >
-            {common.retry}
-          </button>
-        ) : null}
-      </div>
-    </dialog>
-  );
-}

package/templates/components/orionplace/events/EventsBlock.README.md

@@ -1,58 +0,0 @@
-# EventsBlock
-
-## English
-
-`EventsBlock` displays the Application Load events whose `locale` matches the
-current storefront language and whose `is_layout` is not `false`. It preserves
-their response order and shows one event at a time. Events from another language
-are not substituted.
-
-`format="auto"` follows the browser width after hydration. An explicit mobile,
-tablet, wide, desktop or account format stays fixed. If the selected image is
-missing or invalid, the component checks the event's desktop, wide, tablet,
-mobile and account images in that order. The shared placeholder appears when no
-public image is available. A loaded picture keeps its own shape, so nothing is
-cut off; the placeholder takes 4:3, or 3:1 from 592px of the block's width.
-
-Several events add a counter and previous and next buttons. They wrap around and
-never advance on a timer. Changing the language, format or Application Load data
-returns to the first event. Clicking the event calls `onSelect(event)` with the
-complete event object. Enrollment, authentication and modal behavior remain the
-application's responsibility.
-
-### Props
-
-| Prop                                               | Meaning                                                                                                  |
-| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `label?: string`                                   | Visible or accessible name for the component’s main control or region.                                   |
-| `format?: "auto" \| TEventsFormat`                 | Image format selected for the current viewport.                                                          |
-| `onSelect?: (event: IAppLoadCommonEvents) => void` | Passes the complete event object when it is pressed. The application handles event details, sign-in and enrollment. |
-
-## Русский
-
-`EventsBlock` показывает события из Application Load, у которых `locale`
-совпадает с текущим языком магазина, а `is_layout` не равен `false`. Порядок из
-ответа сохраняется, одновременно видно одно событие. События другого языка не
-подставляются.
-
-При `format="auto"` после гидратации формат следует за шириной окна. Явно
-переданный мобильный, планшетный, широкий, настольный или кабинетный формат не
-меняется. Если выбранного изображения нет или его адрес недопустим, компонент
-по очереди проверяет настольное, широкое, планшетное, мобильное и кабинетное
-изображения события. Если доступного изображения нет, появляется общая
-заглушка. Загруженное изображение сохраняет свою форму и не обрезается; заглушка
-имеет форму 4:3, а от 592px ширины блока — 3:1.
-
-Для нескольких событий показываются счётчик и кнопки назад и вперёд. Они
-перебирают события по кругу без автоматического переключения. Смена языка,
-формата или данных Application Load возвращает к первому событию. Нажатие на
-событие вызывает `onSelect(event)` с полным объектом события. Запись на акцию,
-аутентификация и модальное окно остаются задачей приложения.
-
-### Свойства
-
-| Свойство                                           | Назначение                                                                                                |
-| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `label?: string`                                   | Видимое или доступное название основного элемента компонента.                                             |
-| `format?: "auto" \| TEventsFormat`                 | Формат изображения, выбранный для текущей ширины экрана.                                                  |
-| `onSelect?: (event: IAppLoadCommonEvents) => void` | Передаёт полный объект события при нажатии на него. Приложение обрабатывает открытие сведений, вход и запись на событие. |