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

package/tailwind/components/product/ProductDetails.tsx.txt

@@ -0,0 +1,267 @@
+import { Fragment, useState } from 'react';
+import { HookSlot } from '../../hooks/HookSlot';
+import { HookName } from '../../types/hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import { getActiveCurrency } from '../../api/client';
+import { useWishlist } from '../../hooks/useWishlist';
+import { CurrencySymbol, Link, Image } from '../common';
+import { SallaRatingStars } from '@salla.sa/twilight-components-react/rating-stars';
+import { SallaSocialShare } from '@salla.sa/twilight-components-react/social-share';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaInstallment } from '@salla.sa/twilight-components-react/installment';
+import { SallaMetadata } from '@salla.sa/twilight-components-react/metadata';
+import { formatSallaPlural } from '../../utils/salla-plural';
+import type { Product } from '../../types';
+
+interface ProductDetailsProps {
+  product: Product;
+  showTags?: boolean;
+}
+
+export function ProductDetails({ product, showTags = true }: ProductDetailsProps) {
+  const { t } = useTranslation();
+  const wishlist = useWishlist();
+
+  // Context for all product hooks - contains product data
+  const productHookContext = { product };
+
+  return (
+    <>
+      <HookSlot name={HookName.PRODUCT_DESCRIPTION_START} context={productHookContext} />
+
+      {product.brand?.name && (
+        <div className="product-brand mb-5 w-12">
+          <Link className="brand-logo" to={product.brand.url || '#'} title={product.brand.name}>
+            <Image
+              className="max-h-full object-contain"
+              src={product.brand.logo}
+              title={product.brand.name}
+              alt={product.brand.name}
+              aspectRatio="1/1"
+            />
+          </Link>
+        </div>
+      )}
+
+      <h1 className="text-xl md:text-2xl leading-10 font-bold mb-6 text-gray-800">
+        {product.name}
+      </h1>
+
+      {product.subtitle && (
+        <h2 className="product-entry__sub-title text-sm text-gray-500 leading-6 mb-2.5">
+          {product.subtitle}
+        </h2>
+      )}
+
+      {product.rating && (
+        <SallaRatingStars value={product.rating.stars} reviews={product.rating.count} />
+      )}
+
+      {product.is_taxable && (
+        <small className="color-grey">{t('pages.products.tax_included', 'VAT Inclusive')}</small>
+      )}
+
+      <ProductPrice product={product} />
+
+      <ProductDescription product={product} />
+
+      {!!product.tags?.length && showTags && (
+        <div className="mb-3">
+          {product.tags.map((tag, index) => (
+            <Fragment key={tag.name}>
+              <Link
+                to={tag.url}
+                className="rtl:ml-2 ltr:mr-2 inline-flex text-gray-500 hover:text-primary underline text-sm mb-1"
+              >
+                {tag.name}
+              </Link>
+              {index < product.tags!.length - 1 && ','}
+            </Fragment>
+          ))}
+        </div>
+      )}
+
+      <div className="flex rtl:space-x-reverse space-x-3">
+        <SallaSocialShare className="inline-flex mb-5" aria-label="social share" />
+
+        <SallaButton
+          className={`btn--wishlist animated hidden sm:inline-flex ${wishlist.has(Number(product.id)) ? 'is-added' : 'not-added'}`}
+          data-id={product.id}
+          onClick={() => window.salla?.wishlist.toggle(product.id)}
+          shape="icon"
+          fill="outline"
+          color="light"
+          ariaLabel="add to wishlist"
+        >
+          <i className="sicon-heart"></i>
+        </SallaButton>
+      </div>
+
+      <ProductQuantityInfo product={product} />
+
+      {product.sku && (
+        <div className="mb-4 flex justify-between sm:grid sm:grid-cols-3 bg-white rounded-md px-4 py-2">
+          <div className="flex items-center">
+            <i className="sicon-barcode mx-1"></i>
+            {t('pages.products.sku', 'SKU')}
+          </div>
+          <div className="text-unicode">{product.sku}</div>
+        </div>
+      )}
+
+      {product.barcode && (
+        <div className="mb-4 flex justify-between sm:grid sm:grid-cols-3 bg-white rounded-md px-4 py-2">
+          <div className="flex items-center">
+            <i className="sicon-barcode mx-1"></i>
+            {t('pages.products.barcode')}
+          </div>
+          <div className="text-unicode">{product.barcode}</div>
+        </div>
+      )}
+
+      {product.show_availability && (
+        <section className="bg-white p-5 rounded-md mb-5 last:mb-0">
+          <div className="center-between">
+            <label className="flex items-center text-base">
+              <span className="sicon-location rtl:ml-1 ltr:mr-1"></span>
+              <span className="inline-block">
+                {t('pages.products.availability', 'Availability')}
+              </span>
+            </label>
+            <div className="mt-1 sm:mt-0 sm:col-span-2 text-end">
+              <div className="flex rtl:space-x-reverse space-x-3">
+                <a
+                  href="#!"
+                  onClick={() =>
+                    window.salla?.event?.dispatch('scopes::open', {
+                      mode: 'availability',
+                      product_id: String(product.id),
+                    })
+                  }
+                  className="group text-primary flex items-center justify-center"
+                >
+                  <span>{t('pages.products.select_branch', 'Select Branch')}</span>
+                  <span className="sicon-keyboard_arrow_left mr-2 transition-all group-hover:-translate-x-1"></span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+
+      <HookSlot name={HookName.PRODUCT_DESCRIPTION} context={productHookContext} />
+
+      <SallaInstallment
+        price={String(
+          typeof product.base_currency_price === 'object'
+            ? product.base_currency_price.amount
+            : product.base_currency_price
+        )}
+      />
+
+      {product.has_metadata && <SallaMetadata />}
+    </>
+  );
+}
+
+function ProductPrice({ product }: { product: Product }) {
+  const { t } = useTranslation();
+  // The API converts the amounts but still labels them in the store's own currency.
+  const priceCurrency = getActiveCurrency(product.currency);
+
+  return (
+    <div className="flex whitespace-nowrap gap-4 items-center">
+      <div
+        className={`${product.is_on_sale ? '' : 'hidden'} space-x-2 rtl:space-x-reverse whitespace-nowrap`}
+      >
+        <p className="text-red-800 font-bold text-xl inline-block">
+          {product.sale_price} <CurrencySymbol currency={priceCurrency} />
+        </p>
+        <span className="text-gray-500 line-through">
+          {product.regular_price} <CurrencySymbol currency={priceCurrency} />
+        </span>
+      </div>
+      <div className={`gap-4 ${product.is_on_sale ? 'hidden' : 'flex'}`}>
+        {product.starting_price && (
+          <span>{t('pages.products.starting_price', 'Starting from')}</span>
+        )}
+        <p className="font-bold text-xl inline-block">
+          {product.starting_price ?? product.price} <CurrencySymbol currency={priceCurrency} />
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/** An `<iframe>` start tag; quoted values may hold `>`. */
+const IFRAME_TAG = /<iframe\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+
+/** Embedded players (YouTube, Vimeo, maps) load only when scrolled near, unless the merchant set `loading`. */
+function lazyIframes(html: string): string {
+  return html.replace(IFRAME_TAG, (tag) =>
+    /\sloading\s*=/i.test(tag.replace(/"[^"]*"|'[^']*'/g, '""'))
+      ? tag
+      : tag.replace(/^<iframe/i, '<iframe loading="lazy"')
+  );
+}
+
+function ProductDescription({ product }: { product: Product }) {
+  const { t } = useTranslation();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (!product.description) return null;
+
+  const description = lazyIframes(product.description.replace(/&nbsp;/g, '\n'));
+
+  if (product.has_read_more) {
+    return (
+      <div className="product__description p-2 px-5 sm:p-1 leading-7 mb-3">
+        <article
+          className="article article--main relative leading-8 overflow-hidden transition-all duration-300 py-4"
+          id="more-content"
+          style={{ maxHeight: isExpanded ? 'none' : '5.25rem' }}
+          dangerouslySetInnerHTML={{ __html: description }}
+        />
+        <button
+          type="button"
+          id="btn-show-more"
+          className={`link--primary inline-block mt-2 cursor-pointer bg-transparent border-0 p-0 ${isExpanded ? 'is-expanded' : ''}`}
+          onClick={() => setIsExpanded(true)}
+        >
+          {t('pages.products.read_more', 'Read more')}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="product__description p-2 px-5 sm:p-1 leading-7 mb-3">
+      <article className="article--main pb-1" dangerouslySetInnerHTML={{ __html: description }} />
+    </div>
+  );
+}
+
+function ProductQuantityInfo({ product }: { product: Product }) {
+  const { t } = useTranslation();
+  if (product.sold_quantity == null && !product.can_show_remained_quantity) {
+    return null;
+  }
+
+  return (
+    <div className="bg-white py-2.5 mb-5 rounded-md inline-flex text-sm">
+      {(product.sold_quantity ?? 0) > 0 && (
+        <div className="px-4 !text-red-800">
+          <i className="sicon-fire rtl:ml-1.5 ltr:mr-1.5"></i> {t('pages.products.sold', 'Sold')}{' '}
+          {/* Salla ships `sold_times` in Laravel plural format; resolve it for the count. */}
+          <span>{formatSallaPlural(t('pages.products.sold_times'), product.sold_quantity!)}</span>
+        </div>
+      )}
+      {product.can_show_remained_quantity && (
+        <div className="px-4 rtl:even:border-r ltr:even:border-l even:border-gray-200">
+          <i className="!text-red-800 sicon-box-bankers rtl:ml-1.5 ltr:mr-1.5"></i>
+          {t('pages.products.remained', 'Remained')}: {product.quantity}
+        </div>
+      )}
+    </div>
+  );
+}

package/tailwind/components/product/ProductGallery.tsx.txt

@@ -0,0 +1,234 @@
+import { SallaSlider } from '@salla.sa/twilight-components-react/slider';
+import { Suspense, useEffect, useMemo, useState } from 'react';
+import { registry } from '../ComponentRegistry';
+import { useTwilight } from '../../providers/TwilightProvider';
+import { useTranslation } from '../../providers/I18nProvider';
+import type { Product, ProductImage } from '../../types';
+import { Image } from '../common/Image';
+import { ImageModal } from '../modal';
+import { isNativeApp } from '../../native-app';
+
+const PRODUCT_GALLERY_KEY = 'product:gallery';
+
+export interface ProductGalleryProps {
+  product: Product;
+}
+
+type ImagePreview = { src: string; alt: string };
+type GalleryMedia = { url: string; type: 'image' | 'video' | '3d-image' };
+
+function ProductGalleryContent({ product }: ProductGalleryProps) {
+  const { t } = useTranslation();
+  const { theme } = useTwilight();
+  const sliderId = `details-slider-${product.id}`;
+  const objectFit = theme.settings.slider_background_size ?? 'cover';
+
+  // Clicking an image opens an in-app lightbox instead of navigating to the CDN URL.
+  const [preview, setPreview] = useState<ImagePreview | null>(null);
+
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      const el = document.getElementById(sliderId);
+      if (!el?.parentElement) return;
+      const { parentElement, nextSibling } = el;
+      parentElement.removeChild(el);
+      parentElement.insertBefore(el, nextSibling);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [sliderId]);
+
+  // The product-details API only returns `image` (singular).
+  // Fall back so the main image always renders even without the full gallery array.
+  const images: ProductImage[] =
+    product.images && product.images.length > 0
+      ? product.images
+      : product.image?.url
+        ? [product.image]
+        : [];
+
+  const hasManyImages = images.length > 1;
+  const nativeGallery = images.flatMap<GalleryMedia>((image) => {
+    if (image.three_d_image_url) return [{ url: image.three_d_image_url, type: '3d-image' }];
+    if (image.video_url) return [{ url: image.video_url, type: 'video' }];
+    return image.url ? [{ url: image.url, type: 'image' }] : [];
+  });
+  const openNativeGallery = () => {
+    if (!isNativeApp()) return false;
+    window.salla?.event.dispatch('mobile::gallery.open', { images: nativeGallery });
+    return true;
+  };
+
+  return (
+    <div className="sidebar md:sticky top-24 w-full md:!w-2/4 rtl:ml-8 ltr:mr-8 pb-8 md:pb-16 overflow-hidden shrink-0">
+      <SallaSlider
+        id={sliderId}
+        className="details-slider rounded-md image-slider"
+        type="thumbs"
+        loop={false}
+        autoHeight
+        listenToThumbnailsOption
+        showThumbsControls={false}
+        sliderConfig={{ watchOverflow: true, autoHeight: true }}
+      >
+        {product.promotion_title && (
+          <div className="promotion-title">{product.promotion_title}</div>
+        )}
+
+        {product.calories && (
+          <div className="absolute z-[2] top-4 rtl:left-4 ltr:right-4 bg-white shadow-sm flex flex-col justify-center items-center rounded-full w-20 h-20 md:w-24 md:h-24">
+            <span className="text-red-500 text-xl leading-none font-bold">{product.calories}</span>
+            <span className="text-xs text-gray-500">
+              {t('pages.products.calories', 'Calories')}
+            </span>
+          </div>
+        )}
+
+        <div slot="items">
+          {images.map((image, index) => (
+            <ImageSlide
+              key={image.id ?? image.three_d_image_url ?? image.video_url ?? image.url}
+              image={image}
+              product={product}
+              index={index}
+              objectFit={objectFit}
+              onPreview={setPreview}
+              onNativeOpen={openNativeGallery}
+            />
+          ))}
+        </div>
+
+        {hasManyImages && (
+          <div slot="thumbs">
+            {images.map((image, index) => (
+              <ThumbSlide
+                key={image.id ?? image.three_d_image_url ?? image.video_url ?? image.url}
+                image={image}
+                index={index}
+              />
+            ))}
+          </div>
+        )}
+      </SallaSlider>
+
+      <Suspense fallback={null}>
+        <ImageModal
+          isOpen={!!preview}
+          onClose={() => setPreview(null)}
+          src={preview?.src ?? ''}
+          alt={preview?.alt}
+        />
+      </Suspense>
+    </div>
+  );
+}
+
+export function ProductGallery(props: ProductGalleryProps) {
+  const Component = useMemo(() => {
+    const resolved = registry.resolve<ProductGalleryProps>(PRODUCT_GALLERY_KEY);
+    // A theme that seeds the key with this component (register + override) would
+    // otherwise recurse into itself when it has not actually overridden anything.
+    return resolved === ProductGallery ? null : resolved;
+  }, []);
+
+  if (Component) {
+    return <Component {...props} />;
+  }
+
+  return <ProductGalleryContent {...props} />;
+}
+
+function ImageSlide({
+  image,
+  product,
+  index,
+  objectFit,
+  onPreview,
+  onNativeOpen,
+}: {
+  image: ProductImage;
+  product: Product;
+  index: number;
+  objectFit: 'cover' | 'contain';
+  onPreview: (preview: ImagePreview) => void;
+  onNativeOpen: () => boolean;
+}) {
+  const [loaded, setLoaded] = useState(false);
+  const isVideo = Boolean(image.video_url);
+
+  if (image.three_d_image_url) {
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: model-viewer is an interactive web component.
+      <model-viewer
+        style={{ minHeight: '500px' }}
+        className="swiper-slide model-entry w-full h-full"
+        loading="lazy"
+        camera-controls
+        touch-action="pan-y"
+        auto-rotate
+        poster={image.url || undefined}
+        src={image.three_d_image_url}
+        shadow-intensity="1"
+        alt={image.alt}
+        onClick={onNativeOpen}
+      ></model-viewer>
+    );
+  }
+
+  return (
+    <a
+      data-fslightbox={`product_${product.id}`}
+      data-img-id={image.id}
+      data-slid-index={index}
+      {...(image.video_url ? { 'data-video-src': image.video_url } : {})}
+      data-caption={image.alt}
+      data-infinite="false"
+      data-type={image.video_url ? 'youtube' : 'image'}
+      href={image.video_url || image.url}
+      // FsLightbox isn't loaded in this React theme, so the bare href would leave the SPA.
+      // Open images in an in-app lightbox; let videos open in a new tab.
+      {...(isVideo ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+      onClick={(event) => {
+        if (onNativeOpen()) {
+          event.preventDefault();
+          return;
+        }
+        if (isVideo || !image.url) return;
+        event.preventDefault();
+        onPreview({ src: image.url, alt: image.alt || product.name });
+      }}
+      aria-label={product.name}
+      className={`swiper-slide magnify-wrapper homeslider__slide ${image.video_url ? 'video-entry' : ''}`}
+    >
+      <div className={`w-full ${loaded ? '' : 'aspect-square bg-gray-100 animate-pulse'}`}>
+        <Image
+          id={String(image.id)}
+          src={image.url}
+          alt={image.alt || product.name}
+          className={`h-full w-full object-${objectFit}`}
+          aspectRatio="1/1"
+          priority={index === 0}
+          noWrapper
+          onLoad={() => setLoaded(true)}
+        />
+      </div>
+    </a>
+  );
+}
+
+function ThumbSlide({ image, index }: { image: ProductImage; index: number }) {
+  return (
+    <div
+      className={`slide--one-fourth ${image.video_url ? 'video-entry' : ''} ${image.three_d_image_url ? 'model-entry' : ''}`}
+      data-caption={image.alt}
+    >
+      <Image
+        src={image.url}
+        alt={image.alt || ''}
+        className="object-cover w-full h-full bg-gray-100 rounded-md overflow-hidden"
+        title={image.alt}
+        priority={index < 5}
+        noWrapper
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { LazyProductDetails, LazyAddToCartForm } from './lazy';
+import { ProductCard } from './ProductCard';
+import { ProductGallery } from './ProductGallery';
+
+export { ProductGallery };
+export type { ProductGalleryProps } from './ProductGallery';
+
+// Lazy-loaded product components (code-split)
+export { LazyProductDetails as ProductDetails, LazyAddToCartForm as AddToCartForm };
+
+// Eager components (lightweight, used frequently)
+export { ProductCard };
+export type { ProductCardProps, ProductCardLayout } from './ProductCard';
+
+// Types are co-located with components (not in types.ts)

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

@@ -0,0 +1,9 @@
+import { lazy } from 'react';
+
+export const LazyProductDetails = lazy(() =>
+  import('./ProductDetails').then((m) => ({ default: m.ProductDetails }))
+);
+
+export const LazyAddToCartForm = lazy(() =>
+  import('./AddToCartForm').then((m) => ({ default: m.AddToCartForm }))
+);