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

package/tailwind/components/toast/Toaster.tsx.txt

@@ -0,0 +1,177 @@
+import { useEffect, useRef, useState } from 'react';
+import { Toaster as SonnerToaster, toast } from 'sonner';
+import { useTwilight } from '../../providers/twilight-context';
+import { isNativeApp } from '../../native-app';
+import type { ToastPosition } from './types';
+
+const toastClassNames = {
+  toast: 'group bg-white border-2 rounded-xl shadow-2xl p-4 font-primary',
+  title: 'text-base font-bold',
+  description: 'text-sm mt-1 text-gray-600',
+  actionButton: 'bg-primary text-white px-3 py-1 rounded',
+  cancelButton: 'bg-gray-100 px-3 py-1 rounded',
+  success: 'border-green-500 [&_svg]:text-green-500 [&_aside]:text-green-700',
+  error: 'border-red-500 [&_svg]:text-red-500 [&_aside]:text-red-700',
+  warning: 'border-yellow-500 [&_svg]:text-yellow-500 [&_aside]:text-yellow-700',
+  info: 'border-blue-500 [&_svg]:text-blue-500 [&_aside]:text-blue-700',
+  loading: 'border-gray-400',
+};
+
+type RawMessage = string | { title?: string; text?: string; icon?: string };
+type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+const MOBILE_BREAKPOINT = 768;
+const NATIVE_ALERT_EVENT = 'ui::alert';
+
+function dispatchNativeAlert(type: ToastVariant, message: string, title?: string) {
+  const salla = window.salla;
+  if (!isNativeApp() || !salla?.event?.dispatch) return false;
+
+  salla.event.dispatch(NATIVE_ALERT_EVENT, {
+    type,
+    message,
+    ...(title ? { title } : {}),
+  });
+  return true;
+}
+
+export function Toaster({
+  mobilePosition = 'bottom-center',
+  addToCartToast = true,
+}: {
+  mobilePosition?: ToastPosition;
+  /** Show the default add-to-cart toast. Themes whose cart badge is the feedback can turn it off. */
+  addToCartToast?: boolean;
+}) {
+  const { theme } = useTwilight();
+  const themeRef = useRef(theme);
+  themeRef.current = theme;
+  const flashShownRef = useRef(false);
+
+  const isRtl = theme.is_rtl;
+  const desktopPosition: ToastPosition = isRtl ? 'top-left' : 'top-right';
+
+  const [position, setPosition] = useState<ToastPosition>(() => {
+    if (typeof window === 'undefined') return desktopPosition;
+    return window.innerWidth < MOBILE_BREAKPOINT ? mobilePosition : desktopPosition;
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setPosition(window.innerWidth < MOBILE_BREAKPOINT ? mobilePosition : desktopPosition);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [desktopPosition, mobilePosition]);
+
+  useEffect(() => {
+    const salla = window.salla;
+    if (!salla) return;
+    let active = true;
+
+    const handleNotify = (message: RawMessage, type: string, data?: unknown) => {
+      const eventData = data as { data?: { googleTags?: { event?: string } } } | undefined;
+      const shouldSuppressAddToCartToast =
+        (!addToCartToast || themeRef.current.settings?.enable_add_product_toast) &&
+        eventData?.data?.googleTags?.event === 'addToCart';
+      let title: string;
+      let toastType: ToastVariant;
+
+      if (typeof message === 'object' && message !== null) {
+        title = message.title || message.text || '';
+        toastType = (message.icon || type || 'info') as ToastVariant;
+      } else {
+        title = message;
+        toastType = (type || 'info') as ToastVariant;
+      }
+
+      // Suppress the default addToCart toast when the theme opted out (addToCartToast=false)
+      // or renders its own rich toast (enable_add_product_toast) so they don't double up.
+      if (shouldSuppressAddToCartToast) {
+        return;
+      }
+
+      if (dispatchNativeAlert(toastType, title)) {
+        return;
+      }
+
+      if (toastType === 'success') {
+        toast.success(title, { duration: 3000 });
+      } else if (toastType === 'error') {
+        toast.error(title, { duration: 3000 });
+      } else if (toastType === 'warning') {
+        toast.warning(title, { duration: 3000 });
+      } else {
+        toast.info(title, { duration: 3000 });
+      }
+    };
+
+    // Before the SDK loads `salla` is the head stub, and the SDK's default notifier is alert().
+    void (async () => {
+      try {
+        await salla.onReady?.();
+      } catch {
+        // onReady() may fail during partial initialization; the toast still beats alert().
+      }
+      if (active) salla.notify?.setNotifier?.(handleNotify);
+    })();
+    return () => {
+      active = false;
+      salla.notify?.setNotifier?.(() => {});
+    };
+  }, [addToCartToast]);
+
+  useEffect(() => {
+    if (flashShownRef.current || typeof window === 'undefined') return;
+
+    const params = new URLSearchParams(window.location.search);
+    const successMsg = params.get('success');
+    const dangerMsg = params.get('danger');
+
+    if (!successMsg && !dangerMsg) return;
+
+    flashShownRef.current = true;
+
+    const message = successMsg || dangerMsg || '';
+    const toastType = dangerMsg ? 'error' : 'success';
+
+    const url = new URL(window.location.href);
+    url.searchParams.delete('success');
+    url.searchParams.delete('danger');
+    window.history.replaceState({}, '', url.toString());
+
+    const timer = setTimeout(() => {
+      if (dispatchNativeAlert(toastType, message)) return;
+
+      if (toastType === 'success') {
+        toast.success(message, { duration: 3000 });
+      } else {
+        toast.error(message, { duration: 3000 });
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <SonnerToaster
+      position={position}
+      // Keep sonner's default gaps (24px desktop / 16px mobile) but clear the
+      // native status bar inset (--app-safe-area-top, set by useSafeAreaInset)
+      // so top-positioned toasts aren't covered in the app webview.
+      offset={{ top: 'calc(var(--app-safe-area-top, 0px) + 24px)' }}
+      mobileOffset={{ top: 'calc(var(--app-safe-area-top, 0px) + 16px)' }}
+      toastOptions={{
+        classNames: toastClassNames,
+        style: {
+          fontFamily: 'var(--font-main, inherit)',
+        },
+      }}
+      style={{
+        fontFamily: 'var(--font-main, inherit)',
+      }}
+    />
+  );
+}
+
+export type { ToasterProps } from 'sonner';

package/tailwind/components/toast/index.ts.txt

@@ -0,0 +1,10 @@
+export { Toaster } from './Toaster';
+export { useToast, toast } from './useToast';
+export type {
+  ToastOptions,
+  ToastType,
+  ToastPosition,
+  ToastUpdateOptions,
+  ToastPromiseOptions,
+  ToastFn,
+} from './types';

package/tailwind/components/toast/types.ts.txt

@@ -0,0 +1,38 @@
+import type { ExternalToast } from 'sonner';
+
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
+
+export type ToastPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'top-center'
+  | 'bottom-center';
+
+export interface ToastOptions extends ExternalToast {
+  description?: string;
+}
+
+export interface ToastUpdateOptions extends ToastOptions {
+  title?: string;
+  type?: ToastType;
+}
+
+export interface ToastPromiseOptions<T = unknown> {
+  loading: string;
+  success: string | ((data: T) => string);
+  error: string | ((error: Error) => string);
+}
+
+export interface ToastFn {
+  (title: string, options?: ToastOptions): string | number;
+  success: (title: string, options?: ToastOptions) => string | number;
+  error: (title: string, options?: ToastOptions) => string | number;
+  warning: (title: string, options?: ToastOptions) => string | number;
+  info: (title: string, options?: ToastOptions) => string | number;
+  loading: (title: string, options?: ToastOptions) => string | number;
+  update: (id: string | number, options: ToastUpdateOptions) => void;
+  dismiss: (id?: string | number) => void;
+  promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) => Promise<T>;
+}

package/tailwind/components/toast/useToast.ts.txt

@@ -0,0 +1,61 @@
+import { toast as sonnerToast } from 'sonner';
+import type { ToastT } from 'sonner';
+import type { ToastFn, ToastOptions, ToastUpdateOptions, ToastPromiseOptions } from './types';
+
+export const useToast: ToastFn = Object.assign(
+  (title: string, options?: ToastOptions) => sonnerToast(title, options),
+  {
+    success: (title: string, options?: ToastOptions) => sonnerToast.success(title, options),
+    error: (title: string, options?: ToastOptions) => sonnerToast.error(title, options),
+    warning: (title: string, options?: ToastOptions) => sonnerToast.warning(title, options),
+    info: (title: string, options?: ToastOptions) => sonnerToast.info(title, options),
+    loading: (title: string, options?: ToastOptions) => sonnerToast.loading(title, options),
+    update: (id: string | number, options: ToastUpdateOptions) => {
+      // sonner updates an existing toast when `id` is passed in the options;
+      // the first argument is the message (title), not the id.
+      const { title, type, ...rest } = options;
+      const opts = { ...rest, id };
+      // sonner overwrites the title with the message, so reuse the current one when none is given.
+      const message =
+        title ??
+        sonnerToast.getToasts().find((t): t is ToastT => t.id === id && 'title' in t)?.title;
+      if (type === 'success') {
+        sonnerToast.success(message, opts);
+      } else if (type === 'error') {
+        sonnerToast.error(message, opts);
+      } else if (type === 'warning') {
+        sonnerToast.warning(message, opts);
+      } else if (type === 'info') {
+        sonnerToast.info(message, opts);
+      } else if (type === 'loading') {
+        sonnerToast.loading(message, opts);
+      } else {
+        sonnerToast(message, opts);
+      }
+    },
+    dismiss: (id?: string | number) => {
+      if (id !== undefined) {
+        sonnerToast.dismiss(id);
+      } else {
+        sonnerToast.dismiss();
+      }
+    },
+    promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>): Promise<T> => {
+      sonnerToast.promise(promise, {
+        loading: options.loading,
+        success: options.success,
+        error: options.error,
+      });
+      return promise;
+    },
+  }
+) as ToastFn;
+
+export { useToast as toast };
+export type {
+  ToastOptions,
+  ToastType,
+  ToastPosition,
+  ToastUpdateOptions,
+  ToastPromiseOptions,
+} from './types';

package/tailwind/components/tracking/GoogleTag.tsx.txt

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+
+export interface GoogleTagBodyProps {
+  /** GTM container IDs - if empty, renders nothing */
+  gtmIds?: string[];
+}
+
+/**
+ * Generates the GTM head script content.
+ */
+function gtmScript(gtmId: string): string {
+  return `
+window.dataLayer = window.dataLayer || [];
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${gtmId}');
+
+window.dataLayer = new Proxy(window.dataLayer, {
+  set(target, property, value) {
+    target[property] = value;
+    if (typeof value === 'object') {
+      ['form_data', 'data', 'gateway', 'config', 'request', 'headers']
+        .forEach(function(key) { value && value.hasOwnProperty(key) && delete value[key]; });
+    }
+    return true;
+  }
+});
+`.trim();
+}
+
+const INTERACTION_EVENTS = ['pointerdown', 'keydown', 'touchstart', 'scroll', 'wheel'] as const;
+
+/** How long after `load` GTM waits for a visitor who never interacts. */
+export const GTM_LOAD_DELAY_MS = 4000;
+
+/** Injects GTM on the first interaction or GTM_LOAD_DELAY_MS after `load`, off the page's load path. */
+export function GoogleTagBody({ gtmIds }: GoogleTagBodyProps): null {
+  const gtmId = gtmIds?.[0];
+
+  useEffect(() => {
+    if (!gtmId) return;
+    const id = gtmId;
+
+    let timer: number | undefined;
+    const stopWaiting = () => {
+      window.clearTimeout(timer);
+      window.removeEventListener('load', onLoad);
+      INTERACTION_EVENTS.forEach((type) => window.removeEventListener(type, inject));
+    };
+    function inject() {
+      stopWaiting();
+      if (document.getElementById('gtm-script')) return;
+      const script = document.createElement('script');
+      script.id = 'gtm-script';
+      script.textContent = gtmScript(id);
+      document.head.appendChild(script);
+    }
+    function onLoad() {
+      timer = window.setTimeout(inject, GTM_LOAD_DELAY_MS);
+    }
+
+    INTERACTION_EVENTS.forEach((type) =>
+      window.addEventListener(type, inject, { once: true, passive: true })
+    );
+    if (document.readyState === 'complete') onLoad();
+    else window.addEventListener('load', onLoad, { once: true });
+
+    return () => {
+      stopWaiting();
+      document.getElementById('gtm-script')?.remove();
+    };
+  }, [gtmId]);
+
+  return null;
+}

package/tailwind/components/tracking/SiftSnippet.tsx.txt

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+
+export interface SiftSnippetProps {
+  /** Sift Science beacon key - if empty, renders nothing */
+  beaconKey?: string;
+  /** Logged-in customer ID, or empty for guests */
+  customerId?: string;
+}
+
+/**
+ * SiftSnippet - Injects Sift Science fraud detection script.
+ *
+ * Mirrors PHP SiftSnippetJsWidget:
+ * - Injects Sift Science beacon script via useEffect
+ * - Tracks user ID, session ID, and page views
+ * - Used for fraud detection and risk scoring
+ */
+export function SiftSnippet({ beaconKey, customerId }: SiftSnippetProps): null {
+  useEffect(() => {
+    if (!beaconKey) return;
+
+    // Get session ID from Salla analytics
+    const salla = window.salla;
+    const sessionId = salla?.analytics?._anonymousId || '';
+
+    window._sift = window._sift ?? [];
+    const _sift = window._sift;
+
+    // Push configuration
+    _sift.push(['_setAccount', beaconKey]);
+    _sift.push(['_setUserId', customerId || '']);
+    _sift.push(['_setSessionId', sessionId]);
+    _sift.push(['_trackPageview']);
+
+    // Load the Sift script
+    const script = document.createElement('script');
+    script.src = 'https://cdn.sift.com/s.js';
+    script.async = true;
+    document.body.appendChild(script);
+
+    return () => {
+      script.remove();
+      // Clear sift queue on unmount
+      window._sift = undefined;
+    };
+  }, [beaconKey, customerId]);
+
+  return null;
+}

package/tailwind/components/tracking/TwilightBundles.tsx.txt

@@ -0,0 +1,67 @@
+import { useEffect } from 'react';
+
+/**
+ * TwilightBundles - Injects twilight bundles script when custom components are detected.
+ *
+ * Mirrors PHP TwilightThemesAdditionsWidget:
+ * - Sets up MutationObserver to watch for `salla-custom-component` tags
+ * - Injects bundles script when a custom component is detected
+ * - Uses importmap for lit dependencies
+ * - Runs only once
+ */
+export function TwilightBundles(): null {
+  useEffect(() => {
+    // Check if already injected
+    if (document.getElementById('twilight-bundles-assets')) {
+      return;
+    }
+
+    const bundlesUrl =
+      'https://cdn.assets.salla.network/prod/@salla.sa/twilight-bundles/latest/twilight-bundles.js';
+
+    const injectBundles = () => {
+      // Disconnect observer since we only need to inject once
+      window.twilightBundlesObserver?.disconnect?.();
+
+      if (document.getElementById('twilight-bundles-assets')) {
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.type = 'module';
+      script.src = bundlesUrl;
+      script.defer = true;
+      script.id = 'twilight-bundles-assets';
+      document.head.appendChild(script);
+    };
+
+    // Set up MutationObserver to watch for salla-custom-component
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (
+            node.nodeType === 1 &&
+            (node as Element).tagName?.toLowerCase() === 'salla-custom-component'
+          ) {
+            injectBundles();
+            return;
+          }
+        }
+      }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+    window.twilightBundlesObserver = observer;
+
+    // Check if component already exists on mount
+    if (document.querySelector('salla-custom-component')) {
+      injectBundles();
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return null;
+}

package/tailwind/components/tracking/index.ts.txt

@@ -0,0 +1,11 @@
+// Component - injects GTM script + noscript via useEffect
+export { GoogleTagBody, type GoogleTagBodyProps } from './GoogleTag';
+
+// Component - injects Sift Science fraud detection script
+export { SiftSnippet, type SiftSnippetProps } from './SiftSnippet';
+
+// Component - injects twilight bundles when custom components detected
+export { TwilightBundles } from './TwilightBundles';
+
+// Lazy components
+export { LazyGoogleTagBody, LazySiftSnippet } from './lazy';

package/tailwind/components/tracking/lazy.ts.txt

@@ -0,0 +1,11 @@
+import { lazy } from 'react';
+
+/** Lazy-loaded GoogleTagBody component. */
+export const LazyGoogleTagBody = lazy(() =>
+  import('./GoogleTag').then((m) => ({ default: m.GoogleTagBody }))
+);
+
+/** Lazy-loaded SiftSnippet component. */
+export const LazySiftSnippet = lazy(() =>
+  import('./SiftSnippet').then((m) => ({ default: m.SiftSnippet }))
+);

package/tailwind/components/useComponent.ts.txt

@@ -0,0 +1,12 @@
+import { registry } from './ComponentRegistry';
+import type { ComponentType } from '../types';
+
+export function useComponent<P = Record<string, unknown>>(name: string): ComponentType<P> | null {
+  return registry.resolve<P>(name);
+}
+
+export function useOriginalComponent<P = Record<string, unknown>>(
+  name: string
+): ComponentType<P> | null {
+  return registry.getOriginal<P>(name);
+}

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

@@ -0,0 +1,16 @@
+// Re-export from organized route folders
+export * from './profile';
+export * from './wishlist';
+export * from './wallet';
+export * from './notifications';
+export * from './settings';
+export * from './orders';
+
+// Re-export shared types for backward compatibility
+export type {
+  Order,
+  OrderItem,
+  OrderListItem,
+  OrdersPageProps,
+  OrderSinglePageProps,
+} from './types';

package/tailwind/routes/account/notifications/NotificationsPage.tsx.txt

@@ -0,0 +1,54 @@
+import { HookSlot } from '../../../hooks';
+import { NoContent } from '../../../components/common';
+import { useTranslation } from '../../../providers/I18nProvider';
+import type { NotificationsPageProps, Notification } from './types';
+
+function NotificationItem({ notification }: { notification: Notification }) {
+  return (
+    <a
+      href={notification.url}
+      className={`s-notifications-item s-notifications-item-shadow${notification.is_read ? ' s-notifications-item-read' : ''}`}
+    >
+      <span className="s-notifications-item-icon">
+        <i
+          className={`s-notifications-item-icon sicon-bell-ring${!notification.is_read ? ' s-notifications-item-icon-new' : ''}`}
+        ></i>
+      </span>
+      <div className="s-notifications-item-content">
+        <div className="s-notifications-item-content-leading">
+          <h4>{notification.title}</h4>
+          <p>{notification.body}</p>
+        </div>
+        <span className="s-notifications-item-content-trailing">
+          <i className="sicon-time s-notifications-item-content-trailing-icon"></i>
+          <span>{notification.time_ago}</span>
+        </span>
+      </div>
+    </a>
+  );
+}
+
+export function NotificationsPage({ notifications }: NotificationsPageProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <HookSlot name="customer:notifications.items.start" />
+      <div className="s-notifications-wrapper">
+        {notifications.length > 0 ? (
+          <div className="s-notifications-container space-y-2">
+            {notifications.map((item: Notification) => (
+              <NotificationItem key={item.id} notification={item} />
+            ))}
+          </div>
+        ) : (
+          <NoContent
+            icon="sicon-bell-ring"
+            message={t('blocks.header.no_notifications', 'No notifications')}
+          />
+        )}
+      </div>
+      <HookSlot name="customer:notifications.items.end" />
+    </>
+  );
+}

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

@@ -0,0 +1,39 @@
+import type { HeadDescriptor } from '../../../utils/head';
+import { buildHreflangAlternates } from '../../../utils/baseHead';
+import { lazy } from 'react';
+import { notificationsLoader } from './loader';
+import type { NotificationsPageProps } from './types';
+import type { TwilightContext } from '../../../twilight/context';
+import { RouteId } from '../../../router/route-ids';
+
+const LazyNotificationsPage = lazy(() =>
+  import('./NotificationsPage').then((m) => ({ default: m.NotificationsPage }))
+);
+
+export const NotificationsPage = LazyNotificationsPage;
+export { notificationsLoader } from './loader';
+export type { NotificationsPageProps, Notification } from './types';
+
+export const Notifications = {
+  id: RouteId.CUSTOMER_NOTIFICATIONS,
+  loader: async (
+    _ctx: { locale?: string },
+    extend?: (
+      data: NotificationsPageProps,
+      ctx: { params: Record<string, never> }
+    ) => Promise<Record<string, unknown>> | Record<string, unknown>
+  ): Promise<NotificationsPageProps> => {
+    const data = await notificationsLoader({ locale: _ctx.locale ?? 'ar' });
+    if (extend) {
+      const extra = await extend(data, { params: {} });
+      return { ...data, ...extra } as NotificationsPageProps;
+    }
+    return data;
+  },
+  head: (ctx: TwilightContext, data: NotificationsPageProps): HeadDescriptor => ({
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  }),
+  Component: LazyNotificationsPage,
+} as const;

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

@@ -0,0 +1,22 @@
+import { notification } from '../../../api/notification';
+import { getTwilightContext } from '../../../twilight/context';
+import { orUnauthorized, unauthorized } from '../../../providers/NavigationProvider';
+import { getAuthToken } from '../../../api/client';
+import type { NotificationsPageProps } from './types';
+import { RouteId } from '../../../router/route-ids';
+
+export async function notificationsLoader(_ctx: {
+  locale: string;
+}): Promise<NotificationsPageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  const i18n = getTwilightContext().i18n;
+  const response = await orUnauthorized(notification.list());
+
+  return {
+    page: {
+      title: i18n.t('common.titles.notifications') || 'Notifications',
+      slug: RouteId.CUSTOMER_NOTIFICATIONS,
+    },
+    notifications: response.data,
+  };
+}

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

@@ -0,0 +1,18 @@
+import type { Page } from '../../../types';
+
+export interface Notification {
+  id: number;
+  title: string;
+  color: string;
+  icon: string;
+  url: string;
+  body: string;
+  is_read: boolean;
+  time_ago: string;
+  created_at: number;
+}
+
+export interface NotificationsPageProps {
+  page: Page;
+  notifications: Notification[];
+}