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

package/tailwind/routes/index.ts.txt

@@ -0,0 +1,94 @@
+// ============================================
+// Routes barrel — LIGHTWEIGHT exports only.
+//
+// Route modules (Home, Cart, Blog …), loaders, and lazy page components
+// are intentionally NOT re-exported here. Import them from granular paths:
+//   import { Cart } from '@salla.sa/twilight-theme-engine/routes/cart';
+//   import { Blog } from '@salla.sa/twilight-theme-engine/routes/blog';
+//
+// This prevents importing one route from accidentally pulling in every
+// route module and breaking code-splitting.
+// ============================================
+
+// Locale utilities
+export {
+  FALLBACK_LOCALE,
+  getLanguageInfo,
+  isLocale,
+  SUPPORTED_LOCALES,
+} from '../providers/I18nProvider';
+export type { Locale } from '../providers/I18nProvider';
+
+// SEO slug redirect loader — standalone, no heavy deps
+export { slugBrandRedirectLoader } from './seo-redirects';
+export type { SlugBrandParams } from './seo-redirects';
+
+// ============================================
+// Types — zero runtime cost, safe to barrel
+// ============================================
+
+export type { HeadDescriptor } from '../utils/head';
+export type {
+  RouteModule,
+  IdParams,
+  SlugIdParams,
+  PageQuery,
+  LoaderContext,
+  RoutePagination,
+} from './types';
+export type { NotFoundPageProps } from './not-found';
+
+export type { HomeComponentsProps, AnyHomeComponent, HomeLoaderData, HomePageProps } from './home';
+export type { CartPageProps } from './cart';
+export type { ProductPageProps } from './product';
+export type {
+  CategoryPageProps,
+  // Unified types
+  ProductListLoaderData,
+  ProductListLoaderParams,
+  ProductListLoaderContext,
+  ProductListSource,
+  ProductListTag,
+  ProductListEntity,
+  ProductListPageMeta,
+  ProductListSourceConfig,
+  ProductListQuery,
+} from './product-listing';
+export type {
+  BlogAuthorLoaderData,
+  BlogCategoryLoaderData,
+  BlogTagLoaderData,
+  BlogPageProps,
+  BlogSinglePageProps,
+  ArticleSummary,
+  ArticleDetail,
+  ArticleStats,
+  ArticleMeta,
+  BlogAuthorType,
+  BlogTagType,
+  BlogCategoryType,
+  CategoryMeta,
+} from './blog';
+export type { BrandsPageProps, Brand, BrandsGroup } from './brands';
+export type {
+  ProfilePageProps,
+  WishlistPageProps,
+  WalletPageProps,
+  NotificationsPageProps,
+  Order,
+  OrderItem,
+  OrderListItem,
+  OrdersPageProps,
+  OrderSinglePageProps,
+} from './account';
+export type {
+  LoyaltyPageProps,
+  LoyaltyPointsPageProps,
+  LoyaltyPoint,
+  LoyaltyPrize,
+  LoyaltyPrizeItem,
+} from './loyalty';
+export type { PageSingleProps, StaticPage } from './page';
+export type { ReviewsPageProps, TestimonialsPageProps } from './testimonials';
+export type { ThankYouLoaderParams, ThankYouPageProps } from './thank-you';
+export type { OrdersSearchParams, OrdersQuery } from './account/orders';

package/tailwind/routes/lazy.ts.txt

