readable countries
This commit is contained in:
parent
6d61a34503
commit
78c08be6b8
2 changed files with 78 additions and 63 deletions
|
|
@ -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" },
|
||||
];
|
||||
|
|
|
|||
47
lib/index.js
47
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,
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue