orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,231 @@
+'use client';
+
+import { useEffect, useState, type FormEvent } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type {
+  IApiPagination,
+  IProfileLog,
+  IProfileLogsRequest,
+} from '@/interfaces/orionplace/accounts/IProfileData';
+import { activityLabels } from '@/lib/orionplace/activityLabels';
+import { activityIconPaths } from '@/lib/orionplace/activityPresentation';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
+import styles from './SignInHistory.module.css';
+
+export interface SignInHistoryProps {
+  logs?: readonly IProfileLog[];
+  pagination?: Partial<IApiPagination>;
+  loaded?: boolean;
+  pending?: boolean;
+  error?: string;
+  onLoad?: (request: IProfileLogsRequest) => void;
+}
+
+function apiDate(value: string): string | undefined {
+  return value ? value.split('-').reverse().join('.') : undefined;
+}
+
+export function SignInHistory({
+  logs = [],
+  pagination = {},
+  loaded = false,
+  pending = false,
+  error = '',
+  onLoad,
+}: SignInHistoryProps) {
+  const locale          = useOrionplaceSelections((value) => value.localeCode);
+  const labels          = activityLabels(locale);
+  const common          = featureLabels(locale);
+  const [from, setFrom] = useState('');
+  const [to, setTo]     = useState('');
+
+  function load(page = 1) {
+    onLoad?.({
+      filters: {
+        time_of_log_from: apiDate(from),
+        time_of_log_to: apiDate(to),
+        ordering: '-time_of_log',
+      },
+      paginate: { page, pp_items: 10 },
+    });
+  }
+
+  useEffect(() => {
+    let mounted = true;
+    queueMicrotask(() => {
+      if (mounted) {
+        load();
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!pending) {
+      load();
+    }
+  }
+
+  function device(log: IProfileLog): string {
+    return (
+      [
+        log.device_brand,
+        log.device_model || log.device_family,
+        log.os_family,
+        log.os_version,
+      ]
+        .filter((part) => part && part !== 'Other')
+        .join(' · ') || labels.unknown
+    );
+  }
+
+  return (
+    <section
+      className={styles.section}
+      data-feature-part="SignInHistory"
+    >
+      <h2 className={styles.title}>{labels.logs}</h2>
+      <form
+        className={styles.filters}
+        onSubmit={submit}
+      >
+        <label className={styles.label}>
+          {labels.from}
+          <input
+            className={styles.input}
+            value={from}
+            type="date"
+            max={to || undefined}
+            disabled={pending}
+            onChange={(event) => setFrom(event.target.value)}
+          />
+        </label>
+        <label className={styles.label}>
+          {labels.to}
+          <input
+            className={styles.input}
+            value={to}
+            type="date"
+            min={from || undefined}
+            disabled={pending}
+            onChange={(event) => setTo(event.target.value)}
+          />
+        </label>
+        <button
+          className={styles.button}
+          type="submit"
+          disabled={pending}
+        >
+          {common.search}
+        </button>
+      </form>
+      {error ? (
+        <div
+          role="alert"
+          className={styles.error}
+        >
+          {error}
+          <button
+            className={styles.button}
+            type="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}
+      {logs.length ? (
+        <ul className={styles.entries}>
+          {logs.map((log) => (
+            <li
+              key={log.id}
+              className={styles.entry}
+              data-sign-in={log.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={activityIconPaths.device} />
+                </svg>
+                <span className={styles.entryTitle}>{device(log)}</span>
+                <span className={styles.entryState}>
+                  {log.time_of_log?.date} {log.time_of_log?.time}
+                </span>
+              </div>
+              <dl className={styles.facts}>
+                <div className={styles.fact}>
+                  <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={activityIconPaths.browser} />
+                  </svg>
+                  <dt className={styles.term}>{labels.browser}</dt>
+                  <dd className={styles.value}>
+                    {log.browser_family} {log.browser_version}
+                  </dd>
+                </div>
+                <div className={styles.fact}>
+                  <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={activityIconPaths.pin} />
+                  </svg>
+                  <dt className={styles.term}>{labels.location}</dt>
+                  <dd className={styles.value}>
+                    {log.remote_city || labels.unknown} · {log.remote_addr}
+                  </dd>
+                </div>
+              </dl>
+            </li>
+          ))}
+        </ul>
+      ) : loaded && !pending ? (
+        <OrionplaceEmptyState
+          kind="journal"
+          message={labels.logsEmpty}
+        />
+      ) : null}
+      <StorefrontPagination
+        pagination={pagination}
+        pending={pending}
+        onChange={load}
+      />
+    </section>
+  );
+}

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

@@ -0,0 +1,48 @@
+# StorefrontLogout
+
+## English
+
+`StorefrontLogout` presents the state of the sign-out route. The host performs
+the actual `profile_logout` request and passes its state to this component.
+`pending` shows progress and removes the home action. `failed` shows an alert
+and a Retry button. When `failed` and `signedOut` are both true, the message says
+that sign-out succeeded but the refreshed storefront could not load, so retrying
+must refresh Application Load without repeating the sign-out request.
+
+Retry calls `onRetry`. The Home action calls `onSelectHome`. The component does
+not start either request or navigation on its own, which keeps its initial
+server render free of browser-only work.
+
+### Props
+
+| Prop                        | Meaning                                                                          |
+| --------------------------- | -------------------------------------------------------------------------------- |
+| `pending?: boolean`         | Shows the loading state and blocks duplicate actions.                            |
+| `failed?: boolean`          | Marks the current load as failed and exposes the retry state.                    |
+| `signedOut?: boolean`       | Uses the signed-out state after logout is confirmed.                             |
+| `onRetry?: () => void`      | Called when the visitor retries the failed request. The callback has no payload. |
+| `onSelectHome?: () => void` | Called when the visitor opens the home page. The callback has no payload.        |
+
+## Русский
+
+`StorefrontLogout` показывает состояние страницы выхода из аккаунта. Сам запрос
+`profile_logout` выполняет родительская страница и передаёт его состояние этому
+компоненту. `pending` показывает процесс и скрывает переход на главную.
+`failed` выводит сообщение об ошибке и кнопку повтора. Если `failed` и
+`signedOut` одновременно равны `true`, текст сообщает, что выход уже выполнен,
+но обновлённый магазин не загрузился: повтор должен обновить Application Load
+без повторного запроса выхода.
+
+Кнопка повтора вызывает `onRetry`, а переход на главную — `onSelectHome`.
+Компонент сам не запускает запрос и навигацию, поэтому его начальный серверный
+рендер не зависит от браузерных API.
+
+### Свойства
+
+| Свойство                    | Назначение                                                                              |
+| --------------------------- | --------------------------------------------------------------------------------------- |
+| `pending?: boolean`         | Показывает загрузку и блокирует повторные действия.                                     |
+| `failed?: boolean`          | Отмечает неудачную загрузку и показывает возможность повторить запрос.                  |
+| `signedOut?: boolean`       | Показывает состояние после подтверждённого выхода.                                      |
+| `onRetry?: () => void`      | Вызывается, когда покупатель повторяет неудачный запрос. Обработчик не получает данные. |
+| `onSelectHome?: () => void` | Вызывается, когда покупатель открывает главную страницу. Обработчик не получает данные. |

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

@@ -0,0 +1,166 @@
+/* The page frame follows its own width: a size container around <main>,
+   so the docs tabs and every placement show the same padding. */
+.page {
+  container: page / inline-size;
+  width: 100%;
+  min-width: 0;
+}
+
+.root {
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+  min-height: 50vh;
+  max-width: 90rem;
+  margin-inline: auto;
+  padding: 2.5rem 1rem;
+  place-items: center;
+  color: var(--orionplace-text);
+  container-type: inline-size;
+}
+
+.panel {
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+  max-width: 26.25rem;
+  justify-items: center;
+  gap: 1.25rem;
+  padding: 2.5rem 1.5rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  text-align: center;
+}
+
+.panel h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.panel p {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.spinner {
+  box-sizing: border-box;
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid var(--orionplace-border);
+  border-top-color: var(--orionplace-accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.panel .error {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--orionplace-danger);
+  background: var(--orionplace-danger-surface);
+  color: var(--orionplace-danger);
+}
+
+.panel button {
+  box-sizing: border-box;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  outline: none;
+  cursor: pointer;
+}
+
+.panel .primary {
+  display: inline-flex;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding-inline: 1.5rem;
+  border: 1px solid var(--orionplace-accent);
+  background: var(--orionplace-accent);
+  color: var(--orionplace-surface);
+}
+
+.panel .home {
+  font-weight: 400;
+  min-height: auto;
+  padding: 1px 0 2px;
+  border: 0;
+  border-bottom: 1px solid currentColor;
+  background: transparent;
+}
+
+.panel button:focus-visible {
+  opacity: 0.85;
+}
+
+@media (hover: hover) {
+  .panel button:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+}
+
+.panel button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@container page (min-width: 640px) {
+  .root {
+    padding: 3.5rem 1.5rem;
+  }
+
+  .panel {
+    padding-inline: 2rem;
+  }
+}
+
+/* The title follows the component's own width, as in the other packages. */
+@container (min-width: 592px) {
+  .panel h1 {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+}
+
+.panel .home:focus-visible {
+  color: var(--orionplace-muted);
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .panel .home:hover {
+    color: var(--orionplace-muted);
+    opacity: 1;
+  }
+}
+
+@container page (min-width: 1024px) {
+  .root {
+    padding-inline: 32px;
+  }
+}

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

@@ -0,0 +1,73 @@
+'use client';
+
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { sessionLabels } from '@/lib/orionplace/sessionLabels';
+import styles from './StorefrontLogout.module.css';
+
+export interface StorefrontLogoutProps {
+  pending?: boolean;
+  failed?: boolean;
+  signedOut?: boolean;
+  onRetry?: () => void;
+  onSelectHome?: () => void;
+}
+
+export function StorefrontLogout({
+  pending = false,
+  failed = false,
+  signedOut = false,
+  onRetry,
+  onSelectHome,
+}: StorefrontLogoutProps) {
+  const locale = useOrionplaceSelections((value) => value.localeCode);
+  const labels = sessionLabels(locale);
+  const title = failed
+    ? labels.failed
+    : signedOut
+      ? labels.done
+      : labels.title;
+  const message = failed
+    ? signedOut
+      ? labels.refreshFailed
+      : labels.retryHint
+    : pending
+      ? labels.pending
+      : labels.hint;
+
+  return (
+    <div className={styles.page}>
+      <main
+        className={styles.root}
+        aria-busy={pending}
+        data-storefront-logout
+      >
+        <div className={styles.panel}>
+          {pending ? <span className={styles.spinner} aria-hidden="true" /> : null}
+          <h1>{title}</h1>
+          <p role={failed ? 'alert' : 'status'} className={failed ? styles.error : ''}>
+            {message}
+          </p>
+          {failed ? (
+            <button
+              type="button"
+              className={styles.primary}
+              disabled={pending}
+              onClick={() => onRetry?.()}
+            >
+              {labels.retry}
+            </button>
+          ) : null}
+          {!pending ? (
+            <button
+              type="button"
+              className={styles.home}
+              onClick={() => onSelectHome?.()}
+            >
+              {labels.home} →
+            </button>
+          ) : null}
+        </div>
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+# StorefrontProfile
+
+## English
+
+`StorefrontProfile` composes the signed-in customer's profile photo, identity
+summary, personal details, email preferences, password and account deletion
+(`ProfileDeleteAccount`) forms. Application
+Load supplies the current customer and authentication state. A guest sees only
+the localized explanation that sign-in is required; the route remains
+responsible for showing the sign-in form.
+
+The component forwards every child action through `onRequest`. `onSelectHome`
+is called only by the Home button. `state.error` is shown in the shared status
+area, with a `{ action: 'load' }` retry when the initial profile load failed.
+Other pending actions are announced to screen readers, and a completed action
+shows the localized saved message. The route performs all API requests and
+supplies the updated state, usually through `useOrionplaceProfile()`
+(`hooks/useOrionplaceProfile.ts`), as the starter's profile page does:
+
+```tsx
+const profile = useOrionplaceProfile();
+
+<StorefrontProfile state={profile.state} onRequest={profile.request} />
+```
+
+Its options: `api` replaces the storefront's own client, `loadOnMount: false`
+skips the initial `profile_get`, and `onAuthenticated` runs once Application
+Load confirms the session after sign-in.
+
+### Props
+
+| Prop                                                    | Meaning                                                                                          |
+| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `state: IStorefrontProfileState`                        | Current controlled data, loading state and request errors.                                       |
+| `onRequest?: (value: IStorefrontProfileAction) => void` | Called when the component emits its typed API action. The callback payload is shown in its type. |
+| `onSelectHome?: () => void`                             | Called when the visitor opens the home page. The callback has no payload.                        |
+
+## Русский
+
+`StorefrontProfile` объединяет фотографию, данные покупателя, форму личных
+данных, настройки почты, форму пароля и удаление аккаунта
+(`ProfileDeleteAccount`). Текущий покупатель и состояние входа
+берутся из Application Load. Гость видит только локализованное пояснение о
+необходимости входа; форму входа по-прежнему показывает страница маршрута.
+
+Все действия дочерних компонентов передаются через `onRequest`.
+`onSelectHome` вызывается только кнопкой перехода на главную. `state.error`
+выводится в общей области состояния; если начальная загрузка профиля завершилась
+ошибкой, кнопка повтора отправляет `{ action: 'load' }`. Остальные выполняемые
+действия объявляются программам экранного доступа, а завершённое действие
+показывает сообщение о сохранении. Все API-запросы выполняет страница маршрута
+и передаёт обновлённое состояние — обычно через `useOrionplaceProfile()`
+(`hooks/useOrionplaceProfile.ts`), как страница профиля стартового проекта:
+
+```tsx
+const profile = useOrionplaceProfile();
+
+<StorefrontProfile state={profile.state} onRequest={profile.request} />
+```
+
+Параметры: `api` заменяет собственный клиент витрины, `loadOnMount: false`
+пропускает начальный `profile_get`, а `onAuthenticated` вызывается, когда
+Application Load подтвердит сеанс после входа.
+
+### Свойства
+
+| Свойство                                                | Назначение                                                                                                 |
+| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `state: IStorefrontProfileState`                        | Текущие управляемые данные, загрузка и ошибки запросов.                                                    |
+| `onRequest?: (value: IStorefrontProfileAction) => void` | Вызывается, когда компонент отправляет типизированное действие API. Данные обработчика указаны в его типе. |
+| `onSelectHome?: () => void`                             | Вызывается, когда покупатель открывает главную страницу. Обработчик не получает данные.                    |

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

@@ -0,0 +1,65 @@
+.profile {
+  composes: ui profile from './profile.module.css';
+}
+
+.heading {
+  composes: heading from './profile.module.css';
+}
+
+.headingText {
+  composes: headingText from './profile.module.css';
+}
+
+.headingActions {
+  composes: headingActions from './profile.module.css';
+}
+
+.feedback {
+  composes: feedback from './profile.module.css';
+}
+
+.notice {
+  composes: notice from './profile.module.css';
+  composes: notice from './account.module.css';
+}
+
+.feedbackError {
+  composes: noticeError from './account.module.css';
+}
+
+.feedbackSuccess {
+  composes: noticeSuccess from './account.module.css';
+}
+
+.content {
+  composes: content from './profile.module.css';
+}
+
+.summary {
+  composes: summary from './profile.module.css';
+}
+
+.identity {
+  composes: identity from './profile.module.css';
+}
+
+.contacts {
+  composes: identityContacts from './profile.module.css';
+}
+
+.guest {
+  display: grid;
+  justify-items: start;
+  gap: 16px;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}