orionplace-react 0.7.8 → 0.8.0

package/templates/hooks/useOrionplaceStorefront.tsx

@@ -1,593 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
-import { usePathname, useSearchParams } from 'next/navigation';
-import { useStorefrontRouter } from '@/lib/orionplace/navigation';
-import {
-  useOrionplace,
-  useOrionplaceProductsStore,
-  useOrionplaceSelections,
-  useOrionplaceStore,
-} from '@/providers/OrionplaceProvider';
-import { selectInit, selectProfile } from '@/stores/orionplace';
-import type {
-  IProduct,
-  IProductSearchSeller,
-  IProductSecondaryVariants,
-} from '@/interfaces/orionplace/products/IProduct';
-import type { ProductGroupEvents } from '@/components/orionplace/products/ProductGroup';
-import { ProductPreorderDialog } from '@/components/orionplace/products/ProductPreorderDialog';
-import { apiErrorMessage, OrionplaceApiError } from '@/lib/orionplace/api';
-import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
-import { productAvailability } from '@/lib/orionplace/productAvailability';
-import { productActionLabels } from '@/lib/orionplace/productActionLabels';
-
-// What a finished product action did: a key of productActionLabels.
-type ProductActionDone =
-  | 'cartAdded'
-  | 'cartUpdated'
-  | 'cartRemoved'
-  | 'favoriteAdded'
-  | 'favoriteRemoved'
-  | 'subscribed'
-  | 'unsubscribed'
-  | 'preorderSaved';
-import styles from '@/app/storefront.module.css';
-import { signInPageLocation } from '@/lib/orionplace/signInReturn';
-
-type ProductControls = Pick<
-  ProductGroupEvents,
-  | 'onSelectVariant'
-  | 'onRequestSecondaryVariants'
-  | 'onSelectSecondaryVariant'
-  | 'onToggleFavorite'
-  | 'onAdd'
-  | 'onRemove'
-  | 'onSubscribe'
-  | 'onUnsubscribe'
-  | 'onPreorder'
-> & {
-  productActionsDisabled: boolean;
-  variantPending: boolean;
-  variantError: boolean;
-  /** The product whose preorder dialog is open, if any. */
-  preorder: number | undefined;
-  /** The open preorder's last refusal, shown inside its dialog. */
-  preorderError: string;
-  /** OrionMarketplace's messages per field for that refusal, shown under the fields. */
-  preorderFieldErrors: Record<string, string>;
-  /** OrionMarketplace asks the guest to sign in first (error code `sign_in`). */
-  preorderSignIn: boolean;
-  /** Opens the sign-in page, as the provider's other actions do. */
-  signIn: () => void;
-  /** Sends the open preorder; a guest's email or phone goes with it. */
-  submitPreorder: (selection: {
-    product: number;
-    email: string;
-    phone: string;
-  }) => void;
-  closePreorder: () => void;
-};
-
-const StorefrontContext = createContext<ProductControls | null>(null);
-const noFieldErrors: Record<string, string> = {};
-
-function errorText(reason: unknown, fallback: string) {
-  return apiErrorMessage(reason) || fallback;
-}
-
-export type OrionplaceSignInHandler = (
-  location: ReturnType<typeof signInPageLocation>,
-) => void;
-
-export function OrionplaceStorefrontProvider({
-  children,
-  onSignIn,
-  preorderDialog = true,
-}: {
-  children: ReactNode;
-  /**
-   * Replaces the navigation to the sign-in page inside this provider, for
-   * example in a preview that opens its own sign-in dialog instead.
-   */
-  onSignIn?: OrionplaceSignInHandler;
-  /**
-   * `false` leaves the preorder dialog to the page: it renders
-   * `ProductPreorderDialog` itself (for example inline with `modal={false}`)
-   * from `preorder`, `submitPreorder` and `closePreorder` of
-   * `useOrionplaceStorefront()`.
-   */
-  preorderDialog?: boolean;
-}) {
-  const api                                 = useOrionplaceApi();
-  const products                            = useOrionplaceProductsStore();
-  const store                               = useOrionplaceStore();
-  const init                                = useOrionplace(selectInit);
-  const profile                             = useOrionplace(selectProfile);
-  const locale                              = useOrionplaceSelections((state) => state.localeCode);
-  const router                              = useStorefrontRouter();
-  const pathname                            = usePathname();
-  const searchParams                        = useSearchParams();
-  const copy                                = productActionLabels(locale);
-  const requests                            = useRef(new Map<string, AbortController>());
-  const actionPending                       = useRef(false);
-  const [pending, setPending]               = useState(false);
-  const [variantPending, setVariantPending] = useState(false);
-  const [variantError, setVariantError]     = useState(false);
-  const [message, setMessage]               = useState('');
-  const [messageError, setMessageError]     = useState(false);
-  const [messageFields, setMessageFields]   = useState(noFieldErrors);
-  const [messageSignIn, setMessageSignIn]   = useState(false);
-  const [preorder, setPreorder]             = useState<number>();
-  const signInHandler                       = useRef(onSignIn);
-
-  signInHandler.current = onSignIn;
-
-  // A success notice hides after a few seconds and on the next page; an
-  // error stays until the next action.
-  const address                             = `${pathname}?${searchParams}`;
-  const [noticeAddress, setNoticeAddress]   = useState(address);
-  if (noticeAddress !== address) {
-    setNoticeAddress(address);
-    if (message && !messageError) {
-      setMessage('');
-    }
-  }
-  useEffect(() => {
-    if (!message || messageError) {
-      return;
-    }
-    const timer = setTimeout(() => setMessage(''), 4000);
-    return () => clearTimeout(timer);
-  }, [message, messageError]);
-
-  useEffect(
-    () => () => {
-      for (const request of requests.current.values()) {
-        request.abort();
-      }
-      requests.current.clear();
-    },
-    [],
-  );
-
-  function signIn() {
-    const current = `${pathname}${searchParams.size ? `?${searchParams}` : ''}`;
-    const target  = signInPageLocation(current, locale);
-    if (signInHandler.current) {
-      signInHandler.current(target);
-      return;
-    }
-    router.push(`${target.path}?${new URLSearchParams(target.query)}`);
-  }
-
-  function product(id: number) {
-    return (
-      products.getState().getProduct(id, 'products') ??
-      products.getState().getProduct(id, 'featured')
-    );
-  }
-
-  function patch(id: number, value: Partial<IProduct>) {
-    products.getState().patchProduct(id, value);
-  }
-
-  async function refreshProduct(id: number) {
-    const data    = await api.request<{
-      products?: { data?: IProduct[] };
-      selects?: { sellers?: IProductSearchSeller[] };
-    }>('products_search', {
-      filters: { id },
-      paginate: { page: 1, pp_items: 1 },
-    });
-    const found   = data.products?.data?.find((item) => item.id === id);
-    if (!found) {
-      throw new Error(copy.refreshFailed);
-    }
-    const sellers = data.selects?.sellers;
-    products.getState().setProduct(found, 'products', sellers);
-    products.getState().setProduct(found, 'featured', sellers);
-    return found;
-  }
-
-  // Another tab may have changed the wishlist already: OrionMarketplace then answers
-  // "Already in whishlist" or "Wish not found" with the current counter.
-  // The product is read again, and the click counts as done when the heart
-  // now matches it; otherwise the original error is shown.
-  async function recoverFavorite(
-    reason: unknown,
-    selection: { product: number; selected: boolean },
-  ) {
-    if (
-      !(reason instanceof OrionplaceApiError) ||
-      reason.kind !== 'failed' ||
-      reason.status === 401 ||
-      !Object.keys(reason.fields).length
-    ) {
-      throw reason;
-    }
-    const data = reason.data as { count?: number } | undefined;
-    if (Number.isInteger(data?.count)) {
-      products.getState().setProductCounters({ c_wishlist: data!.count });
-    }
-    let found: IProduct;
-    try {
-      found = await refreshProduct(selection.product);
-    } catch {
-      throw reason;
-    }
-    if (Boolean(found.whishlist_id) !== selection.selected) {
-      throw reason;
-    }
-  }
-
-  // The backend can enable optional email notifications together with an
-  // availability subscription: read the saved state instead of guessing it.
-  async function refreshNotificationState() {
-    try {
-      const data = await api.request<{ notifications_enabled?: unknown }>(
-        'profile_notification_settings_get',
-        {},
-      );
-      if (typeof data?.notifications_enabled === 'boolean') {
-        store.getState().patchProfile({
-          notifications_enabled: data.notifications_enabled,
-        });
-      }
-    } catch {
-      // The subscription is saved; the profile page reloads the setting.
-    }
-  }
-
-  // done names what the action did, for the notice («Added to the cart.»).
-  async function action(
-    work: () => Promise<void>,
-    done: ProductActionDone,
-  ) {
-    if (actionPending.current) {
-      return;
-    }
-    actionPending.current = true;
-    setPending(true);
-    setMessage('');
-    setMessageError(false);
-    setMessageFields(noFieldErrors);
-    setMessageSignIn(false);
-    try {
-      await work();
-      setMessage(copy[done]);
-    } catch (reason) {
-      if (
-        reason instanceof OrionplaceApiError &&
-        reason.status === 401 &&
-        !init?.is_authenticated
-      ) {
-        signIn();
-      } else {
-        setMessage(errorText(reason, copy.failed));
-        setMessageError(true);
-        if (reason instanceof OrionplaceApiError) {
-          setMessageFields(reason.fields);
-          setMessageSignIn(reason.codes.includes('sign_in'));
-        }
-      }
-    } finally {
-      actionPending.current = false;
-      setPending(false);
-    }
-  }
-
-  const controls                            = useMemo<ProductControls>(
-    () => ({
-      productActionsDisabled: pending,
-      variantPending,
-      variantError,
-      onSelectVariant(selection) {
-        const target  = selection.variant.reload_product;
-        if (
-          !Number.isInteger(target) ||
-          Number(target) < 1 ||
-          product(Number(target))
-        ) {
-          return;
-        }
-        const key     = `product:${selection.product}`;
-        requests.current.get(key)?.abort();
-        const request = new AbortController();
-        requests.current.set(key, request);
-        products.getState().setProductRequest(Number(target), 'loading');
-        setVariantPending(true);
-        setVariantError(false);
-        void refreshProduct(Number(target))
-          .then(() => products.getState().setProductRequest(Number(target)))
-          .catch(() => {
-            if (!request.signal.aborted) {
-              products.getState().setProductRequest(Number(target), 'failed');
-              setVariantError(true);
-            }
-          })
-          .finally(() => {
-            if (requests.current.get(key) === request) {
-              requests.current.delete(key);
-              setVariantPending(requests.current.size > 0);
-            }
-          });
-      },
-      onRequestSecondaryVariants(selection) {
-        const group   = selection.productGroup;
-        const value   = selection.variant.id;
-        const key     = `secondary:${group}:${value}`;
-        if (
-          requests.current.has(key) ||
-          products.getState().getSecondaryVariants(group, value)?.status ===
-            'ready'
-        ) {
-          return;
-        }
-        const request = new AbortController();
-        requests.current.set(key, request);
-        products.getState().setSecondaryVariants(group, value, {
-          status: 'loading',
-        });
-        setVariantPending(true);
-        setVariantError(false);
-        void api
-          .request<IProductSecondaryVariants>(
-            'products_request_secondary_variants',
-            { product_group: group, main_variant_value: value },
-            request.signal,
-          )
-          .then((data) => {
-            if (!request.signal.aborted) {
-              products.getState().setSecondaryVariants(group, value, {
-                status: 'ready',
-                data,
-              });
-            }
-          })
-          .catch((reason) => {
-            if (!request.signal.aborted) {
-              products.getState().setSecondaryVariants(group, value, {
-                status:
-                  reason instanceof OrionplaceApiError &&
-                  reason.kind === 'unavailable'
-                    ? 'unavailable'
-                    : 'failed',
-              });
-              setVariantError(true);
-            }
-          })
-          .finally(() => {
-            if (requests.current.get(key) === request) {
-              requests.current.delete(key);
-              setVariantPending(requests.current.size > 0);
-            }
-          });
-      },
-      onToggleFavorite(selection) {
-        if (!init?.is_authenticated) {
-          signIn();
-          return;
-        }
-        void action(async () => {
-          products
-            .getState()
-            .setPendingFavorite(selection.product, selection.selected);
-          try {
-            let data: { wish_id?: number; count?: number };
-            try {
-              data = selection.selected
-                ? await api.request<{ wish_id?: number; count?: number }>(
-                    'products_whishlist_add',
-                    { product: selection.product },
-                  )
-                : await api.request<{ count?: number }>(
-                    'products_whishlist_delete_by_product_id',
-                    {},
-                    undefined,
-                    { product_id: selection.product },
-                  );
-            } catch (reason) {
-              await recoverFavorite(reason, selection);
-              return;
-            }
-            if (selection.selected && Number.isInteger(data.wish_id)) {
-              patch(selection.product, { whishlist_id: Number(data.wish_id) });
-            } else if (selection.selected) {
-              await refreshProduct(selection.product);
-            } else {
-              patch(selection.product, { whishlist_id: null });
-            }
-            if (Number.isInteger(data.count)) {
-              products
-                .getState()
-                .setProductCounters({ c_wishlist: data.count });
-            }
-          } finally {
-            products.getState().setPendingFavorite(selection.product);
-          }
-        }, selection.selected ? 'favoriteAdded' : 'favoriteRemoved');
-      },
-      onAdd(selection) {
-        // Adding a product already in the cart sets its new quantity.
-        const inCart = Boolean(product(selection.product)?.cart_counts?.cart_id);
-
-        void action(async () => {
-          const data    = await api.request<{
-            cart_item_id?: number;
-            c_real_left?: number;
-            c_cart_positions?: number;
-          }>('cart_guest_first_set', {
-            product: selection.product,
-            quantity: selection.quantity,
-          });
-          const current = product(selection.product);
-          if (current && Number.isInteger(data.cart_item_id)) {
-            patch(selection.product, {
-              cart_counts: {
-                ...current.cart_counts,
-                cart_id: Number(data.cart_item_id),
-                modal_quantity: selection.quantity,
-              },
-              ...(typeof data.c_real_left === 'number'
-                ? { c_real_left: data.c_real_left }
-                : {}),
-            });
-          } else {
-            await refreshProduct(selection.product);
-          }
-          if (Number.isInteger(data.c_cart_positions)) {
-            products.getState().setProductCounters({
-              c_cart_positions: data.c_cart_positions,
-            });
-          }
-        }, inCart ? 'cartUpdated' : 'cartAdded');
-      },
-      onRemove(selection) {
-        void action(async () => {
-          const data = await api.request<{
-            c_cart_positions?: number;
-          }>('cart_guest_remove_by_cart_item', {}, undefined, {
-            cart_item_id: selection.cartItem,
-          });
-          patch(selection.product, { cart_counts: null });
-          if (Number.isInteger(data.c_cart_positions)) {
-            products.getState().setProductCounters({
-              c_cart_positions: data.c_cart_positions,
-            });
-          }
-        }, 'cartRemoved');
-      },
-      onSubscribe(selection) {
-        if (!init?.is_authenticated) {
-          signIn();
-          return;
-        }
-        // Availability notifications go to the profile email address.
-        if (!profile?.email) {
-          setMessage(copy.email);
-          setMessageError(true);
-          return;
-        }
-        void action(async () => {
-          await api.request('product_subscription_add', {}, undefined, {
-            product_id: selection.product,
-          });
-          await refreshNotificationState();
-          await refreshProduct(selection.product);
-        }, 'subscribed');
-      },
-      onUnsubscribe(selection) {
-        if (!init?.is_authenticated) {
-          signIn();
-          return;
-        }
-        void action(async () => {
-          await api.request('product_subscription_delete', {}, undefined, {
-            product_id: selection.product,
-          });
-          await refreshProduct(selection.product);
-        }, 'unsubscribed');
-      },
-      onPreorder(selection) {
-        const current = product(selection.product);
-        if (
-          current &&
-          productAvailability(current, init?.variables?.allow_preorder)
-            .canPreorder
-        ) {
-          setMessage('');
-          setPreorder(selection.product);
-        }
-      },
-      preorder,
-      preorderError: preorder !== undefined && messageError ? message : '',
-      preorderFieldErrors:
-        preorder !== undefined && messageError ? messageFields : noFieldErrors,
-      preorderSignIn: preorder !== undefined && messageError && messageSignIn,
-      signIn,
-      submitPreorder(selection) {
-        void action(async () => {
-          const body: Record<string, unknown> = {
-            product: selection.product,
-          };
-          if (!init?.is_authenticated) {
-            if (selection.email) {
-              body.email = selection.email;
-            }
-            if (selection.phone) {
-              body.phone = selection.phone;
-            }
-          }
-          await api.request('preorders_create', body);
-          setPreorder(undefined);
-        }, 'preorderSaved');
-      },
-      closePreorder() {
-        setPreorder(undefined);
-      },
-    }),
-    [
-      api,
-      init,
-      locale,
-      message,
-      messageError,
-      messageFields,
-      messageSignIn,
-      pending,
-      preorder,
-      products,
-      profile?.email,
-      store,
-      variantError,
-      variantPending,
-    ],
-  );
-
-  return (
-    <StorefrontContext.Provider value={controls}>
-      {children}
-      {/* An open preorder dialog shows its own error, as in Nuxt and Svelte. */}
-      {message && preorder === undefined ? (
-        <div
-          role={messageError ? 'alert' : 'status'}
-          aria-live="polite"
-          className={`${styles.notice} ${messageError ? styles.noticeError : ''}`}
-        >
-          {message}
-        </div>
-      ) : null}
-      {preorderDialog ? (
-        <ProductPreorderDialog
-          productId={preorder}
-          pending={pending}
-          error={controls.preorderError}
-          fieldErrors={controls.preorderFieldErrors}
-          suggestSignIn={controls.preorderSignIn}
-          onClose={controls.closePreorder}
-          onSubmit={controls.submitPreorder}
-          onSignIn={controls.signIn}
-        />
-      ) : null}
-    </StorefrontContext.Provider>
-  );
-}
-
-export function useOrionplaceStorefront() {
-  const value = useContext(StorefrontContext);
-  if (!value) {
-    throw new Error(
-      'Render storefront pages inside <OrionplaceStorefrontProvider>.',
-    );
-  }
-  return value;
-}