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

package/tailwind/components/layout/Header.tsx.txt

@@ -0,0 +1,154 @@
+import { useState } from 'react';
+import { useIsHome } from '../../providers/NavigationProvider';
+import { SallaCartSummary } from '@salla.sa/twilight-components-react/cart-summary';
+import { SallaContacts } from '@salla.sa/twilight-components-react/contacts';
+import { SallaLocalizationModal } from '@salla.sa/twilight-components-react/localization-modal';
+import { SallaMenu } from '@salla.sa/twilight-components-react/menu';
+import { SallaSearch } from '@salla.sa/twilight-components-react/search';
+import { SallaUserMenu } from '@salla.sa/twilight-components-react/user-menu';
+import { useTwilight } from '../../providers/twilight-context';
+import { useTranslation } from '../../providers/I18nProvider';
+import { HookSlot } from '../../hooks/HookSlot';
+import { MainMenu, MobileMenu } from '../navigation';
+import { Image } from '../common';
+import { PageAdvertisements } from './PageAdvertisements';
+import type { Cart } from '../../types';
+
+interface HeaderProps {
+  cart?: Cart;
+}
+
+export function Header(_props: HeaderProps) {
+  const { currency, theme, store } = useTwilight();
+  const { locale, languageName } = useTranslation();
+  const settings = theme?.settings || {};
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  // Check if we're on homepage
+  const isHomepage = useIsHome();
+
+  const StoreTitle = isHomepage ? 'h1' : 'span';
+
+  return (
+    <header className="store-header" suppressHydrationWarning>
+      <HookSlot name="header:start" />
+      <div className="advertisement-slot">
+        <PageAdvertisements />
+      </div>
+      {/* Top Nav */}
+      <div className={`top-navbar${settings.topnav_is_dark ? ' top-navbar--dark' : ''}`}>
+        <div className="container flex justify-between">
+          <div className="flex-1 flex items-center gap-2">
+            {/* Footer Menu */}
+            {settings.important_links && <SallaMenu source="footer" topnav />}
+
+            {/* Language & Currency */}
+            <div className="header-buttons">
+              {(store?.settings?.is_multilingual || store?.settings?.currencies_enabled) && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => window.salla?.event.dispatch('localization::open')}
+                    className="btn--rounded-gray basis-0"
+                  >
+                    <span>{languageName}</span>
+                    <span className="mx-1.5">|</span>
+                    <span className={`flag iti__flag  iti__${store?.country.toLowerCase()}`}></span>
+
+                    <span>
+                      {store?.settings?.use_sar_symbol && currency?.code === 'SAR' ? (
+                        <i className="sicon-sar"></i>
+                      ) : (
+                        <>{currency?.symbol}</>
+                      )}
+                    </span>
+                  </button>
+                  {/* TODO:: support switch the lang without hit the web API, by set it in the sdk and local storage */}
+                  {/* TODO:: Support switch the curency without hit the web API, by set it in the sdk and local storage */}
+                  <SallaLocalizationModal
+                    language={locale}
+                    currency={currency?.code || 'SAR'}
+                    suppressHydrationWarning
+                  />
+                </>
+              )}
+            </div>
+
+            {/* Scopes / Branches */}
+            {store?.scope && (
+              <button
+                type="button"
+                className="btn--rounded-gray"
+                onClick={() =>
+                  window.salla?.event.dispatch('scopes::open', {
+                    mode: 'default',
+                  })
+                }
+              >
+                <i className="sicon-location rtl:ml-1 ltr:mr-1"></i>
+                {store.scope.name}
+              </button>
+            )}
+
+            {/* Search bar */}
+            <div className="header-search flex-1">
+              {/* todo:: use a search icon insted with open the search popup */}
+              <SallaSearch inline oval height={36} />
+            </div>
+          </div>
+
+          <SallaContacts contacts={store?.contacts} contactsTitle="N/A" isHeader />
+        </div>
+      </div>
+
+      {/* Main Nav */}
+      <div
+        id="mainnav"
+        className={`main-nav-container shadow-default bg-white flex items-center relative z-50${settings.header_is_sticky ? ' sticky top-0' : ''}`}
+      >
+        <div className="inner bg-inherit w-full">
+          <div className="container">
+            <div className="flex items-stretch justify-between relative">
+              <div className="flex items-center">
+                <a
+                  className="lg:hidden mburger mburger--collapse leading-none rtl:ml-4 ltr:mr-4"
+                  href="#mobile-menu"
+                  aria-label="Open-menu"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setIsMobileMenuOpen(true);
+                  }}
+                >
+                  <i className="sicon-menu text-primary text-2xl"></i>
+                </a>
+                <a className="navbar-brand" href={store?.url || '/'}>
+                  <div className="logo-wrapper">
+                    <Image
+                      src={store?.logo}
+                      alt={`${store?.name || 'Store'} logo`}
+                      priority
+                      width={120}
+                      height={48}
+                    />
+                  </div>
+                  <StoreTitle className="sr-only">{store?.name || 'Store'}</StoreTitle>
+                </a>
+                <MainMenu />
+              </div>
+              <div className="flex items-center justify-end my-2.5">
+                <SallaUserMenu avatarOnly showHeader className="header-btn" />
+                <SallaCartSummary className="ml-4 rtl:ml-[unset] rtl:mr-4">
+                  <i slot="icon" className="header-btn__icon icon sicon-shopping-bag"></i>
+                </SallaCartSummary>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      <MobileMenu isOpen={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} />
+      <HookSlot name="header:end" />
+    </header>
+  );
+}

