@ait-co/devtools 0.1.6 → 0.1.8

package/dist/panel/index.js

@@ -71,7 +71,9 @@ const DEFAULT_STATE = {
 	},
 	ads: {
 		isLoaded: false,
-		nextEvent: "loaded"
+		nextEvent: "loaded",
+		forceNoFill: false,
+		lastEvent: null
 	},
 	game: {
 		profile: {
@@ -1335,6 +1337,192 @@ function renderDeviceTab() {
 	return container;
 }
 //#endregion
+//#region src/mock/ads/index.ts
+/**
+* 광고 mock (GoogleAdMob, TossAds, FullScreenAd)
+*/
+function withIsSupported(fn) {
+	fn.isSupported = () => true;
+	return fn;
+}
+const GoogleAdMob = createMockProxy("GoogleAdMob", {
+	loadAppsInTossAdMob: withIsSupported((args) => {
+		setTimeout(() => {
+			if (aitState.state.ads.forceNoFill) {
+				args.onError(/* @__PURE__ */ new Error("No fill"));
+				return;
+			}
+			aitState.patch("ads", { isLoaded: true });
+			args.onEvent({
+				type: "loaded",
+				data: { adGroupId: args.options?.adGroupId }
+			});
+		}, 200);
+		return () => {};
+	}),
+	showAppsInTossAdMob: withIsSupported((args) => {
+		if (!aitState.state.ads.isLoaded) {
+			args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
+			return () => {};
+		}
+		setTimeout(() => args.onEvent({ type: "requested" }), 50);
+		setTimeout(() => args.onEvent({ type: "show" }), 100);
+		setTimeout(() => args.onEvent({ type: "impression" }), 150);
+		setTimeout(() => {
+			args.onEvent({
+				type: "userEarnedReward",
+				data: {
+					unitType: "coins",
+					unitAmount: 10
+				}
+			});
+		}, 1e3);
+		setTimeout(() => {
+			args.onEvent({ type: "dismissed" });
+			aitState.patch("ads", { isLoaded: false });
+		}, 1500);
+		return () => {};
+	}),
+	isAppsInTossAdMobLoaded: withIsSupported(async (_options) => aitState.state.ads.isLoaded)
+});
+createMockProxy("TossAds", {
+	initialize: withIsSupported((_options) => {
+		console.log("[@ait-co/devtools] TossAds.initialize (mock)");
+	}),
+	attach: withIsSupported((_adGroupId, target, _options) => {
+		const el = typeof target === "string" ? document.querySelector(target) : target;
+		if (el) {
+			const placeholder = document.createElement("div");
+			placeholder.style.cssText = "background:#f0f0f0;border:1px dashed #999;padding:16px;text-align:center;color:#666;font-size:14px;";
+			placeholder.textContent = "[@ait-co/devtools] TossAds Placeholder";
+			el.appendChild(placeholder);
+		}
+	}),
+	attachBanner: withIsSupported((_adGroupId, target, _options) => {
+		const el = typeof target === "string" ? document.querySelector(target) : target;
+		if (el) {
+			const placeholder = document.createElement("div");
+			placeholder.style.cssText = "background:#f0f0f0;border:1px dashed #999;padding:12px;text-align:center;color:#666;font-size:12px;";
+			placeholder.textContent = "[@ait-co/devtools] Banner Ad Placeholder";
+			el.appendChild(placeholder);
+		}
+		return { destroy: () => {} };
+	}),
+	destroy: withIsSupported((_slotId) => {}),
+	destroyAll: withIsSupported(() => {})
+});
+const loadFullScreenAd = withIsSupported((args) => {
+	setTimeout(() => {
+		if (aitState.state.ads.forceNoFill) {
+			args.onError(/* @__PURE__ */ new Error("No fill"));
+			return;
+		}
+		aitState.patch("ads", { isLoaded: true });
+		args.onEvent({
+			type: "loaded",
+			data: { adGroupId: args.options?.adGroupId }
+		});
+	}, 200);
+	return () => {};
+});
+const showFullScreenAd = withIsSupported((args) => {
+	if (!aitState.state.ads.isLoaded) {
+		args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
+		return () => {};
+	}
+	setTimeout(() => args.onEvent({ type: "show" }), 100);
+	setTimeout(() => args.onEvent({ type: "dismissed" }), 1500);
+	return () => {};
+});
+//#endregion
+//#region src/panel/tabs/ads.ts
+function recordEvent(type) {
+	aitState.patch("ads", { lastEvent: {
+		type,
+		timestamp: Date.now()
+	} });
+}
+function recordError(message) {
+	recordEvent(`error: ${message}`);
+}
+function statusRow(label, value) {
+	return h("div", { className: "ait-row" }, h("label", {}, label), h("span", { style: "font-family:SF Mono,Menlo,monospace;font-size:11px;color:#aaa" }, value));
+}
+function lastEventLine() {
+	const last = aitState.state.ads.lastEvent;
+	if (!last) return h("div", { className: "ait-log-entry" }, h("span", { style: "color:#555" }, "No events yet"));
+	const time = new Date(last.timestamp).toLocaleTimeString();
+	return h("div", { className: "ait-log-entry" }, h("span", {
+		className: "ait-log-type",
+		style: last.type.startsWith("error:") ? "color:#e74c3c" : ""
+	}, last.type), h("span", { className: "ait-log-time" }, time));
+}
+function adSection(title, onLoad, onShow, disabled) {
+	const loadBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Load");
+	const showBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Show");
+	if (disabled) {
+		loadBtn.disabled = true;
+		showBtn.disabled = true;
+	}
+	loadBtn.addEventListener("click", onLoad);
+	showBtn.addEventListener("click", onShow);
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, title), h("div", { className: "ait-btn-row" }, loadBtn, showBtn));
+}
+function renderAdsTab() {
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	const forceNoFillCb = h("input", {
+		type: "checkbox",
+		className: "ait-checkbox"
+	});
+	forceNoFillCb.checked = s.ads.forceNoFill;
+	if (disabled) forceNoFillCb.disabled = true;
+	forceNoFillCb.addEventListener("change", () => {
+		aitState.patch("ads", { forceNoFill: forceNoFillCb.checked });
+	});
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Ads State"), statusRow("isLoaded", String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, "Force \"no fill\""), forceNoFillCb), lastEventLine()), adSection("GoogleAdMob", () => {
+		GoogleAdMob.loadAppsInTossAdMob({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, () => {
+		GoogleAdMob.showAppsInTossAdMob({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, disabled), adSection("TossAds", () => {
+		if (aitState.state.ads.forceNoFill) {
+			recordError("No fill");
+			return;
+		}
+		aitState.patch("ads", { isLoaded: true });
+		recordEvent("loaded");
+	}, () => {
+		if (!aitState.state.ads.isLoaded) {
+			recordError("Ad not loaded");
+			return;
+		}
+		recordEvent("show");
+		setTimeout(() => {
+			recordEvent("dismissed");
+			aitState.patch("ads", { isLoaded: false });
+		}, 1500);
+	}, disabled), adSection("FullScreenAd", () => {
+		loadFullScreenAd({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, () => {
+		showFullScreenAd({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, disabled));
+	return container;
+}
+//#endregion
 //#region src/panel/tabs/analytics.ts
 function renderAnalyticsTab() {
 	const disabled = !aitState.state.panelEditable;
@@ -1390,7 +1578,119 @@ function renderEventsTab() {
 	return container;
 }
 //#endregion
+//#region src/mock/iap/index.ts
+/**
+* IAP (인앱결제) mock
+*/
+let orderCounter = 0;
+function generateOrderId() {
+	return `mock-order-${++orderCounter}-${Date.now()}`;
+}
+function buildOrderResult(sku) {
+	const product = aitState.state.iap.products.find((p) => p.sku === sku);
+	const amountStr = product?.displayAmount?.replace(/[^0-9]/g, "") ?? "1000";
+	return {
+		orderId: generateOrderId(),
+		displayName: product?.displayName ?? "Mock Product",
+		displayAmount: product?.displayAmount ?? "1,000원",
+		amount: parseInt(amountStr, 10) || 1e3,
+		currency: "KRW",
+		fraction: 0,
+		miniAppIconUrl: product?.iconUrl || null
+	};
+}
+async function handlePurchase(sku, processProductGrant, onEvent, onError) {
+	const nextResult = aitState.state.iap.nextResult;
+	await new Promise((r) => setTimeout(r, 300));
+	if (nextResult !== "success") {
+		onError({ code: nextResult });
+		return;
+	}
+	const result = buildOrderResult(sku);
+	try {
+		if (!await processProductGrant({ orderId: result.orderId })) {
+			onError({ code: "PRODUCT_NOT_GRANTED_BY_PARTNER" });
+			return;
+		}
+	} catch (e) {
+		onError(e);
+		return;
+	}
+	aitState.patch("iap", { completedOrders: [...aitState.state.iap.completedOrders, {
+		orderId: result.orderId,
+		sku,
+		status: "COMPLETED",
+		date: (/* @__PURE__ */ new Date()).toISOString()
+	}] });
+	await onEvent({
+		type: "success",
+		data: result
+	});
+}
+const IAP = createMockProxy("IAP", {
+	createOneTimePurchaseOrder(params) {
+		handlePurchase(params.options.sku ?? params.options.productId ?? "", params.options.processProductGrant, params.onEvent, params.onError).catch((e) => console.error("[@ait-co/devtools] IAP unexpected error:", e));
+		return () => {};
+	},
+	createSubscriptionPurchaseOrder(params) {
+		handlePurchase(params.options.sku, params.options.processProductGrant, params.onEvent, params.onError).catch((e) => console.error("[@ait-co/devtools] IAP unexpected error:", e));
+		return () => {};
+	},
+	async getProductItemList() {
+		return { products: aitState.state.iap.products.map((p) => ({
+			...p,
+			...p.type === "SUBSCRIPTION" ? { renewalCycle: p.renewalCycle ?? "MONTHLY" } : {}
+		})) };
+	},
+	async getPendingOrders() {
+		return { orders: [...aitState.state.iap.pendingOrders] };
+	},
+	async getCompletedOrRefundedOrders() {
+		return {
+			hasNext: false,
+			nextKey: null,
+			orders: [...aitState.state.iap.completedOrders]
+		};
+	},
+	async completeProductGrant(args) {
+		const idx = aitState.state.iap.pendingOrders.findIndex((o) => o.orderId === args.params.orderId);
+		if (idx !== -1) {
+			const order = aitState.state.iap.pendingOrders[idx];
+			const pendingOrders = aitState.state.iap.pendingOrders.filter((_, i) => i !== idx);
+			const completedOrders = [...aitState.state.iap.completedOrders, {
+				orderId: order.orderId,
+				sku: order.sku,
+				status: "COMPLETED",
+				date: (/* @__PURE__ */ new Date()).toISOString()
+			}];
+			aitState.patch("iap", {
+				pendingOrders,
+				completedOrders
+			});
+		}
+		return true;
+	},
+	async getSubscriptionInfo(_args) {
+		return { subscription: {
+			catalogId: 1,
+			status: "ACTIVE",
+			expiresAt: new Date(Date.now() + 720 * 60 * 60 * 1e3).toISOString(),
+			isAutoRenew: true,
+			gracePeriodExpiresAt: null,
+			isAccessible: true
+		} };
+	}
+});
+//#endregion
 //#region src/panel/tabs/iap.ts
+function formatTimestamp(iso) {
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return iso;
+	return d.toLocaleTimeString();
+}
+function shortOrderId(orderId) {
+	return orderId.length > 12 ? `…${orderId.slice(-10)}` : orderId;
+}
 function renderIapTab() {
 	const s = aitState.state;
 	const disabled = !s.panelEditable;
@@ -1405,11 +1705,26 @@ function renderIapTab() {
 		"INTERNAL_ERROR"
 	];
 	if (disabled) container.appendChild(monitoringNotice());
+	const pendingOrders = s.iap.pendingOrders;
+	const pendingSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Pending Orders (${pendingOrders.length})`));
+	if (pendingOrders.length === 0) pendingSection.appendChild(h("div", { className: "ait-log-entry" }, "(no pending orders)"));
+	else for (const o of pendingOrders) {
+		const completeBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Complete");
+		if (disabled) completeBtn.disabled = true;
+		completeBtn.addEventListener("click", () => {
+			IAP.completeProductGrant({ params: { orderId: o.orderId } }).catch((err) => console.error("[@ait-co/devtools] completeProductGrant error:", err));
+		});
+		pendingSection.appendChild(h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, "PENDING"), `${o.sku} (${shortOrderId(o.orderId)}) · ${formatTimestamp(o.paymentCompletedDate)} `, completeBtn));
+	}
+	const completedOrders = s.iap.completedOrders;
+	const completedSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Completed Orders (${completedOrders.length})`));
+	if (completedOrders.length === 0) completedSection.appendChild(h("div", { className: "ait-log-entry" }, "(no completed orders)"));
+	else for (const o of completedOrders) completedSection.appendChild(h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, o.status), `${o.sku} (${shortOrderId(o.orderId)}) · ${formatTimestamp(o.date)}`));
 	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "IAP Simulator"), selectRow("Next Purchase Result", results, s.iap.nextResult, (v) => {
 		aitState.patch("iap", { nextResult: v });
 	}, disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "TossPay"), selectRow("Next Payment Result", ["success", "fail"], s.payment.nextResult, (v) => {
 		aitState.patch("payment", { nextResult: v });
-	}, disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Completed Orders (${s.iap.completedOrders.length})`), ...s.iap.completedOrders.slice(-5).map((o) => h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, o.status), `${o.sku} (${o.orderId.slice(-8)})`))));
+	}, disabled)), pendingSection, completedSection);
 	return container;
 }
 //#endregion
@@ -2154,6 +2469,10 @@ const TABS = [
 		id: "iap",
 		label: "IAP"
 	},
+	{
+		id: "ads",
+		label: "Ads"
+	},
 	{
 		id: "events",
 		label: "Events"
@@ -2175,6 +2494,7 @@ function createTabRenderers(refreshPanel) {
 		device: renderDeviceTab,
 		viewport: renderViewportTab,
 		iap: renderIapTab,
+		ads: renderAdsTab,
 		events: renderEventsTab,
 		analytics: renderAnalyticsTab,
 		storage: () => renderStorageTab(refreshPanel)
@@ -2375,7 +2695,7 @@ function mount() {
 		mockBadge.textContent = aitState.state.panelEditable ? "EDIT" : "READ-ONLY";
 		refreshPanel();
 	});
-	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.6`), closeBtn);
+	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.8`), closeBtn);
 	const header = h("div", { className: "ait-panel-header" }, h("span", {}, "AIT DevTools"), headerRight);
 	tabsEl = h("div", { className: "ait-panel-tabs" });
 	for (const tab of TABS) {
@@ -2414,7 +2734,7 @@ function mount() {
 	});
 	aitState.subscribe(() => {
 		try {
-			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport")) refreshPanel();
+			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap" || currentTab === "ads")) refreshPanel();
 		} catch (err) {
 			console.error("[@ait-co/devtools] Error in subscribe callback:", err);
 		}