orionplace-react 0.7.8 → 0.8.0

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

@@ -1,227 +0,0 @@
-'use client';
-
-import { useEffect, useId, useRef, useState, type FormEvent } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectIsAuthenticated, 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 './ProfilePasswordForm.module.css';
-
-export interface ProfilePasswordFormProps {
-  state: IStorefrontProfileState;
-  onRequest?: (value: IStorefrontProfileAction) => void;
-}
-
-interface PasswordFields {
-  old_password: string;
-  new_password: string;
-  confirm_password: string;
-}
-
-const EMPTY_FIELDS: PasswordFields = {
-  old_password: '',
-  new_password: '',
-  confirm_password: '',
-};
-
-export function ProfilePasswordForm({
-  state,
-  onRequest,
-}: ProfilePasswordFormProps) {
-  const profile             = useOrionplace(selectProfile);
-  const authenticated       = useOrionplace(selectIsAuthenticated);
-  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 [fields, setFields] = useState<PasswordFields>(EMPTY_FIELDS);
-  const previousSaved       = useRef(state.saved);
-  const mismatch            =
-    Boolean(fields.confirm_password) &&
-    fields.new_password !== fields.confirm_password;
-  const valid               =
-    fields.new_password.length >= 6 &&
-    Boolean(fields.confirm_password) &&
-    !mismatch;
-
-  useEffect(() => {
-    if (previousSaved.current === state.saved) {
-      return;
-    }
-    previousSaved.current = state.saved;
-
-    if (authenticated && state.message === 'password') {
-      setFields(EMPTY_FIELDS);
-    }
-  }, [authenticated, state.message, state.saved]);
-
-  function setField(name: keyof PasswordFields, value: string) {
-    setFields((current) => ({ ...current, [name]: value }));
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (busy || !valid) {
-      return;
-    }
-
-    onRequest?.({
-      action: 'password',
-      data: {
-        new_password: fields.new_password,
-        confirm_password: fields.confirm_password,
-        ...(hasPassword ? { old_password: fields.old_password } : {}),
-      },
-    });
-  }
-
-  return (
-    <form
-      className={styles.section}
-      aria-busy={state.pending === 'password'}
-      data-profile-password
-      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="M6 11h12v10H6zM8 11V7a4 4 0 0 1 8 0v4M12 15v2" />
-          </svg>
-        </span>
-        <div className={styles.title}>
-          <h2>{hasPassword ? labels.changePassword : labels.createPassword}</h2>
-          <p>{labels.passwordHint}</p>
-        </div>
-      </header>
-      <div className={styles.fields}>
-        {hasPassword ? (
-          <div className={`${styles.field} ${styles.wide}`}>
-            <label htmlFor={`${inputId}-old`}>
-              <span>
-                {labels.oldPassword}{' '}
-                <span
-                  className={styles.required}
-                  aria-hidden="true"
-                >
-                  *
-                </span>
-              </span>
-            </label>
-            <OrionplacePasswordInput
-              id={`${inputId}-old`}
-              value={fields.old_password}
-              onValueChange={(value) => setField('old_password', value)}
-              name="old_password"
-              autoComplete="current-password"
-              required
-              disabled={busy}
-              showLabel={labels.showPassword}
-              hideLabel={labels.hidePassword}
-              aria-invalid={Boolean(state.errors.old_password)}
-              aria-describedby={`${inputId}-old-error`}
-            />
-            <small
-              id={`${inputId}-old-error`}
-              className={styles.error}
-            >
-              {state.errors.old_password}
-            </small>
-          </div>
-        ) : null}
-        <div className={styles.field}>
-          <label htmlFor={`${inputId}-new`}>
-            <span>
-              {labels.newPassword}{' '}
-              <span
-                className={styles.required}
-                aria-hidden="true"
-              >
-                *
-              </span>
-            </span>
-          </label>
-          <OrionplacePasswordInput
-            id={`${inputId}-new`}
-            value={fields.new_password}
-            onValueChange={(value) => setField('new_password', value)}
-            name="new_password"
-            autoComplete="new-password"
-            minLength={6}
-            required
-            disabled={busy}
-            showLabel={labels.showPassword}
-            hideLabel={labels.hidePassword}
-            aria-invalid={Boolean(state.errors.new_password)}
-            aria-describedby={`${inputId}-new-error`}
-          />
-          <small
-            id={`${inputId}-new-error`}
-            className={styles.error}
-          >
-            {state.errors.new_password}
-          </small>
-        </div>
-        <div className={styles.field}>
-          <label htmlFor={`${inputId}-confirm`}>
-            <span>
-              {labels.confirmPassword}{' '}
-              <span
-                className={styles.required}
-                aria-hidden="true"
-              >
-                *
-              </span>
-            </span>
-          </label>
-          <OrionplacePasswordInput
-            id={`${inputId}-confirm`}
-            value={fields.confirm_password}
-            onValueChange={(value) => setField('confirm_password', value)}
-            name="confirm_password"
-            autoComplete="new-password"
-            minLength={6}
-            required
-            disabled={busy}
-            showLabel={labels.showPassword}
-            hideLabel={labels.hidePassword}
-            aria-invalid={mismatch || Boolean(state.errors.confirm_password)}
-            aria-describedby={`${inputId}-confirm-error`}
-          />
-          <small
-            id={`${inputId}-confirm-error`}
-            className={styles.error}
-          >
-            {mismatch ? labels.mismatch : state.errors.confirm_password}
-          </small>
-        </div>
-      </div>
-      <footer className={styles.footer}>
-        <button
-          type="submit"
-          className={styles.primary}
-          disabled={busy || !valid}
-        >
-          {state.pending === 'password' ? labels.pending : labels.save}
-        </button>
-      </footer>
-    </form>
-  );
-}

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

@@ -1,64 +0,0 @@
-# ProfileSignIn
-
-## English
-
-`ProfileSignIn` renders the current step of the shared sign-in and registration
-flow. The host passes `IStorefrontProfileState` and handles every emitted
-`IStorefrontProfileAction`. The phone step sends `phone`; the password step
-sends `auth_password`; the one-time-code step sends `otp_code`; registration's
-additional step sends `first_name` and `last_name`. Back emits `auth-restart`.
-
-`authCodeType` explains whether the four-digit code arrives by text message,
-phone call or email. `otpDelay` disables resend on the code step. When a phone
-request also returns a delay, the phone step shows the remaining seconds and
-blocks another request until it reaches zero. Returning to the phone step
-with `auth-restart` keeps the running countdown. `auth-resend` asks for another
-code after the countdown.
-
-After authentication, `refreshRequired` replaces the fields with progress while
-Application Load refreshes. If that refresh fails after the request finishes,
-the component shows a retry action that emits `refresh`. `redirecting` keeps the
-progress state visible while the host opens the return page.
-
-On the Russian storefront a phone number typed without «+» the way it is written in Russia — «8 900 555-01-72» or «900 555-01-72» — becomes «+79005550172» when the field loses focus and before it is sent: the backend accepts only international numbers. A number typed with «+», other numbers and other languages are sent as typed (`phoneWithCountryCode()`).
-
-### Props
-
-| Prop                                                    | Meaning                                                                                          |
-| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `state: IStorefrontProfileState`                        | Current controlled data, loading state and request errors.                                       |
-| `redirecting?: boolean`                                 | Shows that authentication succeeded and navigation is in progress.                               |
-| `headingLevel?: "h1" \| "h2"`                           | HTML heading level used for the component title.                                                 |
-| `onRequest?: (value: IStorefrontProfileAction) => void` | Called when the component emits its typed API action. The callback payload is shown in its type. |
-
-## Русский
-
-`ProfileSignIn` выводит текущий шаг общего процесса входа и регистрации.
-Родитель передаёт `IStorefrontProfileState` и обрабатывает каждое событие
-`IStorefrontProfileAction`. Шаг телефона отправляет `phone`, шаг пароля —
-`auth_password`, шаг одноразового кода — `otp_code`, а дополнительный шаг
-регистрации — `first_name` и `last_name`. Кнопка «Назад» отправляет
-`auth-restart`.
-
-`authCodeType` объясняет, придут ли четыре цифры в СМС, во входящем звонке или
-в письме. `otpDelay` блокирует повторную отправку на шаге кода. Если задержка
-пришла вместе с ответом на запрос телефона, шаг телефона показывает оставшиеся
-секунды и не позволяет повторить запрос до нуля. Возврат к шагу телефона
-через `auth-restart` сохраняет идущий отсчёт. После завершения отсчёта
-`auth-resend` запрашивает новый код.
-
-После подтверждения входа `refreshRequired` заменяет поля индикатором на время
-обновления Application Load. Если обновление закончилось ошибкой, компонент
-показывает кнопку повтора, которая отправляет `refresh`. `redirecting` сохраняет
-индикатор, пока родитель открывает страницу возврата.
-
-В русской витрине номер без «+», набранный по-российски — «8 900 555-01-72» или «900 555-01-72», — при выходе из поля и перед отправкой становится «+79005550172»: бэкенд принимает только международный формат. Номер с «+», другие номера и другие языки отправляются как набраны (`phoneWithCountryCode()`).
-
-### Свойства
-
-| Свойство                                                | Назначение                                                                                                 |
-| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `state: IStorefrontProfileState`                        | Текущие управляемые данные, загрузка и ошибки запросов.                                                    |
-| `redirecting?: boolean`                                 | Показывает, что вход завершён и выполняется переход.                                                       |
-| `headingLevel?: "h1" \| "h2"`                           | Уровень HTML-заголовка названия компонента.                                                                |
-| `onRequest?: (value: IStorefrontProfileAction) => void` | Вызывается, когда компонент отправляет типизированное действие API. Данные обработчика указаны в его типе. |

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

@@ -1,86 +0,0 @@
-.form {
-  composes: ui section signin from './profile.module.css';
-}
-
-.heading {
-  composes: signinHeading from './profile.module.css';
-}
-
-.field {
-  composes: signinField from './profile.module.css';
-}
-
-.otpFields {
-  composes: emailForm from './profile.module.css';
-}
-
-.nameFields {
-  composes: fields from './profile.module.css';
-}
-
-.required {
-  composes: required from './profile.module.css';
-}
-
-.fieldError {
-  composes: error from './profile.module.css';
-}
-
-.phoneField {
-  composes: phoneInput from './profile.module.css';
-}
-
-.flag {
-  composes: phoneFlag from './profile.module.css';
-}
-
-.withFlag {
-  composes: phoneWithFlag from './profile.module.css';
-}
-
-.actions {
-  composes: signinActions from './profile.module.css';
-}
-
-.primary {
-  composes: primary from './profile.module.css';
-}
-
-.back {
-  composes: signinBack from './profile.module.css';
-}
-
-.cooldown {
-  composes: signinCooldown from './profile.module.css';
-}
-
-.waiting {
-  composes: signinWaiting from './profile.module.css';
-}
-
-.spinner {
-  composes: signinSpinner from './profile.module.css';
-}
-
-.progress {
-  composes: signinProgress from './profile.module.css';
-}
-
-.cooldown {
-  composes: notice from './account.module.css';
-}
-
-.errorNotice {
-  composes: notice noticeError 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;
-}