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

package/tailwind/routes/brands/BrandsPage.tsx.txt

@@ -0,0 +1,179 @@
+import { memo, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useWindowScroll } from '@uidotdev/usehooks';
+import { Link, Breadcrumb, NoContent, Image } from '../../components/common';
+import { HookSlot } from '../../hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import { brand } from '../../api/brands';
+import type { Brand, BrandsGroup, BrandsPageProps } from './types';
+
+function byLetter(brands: Brand[], locale: string): [string, Brand[]][] {
+  const groups: BrandsGroup = {};
+  for (const item of brands) {
+    (groups[(locale === 'ar' ? item.ar_char : item.en_char) || '#'] ??= []).push(item);
+  }
+  // Code point order is alphabetical for Arabic and Latin, and the same on server and browser.
+  return Object.entries(groups).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+}
+
+interface BrandSectionProps {
+  char: string;
+  brands: Brand[];
+  sectionRef: (el: HTMLElement | null) => void;
+}
+
+function BrandSection({ char, brands, sectionRef }: BrandSectionProps) {
+  return (
+    <section
+      id={`brand-section-${char}`}
+      ref={sectionRef}
+      className="pt-24 first:pt-16 md:first:pt-24"
+    >
+      <div className="flex items-center mb-10">
+        <span data-id={char} className="brand-char">
+          <span className="fix-align">{char}</span>
+        </span>
+        <div className="bg-border-color h-px flex-1"></div>
+      </div>
+      <div className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 grid-flow-row gap-4 md:gap-8">
+        {brands.map((item) => (
+          // A grid of logos would preload a brand for every logo the mouse crosses.
+          <Link key={item.id} to={`/brands/${item.id}`} className="brand-item" preload={false}>
+            <Image
+              className="max-h-full"
+              width={400}
+              height={300}
+              src={item.logo}
+              alt={item.name}
+            />
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+const PAGES_PER_WAVE = 6;
+
+// One retry per page, so a network blip does not drop it.
+const fetchPage = (page: number) => brand.list(page).catch(() => brand.list(page));
+
+async function fetchWave(from: number): Promise<{ items: Brand[]; done: boolean }> {
+  const settled = await Promise.allSettled(
+    Array.from({ length: PAGES_PER_WAVE }, (_, i) => fetchPage(from + i))
+  );
+  const pages = settled.flatMap((result) => (result.status === 'fulfilled' ? [result.value] : []));
+  return {
+    items: pages.flatMap((result) => result.items),
+    // Stop at the last page, or when a whole wave fails.
+    done: pages.length === 0 || pages.some((result) => !result.next),
+  };
+}
+
+/**
+ * The first page plus every page after `next`, fetched in the background so the letter menu is
+ * complete without scrolling. The API has no page count, so pages load in parallel waves.
+ */
+function useAllBrands(first: Brand[], next: string | null | undefined, locale: string): Brand[] {
+  const startPage = Number(next?.match(/[?&]page=(\d+)/)?.[1]) || 0;
+  const { data, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({
+    queryKey: ['brands', 'after-first-page', locale, startPage],
+    queryFn: ({ pageParam }) => fetchWave(pageParam),
+    initialPageParam: startPage,
+    getNextPageParam: (wave, _waves, from) => (wave.done ? undefined : from + PAGES_PER_WAVE),
+    enabled: startPage > 0,
+    // Not reused across visits: it must match the first page the loader just fetched.
+    gcTime: 0,
+  });
+
+  useEffect(() => {
+    if (hasNextPage && !isFetchingNextPage) void fetchNextPage();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  return useMemo(() => {
+    const extra = data?.pages.flatMap((wave) => wave.items) ?? [];
+    return extra.length ? [...first, ...extra] : first;
+  }, [first, data]);
+}
+
+function BrandsPageComponent({ page, brands, pagination }: BrandsPageProps) {
+  const { t, locale } = useTranslation();
+  const allBrands = useAllBrands(brands, pagination?.next, locale);
+  const brandEntries = useMemo(() => byLetter(allBrands, locale), [allBrands, locale]);
+  const [selectedChar, setSelectedChar] = useState<string | null>(null);
+  const sectionRefs = useRef<Record<string, HTMLElement | null>>({});
+
+  // Use useWindowScroll hook instead of manual listener
+  const [{ y }] = useWindowScroll();
+  const isSticky = (y ?? 0) > 200;
+
+  // Handle brand nav item click - matches brands.js toggle class logic
+  const handleBrandClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const char = e.currentTarget.dataset.id;
+    if (char) {
+      setSelectedChar(char);
+      sectionRefs.current[char]?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, []);
+
+  return (
+    <div className="container mb-20">
+      <Breadcrumb page={page} />
+
+      <div className="flex justify-between pt-2 pb-6">
+        <h1 className="font-bold mb-6 md:mb-0">{page.title}</h1>
+      </div>
+
+      {brandEntries.length > 0 ? (
+        <>
+          <div className="brands-nav-wrap">
+            <ul
+              id="brands-nav"
+              className={`brands-nav ${isSticky ? 'is-sticky' : 'is-not-sticky'}`}
+            >
+              <li></li>
+              {brandEntries.map(([char]) => (
+                <li key={char}>
+                  <a
+                    className={`brands-nav__item ${selectedChar === char ? 'is-selected' : 'unselected'}`}
+                    href={`#brand-section-${char}`}
+                    onClick={handleBrandClick}
+                    data-id={char}
+                  >
+                    <span className="fix-align">{char}</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="px-8 xl:px-0">
+            <HookSlot name="brands:index.items.start" />
+
+            {brandEntries.map(([char, brandGroup]) => (
+              <BrandSection
+                key={char}
+                char={char}
+                brands={brandGroup}
+                sectionRef={(el) => {
+                  sectionRefs.current[char] = el;
+                }}
+              />
+            ))}
+
+            <HookSlot name="brands:index.items.end" />
+          </div>
+        </>
+      ) : (
+        <NoContent
+          icon="sicon-award-ribbon"
+          message={t('pages.brands.non_brands')}
+          actionLabel={t('common.elements.back_home')}
+        />
+      )}
+    </div>
+  );
+}
+
+export const BrandsPage = memo(BrandsPageComponent);

package/tailwind/routes/brands/index.tsx.txt

@@ -0,0 +1,47 @@
+import type { HeadDescriptor } from '../../utils/head';
+import { buildHreflangAlternates } from '../../utils/baseHead';
+import { lazy } from 'react';
+import { brandsLoader } from './loader';
+import type { BrandsPageProps } from './types';
+import type { TwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+
+// Lazy-load components for code-splitting
+const LazyBrandsPage = lazy(() => import('./BrandsPage').then((m) => ({ default: m.BrandsPage })));
+
+export const BrandsPage = LazyBrandsPage;
+export { brandsLoader };
+export type { BrandsPageProps, Brand, BrandsGroup } from './types';
+
+async function brandsLoaderWithExtend(
+  _ctx?: { locale?: string },
+  extend?: (
+    data: BrandsPageProps,
+    ctx: { params: Record<string, never> }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<BrandsPageProps> {
+  const data = await brandsLoader();
+
+  if (extend) {
+    const extra = await extend(data, { params: {} });
+    return { ...data, ...extra } as BrandsPageProps;
+  }
+  return data;
+}
+
+function brandsHead(ctx: TwilightContext, data: BrandsPageProps): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+export const Brands = {
+  id: RouteId.BRANDS_INDEX,
+  loader: brandsLoaderWithExtend,
+  head: brandsHead,
+  Component: LazyBrandsPage,
+} as const;

package/tailwind/routes/brands/loader.ts.txt

@@ -0,0 +1,14 @@
+import type { BrandsPageProps } from './types';
+import { brand } from '../../api/brands';
+import { getTwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+
+export async function brandsLoader(): Promise<BrandsPageProps> {
+  const { items, next } = await brand.list();
+  const i18n = getTwilightContext().i18n;
+  return {
+    page: { slug: RouteId.BRANDS_INDEX, title: i18n.t('common.titles.brands') || 'Brands' },
+    brands: items,
+    pagination: { next },
+  };
+}

package/tailwind/routes/brands/types.ts.txt

@@ -0,0 +1,53 @@
+/**
+ * Brands Route Types
+ * Only types that need to be exported.
+ */
+
+import type { Page } from '../../types';
+import type { RoutePagination } from '../types';
+
+export interface Brand {
+  /** Brand id. Numeric on the Store API (`brands` and `brands/{id}`); string in older fixtures. */
+  id: string | number;
+  /** Brand page URL. */
+  url: string;
+  /** Brand name. */
+  name: string;
+  /** Display label. */
+  label: string;
+  /** Brand description. */
+  description: string;
+  /** Banner image URL, or null. */
+  banner?: string | null;
+  /** Logo image URL. Always present; required to match Twig template usage. */
+  logo: string;
+  /** Whether the brand is active. */
+  status: boolean;
+  /** First Arabic letter, used to group the brands directory. */
+  ar_char: string;
+  /** First Latin letter, used to group the brands directory. */
+  en_char: string;
+  /** Sales channels the brand is available on. */
+  channels?: string[];
+  /** SEO data. */
+  metadata?: {
+    /** SEO title. */
+    title: string;
+    /** SEO description. */
+    description: string;
+    /** SEO URL. */
+    url: string;
+  };
+}
+
+export interface BrandsGroup {
+  [char: string]: Brand[];
+}
+
+// Page props
+export interface BrandsPageProps {
+  page: Page;
+  /** The first page of brands; the page groups them by letter and loads the rest on scroll. */
+  brands: Brand[];
+  pagination?: RoutePagination;
+}

package/tailwind/routes/cart/CartPage.tsx.txt

@@ -0,0 +1,112 @@
+import { useQuery } from '@tanstack/react-query';
+import { SallaConditionalOffer } from '@salla.sa/twilight-components-react/conditional-offer';
+import { SallaOffer } from '@salla.sa/twilight-components-react/offer';
+import { SallaProductOptions } from '@salla.sa/twilight-components-react/product-options';
+import { HookSlot } from '../../hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import type { CartPageProps } from './types';
+import { Breadcrumb, NoContent } from '../../components/common';
+import { CartItem, CartSummary, SeoCartWidget } from '../../components/cart';
+import { useTwilight } from '../../providers/twilight-context';
+import { CartSkeleton } from '../../skeleton';
+import { loyalty } from '../../api/loyalty';
+import { cart } from '../../api/cart';
+
+function CartPageContent({ page }: CartPageProps) {
+  const { store } = useTwilight();
+  const { t } = useTranslation();
+  const { data: loyaltyPoints } = useQuery(loyalty.queries.points());
+
+  const { data: cartId } = useQuery(cart.queries.currentId());
+
+  const { data: cartData } = useQuery({
+    ...cart.queries.detail(cartId!),
+    enabled: !!cartId,
+  });
+
+  const isLoading = cartId == null || cartData === undefined;
+
+  if (isLoading) {
+    return <CartSkeleton />;
+  }
+
+  // No cart: it was already turned into an order, shown empty like Twig.
+  if (!cartData || cartData.items.length === 0) {
+    return (
+      <div className="container">
+        <Breadcrumb page={page} />
+        <NoContent
+          icon="sicon-shopping-bag"
+          message={t('pages.cart.empty_cart', 'Your cart is empty')}
+          actionLabel={t('common.elements.back_home', 'Back to Home')}
+          actionUrl="/"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="container">
+      {/* Analytics — no visible UI, fires GTM checkout events */}
+      <SeoCartWidget cart={cartData} />
+
+      <Breadcrumb page={page} />
+      <h1 className="sr-only">{t('common.titles.cart', 'Cart')}</h1>
+      <SallaConditionalOffer />
+
+      <HookSlot name="cart:start" />
+
+      <div className="pt-5 flex flex-col items-start lg:flex-row pb-6 lg:pb-20">
+        <div className="main-content w-full lg:w-[calc(100%-384px)]">
+          <HookSlot name="cart:items.start" context={{ cartItems: cartData.items }} />
+
+          {cartData.items.map((item, index) => (
+            <CartItem key={item.id} item={item} isFirst={index === 0} />
+          ))}
+
+          {cartData.options?.length > 0 && (
+            <div className="cart-options">
+              {cartData.options.map((option) => (
+                <form
+                  key={option.id}
+                  className="first:pt-5 relative"
+                  onChange={(e) => window.salla?.form.onChange('cart.updateItem', e)}
+                  id={`item-${option.id}`}
+                >
+                  <input type="hidden" name="id" value={option.id} />
+                  <input type="hidden" name="quantity" value={option.quantity} />
+                  {/* Twig: {% include 'pages.partials.product.options' with {product:product_option} %} */}
+                  {option.options && option.options.length > 0 && (
+                    <SallaProductOptions
+                      options={JSON.stringify(option.options)}
+                      productId={option.id}
+                    />
+                  )}
+                </form>
+              ))}
+            </div>
+          )}
+
+          <SallaOffer />
+          <HookSlot name="cart:items.end" />
+        </div>
+
+        <CartSummary
+          cart={cartData}
+          applyCouponEnabled={store.settings?.cart?.apply_coupon_enabled}
+          taxAmount={cartData.tax_amount}
+          key={cartData.id}
+          loyalty={cartData.loyalty}
+          gift={cartData.gift}
+          loyaltyPoints={loyaltyPoints ?? undefined}
+        />
+      </div>
+
+      <HookSlot name="cart:end" />
+    </div>
+  );
+}
+
+export function CartPage(props: CartPageProps) {
+  return <CartPageContent {...props} />;
+}

package/tailwind/routes/cart/index.tsx.txt

@@ -0,0 +1,39 @@
+import type { HeadDescriptor } from '../../utils/head';
+import { buildHreflangAlternates } from '../../utils/baseHead';
+import { CartPage } from './CartPage';
+import { cartLoader } from './loader';
+import type { CartPageProps } from './types';
+import type { TwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+
+export { CartPage } from './CartPage';
+export { cartLoader } from './loader';
+export type { CartPageProps } from './types';
+
+async function loader(
+  _ctx?: { locale?: string },
+  extend?: (
+    data: CartPageProps,
+    ctx: { params: Record<string, never> }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<CartPageProps> {
+  const data = cartLoader();
+
+  if (extend) {
+    const extra = extend(data, { params: {} });
+    return { ...data, ...(extra instanceof Promise ? {} : extra) } as CartPageProps;
+  }
+  return data;
+}
+
+function head(ctx: TwilightContext, data: CartPageProps): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+export const Cart = { id: RouteId.CART, loader, head, Component: CartPage } as const;

package/tailwind/routes/cart/loader.ts.txt

@@ -0,0 +1,15 @@
+import type { CartPageProps } from './types';
+import { getTwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+
+/**
+ * SSR-safe loader that returns only page metadata.
+ * Cart data is fetched client-side via React Query since the cart ID
+ * lives in localStorage (unavailable during SSR).
+ */
+export function cartLoader(): CartPageProps {
+  const i18n = getTwilightContext().i18n;
+  return {
+    page: { slug: RouteId.CART, title: i18n.t('common.titles.cart') || 'Cart' },
+  } as CartPageProps;
+}

package/tailwind/routes/cart/types.ts.txt

@@ -0,0 +1,6 @@
+import type { Page, Cart } from '../../types';
+
+export interface CartPageProps {
+  page: Page;
+  cart?: Cart;
+}

package/tailwind/routes/home/HomePage.tsx.txt

@@ -0,0 +1,53 @@
+import { memo } from 'react';
+import { useDevHomeComponentOverrides } from '../../dev/dev-settings-store';
+import { HookSlot } from '../../hooks';
+import { HomeComponentRenderer, ReorderProducts } from '../../components/home';
+import type { HomePageProps } from './types';
+import { Pulse } from '@salla.sa/twilight-components-react';
+
+export const HomeSkeleton = memo(function HomeSkeleton() {
+  return (
+    <>
+      <div className="s-block container skeleton-block-hero">
+        <Pulse className="h-64 sm:h-80 rounded-md" />
+      </div>
+      <div className="s-block container skeleton-block-products">
+        <Pulse className="h-10 w-48 mb-4" />
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {[1, 2, 3, 4].map((i) => (
+            <Pulse key={i} className="h-56" />
+          ))}
+        </div>
+      </div>
+      <div className="s-block container skeleton-block-products">
+        <Pulse className="h-10 w-48 mb-4" />
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {[1, 2, 3, 4].map((i) => (
+            <Pulse key={i} className="h-56" />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export const HomePage = memo(function HomePage({ components = [] }: HomePageProps) {
+  // Dev-mode only: overlay DevSettingsWidget component-field overrides onto the
+  // blocks so edits render live. No-op passthrough in production builds.
+  const renderedComponents = useDevHomeComponentOverrides(components);
+  return (
+    <>
+      <HookSlot name="home:start" />
+      <HookSlot name="home:content" />
+      {renderedComponents.map((data, index) => (
+        // `data.key` is the twilight.json catalog id, shared by every placement
+        // of that block. Platform blocks send null. Position is unique.
+        <HomeComponentRenderer key={index} data={data} index={index} />
+      ))}
+      <HookSlot name="home:end" />
+      <ReorderProducts />
+    </>
+  );
+});
+
+export { HomePage as default };

package/tailwind/routes/home/index.tsx.txt

@@ -0,0 +1,56 @@
+import type { HeadDescriptor } from '../../utils/head';
+import { buildHreflangAlternates } from '../../utils/baseHead';
+import type { HomeLoaderData } from './loader';
+import { homeLoader } from './loader';
+import type { TwilightContext } from '../../twilight/context';
+import { HomePage } from './HomePage';
+import { RouteId } from '../../router/route-ids';
+
+export { HomeSkeleton } from './HomePage';
+export { registerHomeComponents, DefaultHomeComponents } from '../../components/home/register';
+export { registerHomeComponentConfig } from '../../components/home';
+export type { HomePageProps } from './types';
+export type { HomeLoaderData } from './loader';
+export type {
+  HomeComponentsProps,
+  AnyHomeComponent,
+  HomeComponentConfig,
+} from '../../components/home';
+
+function loader(_ctx?: { locale?: string }): Promise<HomeLoaderData> {
+  return homeLoader({ locale: _ctx?.locale });
+}
+
+function head(ctx: TwilightContext): HeadDescriptor {
+  const store = ctx.settings?.store;
+  if (!store) return {};
+
+  const title = store.meta?.title ?? store.name;
+  const description = store.meta?.description ?? store.description;
+  const keywords = store.meta?.keywords;
+
+  return {
+    title,
+    description,
+    keywords,
+    canonical: store.url,
+    openGraph: {
+      type: 'website',
+      title,
+      description,
+      images: store.logo,
+      url: store.url,
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: store.logo,
+    },
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+}
+
+export const Home = { id: RouteId.INDEX, loader, head, Component: HomePage } as const;
+
+export { homeLoader };

package/tailwind/routes/home/loader.ts.txt

@@ -0,0 +1,24 @@
+import { getTwilightContext } from '../../twilight/context';
+import { home } from '../../api/home';
+import type { HomeComponentData } from '../../types';
+import { RouteId } from '../../router/route-ids';
+
+export interface HomeLoaderData {
+  locale: string;
+  components: HomeComponentData[];
+  page: { slug: string };
+}
+
+export async function homeLoader(ctx?: { locale?: string }): Promise<HomeLoaderData> {
+  const { queryClient } = getTwilightContext();
+  const components = await queryClient.ensureQueryData(home.queries.components());
+  const result = {
+    locale: ctx?.locale || 'ar',
+    components: components.map((comp) => ({
+      ...comp,
+      path: comp.path?.replace('home.', '') || comp.path,
+    })),
+    page: { slug: RouteId.INDEX },
+  };
+  return result;
+}

package/tailwind/routes/home/types.ts.txt

@@ -0,0 +1,11 @@
+/**
+ * Home Route Types
+ */
+
+import type { HomeComponentData } from '../../types';
+
+/** Props for HomePage component */
+export interface HomePageProps {
+  locale?: string;
+  components?: HomeComponentData[];
+}