diff --git a/apps/web/package.json b/apps/web/package.json index 3bebdc0bb..3c3eff92c 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -7,6 +7,7 @@ "homepage": "https://notesnook.com/", "repository": "https://github.com/streetwriters/notesnook", "dependencies": { + "@brixtol/currency-symbols": "^1.1.1", "@mdi/js": "^6.5.95", "@mdi/react": "^1.4.0", "@notesnook/crypto": "^1.0.0", @@ -20,7 +21,6 @@ "clipboard-polyfill": "^3.0.3", "cogo-toast": "^4.2.3", "compressorjs": "^1.0.7", - "currency-symbol-map": "^5.0.1", "dayjs": "^1.10.4", "emotion-theming": "^10.0.19", "event-source-polyfill": "^1.0.25", diff --git a/apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx b/apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx index 136f4c6ef..034c7329b 100644 --- a/apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx +++ b/apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx @@ -3,7 +3,6 @@ import { Text, Flex, Button } from "rebass"; import * as Icon from "../../icons"; import { useStore as useUserStore } from "../../../stores/user-store"; import { useStore as useThemeStore } from "../../../stores/theme-store"; -import getSymbolFromCurrency from "currency-symbol-map"; import Modal from "react-modal"; import { useTheme } from "emotion-theming"; import { ReactComponent as Rocket } from "../../../assets/rocket.svg"; @@ -20,6 +19,7 @@ import { showToast } from "../../../utils/toast"; import { TaskManager } from "../../../common/task-manager"; import { db } from "../../../common/db"; import { useCheckoutStore } from "./store"; +import { getCurrencySymbol } from "./helpers"; type BuyDialogProps = { couponCode?: string; @@ -251,7 +251,7 @@ function TrialOrUpgrade(props: TrialOrUpgradeProps) { ) : ( - Starting from {getSymbolFromCurrency(plan.currency)} + Starting from {getCurrencySymbol(plan.currency)} {plan.price.gross} {formatPeriod(plan.period)} @@ -523,7 +523,7 @@ function formatPrice( negative = false ) { const formattedPeriod = period ? formatPeriod(period) : ""; - const currencySymbol = getSymbolFromCurrency(currency); + const currencySymbol = getCurrencySymbol(currency); const prefix = negative ? "-" : ""; return `${prefix}${currencySymbol}${price}${formattedPeriod}`; } diff --git a/apps/web/src/components/dialogs/buy-dialog/helpers.ts b/apps/web/src/components/dialogs/buy-dialog/helpers.ts new file mode 100644 index 000000000..0523f46a7 --- /dev/null +++ b/apps/web/src/components/dialogs/buy-dialog/helpers.ts @@ -0,0 +1,8 @@ +import { + getCurrencySymbol as _getSymbol, + ICurrencySymbols, +} from "@brixtol/currency-symbols"; + +export function getCurrencySymbol(currency: string) { + return _getSymbol(currency as keyof ICurrencySymbols) || currency; +} diff --git a/apps/web/src/components/dialogs/buy-dialog/plan-list.tsx b/apps/web/src/components/dialogs/buy-dialog/plan-list.tsx index 4221fd31a..8e6f8ee9d 100644 --- a/apps/web/src/components/dialogs/buy-dialog/plan-list.tsx +++ b/apps/web/src/components/dialogs/buy-dialog/plan-list.tsx @@ -1,10 +1,10 @@ import { Text, Flex, Button } from "rebass"; import * as Icon from "../../icons"; -import getSymbolFromCurrency from "currency-symbol-map"; import { ReactComponent as Nomad } from "../../../assets/nomad.svg"; import { Period, Plan } from "./types"; import { PLAN_METADATA, usePlans } from "./plans"; import { useEffect } from "react"; +import { getCurrencySymbol } from "./helpers"; type PlansListProps = { onPlanSelected: (plan: Plan) => void; @@ -92,13 +92,13 @@ function RecurringPricing(props: RecurringPricingProps) { fontSize={"body"} sx={{ textDecorationLine: "line-through" }} > - {getSymbolFromCurrency(plan.currency)} + {getCurrencySymbol(plan.currency)} {plan.originalPrice.gross} )} - {getSymbolFromCurrency(plan.currency)} + {getCurrencySymbol(plan.currency)} {plan.price.gross} {formatPeriod(plan.period)}