orionplace-react 0.7.8 → 0.8.0

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

@@ -1,463 +0,0 @@
-'use client';
-
-import { AsYouType } from 'libphonenumber-js';
-import 'country-flag-icons/3x2/flags.css';
-import { useEffect, useId, useState, type FormEvent } from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type {
-  IStorefrontProfileAction,
-  IStorefrontProfileState,
-} from '@/interfaces/orionplace/accounts/IStorefrontProfile';
-import { profileLabels } from '@/lib/orionplace/profileLabels';
-import { phoneWithCountryCode } from '@/lib/orionplace/phone';
-import { OrionplacePasswordInput } from '@/components/orionplace/shared/OrionplacePasswordInput';
-import styles from './ProfileSignIn.module.css';
-
-export interface ProfileSignInProps {
-  state: IStorefrontProfileState;
-  redirecting?: boolean;
-  headingLevel?: 'h1' | 'h2';
-  onRequest?: (value: IStorefrontProfileAction) => void;
-}
-
-export function ProfileSignIn({
-  state,
-  redirecting = false,
-  headingLevel = 'h2',
-  onRequest,
-}: ProfileSignInProps) {
-  const locale                    = useOrionplaceSelections((value) => value.localeCode);
-  const copy                      = profileLabels(locale);
-  const inputId                   = useId();
-  const Heading                   = headingLevel;
-  const [phone, setPhone]         = useState('');
-  const [password, setPassword]   = useState('');
-  const [otp, setOtp]             = useState('');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName]   = useState('');
-  const waiting                   =
-    redirecting || (state.refreshRequired && Boolean(state.pending));
-  const disabled                  = Boolean(state.pending) || state.refreshRequired;
-  const phoneCooldown             = state.authStep === 'step_phone' && state.otpDelay > 0;
-  const heading                   =
-    state.authStep === 'step_phone'
-      ? copy.signInOrRegister
-      : state.authPurpose === 'reg'
-        ? copy.signUp
-        : copy.signIn;
-  const country                   = phoneCountry(phoneWithCountryCode(phone, locale));
-  const otpHint                   = authenticationHint(state, copy);
-  const generalError              = authenticationError(state, waiting);
-
-  useEffect(() => {
-    setPassword('');
-    setOtp('');
-  }, [state.authStep]);
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (disabled || phoneCooldown) {
-      return;
-    }
-    const data: Extract<
-      IStorefrontProfileAction,
-      { action: 'authenticate' }
-    >['data'] = { step: state.authStep };
-
-    if (state.authStep === 'step_phone') {
-      data.phone = phoneWithCountryCode(phone, locale);
-      setPhone(data.phone);
-    } else if (state.authStep === 'step_password') {
-      data.auth_password = password;
-    } else if (state.authStep === 'step_otp') {
-      data.otp_code = otp;
-    } else {
-      data.first_name = firstName;
-      data.last_name  = lastName;
-    }
-    onRequest?.({ action: 'authenticate', data });
-  }
-
-  return (
-    <form
-      className={styles.form}
-      aria-busy={Boolean(state.pending)}
-      data-feature-part="ProfileSignIn"
-      onSubmit={submit}
-    >
-      <header className={styles.heading}>
-        <Heading>{heading}</Heading>
-        {state.authStep === 'step_phone' ? <p>{copy.signInHint}</p> : null}
-      </header>
-
-      {waiting ? (
-        <div
-          className={styles.waiting}
-          role="status"
-          data-signin-waiting
-        >
-          <span
-            className={styles.spinner}
-            aria-hidden="true"
-          />
-          <span
-            className={styles.progress}
-            aria-hidden="true"
-          />
-          <span className={styles.srOnly}>{copy.signingIn}</span>
-        </div>
-      ) : state.refreshRequired ? (
-        <>
-          <div
-            className={styles.errorNotice}
-            role="alert"
-          >
-            {copy.refreshFailed}
-          </div>
-          <button
-            className={styles.primary}
-            type="button"
-            onClick={() => onRequest?.({ action: 'refresh' })}
-          >
-            {copy.retry}
-          </button>
-        </>
-      ) : (
-        <>
-          {state.authStep === 'step_phone' ? (
-            <label className={styles.field}>
-              <span>
-                {copy.phone} <Required />
-              </span>
-              <span className={styles.phoneField}>
-                {country ? (
-                  <span
-                    className={`${styles.flag} flag:${country}`}
-                    aria-hidden="true"
-                  />
-                ) : null}
-                <input
-                  value={phone}
-                  name="phone"
-                  type="tel"
-                  autoComplete="tel"
-                  placeholder="+"
-                  required
-                  disabled={disabled}
-                  aria-invalid={Boolean(state.errors.phone)}
-                  aria-describedby={
-                    state.errors.phone ? `${inputId}-phone-error` : undefined
-                  }
-                  className={country ? styles.withFlag : undefined}
-                  onChange={(event) => setPhone(event.target.value)}
-                  onBlur={() => setPhone(phoneWithCountryCode(phone, locale))}
-                />
-              </span>
-              <FieldError
-                id={`${inputId}-phone-error`}
-                message={state.errors.phone}
-              />
-            </label>
-          ) : state.authStep === 'step_password' ? (
-            <div className={styles.field}>
-              <label htmlFor={`${inputId}-password`}>
-                <span>
-                  {copy.password} <Required />
-                </span>
-              </label>
-              <OrionplacePasswordInput
-                id={`${inputId}-password`}
-                value={password}
-                name="auth_password"
-                autoComplete={
-                  state.authPurpose === 'reg'
-                    ? 'new-password'
-                    : 'current-password'
-                }
-                minLength={state.authPurpose === 'reg' ? 6 : undefined}
-                required
-                disabled={disabled}
-                showLabel={copy.showPassword}
-                hideLabel={copy.hidePassword}
-                aria-invalid={Boolean(state.errors.auth_password)}
-                aria-describedby={
-                  state.errors.auth_password
-                    ? `${inputId}-auth_password-error`
-                    : undefined
-                }
-                data-profile-password
-                onValueChange={setPassword}
-              />
-              <FieldError
-                id={`${inputId}-auth_password-error`}
-                message={state.errors.auth_password}
-              />
-            </div>
-          ) : state.authStep === 'step_otp' ? (
-            <div className={styles.otpFields}>
-              <p>{otpHint}</p>
-              <label className={styles.field}>
-                <span>
-                  {copy.code} <Required />
-                </span>
-                <input
-                  value={otp}
-                  name="otp_code"
-                  inputMode="numeric"
-                  autoComplete="one-time-code"
-                  minLength={4}
-                  maxLength={4}
-                  required
-                  disabled={disabled}
-                  aria-invalid={Boolean(state.errors.otp_code)}
-                  aria-describedby={
-                    state.errors.otp_code
-                      ? `${inputId}-otp_code-error`
-                      : undefined
-                  }
-                  onChange={(event) => setOtp(event.target.value)}
-                />
-                <FieldError
-                  id={`${inputId}-otp_code-error`}
-                  message={state.errors.otp_code}
-                />
-              </label>
-              <button
-                type="button"
-                disabled={disabled || state.otpDelay > 0}
-                aria-label={
-                  state.otpDelay > 0
-                    ? `${copy.resend}: ${copy.cooldown} ` +
-                      `${state.otpDelay} ${copy.seconds}`
-                    : copy.resendHint
-                }
-                onClick={() => onRequest?.({ action: 'auth-resend' })}
-              >
-                {state.otpDelay > 0
-                  ? `${copy.resend} ${state.otpDelay} ${copy.seconds}`
-                  : copy.resend}
-              </button>
-            </div>
-          ) : (
-            <div className={styles.nameFields}>
-              <NameField
-                id={`${inputId}-first_name`}
-                name="first_name"
-                label={copy.firstName}
-                value={firstName}
-                error={state.errors.first_name}
-                autoComplete="given-name"
-                disabled={disabled}
-                onChange={setFirstName}
-              />
-              <NameField
-                id={`${inputId}-last_name`}
-                name="last_name"
-                label={copy.lastName}
-                value={lastName}
-                error={state.errors.last_name}
-                autoComplete="family-name"
-                disabled={disabled}
-                onChange={setLastName}
-              />
-            </div>
-          )}
-        </>
-      )}
-
-      {generalError ? (
-        <div
-          className={styles.errorNotice}
-          role="alert"
-        >
-          {generalError}
-        </div>
-      ) : null}
-      {phoneCooldown && !state.refreshRequired && !waiting ? (
-        <p
-          id={`${inputId}-phone-cooldown`}
-          className={styles.cooldown}
-          role="timer"
-        >
-          <ClockIcon />
-          <span>
-            {copy.phoneCooldown} {state.otpDelay} {copy.seconds}
-          </span>
-        </p>
-      ) : null}
-      {!state.refreshRequired && !waiting ? (
-        <div className={styles.actions}>
-          {state.authStep !== 'step_phone' ? (
-            <button
-              className={styles.back}
-              type="button"
-              disabled={disabled}
-              onClick={() => onRequest?.({ action: 'auth-restart' })}
-            >
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                aria-hidden="true"
-              >
-                <path d="m10 5-7 7 7 7M3 12h18" />
-              </svg>
-              {copy.back}
-            </button>
-          ) : null}
-          <button
-            className={styles.primary}
-            type="submit"
-            disabled={disabled || phoneCooldown}
-            aria-describedby={
-              phoneCooldown ? `${inputId}-phone-cooldown` : undefined
-            }
-          >
-            {copy.next}
-          </button>
-        </div>
-      ) : null}
-    </form>
-  );
-}
-
-function Required() {
-  return (
-    <span
-      className={styles.required}
-      aria-hidden="true"
-    >
-      *
-    </span>
-  );
-}
-
-function FieldError({ id, message }: { id: string; message?: string }) {
-  return message ? (
-    <small
-      id={id}
-      className={styles.fieldError}
-      role="alert"
-    >
-      {message}
-    </small>
-  ) : null;
-}
-
-interface NameFieldProps {
-  id: string;
-  name: string;
-  label: string;
-  value: string;
-  error?: string;
-  autoComplete: string;
-  disabled: boolean;
-  onChange: (value: string) => void;
-}
-
-function NameField({
-  id,
-  name,
-  label,
-  value,
-  error,
-  autoComplete,
-  disabled,
-  onChange,
-}: NameFieldProps) {
-  return (
-    <label
-      className={styles.field}
-      htmlFor={id}
-    >
-      <span>
-        {label} <Required />
-      </span>
-      <input
-        id={id}
-        name={name}
-        value={value}
-        autoComplete={autoComplete}
-        minLength={2}
-        required
-        disabled={disabled}
-        aria-invalid={Boolean(error)}
-        aria-describedby={error ? `${id}-error` : undefined}
-        onChange={(event) => onChange(event.target.value)}
-      />
-      <FieldError
-        id={`${id}-error`}
-        message={error}
-      />
-    </label>
-  );
-}
-
-function phoneCountry(value: string) {
-  const formatter = new AsYouType();
-  formatter.input(value);
-  return formatter.getCountry();
-}
-
-function authenticationHint(
-  state: IStorefrontProfileState,
-  copy: ReturnType<typeof profileLabels>,
-) {
-  if (state.authCodeType === 'email') {
-    return state.authEmail
-      ? `${copy.otpEmail} ${state.authEmail}`
-      : copy.otpHint;
-  }
-  if (state.authCodeType === 'sms') {
-    return copy.otpSms;
-  }
-  if (state.authCodeType === 'call') {
-    return copy.otpCall;
-  }
-  return copy.otpHint;
-}
-
-function authenticationError(state: IStorefrontProfileState, waiting: boolean) {
-  if (state.refreshRequired || waiting) {
-    return '';
-  }
-  const errors                                                        =
-    Object.entries(state.errors).filter(([, message]) => message);
-  if (!errors.length) {
-    return state.error;
-  }
-  const fields: Record<IStorefrontProfileState['authStep'], string[]> = {
-    step_phone: ['phone'],
-    step_password: ['auth_password'],
-    step_otp: ['otp_code'],
-    step_additional: ['first_name', 'last_name'],
-  };
-  return errors
-    .filter(([field]) => !fields[state.authStep].includes(field))
-    .map(([, message]) => message)
-    .join(' ');
-}
-
-function ClockIcon() {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <circle
-        cx="12"
-        cy="12"
-        r="9"
-      />
-      <path d="M12 7v5l3 2" />
-    </svg>
-  );
-}

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

