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

package/tailwind/components/Component.tsx.txt

@@ -0,0 +1,21 @@
+import React from 'react';
+import { registry } from './ComponentRegistry';
+
+export interface ComponentProps {
+  name: string;
+  fallback?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+export function Component({ name, fallback = null, ...props }: ComponentProps): React.ReactNode {
+  const ResolvedComponent = registry.resolve(name);
+
+  if (!ResolvedComponent) {
+    if (process.env.NODE_ENV === 'development') {
+      window.salla?.logger?.warn(`Component::"${name}" not found in registry`);
+    }
+    return fallback;
+  }
+
+  return <ResolvedComponent {...props} />;
+}

package/tailwind/components/ComponentRegistry.ts.txt

@@ -0,0 +1,66 @@
+import type { ComponentType, ComponentDefinition } from '../types';
+
+class ComponentRegistry {
+  private components = new Map<string, ComponentDefinition>();
+
+  register<P = Record<string, unknown>>(name: string, component: ComponentType<P>): void {
+    this.components.set(name, {
+      component: component as ComponentType,
+      displayName: name,
+    });
+  }
+
+  override<P = Record<string, unknown>>(name: string, component: ComponentType<P>): void {
+    const existing = this.components.get(name);
+    if (existing) {
+      this.components.set(name, {
+        component: component as ComponentType,
+        displayName: name,
+        original: existing,
+      });
+    } else {
+      this.register(name, component);
+    }
+  }
+
+  resolve<P = Record<string, unknown>>(name: string): ComponentType<P> | null {
+    const definition = this.components.get(name);
+    return (definition?.component as ComponentType<P>) ?? null;
+  }
+
+  getOriginal<P = Record<string, unknown>>(name: string): ComponentType<P> | null {
+    const definition = this.components.get(name);
+    return (definition?.original?.component as ComponentType<P>) ?? null;
+  }
+
+  has(name: string): boolean {
+    return this.components.has(name);
+  }
+
+  list(): string[] {
+    return Array.from(this.components.keys());
+  }
+
+  listByPrefix(prefix: string): string[] {
+    return this.list().filter((name) => name.startsWith(prefix));
+  }
+
+  clear(): void {
+    this.components.clear();
+  }
+
+  remove(name: string): boolean {
+    return this.components.delete(name);
+  }
+}
+
+export const registry = new ComponentRegistry();
+
+export { ComponentRegistry };
+
+export const COMPONENT_KEYS = {
+  PRODUCT_CARD: 'product:card',
+  PRODUCT_GALLERY: 'product:gallery',
+  PRODUCT_LIST_PAGE: 'product:list-page',
+  PRODUCT_LIST_SKELETON: 'product:list-skeleton',
+} as const;

package/tailwind/components/cart/CartItem.tsx.txt

@@ -0,0 +1,211 @@
+import type { Money, CartItem as CartItemType } from '../../types';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useMoney } from '../../hooks/useMoney';
+import { Link, Image } from '../common';
+import { SallaCartItemOffers } from '@salla.sa/twilight-components-react/cart-item-offers';
+import { SallaQuantityInput } from '@salla.sa/twilight-components-react/quantity-input';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaProductOptions } from '@salla.sa/twilight-components-react/product-options';
+import { useHostAttributes } from '@salla.sa/twilight-theme-engine/hooks/useHostAttributes';
+
+interface CartItemProps {
+  item: CartItemType;
+  isFirst?: boolean;
+}
+
+function toNumber(value: number | Money | undefined): number | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return value;
+  return value.amount;
+}
+
+function moneyCurrency(value: number | Money | undefined): string | undefined {
+  if (typeof value !== 'object') return undefined;
+  return value.currency;
+}
+
+function CartItemPrices({ item }: { item: CartItemType }) {
+  const { format } = useMoney();
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      {item.offer && (
+        <span className="text-sm text-gray-500 line-through item-regular-price">
+          {format(toNumber(item.product_price), {
+            currency: moneyCurrency(item.product_price),
+          })}
+        </span>
+      )}
+
+      {item.is_on_sale && (
+        <span className="inline-flex gap-1 leading-4 text-sm text-gray-500 line-through item-original-price">
+          {format(toNumber(item.original_price), {
+            currency: moneyCurrency(item.original_price),
+          })}
+        </span>
+      )}
+
+      <span
+        className={`inline-flex gap-1 leading-4 item-price ${item.has_discount ? 'text-red-800' : 'text-sm text-gray-500'}`}
+      >
+        {format(toNumber(item.price), { currency: moneyCurrency(item.price) })}
+      </span>
+    </div>
+  );
+}
+
+function CartItemQuantity({ item }: { item: CartItemType }) {
+  const { t } = useTranslation();
+  const quantityRef = useHostAttributes({
+    max: item.max_quantity,
+    value: item.quantity,
+    name: 'quantity',
+  });
+
+  if (item.type === 'donating') return <span></span>;
+
+  if (item.is_hidden_quantity) {
+    return (
+      <>
+        <input
+          type="hidden"
+          value={item.quantity}
+          name="quantity"
+          aria-label={t('pages.products.quantity')}
+        />
+        <span className="w-10 text-center">{item.quantity}</span>
+      </>
+    );
+  }
+
+  return (
+    <SallaQuantityInput
+      // The loaded component reads `value` only once, so remount when the quantity changes.
+      key={`${item.id}-${item.quantity}`}
+      ref={quantityRef}
+      cartItemId={item.id}
+      max={item.max_quantity ?? undefined}
+      className="transition transition-color duration-300"
+      aria-label={t('pages.products.quantity')}
+      value={item.quantity}
+      name="quantity"
+    />
+  );
+}
+
+function CartItemTotal({ item }: { item: CartItemType }) {
+  const { t } = useTranslation();
+  const { format } = useMoney();
+  const total = item.detailed_offers?.length ? item.total_special_price : item.total;
+  return (
+    <p className="text-primary flex-none font-bold text-sm rtl:md:pl-12 ltr:md:pr-12">
+      <span>{t('pages.cart.total')}:</span>
+      <span className="inline-block item-total">
+        {item.is_available
+          ? format(toNumber(total), { currency: moneyCurrency(total) })
+          : t('pages.products.out_of_stock')}
+      </span>
+    </p>
+  );
+}
+
+const handleChange = (e: React.ChangeEvent<HTMLFormElement>) => {
+  window.salla?.form.onChange('cart.updateItem', e);
+};
+
+export function CartItem({ item, isFirst = false }: CartItemProps) {
+  const { t } = useTranslation();
+
+  const handleDelete = async () => {
+    await window.salla?.cart.deleteItem(item.id);
+    document.querySelector(`#item-${item.id}`)?.remove();
+  };
+
+  const isFreeProduct = toNumber(item.price) === 0 && item.has_discount;
+
+  return (
+    <form onChange={handleChange} id={`item-${item.id}`}>
+      <section className="cart-item bg-white p-5 xs:p-7 rounded-md mb-5 relative">
+        <input type="hidden" name="id" value={item.id} />
+
+        <div className="md:flex rtl:space-x-reverse md:space-x-12 items-start justify-between mb-8 last:mb-0">
+          <div className="flex flex-1 rtl:space-x-reverse space-x-4">
+            <Link to={item.url} className="relative overflow-hidden shrink-0">
+              <Image
+                src={item.product_image}
+                alt={item.product_name}
+                className="flex-none w-24 h-20 border border-gray-200 bg-gray-100 rounded-md object-center object-cover"
+                aspectRatio="6/5"
+                priority={isFirst}
+              />
+
+              {isFreeProduct && (
+                <div className="free-ribbon absolute top-[11px] right-[-38px] w-32 bg-red-600 text-white text-xs font-bold text-center py-1 rotate-45 shadow-md">
+                  {/* Twig: trans('pages.loyalty_program.free_product') */}
+                  {t('pages.loyalty_program.free_product')}
+                </div>
+              )}
+            </Link>
+
+            <div className="space-y-1">
+              <div className="text-gray-900 leading-6 text-lg font-bold">
+                <Link to={item.url} className="text-base">
+                  {item.product_name}
+                </Link>
+              </div>
+
+              <CartItemPrices item={item} />
+
+              {item.weight_label && (
+                <p className="text-sm text-gray-500">
+                  {t('pages.products.weight')}: <span>{item.weight_label}</span>
+                </p>
+              )}
+
+              {/* Twig: class="{{ item.detailed_offers ? 'hidden' : '' }}": hide old offer when detailed_offers present */}
+              {item.offer && !item.detailed_offers?.length && (
+                <span className="old-offers flex items-center gap-1 mx-1.5">
+                  <i className="sicon-discount-calculator text-gray-500 offer-icon"></i>
+                  <span className="text-sm text-gray-500 offer-name">{item.offer.names}</span>
+                </span>
+              )}
+
+              {item.detailed_offers && item.detailed_offers.length > 0 && (
+                <SallaCartItemOffers
+                  quantity={item.quantity}
+                  itemId={String(item.id) as any}
+                  productPrice={toNumber(item.product_price) ?? 0}
+                  offers={JSON.stringify(item.detailed_offers)}
+                />
+              )}
+            </div>
+          </div>
+
+          <div className="border-t border-b border-gray-200 py-3 md:p-0 md:border-none mt-5 md:mt-0 flex gap-8 justify-between items-center md:items-start">
+            <CartItemQuantity item={item} />
+
+            <CartItemTotal item={item} />
+          </div>
+        </div>
+
+        {/* Twig: {% include 'pages.partials.product.options' with {product:item} %} */}
+        {item.options && item.options.length > 0 && (
+          <SallaProductOptions options={JSON.stringify(item.options)} productId={item.product_id} />
+        )}
+
+        <span className="absolute top-1.5 rtl:left-1.5 ltr:right-1.5 rtl:xs:left-5 ltr:xs:right-5 xs:top-5">
+          <SallaButton
+            type="button"
+            shape="icon"
+            size="small"
+            color="danger"
+            className="btn--delete"
+            ariaLabel={t('common.elements.remove')}
+            onClick={handleDelete}
+          >
+            <i className="sicon-cancel"></i>
+          </SallaButton>
+        </span>
+      </section>
+    </form>
+  );
+}

