React to cart changes

import { useEffect, useState } from 'react';
import { getSallaSDK } from '@salla.sa/twilight-theme-engine/utils';

/** How many items are in the shopper's cart, kept current by the SDK's cart events. */
export function CartBadge() {
  const [count, setCount] = useState<number | null>(null);
  const [justAdded, setJustAdded] = useState(false);

  useEffect(() => {
    const salla = getSallaSDK();
    if (!salla?.event) return; // effects never run on the server; the SDK may still be missing

    // Named functions, created once per mount: off() removes a listener only
    // when it is handed the very same function that on() received.
    const onUpdated = (...args: unknown[]) => {
      const cart = args[0] as { count?: number } | undefined;
      if (typeof cart?.count === 'number') setCount(cart.count);
    };
    const onItemAdded = () => setJustAdded(true);

    salla.event.on('cart::updated', onUpdated);
    salla.event.on('cart::item.added', onItemAdded);
    return () => {
      salla.event.off('cart::updated', onUpdated);
      salla.event.off('cart::item.added', onItemAdded);
    };
  }, []);

  // Let the highlight fade after a moment.
  useEffect(() => {
    if (!justAdded) return;
    const timer = window.setTimeout(() => setJustAdded(false), 1500);
    return () => window.clearTimeout(timer);
  }, [justAdded]);

  if (count === null) return null;
  return (
    <span
      className={`inline-flex min-w-6 justify-center rounded-full px-2 text-sm text-white ${
        justAdded ? 'bg-green-600' : 'bg-primary'
      }`}
    >
      {count}
    </span>
  );
}

// The same listener through the cart helpers. Remove it with the matching off helper
// and the same function: `on` stores a wrapper, so `event.off('cart::updated', onUpdated)`
// would find nothing to remove. getSallaSDK() is typed; the bare global is not.
const events = getSallaSDK()?.cart.event;
events?.onUpdated?.(onUpdated);
return () => events?.offUpdated?.(onUpdated);

import { hookRegistry, HookName } from '@salla.sa/twilight-theme-engine/hooks';
import { CartBadge } from '../components/cart/CartBadge';

// Inside registerThemeHooks(): mounted once, on every page, for as long as the page is open.
hookRegistry.register(HookName.HEADER_END, () => <CartBadge />);