@@ -1,52 +0,0 @@
-# SignInHistory
-
-## English
-
-`SignInHistory` shows the customer's sign-in date, device, browser, city and IP
-address. When mounted, it calls `onLoad` for the newest entries. Submitting the
-date filters or selecting another page calls the same callback with an
-`IProfileLogsRequest`; native date values are converted from `YYYY-MM-DD` to
-`DD.MM.YYYY` before the request is reported.
-
-The host supplies `logs`, `pagination`, `loaded`, `pending` and `error` from the
-`profile_get_logs` flow. Device text combines the available brand, model or
-family, operating-system family and version, leaving out the backend's `Other`
-for an unrecognised value. A completed empty response shows
-the localized empty state. Retry repeats page one with the current dates.
-
-### Props
-
-| Prop                                              | Meaning                                                                                      |
-| ------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `logs?: readonly IProfileLog[]`                   | Sign-in history data used by the account activity section.                                   |
-| `pagination?: Partial<IApiPagination>`            | Current API pagination values.                                                               |
-| `loaded?: boolean`                                | Distinguishes a confirmed empty result from data that has not loaded yet.                    |
-| `pending?: boolean`                               | Shows the loading state and blocks duplicate actions.                                        |
-| `error?: string`                                  | Customer-visible error for the component request; omit it when no request failed.            |
-| `onLoad?: (request: IProfileLogsRequest) => void` | Passes selected date bounds in `filters` and the page in `paginate` on opening, filter submission or page changes. The application loads the history and supplies records and request state. |
-
-## Русский
-
-`SignInHistory` показывает дату входа, устройство, браузер, город и IP-адрес
-покупателя. После монтирования компонент вызывает `onLoad` для загрузки самых
-новых записей. Отправка фильтра дат и выбор другой страницы вызывают тот же
-обработчик со значением `IProfileLogsRequest`; значение системного поля даты
-преобразуется из `ГГГГ-ММ-ДД` в `ДД.ММ.ГГГГ` перед передачей запроса.
-
-Родитель передаёт `logs`, `pagination`, `loaded`, `pending` и `error` из потока
-`profile_get_logs`. Описание устройства объединяет доступные марку, модель или
-семейство, семейство операционной системы и её версию; значение `Other`, которым
-сервер обозначает нераспознанное, не показывается. После завершённого
-пустого ответа выводится локализованное пустое состояние. Повтор снова
-запрашивает первую страницу с выбранными датами.
-
-### Свойства
-
-| Свойство                                          | Назначение                                                                                 |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `logs?: readonly IProfileLog[]`                   | Данные истории входов для раздела активности аккаунта.                                     |
-| `pagination?: Partial<IApiPagination>`            | Текущие данные пагинации API.                                                              |
-| `loaded?: boolean`                                | Отличает подтверждённый пустой результат от ещё не загруженных данных.                     |
-| `pending?: boolean`                               | Показывает загрузку и блокирует повторные действия.                                        |
-| `error?: string`                                  | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.       |
-| `onLoad?: (request: IProfileLogsRequest) => void` | Передаёт выбранные границы дат в `filters` и страницу в `paginate` при открытии, отправке фильтра или смене страницы. Приложение загружает историю и передаёт записи и состояние запроса. |

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

@@ -1,81 +0,0 @@
-.section {
-  composes: feature featureStack account from './account.module.css';
-  container-type: inline-size;
-}
-
-.title {
-  composes: featureSubtitle from './account.module.css';
-}
-
-.label {
-  composes: featureLabel from './account.module.css';
-}
-
-.input {
-  composes: featureInput from './account.module.css';
-}
-
-.button {
-  composes: featureButton from './account.module.css';
-}
-
-.error {
-  composes: notice noticeError from './account.module.css';
-}
-
-.entries {
-  composes: entryList from './account.module.css';
-}
-
-.entry {
-  composes: entry from './account.module.css';
-}
-
-.entryHeader {
-  composes: entryHead from './account.module.css';
-}
-
-.entryTitle {
-  composes: entryTitle from './account.module.css';
-}
-
-.entryState {
-  composes: entryState from './account.module.css';
-}
-
-.facts {
-  composes: entryFacts from './account.module.css';
-}
-
-.fact {
-  composes: entryFact from './account.module.css';
-}
-
-.term {
-  composes: entryTerm from './account.module.css';
-}
-
-.value {
-  composes: entryValue from './account.module.css';
-}
-
-.icon {
-  composes: entryIcon from './account.module.css';
-}
-
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 12px;
-}
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}