Skip to content

Commit a3204c3

Browse files
leecalcoteleecalcote
committed
Refactor PricingAddons component to implement dynamic pricing for the Academy addon based on learner options and update quantity display logic.
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 01f89b1 commit a3204c3

1 file changed

Lines changed: 74 additions & 37 deletions

File tree

‎src/components/PricingAddons/index.js‎

Lines changed: 74 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ const addOns = [
2121
id: "academy",
2222
name: "Academy",
2323
description: "A comprehensive learning management system for creators and instructors on how to build, manage, and extend educational content like learning paths, challenges, and certifications.",
24-
monthlyPrice: 1,
25-
yearlyPrice: 10, // ~15% discount for yearly
24+
subdescription: "Theoretical Learning and Practical Learning packages by number of learners",
25+
// monthlyPrice: 1,
26+
// yearlyPrice: 10, // ~15% discount for yearly
2627
icon: <AcademyIcon primaryFill={"#eee"} secondaryFill={"#eee"} />,
27-
// icon: <AcademyIcon primaryFill={(theme) => theme.palette.background.inverselight} secondaryFill={(theme) => theme.palette.text.default} />,
2828
unitLabel: "learners",
2929
maxUnits: 5000,
3030
features: ["Learning Paths", "Challenges", "Certifications", "Instructor Console"],
@@ -72,15 +72,27 @@ export const PricingAddons = ({ isYearly = false }) => {
7272

7373
useEffect(() => {
7474
if (selectedAddon) {
75-
const addonPrice = isYearly ? selectedAddon.yearlyPrice : selectedAddon.monthlyPrice;
76-
const baseTotal = addonPrice * quantity;
75+
let baseTotal = 0;
76+
if (selectedAddon.id === "academy") {
77+
// For academy, use the learner options pricing
78+
const currentLearnerOption = learnerOptions[quantityIndex];
79+
const monthlyPerUserCost = currentLearnerOption.monthlyPerUser;
80+
const yearlyPerUserCost = monthlyPerUserCost * 12 * 0.85; // 15% discount for yearly
81+
baseTotal = isYearly
82+
? yearlyPerUserCost * currentLearnerOption.learners
83+
: monthlyPerUserCost * currentLearnerOption.learners;
84+
} else {
85+
// For other addons, use the standard pricing
86+
const addonPrice = isYearly ? selectedAddon.yearlyPrice : selectedAddon.monthlyPrice;
87+
baseTotal = addonPrice * quantity;
88+
}
7789
const supportPrice = isYearly ? secondaryOptions[0].yearlyPrice : secondaryOptions[0].monthlyPrice;
7890
const supportTotal = labLearners ? supportPrice : 0;
7991
setTotalPrice(baseTotal + supportTotal);
8092
} else {
8193
setTotalPrice(0);
8294
}
83-
}, [selectedAddon, quantity, labLearners, isYearly]);
95+
}, [selectedAddon, quantity, quantityIndex, labLearners, isYearly]);
8496

