From 78c08be6b899cd37af4e32cdfee8e8273d39b210 Mon Sep 17 00:00:00 2001 From: Greg Date: Sat, 4 Jul 2026 23:21:18 +0300 Subject: [PATCH] readable countries --- lib/countries.js | 94 ++++++++++++++++++++++++------------------------ lib/index.js | 47 +++++++++++++++--------- 2 files changed, 78 insertions(+), 63 deletions(-) diff --git a/lib/countries.js b/lib/countries.js index 5f9836b..7f29da5 100644 --- a/lib/countries.js +++ b/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" }, ]; diff --git a/lib/index.js b/lib/index.js index 918106d..be055c1 100644 --- a/lib/index.js +++ b/lib/index.js @@ -33,47 +33,62 @@ const formatPrice = (countryPrice, convertedPrice, isSelected) => { }; const Price = ({ price, toggleCountry, isSelected }) => { - const { convertedPrice, countryCode, countryPrice } = price; + const { convertedPrice, countryCode, countryName, countryPrice } = price; const [isHovered, setHover] = useState(false); const hover = useCallback(() => setHover(true)); const leave = useCallback(() => setHover(false)); + const openLink = useCallback((e) => { + // Don't open if the click was on the checkbox + if (e.target.type === "checkbox") return; + window.open(bookUrl(countryCode), "_blank"); + }); + const style = { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", backgroundColor: isHovered ? "#d7d7d7" : "", - padding: "0 10px", + padding: "4px 10px", + cursor: "pointer", }; - const link = h( - "a", - { - style: { textDecoration: "underline" }, - href: bookUrl(countryCode), - target: "_blank", - }, - countryCode.toUpperCase(), - ); - const checkbox = h("input", { type: "checkbox", checked: isSelected, onChange: () => toggleCountry(), + onClick: (e) => e.stopPropagation(), }); + const nameLabel = h( + "span", + { + style: { + marginLeft: "8px", + textDecoration: isHovered ? "underline" : "none", + }, + }, + countryName || countryCode.toUpperCase(), + ); + const priceLabel = h( "p", - { style: { fontWeight: "bold" } }, + { style: { fontWeight: "bold", marginLeft: "auto" } }, formatPrice(countryPrice, convertedPrice, isSelected), ); return h( - "label", - { style, onMouseEnter: hover, onMouseLeave: leave }, - h("div", { style: { display: "flex" } }, checkbox, link), + "div", + { + style, + onMouseEnter: hover, + onMouseLeave: leave, + onClick: openLink, + }, + checkbox, + nameLabel, priceLabel, ); };