orionplace-react 0.1.0 → 0.2.1

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

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

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

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