package/tailwind/components/layout/MasterLayout.tsx.txt

@@ -0,0 +1,63 @@
+import { lazy, Suspense } from 'react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import type { LayoutProps } from '../../types';
+import { useTwilight } from '../../providers/twilight-context';
+import { useUser } from '../../hooks';
+
+const SallaLoginModal = lazy(() =>
+  import('@salla.sa/twilight-components-react/login-modal').then((m) => ({
+    default: m.SallaLoginModal,
+  }))
+);
+const SallaScopes = lazy(() =>
+  import('@salla.sa/twilight-components-react/scopes').then((m) => ({
+    default: m.SallaScopes,
+  }))
+);
+const SallaOfferModal = lazy(() =>
+  import('@salla.sa/twilight-components-react/offer-modal').then((m) => ({
+    default: m.SallaOfferModal,
+  }))
+);
+
+export function MasterLayout({ children }: LayoutProps) {
+  const { store } = useTwilight();
+  const { isLoggedIn } = useUser();
+
+  return (
+    <>
+      <div className="app-inner flex flex-col min-h-full">
+        <Header />
+        <main id="main-content" role="main" className="flex-1">
+          {children}
+        </main>
+        <Footer />
+      </div>
+
+      <Suspense>
+        <SallaOfferModal />
+      </Suspense>
+
+      {!isLoggedIn && (
+        <Suspense>
+          <SallaLoginModal
+            isEmailAllowed={store?.settings?.auth?.email_allowed}
+            isMobileAllowed={store?.settings?.auth?.mobile_allowed}
+            isEmailRequired={store?.settings?.auth?.is_email_required}
+            suppressHydrationWarning
+          />
+        </Suspense>
+      )}
+
+      {store?.scope && (
+        <Suspense>
+          <SallaScopes
+            selection={store?.scope?.display_as === 'popup' ? 'mandatory' : 'optional'}
+            suppressHydrationWarning
+          />
+        </Suspense>
+      )}
+    </>
+  );
+}

package/tailwind/components/layout/PageAdvertisements.tsx.txt

