Merge pull request #7011 from Namanv0509/addon-1

Pricing add on styling update

Author: Namanv0509

src/components/Pricing/PricingAddons/index.js

@@ -442,7 +442,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                               <Box sx={boxStyles.sliderMarks}>
                                 <Box>{option.units}</Box>
                                 <Box sx={boxStyles.sliderPriceText}>
-                                  {formatSliderPrice(isYearly ? option.yearlyPerUnit : option.monthlyPerUnit, currency)}
+                                  {formatSliderPrice(isYearly ? option.yearlyPerUnit * option.units : option.monthlyPerUnit * option.units, currency)}
                                 </Box>
                               </Box>
                             ),

src/components/Pricing/PricingAddons/styles.js

@@ -176,8 +176,9 @@ export const boxStyles = {
     mt: 0.5
   },
   sliderPriceText: {
-    color: "primary.main",
-    fontWeight: "bold",
+    color: "text.secondary",
+    fontWeight: "normal",
+    fontSize: "1.2rem",
     mt: 0.5
   },
   academySliderMarks: {

src/utils/currencies.js

@@ -3,36 +3,36 @@ export const Currencies = {
         name: "USD",
         symbol: "$",
         rate: 1,
-        formatPrice: (price) =>
+        formatPrice: (price,roundForDisplay=false) =>
             new Intl.NumberFormat("en-US", {
                 style: "currency",
                 currency: "USD",
-                minimumFractionDigits: 0,
-                maximumFractionDigits: 2,
+                minimumFractionDigits: roundForDisplay ? 0 : 2,
+                maximumFractionDigits: roundForDisplay ? 0 : 2,
             }).format(price),
     },
     EUR: {
         name: "EUR",
         symbol: "€",
         rate: 0.86,
-        formatPrice: (price) =>
+        formatPrice: (price,roundForDisplay=false) =>
             new Intl.NumberFormat("en-US", {
                 style: "currency",
                 currency: "EUR",
-                minimumFractionDigits: 0,
-                maximumFractionDigits: 2,
+                minimumFractionDigits: roundForDisplay ? 0 : 2,
+                maximumFractionDigits: roundForDisplay ? 0 : 2,
             }).format(price * 0.86),
     },
     INR: {
         name: "INR",
         symbol: "₹",
         rate: 88.32,
-        formatPrice: (price) =>
+        formatPrice: (price,roundForDisplay=false) =>
             new Intl.NumberFormat("en-US", {
                 style: "currency",
                 currency: "INR",
-                minimumFractionDigits: 0,
-                maximumFractionDigits: 2,
+                minimumFractionDigits: roundForDisplay ? 0 : 2,
+                maximumFractionDigits: roundForDisplay ? 0 : 2,
             }).format(price * 88),
     },
 };