orionplace-react 0.7.7 → 0.8.0

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

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

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

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

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

@@ -1,110 +0,0 @@
-/* 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

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