From f1b4cb9c419f2132c3ba38f08bdaad951c46a683 Mon Sep 17 00:00:00 2001
From: supalarry <lauris.skraucis@gmail.com>
Date: Tue, 26 Sep 2023 17:00:52 +0200
Subject: [PATCH] fix: dynamic currency symbols

---
 .../components/EventTypeAppCardInterface.tsx  | 12 +++++--
 .../app-store/paypal/lib/currencyOptions.ts   | 36 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 3 deletions(-)

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({
                 <TextField
                   label="Price"
                   labelSrOnly
-                  addOnLeading="$"
+                  addOnLeading={currencySymbol}
                   addOnSuffix={currency}
                   step="0.01"
                   min="0.5"
@@ -82,6 +89,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
                   onChange={(e) => {
                     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<CurrencyCode, string> = {
+  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);
+}