add currency switcher in pricing page

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>
 
 

src/components/Pricing/PricingAddons/index.js

@@ -41,7 +41,10 @@ import {
   getSliderStyle
 } from "./styles";
 
-export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan }) => {
+import { formatAndConvertPrice } from "../../../utils/currencies";
+
+export const PricingAddons = ({ isYearly = false, setIsYearly ,currency }) => {
+
   const [selectedAddon, setSelectedAddon] = useState(null);
   // const [quantity, setQuantity] = useState(1);
   const quantity = 1;
@@ -74,6 +77,10 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
     }
   };
 
+  const formatPrice = (price) => {
+      return formatAndConvertPrice(price, currency)
+  }
+
   useEffect(() => {
     if (selectedAddon) {
       let baseTotal = 0;
@@ -139,14 +146,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
     }));
   };
 
-  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") {
@@ -566,4 +565,4 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
       </CssBaseline>
     </SistentThemeProvider>
   );
-};
+};

src/sections/Pricing/index.js

@@ -8,36 +8,71 @@ 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} enterprisePlan={options.filter(opt => opt.tier == "Enterprise")[0]} />
-      </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>
+    );
+
 };
 
 

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;
+}