orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,48 @@
+# ProfileAvatar
+
+## English
+
+`ProfileAvatar` shows the signed-in customer's Application Load avatar at its
+intrinsic 112 by 112 dimensions. A failed or unavailable image is replaced by
+the first letters of the customer's first and last names, or a neutral circle
+when both names are empty.
+
+The file picker offers JPG, JPEG, PNG, GIF and WebP images, the formats the
+backend accepts for avatars. Choosing an image calls `onRequest` with
+`{ action: 'avatar-add', file }` and clears the native file field so the same
+file can be chosen again. Remove calls
+`onRequest` with `{ action: 'avatar-delete' }`. Remove is shown only while an
+avatar URL exists. Both controls are disabled while `state.pending` is non-empty
+or before `state.loaded`; an avatar action also sets the component's busy state.
+`state.errors.profile_avatar` is shown as the field alert.
+
+### Props
+
+| Prop                                                    | Meaning                                                                                          |
+| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `state: IStorefrontProfileState`                        | Current controlled data, loading state and request errors.                                       |
+| `onRequest?: (value: IStorefrontProfileAction) => void` | Choosing an image passes `action: "avatar-add"` and `file`; removal passes `action: "avatar-delete"`. The application performs the action and supplies updated profile state. |
+
+## Русский
+
+`ProfileAvatar` показывает фотографию вошедшего покупателя из Application Load
+с размерами 112 на 112. Если изображение отсутствует или не загрузилось,
+компонент выводит первые буквы имени и фамилии; при отсутствии обоих значений —
+нейтральный круг.
+
+Окно выбора предлагает файлы JPG, JPEG, PNG, GIF и WebP — форматы, которые
+бэкенд принимает для фотографии профиля. Выбор изображения вызывает `onRequest`
+со значением `{ action: 'avatar-add', file }` и очищает системное поле, чтобы
+тот же файл можно было выбрать повторно. Удаление вызывает `onRequest` со значением
+`{ action: 'avatar-delete' }`. Кнопка удаления выводится только при наличии
+адреса фотографии. Обе кнопки недоступны, пока `state.pending` не пуст или
+`state.loaded` равен `false`; действие с фотографией также включает состояние
+занятости компонента. Ошибка `state.errors.profile_avatar` выводится как ошибка
+поля.
+
+### Свойства
+
+| Свойство                                                | Назначение                                                                                                 |
+| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `state: IStorefrontProfileState`                        | Текущие управляемые данные, загрузка и ошибки запросов.                                                    |
+| `onRequest?: (value: IStorefrontProfileAction) => void` | Выбор изображения передаёт `action: "avatar-add"` и `file`, удаление — `action: "avatar-delete"`. Приложение выполняет действие и передаёт обновлённое состояние профиля. |

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

