orionplace-react 0.1.0 → 0.2.0

package/templates/hooks/useOrionplaceStorefront.tsx

@@ -0,0 +1,575 @@
+'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';
+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.
+    }
+  }
+
+  async function action(work: () => Promise<void>) {
+    if (actionPending.current) {
+      return;
+    }
+    actionPending.current = true;
+    setPending(true);
+    setMessage('');
+    setMessageError(false);
+    setMessageFields(noFieldErrors);
+    setMessageSignIn(false);
+    try {
+      await work();
+      setMessage(copy.saved);
+    } 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);
+          }
+        });
+      },
+      onAdd(selection) {
+        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,
+            });
+          }
+        });
+      },
+      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,
+            });
+          }
+        });
+      },
+      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);
+        });
+      },
+      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);
+        });
+      },
+      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);
+        });
+      },
+      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;
+}