orionplace-react 0.7.7 → 0.8.0

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

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

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

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

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

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

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

@@ -1,48 +0,0 @@
-# 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.
-
-Under the phone the hint names its country: `user.origin_country` from the application load, shown with the browser's country name («Its country, Russia, decides which payment methods you can use»). Without a country the plain hint stays.
-
-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-значение для системного
-поля даты и запроса. Номер телефона для входа доступен только для чтения.
-
-Под телефоном подсказка называет его страну: `user.origin_country` из загрузки приложения с названием страны от браузера («Его страна, Россия, определяет доступные способы оплаты»). Без страны остаётся обычная подсказка.
-
-Кнопка сохранения становится доступной только после изменения редактируемого
-значения, когда `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

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