@@ -0,0 +1,31 @@
+.avatar {
+  composes: ui avatar from './profile.module.css';
+}
+
+.image {
+  composes: avatarImage from './profile.module.css';
+}
+
+.actions {
+  composes: avatarActions from './profile.module.css';
+}
+
+.iconButton {
+  composes: iconButton from './profile.module.css';
+}
+
+.error {
+  composes: error from './profile.module.css';
+}
+
+.fileInput {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,138 @@
+'use client';
+
+import { useEffect, useRef, useState, type ChangeEvent } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import type {
+  IStorefrontProfileAction,
+  IStorefrontProfileState,
+} from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+import { profileLabels } from '@/lib/orionplace/profileLabels';
+import { safePublicUrl } from '@/lib/orionplace/presentation';
+import styles from './ProfileAvatar.module.css';
+
+export interface ProfileAvatarProps {
+  state: IStorefrontProfileState;
+  onRequest?: (value: IStorefrontProfileAction) => void;
+}
+
+export function ProfileAvatar({ state, onRequest }: ProfileAvatarProps) {
+  const profile             = useOrionplace(selectProfile);
+  const locale              = useOrionplaceSelections((value) => value.localeCode);
+  const labels              = profileLabels(locale);
+  const inputRef            = useRef<HTMLInputElement>(null);
+  const [failed, setFailed] = useState(false);
+  const avatar              = safePublicUrl(profile?.avatar);
+  const busy                = Boolean(state.pending) || !state.loaded;
+  const initials            =
+    `${profile?.first_name?.[0] ?? ''}${profile?.last_name?.[0] ?? ''}` || '○';
+
+  useEffect(() => {
+    setFailed(false);
+  }, [avatar]);
+
+  function upload(event: ChangeEvent<HTMLInputElement>) {
+    const field = event.currentTarget;
+    const file  = field.files?.[0];
+    if (file && !busy) {
+      setFailed(false);
+      onRequest?.({ action: 'avatar-add', file });
+    }
+    field.value = '';
+  }
+
+  return (
+    <div
+      className={styles.avatar}
+      aria-busy={state.pending.startsWith('avatar')}
+    >
+      <div className={styles.image}>
+        {avatar && !failed ? (
+          <img
+            src={avatar}
+            alt={labels.avatar}
+            width={112}
+            height={112}
+            onError={() => setFailed(true)}
+          />
+        ) : (
+          <span aria-hidden="true">{initials}</span>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        className={styles.fileInput}
+        type="file"
+        accept=".jpg,.jpeg,.png,.gif,.webp"
+        aria-label={labels.upload}
+        disabled={busy}
+        tabIndex={-1}
+        data-avatar-input
+        onChange={upload}
+      />
+      <div className={styles.actions}>
+        <button
+          type="button"
+          className={styles.iconButton}
+          data-avatar-upload
+          aria-label={avatar ? labels.change : labels.upload}
+          title={avatar ? labels.change : labels.upload}
+          disabled={busy}
+          onClick={() => inputRef.current?.click()}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M2.75 8.25A1.75 1.75 0 0 1 4.5 6.5h2.8l1.6-2.25h6.2l1.6 2.25h2.8a1.75 1.75 0 0 1 1.75 1.75v9.5a1.75 1.75 0 0 1-1.75 1.75h-15a1.75 1.75 0 0 1-1.75-1.75Z" />
+            <circle
+              cx="12"
+              cy="12.75"
+              r="3.5"
+            />
+            <path d="M18 9.5h.01" />
+          </svg>
+        </button>
+        {avatar && (
+          <button
+            type="button"
+            className={styles.iconButton}
+            data-avatar-delete
+            aria-label={labels.remove}
+            title={labels.remove}
+            disabled={busy}
+            onClick={() => onRequest?.({ action: 'avatar-delete' })}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.6"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v5m4-5v5" />
+            </svg>
+          </button>
+        )}
+      </div>
+      {state.errors.profile_avatar && (
+        <small
+          className={styles.error}
+          role="alert"
+        >
+          {state.errors.profile_avatar}
+        </small>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+# ProfileDeleteAccount
+
+## English
+
+`ProfileDeleteAccount` lets the signed-in customer delete their own account, as
+Google Play and App Store require for apps with accounts. The card explains
+what is removed (name, phone number, email, photo, addresses and cart) and that
+orders and reviews stay without the customer's details. It also lists what
+prevents deletion: an open order, an unpaid refund, money on the balance or an
+active paid subscription.
+
+The customer ticks «I understand that the account cannot be restored» and,
+when Application Load reports `profile.password === true`, types the current
+password. The Delete account button then calls `onRequest` with
+`{ action: 'delete-account', data: { confirm: true, password? } }`. A refusal
+without a field, such as an open order, is shown above the button; password
+and confirmation errors are shown under their fields. Controls are disabled
+before `state.loaded` or while any profile request is pending.
+
+`useOrionplaceProfile()` sends `profile_delete`. The backend removes the
+personal data and ends the session; the hook then shows the guest state at
+once and loads the guest Application Load. The starter's `/profile` page shows
+«Your account has been deleted.» above the sign-in form.
+
+### 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. |
+
+## Русский
+
+`ProfileDeleteAccount` позволяет вошедшему покупателю удалить свой аккаунт:
+этого требуют Google Play и App Store для приложений с аккаунтами. Карточка
+объясняет, что удаляется (имя, номер телефона, почта, фото, адреса и корзина),
+и что заказы и отзывы остаются без данных покупателя. Там же перечислено, что
+не даёт удалить аккаунт: открытый заказ, невыплаченный возврат, деньги на
+балансе или действующая платная подписка.
+
+Покупатель отмечает «Я понимаю, что аккаунт нельзя восстановить» и, если
+Application Load возвращает `profile.password === true`, вводит текущий пароль.
+Кнопка «Удалить аккаунт» вызывает `onRequest` с
+`{ action: 'delete-account', data: { confirm: true, password? } }`. Отказ без
+поля, например из-за открытого заказа, показывается над кнопкой; ошибки пароля
+и подтверждения — под своими полями. Поля и кнопка недоступны до `state.loaded`
+и во время любого запроса профиля.
+
+`useOrionplaceProfile()` отправляет `profile_delete`. Бэкенд удаляет личные
+данные и завершает сессию; хук сразу показывает состояние гостя и загружает
+Application Load гостя. Страница `/profile` стартового шаблона показывает
+«Аккаунт удалён.» над формой входа.
+
+### Свойства
+
+| Свойство                                                | Назначение                                                                                                 |
+| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `state: IStorefrontProfileState`                        | Текущие управляемые данные, загрузка и ошибки запросов.                                                    |
+| `onRequest?: (value: IStorefrontProfileAction) => void` | Вызывается, когда компонент отправляет типизированное действие API. Данные обработчика указаны в его типе. |

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

@@ -0,0 +1,51 @@
+.section {
+  composes: ui section deleteSection from './profile.module.css';
+}
+
+.header {
+  composes: sectionHead from './profile.module.css';
+}
+
+.title {
+  composes: sectionTitle from './profile.module.css';
+}
+
+.icon {
+  composes: sectionIcon from './profile.module.css';
+}
+
+.fields {
+  composes: sectionBody fields from './profile.module.css';
+}
+
+.field {
+  composes: field from './profile.module.css';
+}
+
+.wide {
+  composes: wide from './profile.module.css';
+}
+
+.required {
+  composes: required from './profile.module.css';
+}
+
+.error {
+  composes: error from './profile.module.css';
+}
+
+.consent {
+  composes: consent from './profile.module.css';
+}
+
+.alert {
+  composes: wide deleteError from './profile.module.css';
+}
+
+.footer {
+  composes: sectionFoot from './profile.module.css';
+}
+
+.danger {
+  composes: danger from './profile.module.css';
+}

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

@@ -0,0 +1,171 @@
+'use client';
+
+import { useEffect, useId, useState, type FormEvent } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import type {
+  IStorefrontProfileAction,
+  IStorefrontProfileState,
+} from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+import { profileLabels } from '@/lib/orionplace/profileLabels';
+import { OrionplacePasswordInput } from '@/components/orionplace/shared/OrionplacePasswordInput';
+import styles from './ProfileDeleteAccount.module.css';
+
+export interface ProfileDeleteAccountProps {
+  state: IStorefrontProfileState;
+  onRequest?: (value: IStorefrontProfileAction) => void;
+}
+
+export function ProfileDeleteAccount({
+  state,
+  onRequest,
+}: ProfileDeleteAccountProps) {
+  const profile                 = useOrionplace(selectProfile);
+  const locale                  = useOrionplaceSelections((value) => value.localeCode);
+  const labels                  = profileLabels(locale);
+  const inputId                 = useId();
+  const hasPassword             = Boolean(profile?.password);
+  const busy                    = Boolean(state.pending) || !state.loaded;
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm]   = useState(false);
+  // The shared error belongs to this card only after its own request. A
+  // refusal such as an open order has no field, so it shows above the button.
+  const [sent, setSent]         = useState(false);
+  const ready                   = confirm && (!hasPassword || Boolean(password));
+  const error                   =
+    !sent || state.pending || state.errors.password || state.errors.confirm
+      ? ''
+      : state.errors.__all__ || state.error;
+
+  useEffect(() => {
+    if (state.pending && state.pending !== 'delete-account') {
+      setSent(false);
+    }
+  }, [state.pending]);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (busy || !ready) {
+      return;
+    }
+    setSent(true);
+    onRequest?.({
+      action: 'delete-account',
+      data: {
+        confirm: true,
+        ...(hasPassword ? { password } : {}),
+      },
+    });
+  }
+
+  return (
+    <form
+      className={styles.section}
+      aria-busy={state.pending === 'delete-account'}
+      data-profile-delete
+      onSubmit={submit}
+    >
+      <header className={styles.header}>
+        <span
+          className={styles.icon}
+          aria-hidden="true"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" />
+          </svg>
+        </span>
+        <div className={styles.title}>
+          <h2>{labels.deleteTitle}</h2>
+          <p>{labels.deleteHint}</p>
+        </div>
+      </header>
+      <div className={styles.fields}>
+        <p className={styles.wide}>{labels.deleteBlocked}</p>
+        {hasPassword ? (
+          <div className={styles.field}>
+            <label htmlFor={`${inputId}-password`}>
+              <span>
+                {labels.password}{' '}
+                <span
+                  className={styles.required}
+                  aria-hidden="true"
+                >
+                  *
+                </span>
+              </span>
+            </label>
+            <OrionplacePasswordInput
+              id={`${inputId}-password`}
+              value={password}
+              onValueChange={setPassword}
+              name="password"
+              autoComplete="current-password"
+              required
+              disabled={busy}
+              showLabel={labels.showPassword}
+              hideLabel={labels.hidePassword}
+              aria-invalid={Boolean(state.errors.password)}
+              aria-describedby={`${inputId}-password-error`}
+            />
+            <small
+              id={`${inputId}-password-error`}
+              className={styles.error}
+            >
+              {state.errors.password}
+            </small>
+          </div>
+        ) : null}
+        <div className={styles.wide}>
+          <label className={styles.consent}>
+            <input
+              type="checkbox"
+              name="confirm"
+              checked={confirm}
+              onChange={(event) => setConfirm(event.target.checked)}
+              required
+              disabled={busy}
+              aria-invalid={Boolean(state.errors.confirm)}
+              aria-describedby={`${inputId}-confirm-error`}
+            />
+            <span>{labels.deleteConfirm}</span>
+          </label>
+          <small
+            id={`${inputId}-confirm-error`}
+            className={styles.error}
+          >
+            {state.errors.confirm}
+          </small>
+        </div>
+        {error ? (
+          <p
+            className={styles.alert}
+            role="alert"
+          >
+            {error}
+          </p>
+        ) : null}
+      </div>
+      <footer className={styles.footer}>
+        <button
+          type="submit"
+          className={styles.danger}
+          disabled={busy || !ready}
+        >
+          {state.pending === 'delete-account'
+            ? labels.deleting
+            : labels.deleteAction}
+        </button>
+      </footer>
+    </form>
+  );
+}

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

@@ -0,0 +1,44 @@
+# ProfileDetailsForm
+
+## English
+
+`ProfileDetailsForm` edits the signed-in customer's first name, last name and
+date of birth. Application Load supplies the initial values. Dates in
+`day.month.year` or `day/month/year` form are converted to the ISO value required
+by the native date field and the request. The sign-in phone number is read-only.
+
+Submit is enabled only after an editable value changes and `state.loaded` is
+true with no pending request. Submission trims the two names and calls
+`onRequest` with `{ action: 'details', data: { first_name, last_name, dob } }`.
+When `state.saved` changes with `state.message === 'details'`, the form restores
+the latest Application Load profile values. Field messages come from
+`state.errors.first_name`, `state.errors.last_name` and `state.errors.dob`.
+
+### 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. |
+
+## Русский
+
+`ProfileDetailsForm` редактирует имя, фамилию и дату рождения вошедшего
+покупателя. Начальные значения берутся из Application Load. Дата в формате
+`день.месяц.год` или `день/месяц/год` преобразуется в ISO-значение для системного
+поля даты и запроса. Номер телефона для входа доступен только для чтения.
+
+Кнопка сохранения становится доступной только после изменения редактируемого
+значения, когда `state.loaded` равен `true` и нет выполняемого запроса. При
+отправке внешние пробелы в имени и фамилии удаляются, затем `onRequest` получает
+`{ action: 'details', data: { first_name, last_name, dob } }`. Когда
+`state.saved` меняется при `state.message === 'details'`, форма восстанавливает
+актуальные значения профиля из Application Load. Ошибки полей берутся из
+`state.errors.first_name`, `state.errors.last_name` и `state.errors.dob`.
+
+### Свойства
+
+| Свойство                                                | Назначение                                                                                                 |
+| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `state: IStorefrontProfileState`                        | Текущие управляемые данные, загрузка и ошибки запросов.                                                    |
+| `onRequest?: (value: IStorefrontProfileAction) => void` | Вызывается, когда компонент отправляет типизированное действие API. Данные обработчика указаны в его типе. |

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

@@ -0,0 +1,35 @@
+.section {
+  composes: ui section from './profile.module.css';
+}
+
+.header {
+  composes: sectionHead from './profile.module.css';
+}
+
+.title {
+  composes: sectionTitle from './profile.module.css';
+}
+
+.icon {
+  composes: sectionIcon from './profile.module.css';
+}
+
+.fields {
+  composes: sectionBody fields from './profile.module.css';
+}
+
+.required {
+  composes: required from './profile.module.css';
+}
+
+.error {
+  composes: error from './profile.module.css';
+}
+
+.footer {
+  composes: sectionFoot from './profile.module.css';
+}
+
+.primary {
+  composes: primary from './profile.module.css';
+}