diff --git a/packages/app-store/paypal/components/EventTypeAppCardInterface.tsx b/packages/app-store/paypal/components/EventTypeAppCardInterface.tsx index 0adc0ddcef..7dbed49b02 100644 --- a/packages/app-store/paypal/components/EventTypeAppCardInterface.tsx +++ b/packages/app-store/paypal/components/EventTypeAppCardInterface.tsx @@ -3,7 +3,11 @@ import { useState } from "react"; import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext"; import AppCard from "@calcom/app-store/_components/AppCard"; -import { currencyOptions } from "@calcom/app-store/paypal/lib/currencyOptions"; +import { + currencyOptions, + currencySymbols, + isAcceptedCurrencyCode, +} from "@calcom/app-store/paypal/lib/currencyOptions"; import type { EventTypeAppCardComponent } from "@calcom/app-store/types"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -22,6 +26,9 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ const currency = getAppData("currency") || defaultCurrency; const [selectedCurrency, setSelectedCurrency] = useState(currencyOptions.find((c) => c.value === currency)); + const [currencySymbol, setCurrencySymbol] = useState( + isAcceptedCurrencyCode(currency) ? currencySymbols[currency] : "" + ); const paymentOption = getAppData("paymentOption"); const paymentOptionSelectValue = paymentOptions?.find((option) => paymentOption === option.value) || { @@ -52,7 +59,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ { if (e) { setSelectedCurrency(e); + setCurrencySymbol(currencySymbols[e.value]); setAppData("currency", e.value); } }} diff --git a/packages/app-store/paypal/lib/currencyOptions.ts b/packages/app-store/paypal/lib/currencyOptions.ts index db80dc59f7..1f75f3cd3f 100644 --- a/packages/app-store/paypal/lib/currencyOptions.ts +++ b/packages/app-store/paypal/lib/currencyOptions.ts @@ -24,4 +24,38 @@ export const currencyOptions = [ { label: "Swedish krona", value: "SEK" }, { label: "Swiss franc", value: "CHF" }, { label: "Thai baht", value: "THB" }, -]; +] as const; + +type CurrencyCode = (typeof currencyOptions)[number]["value"]; + +export const currencySymbols: Record = { + USD: "$", + AUD: "$", + BRL: "R$", + CAD: "$", + CNY: "¥", + CZK: "Kč", + DKK: "kr", + EUR: "€", + HKD: "$", + HUF: "Ft", + ILS: "₪", + JPY: "¥", + MYR: "RM", + MXN: "$", + TWD: "$", + NZD: "$", + NOK: "kr", + PHP: "₱", + PLN: "zł", + GBP: "£", + RUB: "₽", + SGD: "$", + SEK: "kr", + CHF: "Fr", + THB: "฿", +}; + +export function isAcceptedCurrencyCode(currencyCode: string): currencyCode is CurrencyCode { + return Object.keys(currencySymbols).includes(currencyCode); +}