@@ -0,0 +1,131 @@
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { advertisement, advertisementsFor, type Advertisement } from '../../api/advertisement';
+import { whenSallaReady } from '../../utils/sdk-helpers';
+import { useTranslation } from '../../providers/I18nProvider';
+import { getTwilightContext, subscribeTwilight } from '../../twilight/context';
+
+const currentPageSlug = () => getTwilightContext().page?.slug;
+
+/** The key `<salla-advertisement>` marks a closed ad with, through `salla.storage` (store.js, JSON). */
+const dismissedKey = (id: number) => `statusAd-${id}`;
+
+/** Stable while the query has no data, so the effect below doesn't rerun on every render. */
+const NO_ADS: Advertisement[] = [];
+
+/** Hides the ads this visitor closed before the first paint; the effect then drops them. */
+const HIDE_DISMISSED_SCRIPT =
+  "(function(){try{if(window.self!==window.top)return;document.currentScript.parentNode.querySelectorAll('.s-advertisement[data-id]').forEach(function(e){if(localStorage.getItem('statusAd-'+e.getAttribute('data-id')))e.hidden=true})}catch(e){}})();";
+
+function isDismissed(id: number): boolean {
+  try {
+    return Boolean(window.localStorage.getItem(dismissedKey(id)));
+  } catch {
+    return false;
+  }
+}
+
+function dismiss(id: number): void {
+  const storage = window.salla?.storage;
+  if (typeof storage?.set === 'function') storage.set(dismissedKey(id), 'dismissed');
+  else {
+    try {
+      window.localStorage.setItem(dismissedKey(id), JSON.stringify('dismissed'));
+    } catch {
+      // Storage disabled: the ad hides for this page view only.
+    }
+  }
+}
+
+interface ClientView {
+  /** The theme editor's iframe, or the SDK's debug flag: every ad shows, closed or not. */
+  preview: boolean;
+  /** Inside the Salla mobile app, which shows no ads. */
+  inApp: boolean;
+  dismissed: Set<number>;
+}
+
+/**
+ * The merchant's announcement bars, in place of `<salla-advertisement>`. Same data, rules and
+ * markup, but rendered on the server (the ads are prefetched in the root `beforeLoad`), so the
+ * bar is in the first paint instead of pushing the page down when the web component fetches it.
+ */
+export function PageAdvertisements() {
+  const { t } = useTranslation();
+  // The deepest route loader's `page`, the page `salla.config` reports.
+  const pageSlug = useSyncExternalStore(subscribeTwilight, currentPageSlug, currentPageSlug);
+  // The query's `retry: 0` only bounds the server wait; the browser may retry.
+  const { data: ads = NO_ADS } = useQuery({ ...advertisement.queries.list(), retry: 2 });
+  const [view, setView] = useState<ClientView | null>(null);
+
+  useEffect(() => {
+    const dismissed = new Set(ads.filter((ad) => isDismissed(ad.id)).map((ad) => ad.id));
+    setView({ preview: window.self !== window.top, inApp: false, dismissed });
+    return whenSallaReady((sdk) => {
+      const config = sdk.config as { isMobileApp?: () => boolean; isDebug?: () => boolean };
+      const inApp = Boolean(config?.isMobileApp?.());
+      const debug = Boolean(config?.isDebug?.());
+      if (inApp || debug) {
+        setView((current) =>
+          current ? { ...current, inApp, preview: current.preview || debug } : current
+        );
+      }
+    });
+  }, [ads]);
+
+  if (view?.inApp) return null;
+  const shown = view?.preview
+    ? ads
+    : advertisementsFor(ads, pageSlug).filter((ad) => !view?.dismissed.has(ad.id));
+  if (!shown.length) return null;
+
+  const close = (id: number) => {
+    dismiss(id);
+    setView((current) =>
+      current ? { ...current, dismissed: new Set(current.dismissed).add(id) } : current
+    );
+  };
+
+  return (
+    <>
+      {shown.map((ad) => (
+        <div
+          key={ad.id}
+          className="s-advertisement"
+          data-id={ad.id}
+          style={{ backgroundColor: ad.colors?.bg, color: ad.colors?.text }}
+        >
+          <div className="s-advertisement-content container flex justify-between items-center py-2.5">
+            <span className="s-advertisement-content-main flex-1 font-bold text-center text-sm">
+              {/* Rendered without an icon too, as the SDK does: its margin is part of the layout. */}
+              <i
+                className={`s-advertisement-content-icon inline-block align-middle me-2 text-base ${ad.icon ?? ''}`}
+              />
+              {ad.url ? (
+                <a
+                  href={ad.url}
+                  target={ad.target ?? undefined}
+                  rel={ad.target === '_blank' ? 'noopener' : undefined}
+                >
+                  {ad.description}
+                </a>
+              ) : (
+                ad.description
+              )}
+            </span>
+            <button
+              type="button"
+              className="s-advertisement-action px-1"
+              aria-label={t('common.buttons.close', 'Close')}
+              onClick={() => close(ad.id)}
+            >
+              {/* `inline-block`: before the icon CSS loads, an empty inline `<i>` leaves the button 0px tall. */}
+              <i className="sicon-cancel inline-block" />
+            </button>
+          </div>
+        </div>
+      ))}
+      <script suppressHydrationWarning>{HIDE_DISMISSED_SCRIPT}</script>
+    </>
+  );
+}

package/tailwind/components/layout/WidgetHead.tsx.txt

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { useTwilight } from '../../providers/twilight-context';
+import { HookSlot } from '../../hooks/HookSlot';
+
+/**
+ * Pushes the equal-height product card configuration to the GTM dataLayer.
+ * Mirrors PHP `HeadWidget::run()` -> `GoogleTagManager::set('equalHeight', ...)`.
+ *
+ * @param settings - Flat settings map from the store (keyed by dot-path strings).
+ */
+export function pushEqualHeightConfig(settings: Record<string, unknown>): void {
+  const isEnabled = settings['products::card.equal-height.enabled'];
+  if (isEnabled === undefined || isEnabled === null) return;
+
+  window.dataLayer = window.dataLayer ?? [];
+  window.dataLayer.push({
+    equalHeight: {
+      isEnabled: Boolean(isEnabled),
+      max: Number(settings['products::card.equal-height.max-pixel'] ?? 300),
+      classType: String(settings['products::card.equal-height.type'] ?? 'min'),
+    },
+  });
+}
+
+/**
+ * WidgetHead - Client-side head infrastructure widget.
+ *
+ * Handles runtime-only head operations that cannot be done in SSR head():
+ * - Pushes `equalHeight` config to GTM dataLayer (requires window).
+ * - Exposes `head:start`, `head`, and `head:end` HookSlots for theme customisation.
+ *
+ * Static head elements (favicon, msapplication tiles, theme colors, hreflang, custom CSS/JS)
+ * are handled in __root.tsx head() function.
+ *
+ * Renders no visible UI.
+ */
+export function WidgetHead() {
+  const { store } = useTwilight();
+
+  // ── equalHeight → GTM dataLayer ───────────────────────────────────────────
+  useEffect(() => {
+    const settings = (store.settings as unknown as Record<string, unknown>) ?? {};
+    pushEqualHeightConfig(settings);
+  }, [store.id, store.settings]);
+
+  return (
+    <>
+      <HookSlot name="head:start" ssr />
+      <HookSlot name="head" ssr />
+      <HookSlot name="head:end" ssr />
+    </>
+  );
+}

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

