orionplace-react 0.7.7 → 0.8.0

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

@@ -1,183 +0,0 @@
-'use client';
-
-import { useEffect, 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 { profileCountryName, profileDate } from '@/lib/orionplace/profile';
-import styles from './ProfileDetailsForm.module.css';
-
-export interface ProfileDetailsFormProps {
-  state: IStorefrontProfileState;
-  onRequest?: (value: IStorefrontProfileAction) => void;
-}
-
-export function ProfileDetailsForm({
-  state,
-  onRequest,
-}: ProfileDetailsFormProps) {
-  const profile             = useOrionplace(selectProfile);
-  const locale              = useOrionplaceSelections((value) => value.localeCode);
-  const labels              = profileLabels(locale);
-  // The phone country decides which payment methods the customer gets at checkout.
-  const country             = profileCountryName(profile?.origin_country, locale);
-  const phoneHint           = country
-    ? labels.phoneCountryHint.replace('{country}', country)
-    : labels.phoneHint;
-  const busy                = Boolean(state.pending) || !state.loaded;
-  const synchronized        = {
-    first_name: profile?.first_name ?? '',
-    last_name: profile?.last_name ?? '',
-    dob: profileDate(profile?.dob),
-  };
-  const [fields, setFields] = useState(synchronized);
-  const changed             =
-    fields.first_name !== synchronized.first_name ||
-    fields.last_name !== synchronized.last_name ||
-    fields.dob !== synchronized.dob;
-
-  useEffect(() => {
-    setFields(synchronized);
-  }, [profile?.id, profile?.first_name, profile?.last_name, profile?.dob]);
-
-  useEffect(() => {
-    if (state.message === 'details') {
-      setFields(synchronized);
-    }
-  }, [state.saved]);
-
-  function setField(name: keyof typeof fields, value: string) {
-    setFields((current) => ({ ...current, [name]: value }));
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (busy || !changed) {
-      return;
-    }
-    onRequest?.({
-      action: 'details',
-      data: {
-        first_name: fields.first_name.trim(),
-        last_name: fields.last_name.trim(),
-        dob: fields.dob,
-      },
-    });
-  }
-
-  return (
-    <form
-      className={styles.section}
-      aria-busy={state.pending === 'details'}
-      data-profile-details
-      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="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4 21a8 8 0 0 1 16 0" />
-          </svg>
-        </span>
-        <div className={styles.title}>
-          <h2>{labels.details}</h2>
-          <p>{labels.detailsHint}</p>
-        </div>
-      </header>
-      <div className={styles.fields}>
-        <label>
-          <span>
-            {labels.firstName}{' '}
-            <span
-              className={styles.required}
-              aria-hidden="true"
-            >
-              *
-            </span>
-          </span>
-          <input
-            name="first_name"
-            autoComplete="given-name"
-            required
-            minLength={2}
-            disabled={busy}
-            aria-invalid={Boolean(state.errors.first_name)}
-            value={fields.first_name}
-            onChange={(event) => setField('first_name', event.target.value)}
-          />
-          <small className={styles.error}>{state.errors.first_name}</small>
-        </label>
-        <label>
-          <span>
-            {labels.lastName}{' '}
-            <span
-              className={styles.required}
-              aria-hidden="true"
-            >
-              *
-            </span>
-          </span>
-          <input
-            name="last_name"
-            autoComplete="family-name"
-            required
-            minLength={2}
-            disabled={busy}
-            aria-invalid={Boolean(state.errors.last_name)}
-            value={fields.last_name}
-            onChange={(event) => setField('last_name', event.target.value)}
-          />
-          <small className={styles.error}>{state.errors.last_name}</small>
-        </label>
-        <label>
-          <span>{labels.phone}</span>
-          <input
-            value={profile?.phone ?? ''}
-            type="tel"
-            autoComplete="tel"
-            readOnly
-          />
-          <small>{phoneHint}</small>
-        </label>
-        <label>
-          <span>{labels.dob}</span>
-          <input
-            name="dob"
-            type="date"
-            autoComplete="bday"
-            disabled={busy}
-            aria-invalid={Boolean(state.errors.dob)}
-            value={fields.dob}
-            onChange={(event) => setField('dob', event.target.value)}
-          />
-          <small className={styles.error}>{state.errors.dob}</small>
-        </label>
-      </div>
-      <footer className={styles.footer}>
-        <button
-          className={styles.primary}
-          type="submit"
-          disabled={busy || !changed}
-        >
-          {state.pending === 'details' ? labels.pending : labels.save}
-        </button>
-      </footer>
-    </form>
-  );
-}

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

@@ -1,52 +0,0 @@
-# ProfileEmailSettings
-
-## English
-
-`ProfileEmailSettings` changes and verifies the signed-in customer's email
-address. During `step_email`, changing the address enables Send and submission
-calls `onRequest` with `{ action: 'email', data: { step: 'step_email', email } }`.
-During `step_email_code`, the email is read-only and the form sends the entered
-four-digit code. Resend requests another code for the displayed address. Change
-makes the address editable again.
-
-With `preferences` enabled, the component also shows the current optional email-notification
-choice and notification language. Changing either choice emits a typed request.
-The notification switch keeps the confirmed Application Load value. The language
-selector shows the requested value while the request runs, then uses
-`state.notificationLocale` again. Controls are disabled before `state.loaded`
-or while any profile request is pending. Email, code and notification-language
-errors come from the corresponding keys in `state.errors`.
-
-### Props
-
-| Prop                                                    | Meaning                                                                                          |
-| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `state: IStorefrontProfileState`                        | Current controlled data, loading state and request errors.                                       |
-| `preferences?: boolean`                                 | Current email, notification and notification-language settings.                                  |
-| `onRequest?: (value: IStorefrontProfileAction) => void` | Called when the component emits its typed API action. The callback payload is shown in its type. |
-
-## Русский
-
-`ProfileEmailSettings` изменяет и подтверждает адрес электронной почты вошедшего
-покупателя. На шаге `step_email` изменение адреса включает кнопку отправки, а
-форма вызывает `onRequest` со значением
-`{ action: 'email', data: { step: 'step_email', email } }`. На шаге
-`step_email_code` адрес доступен только для чтения, и форма отправляет введённый
-четырёхзначный код. Повторная отправка запрашивает новый код для показанного
-адреса. Кнопка изменения снова делает адрес редактируемым.
-
-При `preferences === true` компонент также показывает переключатель необязательных
-email-уведомлений и язык писем. Изменение каждого значения отправляет отдельный
-типизированный запрос. Переключатель сохраняет подтверждённое значение из
-Application Load. Выбор языка показывает запрошенное значение во время запроса,
-а после его завершения снова использует `state.notificationLocale`. Элементы
-недоступны до `state.loaded` и во время любого запроса профиля. Ошибки адреса,
-кода и языка уведомлений берутся из соответствующих полей `state.errors`.
-
-### Свойства
-
-| Свойство                                                | Назначение                                                                                                 |
-| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `state: IStorefrontProfileState`                        | Текущие управляемые данные, загрузка и ошибки запросов.                                                    |
-| `preferences?: boolean`                                 | Текущие настройки email, необязательных уведомлений и языка писем.                                        |
-| `onRequest?: (value: IStorefrontProfileAction) => void` | Вызывается, когда компонент отправляет типизированное действие API. Данные обработчика указаны в его типе. |

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

@@ -1,51 +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';
-}
-
-.emailForm {
-  composes: sectionBody emailForm from './profile.module.css';
-}
-
-.preferences {
-  composes: sectionBody preferences from './profile.module.css';
-}
-
-.required {
-  composes: required from './profile.module.css';
-}
-
-.error {
-  composes: error from './profile.module.css';
-}
-
-.actions {
-  composes: actions from './profile.module.css';
-}
-
-.primary {
-  composes: primary from './profile.module.css';
-}
-
-.switch {
-  composes: switch from './profile.module.css';
-}
-
-.switchCopy {
-  composes: switchCopy from './profile.module.css';
-}
-
-.switchTrack {
-  composes: switchTrack from './profile.module.css';
-}

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

