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

package/tailwind/components/home/Youtube.tsx.txt

@@ -0,0 +1,48 @@
+import { memo, useEffect, useState } from 'react';
+
+export interface YoutubeProps {
+  data: {
+    youtube_id: string;
+    position?: number;
+    [key: string]: unknown;
+  };
+}
+
+export const Youtube = memo(function Youtube({ data }: YoutubeProps) {
+  const { youtube_id: youtubeId } = data;
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!youtubeId) return;
+
+    // Lazy load the lite-youtube web component
+    let mounted = true;
+    import('@justinribeiro/lite-youtube')
+      .then(() => {
+        if (mounted) setIsLoaded(true);
+      })
+      .catch((err) => {
+        console.error('Failed to load lite-youtube:', err);
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [youtubeId]);
+
+  if (!youtubeId) return null;
+
+  return (
+    <>
+      <div className="container">
+        <div className="videoWrapper">
+          {isLoaded ? (
+            <lite-youtube videoid={youtubeId} params="rel=0"></lite-youtube>
+          ) : (
+            <div className="animate-pulse bg-gray-200 w-full h-full min-h-[300px] rounded" />
+          )}
+        </div>
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,50 @@
+import {
+  LazyProductsSlider,
+  LazyStoreFeatures,
+  LazyFixedBanner,
+  LazyFixedProducts,
+  LazyFeaturedProductsStyle1,
+  LazyFeaturedProductsStyle2,
+  LazyFeaturedProductsStyle3,
+  LazyParallaxBackground,
+  LazyPhotosSlider,
+  LazySquarePhotos,
+  LazyTestimonials,
+  LazyYoutube,
+  LazyBundleComponent,
+} from './lazy';
+
+export {
+  LazyProductsSlider as ProductsSlider,
+  LazyStoreFeatures as StoreFeatures,
+  LazyFixedBanner as FixedBanner,
+  LazyFixedProducts as FixedProducts,
+  LazyFeaturedProductsStyle1 as FeaturedProductsStyle1,
+  LazyFeaturedProductsStyle2 as FeaturedProductsStyle2,
+  LazyFeaturedProductsStyle3 as FeaturedProductsStyle3,
+  LazyParallaxBackground as ParallaxBackground,
+  LazyPhotosSlider as PhotosSlider,
+  LazySquarePhotos as SquarePhotos,
+  LazyTestimonials as Testimonials,
+  LazyYoutube as Youtube,
+  LazyBundleComponent as BundleComponent,
+};
+
+// Shared types
+export type { AnyHomeComponent } from './types';
+export type { BundleComponentProps } from './BundleComponent';
+
+// Re-export from HomePageRenderer
+export type { HomeComponentsProps, HomeComponentConfig } from './HomePageRenderer';
+
+// Home registration (DefaultHomeComponents + registerHomeComponents)
+export { DefaultHomeComponents, registerHomeComponents } from './register';
+
+// Home page infrastructure
+export { HomeComponentRenderer, registerHomeComponentConfig } from './HomePageRenderer';
+export { PageBlocks } from './PageBlocks';
+export type { PageBlocksProps } from './PageBlocks';
+export { ComponentErrorBoundary } from './ComponentErrorBoundary';
+
+export { ReorderProducts } from './ReorderProducts';
+export { useReorderButtons } from './reorder-hooks';

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

@@ -0,0 +1,17 @@
+import { lazy } from 'react';
+
+export { ProductsSlider as LazyProductsSlider } from './ProductsSlider';
+export { StoreFeatures as LazyStoreFeatures } from './StoreFeatures';
+export { FixedBanner as LazyFixedBanner } from './FixedBanner';
+export { FixedProducts as LazyFixedProducts } from './FixedProducts';
+export { FeaturedProductsStyle1 as LazyFeaturedProductsStyle1 } from './FeaturedProductsStyle1';
+export { FeaturedProductsStyle2 as LazyFeaturedProductsStyle2 } from './FeaturedProductsStyle2';
+export { FeaturedProductsStyle3 as LazyFeaturedProductsStyle3 } from './FeaturedProductsStyle3';
+export { ParallaxBackground as LazyParallaxBackground } from './ParallaxBackground';
+export { PhotosSlider as LazyPhotosSlider } from './PhotosSlider';
+export { SquarePhotos as LazySquarePhotos } from './SquarePhotos';
+export const LazyTestimonials = lazy(() =>
+  import('./Testimonials').then((m) => ({ default: m.Testimonials }))
+);
+export { Youtube as LazyYoutube } from './Youtube';
+export { BundleComponent as LazyBundleComponent } from './BundleComponent';

package/tailwind/components/home/register.ts.txt

@@ -0,0 +1,44 @@
+import {
+  LazyProductsSlider,
+  LazyStoreFeatures,
+  LazyFixedBanner,
+  LazyFixedProducts,
+  LazyFeaturedProductsStyle1,
+  LazyFeaturedProductsStyle2,
+  LazyFeaturedProductsStyle3,
+  LazyParallaxBackground,
+  LazyPhotosSlider,
+  LazySquarePhotos,
+  LazyTestimonials,
+  LazyYoutube,
+  LazyBundleComponent,
+} from './lazy';
+import type { AnyHomeComponent } from './types';
+import { registry } from '../ComponentRegistry';
+
+export const DefaultHomeComponents: Record<string, AnyHomeComponent | null> = {
+  'fixed-banner': LazyFixedBanner,
+  'photos-slider': LazyPhotosSlider,
+  testimonial: LazyTestimonials,
+  'store-features': LazyStoreFeatures,
+  youtube: LazyYoutube,
+  'square-photos': LazySquarePhotos,
+  'fixed-products': LazyFixedProducts,
+  'products-slider': LazyProductsSlider,
+  'parallax-background': LazyParallaxBackground,
+  'featured-products:style1': LazyFeaturedProductsStyle1,
+  'featured-products:style2': LazyFeaturedProductsStyle2,
+  'featured-products:style3': LazyFeaturedProductsStyle3,
+  'bundle-component': LazyBundleComponent,
+};
+
+export function registerHomeComponents(
+  components: Record<string, AnyHomeComponent | null> = DefaultHomeComponents,
+  prefix = 'home:'
+): void {
+  Object.entries(components).forEach(([path, component]) => {
+    if (component) {
+      registry.register(`${prefix}${path}`, component);
+    }
+  });
+}

package/tailwind/components/home/reorder-hooks.ts.txt

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { useTranslation } from '../../providers/I18nProvider';
+import { whenSallaLoaded } from '../../utils/sdk-helpers';
+
+interface ReorderLabels {
+  /** The add button's text in a reorder list. */
+  add: string;
+  /** Its text for an out-of-stock product. */
+  outOfStock: string;
+}
+
+let registered = false;
+
+/**
+ * Twig's ReorderProductsWidget script: inside a reorder list the add button reads the block's
+ * title and adds the product as the customer last ordered it. The SDK has no way to remove a
+ * hook, so it is registered once per page load.
+ */
+function registerReorderHooks(labels: ReorderLabels): void {
+  if (registered) return;
+  registered = true;
+  whenSallaLoaded((sdk) => {
+    sdk.hooks?.registerHook?.('salla-add-product-button', 'componentDidLoad', (component) => {
+      if (!component.host?.closest('[source="reorder"], [data-source="reorder"]')) return;
+      const isOutOfStock =
+        component.productStatus === 'out' || component.productStatus === 'out-and-notify';
+      const setLabel = () => component.btn?.setText(isOutOfStock ? labels.outOfStock : labels.add);
+      setLabel();
+      sdk.lang?.onLoaded?.(setLabel);
+      if (isOutOfStock) return;
+      component.addProductToCart = async (event: Event) => {
+        event.preventDefault();
+        // The click lands on the inner button, which has no product-id; without one the SDK uses the page's.
+        const productId = component.productId ?? component.host.getAttribute('product-id');
+        await sdk.order.api.reorderProduct?.(productId ?? undefined);
+      };
+    });
+  });
+}
+
+/**
+ * Inside an element with `data-source="reorder"`, make each add button read "order again" and
+ * add the product as the customer last ordered it, as Twig's reorder block and page do.
+ */
+export function useReorderButtons(enabled: boolean): void {
+  const { t } = useTranslation();
+  const add = t('pages.orders.repurchase');
+  const outOfStock = t('pages.products.out_of_stock');
+  useEffect(() => {
+    if (enabled) registerReorderHooks({ add, outOfStock });
+  }, [enabled, add, outOfStock]);
+}

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

@@ -0,0 +1,4 @@
+import type { ComponentType } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Dynamic registry requires `any` for data prop (specific component props can't satisfy contravariance with Record<string, unknown>)
+export type AnyHomeComponent = ComponentType<{ data: any; priority?: boolean }>;

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

@@ -0,0 +1,23 @@
+import { useTranslation } from '../../providers/I18nProvider';
+import { Link } from '../common';
+
+export interface CopyrightProps {
+  storeName?: string;
+}
+
+/**
+ * Simple copyright component - shows "Copyright | Year StoreName | Powered by Salla"
+ */
+export function Copyright({ storeName = '' }: CopyrightProps) {
+  const { t } = useTranslation();
+  const year = new Date().getFullYear();
+
+  return (
+    <>
+      {t('blocks.footer.copyright', 'Copyright')} | {year}{' '}
+      <Link to="/" className="hover:text-primary">
+        {storeName}
+      </Link>{' '}
+    </>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { useMemo } from 'react';
+import { useUser } from '../../hooks';
+import { useDocumentClass } from '../../hooks/useDocumentClass';
+import { SallaFileUpload } from '@salla.sa/twilight-components-react/file-upload';
+import { SallaUserMenu } from '@salla.sa/twilight-components-react/user-menu';
+import { Breadcrumb } from '../common';
+import type { LayoutProps } from './types';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useLocation } from '../../providers/NavigationProvider';
+import type { Page } from '../../types';
+import { RouteId } from '../../router/route-ids';
+
+interface CustomerLayoutProps extends LayoutProps {
+  page?: Page;
+}
+
+export function CustomerLayout({ children, page }: CustomerLayoutProps) {
+  const { data: user } = useUser();
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
+
+  // Twig's salla-breadcrumb puts "My account" before every customer page but these two.
+  const crumbPage = useMemo(() => {
+    if (
+      !page ||
+      page.breadcrumbs?.length ||
+      ([RouteId.CUSTOMER_PROFILE, RouteId.CUSTOMER_WISHLIST] as string[]).includes(page.slug)
+    ) {
+      return page;
+    }
+    return {
+      ...page,
+      breadcrumbs: [
+        { name: t('common.titles.home'), url: '/' },
+        { name: t('common.titles.profile'), url: '/account/profile' },
+        { name: page.title, url: pathname },
+      ],
+    };
+  }, [page, pathname, t]);
+
+  // Marks every customer/account page so a theme can scope styles to them
+  // (route classes vary per page; this one is shared).
+  useDocumentClass({ body: { class: 'customer' } });
+
+  return (
+    <>
+      <div className="profile-header gradient-bg">
+        <div className="container relative flex justify-between h-full items-center">
+          {crumbPage && (
+            <Breadcrumb page={crumbPage} className="breadcrumbs w-full py-5 self-start" />
+          )}
+        </div>
+      </div>
+
+      {/* Main content area */}
+      <div className="container lg:mb-24">
+        <div className="flex items-start flex-col lg:flex-row justify-center">
+          <nav
+            aria-label="Sidebar"
+            className="shrink-0 lg:sticky top-24 lg:-mt-28 lg:shadow-default rounded-md lg:bg-white w-full lg:w-72 rtl:lg:ml-8 ltr:lg:mr-8 lg:pt-8 lg:pb-11 sidebar space-y-px"
+          >
+            {page?.slug === RouteId.CUSTOMER_PROFILE && (
+              <div className="text-center md:mb-9">
+                <div className="h-20 w-20 m-auto avatar-wrap bg-gray-100 rounded-full overflow-hidden">
+                  <SallaFileUpload profileImage value={user?.avatar}>
+                    <span className="avatar-placeholder flex justify-center items-center flex-col w-full h-full">
+                      <span className="sicon-user text-2xl text-gray-400"></span>
+                    </span>
+                  </SallaFileUpload>
+                </div>
+              </div>
+            )}
+
+            <div className="hidden lg:block">
+              <SallaUserMenu inline />
+            </div>
+          </nav>
+
+          <div className="main-content w-full flex-1 lg:pt-10 max-w-3xl">
+            {page?.title && (
+              <h1 className="font-bold text-lg text-center sm:rtl:text-right sm:ltr:text-left mb-2">
+                {page.title}
+              </h1>
+            )}
+            {children}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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