@@ -0,0 +1,27 @@
+import {
+  LazyHeader,
+  LazyFooter,
+  LazyCopyright,
+  LazyMasterLayout,
+  LazyWidgetHead,
+  LazyCustomerLayout,
+} from './lazy';
+
+// Lazy-loaded layout components (code-split)
+export {
+  LazyHeader as Header,
+  LazyFooter as Footer,
+  LazyCopyright as Copyright,
+  LazyMasterLayout as MasterLayout,
+  LazyWidgetHead as WidgetHead,
+  LazyCustomerLayout as CustomerLayout,
+};
+
+// Eager: the header renders it on the server, so it can't suspend.
+export { PageAdvertisements } from './PageAdvertisements';
+
+// Export utilities directly (not components)
+export { pushEqualHeightConfig } from './WidgetHead';
+
+// Shared types
+export type { LayoutProps } from './types';

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

@@ -0,0 +1,25 @@
+import { lazy } from 'react';
+
+/**
+ * Lazy-loaded layout components
+ * Use these for code-splitting layout sections
+ */
+export const LazyHeader = lazy(() => import('./Header').then((m) => ({ default: m.Header })));
+
+export const LazyFooter = lazy(() => import('./Footer').then((m) => ({ default: m.Footer })));
+
+export const LazyCopyright = lazy(() =>
+  import('./Copyright').then((m) => ({ default: m.Copyright }))
+);
+
+export const LazyMasterLayout = lazy(() =>
+  import('./MasterLayout').then((m) => ({ default: m.MasterLayout }))
+);
+
+export const LazyWidgetHead = lazy(() =>
+  import('./WidgetHead').then((m) => ({ default: m.WidgetHead }))
+);
+
+export const LazyCustomerLayout = lazy(() =>
+  import('./CustomerLayout').then((m) => ({ default: m.CustomerLayout }))
+);

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

@@ -0,0 +1,11 @@
+/**
+ * Layout Component Types
+ * Only types shared across multiple components.
+ */
+
+import type { ReactNode } from 'react';
+
+/** Base props for layout components with children */
+export interface LayoutProps {
+  children: ReactNode;
+}

package/tailwind/components/modal/ImageModal.tsx.txt

@@ -0,0 +1,70 @@
+/**
+ * ImageModal - Modal for displaying images in full scale
+ *
+ * Used for previewing images like tax certificates, etc.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ * const [imageSrc, setImageSrc] = useState('');
+ *
+ * <a onClick={() => { setImageSrc('/images/tax-certificate.jpg'); setIsOpen(true); }}>
+ *   <img src="/images/tax-thumb.png" />
+ * </a>
+ *
+ * <ImageModal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   src={imageSrc}
+ *   alt="Tax Certificate"
+ * />
+ * ```
+ */
+
+import { useState, type ImgHTMLAttributes } from 'react';
+import { Modal } from './Modal';
+
+export interface ImageModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Image source URL */
+  src: string;
+  /** Alt text for the image */
+  alt?: string;
+  /** Title shown in modal header */
+  title?: string;
+  /** Additional props for the img element */
+  imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'>;
+}
+
+function ModalImage({ src, alt, imgProps }: Pick<ImageModalProps, 'src' | 'alt' | 'imgProps'>) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  return (
+    <>
+      {!isLoaded && <div className="animate-pulse bg-gray-200 w-full h-64 rounded" />}
+      <img
+        src={src}
+        alt={alt}
+        className={`max-w-full max-h-[70vh] object-contain ${isLoaded ? 'block' : 'hidden'}`}
+        onLoad={() => setIsLoaded(true)}
+        {...imgProps}
+      />
+    </>
+  );
+}
+
+export function ImageModal({ isOpen, onClose, src, alt = '', title, imgProps }: ImageModalProps) {
+  if (!src) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" position="center">
+      <Modal.Header onClose={onClose} showCloseButton>
+        {title || ''}
+      </Modal.Header>
+      <Modal.Body className="flex items-center justify-center min-h-64">
+        <ModalImage key={src} src={src} alt={alt} imgProps={imgProps} />
+      </Modal.Body>
+    </Modal>
+  );
+}