lib/countries.js

@@ -1,49 +1,49 @@
 export const COUNTRIES = [
-  { countryCode: "ww", countryName: "Worldwide", currencyCode: "usd" },
-  { countryCode: "ca", countryName: "Canada", currencyCode: "cad" },
-  { countryCode: "us", countryName: "United States", currencyCode: "usd" },
-  { countryCode: "in", countryName: "India", currencyCode: "inr" },
-  { countryCode: "za", countryName: "South Africa", currencyCode: "zar" },
-  { countryCode: "au", countryName: "Australia", currencyCode: "aud" },
-  { countryCode: "hk", countryName: "Hong Kong", currencyCode: "hkd" },
-  { countryCode: "jp", countryName: "Japan", currencyCode: "jpy" },
-  { countryCode: "my", countryName: "Malaysia", currencyCode: "myr" },
-  { countryCode: "nz", countryName: "New Zealand", currencyCode: "nzd" },
-  { countryCode: "ph", countryName: "Philippines", currencyCode: "php" },
-  { countryCode: "sg", countryName: "Singapore", currencyCode: "sgd" },
-  { countryCode: "tw", countryName: "Taiwan", currencyCode: "twd" },
-  { countryCode: "th", countryName: "Thailand", currencyCode: "usd" },
-  { countryCode: "at", countryName: "Austria", currencyCode: "eur" },
-  { countryCode: "be", countryName: "Belgium", currencyCode: "eur" },
-  { countryCode: "cy", countryName: "Cyprus", currencyCode: "eur" },
-  { countryCode: "cz", countryName: "Czech Republic", currencyCode: "czk" },
-  { countryCode: "dk", countryName: "Denmark", currencyCode: "dkk" },
-  { countryCode: "ee", countryName: "Estonia", currencyCode: "eur" },
-  { countryCode: "fi", countryName: "Finland", currencyCode: "eur" },
-  { countryCode: "fr", countryName: "France", currencyCode: "eur" },
-  { countryCode: "de", countryName: "Germany", currencyCode: "eur" },
-  { countryCode: "gr", countryName: "Greece", currencyCode: "eur" },
-  { countryCode: "ie", countryName: "Ireland", currencyCode: "eur" },
-  { countryCode: "it", countryName: "Italy", currencyCode: "eur" },
-  { countryCode: "lt", countryName: "Lithuania", currencyCode: "eur" },
-  { countryCode: "lu", countryName: "Luxembourg", currencyCode: "eur" },
-  { countryCode: "mt", countryName: "Malta", currencyCode: "eur" },
-  { countryCode: "nl", countryName: "Netherlands", currencyCode: "eur" },
-  { countryCode: "no", countryName: "Norway", currencyCode: "nok" },
-  { countryCode: "pl", countryName: "Poland", currencyCode: "pln" },
-  { countryCode: "pt", countryName: "Portugal", currencyCode: "eur" },
-  { countryCode: "ro", countryName: "Romania", currencyCode: "ron" },
-  { countryCode: "sk", countryName: "Slovakia", currencyCode: "eur" },
-  { countryCode: "si", countryName: "Slovenia", currencyCode: "eur" },
-  { countryCode: "es", countryName: "Spain", currencyCode: "eur" },
-  { countryCode: "se", countryName: "Sweden", currencyCode: "sek" },
-  { countryCode: "ch", countryName: "Switzerland", currencyCode: "chf" },
-  { countryCode: "tr", countryName: "Turkey", currencyCode: "try" },
-  { countryCode: "gb", countryName: "United Kingdom", currencyCode: "gbp" },
-  { countryCode: "ar", countryName: "Argentina", currencyCode: "usd" },
-  { countryCode: "br", countryName: "Brazil", currencyCode: "brl" },
-  { countryCode: "cl", countryName: "Chile", currencyCode: "clp" },
-  { countryCode: "co", countryName: "Colombia", currencyCode: "cop" },
-  { countryCode: "mx", countryName: "Mexico", currencyCode: "mxn" },
-  { countryCode: "pe", countryName: "Peru", currencyCode: "pen" },
+  { countryCode: "ww", currencyCode: "usd" },
+  { countryCode: "ca", currencyCode: "cad" },
+  { countryCode: "us", currencyCode: "usd" },
+  { countryCode: "in", currencyCode: "inr" },
+  { countryCode: "za", currencyCode: "zar" },
+  { countryCode: "au", currencyCode: "aud" },
+  { countryCode: "hk", currencyCode: "hkd" },
+  { countryCode: "jp", currencyCode: "jpy" },
+  { countryCode: "my", currencyCode: "myr" },
+  { countryCode: "nz", currencyCode: "nzd" },
+  { countryCode: "ph", currencyCode: "php" },
+  { countryCode: "sg", currencyCode: "sgd" },
+  { countryCode: "tw", currencyCode: "twd" },
+  { countryCode: "th", currencyCode: "usd" },
+  { countryCode: "at", currencyCode: "eur" },
+  { countryCode: "be", currencyCode: "eur" },
+  { countryCode: "cy", currencyCode: "eur" },
+  { countryCode: "cz", currencyCode: "czk" },
+  { countryCode: "dk", currencyCode: "dkk" },
+  { countryCode: "ee", currencyCode: "eur" },
+  { countryCode: "fi", currencyCode: "eur" },
+  { countryCode: "fr", currencyCode: "eur" },
+  { countryCode: "de", currencyCode: "eur" },
+  { countryCode: "gr", currencyCode: "eur" },
+  { countryCode: "ie", currencyCode: "eur" },
+  { countryCode: "it", currencyCode: "eur" },
+  { countryCode: "lt", currencyCode: "eur" },
+  { countryCode: "lu", currencyCode: "eur" },
+  { countryCode: "mt", currencyCode: "eur" },
+  { countryCode: "nl", currencyCode: "eur" },
+  { countryCode: "no", currencyCode: "nok" },
+  { countryCode: "pl", currencyCode: "pln" },
+  { countryCode: "pt", currencyCode: "eur" },
+  { countryCode: "ro", currencyCode: "ron" },
+  { countryCode: "sk", currencyCode: "eur" },
+  { countryCode: "si", currencyCode: "eur" },
+  { countryCode: "es", currencyCode: "eur" },
+  { countryCode: "se", currencyCode: "sek" },
+  { countryCode: "ch", currencyCode: "chf" },
+  { countryCode: "tr", currencyCode: "try" },
+  { countryCode: "gb", currencyCode: "gbp" },
+  { countryCode: "ar", currencyCode: "usd" },
+  { countryCode: "br", currencyCode: "brl" },
+  { countryCode: "cl", currencyCode: "clp" },
+  { countryCode: "co", currencyCode: "cop" },
+  { countryCode: "mx", currencyCode: "mxn" },
+  { countryCode: "pe", currencyCode: "pen" },
 ];