@@ -0,0 +1,105 @@
+import { lazy } from 'react';
+
+// Home
+export const LazyHomePage = lazy(() =>
+  import('./home/HomePage').then((m) => ({ default: m.HomePage }))
+);
+
+// Cart
+export const LazyCartPage = lazy(() =>
+  import('./cart/CartPage').then((m) => ({ default: m.CartPage }))
+);
+
+// Product
+export const LazyProductPage = lazy(() =>
+  import('./product/ProductPage').then((m) => ({ default: m.ProductPage }))
+);
+
+// Product Listing (unified for all product list pages: category, search, tag, latest, most-sales, offers)
+export const LazyProductListingPage = lazy(() =>
+  import('./product-listing/ProductListPage').then((m) => ({ default: m.ProductListPage }))
+);
+
+// Blog
+export const LazyBlogPage = lazy(() =>
+  import('./blog/BlogPage').then((m) => ({ default: m.BlogPage }))
+);
+
+export const LazyBlogSinglePage = lazy(() =>
+  import('./blog/BlogSinglePage').then((m) => ({ default: m.BlogSinglePage }))
+);
+
+export const LazyBlogAuthorPage = lazy(() =>
+  import('./blog/BlogAuthorPage').then((m) => ({ default: m.BlogAuthorPage }))
+);
+
+export const LazyBlogCategoryPage = lazy(() =>
+  import('./blog/BlogCategoryPage').then((m) => ({ default: m.BlogCategoryPage }))
+);
+
+export const LazyBlogTagPage = lazy(() =>
+  import('./blog/BlogTagPage').then((m) => ({ default: m.BlogTagPage }))
+);
+
+// Brands
+export const LazyBrandsPage = lazy(() =>
+  import('./brands/BrandsPage').then((m) => ({ default: m.BrandsPage }))
+);
+
+// BrandSingle uses ProductListing module via tanstack.adapter.ts - no lazy export needed
+
+// Customer
+export const LazyProfilePage = lazy(() =>
+  import('./account/profile/ProfilePage').then((m) => ({ default: m.ProfilePage }))
+);
+
+export const LazyWishlistPage = lazy(() =>
+  import('./account/wishlist/WishlistPage').then((m) => ({ default: m.WishlistPage }))
+);
+
+export const LazyWalletPage = lazy(() =>
+  import('./account/wallet/WalletPage').then((m) => ({ default: m.WalletPage }))
+);
+
+export const LazyNotificationsPage = lazy(() =>
+  import('./account/notifications/NotificationsPage').then((m) => ({
+    default: m.NotificationsPage,
+  }))
+);
+
+export const LazySettingsPage = lazy(() =>
+  import('./account/settings/SettingsPage').then((m) => ({ default: m.SettingsPage }))
+);
+
+export const LazyOrdersPage = lazy(() =>
+  import('./account/orders/OrdersPage').then((m) => ({ default: m.OrdersPage }))
+);
+
+export const LazyOrderSinglePage = lazy(() =>
+  import('./account/orders/OrderSinglePage').then((m) => ({ default: m.OrderSinglePage }))
+);
+
+// Loyalty
+export const LazyLoyaltyPage = lazy(() =>
+  import('./loyalty/LoyaltyPage').then((m) => ({ default: m.LoyaltyPage }))
+);
+
+// Page (static)
+export const LazyPageSingle = lazy(() =>
+  import('./page/PageSingle').then((m) => ({ default: m.PageSingle }))
+);
+
+// Testimonials
+export const LazyTestimonialsPage = lazy(() =>
+  import('./testimonials/TestimonialsPage').then((m) => ({ default: m.TestimonialsPage }))
+);
+
+// Thank You
+export const LazyThankYouPage = lazy(() =>
+  import('./thank-you/ThankYouPage').then((m) => ({ default: m.ThankYouPage }))
+);
+
+// Not Found
+export const LazyNotFoundPage = lazy(() =>
+  import('./not-found').then((m) => ({ default: m.NotFoundPage }))
+);

package/tailwind/routes/loyalty/LoyaltyPage.tsx.txt

@@ -0,0 +1,17 @@
+import { SallaLoyaltyProgram } from '@salla.sa/twilight-components-react/loyalty-program';
+import type { LoyaltyPageProps } from './types';
+import { Breadcrumb } from '../../components/common';
+import { HookSlot } from '../../hooks';
+
+export function LoyaltyPage({ page }: LoyaltyPageProps) {
+  return (
+    <>
+      <HookSlot name="loyalty:start" />
+      <div className="container mb-20">
+        <Breadcrumb page={page} />
+        <SallaLoyaltyProgram />
+      </div>
+      <HookSlot name="loyalty:end" />
+    </>
+  );
+}

package/tailwind/routes/loyalty/LoyaltyPointsPage.tsx.txt

@@ -0,0 +1,11 @@
+import { SallaLoyaltyPointsHistory } from '@salla.sa/twilight-components-react/loyalty-points-history';
+import type { LoyaltyPointsPageProps } from './types';
+import { CustomerLayout } from '../../components/layout';
+
+export function LoyaltyPointsPage({ page }: LoyaltyPointsPageProps) {
+  return (
+    <CustomerLayout page={page}>
+      <SallaLoyaltyPointsHistory />
+    </CustomerLayout>
+  );
+}

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

