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

package/tailwind/components/snippets/AppsSnippets.tsx.txt

@@ -0,0 +1,225 @@
+import { useEffect, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { apps, type AppSnippetRow } from '../../api/apps';
+import { installAppScope } from '../../utils/app-scope';
+import { applyThemeHookSlots } from '../../utils/theme-hook-slots';
+import { getTwilightContext } from '../../twilight/context';
+
+/** How long to wait on the SDK / settings before injecting anyway. */
+const READY_TIMEOUT_MS = 2500;
+
+// Module-level so StrictMode double-effects and remounts can't inject twice per page load.
+let injected = false;
+
+/** A snippet plus its app's scope id — the key that resolves its config bucket. */
+type OwnedSnippet = AppSnippetRow & { appScopeId: string };
+
+/**
+ * Appends raw snippet HTML to `target`, recreating each `<script>` — innerHTML-parsed
+ * scripts are flagged "already started" and never run.
+ */
+export function injectHtml(html: string, target: HTMLElement) {
+  const tpl = document.createElement('template');
+  tpl.innerHTML = html;
+  tpl.content.querySelectorAll('script').forEach((inert) => {
+    // importmap scripts can't be added post-init; the engine already injects its own.
+    if (inert.type === 'importmap') {
+      inert.remove();
+      return;
+    }
+    const script = document.createElement('script');
+    for (const attr of Array.from(inert.attributes)) {
+      script.setAttribute(attr.name, attr.value);
+    }
+    script.text = inert.text;
+    inert.replaceWith(script);
+  });
+  target.appendChild(tpl.content);
+}
+
+/**
+ * Replaces `{{customer.x}}` placeholders with SDK config `user.*` values. Non-`customer.`
+ * params are left untouched, matching the classic themes.
+ */
+export function resolveCustomerParams(content: string, params?: string[]): string {
+  if (!params?.length) return content;
+  for (const param of params) {
+    if (!param.startsWith('customer.')) continue;
+    const value = String(window.salla?.config?.get(param.replace(/^customer\./, 'user.')) ?? '');
+    // Tolerate inner whitespace (`{{ customer.email }}`); function replacement keeps `value`
+    // literal so a `$&` in customer data isn't expanded.
+    const escaped = param.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const placeholder = new RegExp(`\\{\\{\\s*${escaped}\\s*\\}\\}`, 'g');
+    content = content.replace(placeholder, () => value);
+  }
+  return content;
+}
+
+/** Resolves after `ms`, so a promise that may never settle can't block injection. */
+const timeout = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * `onReady` hangs forever if the SDK never initializes; race a timeout so a broken SDK
+ * degrades to unsubstituted placeholders instead of dropping every snippet.
+ */
+const waitForSdk = (): Promise<unknown> => {
+  const ready = window.salla?.onReady();
+  return ready ? Promise.race([ready, timeout(READY_TIMEOUT_MS)]) : Promise.resolve();
+};
+
+/** Holds the snippets' onReady callbacks until all are injected, as on Twig, where they parse before ready. */
+export function withDeferredOnReady(inject: () => void): void {
+  const sdk = window.salla;
+  const onReady = sdk?.onReady;
+  if (!sdk || typeof onReady !== 'function') return inject();
+
+  const queued: Array<() => void> = [];
+  sdk.onReady = (callback) =>
+    new Promise<void>((resolve, reject) => {
+      queued.push(() => onReady.call(sdk, callback).then(resolve, reject));
+    });
+  try {
+    inject();
+  } finally {
+    sdk.onReady = onReady;
+  }
+  queued.forEach((run) => run());
+}
+
+/**
+ * Whitelists hook slots, installs the config sandbox, then injects the inline snippets.
+ * Runs once per page load, after the SDK is ready.
+ */
+function mountSnippets(
+  owned: OwnedSnippet[],
+  clientSnippets: OwnedSnippet[],
+  buckets: Record<string, Record<string, unknown>>
+): void {
+  // Backstop for the inline head copy (see renderThemeHookSlotsScript) — that one runs at
+  // parse time, ahead of the snippet scripts; this only covers a head that didn't render.
+  applyThemeHookSlots();
+
+  // Install before any snippet resolves config. The inline SSR-head install normally got there
+  // first (with these buckets, or with none when its prefetch failed), so this either installs
+  // the factory or seeds the buckets into it. Pass the complete map once.
+  installAppScope({ apps: buckets });
+
+  // Flag every CDN scope with a missing bucket (SSR-rendered ones included).
+  const unresolved = new Set<string>();
+  for (const s of owned) {
+    if (s.url && !(s.appScopeId in buckets)) unresolved.add(s.appScopeId);
+  }
+
+  withDeferredOnReady(() => {
+    for (const snippet of clientSnippets) {
+      // Honour `place`: a head-placed snippet is often a <meta>/<link>/<style> (site
+      // verification, canonical, preload) that crawlers only read inside <head>.
+      const target = snippet.place?.includes('head') ? document.head : document.body;
+      try {
+        injectHtml(resolveCustomerParams(snippet.content, snippet.customer_parameters), target);
+      } catch (error) {
+        console.error(`[salla] failed to inject snippet for app ${snippet.appScopeId}`, error);
+      }
+    }
+  });
+
+  if (unresolved.size) {
+    // One line per page, not per snippet; expected during settings-endpoint rollout.
+    console.warn(
+      `[salla] app settings missing for ${unresolved.size} app(s); their snippets ran without app.* config`,
+      [...unresolved]
+    );
+  }
+}
+
+/** A CDN snippet reduced to what its SSR `<script>` tag needs. */
+interface SsrCdnScript {
+  key: string;
+  url: string;
+  snippetId?: number;
+  appScopeId: string;
+}
+
+/**
+ * Mounts installed apps' snippets once per page load:
+ *  - **CDN** — rendered as SSR `<script>` tags in <body> (see return), so they exist on first
+ *    paint. `place` doesn't apply: they're deferred scripts, which run in order either way.
+ *  - **inline** — injected client-side in the effect, into `place`'s target (head or body).
+ */
+export function AppsSnippets() {
+  // From twilight context, not useQuery: React Query isn't dehydrated here, so useQuery has no
+  // SSR data — but the CDN <script> tags must render server-side.
+  const ssrSnippets = getTwilightContext().appsSnippets;
+
+  // Client fallback for when the SSR prefetch failed or timed out (it fails open, non-fatal).
+  // Without it a single blip on `apps/snippets` would drop every installed app's snippets for
+  // the whole page load — no CDN tags, no inline scripts, no hook slots. Retries here because
+  // the query's own `retry: 0` exists only to bound the SSR wait.
+  const { data: fallbackSnippets } = useQuery({
+    ...apps.queries.snippets(),
+    enabled: !ssrSnippets,
+    retry: 2,
+  });
+  const data = ssrSnippets ?? fallbackSnippets;
+
+  const { data: settings, isSuccess, isError } = useQuery({ ...apps.queries.settings(), retry: 2 });
+
+  // Fail open: inject once settings settle either way, so snippets that never read `app.*`
+  // aren't dropped when the bucket is empty.
+  const settingsSettled = isSuccess || isError;
+
+  // Each enabled app's snippets, tagged with its scope id (the encoded `id`). Older payloads
+  // lacking `id` get a deterministic per-app fallback sharing one empty bucket.
+  const owned = useMemo<OwnedSnippet[]>(
+    () =>
+      (data ?? [])
+        .filter((app) => app.status === 'enabled')
+        .flatMap((app) =>
+          app.snippets.map((s) => ({ ...s, appScopeId: app.id ?? `unresolved-${app.app_id}` }))
+        ),
+    [data]
+  );
+
+  // Every CDN snippet → a real `<script>` tag in the SSR body (rendered below).
+  const ssrCdnScripts = useMemo<SsrCdnScript[]>(
+    () =>
+      owned
+        .filter((s) => s.url)
+        .map((s, i) => ({
+          key: `${s.appScopeId}:${s.id ?? i}`,
+          url: s.url as string,
+          snippetId: s.id,
+          appScopeId: s.appScopeId,
+        })),
+    [owned]
+  );
+
+  useEffect(() => {
+    if (injected || !data || !settingsSettled) return;
+    injected = true;
+
+    // Client-injected: inline snippets only. Every CDN snippet is SSR-rendered (below).
+    const clientSnippets = owned.filter((s) => !s.url);
+
+    // Always wait for the SDK: a snippet body calls the global `salla`/`Salla` (config, hooks,
+    // event bus) whether or not it declares customer parameters, and those are only populated
+    // after init. The wait is timeout-raced, so a broken SDK still can't strand injection.
+    void waitForSdk().then(() => mountSnippets(owned, clientSnippets, settings?.apps ?? {}));
+  }, [data, owned, settings, settingsSettled]);
+
+  // CDN snippets as classic `defer` scripts: non-blocking, in-order, kept in <body> (React hoists
+  // only `async` to <head>), and still exposing `document.currentScript` for the wrapper.
+  return (
+    <>
+      {ssrCdnScripts.map((s) => (
+        <script
+          key={s.key}
+          src={s.url}
+          defer
+          data-scope-id={s.appScopeId}
+          data-snippet-id={s.snippetId != null ? String(s.snippetId) : ''}
+        />
+      ))}
+    </>
+  );
+}

package/tailwind/components/snippets/SallaSdkScripts.tsx.txt

@@ -0,0 +1,14 @@
+import type { StoreContext } from '../../api/store';
+import { resolveTwilightSdkUrl, TICKETING_SCRIPT_URL } from '../../routes/root/head';
+
+/** SDK modules at the end of <body>, ahead of the snippets: same run order as from <head>, later download. */
+export function SallaSdkScripts({ settings }: { settings?: StoreContext }) {
+  return (
+    <>
+      <script id="salla-sdk" type="module" src={resolveTwilightSdkUrl(settings)} />
+      {settings?.store?.settings?.ticketing_system_enabled && (
+        <script id="salla-ticketing-script" type="module" src={TICKETING_SCRIPT_URL} />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,4 @@
+// Component - injects installed marketplace apps' storefront snippets (inline + CDN).
+// `injectHtml` / `resolveCustomerParams` stay internal to the component (tests import them
+// from the module directly) — themes only ever render <AppsSnippets />.
+export { AppsSnippets } from './AppsSnippets';

package/tailwind/components/store/StoreClosedNotification.tsx.txt

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { useIsProduct } from '../../providers/NavigationProvider';
+import { useTwilight } from '../../providers/TwilightProvider';
+import { useOpeningHours } from '../../hooks/useOpeningHours';
+import { useTranslation } from '../../providers/I18nProvider';
+
+export interface StoreClosedNotificationProps {
+  /** Whether to show the notification (defaults to true when store is closed on product page) */
+  show?: boolean;
+}
+
+/**
+ * StoreClosedNotification - Shows a notification bar when the store is closed.
+ *
+ * Mirrors PHP ReceivingOrdersTimesWidget:
+ * - Only shows on product pages
+ * - Only shows when store is closed for receiving orders
+ * - Displays when the store will open next
+ * - Has a close button to dismiss
+ *
+ * Injected via hook registry at body:start.
+ */
+export function StoreClosedNotification(_props: StoreClosedNotificationProps) {
+  const { store } = useTwilight();
+  const { t } = useTranslation();
+  const { isOpen, isEnabled, nextOpenFormatted } = useOpeningHours(store.settings?.opening_hours);
+  const [dismissed, setDismissed] = useState(false);
+
+  // Check if we're on a product page
+  const isProductPage = useIsProduct();
+
+  // Conditions: product page, opening hours enabled, store closed, not dismissed
+  if (!isProductPage || !isEnabled || isOpen || dismissed || !nextOpenFormatted) {
+    return null;
+  }
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setDismissed(true);
+  };
+
+  return (
+    <div
+      className="store-notify"
+      id="store-closed-notification"
+      data-testid="store-closed-notification"
+      style={{
+        backgroundColor: '#d63031',
+        color: '#fff',
+        padding: '10px 15px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+      }}
+    >
+      <a
+        href="#"
+        id="notify-close"
+        onClick={handleClose}
+        style={{ position: 'absolute', left: 15, color: '#fff', textDecoration: 'none' }}
+      >
+        <i className="sicon-cancel" />
+      </a>
+      <p style={{ margin: 0, textAlign: 'center', flex: 1 }}>
+        {t('store.closed_notification', {
+          defaultValue: `المتجر حاليا مغلق لاستقبال الطلبات وسيتم فتحه (${nextOpenFormatted})`,
+          nextOpen: nextOpenFormatted,
+        })}
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,8 @@
+// Component - injects store closed notification bar via useEffect
+export {
+  StoreClosedNotification,
+  type StoreClosedNotificationProps,
+} from './StoreClosedNotification';
+
+// Lazy component
+export { LazyStoreClosedNotification } from './lazy';

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

@@ -0,0 +1,8 @@
+import { lazy } from 'react';
+
+/** Lazy-loaded StoreClosedNotification component. */
+export const LazyStoreClosedNotification = lazy(() =>
+  import('./StoreClosedNotification').then((m) => ({
+    default: m.StoreClosedNotification,
+  }))
+);

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';