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

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

@@ -0,0 +1,305 @@
+import { memo, useCallback, useMemo } from 'react';
+import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { useHostAttributes } from '@salla.sa/twilight-theme-engine/hooks/useHostAttributes';
+import { useMoney } from '../../hooks/useMoney';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useTwilight } from '../../providers/TwilightProvider';
+import { useWishlist } from '../../hooks/useWishlist';
+import { useAsset } from '../../hooks/useAsset';
+import { useNumber } from '../../hooks/useNumber';
+import { registry } from '../ComponentRegistry';
+import { Image } from '../common';
+import type { Product } from '../../types';
+
+const PRODUCT_CARD_KEY = 'product:card';
+
+const PRODUCT_IMAGE_SRCSET_WIDTHS = [150, 300, 450, 600] as const;
+/** Matches `.s-products-list-vertical-cards`: 2-col below 768px, 4-col above. */
+const PRODUCT_IMAGE_SIZES = '(min-width: 768px) 25vw, 50vw';
+/** fullImage / minimal slots in FeaturedProductsStyle3 (`lg:grid-cols-2`). */
+const PRODUCT_WIDE_IMAGE_SIZES = '(min-width: 1024px) 50vw, 100vw';
+
+/** Product card layout variants - mutually exclusive */
+export type ProductCardLayout = 'vertical' | 'horizontal' | 'fullImage' | 'minimal' | 'special';
+
+export interface ProductCardProps {
+  product: Product;
+  layout?: ProductCardLayout;
+  className?: string;
+  withShadow?: boolean;
+  withQuantity?: boolean;
+  withoutAddButton?: boolean;
+  index?: number;
+  imagePriority?: boolean;
+  /** Overrides the layout-based image `sizes` hint. */
+  sizes?: string;
+}
+
+/**
+ * ProductCard - Displays a product in various layouts
+ *
+ * Layouts:
+ * - vertical: Default card with image top, content bottom
+ * - horizontal: Side-by-side image and content
+ * - fullImage: Full bleed image with overlay content
+ * - minimal: Compact version with reduced info
+ * - special: Featured card with quantity pie chart
+ *
+ * Features:
+ * - Native lazy loading for images
+ * - Product badges (promotion, preorder, quantity, out of stock)
+ * - Wishlist toggle button
+ * - Price display (sale, starting, regular)
+ * - Rating display
+ * - Add to cart button via SallaAddProductButton (handles labels internally)
+ */
+const ProductCardContent = memo(function ProductCardContent({
+  product,
+  layout = 'vertical',
+  className = '',
+  withShadow = false,
+  withQuantity = false,
+  withoutAddButton = false,
+  index = 0,
+  imagePriority = false,
+  sizes,
+}: ProductCardProps) {
+  const { format } = useMoney();
+  const { t } = useTranslation();
+  const { store, theme } = useTwilight();
+  const wishlist = useWishlist();
+  const { isPlaceholder } = useAsset();
+  const { format: formatNumber } = useNumber();
+
+  // Out-of-stock cards offer "notify me when available" instead of a dead button, unless
+  // the merchant switched `notify_when_available_in_card` off (Twig theme-raed parity).
+  const notifyInCard = theme?.settings?.notify_when_available_in_card !== false;
+  const addButtonStatus =
+    notifyInCard &&
+    product.is_out_of_stock &&
+    product.type !== 'donating' &&
+    product.type !== 'financial_support'
+      ? 'out-and-notify'
+      : product.status;
+
+  const addButtonRef = useHostAttributes({ fill: 'outline', width: 'wide' });
+
+  // Layout flags
+  const isVertical = layout === 'vertical';
+  const isHorizontal = layout === 'horizontal';
+  const isFullImage = layout === 'fullImage';
+  const isMinimal = layout === 'minimal';
+  const isSpecial = layout === 'special';
+
+  // Wishlist status
+  const productInWishlist = wishlist.has(Number(product.id));
+  const handleWishlistToggle = useCallback(() => {
+    wishlist.toggle(Number(product.id));
+  }, [wishlist, product.id]);
+
+  // Get image fit type from store settings
+  const fitImageHeight = store?.settings?.product?.fit_type;
+
+  // Product badge component
+  const getProductBadge = () => {
+    if (product?.preorder?.label && typeof product.preorder.label === 'string') {
+      return <div className="s-product-card-promotion-title">{product.preorder.label}</div>;
+    }
+    if (product.promotion_title) {
+      return <div className="s-product-card-promotion-title">{product.promotion_title}</div>;
+    }
+    if (withQuantity && product?.quantity) {
+      const formattedQty = formatNumber(product.quantity);
+      return (
+        <div className="s-product-card-quantity">
+          {t('pages.products.remained', 'Remained')} {formattedQty}
+        </div>
+      );
+    }
+    if (withQuantity && product?.is_out_of_stock) {
+      return (
+        <div className="s-product-card-out-badge">
+          {t('pages.products.out_of_stock', 'Out of Stock')}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  // Price display component
+  const getProductPrice = () => {
+    if (product.is_on_sale && product.sale_price) {
+      return (
+        <div className="s-product-card-sale-price">
+          <h4>{format(product.sale_price)}</h4>
+          {product.regular_price && <span>{format(product.regular_price)}</span>}
+        </div>
+      );
+    }
+    if (product.starting_price) {
+      return (
+        <div className="s-product-card-starting-price">
+          <p>{t('pages.products.starting_price', 'Starting from')}</p>
+          <h4>{format(product.starting_price)}</h4>
+        </div>
+      );
+    }
+    return <h4 className="s-product-card-price">{format(product.price)}</h4>;
+  };
+
+  // Build card class names
+  const cardClassName = [
+    's-product-card',
+    's-product-card-entry',
+    isVertical ? 's-product-card-vertical' : '',
+    isHorizontal ? 's-product-card-horizontal' : '',
+    fitImageHeight && isVertical ? `s-product-card-fit-height` : '',
+    isSpecial ? 's-product-card-special' : '',
+    isFullImage ? 's-product-card-full-image' : '',
+    isMinimal ? 's-product-card-minimal' : '',
+    product?.donation ? 's-product-card-donation' : '',
+    withShadow ? 's-product-card-shadow' : '',
+    product?.is_out_of_stock ? 's-product-card-out-of-stock' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Image fit class
+  const isProductPlaceholder = isPlaceholder(product.image?.url);
+  const imageFitClass = isProductPlaceholder ? 'contain' : fitImageHeight || 'cover';
+
+  return (
+    <div
+      id={`product-card-${product.id}`}
+      className={cardClassName}
+      data-product-id={product.id}
+      style={{
+        animationDelay: `${index * 100}ms`,
+      }}
+    >
+      <div className={isFullImage ? 's-product-card-image-full' : 's-product-card-image'}>
+        <a href={product.url} aria-label={product.image?.alt || product.name}>
+          <Image
+            className={`s-product-card-image-${imageFitClass}`}
+            src={product.image?.url}
+            alt={product.image?.alt ?? product.name}
+            width={300}
+            height={300}
+            sizes={
+              sizes ?? (isFullImage || isMinimal ? PRODUCT_WIDE_IMAGE_SIZES : PRODUCT_IMAGE_SIZES)
+            }
+            srcSetWidths={PRODUCT_IMAGE_SRCSET_WIDTHS}
+            aspectRatio="1/1"
+            priority={imagePriority}
+          />
+          {!isFullImage && !isMinimal && getProductBadge()}
+        </a>
+        {isFullImage && (
+          <a href={product.url} aria-label={product.name} className="s-product-card-overlay" />
+        )}
+        {!isHorizontal && !isFullImage && (
+          <SallaButton
+            shape="icon"
+            fill="outline"
+            color="light"
+            ariaLabel={t('pages.wishlist.toggle', 'Add or remove to wishlist')}
+            className={`s-product-card-wishlist-btn animated ${productInWishlist ? 's-product-card-wishlist-added pulse-anime' : 'not-added un-favorited'}`}
+            onClick={handleWishlistToggle}
+            data-id={product.id}
+          >
+            <i className="sicon-heart" />
+          </SallaButton>
+        )}
+      </div>
+      <div className="s-product-card-content">
+        {/* Special card: quantity pie */}
+        {isSpecial && product?.quantity && (
+          <div className="s-product-card-content-pie">
+            <span>
+              <b>{formatNumber(product.quantity)}</b>
+              {t('pages.products.remained', 'Remained')}
+            </span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="-2 -1 36 34"
+              className="s-product-card-content-pie-svg"
+            >
+              <circle cx="16" cy="16" r="15.9155" className="s-product-card-content-pie-svg-base" />
+              <circle cx="16" cy="16" r="15.9155" className="s-product-card-content-pie-svg-bar" />
+            </svg>
+          </div>
+        )}
+
+        <div
+          className={`s-product-card-content-main ${isSpecial ? 's-product-card-content-extra-padding' : ''}`}
+        >
+          <h3 className="s-product-card-content-title">
+            <a href={product.url}>{product.name}</a>
+          </h3>
+          {product.subtitle && !isMinimal && (
+            <p className="s-product-card-content-subtitle opacity-80">{product.subtitle}</p>
+          )}
+        </div>
+
+        <div
+          className={`s-product-card-content-sub ${isSpecial ? 's-product-card-content-extra-padding' : ''}`}
+        >
+          {!product?.donation?.can_donate && getProductPrice()}
+          {product.rating?.stars && (
+            <div className="s-product-card-rating">
+              <i className="sicon-star2 text-orange-300" />
+              <span>{product.rating.stars}</span>
+            </div>
+          )}
+        </div>
+
+        {!withoutAddButton && (
+          <div className="s-product-card-content-footer gap-2">
+            <SallaAddProductButton
+              ref={addButtonRef}
+              fill="outline"
+              width="wide"
+              productId={product.id}
+              productStatus={addButtonStatus}
+              productType={product.type}
+              hasPreOrder={product.has_preorder_campaign}
+            />
+            {(isHorizontal || isFullImage) && (
+              <SallaButton
+                shape="icon"
+                fill="outline"
+                color="light"
+                ariaLabel={t('pages.wishlist.toggle', 'Add or remove to wishlist')}
+                className={`s-product-card-wishlist-btn animated ${productInWishlist ? 's-product-card-wishlist-added pulse-anime' : 'not-added un-favorited'}`}
+                onClick={handleWishlistToggle}
+                data-id={product.id}
+              >
+                <i className="sicon-heart" />
+              </SallaButton>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+export const ProductCard = memo(function ProductCard(props: ProductCardProps) {
+  const Component = useMemo(() => {
+    const hasOverride = registry.getOriginal<ProductCardProps>(PRODUCT_CARD_KEY) !== null;
+    if (hasOverride) {
+      return registry.resolve<ProductCardProps>(PRODUCT_CARD_KEY);
+    }
+    return null;
+  }, []);
+
+  if (Component) {
+    return <Component {...props} />;
+  }
+
+  return <ProductCardContent {...props} />;
+});
+
+export default ProductCard;

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