orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/account/AccountPromocodes.README.md

@@ -0,0 +1,70 @@
+# AccountPromocodes
+
+## English
+
+`AccountPromocodes` shows promo codes issued to the signed-in customer. On
+mount, retry and page selection it calls `onLoad` with an
+`IPromoIssuesRequest`. Each entry shows the discount and its maximum
+(`maximum_discount`), covered products, categories or sellers, the minimum order
+(`minimum_order_amount`: what the covered products must cost together;
+a dollar amount, shown as “$ 544 ≈ 40 256 ₽” in another currency and “$ 544” in dollars), a
+first-purchase-only rule (`first_order_only`), use with already discounted
+items, valid dates and remaining uses. Monetary values use the currently selected
+currency and its configured symbols.
+
+Only a currently usable code shows Apply. That button calls `onApply` with
+`{ promocode: code.code_value }` and the selected `IPromoIssue`; the host applies
+the code and refreshes the list after confirmation; a refusal goes to `error`
+with `errorCode` set to that code's ID, and the card shows it under its
+buttons. Applied, inactive, expired and not-yet-started codes (a scheduled
+offer stays inactive until its start day) show their specific status. Real locale-preserving
+links open the cart and the products covered by each offer.
+
+### Props
+
+| Prop                                                                | Meaning                                                                                       |
+| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `codes?: readonly IPromoIssue[]`                                    | Promotion codes returned for the customer account.                                            |
+| `pagination?: Partial<IApiPagination>`                              | Current API pagination values.                                                                |
+| `loaded?: boolean`                                                  | Distinguishes a confirmed empty result from data that has not loaded yet.                     |
+| `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.             |
+| `errorCode?: number`                                                | ID of the code whose Apply was refused: `error` shows in that card. Without it `error` belongs to loading the list and shows above it with Retry. |
+| `onLoad?: (request: IPromoIssuesRequest) => void`                   | Passes page parameters in `paginate` on opening, retry and promo-code page changes. The application loads issued codes and supplies the data, `pending`, `loaded` and error. |
+| `onApply?: (request: ICartPromoRequest, code: IPromoIssue) => void` | Selecting an eligible code passes two arguments: a request with `promocode: code.code_value` and the issued-code object. The application applies the code and updates the cart. |
+| `headingLevel?: "h1" \| "h2"`                                     | Heading element for the section title: `h1` on the standalone promo codes page or `h2` inside My activity. Defaults to `h2`. |
+
+## Русский
+
+`AccountPromocodes` показывает промокоды, выданные вошедшему покупателю. После
+монтирования, при повторе и выборе страницы компонент вызывает `onLoad` со
+значением `IPromoIssuesRequest`. Для каждого промокода выводятся скидка,
+максимальная скидка (`maximum_discount`), подходящие товары, категории или
+продавцы, минимальная сумма заказа (`minimum_order_amount`: сколько должны стоить вместе
+товары, на которые действует код; сумма в долларах: «$ 544 ≈ 40 256 ₽» в другой валюте и «$ 544» в долларах), правило
+«только для первой покупки» (`first_order_only`), совместимость с уже уценёнными товарами, срок действия и
+оставшиеся применения.
+Денежные значения используют выбранную валюту и настроенные для неё символы.
+
+Кнопка применения есть только у доступного сейчас промокода. Она вызывает
+`onApply` со значением `{ promocode: code.code_value }` и выбранным
+`IPromoIssue`; родитель применяет код и после подтверждения обновляет список;
+отказ передаётся в `error`, а `errorCode` получает ID этого кода, и карточка
+показывает отказ под своими кнопками. Для применённого, отключённого, истёкшего
+и ещё не начавшего действовать кода (запланированная акция неактивна до дня
+старта) выводится отдельный статус. Настоящие ссылки с выбранным языком открывают
+корзину и товары соответствующей акции.
+
+### Свойства
+
+| Свойство                                                            | Назначение                                                                                        |
+| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `codes?: readonly IPromoIssue[]`                                    | Промокоды, полученные для аккаунта покупателя.                                                    |
+| `pagination?: Partial<IApiPagination>`                              | Текущие данные пагинации API.                                                                     |
+| `loaded?: boolean`                                                  | Отличает подтверждённый пустой результат от ещё не загруженных данных.                            |
+| `pending?: boolean`                                                 | Показывает загрузку и блокирует повторные действия.                                               |
+| `error?: string`                                                    | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.              |
+| `errorCode?: number`                                                | ID кода, применение которого отклонено: `error` выводится в его карточке. Без него `error` относится к загрузке списка и выводится над ним с повтором. |
+| `onLoad?: (request: IPromoIssuesRequest) => void`                   | Передаёт параметры страницы в `paginate` при открытии, повторной загрузке и смене страницы промокодов. Приложение загружает выданные коды и передаёт данные, `pending`, `loaded` и ошибку. |
+| `onApply?: (request: ICartPromoRequest, code: IPromoIssue) => void` | При выборе доступного кода передаёт два аргумента: запрос с `promocode: code.code_value` и объект выданного кода. Приложение применяет код и обновляет корзину. |
+| `headingLevel?: "h1" \| "h2"`                                     | Элемент заголовка раздела: `h1` на отдельной странице промокодов или `h2` внутри раздела «Моя активность». По умолчанию `h2`. |

package/templates/components/orionplace/account/AccountPromocodes.module.css

@@ -0,0 +1,92 @@
+.section {
+  composes: feature featureStack account from './account.module.css';
+  container-type: inline-size;
+}
+
+.heading {
+  composes: featureHeading from './account.module.css';
+}
+
+.title {
+  composes: featureTitle from './account.module.css';
+}
+
+.subtitle {
+  composes: featureSubtitle from './account.module.css';
+}
+
+.link {
+  composes: featureLink from './account.module.css';
+}
+
+.button {
+  composes: featureButton from './account.module.css';
+}
+
+.error {
+  composes: notice noticeError from './account.module.css';
+}
+
+.entries {
+  composes: entryList from './account.module.css';
+}
+
+.entry {
+  composes: entry from './account.module.css';
+}
+
+.entryHeader {
+  composes: entryHead from './account.module.css';
+}
+
+.icon {
+  composes: entryIcon from './account.module.css';
+}
+
+.code {
+  composes: entryTitle from './account.module.css';
+}
+
+.name {
+  composes: entrySubtitle from './account.module.css';
+}
+
+.state {
+  composes: entryState from './account.module.css';
+}
+
+.conditions {
+  composes: entryFacts from './account.module.css';
+}
+
+.condition {
+  composes: entryFact from './account.module.css';
+}
+
+.term {
+  composes: entryTerm from './account.module.css';
+}
+
+.value {
+  composes: entryValue from './account.module.css';
+}
+
+.actions {
+  composes: entryActions from './account.module.css';
+}
+
+/* A refused Apply, shown in the card whose button was pressed. */
+.entryError {
+  composes: notice noticeError entryNotice from './account.module.css';
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/templates/components/orionplace/account/AccountPromocodes.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type {
+  ICartPromoRequest,
+  IPromoIssue,
+  IPromoIssuesRequest,
+} from '@/interfaces/orionplace/marketing/IPromoActions';
+import { activityLabels } from '@/lib/orionplace/activityLabels';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { promoLabels } from '@/lib/orionplace/promoLabels';
+import {
+  promoConditions,
+  promoIconPaths,
+  promoName,
+  promoState,
+} from '@/lib/orionplace/promoPresentation';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
+import styles from './AccountPromocodes.module.css';
+
+export interface AccountPromocodesProps {
+  codes?: readonly IPromoIssue[];
+  pagination?: Partial<IApiPagination>;
+  loaded?: boolean;
+  pending?: boolean;
+  error?: string;
+  /**
+   * The code whose Apply was refused: its card shows `error` beside the
+   * button, where a phone shows it. Without it the list failed to load and
+   * the error stands above the list with Retry.
+   */
+  errorCode?: number;
+  onLoad?: (request: IPromoIssuesRequest) => void;
+  onApply?: (request: ICartPromoRequest, code: IPromoIssue) => void;
+  /** `h1` when the codes are a page of their own, `h2` inside My activity. */
+  headingLevel?: 'h1' | 'h2';
+}
+
+export function AccountPromocodes({
+  codes = [],
+  pagination = {},
+  loaded = false,
+  pending = false,
+  error = '',
+  errorCode,
+  onLoad,
+  onApply,
+  headingLevel = 'h2',
+}: AccountPromocodesProps) {
+  const Heading     = headingLevel;
+  const selections  = useOrionplaceSelections((value) => value);
+  const labels      = activityLabels(selections.localeCode);
+  const common      = featureLabels(selections.localeCode);
+  const promoCopy   = promoLabels(selections.localeCode);
+  const requested   = useRef(false);
+  const currency    = selections.init?.currencies[selections.currencyId];
+  const localeQuery = encodeURIComponent(selections.localeCode);
+
+  function load(page = 1) {
+    onLoad?.({ paginate: { page, pp_items: 10 } });
+  }
+
+  useEffect(() => {
+    if (!requested.current) {
+      requested.current = true;
+      load();
+    }
+    return () => {
+      requested.current = false;
+    };
+  }, []);
+
+  function badge(code: IPromoIssue) {
+    const key = promoState(code);
+    if (key === 'applied') {
+      return { key, tone: 'success', text: labels.applied };
+    }
+    if (key === 'notStarted') {
+      const start = code.promo_type?.date_start?.date ?? '';
+      return {
+        key,
+        tone: 'neutral',
+        text: `${labels.notStarted} ${start}`.trim(),
+      };
+    }
+    if (key === 'expired') {
+      return { key, tone: 'danger', text: labels.expired };
+    }
+    if (key === 'unavailable') {
+      return { key, tone: 'danger', text: labels.unavailable };
+    }
+    return { key, tone: 'neutral', text: '' };
+  }
+
+  return (
+    <section
+      className={styles.section}
+      data-feature-part="AccountPromocodes"
+    >
+      <div className={styles.heading}>
+        <Heading
+          className={headingLevel === 'h1' ? styles.title : styles.subtitle}
+        >
+          {labels.promocodes}
+        </Heading>
+        <a
+          className={styles.link}
+          href={`/cart?locale=${localeQuery}`}
+        >
+          {labels.cart} →
+        </a>
+      </div>
+      {error && errorCode === undefined ? (
+        <div
+          role="alert"
+          className={styles.error}
+        >
+          <span>{error}</span>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={pending}
+            onClick={() => load()}
+          >
+            {common.retry}
+          </button>
+        </div>
+      ) : null}
+      {pending ? (
+        <p
+          className="op-feature-loading"
+          role="status"
+        >
+          <span className={styles.srOnly}>{common.loading}</span>
+        </p>
+      ) : null}
+      {codes.length ? (
+        <ul className={styles.entries}>
+          {codes.map((code) => {
+            const state      = badge(code);
+            const conditions = promoConditions(
+              code,
+              selections.localeCode,
+              selections.currencyId,
+              currency,
+              promoCopy,
+              selections.init?.currencies,
+            );
+            return (
+              <li
+                key={code.id}
+                className={styles.entry}
+                data-promo-code={code.id}
+              >
+                <div className={styles.entryHeader}>
+                  <svg
+                    className={styles.icon}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d={promoIconPaths.ticket} />
+                  </svg>
+                  <span className={styles.code}>{code.code_value}</span>
+                  <span className={styles.name}>
+                    {promoName(code.promo_type, selections.localeCode)}
+                  </span>
+                  {state.text ? (
+                    <span
+                      className={styles.state}
+                      data-tone={state.tone}
+                      role="status"
+                    >
+                      {state.text}
+                    </span>
+                  ) : null}
+                </div>
+                <dl className={styles.conditions}>
+                  {conditions.map((row) => (
+                    <div
+                      className={styles.condition}
+                      key={row.key}
+                      data-promo-condition={row.key}
+                    >
+                      <svg
+                        className={styles.icon}
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                      >
+                        <path d={promoIconPaths[row.icon]} />
+                      </svg>
+                      <dt className={styles.term}>{row.label}</dt>
+                      <dd className={styles.value}>{row.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+                <div className={styles.actions}>
+                  {state.key === 'usable' ? (
+                    <button
+                      className={styles.button}
+                      type="button"
+                      disabled={pending}
+                      onClick={() =>
+                        onApply?.({ promocode: code.code_value }, code)
+                      }
+                    >
+                      {labels.apply}
+                    </button>
+                  ) : null}
+                  {code.promo_type ? (
+                    <a
+                      className={styles.link}
+                      href={`/promo/${code.promo_type.id}?code=${encodeURIComponent(code.code_value)}&locale=${localeQuery}`}
+                      data-promo-products={code.promo_type.id}
+                    >
+                      {promoCopy.openProducts} →
+                    </a>
+                  ) : null}
+                </div>
+                {error && errorCode === code.id ? (
+                  <p
+                    role="alert"
+                    className={styles.entryError}
+                  >
+                    {error}
+                  </p>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      ) : loaded && !pending ? (
+        <OrionplaceEmptyState
+          kind="promocodes"
+          message={labels.promosEmpty}
+        />
+      ) : null}
+      <StorefrontPagination
+        pagination={pagination}
+        pending={pending}
+        onChange={load}
+      />
+    </section>
+  );
+}

package/templates/components/orionplace/account/AccountSection.README.md

@@ -0,0 +1,46 @@
+# AccountSection
+
+## English
+
+`AccountSection` provides the shared account-page navigation and content area.
+For an authenticated Application Load session, it renders locale-preserving
+links to Profile, Addresses, Orders, Support, Wallet, Subscriptions, Wishlist,
+Activity and Logout. `section` marks the matching destination as the current
+page, and `children` contains that page's physical component.
+
+If Application Load fails, the component shows the localized storefront failure
+state and Retry calls `onRetry`. A successful guest session shows the localized
+account sign-in explanation. The component does not redirect or open an
+authentication dialog; the storefront route guard and header own those actions.
+No account content is rendered while Application Load is still idle or pending.
+
+### Props
+
+| Prop                   | Meaning                                                                          |
+| ---------------------- | -------------------------------------------------------------------------------- |
+| `section: string`      | Active account navigation key, such as `wallet`; marks that link as current.     |
+| `children?: ReactNode` | React content rendered inside the component.                                     |
+| `onRetry?: () => void` | Called when the visitor retries the failed request. The callback has no payload. |
+
+## Русский
+
+`AccountSection` выводит общую навигацию страниц личного кабинета и область
+содержимого. Для вошедшего покупателя компонент создаёт ссылки с выбранным
+языком на профиль, адреса, заказы, поддержку, кошелёк, подписки, избранное,
+активность и выход. `section` отмечает соответствующую ссылку как текущую, а
+`children` содержит физический компонент страницы.
+
+Если Application Load завершился ошибкой, компонент показывает локализованное
+состояние ошибки магазина, а кнопка «Повторить» вызывает `onRetry`. Успешная
+гостевая сессия показывает объяснение о необходимости входа. Компонент сам не
+перенаправляет покупателя и не открывает окно входа: это делают защита маршрута
+и шапка магазина. Пока Application Load ещё не начался или выполняется, содержимое
+аккаунта не выводится.
+
+### Свойства
+
+| Свойство               | Назначение                                                                              |
+| ---------------------- | --------------------------------------------------------------------------------------- |
+| `section: string`      | Ключ активного раздела навигации аккаунта, например `wallet`; отмечает ссылку текущей.  |
+| `children?: ReactNode` | React-содержимое внутри компонента.                                                     |
+| `onRetry?: () => void` | Вызывается, когда покупатель повторяет неудачный запрос. Обработчик не получает данные. |

package/templates/components/orionplace/account/AccountSection.module.css

@@ -0,0 +1,110 @@
+/* The page frame follows its own width: a size container around <main>,
+   so the docs tabs and every placement show the same padding and menu. */
+.page {
+  container: page / inline-size;
+  width: 100%;
+  min-width: 0;
+}
+.section {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  width: 100%;
+  min-width: 0;
+  max-width: 1440px;
+  margin: 0 auto;
+  align-items: start;
+  gap: 32px;
+  padding: 40px 16px;
+  color: var(--orionplace-text);
+  font-size: 14px;
+  line-height: 24px;
+}
+.navigation {
+  display: flex;
+  min-width: 0;
+  gap: 24px;
+  overflow-x: auto;
+  border: 0;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+.navigationLink {
+  display: block;
+  flex-shrink: 0;
+  margin-bottom: -1px;
+  padding: 12px 0;
+  border: 0;
+  border-color: transparent;
+  border-bottom: 2px solid transparent;
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+  outline: none;
+  transition: color 150ms, border-color 150ms;
+}
+.navigationLink:focus-visible,
+.navigationLink[aria-current='page'] {
+  color: var(--orionplace-text);
+}
+@media (hover: hover) {
+  .navigationLink:hover {
+    color: var(--orionplace-text);
+  }
+}
+.navigationLink[aria-current='page'] {
+  border-color: var(--orionplace-text);
+}
+.content {
+  min-width: 0;
+}
+.state > [data-empty-state] {
+  min-height: 384px;
+}
+@container page (min-width: 640px) {
+  .section {
+    padding: 56px 24px;
+  }
+}
+@container page (min-width: 1024px) {
+  .section {
+    padding-inline: 32px;
+  }
+  .authenticated {
+    grid-template-columns: 220px minmax(0, 1fr);
+    gap: 56px;
+  }
+  .navigation {
+    position: sticky;
+    top: 24px;
+    flex-direction: column;
+    gap: 0;
+    overflow: visible;
+    border-bottom: 0;
+    border-left: 1px solid var(--orionplace-border);
+  }
+  .navigationLink {
+    margin-left: -1px;
+    margin-bottom: 0;
+    padding-left: 20px;
+    border-bottom: 0;
+    border-left: 2px solid transparent;
+    border-color: transparent;
+  }
+  .logout {
+    margin-top: 16px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .navigationLink {
+    transition: none;
+  }
+}
+
+.retry {
+  composes: featureButton from './account.module.css';
+}

package/templates/components/orionplace/account/AccountSection.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import {
+  selectIsAuthenticated,
+  selectIsReady,
+  selectStatus,
+} from '@/stores/orionplace';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { homeLabels } from '@/lib/orionplace/homeLabels';
+import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import styles from './AccountSection.module.css';
+
+export interface AccountSectionProps {
+  section: string;
+  children?: ReactNode;
+  onRetry?: () => void;
+}
+
+export function AccountSection({
+  section,
+  children,
+  onRetry,
+}: AccountSectionProps) {
+  const authenticated = useOrionplace(selectIsAuthenticated);
+  const ready         = useOrionplace(selectIsReady);
+  const status        = useOrionplace(selectStatus);
+  const locale        = useOrionplaceSelections((state) => state.localeCode);
+  const labels        = featureLabels(locale);
+  const loadLabels    = homeLabels(locale);
+  const appLoad       = useOrionplaceAppLoad();
+  const route         = (path: string) =>
+    `/${path}?locale=${encodeURIComponent(locale)}`;
+
+  return (
+    <div className={styles.page}>
+      <main
+        className={`${styles.section} ${authenticated ? styles.authenticated : ''}`.trim()}
+        data-account-section
+      >
+        {authenticated && (
+          <nav
+            className={styles.navigation}
+            aria-label={labels.account}
+          >
+            {Object.entries(labels.navigation).map(([name, title]) => (
+              <a
+                key={name}
+                href={route(name)}
+                aria-current={section === name ? 'page' : undefined}
+                className={styles.navigationLink}
+              >
+                {title}
+              </a>
+            ))}
+            <a
+              href={route('logout')}
+              className={`${styles.navigationLink} ${styles.logout}`}
+              data-account-logout
+            >
+              {labels.logout}
+            </a>
+          </nav>
+        )}
+        {authenticated ? (
+          <div className={styles.content}>{children}</div>
+        ) : status === 'error' ? (
+          <div
+            data-account-failed
+            className={styles.state}
+          >
+            <OrionplaceEmptyState
+              kind="error"
+              size="large"
+              messageTag="h1"
+              message={loadLabels.failed}
+            >
+              <button
+                type="button"
+                className={styles.retry}
+                onClick={onRetry ?? (() => void appLoad.refresh())}
+              >
+                {loadLabels.retry}
+              </button>
+            </OrionplaceEmptyState>
+          </div>
+        ) : ready ? (
+          <div
+            data-account-guest
+            className={styles.state}
+          >
+            <OrionplaceEmptyState
+              kind="generic"
+              size="large"
+              messageTag="h1"
+              message={labels.account}
+              description={labels.accountSignIn}
+            />
+          </div>
+        ) : null}
+      </main>
+    </div>
+  );
+}