@@ -1,276 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState, type FormEvent } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectLocales, selectProfile } from '@/stores/orionplace';
-import type {
-  IStorefrontProfileAction,
-  IStorefrontProfileState,
-} from '@/interfaces/orionplace/accounts/IStorefrontProfile';
-import { profileLabels } from '@/lib/orionplace/profileLabels';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
-import styles from './ProfileEmailSettings.module.css';
-
-export interface ProfileEmailSettingsProps {
-  state: IStorefrontProfileState;
-  preferences?: boolean;
-  onRequest?: (value: IStorefrontProfileAction) => void;
-}
-
-export function ProfileEmailSettings({
-  state,
-  preferences = true,
-  onRequest,
-}: ProfileEmailSettingsProps) {
-  const profile                                     = useOrionplace(selectProfile);
-  const locales                                     = useOrionplace(selectLocales);
-  const selectedLocale                              =
-    useOrionplaceSelections((value) => value.localeCode);
-  const labels                                      = profileLabels(selectedLocale);
-  const busy                                        = Boolean(state.pending) || !state.loaded;
-  const [email, setEmail]                           = useState(profile?.email ?? '');
-  const [code, setCode]                             = useState('');
-  const [editing, setEditing]                       = useState(false);
-  const [notificationLocale, setNotificationLocale] = useState(
-    state.notificationLocale,
-  );
-  const previousSaved                               = useRef(state.saved);
-  const previousPending                             = useRef(state.pending);
-  const codeStep                                    =
-    state.emailStep === 'step_email_code' && !editing;
-  const options                                     = {
-    '': labels.chooseLocale,
-    ...Object.fromEntries(
-      Object.entries(locales).map(([key, item]) => [
-        item.code || key,
-        getAvailableNestedValueFromObject(
-          item.locale,
-          selectedLocale,
-          'name',
-        ) ||
-          item.human_name ||
-          key,
-      ]),
-    ),
-  };
-
-  useEffect(() => {
-    if (state.emailStep === 'step_email') {
-      setEmail(profile?.email ?? '');
-    }
-  }, [profile?.email]);
-
-  useEffect(() => {
-    setNotificationLocale(state.notificationLocale);
-  }, [state.notificationLocale]);
-
-  useEffect(() => {
-    if (previousPending.current && !state.pending) {
-      setNotificationLocale(state.notificationLocale);
-    }
-    previousPending.current = state.pending;
-  }, [state.notificationLocale, state.pending]);
-
-  useEffect(() => {
-    if (previousSaved.current === state.saved) {
-      return;
-    }
-    previousSaved.current = state.saved;
-
-    if (state.message === 'email' && state.emailStep === 'step_email') {
-      setEmail(profile?.email ?? '');
-      setCode('');
-      setEditing(false);
-    }
-  }, [profile?.email, state.emailStep, state.message, state.saved]);
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (busy) {
-      return;
-    }
-
-    const step = editing ? 'step_email' : state.emailStep;
-    onRequest?.({
-      action: 'email',
-      data: step === 'step_email' ? { step, email } : { step, code },
-    });
-    setEditing(false);
-  }
-
-  function requestNotifications(enabled: boolean) {
-    if (!busy) {
-      onRequest?.({ action: 'notifications', data: { enabled } });
-    }
-  }
-
-  function requestNotificationLocale(value: string) {
-    setNotificationLocale(value);
-    if (value) {
-      onRequest?.({
-        action: 'notification-locale',
-        data: { email_notification_locale: value },
-      });
-    }
-  }
-
-  return (
-    <section
-      className={styles.section}
-      data-profile-email-settings
-    >
-      <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="M3 6h18v12H3zM3 7l9 6 9-6" />
-          </svg>
-        </span>
-        <div className={styles.title}>
-          <h2>{labels.emailTitle}</h2>
-          <p>{labels.emailHint}</p>
-        </div>
-      </header>
-      <form
-        className={styles.emailForm}
-        onSubmit={submit}
-      >
-        <label>
-          <span>
-            {labels.email}{' '}
-            <span
-              className={styles.required}
-              aria-hidden="true"
-            >
-              *
-            </span>
-          </span>
-          <input
-            value={email}
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-            readOnly={codeStep}
-            disabled={busy}
-            aria-invalid={Boolean(state.errors.email)}
-            onChange={(event) => setEmail(event.target.value)}
-          />
-          <small className={styles.error}>{state.errors.email}</small>
-        </label>
-        {codeStep ? (
-          <label>
-            <span>
-              {labels.code}{' '}
-              <span
-                className={styles.required}
-                aria-hidden="true"
-              >
-                *
-              </span>
-            </span>
-            <input
-              value={code}
-              name="code"
-              inputMode="numeric"
-              autoComplete="one-time-code"
-              required
-              pattern="[0-9]{4}"
-              maxLength={4}
-              disabled={busy}
-              aria-invalid={Boolean(state.errors.code)}
-              onChange={(event) => setCode(event.target.value)}
-            />
-            <small className={styles.error}>{state.errors.code}</small>
-          </label>
-        ) : null}
-        <div className={styles.actions}>
-          <button
-            className={styles.primary}
-            type="submit"
-            disabled={
-              busy ||
-              (!editing &&
-                state.emailStep === 'step_email' &&
-                email === profile?.email)
-            }
-            aria-label={codeStep ? undefined : labels.sendCodeHint}
-          >
-            {codeStep ? labels.verify : labels.sendCode}
-          </button>
-          {codeStep ? (
-            <>
-              <button
-                type="button"
-                disabled={busy}
-                aria-label={labels.resendHint}
-                onClick={() =>
-                  onRequest?.({
-                    action: 'email',
-                    data: { step: 'step_email', email },
-                  })
-                }
-              >
-                {labels.resend}
-              </button>
-              <button
-                type="button"
-                disabled={busy}
-                aria-label={labels.changeEmailHint}
-                onClick={() => {
-                  setEditing(true);
-                  setCode('');
-                }}
-              >
-                {labels.changeEmail}
-              </button>
-            </>
-          ) : null}
-        </div>
-      </form>
-      {preferences ? (
-        <div className={styles.preferences}>
-          <label className={styles.switch}>
-            <span className={styles.switchCopy}>
-              <strong>{labels.notifications}</strong>
-              <small>{labels.notificationsHint}</small>
-            </span>
-            <input
-              type="checkbox"
-              checked={Boolean(profile?.notifications_enabled)}
-              disabled={busy || !profile?.email}
-              onChange={(event) => requestNotifications(event.target.checked)}
-            />
-            <span
-              className={styles.switchTrack}
-              aria-hidden="true"
-            />
-          </label>
-          <OrionplaceSelect
-            value={notificationLocale}
-            options={options}
-            label={labels.notificationLocale}
-            disabled={busy}
-            onValueChange={requestNotificationLocale}
-          />
-          <small className={styles.error}>
-            {state.errors.email_notification_locale}
-          </small>
-        </div>
-      ) : null}
-    </section>
-  );
-}

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

