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 ( @@ -41,39 +46,17 @@ const PlanCard = ({ planData , isYearly }) => {
{x.byline}
- {isYearly ? ( - x.yearlyprice !== undefined ? ( +
- $ - {x.yearlyprice === 0 - ? "0" - : x.yearlyprice.toFixed(0)} + + {isYearly + ? formatPrice(x.yearlyPrice) + : formatPrice(x.monthlyPrice)} - USD + {Currencies[currency]?.name ?? "USD" } per user/year
- ) : ( -
- {x.pricing_coming_soon} -
- ) - ) : ( - x.monthlyprice !== undefined ? ( -
- $ - {x.monthlyprice === 0 - ? "0" - : x.monthlyprice.toFixed(0)} - - USD - per user/month -
- ) : ( -
- {x.pricing_coming_soon} -
- ) - )} +
diff --git a/src/components/Pricing/PricingAddons/index.js b/src/components/Pricing/PricingAddons/index.js index d525535f1a40c..37c53bdec1f9f 100644 --- 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 }) => { + 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 }) ); -}; \ No newline at end of file +}; diff --git a/src/sections/Pricing/index.js b/src/sections/Pricing/index.js index e77800f4e0e03..d402cda6b0326 100644 --- a/src/sections/Pricing/index.js +++ b/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 ( + + Currency + + + ); +} const Pricing = () => { - // const [monthly, setMonthly] = useState(false); - const [isYearly, setIsYearly] = useState(false); - - return ( - -
-

Plans For Every Team Size

- - - - {/* */} -
- -
- -
-
- opt.tier == "Enterprise")[0]} /> -
- - - - -
- ); + // const [monthly, setMonthly] = useState(false); + const [isYearly, setIsYearly] = useState(false); + const [currency, setCurrency] = useState("USD"); + + return ( + +
+

Plans For Every Team Size

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