new userscript

lib/countries.js

@@ -1,49 +1,49 @@
 export const COUNTRIES = [
-  { 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" },
+  { 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" },
 ];

lib/extractPrice.js

@@ -1,13 +1,37 @@
 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"));
 
-		var observer = new MutationObserver(() => {
-			const price = page?.querySelector(
-				".primary-right-container .pricing-details .active-price span",
-			)?.textContent;
+		// 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);
 
 			if (price) {
 				l("found price", price);

lib/index.js

@@ -12,197 +12,241 @@ TODO:
 - readme how to use and debug
 */
 
-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 isInLibrary = () =>
+  // Old layout
+  document.querySelectorAll(".read-now").length > 0 ||
+  // New layout
+  document.querySelectorAll('[data-testid="buypad-readnow"]').length > 0;
 
 const formatPrice = (countryPrice, convertedPrice, isSelected) => {
-	if (!isSelected) return "SKIP";
+  if (!isSelected) return "SKIP";
 
-	if (countryPrice == undefined) {
-		return "NOT LOADED";
-	}
+  if (countryPrice == undefined) {
+    return "NOT LOADED";
+  }
 
-	if (convertedPrice) {
-		return `${countryPrice} => ${convertedPrice?.formatted}`;
-	}
+  if (convertedPrice) {
+    return `${countryPrice} => ${convertedPrice?.formatted}`;
+  }
 
-	return "NOT FOUND";
+  return "NOT FOUND";
 };
 
 const Price = ({ price, toggleCountry, isSelected }) => {
-	const { convertedPrice, countryCode, countryPrice } = price;
-	const [isHovered, setHover] = useState(false);
+  const { convertedPrice, countryCode, countryName, countryPrice } = price;
+  const [isHovered, setHover] = useState(false);
 
-	const hover = useCallback(() => setHover(true));
-	const leave = useCallback(() => setHover(false));
+  const hover = useCallback(() => setHover(true));
+  const leave = useCallback(() => setHover(false));
 
-	const style = {
-		display: "flex",
-		flexDirection: "row",
-		justifyContent: "space-between",
-		alignItems: "center",
-		backgroundColor: isHovered ? "#d7d7d7" : "",
-		padding: "0 10px",
-	};
+  const style = {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: isHovered ? "#d7d7d7" : "",
+    padding: "4px 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 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" } },
-		formatPrice(countryPrice, convertedPrice, isSelected),
-	);
+  const priceLabel = h(
+    "p",
+    { style: { fontWeight: "bold", marginLeft: "auto" } },
+    formatPrice(countryPrice, convertedPrice, isSelected),
+  );
 
-	return h(
-		"label",
-		{ style, onMouseEnter: hover, onMouseLeave: leave },
-		h("div", { style: { display: "flex" } }, checkbox, link),
-		priceLabel,
-	);
+  return h(
+    "label",
+    { style, onMouseEnter: hover, onMouseLeave: leave },
+    checkbox,
+    link,
+    priceLabel,
+  );
 };
 
 const InLibrary = () =>
-	h(
-		"div",
-		{
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				border: "1px solid black",
-				textAlign: "center",
-			},
-		},
-		h("h2", null, "Already in Library!"),
-	);
+  h(
+    "div",
+    {
+      style: {
+        padding: "10px",
+        textAlign: "center",
+      },
+    },
+    h("h2", null, "Already in Library!"),
+  );
 
 const Percent = (percent) => {
-	const spinner = useRef();
+  const spinner = useRef();
 
-	useEffect(() => {
-		spinner.current.animate(
-			[{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
-			{ iterations: Infinity, duration: 1000 },
-		);
-	}, []);
+  useEffect(() => {
+    spinner.current.animate(
+      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+      { iterations: Infinity, duration: 1000 },
+    );
+  }, []);
 
-	const style = { padding: "10px 10px 0 10px", textAlign: "center" };
+  const style = { padding: "10px 10px 0 10px", textAlign: "center" };
 
-	if (percent == 100) return h("h2", { style }, "all prices are loaded!");
+  if (percent == 100) return h("h2", { style }, "all prices are loaded!");
 
-	return h(
-		"h2",
-		{ style },
-		`${percent}%`,
-		h("span", {
-			ref: spinner,
-			style: {
-				width: "16px",
-				height: "16px",
-				borderRadius: "50%",
-				display: "inline-block",
-				borderTop: "3px solid black",
-				borderRight: "3px solid transparent",
-				boxSizing: "border-box",
-				marginLeft: "15px",
-			},
-		}),
-	);
+  return h(
+    "h2",
+    { style },
+    `${percent}%`,
+    h("span", {
+      ref: spinner,
+      style: {
+        width: "16px",
+        height: "16px",
+        borderRadius: "50%",
+        display: "inline-block",
+        borderTop: "3px solid black",
+        borderRight: "3px solid transparent",
+        boxSizing: "border-box",
+        marginLeft: "15px",
+      },
+    }),
+  );
 };
 
 const Header = (state, percentChecked) => {
-	if (state === "loading") return Percent(percentChecked);
+  if (state === "loading") return Percent(percentChecked);
 
-	if (state === "done")
-		return h(
-			"h2",
-			{ style: { textAlign: "center" } },
-			"All prices are loaded!",
-		);
+  if (state === "done")
+    return h(
+      "h2",
+      { style: { textAlign: "center" } },
+      "All prices are loaded!",
+    );
 
-	return h(
-		"h2",
-		{ style: { textAlign: "center" } },
-		'Select countries or leave as is and press "load"',
-	);
+  return h(
+    "h2",
+    { style: { textAlign: "center" } },
+    'Select countries or leave as is and press "Load prices"',
+  );
 };
 
 const Load = (state, load) => {
-	return h(
-		"button",
-		{
-			disabled: state === "loading",
-			onClick: load,
-			type: "button",
-			style: { backgroundColor: "#91ff91" },
-		},
-		state === "loading" ? "Loading..." : "Load prices",
-	);
+  return h(
+    "button",
+    {
+      disabled: state === "loading",
+      onClick: load,
+      type: "button",
+      style: { backgroundColor: "#91ff91" },
+    },
+    state === "loading" ? "Loading..." : "Load prices",
+  );
 };
 
 const App = () => {
-	const { isSelected, toggleCountry, selected } = useSelectedCountries();
-	const { prices, percentChecked, state, load } = usePrices(selected);
+  const { isSelected, toggleCountry, selected } = useSelectedCountries();
+  const { prices, percentChecked, state, load } = usePrices(selected);
+  const [expanded, setExpanded] = useState(false);
 
-	l(selected);
-	const style = {
-		display: "flex",
-		flexDirection: "column",
-		border: "1px solid black",
-	};
+  l(selected);
 
-	if (isInLibrary()) {
-		return InLibrary();
-	}
+  const toggle = useCallback(() => setExpanded((v) => !v));
 
-	return h(
-		"div",
-		{ style },
-		Header(state, percentChecked),
-		...prices.map((price) =>
-			h(Price, {
-				price,
-				toggleCountry: () => toggleCountry(price.countryCode),
-				isSelected: isSelected(price.countryCode),
-				isLoading: state,
-			}),
-		),
-		Load(state, load),
-	);
+  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 = {
+    display: "flex",
+    flexDirection: "column",
+  };
+
+  return h(
+    "div",
+    { style: panelStyle },
+    h("button", { style: buttonStyle, onClick: toggle }, "CLOSE"),
+    h(
+      "div",
+      { style: listStyle },
+      ...[
+        Header(state, percentChecked),
+        Load(state, load),
+        ...prices.map((price) =>
+          h(Price, {
+            price,
+            toggleCountry: () => toggleCountry(price.countryCode),
+            isSelected: isSelected(price.countryCode),
+            isLoading: state,
+          }),
+        ),
+      ],
+    ),
+  );
 };
 
 l("starting...");
 initCache();
-render(createElement(App), createPricesContainer());
+
+const container = document.createElement("div");
+document.body.appendChild(container);
+render(createElement(App), container);