Skip to content

Commit 70681ec

Browse files
Namanv0509Namanv0509
committed
Indexed other plan sliders and some minor fix
Signed-off-by: Namanv0509 <namanverma00260@gmail.com>
1 parent 21d7ce1 commit 70681ec

2 files changed

Lines changed: 50 additions & 54 deletions

File tree

‎src/components/Pricing/PricingAddons/index.js‎

Lines changed: 40 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,16 @@ export const PricingAddons = ({ isYearly = false }) => {
4141
: monthlyPerUserCost * currentLearnerOption.learners;
4242
}
4343
} else {
44-
// For other addons, use the standard pricing
45-
const addonPrice = isYearlyState ? selectedAddon.yearlyPrice : selectedAddon.monthlyPrice;
46-
baseTotal = addonPrice * quantity;
44+
// Non-Academy pricing
45+
if (selectedAddon.pricing && selectedAddon.pricing[quantityIndex]) {
46+
const currentOption = selectedAddon.pricing[quantityIndex];
47+
const monthlyPerUnitCost = currentOption.monthlyPerUnit;
48+
const yearlyPerUnitCost = currentOption.yearlyPerUnit;
49+
baseTotal = isYearlyState
50+
? yearlyPerUnitCost * currentOption.units
51+
: monthlyPerUnitCost * currentOption.units;
4752
}
53+
}
4854

