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 = [
|
export const COUNTRIES = [
|
||||||
{ countryCode: "ww", currencyCode: "usd" },
|
{ countryCode: "ww", countryName: "Worldwide", currencyCode: "usd" },
|
||||||
{ countryCode: "ca", currencyCode: "cad" },
|
{ countryCode: "ca", countryName: "Canada", currencyCode: "cad" },
|
||||||
{ countryCode: "us", currencyCode: "usd" },
|
{ countryCode: "us", countryName: "United States", currencyCode: "usd" },
|
||||||
{ countryCode: "in", currencyCode: "inr" },
|
{ countryCode: "in", countryName: "India", currencyCode: "inr" },
|
||||||
{ countryCode: "za", currencyCode: "zar" },
|
{ countryCode: "za", countryName: "South Africa", currencyCode: "zar" },
|
||||||
{ countryCode: "au", currencyCode: "aud" },
|
{ countryCode: "au", countryName: "Australia", currencyCode: "aud" },
|
||||||
{ countryCode: "hk", currencyCode: "hkd" },
|
{ countryCode: "hk", countryName: "Hong Kong", currencyCode: "hkd" },
|
||||||
{ countryCode: "jp", currencyCode: "jpy" },
|
{ countryCode: "jp", countryName: "Japan", currencyCode: "jpy" },
|
||||||
{ countryCode: "my", currencyCode: "myr" },
|
{ countryCode: "my", countryName: "Malaysia", currencyCode: "myr" },
|
||||||
{ countryCode: "nz", currencyCode: "nzd" },
|
{ countryCode: "nz", countryName: "New Zealand", currencyCode: "nzd" },
|
||||||
{ countryCode: "ph", currencyCode: "php" },
|
{ countryCode: "ph", countryName: "Philippines", currencyCode: "php" },
|
||||||
{ countryCode: "sg", currencyCode: "sgd" },
|
{ countryCode: "sg", countryName: "Singapore", currencyCode: "sgd" },
|
||||||
{ countryCode: "tw", currencyCode: "twd" },
|
{ countryCode: "tw", countryName: "Taiwan", currencyCode: "twd" },
|
||||||
{ countryCode: "th", currencyCode: "usd" },
|
{ countryCode: "th", countryName: "Thailand", currencyCode: "usd" },
|
||||||
{ countryCode: "at", currencyCode: "eur" },
|
{ countryCode: "at", countryName: "Austria", currencyCode: "eur" },
|
||||||
{ countryCode: "be", currencyCode: "eur" },
|
{ countryCode: "be", countryName: "Belgium", currencyCode: "eur" },
|
||||||
{ countryCode: "cy", currencyCode: "eur" },
|
{ countryCode: "cy", countryName: "Cyprus", currencyCode: "eur" },
|
||||||
{ countryCode: "cz", currencyCode: "czk" },
|
{ countryCode: "cz", countryName: "Czech Republic", currencyCode: "czk" },
|
||||||
{ countryCode: "dk", currencyCode: "dkk" },
|
{ countryCode: "dk", countryName: "Denmark", currencyCode: "dkk" },
|
||||||
{ countryCode: "ee", currencyCode: "eur" },
|
{ countryCode: "ee", countryName: "Estonia", currencyCode: "eur" },
|
||||||
{ countryCode: "fi", currencyCode: "eur" },
|
{ countryCode: "fi", countryName: "Finland", currencyCode: "eur" },
|
||||||
{ countryCode: "fr", currencyCode: "eur" },
|
{ countryCode: "fr", countryName: "France", currencyCode: "eur" },
|
||||||
{ countryCode: "de", currencyCode: "eur" },
|
{ countryCode: "de", countryName: "Germany", currencyCode: "eur" },
|
||||||
{ countryCode: "gr", currencyCode: "eur" },
|
{ countryCode: "gr", countryName: "Greece", currencyCode: "eur" },
|
||||||
{ countryCode: "ie", currencyCode: "eur" },
|
{ countryCode: "ie", countryName: "Ireland", currencyCode: "eur" },
|
||||||
{ countryCode: "it", currencyCode: "eur" },
|
{ countryCode: "it", countryName: "Italy", currencyCode: "eur" },
|
||||||
{ countryCode: "lt", currencyCode: "eur" },
|
{ countryCode: "lt", countryName: "Lithuania", currencyCode: "eur" },
|
||||||
{ countryCode: "lu", currencyCode: "eur" },
|
{ countryCode: "lu", countryName: "Luxembourg", currencyCode: "eur" },
|
||||||
{ countryCode: "mt", currencyCode: "eur" },
|
{ countryCode: "mt", countryName: "Malta", currencyCode: "eur" },
|
||||||
{ countryCode: "nl", currencyCode: "eur" },
|
{ countryCode: "nl", countryName: "Netherlands", currencyCode: "eur" },
|
||||||
{ countryCode: "no", currencyCode: "nok" },
|
{ countryCode: "no", countryName: "Norway", currencyCode: "nok" },
|
||||||
{ countryCode: "pl", currencyCode: "pln" },
|
{ countryCode: "pl", countryName: "Poland", currencyCode: "pln" },
|
||||||
{ countryCode: "pt", currencyCode: "eur" },
|
{ countryCode: "pt", countryName: "Portugal", currencyCode: "eur" },
|
||||||
{ countryCode: "ro", currencyCode: "ron" },
|
{ countryCode: "ro", countryName: "Romania", currencyCode: "ron" },
|
||||||
{ countryCode: "sk", currencyCode: "eur" },
|
{ countryCode: "sk", countryName: "Slovakia", currencyCode: "eur" },
|
||||||
{ countryCode: "si", currencyCode: "eur" },
|
{ countryCode: "si", countryName: "Slovenia", currencyCode: "eur" },
|
||||||
{ countryCode: "es", currencyCode: "eur" },
|
{ countryCode: "es", countryName: "Spain", currencyCode: "eur" },
|
||||||
{ countryCode: "se", currencyCode: "sek" },
|
{ countryCode: "se", countryName: "Sweden", currencyCode: "sek" },
|
||||||
{ countryCode: "ch", currencyCode: "chf" },
|
{ countryCode: "ch", countryName: "Switzerland", currencyCode: "chf" },
|
||||||
{ countryCode: "tr", currencyCode: "try" },
|
{ countryCode: "tr", countryName: "Turkey", currencyCode: "try" },
|
||||||
{ countryCode: "gb", currencyCode: "gbp" },
|
{ countryCode: "gb", countryName: "United Kingdom", currencyCode: "gbp" },
|
||||||
{ countryCode: "ar", currencyCode: "usd" },
|
{ countryCode: "ar", countryName: "Argentina", currencyCode: "usd" },
|
||||||
{ countryCode: "br", currencyCode: "brl" },
|
{ countryCode: "br", countryName: "Brazil", currencyCode: "brl" },
|
||||||
{ countryCode: "cl", currencyCode: "clp" },
|
{ countryCode: "cl", countryName: "Chile", currencyCode: "clp" },
|
||||||
{ countryCode: "co", currencyCode: "cop" },
|
{ countryCode: "co", countryName: "Colombia", currencyCode: "cop" },
|
||||||
{ countryCode: "mx", currencyCode: "mxn" },
|
{ countryCode: "mx", countryName: "Mexico", currencyCode: "mxn" },
|
||||||
{ countryCode: "pe", currencyCode: "pen" },
|
{ 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 Price = ({ price, toggleCountry, isSelected }) => {
|
||||||
const { convertedPrice, countryCode, countryPrice } = price;
|
const { convertedPrice, countryCode, countryName, countryPrice } = price;
|
||||||
const [isHovered, setHover] = useState(false);
|
const [isHovered, setHover] = useState(false);
|
||||||
|
|
||||||
const hover = useCallback(() => setHover(true));
|
const hover = useCallback(() => setHover(true));
|
||||||
const leave = useCallback(() => setHover(false));
|
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 = {
|
const style = {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
backgroundColor: isHovered ? "#d7d7d7" : "",
|
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", {
|
const checkbox = h("input", {
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
checked: isSelected,
|
checked: isSelected,
|
||||||
onChange: () => toggleCountry(),
|
onChange: () => toggleCountry(),
|
||||||
|
onClick: (e) => e.stopPropagation(),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const nameLabel = h(
|
||||||
|
"span",
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
marginLeft: "8px",
|
||||||
|
textDecoration: isHovered ? "underline" : "none",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
countryName || countryCode.toUpperCase(),
|
||||||
|
);
|
||||||
|
|
||||||
const priceLabel = h(
|
const priceLabel = h(
|
||||||
"p",
|
"p",
|
||||||
{ style: { fontWeight: "bold" } },
|
{ style: { fontWeight: "bold", marginLeft: "auto" } },
|
||||||
formatPrice(countryPrice, convertedPrice, isSelected),
|
formatPrice(countryPrice, convertedPrice, isSelected),
|
||||||
);
|
);
|
||||||
|
|
||||||
return h(
|
return h(
|
||||||
"label",
|
"div",
|
||||||
{ style, onMouseEnter: hover, onMouseLeave: leave },
|
{
|
||||||
h("div", { style: { display: "flex" } }, checkbox, link),
|
style,
|
||||||
|
onMouseEnter: hover,
|
||||||
|
onMouseLeave: leave,
|
||||||
|
onClick: openLink,
|
||||||
|
},
|
||||||
|
checkbox,
|
||||||
|
nameLabel,
|
||||||
priceLabel,
|
priceLabel,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue