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

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[];
+}

package/tailwind/routes/account/orders/OrderSinglePage.tsx.txt

@@ -0,0 +1,181 @@
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaRatingModal } from '@salla.sa/twilight-components-react/rating-modal';
+import { SallaEditOrderButton } from '@salla.sa/twilight-components-react/edit-order-button';
+import { SallaOrderBranch } from '@salla.sa/twilight-components-react/order-branch';
+import { SallaOrderTotalsCard } from '@salla.sa/twilight-components-react/order-totals-card';
+import { HookSlot, usePageConfig } from '../../../hooks';
+import { useMoney } from '../../../hooks/useMoney';
+import { useTranslation } from '../../../providers/I18nProvider';
+import { useTwilight } from '../../../providers/twilight-context';
+import type { OrderSinglePageProps } from '../types';
+import { OrderHeader } from './single/OrderHeader';
+import { OrderItemRow } from './single/OrderItemRow';
+import { OrderActions } from './single/OrderActions';
+import { OrderOptionsTable, RatingSection, ShippingHeader } from './single/OrderSections';
+import type { TwigOrder } from './single/types';
+
+/** Twig's `inner_title` extras: the gift tag and the edit-order button. */
+function TitleRow({ order }: { order: OrderSinglePageProps['order'] }) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex justify-between items-center">
+      {order.type === 'buy_as_gift' || order.source?.type === 'buy_as_gift' ? (
+        <span className="inline-block text-primary">
+          <i className="sicon-gift-sharing"></i>&nbsp;{t('pages.orders.gift_tag')}
+        </span>
+      ) : (
+        <span />
+      )}
+      <div className="flex items-center gap-3 flex-wrap">
+        <SallaEditOrderButton data-testid="store-order-edit-btn" orderId={String(order.id)} />
+      </div>
+    </div>
+  );
+}
+
+function RefundMessage({ message }: { message?: string }) {
+  if (!message) return null;
+  return (
+    <div className="min-w-full rounded-md overflow-hidden">
+      <div className="bg-white flex items-center gap-1 rounded-md px-3 py-5 md:px-5">
+        <i className="sicon-refund h-6 w-6"></i>
+        <p className="font-medium text-base" dangerouslySetInnerHTML={{ __html: message }} />
+      </div>
+    </div>
+  );
+}
+
+function RatingNotices({ twig }: { twig: TwigOrder }) {
+  const { t } = useTranslation();
+  const { store } = useTwilight();
+  const settings = store?.settings?.rating;
+  const rated = !!twig.rating && !Array.isArray(twig.rating);
+
+  return (
+    <>
+      {settings?.allow_update && rated && (
+        <div className="flex items-start gap-2 bg-blue-50 border border-blue-200 text-blue-500 px-2 py-3 rounded-md text-sm">
+          <i className="sicon-info"></i>
+          <p>
+            {t('pages.order.can_edit_or_delete_your_review_within')} {settings.update_period}{' '}
+            {t('pages.order.days_since_added')}.
+          </p>
+        </div>
+      )}
+      {twig.can_rate && (
+        <div className="rating-header gradient-bg center-between">
+          <div>
+            <h2 className="font-bold mb-1">{t('pages.order.order_rating_title')}</h2>
+            <p className="text-sm">{t('pages.order.order_rating_message')}</p>
+          </div>
+          <SallaButton
+            data-testid="store-order-rate-btn"
+            color="light"
+            className="btn--rounded-full !text-primary"
+            onClick={() => window.salla?.event?.dispatch('rating::open')}
+          >
+            {t('pages.rating.rate')}
+          </SallaButton>
+        </div>
+      )}
+    </>
+  );
+}
+
+function OrderRatings({ twig }: { twig: TwigOrder }) {
+  const { t } = useTranslation();
+  const { store } = useTwilight();
+  const allowUpdate = !!store?.settings?.rating?.allow_update;
+  const rating = Array.isArray(twig.rating) ? undefined : twig.rating;
+
+  return (
+    <>
+      {rating?.store?.stars ? (
+        <RatingSection
+          title={t('pages.rating.rate_the_store')}
+          rating={rating.store}
+          type="store"
+          allowUpdate={allowUpdate}
+        />
+      ) : null}
+      {rating?.shipping?.stars ? (
+        <RatingSection
+          title={t('pages.rating.rate_shipping')}
+          rating={rating.shipping}
+          type="shipping"
+          allowUpdate={allowUpdate}
+        />
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * The order page as the Twig storefront renders it (Raed's `pages/customer/orders/single.twig`).
+ * The markup and the Twilight components read the order in Twig's shape (`componentsOrder`);
+ * `order` supplies what that shape lacks and Twig computed on the server: the actions and the
+ * receipt and payment URLs.
+ */
+export function OrderSinglePage({ order, page, componentsOrder }: OrderSinglePageProps) {
+  // The order components read the order id from `salla.config.page.id`, which the router
+  // only sets on client-side navigations — seed it so a direct load works too.
+  usePageConfig(page);
+  const { store } = useTwilight();
+  const { format } = useMoney();
+  const twig = (componentsOrder ?? { items: [] }) as unknown as TwigOrder;
+  const paymentExpired =
+    order.actions.payable && (order.payment?.pending_payment_ends_at ?? 0) === 0;
+  const money = (amount: number, currency?: string) => format(amount, { currency });
+
+  return (
+    <div className="space-y-4">
+      <TitleRow order={order} />
+
+      <HookSlot name="customer:orders.single.details.start" />
+
+      <OrderHeader order={order} links={twig.links} paymentExpired={paymentExpired} />
+
+      {twig.is_pickable && <SallaOrderBranch data-testid="store-order-branch" stackCards />}
+
+      <RefundMessage message={order.refund_message} />
+
+      <RatingNotices twig={twig} />
+
+      <div className="overflow-hidden space-y-5">
+        <div className="shipping-orders">
+          <ShippingHeader twig={twig} order={order} />
+          {order.items.map((item, index) => (
+            <OrderItemRow
+              key={item.id}
+              item={item}
+              twigItem={twig.items[index]}
+              money={money}
+              currency={order.currency}
+            />
+          ))}
+        </div>
+
+        {!!twig.options?.length && (
+          <OrderOptionsTable options={twig.options} money={money} currency={order.currency} />
+        )}
+      </div>
+
+      {componentsOrder && (
+        <SallaOrderTotalsCard
+          data-testid="store-order-totals"
+          order={JSON.stringify(componentsOrder)}
+        />
+      )}
+
+      <OrderActions order={order} paymentExpired={paymentExpired} />
+
+      <OrderRatings twig={twig} />
+
+      <HookSlot name="customer:orders.single.details.end" />
+
+      {(twig.can_rate || store?.settings?.rating?.allow_update) && (
+        <SallaRatingModal data-testid="store-order-rating-modal" />
+      )}
+    </div>
+  );
+}

package/tailwind/routes/account/orders/OrdersPage.tsx.txt

@@ -0,0 +1,28 @@
+import { SallaOrders } from '@salla.sa/twilight-components-react/orders';
+import { HookSlot } from '../../../hooks';
+import { useTranslation } from '../../../providers/I18nProvider';
+import type { OrdersPageProps } from './types';
+
+/** The orders list as the Twig storefront renders it: `<salla-orders>` loads and shows it. */
+export function OrdersPage({ orders, query }: OrdersPageProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <HookSlot name="customer:orders.index.items.start" />
+      {orders.length ? (
+        <SallaOrders
+          data-testid="store-orders-list"
+          // Typed as status ids; the API also takes the `pending` slug the loader uses.
+          params={query?.status ? ({ status: query.status } as never) : undefined}
+        />
+      ) : (
+        <div data-testid="store-orders-empty" className="no-content-placeholder">
+          <i className="sicon-packed-box icon"></i>
+          <p>{t('pages.orders.non_orders')}</p>
+        </div>
+      )}
+      <HookSlot name="customer:orders.index.items.end" />
+    </>
+  );
+}