Merge pull request #6904 from Namanv0509/pricing-update

Pricing page update

Author: Namanv0509

src/components/Pricing/PlanCard/index.js

@@ -51,7 +51,7 @@ const PlanCard = ({ planData, isYearly, currency }) => {
 
                   <div className="price">
                     <span className="price-amount">
-                      <sup>{getCurrencySymbol(currency)}</sup>
+                      <sup><strong>{getCurrencySymbol(currency)}</strong></sup>
                       {isYearly
                         ? formatPrice(x.yearlyprice)
                         : formatPrice(x.monthlyprice)}

src/components/Pricing/PricingAddons/index.js

@@ -143,7 +143,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
     }));
   };
 
-
   const getPlanLinkForAcademy = () => {
     if (!selectedAddon || selectedAddon.id !== "academy") {
       return { link: "#", name: "Subscribe" };
@@ -175,7 +174,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
       const enterpriseUserSeats = enterpriseUsers > 0 ? ` and ${enterpriseUsers} enterprise user${enterpriseUsers > 1 ? "s" : ""}` : "";
       return {
         link: matchingPlanLink.link,
-        name: "Subscribe"
+        name: "Subscribe For Add-on"
       };
     }
 
@@ -189,7 +188,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
 
     return {
       link: "#",
-      name: "Subscribe For"
+      name: "Subscribe For Add-on"
     };
   };
 
@@ -390,28 +389,28 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                               label: (
                                 <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: {
-                                        xs: "0.75rem",
-                                        sm: "0.9rem",
-                                      }
-                                    }}>
-                                    {formatSliderPrice(isYearly ? option.yearlyPerUser : option.monthlyPerUser, currency)}<br />{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
-                                    {isYearly && (
+                                  {isYearly && (
                                       <Box
                                         sx={{
                                           fontSize: {
-                                            xs: "0.7rem",
-                                            sm: "0.7rem",
+                                            xs: "0.75rem",
+                                            sm: "0.9rem",
                                           }
                                         }}
                                       >
-                                        {formatSliderPrice(option.yearlyPerUser / 12, currency)}/{targetSubAddon.unitLabelSingular}/month
+                                        {formatSliderPrice(option.yearlyPerUser/12, currency)}<br/>{targetSubAddon.unitLabelSingular}/month
                                       </Box>
                                     )}
+                                  <Box
+                                    sx={{
+                                      color: "text.secondary",
+                                      mb: 1.5,
+                                      fontSize: {
+                                        xs: "0.75rem",
+                                        sm: "0.8rem",
+                                      }
+                                    }}>
+                                    {formatSliderPrice(isYearly ? option.yearlyPerUser : option.monthlyPerUser, currency)}/{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
                                   </Box>
                                 </Box>
                               ),
@@ -519,7 +518,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                           }
                           return formatPrice(0);
                         }
-    })()}/{isYearly ? "yearly" : "monthly"}
+                      })()} /{isYearly ? "yearly" : "monthly"}
                     </Typography>
                   </Box>
 
@@ -595,4 +594,4 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
       </CssBaseline>
     </SistentThemeProvider>
   );
-};
+};

src/sections/Pricing/index.js

@@ -7,9 +7,40 @@ import options from "./generatePlans";
 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";
+import {
+  toggleButtonStyles,
+  getToggleButtonStyle,
+} from "../../components/Pricing/PricingAddons/styles.js";
+import { min } from "lodash";
+
+const customToggleButtonStyles = {
+  container: {
+    ...toggleButtonStyles.container, 
+    backgroundColor: "transparent",
+     p: "6px",
+     minHeight: "42px",
+     minWidth: "50px",
+    borderColor:"#ffffffff" 
+  },
+  base: {
+    py: 0.5,
+    px: 4,
+    fontSize: "4rem",
+    ...toggleButtonStyles.base, 
+  },
+};
+
+const getCustomToggleButtonStyle = (isActive, baseStyle) => ({
+  ...getToggleButtonStyle(isActive, baseStyle),
+  backgroundColor: isActive ? "#00B39F" : "transparent", 
+  color: isActive ? "#fffcfcff" : "#fff",
+  fontSize: "1rem",
+  "&:hover": {
+    backgroundColor: isActive ? "#009B8A" : "transparent", 
+  },
+});
 
 export const CurrencySelect = ({ currency, setCurrency }) => {
   return (
@@ -73,7 +104,20 @@ const Pricing = () => {
         <div style={{ display: "flex", "gap": "1rem", alignItems: "center", "justifyContent": "flex-end", width: "85%" }} >
           <CurrencySelect currency={currency} setCurrency={setCurrency} />
 
-          <SubscriptionToggle isYearly={isYearly} setIsYearly={setIsYearly} />
+          <Box sx={customToggleButtonStyles.container}>
+            <Box
+              onClick={() => setIsYearly(false)}
+              sx={getCustomToggleButtonStyle(!isYearly, customToggleButtonStyles.base)}
+            >
+              Monthly
+            </Box>
+            <Box
+              onClick={() => setIsYearly(true)}
+              sx={getCustomToggleButtonStyle(isYearly, customToggleButtonStyles.base)}
+            >
+              Yearly
+            </Box>
+          </Box>
         </div>
 
       </div>