// =================================================================
// pw-screens-marketplace.jsx — Publisher Admin · Marketplace (PKG-14)
//
// PRD §8. Publishers sell each other's inventory. DropCap publishes
// the directory and clears the transaction; it never sets a price.
//
// Four things this file exists to say out loud, because every one of
// them is money and every one is easy to render wrongly:
//
// 1. BOOKING SPENDS MONEY NOW. The seller pays 100% in advance, in
// full, before anything runs. A button that reads "Book" without
// the amount next to it is a button somebody clicks by accident.
// 2. A PLACEMENT HAS A QUANTITY. Exclusive (one slot) and run-of-site
// (no limit) are different products at different prices, and a
// buyer choosing between them has to be able to see which is which.
// 3. `declined` IS NOT `refunded`. A declined booking has money OWED
// until somebody sends it. Showing them as one state hides every
// unpaid refund, which is the whole reason the queue exists.
// 4. A REFUND CAN BE LESS THAN WHAT WAS PAID, and that is correct.
// The seller is rebated 15% at T+3; a refund after that is net of
// it (PRD §8 Terms). Unexplained, ₹1,700 back on a ₹2,000 booking
// reads as being short-changed.
// =================================================================
const MKT_STATUS = {
pending_payment: { label: "Awaiting payment", tone: "warn" },
paid: { label: "Paid — awaiting the host", tone: "info" },
accepted: { label: "Accepted", tone: "good" },
live: { label: "Live", tone: "good" },
completed: { label: "Completed", tone: "neutral" },
declined: { label: "Declined", tone: "warn" },
cancelled: { label: "Cancelled", tone: "neutral" },
refunded: { label: "Refunded", tone: "neutral" },
};
const mktMoney = (n, currency) => {
try {
return new Intl.NumberFormat(undefined, {
style: "currency",
currency: currency || "USD",
maximumFractionDigits: 2,
}).format(Number(n || 0));
} catch {
return `${currency || ""} ${Number(n || 0).toFixed(2)}`.trim();
}
};
/**
* How much of a placement is for sale (C22).
*
* -1 means the host has said this placement does not run out — a run-of-site unit carrying any
* number of advertisers at once. 1 means exclusive. Neither is a default worth hiding: they are
* different products, and the price only makes sense next to the answer.
*/
const CapacityNote = ({ capacity }) => {
const n = Number(capacity ?? 1);
if (n === -1) return Runs alongside others;
if (n === 1) return Exclusive — one slot;
return {n} slots;
};
// =================================================================
// Browse and book
// =================================================================
const BookingDialog = ({ entry, campaigns, onClose, onBooked, notify }) => {
const [campaignId, setCampaignId] = React.useState(campaigns[0]?.campaign_id || "");
const [startsOn, setStartsOn] = React.useState("");
const [busy, setBusy] = React.useState(false);
const endsOn = React.useMemo(() => {
if (!startsOn) return null;
const ms = Date.parse(`${startsOn}T00:00:00.000Z`);
if (!Number.isFinite(ms)) return null;
// The card's own duration decides the end, inclusive of the first day: a 30-day run starting on
// the 1st ends on the 30th. Shown rather than computed silently — the seller is committing to
// a specific fortnight on somebody else's site.
return new Date(ms + (Number(entry.duration_days || 1) - 1) * 86400000).toISOString().slice(0, 10);
}, [startsOn, entry.duration_days]);
const submit = async () => {
if (!campaignId || !startsOn) return;
setBusy(true);
try {
const res = await window.__api.write("createBooking", {
body: {
host_publisher_id: entry.publisher_id,
rate_card_id: entry.rate_card_id,
campaign_id: campaignId,
starts_on: startsOn,
// Echoed back so the server can refuse a quote that moved while this dialog sat open. The
// host sets the price, and booking at a stale figure would be booking at a price nobody
// agreed to.
quoted_price: entry.price,
quoted_currency: entry.currency,
},
});
onBooked(res);
} catch (e) {
notify(e?.message || "The booking could not be made.", "bad");
} finally {
setBusy(false);
}
};
return (
e.stopPropagation()}>
Book {entry.placement_code} on {entry.property_name}
)}
{/* The sentence that stops a click being an accident. */}
You pay {mktMoney(entry.price, entry.currency)} now, in full and in
advance. That is what the host is paid from, and it is what makes your own 15% a rebate
rather than an invoice — it comes back three days after payment clears.
If the host declines, you are refunded — net of any rebate you have already had.
Cancel
{busy ? "Booking…" : `Pay ${mktMoney(entry.price, entry.currency)} and book`}
);
const MarketplaceScreen = ({ data, setData }) => {
const notify = (msg, tone) => (window.__toast ? window.__toast(msg, tone) : null);
const [booking, setBooking] = React.useState(null);
const [handoff, setHandoff] = React.useState(null);
const dir = data?.marketplaceDirectory || {};
const entries = dir.entries || [];
const campaigns = data?.adCampaigns || [];
const onBooked = (res) => {
setBooking(null);
// The response carries a checkout, and nothing is paid until the seller completes it. Showing
// the URL rather than redirecting keeps the fixture path identical to the live one.
setHandoff(res || null);
if (window.__api?.read) {
window.__api.read("listBookings").then((b) => setData((d) => ({ ...d, marketplaceBookings: b })));
}
notify("Booking created. It is not confirmed until the payment clears.", "warn");
};
return (
{/* The terms belong here, not only inside the dialog a buyer has already decided to open.
Somebody comparing prices is deciding whether to spend money, and the fact that they pay
all of it up front changes what the prices mean. */}
You pay the host's price in full and in advance, to DropCap, before
anything runs. 15% comes back to you three days later — that is your
share as the seller, and it is a rebate on money you have already paid rather than an
invoice you send. If the host declines, you are refunded net of any rebate you have
already had.
{entries.length === 0 ? (
Nothing listed yet. DropCap seeds no prices — every line here is a publisher's own.
) : (
entries.map((e) => )
)}
{dir.has_more && (
There is more inventory than shown. Narrow by format or price rather than assuming this
is the whole network.
)}
{handoff && (
Booking {handoff.booking_id} is awaiting payment. It holds
the host's slot while you complete the checkout and then releases it, so an abandoned
checkout does not take their inventory off the market.
{refund.status === "paid"
? `Refunded ${mktMoney(refund.refund_amount, refund.currency)}`
: `Refund owed: ${mktMoney(refund.refund_amount, refund.currency)}`}
{netted && (
// Without this sentence a ₹1,700 refund on a ₹2,000 booking reads as being short-changed.
You paid {mktMoney(refund.gross_amount, refund.currency)} and had already been rebated{" "}
{mktMoney(refund.rebate_already_paid, refund.currency)} of it, so this returns the rest.
You end up exactly where you started.
)}
{refund.status === "owed" && (
Not sent yet.
)}
);
};
const BookingRow = ({ booking, onAction, busyId }) => {
const s = MKT_STATUS[booking.status] || { label: booking.status, tone: "neutral" };
const busy = busyId === booking.booking_id;
const isHost = booking.role === "host";
// A host answers a booking that has been paid for. Nothing reaches them before that.
const canAnswer = isHost && booking.status === "paid";
// A seller may back out only before the run starts: from the first day the host has held the slot
// off the market and is delivering against it.
const canCancel =
!isHost &&
["paid", "accepted"].includes(booking.status) &&
booking.starts_on > new Date().toISOString().slice(0, 10);
return (
{isHost ? "On your inventory" : "You are selling"}
);
};
const BookingsScreen = ({ data, setData }) => {
const notify = (msg, tone) => (window.__toast ? window.__toast(msg, tone) : null);
const [busyId, setBusyId] = React.useState(null);
const bookings = data?.marketplaceBookings || [];
const reload = () =>
window.__api.read("listBookings").then((b) => setData((d) => ({ ...d, marketplaceBookings: b })));
const onAction = async (booking, action) => {
let reason = "";
if (action !== "accept") {
reason = window.prompt(
action === "decline"
? "Why are you declining? The seller has paid in full and will be told."
: "Why are you cancelling?",
"",
);
// A blank reason is a decline the seller cannot act on. `BrokeredBookingDecisionRequest`
// requires one; asking again here saves a round trip and an unexplained 400.
if (!reason) return;
}
setBusyId(booking.booking_id);
try {
const endpoint = action === "accept" ? "acceptBooking" : action === "decline" ? "declineBooking" : "cancelBooking";
await window.__api.write(endpoint, {
params: { booking_id: booking.booking_id },
...(action === "accept" ? {} : { body: { reason } }),
});
await reload();
notify(
action === "accept"
? "Accepted."
: "Recorded. The seller's refund is owed until it has actually been sent.",
action === "accept" ? "good" : "warn",
);
} catch (e) {
notify(e?.message || "That could not be done.", "bad");
} finally {
setBusyId(null);
}
};
const awaitingMe = bookings.filter((b) => b.role === "host" && b.status === "paid").length;
return (
{awaitingMe > 0 && (
{awaitingMe} {awaitingMe === 1 ? "booking is" : "bookings are"} paid for
and waiting for your decision. Declining is free until your share is released; after that
it cannot be reversed here.
)}
{bookings.length === 0 ? (
Nothing booked yet.
) : (
bookings.map((b) => (
))
)}
A declined booking still owes the seller money until it has been sent — that is why it reads
Declined with a refund owed rather than Refunded.
);
};
// =================================================================
// My inventory — properties, prices, and who you will not take
// =================================================================
const RateCardRow = ({ card, onSave, busy }) => {
const [edit, setEdit] = React.useState(false);
const [price, setPrice] = React.useState(String(card.price ?? ""));
const [capacity, setCapacity] = React.useState(String(card.max_concurrent_bookings ?? 1));
const save = () => {
onSave(card, {
placement_code: card.placement_code,
creative_type: card.creative_type,
price: Number(price),
currency: card.currency,
duration_days: card.duration_days,
max_concurrent_bookings: Number(capacity),
status: card.status,
});
setEdit(false);
};
return (
{ onAdd(type, value.trim()); setValue(""); }}>
Decline it
{/* True whether or not any rules exist, so it cannot live in the empty state. A host reading
a list of two rules still needs to know that everything absent from it is accepted. */}
Anything not listed here is bookable: a host who has expressed no preference{" "}
has not declined. You can still turn down an individual booking afterwards,
but by then the seller has paid and it becomes a refund.
No prices on this property yet — so none of it is for sale.
) : (
cards.map((c) => )
)}
Pausing a card is how you stop selling a slot; there is no delete, because a price a booking
was made against has to survive for that booking to be explainable.