const offer = await tagada.offers.getOffer('offer_xxx');

// offer.id          -- offer ID
// offer.title       -- "Essential Cap — $19.99"
// offer.type        -- 'upsell' | 'orderbump' | 'downsell'
// offer.lineItems   -- products in the offer

const upsells = await tagada.offers.listOffers({ type: 'upsell' });
const orderBumps = await tagada.offers.listOffers({ type: 'orderbump' });

// orderId = processPayment() → result.order.id  (the tee order)

const preview = await tagada.offers.previewOffer({ offerId: 'offer_cap' });
// preview.items, preview.totalAmount, preview.currency

const result = await tagada.offers.processOfferPayment({
  offerId: 'offer_cap',
  mainOrderId: orderId,
  returnUrl: window.location.href,
});

switch (result.status) {
  case 'succeeded':
    // Child order exists. Next OTO or thank you — your router.
    window.location.href = `/offer-tote?orderId=${orderId}`;
    break;
  case 'requires_redirect':
    window.location.href = result.redirectUrl;
    break;
  case 'failed':
    console.error(result.error);
    break;
}

// Vanilla — polls until the child orders exist (or 8s, whichever first)
const order = await tagada.customer.getOrder(orderId, { waitForRelatedOrders: true });
// order.items            → tee
// order.relatedOrders    → cap, tote, … one per accepted offer

// React — renders the tee immediately, upsells pop in when they land
const { order, relatedOrders } = useOrder(orderId);

await tagada.offers.toggleOrderBump({
  checkoutSessionId: session.id,
  orderBumpOfferId: bumps[0].id,
  selected: true,
});

import { useOffers } from '@tagadapay/headless-sdk/react';

function UpsellPage({ offerId, orderId }: { offerId: string; orderId: string }) {
  const { offer, getOffer, previewOffer, processOfferPayment, isLoading } = useOffers();

  useEffect(() => { getOffer(offerId); }, [offerId]);

  const accept = async () => {
    const result = await processOfferPayment({
      offerId,
      mainOrderId: orderId,
      returnUrl: window.location.href,
    });
    if (result.status === 'succeeded') {
      window.location.href = `/offer-tote?orderId=${orderId}`;
    }
  };

  if (isLoading) return <p>Loading...</p>;

  return (
    <div>
      <h2>{offer?.title}</h2>
      <button onClick={accept}>Yes, add it</button>
      <button onClick={() => { window.location.href = `/downsell?orderId=${orderId}`; }}>
        No thanks
      </button>
    </div>
  );
}