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

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

@@ -0,0 +1,365 @@
+import { SallaAddProductButton } from '@salla.sa/twilight-components-react/add-product-button';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaCountDown } from '@salla.sa/twilight-components-react/count-down';
+import { SallaFileUpload } from '@salla.sa/twilight-components-react/file-upload';
+import { SallaGifting } from '@salla.sa/twilight-components-react/gifting';
+import { SallaMultipleBundleProduct } from '@salla.sa/twilight-components-react/multiple-bundle-product';
+// Use the eager (non-deferred) Core export: product options are an essential form
+// control, and the deferred wrapper's visibility-triggered hydration races with the
+// gallery's image layout shift and gets stuck on the skeleton, so options never appear.
+import { SallaProductOptionsCore as SallaProductOptions } from '@salla.sa/twilight-components-react/product-options';
+import { SallaProductSizeGuide } from '@salla.sa/twilight-components-react/product-size-guide';
+import { SallaQuantityInput } from '@salla.sa/twilight-components-react/quantity-input';
+import { useHostAttributes } from '@salla.sa/twilight-theme-engine/hooks/useHostAttributes';
+import { useTranslation } from '@salla.sa/twilight-theme-engine/i18n';
+import { getActiveCurrency } from '@salla.sa/twilight-theme-engine/api/client';
+import type { ReactNode } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import type { Product } from '../../types';
+import { CurrencySymbol } from '../common';
+
+interface AddToCartFormProps {
+  product: Product;
+  stickyAddToCart?: boolean;
+  giftingIntro?: string;
+  formStartSlot?: ReactNode;
+  formEndSlot?: ReactNode;
+}
+
+const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  e.preventDefault();
+  // Native event, like Twig's onsubmit: the SDK spins its submitter's salla-button until the add settles.
+  window.salla?.form.onSubmit('cart.addItem', e.nativeEvent);
+};
+
+const handleChange = (e: React.FormEvent<HTMLFormElement>) => {
+  const form = e.currentTarget;
+  // Not reportValidity(): it focuses and scrolls to the first empty required option mid-edit.
+  const isComplete = Array.from(form.elements).every(
+    (el) => !(el as HTMLInputElement).willValidate || (el as HTMLInputElement).validity.valid
+  );
+  if (isComplete) {
+    window.salla?.product?.getPrice(new FormData(form));
+  }
+};
+
+export function AddToCartForm({
+  product,
+  stickyAddToCart,
+  giftingIntro,
+  formStartSlot,
+  formEndSlot,
+}: AddToCartFormProps) {
+  const { t } = useTranslation();
+  // The API converts the amounts but still labels them in the store's own currency.
+  const priceCurrency = getActiveCurrency(product.currency);
+  const [activeCollapse, setActiveCollapse] = useState<string | null>(null);
+
+  // stable ref: an inline arrow re-runs on every render and resets the user's selection
+  const optionsRef = useCallback(
+    (el: { setOptionsData?: (data: never[]) => void } | null) =>
+      void el?.setOptionsData?.(product.options as never[]),
+    [product.options]
+  );
+
+  // salla-product-options reads its `options` prop only in its constructor (no
+  // @Watch), and on first load that constructor runs before sdk.init has set
+  // page.id — so its getDetails(page.id) fallback fetches nothing and the options
+  // never reflect. Seed page.id (=== product.id) and wait for the SDK to be ready
+  // before mounting the element so its fallback resolves on first load too.
+  const [optionsReady, setOptionsReady] = useState(false);
+  useEffect(() => {
+    const salla = window.salla;
+    if (!salla) return;
+    let alive = true;
+    salla.config?.set?.('page.id', product.id);
+    Promise.resolve(salla.onReady?.()).finally(() => {
+      if (alive) setOptionsReady(true);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [product.id]);
+
+  const handleCollapseToggle = useCallback((id: string) => {
+    setActiveCollapse((current) => (current === id ? null : id));
+  }, []);
+
+  const hasPreorder = product.has_preorder_campaign && product.preorder;
+  const hasWeightOrSizeGuide = product.weight || product.has_size_guide;
+  const hasAttachments = product.can_add_note || product.can_upload_file;
+  const amount =
+    typeof product.base_currency_price === 'object'
+      ? product.base_currency_price.amount
+      : product.base_currency_price;
+
+  const quantityRef = useHostAttributes({
+    max: product.max_quantity,
+    value: 1,
+    name: 'quantity',
+  });
+  const addButtonRef = useHostAttributes({
+    amount,
+    'loader-position': 'end',
+    type: 'submit',
+    width: 'wide',
+    'required-shipping': product.is_require_shipping,
+    'is-subscribed': product.notify_availability?.subscribed,
+  });
+
+  return (
+    <form
+      className="form product-form"
+      encType="multipart/form-data"
+      method="post"
+      onSubmit={handleSubmit}
+      onChange={handleChange}
+    >
+      <input type="hidden" name="id" value={product.id} />
+
+      {formStartSlot}
+
+      {optionsReady && product.options && product.options.length > 0 && (
+        <SallaProductOptions
+          key={product.id}
+          // constructor-only options parse: push data via ref on client remount
+          ref={optionsRef}
+          options={JSON.stringify(product.options)}
+          productId={product.id}
+        />
+      )}
+
+      {product.has_bundle_products && (
+        <SallaMultipleBundleProduct bundleSections={JSON.stringify(product)} />
+      )}
+
+      {hasWeightOrSizeGuide && (
+        <section className="bg-white p-5 rounded-md mb-5">
+          {product.weight && (
+            <div
+              className={`center-between ${product.has_size_guide ? 'pb-5 mb-5 border-b-[1px]' : ''}`}
+            >
+              <b className="form-label rtl:space-x-reverse space-x-1">
+                <i className="sicon-luggage-cart"></i>
+                <span>{t('pages.products.weight', 'Weight')}</span>
+              </b>
+              <span className="product-weight text-sm">{product.weight}</span>
+            </div>
+          )}
+          {product.has_size_guide && (
+            <>
+              <div className="center-between">
+                <b className="form-label rtl:space-x-reverse space-x-1">
+                  <i className="sicon-pencil-ruler"></i>
+                  <span>{t('pages.products.size_guides', 'Size Guides')}</span>
+                </b>
+                <SallaButton
+                  shape="link"
+                  color="primary"
+                  className="!p-0 text-sm with-arrow"
+                  onClick={() =>
+                    window.salla?.event?.dispatch('size-guide::open', String(product.id))
+                  }
+                >
+                  {t('pages.products.show_size_guides', 'Show Size Guides')}
+                  <i className="sicon-keyboard_arrow_left"></i>
+                </SallaButton>
+              </div>
+              <SallaProductSizeGuide />
+            </>
+          )}
+        </section>
+      )}
+
+      {hasAttachments && (
+        <section className="bg-white p-5 rounded-md mb-5">
+          <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start">
+            <div className="form-label">
+              <b className="block">{t('pages.products.attachments', 'Attachments')}</b>
+            </div>
+            <div className="mt-1 sm:mt-0 sm:col-span-2 text-end">
+              <div className="flex rtl:space-x-reverse space-x-3">
+                {product.can_add_note && (
+                  <button
+                    type="button"
+                    onClick={() => handleCollapseToggle(`note_${product.id}`)}
+                    className={`btn-tab btn--collapse ${activeCollapse === `note_${product.id}` ? 'is-opened' : 'is-closed'}`}
+                  >
+                    <i className="font-medium sicon-chat-conversation-alt rtl:ml-1.5 ltr:mr-1.5"></i>
+                    <span className="fix-align">{t('pages.products.add_note', 'Add Note')}</span>
+                  </button>
+                )}
+                {product.can_upload_file && (
+                  <button
+                    type="button"
+                    onClick={() => handleCollapseToggle(`file_${product.id}`)}
+                    className={`btn-tab btn--collapse ${activeCollapse === `file_${product.id}` ? 'is-opened' : 'is-closed'}`}
+                  >
+                    <i className="font-medium sicon-paperclip rtl:ml-1.5 ltr:mr-1.5"></i>
+                    <span className="fix-align">{t('pages.products.add_file', 'Add File')}</span>
+                  </button>
+                )}
+              </div>
+
+              {product.can_add_note && (
+                <div
+                  className={`collapse-content ${activeCollapse === `note_${product.id}` ? 'is-opened' : 'is-closed'}`}
+                >
+                  <div className="pt-4">
+                    <textarea
+                      className="animated animatedfadeInDown fadeInDown form-input h-16 bg-gray-50 block"
+                      placeholder={t('pages.products.notes_placeholder', 'Add your notes here...')}
+                      name="notes"
+                      cols={30}
+                      rows={10}
+                      defaultValue={product.notes}
+                    ></textarea>
+                  </div>
+                </div>
+              )}
+
+              {product.can_upload_file && (
+                <div
+                  className={`collapse-content ${activeCollapse === `file_${product.id}` ? 'is-opened' : 'is-closed'}`}
+                >
+                  <div className="pt-4 px-1">
+                    <SallaFileUpload
+                      accept="image/png, image/jpeg, image/jpg, image/gif, video/*, application/pdf"
+                      className="product-option-uploader"
+                    >
+                      <div className="product-option-uploader-placholder">
+                        <span className="product-option-uploader-placholder-icon">
+                          <i className="sicon-camera"></i>
+                        </span>
+                        <p className="profile-filepond-placholder-text">
+                          {t('common.uploader.drag_and_drop', 'Drag and drop files here')}
+                        </p>
+                        <span className="filepond--label-action">
+                          {t('common.uploader.browse', 'Browse')}
+                        </span>
+                      </div>
+                    </SallaFileUpload>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {formEndSlot}
+
+      <section className="flex bg-white p-5 sm:pb-0 rounded-md rounded-b-none">
+        <div className="center-between w-full">
+          <div className="form-label">
+            <b className="block">{t('pages.products.price', 'Price')}</b>
+          </div>
+
+          <div
+            className={`flex whitespace-nowrap price-wrapper gap-4 items-center ${product.is_out_of_stock ? 'hidden' : ''}`}
+          >
+            <div
+              className={`price_is_on_sale space-x-2 rtl:space-x-reverse whitespace-nowrap ${product.is_on_sale ? '' : 'hidden'}`}
+            >
+              <span className="total-price text-red-800 font-bold text-xl inline-block">
+                {product.sale_price} <CurrencySymbol currency={priceCurrency} />
+              </span>
+              <span className="before-price text-gray-500 line-through">
+                {product.regular_price} <CurrencySymbol currency={priceCurrency} />
+              </span>
+            </div>
+            <div
+              className={`starting-or-normal-price gap-4 ${product.is_on_sale ? 'hidden' : 'flex'}`}
+            >
+              {product.starting_price && (
+                <span className="starting-price-title">
+                  {t('pages.products.starting_price', 'Starting from')}
+                </span>
+              )}
+              <span className="total-price font-bold text-xl inline-block">
+                {String(product.starting_price ?? product.price)}{' '}
+                <CurrencySymbol currency={priceCurrency} />
+              </span>
+            </div>
+          </div>
+
+          <div
+            className={`out-of-stock min-h-7 leading-7 text-base text-red-600 !opacity-50 font-bold ${product.is_out_of_stock ? 'scale-pulse' : 'hidden'}`}
+          >
+            {t('pages.products.out_of_stock', 'Out of Stock')}
+          </div>
+        </div>
+      </section>
+
+      {hasPreorder ? (
+        <section className="mt-5 p-5">
+          <SallaCountDown preOrder={JSON.stringify(product.preorder)} boxed labeled />
+        </section>
+      ) : null}
+
+      <section className="sticky-product-bar bg-white p-5 rounded-md rounded-b-none">
+        {product.is_hidden_quantity || product.type === 'booking' ? (
+          <input
+            type="hidden"
+            value="1"
+            name="quantity"
+            aria-label={t('pages.products.quantity', 'Quantity')}
+          />
+        ) : (
+          <div className="sticky-product-bar__quantity center-between mb-5">
+            <span className="form-label font-bold">{t('pages.products.quantity', 'Quantity')}</span>
+            <SallaQuantityInput
+              ref={quantityRef}
+              max={product.max_quantity ?? undefined}
+              value={1}
+              name="quantity"
+              aria-label={t('pages.products.quantity', 'Quantity')}
+              className="border-gray-200 flex justify-end"
+            />
+          </div>
+        )}
+
+        <SallaAddProductButton
+          ref={addButtonRef}
+          {...(product.can_quick_buy ? { quickBuy: true } : {})}
+          {...(stickyAddToCart ? { supportStickyBar: true } : {})}
+          {...(product.is_require_shipping ? { requiredShipping: true } : {})}
+          {...(hasPreorder ? { hasPreOrder: true } : {})}
+          amount={amount}
+          className="mt-5 w-full sticky-product-bar__btn"
+          productStatus={product.status}
+          productType={product.type}
+          productId={product.id}
+          loaderPosition="end"
+          type="submit"
+          width="wide"
+          {...(product.notify_availability
+            ? {
+                ...(product.notify_availability.subscribed ? { isSubscribed: true } : {}),
+                channels: product.notify_availability.channels.join(','),
+                ...(product.notify_availability.subscribed_options
+                  ? {
+                      subscribedOptions: JSON.stringify(
+                        product.notify_availability.subscribed_options
+                      ),
+                    }
+                  : {}),
+                ...(product.notify_availability.options ? { notifyOptionsAvailability: true } : {}),
+              }
+            : {})}
+        >
+          {product.add_to_cart_label}
+        </SallaAddProductButton>
+      </section>
+
+      {product.giftable && (
+        <SallaGifting
+          className="mt-5"
+          widgetSubtitle={giftingIntro}
+          productId={Number(product.id)}
+          {...(product.is_require_shipping ? { physicalProducts: true } : {})}
+        />
+      )}
+    </form>
+  );
+}

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;