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

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

@@ -0,0 +1,68 @@
+import { memo } from 'react';
+import { Link } from '../common';
+
+interface ImageData {
+  url?: string;
+  alt?: string;
+}
+
+interface SquarePhotoItem {
+  id?: string | number;
+  url?: string;
+  link_type?: string;
+  /** The Store API sends the URL itself to the engine; Twig gets `{ url, alt }`. */
+  image?: string | ImageData;
+  text?: string;
+}
+
+const imageUrl = (item: SquarePhotoItem) =>
+  typeof item.image === 'string' ? item.image : item.image?.url;
+
+export interface SquarePhotosProps {
+  data: {
+    title?: string;
+    items: SquarePhotoItem[];
+    position?: number;
+    [key: string]: unknown;
+  };
+}
+
+export const SquarePhotos = memo(function SquarePhotos({ data }: SquarePhotosProps) {
+  const items = data.items || [];
+  const title = data.title;
+
+  if (!items.length) return null;
+
+  const gridCols =
+    items.length <= 3 ? `one-row md:grid-cols-${items.length}` : 'md:grid-cols-3 two-row';
+
+  return (
+    <>
+      {title && (
+        <div className="s-block__title">
+          <div className="right-side">
+            <h2>{title}</h2>
+          </div>
+        </div>
+      )}
+
+      <div className={`grid ${gridCols} grid-flow-row gap-3 sm:gap-8`}>
+        {items.map((item) => (
+          <Link
+            {...(item.link_type === 'external_link' ? { target: '_blank' } : {})}
+            key={item.id ?? imageUrl(item) ?? item.url}
+            className={`banner-entry square-photos ${item.text ? 'has-overlay with-hover' : ''}`}
+            style={{ backgroundImage: `url(${imageUrl(item)})` }}
+            to={item.url || '#'}
+          >
+            {item.text && (
+              <h3 className="text-with-border">
+                <span>{item.text}</span>
+              </h3>
+            )}
+          </Link>
+        ))}
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+import type { Feature } from '../../types';
+
+export interface StoreFeaturesProps {
+  data: {
+    features: Feature[];
+    [key: string]: unknown;
+  };
+}
+
+export const StoreFeatures = memo(function StoreFeatures({ data }: StoreFeaturesProps) {
+  const { features } = data;
+
+  if (!features.length) return null;
+
+  return (
+    <>
+      <div className="grid grid-cols-[repeat(2,minmax(0,1fr))] md:grid-cols-[repeat(3,minmax(0,1fr))] gap-4 sm:gap-6 xl:gap-8">
+        {features.map((feature) => (
+          <div
+            key={`${feature.icon}:${feature.title}:${feature.description ?? ''}`}
+            className="s-block--features__item"
+          >
+            <div className="feature-icon">
+              <i className={feature.icon}></i>
+            </div>
+            <h2>{feature.title}</h2>
+            <p>{feature.description}</p>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+import { SallaReviews } from '@salla.sa/twilight-components-react/reviews';
+
+type ReviewType = 'all' | 'store' | 'products';
+type SortingOption = 'top_rating' | 'random' | 'latest';
+
+export interface TestimonialsProps {
+  data: {
+    limit?: string | number;
+    type?: ReviewType;
+    sort?: SortingOption;
+    hide_customer_info?: boolean;
+    display_all_url?: string;
+    [key: string]: unknown;
+  };
+}
+
+export const Testimonials = memo(function Testimonials({ data }: TestimonialsProps) {
+  const limit = data.limit !== undefined ? parseInt(String(data.limit), 10) : 10;
+  const type: ReviewType = data.type || 'store';
+  const sort: SortingOption = data.sort || 'latest';
+  const hideCustomerInfo = data.hide_customer_info ?? false;
+  const displayAllUrl = data.display_all_url;
+
+  return (
+    <>
+      <SallaReviews
+        limit={limit}
+        sort={sort}
+        type={type}
+        {...(displayAllUrl ? { displayAllLink: true } : {})}
+        {...(hideCustomerInfo ? { hideCustomerInfo: true } : {})}
+      />
+    </>
+  );
+});

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