orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,178 @@
+'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 { 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);
+  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>{labels.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

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

@@ -0,0 +1,51 @@
+.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

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

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

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