@salla.sa/twilight-theme-engine 1.0.85 → 1.0.87

package/tailwind/routes/account/wallet/loader.ts.txt

@@ -0,0 +1,27 @@
+import type { WalletPageProps } from './types';
+import type { LoaderContext } from '../../types';
+import { wallet } from '../../../api/wallet';
+import { getTwilightContext } from '../../../twilight/context';
+import { orUnauthorized, unauthorized } from '../../../providers/NavigationProvider';
+import { getAuthToken } from '../../../api/client';
+import { RouteId } from '../../../router/route-ids';
+
+export async function walletLoader(ctx: LoaderContext): Promise<WalletPageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  const pageNum = Number(ctx.search?.page) || 1;
+  const data = await orUnauthorized(wallet.list({ page: pageNum }));
+
+  const i18n = getTwilightContext().i18n;
+  return {
+    page: {
+      title: i18n.t('common.titles.wallet') || 'Wallet',
+      slug: RouteId.CUSTOMER_WALLET,
+    },
+    query: { page: pageNum },
+    transactions: data.items,
+    balance: data.balance,
+    pagination: {
+      next: data.next,
+    },
+  };
+}

package/tailwind/routes/account/wallet/types.ts.txt

@@ -0,0 +1,11 @@
+import type { Page } from '../../../types';
+import type { RoutePagination, PageQuery } from '../../types';
+import type { TransactionItem } from '../../../api/wallet';
+
+export interface WalletPageProps {
+  page: Page;
+  query: PageQuery;
+  transactions: TransactionItem[];
+  balance: number;
+  pagination: RoutePagination;
+}

package/tailwind/routes/account/wishlist/WishlistPage.tsx.txt

