orionplace-react 0.1.0 → 0.2.0

package/templates/hooks/useAccountActivity.ts

@@ -0,0 +1,251 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import type { AccountActivityProps } from '@/components/orionplace/account/AccountActivity';
+import type { ProductReviewsLoadAction } from '@/components/orionplace/products/ProductReviews';
+import type {
+  IApiPagination,
+  IProfileLog,
+  IProfileLogsRequest,
+  IProfileLogsResponse,
+} from '@/interfaces/orionplace/accounts/IProfileData';
+import type {
+  IProductFeedbackListResponse,
+  IProductFeedbackPreloadResponse,
+  IProductReview,
+} from '@/interfaces/orionplace/products/IProductFeedbackApi';
+import { apiErrorMessage, type OrionplaceApi } from '@/lib/orionplace/api';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useAccountPromocodes } from '@/hooks/useAccountPromocodes';
+import { mergePagination } from '@/lib/orionplace/featureData';
+
+type LogsPage = NonNullable<IProfileLogsResponse['page_data']>;
+type ReviewsPage = NonNullable<IProductFeedbackListResponse['page_data']>;
+
+const ownReviews: ProductReviewsLoadAction = {
+  endpoint: 'products_feedbacks_mine_get',
+  request: {
+    filters: { ordering: '-date_created' },
+    paginate: { page: 1, pp_items: 10 },
+  },
+};
+
+// The activity page's promo codes, sign-in history and own reviews, as the
+// storefront's activity page passes them to AccountActivity. `api` replaces
+// the storefront's own client, as in useAccountPromocodes (the
+// documentation previews pass theirs).
+export function useAccountActivity(
+  options: { api?: Pick<OrionplaceApi, 'request'> } = {},
+): Required<Pick<AccountActivityProps, 'promocodes' | 'logs' | 'reviews'>> {
+  const storefrontApi = useOrionplaceApi();
+  const api = options.api ?? storefrontApi;
+  const promocodes = useAccountPromocodes({ api });
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  // OrionMarketplace's messages, or the translated failure for any other error.
+  const errorMessage = (reason: unknown) =>
+    apiErrorMessage(reason) || featureLabels(locale).failed;
+  const [logs, setLogs] = useState<IProfileLog[]>([]);
+  const [logPagination, setLogPagination] = useState<Partial<IApiPagination>>(
+    {},
+  );
+  const [logsPending, setLogsPending] = useState(false);
+  const [logsLoaded, setLogsLoaded] = useState(false);
+  const [logsError, setLogsError] = useState('');
+  const [reviews, setReviews] = useState<IProductReview[]>([]);
+  const [parents, setParents] = useState<IProductReview[]>([]);
+  const [reviewPagination, setReviewPagination] = useState<
+    Partial<IApiPagination>
+  >({});
+  const [reviewsPending, setReviewsPending] = useState(false);
+  const [reviewsLoaded, setReviewsLoaded] = useState(false);
+  const [reviewsError, setReviewsError] = useState('');
+  const reviewsBusy = useRef(false);
+
+  async function loadLogs(request: IProfileLogsRequest) {
+    setLogsPending(true);
+    setLogsError('');
+    try {
+      const data = await api.request<LogsPage>('profile_get_logs', request);
+      setLogs(data.data);
+      // Pages after the first omit `total_count`; keep it from page 1.
+      setLogPagination((previous) =>
+        mergePagination(
+          (request.paginate?.page ?? 1) === 1 ? {} : previous,
+          data.rpag,
+        ),
+      );
+      setLogsLoaded(true);
+    } catch (reason) {
+      setLogsError(errorMessage(reason));
+    } finally {
+      setLogsPending(false);
+    }
+  }
+
+  async function loadReviews(action: ProductReviewsLoadAction) {
+    reviewsBusy.current = true;
+    setReviewsPending(true);
+    setReviewsError('');
+    try {
+      const data = await api.request<ReviewsPage>(
+        action.endpoint,
+        action.request,
+      );
+      setReviews(data.feedbacks.data);
+      setReviewPagination((previous) =>
+        mergePagination(
+          (action.request.paginate?.page ?? 1) === 1 ? {} : previous,
+          data.feedbacks.rpag,
+        ),
+      );
+      setReviewsLoaded(true);
+    } catch (reason) {
+      setReviewsError(errorMessage(reason));
+    } finally {
+      reviewsBusy.current = false;
+      setReviewsPending(false);
+    }
+  }
+
+  // One review request at a time, as Nuxt's task: a second click while a
+  // reaction, a preload or a save is running is ignored. A failure is shown
+  // above the list; `rethrow` also hands it to the caller.
+  async function reviewTask<T>(work: () => Promise<T>, rethrow = false) {
+    if (reviewsBusy.current) {
+      return undefined;
+    }
+    reviewsBusy.current = true;
+    setReviewsPending(true);
+    setReviewsError('');
+    try {
+      return await work();
+    } catch (reason) {
+      setReviewsError(errorMessage(reason));
+      if (rethrow) {
+        throw reason;
+      }
+      return undefined;
+    } finally {
+      reviewsBusy.current = false;
+      setReviewsPending(false);
+    }
+  }
+
+  async function openReplies(
+    review: IProductReview,
+    action?: ProductReviewsLoadAction,
+  ) {
+    if (reviewsBusy.current) {
+      return;
+    }
+    setParents((current) => [...current, review]);
+    await loadReviews(
+      action ?? {
+        endpoint: 'products_view_feedbacks_feedback_get',
+        request: {
+          filters: { reply_of_parent: review.id, ordering: '-date_created' },
+          paginate: { page: 1, pp_items: 10 },
+        },
+      },
+    );
+  }
+
+  return {
+    promocodes,
+    logs: {
+      logs,
+      pagination: logPagination,
+      pending: logsPending,
+      loaded: logsLoaded,
+      error: logsError,
+      onLoad: (request) => void loadLogs(request),
+    },
+    reviews: {
+      reviews,
+      parents,
+      pagination: reviewPagination,
+      pending: reviewsPending,
+      loaded: reviewsLoaded,
+      error: reviewsError,
+      onLoad: (action) => void loadReviews(action),
+      onOpenReplies: (review, action) => void openReplies(review, action),
+      onBack: (action) => {
+        setParents((current) => current.slice(0, -1));
+        void loadReviews(action ?? ownReviews);
+      },
+      onEdit: async (review) =>
+        (await reviewTask(async () => {
+          const data = await api.request<
+            IProductFeedbackPreloadResponse['page_data']
+          >('products_feedbacks_reply_preload', { reply_id: review.id });
+          if (!data || data.id !== review.id) {
+            throw new Error('Review cannot be edited');
+          }
+          return data;
+        })) ?? null,
+      onSubmit: async (value, context) => {
+        const form = new FormData();
+        const id = context.editing?.id;
+        const product = context.productId ?? context.replyingTo?.product?.id;
+        form.append(
+          'data',
+          JSON.stringify({
+            text: value.text,
+            rating: value.rating,
+            ...(id
+              ? { images_to_delete: value.remove }
+              : {
+                  for_product: product,
+                  reply_to: context.replyingTo?.id,
+                }),
+          }),
+        );
+        for (const file of value.files) {
+          form.append('feedback_images', file, file.name);
+        }
+        // A rejected save, such as "Not allowed to edit feedback anymore.",
+        // is shown above the list and keeps the form open.
+        const saved = await reviewTask(async () => {
+          await api.request(
+            id ? 'products_feedbacks_edit' : 'products_feedbacks_add',
+            form,
+            undefined,
+            id ? { feedback_id: id } : {},
+          );
+          return true;
+        }, true);
+        if (!saved) {
+          return false;
+        }
+        // ProductReviews then loads the own reviews again.
+        setParents([]);
+        return true;
+      },
+      onReaction: (request, review) => {
+        void reviewTask(async () => {
+          const data = await api.request<{ likes: number; dislikes: number }>(
+            'products_feedbacks_like_or_dislike',
+            request,
+          );
+          setReviews((current) =>
+            current.map((item) =>
+              item.id === review.id
+                ? {
+                    ...item,
+                    total_c_likes: data.likes,
+                    total_c_dislikes: data.dislikes,
+                    user_like:
+                      item.user_like === request.like_or_dislike
+                        ? null
+                        : request.like_or_dislike,
+                  }
+                : item,
+            ),
+          );
+        });
+      },
+    },
+  };
+}