4955
// Handle Academy Sub-AddOns (any selected sub-addons, excluding theory which is the base)
5056
let subAddOnTotal = 0;
@@ -71,7 +77,7 @@ export const PricingAddons = ({ isYearly = false }) => {
7177
const handleAddonChange = (addonId) => {
7278
const addon = addOns.find((a) => a.id === addonId);
7379
setSelectedAddon(addon || null);
74-
setQuantity(1); // eslint-disable-next-line no-unused-vars
80+
setQuantityIndex(0); // eslint-disable-next-line no-unused-vars
7581

7682
// If Academy is selected, automatically include the "academy-theory" sub-addon
7783
if (addon?.id === "academy") {
@@ -446,7 +452,7 @@ Add-on Selection
446452
/>
447453
<Box sx={{ display: "flex", my: 2, justifyContent: "space-between" }}>
448454
<Typography variant="body2" sx={{ fontStyle: "italic", color: "text.secondary", fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }}>
449-
Looking for a plan larger than 2,500 learners? Great! <Link to="/contact">Let us know</Link>.
455+
Looking for a plan larger than 2,500 learners? Great! <Link to="/company/contact">Let us know</Link>.
450456
{/* {selectedAddon?.maxUnits} */}
451457
</Typography>
452458
</Box>
@@ -457,22 +463,26 @@ Add-on Selection
457463
{/* SELECTED ADD-ON DETAILS - Other Plans */}
458464
{selectedAddon !== null && selectedAddon.id !== "academy" && (
459465
<>
460-
<Box sx={{ mt: 2, justifyContent: "center", }}>
461-
<Typography variant="h6" fontWeight="600" sx={{ fontSize: "1rem", mb: 1, }}>
462-
{/* <Box component="span" sx={{ fontWeight: "normal" }}>QUANTITY: </Box> */}
463-
{quantity} {selectedAddon?.unitLabel}
466+
<Box sx={{ mt: 2, justifyContent: "center" }}>
467+
<Typography variant="h6" fontWeight="600" sx={{ fontSize: "1rem", mb: 1 }}>
468+
{selectedAddon.pricing?.[quantityIndex]?.units || 0} {selectedAddon?.unitLabel}
464469
</Typography>
465470
<Slider
466-
value={quantity}
467-
onChange={(event, newValue) => setQuantity(newValue)}
468-
min={1}
469-
max={selectedAddon?.maxUnits || 50}
471+
value={quantityIndex}
472+
onChange={(event, newValue) => setQuantityIndex(newValue)}
473+
min={0}
474+
max={selectedAddon?.pricing?.length - 1 || 0}
475+
step={null}
470476
valueLabelDisplay="auto"
471477
valueLabelFormat={(value) => {
472-
const unitPrice = isYearlyState ? selectedAddon?.yearlyPrice : selectedAddon?.monthlyPrice;
473-
const totalPrice = (unitPrice || 0) * value;
474-
const period = isYearlyState ? "/year" : "/month";
475-
return `${value} ${selectedAddon?.unitLabel?.slice(0, -1) || "unit"} - ${formatPrice(totalPrice)}${period}`;
478+
if (selectedAddon?.pricing && selectedAddon.pricing[value]) {
479+
const option = selectedAddon.pricing[value];
480+
const unitPrice = isYearlyState ? option.yearlyPerUnit : option.monthlyPerUnit;
481+
const totalPrice = unitPrice * option.units;
482+
const period = isYearlyState ? "/year" : "/month";
483+
return `${option.units} ${selectedAddon?.unitLabel?.slice(0, -1) || "unit"} - ${formatPrice(totalPrice)}${period}`;
484+
}
485+
return "";
476486
}}
477487
sx={{
478488
mb: 2,
@@ -496,48 +506,24 @@ Add-on Selection
496506
fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif",
497507
},
498508
}}
499-
marks={[
500-
{
501-
value: 1,
502-
label: (
503-
<Box sx={{ textAlign: "center", fontSize: "0.75rem" }}>
504-
<Box>1</Box>
505-
<Box sx={{ color: "primary.main", fontWeight: "bold", mt: 0.5 }}>
506-
{formatPrice(isYearlyState ? selectedAddon?.yearlyPrice || 0 : selectedAddon?.monthlyPrice || 0)}
507-
</Box>
508-
</Box>
509-
)
510-
},
511-
{
512-
value: Math.floor((selectedAddon?.maxUnits || 50) / 2),
513-
label: (
514-
<Box sx={{ textAlign: "center", fontSize: "1rem" }}>
515-
<Box>{Math.floor((selectedAddon?.maxUnits || 50) / 2)}</Box>
516-
<Box sx={{ color: "primary.main", fontWeight: "bold", mt: 0.5 }}>
517-
{formatPrice((isYearlyState ? selectedAddon?.yearlyPrice || 0 : selectedAddon?.monthlyPrice || 0) * Math.floor((selectedAddon?.maxUnits || 50) / 2))}
518-
</Box>
509+
marks={selectedAddon?.pricing?.map((option, index) => ({
510+
value: index,
511+
label: (
512+
<Box sx={{ textAlign: "center", fontSize: index === 0 ? "0.75rem" : "1rem" }}>
513+
<Box>{option.units}</Box>
514+
<Box sx={{ color: "primary.main", fontWeight: "bold", mt: 0.5 }}>
515+
{formatPrice(isYearlyState ? option.yearlyPerUnit * option.units : option.monthlyPerUnit * option.units)}
519516
</Box>
520-
)
521-
},
522-
{
523-
value: selectedAddon?.maxUnits || 50,
524-
label: (
525-
<Box sx={{ textAlign: "center", fontSize: "1rem" }}>
526-
<Box>{selectedAddon?.maxUnits || 50}</Box>
527-
<Box sx={{ color: "primary.main", fontWeight: "bold", mt: 0.5 }}>
528-
{formatPrice((isYearlyState ? selectedAddon?.yearlyPrice || 0 : selectedAddon?.monthlyPrice || 0) * (selectedAddon?.maxUnits || 50))}
529-
</Box>
530-
</Box>
531-
)
532-
}
533-
]}
517+
</Box>
518+
),
519+
})) || []}
534520
/>
535521
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
536522
<Typography variant="body2" color="text.secondary">
537-
1
523+
{selectedAddon?.pricing?.[0]?.units || 1}
538524
</Typography>
539525
<Typography variant="body2" color="text.secondary">
540-
{selectedAddon?.maxUnits}
526+
{selectedAddon?.pricing?.[selectedAddon.pricing.length - 1]?.units || 50}
541527
</Typography>
542528
</Box>
543529
</Box>
@@ -602,7 +588,7 @@ Add-on Selection
602588
<Box key={subAddOn.id} sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
603589
<Typography variant="body1" sx={{ marginLeft: .5, fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }}>
604590
{subAddOn.name} × {subAddOn.pricing?.[quantityIndex]?.learners || 0}
605-
</Typography>``
591+
</Typography>
606592
<Typography variant="body1" sx={{ marginRight: .5, fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }} fontWeight="500">
607593
{formatPrice(
608594
(() => {

‎src/components/Pricing/PricingAddons/pricingData.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@ export const getAddOns = (theme) => [
8585
icon: <Cloud sx={{ color: theme?.palette?.background?.inverse || "#FFFFFF" }} />,
8686
unitLabel: "servers",
8787
maxUnits: 50,
88+
pricing: [
89+
{ units: 1, monthlyPerUnit: 64, yearlyPerUnit: 54.40, currency: "$" }, // 64 * 12 * 0.85 / 12 ≈ 54.40
90+
{ units: 25, monthlyPerUnit: 64, yearlyPerUnit: 54.40, currency: "$" }, // 1600 / 25 = 64
91+
{ units: 50, monthlyPerUnit: 64, yearlyPerUnit: 54.40, currency: "$" }, // 3200 / 50 = 64
92+
],
8893
features: ["Automated deployment", "Real-time monitoring", "Multi-cluster support", "Performance analytics"],
8994
},
9095
{
@@ -96,6 +101,11 @@ export const getAddOns = (theme) => [
96101
icon: <Group sx={{ color: theme?.palette?.background?.inverse || "#00B39F" }} />,
97102
unitLabel: "collaborators",
98103
maxUnits: 200,
104+
pricing: [
105+
{ units: 1, monthlyPerUnit: 2, yearlyPerUnit: 1.70, currency: "$" }, // 2 * 12 * 0.85 / 12 ≈ 1.70
106+
{ units: 100, monthlyPerUnit: 1.50, yearlyPerUnit: 1.275, currency: "$" }, // 150 / 100 = 1.50
107+
{ units: 200, monthlyPerUnit: 1.50, yearlyPerUnit: 1.275, currency: "$" }, // 300 / 200 = 1.50
108+
],
99109
features: ["Enhanced Security", "Guaranteed SLAs", "Conflict-Free Synchronization", "Real-Time Collaboration"],
100110
},
101111
];

0 commit comments

Comments
 (0)