@@ -0,0 +1,81 @@
+import type { HeadDescriptor } from '../../utils/head';
+import { buildHreflangAlternates } from '../../utils/baseHead';
+import { lazy } from 'react';
+import { loyaltyLoader, loyaltyPointsLoader } from './loader';
+import type { LoyaltyPageProps, LoyaltyPointsPageProps } from './types';
+import type { TwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+
+// Lazy-load component for code-splitting
+const LazyLoyaltyPage = lazy(() =>
+  import('./LoyaltyPage').then((m) => ({ default: m.LoyaltyPage }))
+);
+
+const LazyLoyaltyPointsPage = lazy(() =>
+  import('./LoyaltyPointsPage').then((m) => ({ default: m.LoyaltyPointsPage }))
+);
+
+export const LoyaltyPage = LazyLoyaltyPage;
+export const LoyaltyPointsPage = LazyLoyaltyPointsPage;
+export { loyaltyLoader, loyaltyPointsLoader } from './loader';
+export type {
+  LoyaltyPageProps,
+  LoyaltyPointsPageProps,
+  LoyaltyPoint,
+  LoyaltyPrize,
+  LoyaltyPrizeItem,
+} from './types';
+
+async function loader(
+  ctx?: { locale?: string },
+  extend?: (
+    data: LoyaltyPageProps,
+    ctx: { params: Record<string, never> }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<LoyaltyPageProps> {
+  const data = await loyaltyLoader(ctx?.locale);
+
+  if (extend) {
+    const extra = await extend(data, { params: {} });
+    return { ...data, ...extra } as LoyaltyPageProps;
+  }
+  return data;
+}
+
+function head(ctx: TwilightContext, data: LoyaltyPageProps): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+export const Loyalty = { id: RouteId.LOYALTY, loader, head, Component: LazyLoyaltyPage } as const;
+
+async function pointsLoader(
+  ctx?: { locale?: string },
+  extend?: (
+    data: LoyaltyPointsPageProps,
+    ctx: { params: Record<string, never> }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<LoyaltyPointsPageProps> {
+  const data = await loyaltyPointsLoader(ctx?.locale);
+
+  if (extend) {
+    const extra = await extend(data, { params: {} });
+    return { ...data, ...extra } as LoyaltyPointsPageProps;
+  }
+  return data;
+}
+
+export const LoyaltyPoints = {
+  id: RouteId.CUSTOMER_LOYALTY_POINTS,
+  loader: pointsLoader,
+  head: (ctx: TwilightContext, data: LoyaltyPointsPageProps): HeadDescriptor => ({
+    title: data.page.title,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  }),
+  Component: LazyLoyaltyPointsPage,
+} as const;

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

@@ -0,0 +1,53 @@
+import { loyalty } from '../../api/loyalty';
+import type { Loyalty, LoyaltyPageProps, LoyaltyPointsPageProps } from './types';
+import { RouteId } from '../../router/route-ids';
+import { orUnauthorized, redirect, unauthorized } from '../../providers/NavigationProvider';
+import { FALLBACK_LOCALE } from '../../providers/locale-constants';
+import { getTwilightContext } from '../../twilight/context';
+import { getAuthToken } from '../../api/client';
+
+async function getProgramOrGoHome(locale?: string): Promise<Loyalty> {
+  try {
+    return await loyalty.get();
+  } catch (error) {
+    // The API answers 400 when the store's loyalty program is off; like the Twig storefront, go home.
+    if ((error as { response?: { status?: number } })?.response?.status === 400) {
+      throw redirect(`/${locale || FALLBACK_LOCALE}`);
+    }
+    throw error;
+  }
+}
+
+export async function loyaltyLoader(locale?: string): Promise<LoyaltyPageProps> {
+  const data = await getProgramOrGoHome(locale);
+  const { i18n } = getTwilightContext();
+  return {
+    page: {
+      slug: RouteId.LOYALTY,
+      title: data.name,
+      breadcrumbs: [
+        { name: i18n.t('common.titles.home'), url: '/' },
+        { name: i18n.t('common.titles.loyalty_program'), url: '/loyalty' },
+      ],
+    },
+    loyalty: data,
+  };
+}
+
+export async function loyaltyPointsLoader(locale?: string): Promise<LoyaltyPointsPageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  await orUnauthorized(getProgramOrGoHome(locale));
+  const { i18n } = getTwilightContext();
+  const title = i18n.t('pages.loyalty_program.loyalty_points');
+  return {
+    page: {
+      slug: RouteId.CUSTOMER_LOYALTY_POINTS,
+      title,
+      breadcrumbs: [
+        { name: i18n.t('common.titles.home'), url: '/' },
+        { name: i18n.t('common.titles.profile'), url: '/account/profile' },
+        { name: title, url: '/loyalty_points' },
+      ],
+    },
+  };
+}

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

@@ -0,0 +1,109 @@
+import type { Page } from '../../types';
+import type { RoutePagination } from '../types';
+
+export interface LoyaltyCustomer {
+  id: number;
+  first_name: string;
+  last_name: string;
+  email: string;
+  loyalty_program_points: number;
+}
+
+export interface LoyaltyCondition {
+  name: string;
+  key: string;
+  points: number;
+  condition: string | null;
+  value: string | null;
+  op: string;
+}
+
+export interface LoyaltyPoint {
+  type: string;
+  name: string;
+  description: string;
+  points: number;
+  icon: string;
+  color: string;
+  url: string;
+  id: number;
+  key: string;
+  status: boolean;
+  is_completed: boolean;
+  target_url: string;
+  share_store_url: string;
+  steps: Record<string, string | number | boolean>[];
+  branches: Record<string, string | number | boolean>[];
+  conditions: LoyaltyCondition[];
+}
+
+export interface LoyaltyPrizeItem {
+  id: number;
+  key?: string;
+  name: string;
+  description?: string;
+  image?: string;
+  url?: string;
+  prize_url?: string;
+  cost_points: number;
+  coupon_type?: string;
+  coupon_amount?: number;
+  status?: number;
+}
+
+export interface LoyaltyPrize {
+  type: 'coupon_discount' | 'free_product' | 'free_shipping' | string;
+  title: string;
+  items: LoyaltyPrizeItem[];
+}
+
+export interface Loyalty {
+  loyalty_program_id: number;
+  id: number;
+  name: string;
+  description?: string;
+  image?: string;
+  customer: LoyaltyCustomer | null;
+  points: LoyaltyPoint[];
+  prizes: LoyaltyPrize[];
+  promotion_title?: string;
+  promotion_description?: string;
+  prize_promotion_title?: string;
+  prize_promotion_description?: string;
+  prize_promotion_logo?: string;
+  points_validity_by?: string | null;
+  points_validity_value?: number | null;
+  status?: boolean;
+}
+
+export interface LoyaltyPageProps {
+  page: Page;
+  loyalty: Loyalty;
+}
+
+export interface LoyaltyPointsPageProps {
+  page: Page;
+}
+
+export interface PointBalanceItem {
+  key: string;
+  expires_at: number;
+  type: string;
+  amount: number;
+  order_id: number;
+  redeemed_at: number | null;
+  status: string;
+  created_at: number;
+}
+
+export interface PointBalanceCursor extends RoutePagination {
+  count: number;
+}
+
+export interface PointBalanceResponse {
+  status: number;
+  success: boolean;
+  data: PointBalanceItem[];
+  balance: number;
+  cursor: PointBalanceCursor;
+}

package/tailwind/routes/not-found.tsx.txt

@@ -0,0 +1,50 @@
+import type { ComponentType, ReactNode } from 'react';
+import { HookSlot } from '../hooks';
+import { useTranslation } from '../providers/I18nProvider';
+import { ErrorPage } from '../components/common';
+import { useProductShortLink } from './product-short-link';
+
+export interface NotFoundPageProps {
+  title?: string;
+  message?: string;
+  showHomeLink?: boolean;
+  homeLinkText?: string;
+  LinkComponent?: ComponentType<{
+    to: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children: ReactNode;
+  }>;
+}
+
+export function NotFoundPage(props: NotFoundPageProps = {}) {
+  const { t } = useTranslation();
+  // A product short link (`/ar/lvXvzln`) or "new URLs" link (`/ar/1213asa-name`) matches no route; resolve it instead of 404ing.
+  const resolvingShortLink = useProductShortLink();
+
+  const {
+    title = t('common.errors.404') || 'Page Not Found',
+    message = t('common.errors.error_occurred') ||
+      'The page you are looking for does not exist or has been moved.',
+    showHomeLink = true,
+    homeLinkText = t('common.elements.back_home') || 'Back to Home',
+    LinkComponent,
+  } = props;
+
+  if (resolvingShortLink) return null;
+
+  return (
+    <ErrorPage
+      code={404}
+      title={title}
+      message={message}
+      showAction={showHomeLink}
+      actionText={homeLinkText}
+      LinkComponent={LinkComponent}
+    >
+      <HookSlot name="notfound:start" />
+      <HookSlot name="notfound:content" />
+      <HookSlot name="notfound:end" />
+    </ErrorPage>
+  );
+}

package/tailwind/routes/page/PageSingle.tsx.txt

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { SallaComments } from '@salla.sa/twilight-components-react/comments';
+import type { PageSingleProps } from './types';
+import { Breadcrumb } from '../../components/common';
+import { useComments } from '../../hooks/useComments';
+
+export function PageSingle({ page }: PageSingleProps) {
+  const { commentsKey } = useComments();
+
+  // Clean content articles - matches app.js commonThings()
+  const cleanContent = useMemo(() => {
+    if (!page.content) return '';
+    // Replace   entities with regular spaces
+    return page.content.replace(/ /g, ' ');
+  }, [page.content]);
+
+  return (
+    <div key={page.slug} className="container">
+      <Breadcrumb page={page} />
+
+      <div className="flex justify-center">
+        <div className="content content--single-page w-full lg:w-10/12 bg-white rounded p-6 lg:p-8 mt-4 lg:mt-12">
+          <h1 className="font-bold text-2xl mb-6">{page.title}</h1>
+          {cleanContent && (
+            <div className="content-entry" dangerouslySetInnerHTML={{ __html: cleanContent }} />
+          )}
+          {page.id && (
+            <SallaComments key={commentsKey} itemId={Number(page.id)} type={'page' as any} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { HeadDescriptor } from '../../utils/head';
+import { buildHreflangAlternates } from '../../utils/baseHead';
+import { lazy } from 'react';
+import { pageSingleLoader } from './loader';
+import type { PageSingleProps } from './types';
+import type { IdParams } from '../types';
+import type { TwilightContext } from '../../twilight/context';
+import { RouteId } from '../../router/route-ids';
+
+// Lazy-load component for code-splitting
+const LazyPageSingle = lazy(() => import('./PageSingle').then((m) => ({ default: m.PageSingle })));
+
+export const PageSingleLazy = LazyPageSingle;
+export { pageSingleLoader } from './loader';
+export type { PageSingleProps, StaticPage } from './types';
+
+async function loader(
+  ctx: { params: IdParams; locale?: string },
+  extend?: (
+    data: PageSingleProps,
+    ctx: { params: IdParams }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<PageSingleProps> {
+  const data = await pageSingleLoader({ params: ctx.params });
+
+  if (extend) {
+    const extra = await extend(data, ctx);
+    return { ...data, ...extra } as PageSingleProps;
+  }
+  return data;
+}
+
+function head(ctx: TwilightContext, data: PageSingleProps): HeadDescriptor {
+  const title = data.page.title;
+  const description = data.page.content?.replace(/<[^>]+>/g, '');
+
+  const base: HeadDescriptor = {
+    title,
+    description,
+    canonical: data.page.url,
+    openGraph: {
+      type: 'article',
+      title,
+      description,
+      url: data.page.url,
+      publishedTime: data.page.created_at?.published_time,
+      modifiedTime: data.page.created_at?.modified_time,
+    },
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+export const PageSingle = {
+  id: RouteId.PAGE_SINGLE,
+  loader,
+  head,
+  Component: LazyPageSingle,
+} as const;

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

@@ -0,0 +1,19 @@
+import type { PageSingleProps } from './types';
+import type { IdParams } from '../types';
+import { page } from '../../api/page';
+import { RouteId } from '../../router/route-ids';
+
+export async function pageSingleLoader({ params }: { params: IdParams }): Promise<PageSingleProps> {
+  const data = await page.findOrThrow(params.id);
+  return {
+    page: {
+      slug: RouteId.PAGE_SINGLE,
+      id: data.id,
+      title: data.name,
+      url: data.url,
+      content: data.content,
+      metadata: data.metadata,
+      created_at: data.created_at,
+    },
+  };
+}

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

@@ -0,0 +1,34 @@
+import type { Page } from '../../types';
+
+export interface StaticPage extends Page {
+  id?: number;
+  content?: string;
+  url?: string;
+  metadata?: {
+    title?: string;
+    description?: string;
+  };
+  created_at?: {
+    published_time?: string;
+    modified_time?: string;
+  };
+}
+
+export interface PageSingleProps {
+  page: StaticPage;
+}
+
+/**
+ * Raw shape returned by GET /store/v1/pages/{id}
+ * Matches the PageTransformer output from the Salla Store backend.
+ */
+export interface ApiPageResponse {
+  id: number;
+  name: string;
+  slug?: string;
+  content?: string;
+  type?: string;
+  url?: string;
+  metadata?: StaticPage['metadata'];
+  created_at?: StaticPage['created_at'];
+}