lib/extractPrice.js

@@ -1,37 +1,13 @@
 const timeout = (duration) => new Promise((r) => setTimeout(r, duration));
 
-// Selectors for both old and new Kobo layouts
-const PRICE_SELECTORS = [
-	// Old layout (pre-2025 redesign)
-	".primary-right-container .pricing-details .active-price span",
-	// New layout (Tailwind, data-testid based)
-	'[data-testid="price"] .text-title-m-bold',
-];
-
-const findPrice = (page) => {
-	for (const sel of PRICE_SELECTORS) {
-		const el = page?.querySelector(sel);
-		if (el?.textContent?.trim()) {
-			return el.textContent.trim();
-		}
-	}
-	return null;
-};
-
 const observePriceOnPage = (page) =>
 	new Promise((res, rej) => {
 		timeout(5000).then(() => rej("price not found"));
 
-		// Check immediately first
-		const immediate = findPrice(page);
-		if (immediate) {
-			l("found price (immediate)", immediate);
-			res(immediate);
-			return;
-		}
-
-		const observer = new MutationObserver(() => {
-			const price = findPrice(page);
+		var observer = new MutationObserver(() => {
+			const price = page?.querySelector(
+				".primary-right-container .pricing-details .active-price span",
+			)?.textContent;
 
 			if (price) {
 				l("found price", price);

lib/index.js

@@ -12,11 +12,27 @@ TODO:
 - readme how to use and debug
 */
 
-const isInLibrary = () =>
-  // Old layout
-  document.querySelectorAll(".read-now").length > 0 ||
-  // New layout
-  document.querySelectorAll('[data-testid="buypad-readnow"]').length > 0;
+const createPricesContainer = () => {
+	const pricingActionContainers = document.querySelectorAll(".pricing-details");
+
+	l("all pricing containers", pricingActionContainers);
+
+	let visible;
+	for (const node of pricingActionContainers) {
+		if (node.checkVisibility()) {
+			l("found visible pricing container", node);
+			visible = node;
+			break;
+		}
+	}
+
+	return visible.parentNode.insertBefore(
+		document.createElement("div"),
+		visible,
+	);
+};
+
+const isInLibrary = () => document.querySelectorAll(".read-now").length;
 
 const formatPrice = (countryPrice, convertedPrice, isSelected) => {
 	if (!isSelected) return "SKIP";
@@ -33,7 +49,7 @@ const formatPrice = (countryPrice, convertedPrice, isSelected) => {
 };
 
 const Price = ({ price, toggleCountry, isSelected }) => {
-  const { convertedPrice, countryCode, countryName, countryPrice } = price;
+	const { convertedPrice, countryCode, countryPrice } = price;
 	const [isHovered, setHover] = useState(false);
 
 	const hover = useCallback(() => setHover(true));
@@ -45,36 +61,35 @@ const Price = ({ price, toggleCountry, isSelected }) => {
 		justifyContent: "space-between",
 		alignItems: "center",
 		backgroundColor: isHovered ? "#d7d7d7" : "",
-    padding: "4px 10px",
+		padding: "0 10px",
 	};
 
+	const link = h(
+		"a",
+		{
+			style: { textDecoration: "underline" },
+			href: bookUrl(countryCode),
+			target: "_blank",
+		},
+		countryCode.toUpperCase(),
+	);
+
 	const checkbox = h("input", {
 		type: "checkbox",
 		checked: isSelected,
 		onChange: () => toggleCountry(),
 	});
 
-  const link = h(
-    "a",
-    {
-      style: { textDecoration: "underline", marginLeft: "8px" },
-      href: bookUrl(countryCode),
-      target: "_blank",
-    },
-    countryName || countryCode.toUpperCase(),
-  );
-
 	const priceLabel = h(
 		"p",
-    { style: { fontWeight: "bold", marginLeft: "auto" } },
+		{ style: { fontWeight: "bold" } },
 		formatPrice(countryPrice, convertedPrice, isSelected),
 	);
 
 	return h(
 		"label",
 		{ style, onMouseEnter: hover, onMouseLeave: leave },
-    checkbox,
-    link,
+		h("div", { style: { display: "flex" } }, checkbox, link),
 		priceLabel,
 	);
 };
@@ -84,7 +99,9 @@ const InLibrary = () =>
 		"div",
 		{
 			style: {
-        padding: "10px",
+				display: "flex",
+				flexDirection: "column",
+				border: "1px solid black",
 				textAlign: "center",
 			},
 		},
@@ -138,7 +155,7 @@ const Header = (state, percentChecked) => {
 	return h(
 		"h2",
 		{ style: { textAlign: "center" } },
-    'Select countries or leave as is and press "Load prices"',
+		'Select countries or leave as is and press "load"',
 	);
 };
 
@@ -158,79 +175,22 @@ const Load = (state, load) => {
 const App = () => {
 	const { isSelected, toggleCountry, selected } = useSelectedCountries();
 	const { prices, percentChecked, state, load } = usePrices(selected);
-  const [expanded, setExpanded] = useState(false);
 
 	l(selected);
-
-  const toggle = useCallback(() => setExpanded((v) => !v));
-
-  if (isInLibrary()) {
-    return h(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          top: "10px",
-          left: "10px",
-          zIndex: 99999,
-          background: "white",
-          border: "1px solid black",
-          fontFamily: "sans-serif",
-          fontSize: "14px",
-        },
-      },
-      InLibrary(),
-    );
-  }
-
-  const panelStyle = {
-    position: "fixed",
-    bottom: "0",
-    left: "0",
-    zIndex: 99999,
-    background: "white",
-    border: "1px solid black",
-    fontFamily: "sans-serif",
-    fontSize: "14px",
-    maxHeight: expanded ? "100vh" : "auto",
-    overflowY: expanded ? "auto" : "hidden",
-    minWidth: "100%",
-  };
-
-  const buttonStyle = {
-    height: "2.25rem",
-    background: "white",
-    border: "1px solid black",
-    // padding: "6px 12px",
-    cursor: "pointer",
-    fontSize: "14px",
-    fontWeight: "bold",
-    width: "100%",
-  };
-
-  if (!expanded) {
-    return h(
-      "div",
-      { style: panelStyle },
-      h("button", { style: buttonStyle, onClick: toggle }, "PRICES"),
-    );
-  }
-
-  const listStyle = {
+	const style = {
 		display: "flex",
 		flexDirection: "column",
+		border: "1px solid black",
 	};
 
+	if (isInLibrary()) {
+		return InLibrary();
+	}
+
 	return h(
 		"div",
-    { style: panelStyle },
-    h("button", { style: buttonStyle, onClick: toggle }, "CLOSE"),
-    h(
-      "div",
-      { style: listStyle },
-      ...[
+		{ style },
 		Header(state, percentChecked),
-        Load(state, load),
 		...prices.map((price) =>
 			h(Price, {
 				price,
@@ -239,14 +199,10 @@ const App = () => {
 				isLoading: state,
 			}),
 		),
-      ],
-    ),
+		Load(state, load),
 	);
 };
 
 l("starting...");
 initCache();
-
-const container = document.createElement("div");
-document.body.appendChild(container);
-render(createElement(App), container);
+render(createElement(App), createPricesContainer());