+ class="ts-banner">
@@ -183,125 +142,104 @@ export class TopsortBanner extends LitElement {
`;
}
- private setState(state: BannerState) {
- this.state = state;
+ private emitEvent(status: string) {
const event = new CustomEvent("statechange", {
- detail: { state, slotId: this.slotId },
+ detail: { slotId: this.slotId, status },
bubbles: true,
composed: true,
});
this.dispatchEvent(event);
}
- private async runAuction() {
+ private buildAuction(): Auction {
const device = getDeviceType();
- try {
- const auction: Auction = {
- type: "banners",
- slots: 1,
- device,
- slotId: this.slotId,
+ const auction: Auction = {
+ type: "banners",
+ slots: 1,
+ device,
+ slotId: this.slotId,
+ };
+ if (this.categoryId) {
+ auction.category = {
+ id: this.categoryId,
};
- if (this.categoryId) {
- auction.category = {
- id: this.categoryId,
- };
- } else if (this.categoryIds) {
- auction.category = {
- ids: this.categoryIds.split(",").map((item) => item.trim()),
- };
- } else if (this.categoryDisjunctions) {
- auction.category = {
- disjunctions: [this.categoryDisjunctions.split(",").map((item) => item.trim())],
- };
- } else if (this.searchQuery) {
- auction.searchQuery = this.searchQuery;
- }
- if (this.location) {
- auction.geoTargeting = {
- location: this.location,
- };
- }
- const token = window.TS.token;
- const url = window.TS.url || "https://api.topsort.com";
- const res = await fetch(new URL(`${url}/v2/auctions`), {
- method: "POST",
- mode: "cors",
- headers: {
- Authorization: `Bearer ${token}`,
- "Content-Type": "application/json",
- "X-UA": `topsort/banners-${import.meta.env.PACKAGE_VERSION} (${device}})`,
- },
- body: JSON.stringify({
- auctions: [auction],
- }),
- });
- if (res.ok) {
- const data = await res.json();
- const result = data.results[0];
- if (result) {
- if (result.error) {
- logError(result.error);
- this.setState({
- status: "errored",
- error: Error("Unknown Error"),
- });
- } else if (result.winners[0]) {
- const winner = result.winners[0];
- this.setState({
- status: "ready",
- banner: winner,
- });
- } else {
- this.setState({
- status: "nowinners",
- });
- }
- }
- } else {
- const error = await res.json();
- logError(error);
- this.setState({
- status: "errored",
- error: new TopsortRequestError(error.message, res.status),
- });
- }
- } catch (err) {
- logError(err);
- if (err instanceof Error) {
- this.setState({
- status: "errored",
- error: err,
- });
- } else {
- this.setState({
- status: "errored",
- error: Error("Unknown Error"),
- });
- }
+ } else if (this.categoryIds) {
+ auction.category = {
+ ids: this.categoryIds.split(",").map((item) => item.trim()),
+ };
+ } else if (this.categoryDisjunctions) {
+ auction.category = {
+ disjunctions: [this.categoryDisjunctions.split(",").map((item) => item.trim())],
+ };
+ } else if (this.searchQuery) {
+ auction.searchQuery = this.searchQuery;
}
+ if (this.location) {
+ auction.geoTargeting = {
+ location: this.location,
+ };
+ }
+ return auction;
}
- // Runs when DOM is loaded. Much like React's `getInitialProps`
- connectedCallback() {
- super.connectedCallback();
- this.runAuction();
+ private async runAuction(
+ [auction]: Auction[],
+ { signal }: { signal: AbortSignal },
+ ): Promise
{
+ const device = getDeviceType();
+ const token = window.TS.token;
+ const url = window.TS.url || "https://api.topsort.com";
+ const res = await fetch(new URL(`${url}/v2/auctions`), {
+ method: "POST",
+ mode: "cors",
+ headers: {
+ Authorization: `Bearer ${token}`,
+ "Content-Type": "application/json",
+ "X-UA": `topsort/banners-${import.meta.env.PACKAGE_VERSION} (${device}})`,
+ },
+ body: JSON.stringify({
+ auctions: [auction],
+ }),
+ signal,
+ });
+ if (!res.ok) {
+ const error = await res.json();
+ logError(error);
+ throw new Error(error.message);
+ }
+ const data = await res.json();
+ const result = data.results[0];
+ if (!result) throw new TopsortRequestError("No auction results", res.status);
+ if (result.error) {
+ logError(result.error);
+ throw new Error(result.error);
+ }
+ if (result.winners.length) {
+ return {
+ status: "ready",
+ banners: result.winners,
+ };
+ }
+ return {
+ status: "nowinners",
+ };
}
protected render() {
if (!window.TS.token || !this.slotId) {
return this.getErrorElement(new TopsortConfigurationError(window.TS.token, this.slotId));
}
- switch (this.state.status) {
- case "ready":
- return this.getBannerElement(this.state.banner);
- case "nowinners":
- return this.getNoWinnersElement();
- case "loading":
- return this.getLoadingElement();
- case "errored":
- return this.getErrorElement(this.state.error);
- }
+ return this.task.render({
+ pending: () => this.getLoadingElement(),
+ complete: (value) => {
+ this.emitEvent(value.status);
+ if (value.status === "nowinners") {
+ return this.getNoWinnersElement();
+ }
+ return this.getBannerElement(value.banners[0]);
+ },
+ error: (error) => this.getErrorElement(error),
+ });
}
// avoid shadow dom since we cannot attach to events via analytics.js
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..28b88f2
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,34 @@
+export interface NoWinners {
+ status: "nowinners";
+}
+
+export interface Ready {
+ status: "ready";
+ banners: Banner[];
+}
+
+export interface Auction {
+ type: "banners";
+ slots: 1;
+ device: "mobile" | "desktop";
+ slotId: string;
+ category?: {
+ id?: string;
+ ids?: string[];
+ disjunctions?: string[][];
+ };
+ geoTargeting?: {
+ location: string;
+ };
+ searchQuery?: string;
+}
+
+/** The banner object returned from the auction request */
+export interface Banner {
+ type: "product" | "vendor" | "brand" | "url";
+ id: string;
+ resolvedBidId: string;
+ asset: [{ url: string }];
+}
+
+export type BannerState = NoWinners | Ready;