orionplace-react 0.7.7 → 0.8.0

package/templates/hooks/useAccountActivity.ts

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

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

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

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