@@ -0,0 +1,314 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { ItemsList } from '@salla.sa/twilight-components-react';
+import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { wishlist } from '../../../api/wishlist';
+import type { Product } from '../../../types';
+import { HookSlot, useWishlist, useMoney } from '../../../hooks';
+import { useTranslation } from '../../../providers/I18nProvider';
+import type { WishlistPageProps } from './types';
+import { WishlistShareBar, useWishlistShare } from './WishlistShare';
+import { NoContent, Image } from '../../../components/common';
+import { useLocation } from '../../../providers/NavigationProvider';
+import { onSallaEvent } from '../../../utils/sdk-helpers';
+
+interface WishlistCardSelection {
+  /** "Share specific items" mode: the card shows a checkbox and toggles on click. */
+  selecting: boolean;
+  selected: boolean;
+  onToggle: (id: number) => void;
+}
+
+// The loaded component copies host attributes (not properties) onto its inner salla-button.
+const setAddButtonAttributes = (el: HTMLElement | null) => {
+  el?.setAttribute('loader-position', 'center');
+  el?.setAttribute('fill', 'outline');
+};
+
+const REMOVING_MS = 300;
+
+const REMOVING_STYLE: CSSProperties = {
+  opacity: 0,
+  transform: 'scale(0.95)',
+  transition: `opacity ${REMOVING_MS}ms ease-in-out, transform ${REMOVING_MS}ms ease-in-out`,
+};
+
+function WishlistCard({
+  product: prod,
+  selection,
+  removing,
+  onRemoved,
+}: {
+  product: Product;
+  selection?: WishlistCardSelection;
+  /** Fades the card out, then calls `onRemoved` once the fade ends. */
+  removing?: boolean;
+  onRemoved?: (id: number) => void;
+}) {
+  const { remove } = useWishlist();
+  const { format } = useMoney();
+
+  // Drops the card even when `transitionend` never fires (hidden tab, overridden styles).
+  useEffect(() => {
+    if (!removing) return;
+    const timer = setTimeout(() => onRemoved?.(Number(prod.id)), REMOVING_MS + 50);
+    return () => clearTimeout(timer);
+  }, [removing, onRemoved, prod.id]);
+
+  const handleRemove = () => {
+    if (prod.id) {
+      remove(Number(prod.id));
+    }
+  };
+
+  const displayPrice = prod.sale_price ?? prod.price;
+  const regularPrice = prod.regular_price;
+
+  return (
+    <div
+      id={`wishlist-product-${prod.id}`}
+      className={`product-entry product-entry--wishlist${selection?.selected ? ' is-selected' : ''}`}
+      style={removing ? REMOVING_STYLE : undefined}
+      onTransitionEnd={(event) => {
+        if (removing && event.target === event.currentTarget && event.propertyName === 'opacity') {
+          onRemoved?.(Number(prod.id));
+        }
+      }}
+    >
+      {selection?.selecting && (
+        <input
+          type="checkbox"
+          className="s-wishlist-select shrink-0 rtl:ml-4 ltr:mr-4"
+          aria-label={prod.name}
+          checked={selection.selected}
+          onChange={() => selection.onToggle(Number(prod.id))}
+        />
+      )}
+      <div className="flex items-center mb-4 sm:mb-0">
+        <a href={prod.url} className="product-entry__image">
+          <Image
+            className="object-cover w-full h-full"
+            src={prod.image?.url}
+            alt={prod.image?.alt ?? prod.name}
+            aspectRatio="1/1"
+          />
+        </a>
+        <div className="flex-1 rtl:pr-5 ltr:pl-5">
+          <h3 className="text-sm text-gray-800 leading-6 mb-1.5 rtl:pl-5 ltr:pr-5 rtl:md:pl-8 ltr:md:pr-8 line-clamp-1">
+            <a href={prod.url}>{prod.name}</a>
+          </h3>
+          <div className="w-full center-between">
+            {prod.is_on_sale && regularPrice ? (
+              <div className="space-x-1 rtl:space-x-reverse">
+                <h4 className="inline-block text-sm font-bold text-red-400">
+                  {format(displayPrice)}
+                </h4>
+                <span className="text-sm text-gray-500 line-through">{format(regularPrice)}</span>
+              </div>
+            ) : (
+              <h4 className="text-sm font-bold">{format(displayPrice)}</h4>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center space-x-4 rtl:space-x-reverse">
+        <SallaAddProductButton
+          ref={setAddButtonAttributes}
+          productStatus={prod.status}
+          productId={prod.id}
+          productType={prod.type}
+          loaderPosition="center"
+          fill="outline"
+          className="flex-grow w-full sm:grow-0 md:w-40"
+        />
+        <SallaButton
+          loaderPosition="center"
+          shape="icon"
+          size="small"
+          color="danger"
+          className="btn--delete"
+          onClick={handleRemove}
+        >
+          <i className="sicon-cancel" />
+        </SallaButton>
+      </div>
+    </div>
+  );
+}
+
+/** The loaded wishlist pages, reloaded from the server once every loaded card is removed (like Twig). */
+function useWishlistItems(
+  { query, products, pagination }: WishlistPageProps,
+  onRemoved: (id: number) => void
+) {
+  const queryClient = useQueryClient();
+  // Track the next page to load (starts at page 2 since page 1 is SSR)
+  const nextPageRef = useRef(query.page + 1);
+  const [removedIds, setRemovedIds] = useState<ReadonlySet<number>>(() => new Set());
+  const [removingIds, setRemovingIds] = useState<ReadonlySet<number>>(() => new Set());
+  const [reloaded, setReloaded] = useState<{
+    items: Product[];
+    next: string | null;
+    generation: number;
+  } | null>(null);
+  const loadedRef = useRef({
+    ids: products.map((prod) => Number(prod.id)),
+    hasMore: !!pagination?.next,
+  });
+
+  // A `?page=` navigation keeps this instance, so drop what the previous page removed or reloaded.
+  const [loadedProducts, setLoadedProducts] = useState(products);
+  if (loadedProducts !== products) {
+    setLoadedProducts(products);
+    setRemovedIds(new Set());
+    setRemovingIds(new Set());
+    setReloaded(null);
+  }
+
+  useEffect(() => {
+    nextPageRef.current = query.page + 1;
+    loadedRef.current = {
+      ids: products.map((prod) => Number(prod.id)),
+      hasMore: !!pagination?.next,
+    };
+  }, [products, query.page, pagination?.next]);
+
+  useEffect(() => {
+    const handleRemoved = (_response: unknown, id: unknown) => {
+      const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      (reduceMotion ? setRemovedIds : setRemovingIds)((current) =>
+        new Set(current).add(Number(id))
+      );
+      onRemoved(Number(id));
+    };
+
+    return onSallaEvent('wishlist::removed', handleRemoved);
+  }, [onRemoved]);
+
+  useEffect(() => {
+    const { ids, hasMore } = loadedRef.current;
+    if (!ids.length || !ids.every((id) => removedIds.has(id))) return;
+
+    const reset = (items: Product[], next: string | null) => {
+      nextPageRef.current = query.page + 1;
+      loadedRef.current = { ids: items.map((prod) => Number(prod.id)), hasMore: !!next };
+      setRemovedIds(new Set());
+      setRemovingIds(new Set());
+      setReloaded((current) => ({ items, next, generation: (current?.generation ?? 0) + 1 }));
+    };
+
+    if (!hasMore) {
+      reset([], null);
+      return;
+    }
+
+    let cancelled = false;
+    queryClient
+      .fetchQuery({ ...wishlist.queries.list({ page: query.page }), staleTime: 0 })
+      .then((result) => {
+        if (!cancelled) reset(result.items, result.next);
+      })
+      // A failed reload keeps the list as it is; later pages still load on scroll.
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
+  }, [removedIds, query.page, products, queryClient]);
+
+  const loader = async () => {
+    const pageToLoad = nextPageRef.current;
+    const result = await wishlist.list({ page: pageToLoad });
+
+    nextPageRef.current = pageToLoad + 1;
+    loadedRef.current = {
+      ids: [...loadedRef.current.ids, ...result.items.map((prod) => Number(prod.id))],
+      hasMore: !!result.next,
+    };
+
+    return {
+      items: result.items,
+      next: result.next,
+    };
+  };
+
+  const finishRemoving = useCallback((id: number) => {
+    setRemovedIds((current) => (current.has(id) ? current : new Set(current).add(id)));
+  }, []);
+
+  return {
+    items: reloaded ? reloaded.items : products,
+    next: reloaded ? reloaded.next : pagination?.next,
+    generation: reloaded?.generation ?? 0,
+    removedIds,
+    removingIds,
+    finishRemoving,
+    loader,
+  };
+}
+
+export function WishlistPage(props: WishlistPageProps) {
+  const { t } = useTranslation();
+  const { pathname, searchStr } = useLocation();
+  const shareState = useWishlistShare();
+  const selectedIdSet = useMemo(() => new Set(shareState.selectedIds), [shareState.selectedIds]);
+  const { items, next, generation, removedIds, removingIds, finishRemoving, loader } =
+    useWishlistItems(props, shareState.deselect);
+  const hasRemaining = items.some((prod) => !removedIds.has(Number(prod.id)));
+
+  return (
+    <div className="space-y-5" id="wishlist">
+      {/* The SDK unconditionally auto-renders its own `<salla-wishlist-actions>` into this
+          slot on every `customer.wishlist` page (tools/twilight's init-static-sections.js),
+          but that widget only works alongside a sibling `<salla-products-list>` web
+          component -- this page renders its products via the React-native `ItemsList`
+          instead, so the SDK's widget never finds one and sits permanently disabled.
+          `WishlistShareBar` below is this page's own, fully working replacement for the
+          exact same "Share" feature. The slot itself stays (removing it would also drop
+          whatever themes/apps register here via the hook registry, not just this widget);
+          `#wishlist > salla-wishlist-actions` (user-pages.scss) hides just the dead
+          SDK widget, which the SDK always inserts as this element's first child. */}
+      <HookSlot name="customer:wishlist.items.start" />
+      <WishlistShareBar state={shareState} hasProducts={hasRemaining || !!next} />
+      <ItemsList<Product>
+        key={generation}
+        items={items}
+        loader={loader}
+        mode={next ? 'infinite' : 'static'}
+        pageUrl={pathname + searchStr}
+        className="s-products-list"
+        itemsClassName="s-products-list-wrapper s-products-list-row-cards"
+        empty={
+          <div className="text-center py-16">
+            <NoContent
+              icon="sicon-heart"
+              message={t('common.errors.no_wishlist', "You don't have any wishes")}
+              actionLabel={t('pages.offer.continue_shopping', 'Continue shopping')}
+              actionUrl="/"
+            />
+          </div>
+        }
+        t={(key, fallback) => t(key, fallback || key)}
+      >
+        {(items) => {
+          const remaining = items.filter((item) => !removedIds.has(Number(item.id)));
+          shareState.loadedIdsRef.current = remaining.map((item) => Number(item.id));
+          return remaining.map((prod) => (
+            <WishlistCard
+              key={prod.id}
+              product={prod}
+              removing={removingIds.has(Number(prod.id))}
+              onRemoved={finishRemoving}
+              selection={{
+                selecting: shareState.selecting,
+                selected: selectedIdSet.has(Number(prod.id)),
+                onToggle: shareState.toggleSelected,
+              }}
+            />
+          ));
+        }}
+      </ItemsList>
+      <HookSlot name="customer:wishlist.items.end" />
+    </div>
+  );
+}

package/tailwind/routes/account/wishlist/WishlistShare.tsx.txt

@@ -0,0 +1,248 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+// The eager (non-deferred) export: the share dialog is opened imperatively through a ref, and the
+// deferred wrapper doesn't attach it until it has hydrated — a click before that would do nothing.
+import { SallaSocialShareCore as SallaSocialShare } from '@salla.sa/twilight-components-react/social-share';
+import { useTranslation } from '../../../providers/I18nProvider';
+
+type ShareResponse = { data?: { url?: string }; url?: string } | undefined;
+type SocialShareElement = HTMLElement & {
+  url?: string;
+  refresh?: () => Promise<void>;
+  open?: () => Promise<void>;
+  close?: () => Promise<void>;
+};
+
+/**
+ * Share state for the wishlist page: the "Share" dropdown (share the whole list / share
+ * specific items), the selection used by "specific items", and the share request itself.
+ * Mirrors what the SDK's `<salla-wishlist-actions>` does, but drives the page's own React
+ * list — that component needs a sibling `<salla-products-list>`, which this page doesn't render.
+ */
+export function useWishlistShare() {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [selecting, setSelecting] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  const [sharing, setSharing] = useState(false);
+  const [shareUrl, setShareUrl] = useState('');
+  /** Ids of every product currently rendered (later cursor pages included), for "select all". */
+  const loadedIdsRef = useRef<number[]>([]);
+  const socialShareRef = useRef<SocialShareElement | null>(null);
+
+  const share = useCallback(async (ids: number[], selectAll: boolean) => {
+    if (!window.salla?.wishlist?.share) return;
+    setSharing(true);
+    try {
+      const response = (await window.salla.wishlist.share(ids, selectAll)) as ShareResponse;
+      const url = response?.data?.url || response?.url || '';
+      if (!url) return;
+      setShareUrl(url);
+      const element = socialShareRef.current;
+      if (element) {
+        element.url = url;
+        await element.refresh?.();
+        await element.open?.();
+      }
+    } catch {
+      // The SDK reports a failed share itself (notification); nothing to recover here.
+    } finally {
+      setSharing(false);
+    }
+  }, []);
+
+  const shareAll = useCallback(() => {
+    setMenuOpen(false);
+    void share([], true);
+  }, [share]);
+
+  const shareSelected = useCallback(() => {
+    if (selectedIds.length) void share(selectedIds, false);
+  }, [share, selectedIds]);
+
+  const startSelecting = useCallback(() => {
+    setMenuOpen(false);
+    setSelecting(true);
+  }, []);
+
+  const cancelSelecting = useCallback(() => {
+    setSelecting(false);
+    setSelectedIds([]);
+    setShareUrl('');
+    void socialShareRef.current?.close?.();
+  }, []);
+
+  const toggleSelected = useCallback((id: number) => {
+    setShareUrl('');
+    setSelectedIds((current) =>
+      current.includes(id) ? current.filter((existing) => existing !== id) : [...current, id]
+    );
+  }, []);
+
+  const selectedIdsRef = useRef(selectedIds);
+  useEffect(() => {
+    selectedIdsRef.current = selectedIds;
+  }, [selectedIds]);
+
+  const deselect = useCallback((id: number) => {
+    if (!selectedIdsRef.current.includes(id)) return;
+    // A link built for the old selection would still offer the removed product.
+    setShareUrl('');
+    const element = socialShareRef.current;
+    if (element) {
+      element.url = undefined;
+      void element.close?.();
+    }
+    setSelectedIds((current) => current.filter((existing) => existing !== id));
+  }, []);
+
+  const toggleAll = useCallback(() => {
+    setShareUrl('');
+    setSelectedIds((current) =>
+      current.length && current.length === loadedIdsRef.current.length
+        ? []
+        : [...loadedIdsRef.current]
+    );
+  }, []);
+
+  return {
+    menuOpen,
+    setMenuOpen,
+    selecting,
+    selectedIds,
+    sharing,
+    shareUrl,
+    loadedIdsRef,
+    socialShareRef,
+    shareAll,
+    shareSelected,
+    startSelecting,
+    cancelSelecting,
+    toggleSelected,
+    toggleAll,
+    deselect,
+  };
+}
+
+export type WishlistShareState = ReturnType<typeof useWishlistShare>;
+
+/** The bar above the wishlist: the "Share" dropdown, or — while picking products — the selection controls. */
+export function WishlistShareBar({
+  state,
+  hasProducts,
+}: {
+  state: WishlistShareState;
+  hasProducts: boolean;
+}) {
+  const { t } = useTranslation();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const { menuOpen, setMenuOpen } = state;
+
+  // Close the dropdown on an outside click or Escape.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setMenuOpen(false);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [menuOpen, setMenuOpen]);
+
+  const selectedCount = state.selectedIds.length;
+  const allSelected = selectedCount > 0 && selectedCount === state.loadedIdsRef.current.length;
+
+  return (
+    <div ref={rootRef} className="s-wishlist-actions">
+      <div className="s-wishlist-actions-bar flex items-center justify-end gap-3 mb-3">
+        {state.selecting ? (
+          <div className="s-wishlist-actions-selection flex items-center gap-3">
+            <label className="s-wishlist-actions-select-all inline-flex items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                checked={allSelected}
+                ref={(input) => {
+                  if (input) input.indeterminate = selectedCount > 0 && !allSelected;
+                }}
+                onChange={state.toggleAll}
+              />
+              {t('pages.wishlist.select_all', 'Select all')}
+            </label>
+            <SallaButton
+              color="primary"
+              disabled={selectedCount === 0 || state.sharing}
+              onClick={state.shareSelected}
+            >
+              {t('pages.wishlist.share', 'Share')}
+              {selectedCount > 0 ? ` (${selectedCount})` : ''}
+            </SallaButton>
+            <SallaButton fill="outline" color="light" onClick={state.cancelSelecting}>
+              {t('common.elements.cancel', 'Cancel')}
+            </SallaButton>
+          </div>
+        ) : (
+          <div className="s-wishlist-actions-dropdown relative">
+            <SallaButton
+              color="primary"
+              fill="outline"
+              disabled={!hasProducts || state.sharing}
+              aria-haspopup="true"
+              aria-expanded={menuOpen}
+              onClick={() => setMenuOpen(!menuOpen)}
+            >
+              <span className="flex items-center justify-center gap-2">
+                <i className="sicon-share-alt" aria-hidden="true" />
+                {t('pages.wishlist.share', 'Share')}
+                <i className="sicon-keyboard_arrow_down" aria-hidden="true" />
+              </span>
+            </SallaButton>
+            {menuOpen && (
+              <ul
+                role="menu"
+                className="s-wishlist-actions-menu absolute z-10 mt-2 min-w-48 rounded-md bg-white py-2 shadow-default rtl:right-0 ltr:left-0"
+              >
+                <li role="none">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className="s-wishlist-actions-item block w-full px-4 py-2 text-start text-sm text-gray-700 hover:bg-gray-50"
+                    onClick={state.shareAll}
+                  >
+                    {t('pages.wishlist.share_all', 'Share the list')}
+                  </button>
+                </li>
+                <li role="none">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className="s-wishlist-actions-item block w-full px-4 py-2 text-start text-sm text-gray-700 hover:bg-gray-50"
+                    onClick={state.startSelecting}
+                  >
+                    {t('pages.wishlist.share_specific', 'Share specific items')}
+                  </button>
+                </li>
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+      {/* Same setup as the SDK's <salla-wishlist-actions>: the centered modal variant, opened by the
+          dropdown rather than by the component's own round share button, so the default
+          `widget` slot (that button) is replaced by an empty anchor. */}
+      <SallaSocialShare
+        ref={state.socialShareRef as never}
+        url={state.shareUrl || undefined}
+        mode="modal"
+        modalTitle={t('pages.wishlist.share_list_title', 'Share wishlist')}
+        className="s-wishlist-actions-social"
+      >
+        <span slot="widget" className="s-wishlist-actions-social-anchor" aria-hidden="true" />
+      </SallaSocialShare>
+    </div>
+  );
+}

package/tailwind/routes/account/wishlist/index.tsx.txt

@@ -0,0 +1,40 @@
+import type { HeadDescriptor } from '../../../utils/head';
+import { buildHreflangAlternates } from '../../../utils/baseHead';
+import { lazy } from 'react';
+import { wishlistLoader } from './loader';
+import type { WishlistPageProps } from './types';
+import type { LoaderContext } from '../../types';
+import type { TwilightContext } from '../../../twilight/context';
+import { RouteId } from '../../../router/route-ids';
+
+const LazyWishlistPage = lazy(() =>
+  import('./WishlistPage').then((m) => ({ default: m.WishlistPage }))
+);
+
+export const WishlistPage = LazyWishlistPage;
+export { wishlistLoader } from './loader';
+export type { WishlistPageProps } from './types';
+
+export const Wishlist = {
+  id: RouteId.CUSTOMER_WISHLIST,
+  loader: async (
+    ctx: LoaderContext,
+    extend?: (
+      data: WishlistPageProps,
+      ctx: { params: Record<string, never> }
+    ) => Promise<Record<string, unknown>> | Record<string, unknown>
+  ): Promise<WishlistPageProps> => {
+    const data = await wishlistLoader(ctx);
+    if (extend) {
+      const extra = await extend(data, { params: {} });
+      return { ...data, ...extra } as WishlistPageProps;
+    }
+    return data;
+  },
+  head: (ctx: TwilightContext, data: WishlistPageProps): HeadDescriptor => ({
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  }),
+  Component: LazyWishlistPage,
+} as const;

package/tailwind/routes/account/wishlist/loader.ts.txt

@@ -0,0 +1,26 @@
+import type { WishlistPageProps } from './types';
+import type { LoaderContext } from '../../types';
+import { wishlist } from '../../../api/wishlist';
+import { getTwilightContext } from '../../../twilight/context';
+import { orUnauthorized, unauthorized } from '../../../providers/NavigationProvider';
+import { getAuthToken } from '../../../api/client';
+import { RouteId } from '../../../router/route-ids';
+
+export async function wishlistLoader(ctx: LoaderContext): Promise<WishlistPageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  const pageNum = Number(ctx.search?.page) || 1;
+  const data = await orUnauthorized(wishlist.list({ page: pageNum }));
+
+  const i18n = getTwilightContext().i18n;
+  return {
+    page: {
+      title: i18n.t('common.titles.wishlist') || 'Wishlist',
+      slug: RouteId.CUSTOMER_WISHLIST,
+    },
+    query: { page: pageNum },
+    products: data.items,
+    pagination: {
+      next: data.next,
+    },
+  };
+}

package/tailwind/routes/account/wishlist/types.ts.txt

@@ -0,0 +1,9 @@
+import type { Page, Product } from '../../../types';
+import type { RoutePagination, PageQuery } from '../../types';
+
+export interface WishlistPageProps {
+  page: Page;
+  query: PageQuery;
+  products: Product[];
+  pagination: RoutePagination;
+}