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

// offer.id          -- offer ID
// offer.title       -- "Upgrade to VIP Coaching Pack"
// offer.type        -- 'upsell' | 'orderbump' | 'downsell'
// offer.lineItems   -- products in the offer
// offer.pricing     -- { amount, currency, compareAtAmount? }

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

// 1. Preview — get the pricing breakdown
const preview = await tagada.offers.previewOffer({
  offerId: 'offer_xxx',
});
// preview.items, preview.totalAmount, preview.totalAdjustedAmount, preview.currency

// 2. Pay — one-click charge (reuses payment instrument from mainOrderId)
const result = await tagada.offers.payPreviewedOffer({
  offerId: 'offer_xxx',
  mainOrderId: 'order_yyy',
});

if (result.success) {
  console.log('Upsell order created:', result.orderId);
}

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

// List post-purchase offers for an order
const offers = await tagada.offers.listPostPurchaseOffers('order_yyy');

// Accept
await tagada.offers.acceptPostPurchaseOffer({
  orderId: 'order_yyy',
  offerId: offers[0].id,
});

// Decline
await tagada.offers.declinePostPurchaseOffer({
  orderId: 'order_yyy',
  offerId: offers[0].id,
});

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

function UpsellPage({ offerId, orderId }: { offerId: string; orderId: string }) {
  const {
    offer,
    getOffer,
    previewOffer,
    payPreviewedOffer,
    listPostPurchaseOffers,
    acceptPostPurchaseOffer,
    declinePostPurchaseOffer,
    isLoading,
  } = useOffers();

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

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

  return (
    <div>
      <h2>{offer?.title}</h2>
      <button onClick={() => payPreviewedOffer({ offerId, mainOrderId: orderId })}>
        Yes, Add It!
      </button>
      <button onClick={() => declinePostPurchaseOffer({ orderId, offerId })}>
        No Thanks
      </button>
    </div>
  );
}