8597
const handleAddonChange = (addonId) => {
8698
const addon = addOns.find((a) => a.id === addonId);
@@ -101,7 +113,7 @@ export const PricingAddons = ({ isYearly = false }) => {
101113
return (
102114
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
103115
<CssBaseline />
104-
116+
105117
<Container maxWidth="lg" sx={{ my: 4 }}>
106118
<PlanCardWrapper>
107119
<Card
@@ -156,7 +168,10 @@ export const PricingAddons = ({ isYearly = false }) => {
156168
{addon.name}
157169
</Typography>
158170
<Typography variant="body2" color="text.secondary">
159-
{formatPrice(isYearly ? addon.yearlyPrice : addon.monthlyPrice)} per {addon.unitLabel.slice(0, -1)}{isYearly ? "/year" : "/month"}
171+
{addon.id === "academy"
172+
? addon.subdescription
173+
: `${formatPrice(isYearly ? addon.yearlyPrice : addon.monthlyPrice)} per ${addon.unitLabel.slice(0, -1)}${isYearly ? "/year" : "/month"}`
174+
}
160175
</Typography>
161176
</Box>
162177
</Box>
@@ -166,32 +181,30 @@ export const PricingAddons = ({ isYearly = false }) => {
166181
</FormControl>
167182

168183
{selectedAddon && (
169-
<Paper elevation={0} sx={{ mt: 2, p: 3, color: "primary.contrastText", borderRadius: 2 }}>
170-
<div className="pricing-features">
171-
<div className="feature">
172-
<FeatureDetails
173-
category={selectedAddon.name}
174-
description={selectedAddon.description}
175-
>
176-
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 1, mt: 1 }}>
177-
{selectedAddon.features.map((feature, index) => (
178-
<Chip
179-
key={index}
180-
icon={<CheckCircle sx={{ fontSize: 12 }} />}
181-
label={feature}
182-
size="small"
183-
sx={{
184-
backgroundColor: "rgba(0, 179, 159, 0.1)",
185-
color: "text.primary",
186-
"& .MuiChip-icon": { color: "primary.main" },
187-
}}
188-
/>
189-
))}
190-
</Box>
191-
</FeatureDetails>
192-
</div>
184+
<div className="pricing-features">
185+
<div className="feature">
186+
<FeatureDetails
187+
category={selectedAddon.name}
188+
description={selectedAddon.description}
189+
>
190+
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 1, mt: 1 }}>
191+
{selectedAddon.features.map((feature, index) => (
192+
<Chip
193+
key={index}
194+
icon={<CheckCircle sx={{ fontSize: 12 }} />}
195+
label={feature}
196+
size="small"
197+
sx={{
198+
backgroundColor: "rgba(0, 179, 159, 0.1)",
199+
color: "text.primary",
200+
"& .MuiChip-icon": { color: "primary.main" },
201+
}}
202+
/>
203+
))}
204+
</Box>
205+
</FeatureDetails>
193206
</div>
194-
</Paper>
207+
</div>
195208
)}
196209
</Box>
197210

@@ -201,10 +214,22 @@ export const PricingAddons = ({ isYearly = false }) => {
201214
<Box>
202215
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
203216
<Typography variant="h6" fontWeight="600" sx={{ fontSize: "1.1rem" }}>
204-
<Box component="span" sx={{ fontWeight: "normal" }}>QUANTITY:</Box> {quantity} {selectedAddon.unitLabel}
217+
<Box component="span" sx={{ fontWeight: "normal" }}>QUANTITY:</Box> {selectedAddon.id === "academy" ? learnerOptions[quantityIndex].learners : quantity} {selectedAddon.unitLabel}
205218
</Typography>
206219
<Chip
207-
label={formatPrice((isYearly ? selectedAddon.yearlyPrice : selectedAddon.monthlyPrice) * quantity)}
220+
label={(() => {
221+
if (selectedAddon.id === "academy") {
222+
const currentLearnerOption = learnerOptions[quantityIndex];
223+
const monthlyPerUserCost = currentLearnerOption.monthlyPerUser;
224+
const yearlyPerUserCost = monthlyPerUserCost * 12 * 0.85;
225+
const totalCost = isYearly
226+
? yearlyPerUserCost * currentLearnerOption.learners
227+
: monthlyPerUserCost * currentLearnerOption.learners;
228+
return formatPrice(totalCost);
229+
} else {
230+
return formatPrice((isYearly ? selectedAddon.yearlyPrice : selectedAddon.monthlyPrice) * quantity);
231+
}
232+
})()}
208233
color="primary"
209234
variant="outlined"
210235
sx={{ fontWeight: "bold", fontSize: "0.9rem" }}
@@ -301,10 +326,22 @@ export const PricingAddons = ({ isYearly = false }) => {
301326
<Box sx={{ display: "flex", flexDirection: "column", gap: 2, mb: 3 }}>
302327
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
303328
<Typography variant="body1">
304-
{selectedAddon.name} × {quantity}
329+
{selectedAddon.name} × {selectedAddon.id === "academy" ? learnerOptions[quantityIndex].learners : quantity}
305330
</Typography>
306331
<Typography variant="body1" fontWeight="500">
307-
{formatPrice((isYearly ? selectedAddon.yearlyPrice : selectedAddon.monthlyPrice) * quantity)}
332+
{(() => {
333+
if (selectedAddon.id === "academy") {
334+
const currentLearnerOption = learnerOptions[quantityIndex];
335+
const monthlyPerUserCost = currentLearnerOption.monthlyPerUser;
336+
const yearlyPerUserCost = monthlyPerUserCost * 12 * 0.85;
337+
const totalCost = isYearly
338+
? yearlyPerUserCost * currentLearnerOption.learners
339+
: monthlyPerUserCost * currentLearnerOption.learners;
340+
return formatPrice(totalCost);
341+
} else {
342+
return formatPrice((isYearly ? selectedAddon.yearlyPrice : selectedAddon.monthlyPrice) * quantity);
343+
}
344+
})()}
308345
</Typography>
309346
</Box>
310347

0 commit comments

Comments
 (0)