@@ -1,45 +0,0 @@
-# ProfilePasswordForm
-
-## English
-
-`ProfilePasswordForm` creates or changes the signed-in customer's password. If
-Application Load reports `profile.password === true`, the form also asks for
-the current password. A customer without a password sees only the new-password
-and confirmation fields.
-
-The new password must contain at least six characters, and its confirmation
-must match. A valid submission calls `onRequest` with
-`{ action: 'password', data }`. `data.old_password` is included only when the
-account already has a password. When `state.saved` changes with
-`state.message === 'password'`, the component clears all password fields.
-Controls are disabled before `state.loaded` or while any profile request is
-pending. Field errors come from `state.errors`.
-
-### 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. |
-
-## Русский
-
-`ProfilePasswordForm` создаёт или изменяет пароль вошедшего покупателя. Если
-Application Load возвращает `profile.password === true`, форма также запрашивает
-текущий пароль. Покупатель без пароля видит только поля нового пароля и его
-подтверждения.
-
-Новый пароль должен содержать не менее шести символов, а подтверждение должно
-с ним совпадать. После корректного заполнения `onRequest` получает
-`{ action: 'password', data }`. Поле `data.old_password` передаётся только для
-аккаунта, у которого пароль уже создан. Когда `state.saved` меняется при
-`state.message === 'password'`, компонент очищает все поля пароля. Поля и кнопки
-недоступны до `state.loaded` и во время любого запроса профиля. Ошибки полей
-берутся из `state.errors`.
-
-### Свойства
-
-| Свойство                                                | Назначение                                                                                                 |
-| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `state: IStorefrontProfileState`                        | Текущие управляемые данные, загрузка и ошибки запросов.                                                    |
-| `onRequest?: (value: IStorefrontProfileAction) => void` | Вызывается, когда компонент отправляет типизированное действие API. Данные обработчика указаны в его типе. |

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

@@ -1,43 +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';
-}
-
-.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';
-}
-
-.footer {
-  composes: sectionFoot from './profile.module.css';
-}
-
-.primary {
-  composes: primary from './profile.module.css';
-}