orionplace-react 0.1.0 → 0.2.0

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

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

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

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