From e213503acc0ac2e31435cec64ccbc33c1c18f06d Mon Sep 17 00:00:00 2001
From: Aabid Sofi <mailtoaabid01@gmail.com>
Date: Sat, 6 Sep 2025 17:58:16 +0530
Subject: [PATCH] add currency switcher in pricing page

Signed-off-by: Aabid Sofi <mailtoaabid01@gmail.com>
---
 src/components/Pricing/PlanCard/index.js      | 43 +++------
 src/components/Pricing/PricingAddons/index.js | 17 ++--
 src/sections/Pricing/index.js                 | 90 +++++++++++++------
 src/utils/currencies.js                       | 36 ++++++++
 4 files changed, 118 insertions(+), 68 deletions(-)
 create mode 100644 src/utils/currencies.js

diff --git a/src/components/Pricing/PlanCard/index.js b/src/components/Pricing/PlanCard/index.js
index 03b3a95cde718..b5929654ac268 100644
--- a/src/components/Pricing/PlanCard/index.js
+++ b/src/components/Pricing/PlanCard/index.js
@@ -3,9 +3,10 @@ import Button from "../../../reusecore/Button";
 import { Col, Row, Container } from "../../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
+import { Currencies, formatAndConvertPrice } from "../../../utils/currencies";
 
 
-const PlanCard = ({ planData , isYearly }) => {
+const PlanCard = ({ planData , isYearly ,currency }) => {
 
 
   if (!planData || !Array.isArray(planData) || planData.length === 0) {
@@ -18,6 +19,10 @@ const PlanCard = ({ planData , isYearly }) => {
     "Enterprise": "https://cloud.layer5.io/account/plans/upgrade?plan=ad68ce59-8c5a-42b0-955c-9b2b2f7c98e3"
   };
 
+    const formatPrice = (price) => {
+        return formatAndConvertPrice(price, currency)
+    };
+
   return (
     <PlanCardWrapper>
       <Container>
@@ -41,39 +46,17 @@ const PlanCard = ({ planData , isYearly }) => {
                 <h5 className="byline">{x.byline}</h5>
 
                 <div className="price-container">
-                  {isYearly ? (
-                    x.yearlyprice !== undefined ? (
+                  
                       <div className="price">
-                        <span className="price-amount"><sup>$</sup>
-                          {x.yearlyprice === 0
-                            ? "0"
-                            : x.yearlyprice.toFixed(0)}
+                        <span className="price-amount">
+                            {isYearly
+                                ? formatPrice(x.yearlyPrice)
+                                : formatPrice(x.monthlyPrice)}
                         </span>
-                        <span className="currency">USD</span>
+                        <span className="currency">{Currencies[currency]?.name ?? "USD" }  </span>
                         <span className="price-per">per user/year</span>
                       </div>
-                    ) : (
-                      <div className="pricing_coming_soon">
-                        {x.pricing_coming_soon}
-                      </div>
-                    )
-                  ) : (
-                    x.monthlyprice !== undefined ? (
-                      <div className="price">
-                        <span className="price-amount"><sup>$</sup>
-                          {x.monthlyprice === 0
-                            ? "0"
-                            : x.monthlyprice.toFixed(0)}
-                        </span>
-                        <span className="currency">USD</span>
-                        <span className="price-per">per user/month</span>
-                      </div>
-                    ) : (
-                      <div className="pricing_coming_soon">
-                        {x.pricing_coming_soon}
-                      </div>
-                    )
-                  )}
+                                
                 </div>
 
 
diff --git a/src/components/Pricing/PricingAddons/index.js b/src/components/Pricing/PricingAddons/index.js
index cb820a3168507..3bcd25d793e9c 100644
--- a/src/components/Pricing/PricingAddons/index.js
+++ b/src/components/Pricing/PricingAddons/index.js
@@ -7,8 +7,9 @@ import { getAddOns } from "./pricingData";
 import FeatureDetails from "../PlanCard/collapsible-details";
 import PlanCardWrapper from "../PlanCard/planCard.style";
 import Button from "../../../reusecore/Button";
+import { formatAndConvertPrice } from "../../../utils/currencies";
 
-export const PricingAddons = ({ isYearly = false, setIsYearly }) => {
+export const PricingAddons = ({ isYearly = false, setIsYearly ,currency }) => {
   const [selectedAddon, setSelectedAddon] = useState(null);
   // const [quantity, setQuantity] = useState(1);
   const quantity = 1;
@@ -23,6 +24,10 @@ export const PricingAddons = ({ isYearly = false, setIsYearly }) => {
     return theme ? getAddOns(theme) : [];
   }, [theme]);
 
+  const formatPrice = (price) => {
+      return formatAndConvertPrice(price, currency)
+  }
+
   useEffect(() => {
     if (selectedAddon) {
       let baseTotal = 0;
@@ -85,14 +90,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly }) => {
     }));
   };
 
-  const formatPrice = (price) => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(price);
-  };
 
   const getPlanLinkForAcademy = () => {
     if (!selectedAddon || selectedAddon.id !== "academy") {
@@ -600,4 +597,4 @@ export const PricingAddons = ({ isYearly = false, setIsYearly }) => {
       </CssBaseline>
     </SistentThemeProvider>
   );
-};
\ No newline at end of file
+};
diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js
index e5ab568bfdd0c..658e210af9084 100644
--- a/src/sections/Pricing/index.js
+++ b/src/sections/Pricing/index.js
@@ -8,36 +8,70 @@ import PlanCard from "../../components/Pricing/PlanCard";
 import OpenSourceBanner from "./openSource";
 import { PricingAddons } from "../../components/Pricing/PricingAddons";
 import SubscriptionToggle from "./SubscriptionToggle";
+import { Box, FormControl, InputLabel, MenuItem, Select, Typography } from "@sistent/sistent";
+import { Currencies } from "../../utils/currencies";
+
+export const CurrencySelect = ({ currency, setCurrency }) => {
+    return (
+        <FormControl variant="outlined" size="small" sx={{ minWidth: 150 }}>
+            <InputLabel>Currency</InputLabel>
+            <Select
+                value={currency}
+                sx={{}}
+                onChange={(e) => setCurrency(e.target.value)}
+                label="Currency"
+                renderValue={(value) => (
+                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                        <Typography variant="body1">{Currencies[value].symbol}</Typography>
+                        <Typography variant="body2" color="text.secondary">
+                            {Currencies[value].name}
+                        </Typography>
+                    </Box>
+                )}
+            >
+                {Object.entries(Currencies).map(([code, { symbol, name }]) => (
+                    <MenuItem key={code} value={code}>
+                        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                            <Typography variant="body1">{symbol}</Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                {name}
+                            </Typography>
+                        </Box>
+                    </MenuItem>
+                ))}
+            </Select>
+        </FormControl>
+    );
+}
 
 const Pricing = () => {
-  // const [monthly, setMonthly] = useState(false);
-  const [isYearly, setIsYearly] = useState(false);
-
-  return (
-    <PricingWrapper>
-      <div className="headers">
-        <h1 className="header-heading">Plans For Every Team Size</h1>
-
-        <SubscriptionToggle isYearly={isYearly} setIsYearly={setIsYearly} />
-
-        {/* <svg className="header-svg" aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
-          <polygon fill="white" points="0,100 100,0 100,100"/>
-      <polygon fill="rgba(0,179,159,0.2)" points="50,50 100,0 100,100"/>
-        </svg> */}
-      </div>
-
-      <div className="wrapper">
-        <PlanCard planData={options} isYearly={isYearly}/>
-      </div>
-      <div style={{ marginTop: "7rem", marginBottom: "3rem" }}>
-        <PricingAddons isYearly={isYearly} setIsYearly={setIsYearly}/>
-      </div>
-      <Comparison />
-      <Reviews />
-      <OpenSourceBanner />
-      <FAQ category={["Pricing", "Billing"]} />
-    </PricingWrapper>
-  );
+    // const [monthly, setMonthly] = useState(false);
+    const [isYearly, setIsYearly] = useState(false);
+    const [currency, setCurrency] = useState("USD");
+
+    return (
+        <PricingWrapper>
+            <div className="headers">
+                <h1 className="header-heading">Plans For Every Team Size</h1>
+
+                <CurrencySelect currency={currency} setCurrency={setCurrency} />
+
+                <SubscriptionToggle isYearly={isYearly} setIsYearly={setIsYearly} />
+
+            </div>
+
+            <div className="wrapper">
+                <PlanCard planData={options} isYearly={isYearly} currency={currency} />
+            </div>
+            <div style={{ marginTop: "7rem", marginBottom: "3rem" }}>
+                <PricingAddons isYearly={isYearly} setIsYearly={setIsYearly} currency={currency} />
+            </div>
+            <Comparison />
+            <Reviews />
+            <OpenSourceBanner />
+            <FAQ category={["Pricing", "Billing"]} />
+        </PricingWrapper>
+    );
 };
 
 
diff --git a/src/utils/currencies.js b/src/utils/currencies.js
new file mode 100644
index 0000000000000..a71699b4fea0f
--- /dev/null
+++ b/src/utils/currencies.js
@@ -0,0 +1,36 @@
+
+export const Currencies = {
+    USD: {
+        name: "USD",
+        symbol: "$",
+        rate: 1,
+        formatPrice: (price) =>
+            new Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "USD",
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+            }).format(price),
+    },
+    EUR: {
+        name: "EUR",
+        symbol: "€",
+        rate: 0.86,
+        formatPrice: (price) =>
+            new Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "EUR",
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 2,
+            }).format(price * 0.86),
+    },
+};
+
+
+// the price is in USD
+export const formatAndConvertPrice = (price, currency) => {
+    if (Currencies[currency]) {
+        return Currencies[currency].formatPrice(price);
+    }
+    return price;
+}