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

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

@@ -0,0 +1,343 @@
+import { useState } from 'react';
+import { SallaAppsIcons } from '@salla.sa/twilight-components-react/apps-icons';
+import { SallaSocial } from '@salla.sa/twilight-components-react/social';
+import { SallaMenu } from '@salla.sa/twilight-components-react/menu';
+import { SallaTrustBadges } from '@salla.sa/twilight-components-react/trust-badges';
+import { SallaPayments } from '@salla.sa/twilight-components-react/payments';
+import { useTwilight } from '../../providers/twilight-context';
+import { useTranslation } from '../../providers/I18nProvider';
+import { HookSlot } from '../../hooks/HookSlot';
+import { Link, Image } from '../common';
+import { ImageModal } from '../modal';
+
+/** Salla's value-added-tax badge icon (70×70, CDN-resized) — a platform
+ *  asset shared by every store, not specific to any one theme. */
+const TAX_ICON_URL =
+  'https://cdn.salla.network/cdn-cgi/image/fit=scale-down,width=70,height=70,onerror=redirect,format=auto/images/tax.png?v=2.0.5';
+
+/**
+ * The store's value-added-tax registration: the tax number, plus the certificate as
+ * the tax icon that opens the certificate image full size in a modal. Nothing shows
+ * when the store has no tax number.
+ */
+function FooterTax({ dark }: { dark: boolean }) {
+  const { store } = useTwilight();
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const number = store.settings?.tax?.number;
+  const certificate = store.settings?.tax?.certificate;
+  if (!number) return null;
+
+  return (
+    <div
+      data-testid="store-footer-tax"
+      className="store-footer__tax flex items-end gap-2 rtl:space-x-reverse"
+    >
+      {certificate && (
+        <>
+          <button
+            type="button"
+            data-testid="store-footer-tax-certificate"
+            className="store-footer__tax-cert shrink-0"
+            aria-label={t('common.elements.tax_certificate', 'Tax Certificate')}
+            aria-haspopup="dialog"
+            onClick={() => setOpen(true)}
+          >
+            <img
+              src={TAX_ICON_URL}
+              alt={t('common.elements.tax_certificate', 'Tax Certificate')}
+              width={40}
+              height={50}
+              loading="lazy"
+              decoding="async"
+              className="w-10 rounded-sm transition-opacity hover:opacity-80"
+            />
+          </button>
+          <ImageModal
+            isOpen={open}
+            onClose={() => setOpen(false)}
+            src={certificate}
+            alt={t('common.elements.tax_certificate', 'Tax Certificate')}
+            title={t('common.elements.tax_certificate', 'Tax Certificate')}
+          />
+        </>
+      )}
+      <div>
+        <p className={`mb-1 text-sm opacity-70 ${dark ? 'text-white' : ''}`}>
+          {t('common.elements.tax_number', 'Tax Number')}
+        </p>
+        <b className="text-sm">{number}</b>
+      </div>
+    </div>
+  );
+}
+
+/** Saudi Business Center (SBC) logo, CDN-versioned like the tax icon -- also a
+ *  platform asset, not theme-specific. */
+const SBC_ICON_URL = 'https://cdn.salla.network/images/sbc.png?v=2.0.5';
+
+/**
+ * The store's Saudi Business Center certificate: a "Trusted by Business Platform" badge that
+ * opens the certificate's page on the SBC site so visitors can verify the merchant. Nothing
+ * shows when the store has no certificate.
+ */
+function FooterSbc({ dark }: { dark: boolean }) {
+  const { store } = useTwilight();
+  const { t } = useTranslation();
+  const id = store.settings?.certificate?.id;
+  if (!id) return null;
+
+  return (
+    <a
+      href={`https://eauthenticate.saudibusiness.gov.sa/certificate-details/${encodeURIComponent(id)}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      data-testid="store-footer-sbc"
+      className="store-footer__sbc flex items-center gap-2.5 transition-opacity hover:opacity-75"
+    >
+      <img
+        src={SBC_ICON_URL}
+        alt={`SBC ${id}`}
+        width={56}
+        height={40}
+        loading="lazy"
+        decoding="async"
+        className="h-10 w-14 rounded-sm"
+      />
+      <div>
+        <p className={`text-xs opacity-70 ${dark ? 'text-white' : ''}`}>
+          {t('blocks.footer.sbc_trusted_by', 'Trusted by')}
+        </p>
+        <b className="text-sm">{t('blocks.footer.sbc_platform', 'Business Platform')}</b>
+      </div>
+    </a>
+  );
+}
+
+/** Trust badges, the tax registration and the SBC badge, side by side (wrapping on narrow columns). */
+function FooterTrust({ dark, centered }: { dark: boolean; centered: boolean }) {
+  return (
+    <div
+      data-testid="store-footer-trust"
+      className={`store-footer__trust flex flex-wrap items-end gap-x-6 gap-y-3${centered ? ' justify-center' : ''}`}
+    >
+      <FooterTax dark={dark} />
+      <FooterSbc dark={dark} />
+      <SallaTrustBadges {...(dark ? { dark: true } : {})} />
+    </div>
+  );
+}
+
+/**
+ * The footer's own menu of ("important") links -- skipped entirely when
+ * `inSheet`, for a theme that opens it from somewhere else of its own (a
+ * mobile account sheet, a dedicated links screen, …) instead; showing it
+ * again down here would just be a redundant second copy. `heading` wraps it
+ * in the grid layout's own `.store-footer__links` column; the centered
+ * layout's inline row has none.
+ */
+function FooterLinksMenu({
+  inSheet,
+  className,
+  heading,
+  dark,
+}: {
+  inSheet: boolean;
+  className: string;
+  heading?: string;
+  dark: boolean;
+}) {
+  if (inSheet) return null;
+
+  const menu = (
+    <SallaMenu source="footer" useReactLink className={className} suppressHydrationWarning />
+  );
+  if (!heading) return menu;
+
+  return (
+    <div className="store-footer__links">
+      <h3 className={`mb-3 text-lg font-bold lg:mb-5 ${dark ? 'text-white' : 'text-gray-900'}`}>
+        {heading}
+      </h3>
+      {menu}
+    </div>
+  );
+}
+
+/** The logo link, same shape in both layouts -- only its own spacing differs. */
+function FooterLogo({ className }: { className: string }) {
+  const { store } = useTwilight();
+  return (
+    <Link
+      to="/"
+      className={`store-footer__logo inline-flex items-center m-0 transition-opacity hover:opacity-75 ${className}`}
+    >
+      <Image
+        src={store.logo}
+        alt={store.name || 'Store'}
+        width={150}
+        height={44}
+        objectFit="contain"
+        className="h-11 w-auto max-w-[180px]"
+      />
+    </Link>
+  );
+}
+
+/** Merchant-authored description HTML -- mirrors the Twig theme's
+ *  `store.description|raw`. Renders nothing when the store has none set. */
+function FooterDescription({ className }: { className: string }) {
+  const { store } = useTwilight();
+  if (!store.description) return null;
+  return (
+    <div
+      className={`store-footer__desc opacity-80 ${className}`}
+      dangerouslySetInnerHTML={{ __html: store.description }}
+    />
+  );
+}
+
+/** Centered layout: logo, description, social, footer menu, trust badges and
+ *  app buttons stacked as one centered column. */
+function FooterCenteredBody({ inSheet, isDark }: { inSheet: boolean; isDark: boolean }) {
+  const { store } = useTwilight();
+  const { t } = useTranslation();
+
+  return (
+    <div className="container mx-auto flex max-w-2xl flex-col items-center gap-6 text-center">
+      <FooterLogo className="" />
+      <FooterDescription className="" />
+      <SallaSocial />
+
+      <FooterLinksMenu
+        inSheet={inSheet}
+        className="store-footer__menu store-footer__menu--inline"
+        dark={isDark}
+      />
+
+      <FooterTrust dark={isDark} centered />
+
+      <div className="store-footer__apps flex flex-col items-center gap-3">
+        <SallaAppsIcons
+          apps={store.apps}
+          appsTitle={t('blocks.footer.download_apps', 'Get our apps')}
+        />
+      </div>
+    </div>
+  );
+}
+
+/** Columns layout: brand (logo / description / social / trust) and app
+ *  buttons side by side, with the footer menu as its own labeled column. */
+function FooterColumnsBody({ inSheet, isDark }: { inSheet: boolean; isDark: boolean }) {
+  const { store } = useTwilight();
+  const { t } = useTranslation();
+
+  return (
+    <div className="container grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-16">
+      <div className="store-footer__brand rtl:lg:pl-16 ltr:lg:pr-16 sm:col-span-2">
+        <FooterLogo className="mb-5" />
+        <FooterDescription className="max-w-sm leading-6 my-5" />
+        <SallaSocial className="block mb-6" />
+        <FooterTrust dark={isDark} centered={false} />
+      </div>
+
+      <FooterLinksMenu
+        inSheet={inSheet}
+        className="store-footer__menu store-footer__menu--stacked"
+        heading={t('blocks.footer.important_links', 'Important links')}
+        dark={isDark}
+      />
+
+      <div className="store-footer__apps">
+        <SallaAppsIcons
+          apps={store.apps}
+          appsTitle={t('blocks.footer.download_apps', 'Get our apps')}
+        />
+      </div>
+    </div>
+  );
+}
+
+export interface FooterProps {
+  /**
+   * Renders as a plain `<div>` (no second `<footer>` landmark) with the
+   * `footer:start` / `footer:end` hook slots skipped -- for a theme that
+   * repeats these widgets somewhere other than the page's own footer (a
+   * mobile sheet, for example) rather than rendering the real page footer a
+   * second time.
+   */
+  inSheet?: boolean;
+}
+
+/**
+ * Storefront footer.
+ *
+ * Two layouts, chosen by the `footer_layout` theme setting:
+ *  - **columns** (default): logo / description / social / trust badges, the
+ *    footer menu ("important links"), and app-store buttons, side by side.
+ *  - **centered**: the same pieces stacked as one centered column, with the
+ *    footer menu laid out as an inline, pipe-separated row.
+ *
+ * Styling for the handful of pieces rendered by web components this owns no
+ * markup for (`<salla-social>`'s `.social-link` icons, `<salla-menu>`'s
+ * `.s-menu-footer-item` rows, `<salla-payments>`'s `.s-payments-list-item`
+ * icons) is the consuming theme's own responsibility, the same way
+ * `inSheet`'s own presentation is -- this component owns structure and data,
+ * not every pixel.
+ */
+export function Footer({ inSheet = false }: FooterProps = {}) {
+  const { store, theme } = useTwilight();
+  const { t } = useTranslation();
+  const year = new Date().getFullYear();
+  const isCentered = theme.settings?.footer_layout === 'centered';
+  const isDark = !!theme.settings?.footer_is_dark;
+
+  const Root = inSheet ? 'div' : 'footer';
+
+  return (
+    <Root
+      className={`store-footer store-footer--${isCentered ? 'centered' : 'columns'}${
+        inSheet ? ' store-footer--sheet' : ''
+      } relative mt-8 sm:mt-16 ${isDark ? 'bg-[#0E0F0F] text-white' : 'bg-[#F4F7F2] text-gray-600'}`}
+      suppressHydrationWarning
+    >
+      {!inSheet && <HookSlot name="footer:start" />}
+
+      <div
+        aria-label="footer"
+        className={`store-footer__inner border-b py-8 lg:py-16 ${
+          isDark ? 'bg-[#1D1F1F] border-dashed border-white/10' : 'bg-transparent border-gray-200'
+        }`}
+      >
+        {isCentered ? (
+          <FooterCenteredBody inSheet={inSheet} isDark={isDark} />
+        ) : (
+          <FooterColumnsBody inSheet={inSheet} isDark={isDark} />
+        )}
+      </div>
+
+      <div className="store-footer__bottom container md:flex items-center justify-between gap-4 py-4 lg:py-7 text-center">
+        <span className={`text-sm copyright-text ${isDark ? 'text-gray-400' : 'text-gray-700'}`}>
+          <HookSlot
+            name="copyright"
+            context={{ storeName: store.name }}
+            fallback={
+              <>
+                {t('blocks.footer.copyright', 'All rights reserved')}{' '}
+                <Link to="/" className="transition-opacity hover:opacity-75 hover:text-primary">
+                  {store.name}
+                </Link>{' '}
+                © {year}
+              </>
+            }
+          />
+        </span>
+
+        <SallaPayments />
+      </div>
+
+      {!inSheet && <HookSlot name="footer:end" />}
+    </Root>
+  );
+}

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>
+    </>
+  );
+}