package/templates/hooks/useAccountAddresses.ts

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState } from 'react';
+import type { StorefrontAddressesProps } from '@/components/orionplace/address/StorefrontAddresses';
+import type {
+  IUserAddress,
+  IUserAddressListResponse,
+} from '@/interfaces/orionplace/address/IUserAddress';
+import { fieldErrorText, OrionplaceApiError, type OrionplaceApi } from '@/lib/orionplace/api';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import {
+  useOrionplaceAddressForm,
+  type AddressLocate,
+} from '@/hooks/useOrionplaceAddressForm';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+
+type AddressPageData = NonNullable<IUserAddressListResponse['page_data']>;
+
+// The address book as the storefront's addresses page passes it to
+// StorefrontAddresses: the list, its form and the default and delete
+// actions. `initial` is the list the server already read; `api` and
+// `locate` replace the storefront's client and the browser's geolocation,
+// as in useOrionplaceAddressForm (the documentation previews pass theirs).
+export function useAccountAddresses(
+  options: {
+    initial?: AddressPageData;
+    initialError?: string;
+    api?: Pick<OrionplaceApi, 'request'>;
+    locate?: AddressLocate;
+  } = {},
+): StorefrontAddressesProps {
+  const storefrontApi = useOrionplaceApi();
+  const api = options.api ?? storefrontApi;
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const form = useOrionplaceAddressForm({ api, locate: options.locate });
+  const [addresses, setAddresses] = useState<IUserAddress[]>(
+    options.initial?.addresses ?? [],
+  );
+  const [loaded, setLoaded] = useState(Boolean(options.initial));
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(options.initialError ?? '');
+
+  async function load() {
+    setPending(true);
+    setError('');
+    try {
+      const data = await api.request<AddressPageData>('address_get', {
+        filters: {},
+      });
+      setAddresses(data.addresses);
+      setLoaded(true);
+    } catch (reason) {
+      const fields = reason instanceof OrionplaceApiError ? reason.fields : {};
+      setError(
+        fieldErrorText(fields) ||
+          featureLabels(locale).failed,
+      );
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return {
+    addresses,
+    loaded,
+    pending,
+    error,
+    loadOnMount: !options.initial && !options.initialError,
+    form,
+    onLoad: () => load(),
+    onSetDefault: (request, address) =>
+      api.request<void>('address_set_shipping', request, undefined, {
+        address_id: address.id,
+      }),
+    onDelete: (address) =>
+      api.request<void>('address_delete', {}, undefined, {
+        address_id: address.id,
+      }),
+  };
+}

package/templates/hooks/useAccountPromocodes.ts

@@ -0,0 +1,91 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { fieldErrorText, type OrionplaceApi } from '@/lib/orionplace/api';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { mergePagination } from '@/lib/orionplace/featureData';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type { ICartPromoRequest, IPromoIssue, IPromoIssuesRequest, IPromoIssuesResponse } from '@/interfaces/orionplace/marketing/IPromoActions';
+
+// `api` replaces the storefront's own client, as in useOrionplaceReviews
+// (the documentation previews pass theirs).
+export function useAccountPromocodes(
+  options: { api?: Pick<OrionplaceApi, 'request'> } = {},
+) {
+  const storefrontApi               = useOrionplaceApi();
+  const api                         = options.api ?? storefrontApi;
+  const locale                      = useOrionplaceSelections((state) => state.localeCode);
+  const [codes, setCodes]           = useState<IPromoIssue[]>([]);
+  const [pagination, setPagination] = useState<Partial<IApiPagination>>({});
+  const [pending, setPending]       = useState(false);
+  const [loaded, setLoaded]         = useState(false);
+  const [error, setError]           = useState('');
+  // The code whose Apply was refused; undefined when the list failed to load.
+  const [errorCode, setErrorCode]   = useState<number>();
+  const active                      = useRef<AbortController | null>(null);
+  const page                        = useRef(1);
+
+  useEffect(() => () => {
+    active.current?.abort();
+    active.current = null;
+  }, []);
+
+  async function fetchPage(signal: AbortSignal, request: IPromoIssuesRequest) {
+    const data = await api.request<NonNullable<IPromoIssuesResponse['page_data']>>(
+      'profile_promocodes_get', request, signal,
+    );
+    if (signal.aborted) {
+      return;
+    }
+    if (!Array.isArray(data?.data)) {
+      throw new Error(featureLabels(locale).failed);
+    }
+    page.current = request.paginate?.page ?? 1;
+    setCodes(data.data);
+    setPagination((previous) => mergePagination(page.current === 1 ? {} : previous, data.rpag));
+    setLoaded(true);
+  }
+
+  async function run(action: (signal: AbortSignal) => Promise<void>, failed?: number) {
+    if (active.current) {
+      return;
+    }
+    const request  = new AbortController();
+    active.current = request;
+    setPending(true);
+    setError('');
+    setErrorCode(failed);
+    try {
+      await action(request.signal);
+    } catch (reason) {
+      if (!request.signal.aborted) {
+        const fields = (reason as { fields?: Record<string, string> })?.fields;
+        setError(fieldErrorText(fields ?? {}) || featureLabels(locale).failed);
+      }
+    } finally {
+      if (active.current === request) {
+        active.current = null;
+        setPending(false);
+      }
+    }
+  }
+
+  function onLoad(request: IPromoIssuesRequest) {
+    return run((signal) => fetchPage(signal, request));
+  }
+
+  function onApply(request: ICartPromoRequest, code: IPromoIssue) {
+    return run(async (signal) => {
+      await api.request('marketing_promo_promo_apply', request, signal);
+      if (signal.aborted) {
+        return;
+      }
+      setCodes((previous) => previous.map((item) => ({ ...item, applyed_to_cart: item.id === code.id })));
+      await fetchPage(signal, { paginate: { page: page.current, pp_items: 10 } });
+    }, code.id);
+  }
+
+  return { codes, pagination, pending, loaded, error, errorCode, onLoad, onApply };
+}

package/templates/hooks/useOrionplaceActionMenu.ts

@@ -0,0 +1,118 @@
+'use client';
+
+import { useEffect, useRef, useState, type KeyboardEvent } from 'react';
+
+export function useOrionplaceActionMenu<Key extends string | number>() {
+  const [openKey, setOpenKey] = useState<Key>();
+  const currentKey = useRef<Key | undefined>(undefined);
+  const triggers = useRef(new Map<Key, HTMLElement>());
+  const roots = useRef(new Map<Key, HTMLElement>());
+  const items = useRef<HTMLElement[]>([]);
+  currentKey.current = openKey;
+
+  function enabledItems() {
+    return items.current.filter(
+      (item) => !(item as HTMLButtonElement).disabled,
+    );
+  }
+
+  function focusItem(position: 'first' | 'last') {
+    window.setTimeout(() => {
+      const enabled = enabledItems();
+      const item = position === 'first' ? enabled[0] : enabled.at(-1);
+      item?.focus();
+    });
+  }
+
+  function open(key: Key, position: 'first' | 'last' = 'first') {
+    items.current = [];
+    setOpenKey(key);
+    focusItem(position);
+  }
+
+  function close(returnFocus: boolean) {
+    const key = currentKey.current;
+    setOpenKey(undefined);
+    if (returnFocus && key !== undefined) {
+      triggers.current.get(key)?.focus();
+    }
+  }
+
+  function toggle(key: Key) {
+    if (currentKey.current === key) {
+      close(false);
+    } else {
+      open(key);
+    }
+  }
+
+  function onTriggerKeyDown(event: KeyboardEvent, key: Key) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      open(key, event.key === 'ArrowDown' ? 'first' : 'last');
+    }
+  }
+
+  function onItemKeyDown(event: KeyboardEvent) {
+    const enabled = enabledItems();
+    const current = enabled.indexOf(event.currentTarget as HTMLElement);
+    const targets: Record<string, number> = {
+      ArrowDown: (current + 1) % enabled.length,
+      ArrowUp: (current - 1 + enabled.length) % enabled.length,
+      Home: 0,
+      End: enabled.length - 1,
+    };
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      close(true);
+    } else if (event.key === 'Tab') {
+      close(false);
+    } else if (event.key in targets) {
+      event.preventDefault();
+      enabled[targets[event.key]!]?.focus();
+    }
+  }
+
+  useEffect(() => {
+    function onOutsidePointer(event: PointerEvent) {
+      const key = currentKey.current;
+      const root = key === undefined ? undefined : roots.current.get(key);
+      if (
+        root &&
+        event.target instanceof Node &&
+        !root.contains(event.target)
+      ) {
+        close(false);
+      }
+    }
+    document.addEventListener('pointerdown', onOutsidePointer);
+    return () => document.removeEventListener('pointerdown', onOutsidePointer);
+  }, []);
+
+  return {
+    openKey,
+    close,
+    toggle,
+    onTriggerKeyDown,
+    onItemKeyDown,
+    rememberTrigger(key: Key, element: HTMLElement | null) {
+      if (element) {
+        triggers.current.set(key, element);
+      } else {
+        triggers.current.delete(key);
+      }
+    },
+    rememberRoot(key: Key, element: HTMLElement | null) {
+      if (element) {
+        roots.current.set(key, element);
+      } else {
+        roots.current.delete(key);
+      }
+    },
+    rememberItem(index: number, element: HTMLElement | null) {
+      if (element) {
+        items.current[index] = element;
+      }
+    },
+  };
+}