Merge pull request #6794 from layer5io/currency-switcher

aabidsofi19 · web-flow · commit 52e9d237495f · 2025-09-06T22:41:43.000+05:30
Add currency switcher
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
   "scripts": {
     "build": "gatsby build",
     "clean": "gatsby clean && rimraf node_modules",
-    "develop": "env-cmd -f .env.development gatsby develop",
+    "develop": "GATSBY_CPU_COUNT=12 NODE_OPTIONS=--max-old-space-size=10096 gatsby develop",
     "dev": "npm run develop",
     "start": "npm run develop",
     "serve": "gatsby serve",
@@ -55,7 +55,7 @@
     "dedent": "^1.3.0",
     "deepmerge": "^4.3.0",
     "formik": "^2.2.9",
-    "gatsby": "^5.14.0",
+    "gatsby": "^5.14.6",
     "gatsby-awesome-pagination": "^0.3.8",
     "gatsby-background-image": "^1.6.0",
     "gatsby-cli": "^5.13.3",
diff --git 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,11 @@ const PlanCard = ({ planData , isYearly }) => {
     "Enterprise": "https://cloud.layer5.io/account/plans/upgrade?plan=ad68ce59-8c5a-42b0-955c-9b2b2f7c98e3"
   };
 
+  const formatPrice = (price) => {
+    console.log("price",price,planData);
+    return formatAndConvertPrice(price, currency);
+  };
+
   return (
     <PlanCardWrapper>
       <Container>
@@ -41,39 +47,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>
-                        <span className="currency">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 className="price">
+                    <span className="price-amount">
+                      {isYearly
+                        ? formatPrice(x.yearlyprice)
+                        : formatPrice(x.monthlyprice)}
+                    </span>
+                    <span className="currency">{Currencies[currency]?.name ?? "USD" }  </span>
+                    <span className="price-per">per user/year</span>
+                  </div>
+
                 </div>
 
 
diff --git a/src/components/Pricing/PricingAddons/index.js b/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,enterprisePlan }) => {
+
   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") {
@@ -390,7 +389,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
                                 <Box sx={{ textAlign: "center", fontSize: "1.25rem", fontWeight: "bold" }}>
                                   <Box>{option.learners === "2500+" ? "2,500+" : option.learners}</Box>
                                   <Box sx={{ color: "text.secondary", mb: 1.5, fontSize: ".9rem" }}>
-                                    {option.currency}{isYearly ? option.yearlyPerUser : option.monthlyPerUser}<br />{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
+                                    {formatPrice(isYearly ? option.yearlyPerUser : option.monthlyPerUser)}<br />{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
                                   </Box>
                                 </Box>
                               ),
@@ -566,4 +565,4 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
       </CssBaseline>
     </SistentThemeProvider>
   );
-};
+};
diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js
@@ -8,36 +8,85 @@ 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,
+      "& .MuiInputLabel-root": { color: "white" }, // label
+      "& .MuiOutlinedInput-notchedOutline": { borderColor: "white" }, // outline
+      "& .MuiSelect-icon": { color: "white" }, // dropdown arrow
+      "& .MuiSelect-select": { color: "white" }, // selected text
+      "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
+
+    }}>
+      <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, color: "#fff" }}>
+            <Typography variant="body1">{Currencies[value].symbol}</Typography>
+            <Typography variant="body2" >
+              {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" >
+                {name}
+              </Typography>
+            </Box>
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
 
 const Pricing = () => {
   // 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>
 
-        <SubscriptionToggle isYearly={isYearly} setIsYearly={setIsYearly} />
+        <div style={{ display: "flex", "gap": "1rem", alignItems: "center", "justifyContent": "flex-end", width: "85%" }} >
+          <CurrencySelect currency={currency} setCurrency={setCurrency} />
+
+          <SubscriptionToggle isYearly={isYearly} setIsYearly={setIsYearly} />
+        </div>
 
-        {/* <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}/>
+        <PlanCard planData={options} isYearly={isYearly} currency={currency} />
       </div>
       <div style={{ marginTop: "7rem", marginBottom: "3rem" }}>
-        <PricingAddons isYearly={isYearly} setIsYearly={setIsYearly} enterprisePlan={options.filter(opt => opt.tier == "Enterprise")[0]} />
+        <PricingAddons isYearly={isYearly} setIsYearly={setIsYearly} currency={currency} enterprisePlan={options.filter(opt => opt.tier == "Enterprise")[0]} />
       </div>
       <Comparison />
       <Reviews />
       <OpenSourceBanner />
       <FAQ category={["Pricing", "Billing"]} />
     </PricingWrapper>
   );
+
 };
 
 
diff --git a/src/sections/Pricing/pricing.style.js b/src/sections/Pricing/pricing.style.js
@@ -44,12 +44,12 @@ const PricingWrapper = styled.section`
   margin: 2rem 0;
   font-size: .9rem;
   gap: 10px;
-  width: 85%;
+  width: auto;
 }
 
 .toggle {
   border: 2px solid ${props => props.theme.shadowLightColor};
-  padding: .4rem;
+  padding: .6rem;
  border-radius: .5rem;
 }
 
diff --git a/src/utils/currencies.js 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;
+}

Original file line number	Diff line number	Diff line change
@@ -44,12 +44,12 @@ const PricingWrapper = styled.section`
`44`	`44`	`margin: 2rem 0;`
`45`	`45`	`font-size: .9rem;`
`46`	`46`	`gap: 10px;`
`47`		`- width: 85%;`
	`47`	`+ width: auto;`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.toggle {`
`51`	`51`	`border: 2px solid ${props => props.theme.shadowLightColor};`
`52`		`- padding: .4rem;`
	`52`	`+ padding: .6rem;`
`53`	`53`	`border-radius: .5rem;`
`54`	`54`	`}`
`55`	`55`