Slider Update

Signed-off-by: Naman Verma <149177973+Namanv0509@users.noreply.github.com>

Author: Namanv0509

src/components/PricingAddons/index.js

@@ -28,6 +28,15 @@ import {
 import AcademyIcon from "./AcademyIcon";
 import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 
+const learnerOptions = [
+  { learners: 0, monthlyPerUser: 0 },
+  { learners: 50, monthlyPerUser: 1.73 },
+  { learners: 150, monthlyPerUser: 1.73 },
+  { learners: 250, monthlyPerUser: 1.38 },
+  { learners: 500, monthlyPerUser: 0.87 },
+  { learners: 1000, monthlyPerUser: 0.59 },
+];
+
 const addOns = [
   {
     id: "academy",
@@ -214,35 +223,105 @@ export const PricingAddons = ({ isYearly = false }) => {
                   {/* Quantity Slider */}
                   <Box>
                     <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
-                      <Typography variant="h6" fontWeight="600" sx={{ fontSize: "1.1rem" }}>
-                      Quantity: {quantity} {selectedAddon.unitLabel}
+                      <Typography variant="h6" fontWeight="600">
+                        Quantity:{" "}
+                        {selectedAddon.id === "academy"
+                          ? selectedAddon.learnerOptions[quantityIndex].learners === 1001
+                            ? "1,000+"
+                            : selectedAddon.learnerOptions[quantityIndex].learners
+                          : quantityIndex}{" "}
+                        {selectedAddon.unitLabel}
                       </Typography>
                       <Chip
-                        label={formatPrice((isYearly ? selectedAddon.yearlyPrice : selectedAddon.basePrice) * quantity)}
+                        label={formatPrice(totalPrice)}
                         color="primary"
                         variant="outlined"
-                        sx={{ fontWeight: "bold", fontSize: "0.9rem" }}
+                        sx={{
+                          fontWeight: "bold",
+                          fontSize: "0.9rem",
+                          transition: "all 0.3s ease-in-out",
+                        }}
                       />
                     </Box>
 
                     <Box sx={{ px: 1 }}>
-                      <Slider
-                        value={quantity}
-                        onChange={handleQuantityChange}
-                        min={1}
-                        max={selectedAddon.maxUnits}
-                        step={1}
-                        valueLabelDisplay="auto"
-                        sx={{ mb: 2 }}
-                      />
-                      <Box sx={{ display: "flex", justifyContent: "space-between" }}>
-                        <Typography variant="body2" color="text.secondary">
-                        1
-                        </Typography>
-                        <Typography variant="body2" color="text.secondary">
-                          {selectedAddon.maxUnits}
-                        </Typography>
-                      </Box>
+                      {selectedAddon.id === "academy" ? (
+                        <Slider
+                          value={quantityIndex}
+                          onChange={handleQuantityChange}
+                          min={0}
+                          max={selectedAddon.learnerOptions.length - 1}
+                          step={null}
+                          marks={selectedAddon.learnerOptions.map((option, index) => ({
+                            value: index,
+                          }))}
+                          valueLabelDisplay="auto"
+                          valueLabelFormat={(value) => {
+                            const option = selectedAddon.learnerOptions[value];
+                            const learners = option.learners === 1001 ? 1001 : option.learners;
+                            const basePrice = learners === 0 ? option.monthlyPerUser : learners * option.monthlyPerUser;
+                            const price = labLearners ? basePrice * 2 : basePrice;
+                            return `${option.learners === 1001 ? "1,000+" : option.learners} (${formatPrice(price)})`;
+                          }}
+                          sx={{
+                            color: "primary.main",
+                            "& .MuiSlider-markLabel": {
+                              color: "text.primary",
+                            },
+                            "& .MuiSlider-thumb": {
+                              width: 20,
+                              height: 20,
+                              "&:hover, &.Mui-focusVisible": {
+                                boxShadow: "0 0 0 8px rgba(0, 179, 159, 0.16)",
+                              },
+                            },
+                            "& .MuiSlider-rail": {
+                              opacity: 0.3,
+                            },
+                            "& .MuiSlider-track": {
+                              border: "none",
+                            },
+                          }}
+                          aria-label="Number of theory learners for Academy add-on"
+                        />
+                      ) : (
+                        <Slider
+                          value={quantityIndex}
+                          onChange={handleQuantityChange}
+                          min={1}
+                          max={selectedAddon.maxUnits}
+                          step={1}
+                          valueLabelDisplay="auto"
+                          valueLabelFormat={(value) => `${value} (${formatPrice(selectedAddon.basePrice * value)})`}
+                          sx={{
+                            color: "primary.main",
+                            "& .MuiSlider-thumb": {
+                              width: 20,
+                              height: 20,
+                              "&:hover, &.Mui-focusVisible": {
+                                boxShadow: "0 0 0 8px rgba(0, 179, 159, 0.16)",
+                              },
+                            },
+                            "& .MuiSlider-rail": {
+                              opacity: 0.3,
+                            },
+                            "& .MuiSlider-track": {
+                              border: "none",
+                            },
+                            mb: 2,
+                          }}
+                        />
+                      )}
+                      {selectedAddon.id !== "academy" && (
+                        <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+                          <Typography variant="body2" color="text.secondary">
+                            1
+                          </Typography>
+                          <Typography variant="body2" color="text.secondary">
+                            {selectedAddon.maxUnits}
+                          </Typography>
+                        </Box>
+                      )}
                     </Box>
                   </Box>