package/tailwind/components/cart/CartSummary.tsx.txt

@@ -0,0 +1,269 @@
+import { useCallback } from 'react';
+import { HookSlot } from '../../hooks/HookSlot';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useCoupon } from '../../hooks/useCoupon';
+import { useMoney } from '../../hooks/useMoney';
+import { stripUnsafeHtml } from '../../utils/sanitize';
+import { SallaLoyalty } from '@salla.sa/twilight-components-react/loyalty';
+import { SallaGifting } from '@salla.sa/twilight-components-react/gifting';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaTieredOffer } from '@salla.sa/twilight-components-react/tiered-offer';
+import type { Cart } from '../../types';
+
+interface CartSummaryProps {
+  cart: Cart;
+  applyCouponEnabled?: boolean;
+  taxAmount?: number;
+  loyalty?: Cart['loyalty'];
+  gift?: Cart['gift'];
+  loyaltyPoints?: number;
+}
+
+export function CartSummary({
+  cart,
+  applyCouponEnabled = true,
+  taxAmount,
+  loyalty,
+  gift,
+  loyaltyPoints,
+}: CartSummaryProps) {
+  const { t } = useTranslation();
+  const { format } = useMoney();
+
+  const handleCartSubmit = useCallback(async () => {
+    // Twig's cart.js: a submit with an empty required option fails and the SDK resets the cart.
+    const forms = document.querySelectorAll<HTMLFormElement>('form[id^="item-"]');
+    if (![...forms].every((form) => form.reportValidity())) {
+      window.salla?.notify.error(window.salla.lang.get('common.messages.required_fields'));
+      return;
+    }
+    try {
+      await window.salla?.cart.submit();
+    } catch {
+      // Error handling
+    }
+  }, []);
+
+  return (
+    <div className="sticky top-24 w-full lg:w-96 rtl:lg:mr-8 ltr:lg:ml-8">
+      <HookSlot name="cart:summary.start" />
+      {cart.free_shipping_bar && <FreeShippingBar freeShippingBar={cart.free_shipping_bar} />}
+
+      {/* Twig: {% if loyalty and user.loyalty_points %} — top-level page vars rendered inside sidebar */}
+      {loyalty && loyaltyPoints && (
+        <div className="shadow-default mb-5 rounded-md p-3 xs:p-7 bg-white">
+          <SallaLoyalty
+            customerPoints={loyaltyPoints}
+            prizePoints={loyalty.prize.points}
+            prizeTitle={loyalty.prize.title}
+          />
+        </div>
+      )}
+
+      {/* Twig: {{gift.enabled ? '' : 'hidden'}} — top-level page var rendered inside sidebar */}
+      {gift?.enabled && (
+        <div id="cart-gifting" className="shadow-default bg-white xs:p-2 rounded-md mb-5 relative">
+          <SallaGifting
+            id="salla-gifting"
+            className="mt-5"
+            widgetTitle={t('pages.cart.gift_widget_title', 'Send as a gift')}
+            widgetSubtitle={gift.text}
+            {...(gift.type ? { [gift.type + 'Products']: true } : {})}
+            vertical
+          />
+        </div>
+      )}
+
+      <div className="shadow-default bg-white p-5 xs:p-7 rounded-md mb-5 relative transition-height duration-1000">
+        <h2 className="font-bold text-sm mb-5">{t('pages.cart.summary', 'Order Summary')}</h2>
+
+        <div className="flex justify-between text-sm mb-5">
+          <span className="text-gray-500">
+            {taxAmount
+              ? t('pages.cart.items_total_without_tax', 'Items total (excl. tax)')
+              : t('pages.cart.items_total', 'Items total')}
+          </span>
+          <b id="sub-total">{format(cart.sub_total)}</b>
+        </div>
+
+        {cart.options?.length > 0 && (
+          <div className="flex justify-between text-sm mb-5">
+            <span className="text-gray-500">
+              {t('pages.cart.order_options_total', 'Options total')}
+            </span>
+            <b id="cart-options-total">{format(cart.options_total ?? undefined)}</b>
+          </div>
+        )}
+
+        {cart.has_shipping && (
+          <div id="shipping-cost" className="flex justify-between text-sm mb-5">
+            <span className="text-gray-500">{t('pages.cart.shipping_cost', 'Shipping cost')}</span>
+            <b>{format(cart.real_shipping_cost)}</b>
+          </div>
+        )}
+
+        {applyCouponEnabled && <CouponInput initialCoupon={cart.coupon ?? undefined} />}
+
+        {!!cart.total_discount && (
+          <div id="total-discount" className="flex justify-between text-sm">
+            <span className="text-gray-500 block h-10">{t('pages.cart.discount', 'Discount')}</span>
+            <b>- {format(cart.total_discount)}</b>
+          </div>
+        )}
+
+        {!!taxAmount && (
+          <div className="flex justify-between text-sm mb-5">
+            <span className="text-gray-500">
+              {t('pages.cart.VAT_tax_amount', 'VAT Tax Amount')}
+            </span>
+            <b id="tax-amount">{format(taxAmount)}</b>
+          </div>
+        )}
+
+        <div className="flex justify-between text-lg mb-5">
+          <span className="text-gray-500">{t('pages.cart.final_total', 'Total')}</span>
+          <b data-cart-total>{format(cart.total)}</b>
+        </div>
+
+        <div className="cart-submit-wrap">
+          <HookSlot name="cart:submit.start" />
+          <SallaButton
+            id="cart-submit"
+            loaderPosition="center"
+            width="wide"
+            onClick={handleCartSubmit}
+          >
+            {t('pages.cart.complete_order', 'Complete Order')}
+          </SallaButton>
+          <HookSlot name="cart:submit.end" />
+        </div>
+
+        <HookSlot name="cart:summary.end" />
+      </div>
+
+      <SallaTieredOffer />
+    </div>
+  );
+}
+
+function FreeShippingBar({
+  freeShippingBar,
+}: {
+  freeShippingBar: NonNullable<Cart['free_shipping_bar']>;
+}) {
+  const isFree = freeShippingBar.has_free_shipping;
+  const { t } = useTranslation();
+
+  return (
+    <div className="shadow-default bg-white p-5 xs:p-7 rounded-md mb-5 relative" id="free-shipping">
+      <div className="flex rtl:space-x-reverse space-x-3 items-center">
+        <i className="bg-primary text-white rounded-icon sicon-shipping-fast"></i>
+        <div className="flex-1">
+          <h4 className="shipping-item font-bold text-sm mb-1.5">
+            {t('pages.cart.free_shipping', 'Free Shipping')}
+          </h4>
+          <p className="shipping-item text-sm text-gray-500">
+            {isFree ? (
+              <>
+                <span
+                  id="free-shipping-msg"
+                  dangerouslySetInnerHTML={{
+                    __html: stripUnsafeHtml(
+                      t('pages.cart.has_free_shipping', 'You have free shipping!')
+                    ),
+                  }}
+                />
+                <span className="emoji" id="free-shipping-applied">
+                  🎉
+                </span>
+              </>
+            ) : (
+              <span
+                id="free-shipping-msg"
+                dangerouslySetInnerHTML={{
+                  __html: stripUnsafeHtml(
+                    t(
+                      'pages.cart.free_shipping_alert',
+                      'Get free shipping when you add :amount more'
+                    ).replace(':amount', String(freeShippingBar.remaining))
+                  ),
+                }}
+              />
+            )}
+          </p>
+        </div>
+      </div>
+      {!isFree && (
+        <div className="mt-8 bg-border-color rounded-full" id="free-shipping-bar">
+          <div
+            className="progress-bg transition-all duration-500 h-2.5 bg-primary relative rounded-full flex justify-end"
+            style={{ width: `${freeShippingBar.percent}%` }}
+          >
+            <i className="inline-block sicon-shipping-fast absolute -top-5 rtl:left-0 ltr:right-0"></i>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CouponInput({ initialCoupon }: { initialCoupon?: string }) {
+  const { t } = useTranslation();
+  const { value, error, apply, remove } = useCoupon();
+
+  // Use initial coupon from cart if available
+  const appliedCoupon = value ?? initialCoupon;
+
+  const handleApplyCoupon = useCallback(
+    async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      const formData = new FormData(event.currentTarget);
+      const code = formData.get('coupon') as string;
+      if (code?.trim()) {
+        await apply(code.trim());
+      }
+    },
+    [apply]
+  );
+
+  const handleRemoveCoupon = useCallback(async () => {
+    await remove();
+  }, [remove]);
+
+  return (
+    <form className="border-t border-gray-200 border-b py-5 mb-5" onSubmit={handleApplyCoupon}>
+      <label htmlFor="coupon-input" className="block text-sm">
+        {t('pages.cart.have_coupon', 'Have a coupon?')}
+      </label>
+      <div className="mt-2.5 relative">
+        <input
+          placeholder={t('pages.cart.coupon_placeholder', 'Enter coupon code')}
+          disabled={!!appliedCoupon}
+          className="rtl:pl-24 ltr:pr-24 form-input"
+          defaultValue={appliedCoupon}
+          id="coupon-input"
+          name="coupon"
+          aria-label={t('pages.cart.apply_coupon', 'Apply coupon')}
+          type="text"
+        />
+
+        <SallaButton
+          type="submit"
+          className={`btn--coupon ${appliedCoupon ? 'has-coupon btn--danger' : 'has-not-coupon btn--default'}`}
+          loaderPosition="center"
+          onClick={appliedCoupon ? handleRemoveCoupon : undefined}
+        >
+          <span className="coupon-text">
+            {appliedCoupon ? '' : t('pages.cart.apply_coupon_btn', 'Apply')}
+          </span>
+          {appliedCoupon && <i className="sicon-cancel icon text-xl w-8"></i>}
+        </SallaButton>
+      </div>
+      {error && (
+        <span className="text-xs text-red-700" id="coupon-error">
+          {error}
+        </span>
+      )}
+    </form>
+  );
+}

package/tailwind/components/cart/PreOrderNotification.tsx.txt

@@ -0,0 +1,16 @@
+import { useTranslation } from '../../providers/I18nProvider';
+
+export function PreOrderNotification() {
+  const { t } = useTranslation();
+
+  return (
+    <salla-alert
+      className="mb-5"
+      message={t(
+        'pages.cart.pre_order_shipping',
+        'Your order will be shipped when the pre-order product becomes available in the store.'
+      )}
+      variant="info"
+    />
+  );
+}

package/tailwind/components/cart/PriceQuoteButton.tsx.txt

@@ -0,0 +1,21 @@
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { useTranslation } from '../../providers/I18nProvider';
+
+const handlePriceQuote = async () => {
+  await window.salla?.cart.api.priceQuote?.();
+};
+
+export function PriceQuoteButton() {
+  const { t } = useTranslation();
+
+  return (
+    <SallaButton
+      id="request-price-quote-btn"
+      className="btn--oval btn--md"
+      fill="outline"
+      onClick={handlePriceQuote}
+    >
+      {t('pages.cart.request_price_quote', 'Request for Quotation')}
+    </SallaButton>
+  );
+}