Skip to content

Commit 77b2471

Browse files
leecalcoteleecalcote
committed
Refactor PricingAddons component to support yearly pricing, update descriptions, and improve price formatting
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 70d3aab commit 77b2471

1 file changed

Lines changed: 29 additions & 25 deletions

File tree

‎src/components/PricingAddons/index.js‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import {
2020
CssBaseline
2121
} from "@sistent/sistent";
2222
import {
23-
Calculate, CloudOutlined,
23+
Calculate,
24+
CloudOutlined,
2425
Group,
2526
CheckCircle,
2627
} from "@mui/icons-material";
@@ -33,16 +34,19 @@ const addOns = [
3334
name: "Academy",
3435
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.",
3536
basePrice: 1,
36-
icon: <AcademyIcon primaryFill={(theme) => theme.palette.background.inverselight} secondaryFill={(theme) => theme.palette.text.default} />,
37+
yearlyPrice: 10, // ~15% discount for yearly
38+
icon: <AcademyIcon primaryFill={"#eee"} secondaryFill={"#eee"} />,
39+
// icon: <AcademyIcon primaryFill={(theme) => theme.palette.background.inverselight} secondaryFill={(theme) => theme.palette.text.default} />,
3740
unitLabel: "learners",
3841
maxUnits: 5000,
3942
features: ["Learning Paths", "Challenges", "Certifications", "Instructor Console"],
4043
},
4144
{
4245
id: "meshery-server",
4346
name: "Managed Meshery Servers",
44-
description: "Managed cloud instances for comprehensive service mesh operations and monitoring",
47+
description: "Managed cloud instances for comprehensive infrastructure configuration and lifecycle management",
4548
basePrice: 64,
49+
yearlyPrice: 650, // ~15% discount for yearly
4650
icon: <CloudOutlined />,
4751
unitLabel: "servers",
4852
maxUnits: 100,
@@ -53,6 +57,7 @@ const addOns = [
5357
name: "Team Collaboration Seats",
5458
description: "Additional seats for enhanced team collaboration and workspace management",
5559
basePrice: 16,
60+
yearlyPrice: 163, // ~15% discount for yearly
5661
icon: <Group />,
5762
unitLabel: "seats",
5863
maxUnits: 200,
@@ -65,25 +70,28 @@ const secondaryOptions = [
6570
name: "Lab Learners",
6671
description: "An inclusive, collaborative, hands-on learning environment for students.",
6772
price: 299,
73+
yearlyPrice: 3050, // ~15% discount for yearly
6874
features: ["Hands-on Learning", "Collaborative Instruction", "Visual Design", "Orchestrated Infrastructure"],
6975
},
7076
];
7177

72-
export const PricingAddons = () => {
78+
export const PricingAddons = ({ isYearly = false }) => {
7379
const [selectedAddon, setSelectedAddon] = useState(null);
7480
const [quantity, setQuantity] = useState(1);
7581
const [labLearners, setLabLearners] = useState(false);
7682
const [totalPrice, setTotalPrice] = useState(0);
7783

7884
useEffect(() => {
7985
if (selectedAddon) {
80-
const baseTotal = selectedAddon.basePrice * quantity;
81-
const supportTotal = labLearners ? secondaryOptions[0].price : 0;
86+
const addonPrice = isYearly ? selectedAddon.yearlyPrice : selectedAddon.basePrice;
87+
const baseTotal = addonPrice * quantity;
88+
const supportPrice = isYearly ? secondaryOptions[0].yearlyPrice : secondaryOptions[0].price;
89+
const supportTotal = labLearners ? supportPrice : 0;
8290
setTotalPrice(baseTotal + supportTotal);
8391
} else {
8492
setTotalPrice(0);
8593
}
86-
}, [selectedAddon, quantity, labLearners]);
94+
}, [selectedAddon, quantity, labLearners, isYearly]);
8795

8896
const handleAddonChange = (addonId) => {
8997
const addon = addOns.find((a) => a.id === addonId);
@@ -102,12 +110,10 @@ export const PricingAddons = () => {
102110
}).format(price);
103111
};
104112

105-
const ColorGuidance = () => {
106-
const { isDark } = useStyledDarkMode();
107-
return isDark ? "dark" : "light";
108-
};
113+
const { isDark } = useStyledDarkMode();
114+
109115
return (
110-
<SistentThemeProvider initialMode={ColorGuidance()}>
116+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
111117
<CssBaseline />
112118
<Container maxWidth="lg" sx={{ my: 4 }}>
113119
<Card
@@ -162,7 +168,7 @@ export const PricingAddons = () => {
162168
{addon.name}
163169
</Typography>
164170
<Typography variant="body2" color="text.secondary">
165-
{formatPrice(addon.basePrice)} per {addon.unitLabel.slice(0, -1)}
171+
{formatPrice(isYearly ? addon.yearlyPrice : addon.basePrice)} per {addon.unitLabel.slice(0, -1)}{isYearly ? "/year" : "/month"}
166172
</Typography>
167173
</Box>
168174
</Box>
@@ -177,12 +183,11 @@ export const PricingAddons = () => {
177183
sx={{
178184
mt: 2,
179185
p: 3,
180-
backgroundColor: "primary.light",
181186
color: "primary.contrastText",
182187
borderRadius: 2,
183188
}}
184189
>
185-
<Typography variant="body2" sx={{ mb: 2 }}>
190+
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
186191
{selectedAddon.description}
187192
</Typography>
188193
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 1 }}>
@@ -209,11 +214,11 @@ export const PricingAddons = () => {
209214
{/* Quantity Slider */}
210215
<Box>
211216
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
212-
<Typography variant="h6" fontWeight="600">
217+
<Typography variant="h6" fontWeight="600" sx={{ fontSize: "1.1rem" }}>
213218
Quantity: {quantity} {selectedAddon.unitLabel}
214219
</Typography>
215220
<Chip
216-
label={formatPrice(selectedAddon.basePrice * quantity)}
221+
label={formatPrice((isYearly ? selectedAddon.yearlyPrice : selectedAddon.basePrice) * quantity)}
217222
color="primary"
218223
variant="outlined"
219224
sx={{ fontWeight: "bold", fontSize: "0.9rem" }}
@@ -270,7 +275,7 @@ export const PricingAddons = () => {
270275
</Box>
271276
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
272277
<Chip
273-
label={labLearners ? formatPrice(secondaryOptions[0].price) : "Disabled"}
278+
label={labLearners ? formatPrice(isYearly ? secondaryOptions[0].yearlyPrice : secondaryOptions[0].price) : "Disabled"}
274279
color={labLearners ? "success" : "default"}
275280
sx={{ minWidth: 100 }}
276281
/>
@@ -303,7 +308,7 @@ export const PricingAddons = () => {
303308
}}
304309
>
305310
<Typography variant="h6" gutterBottom fontWeight="600">
306-
Price Breakdown
311+
Subtotal
307312
</Typography>
308313

309314
<Box sx={{ display: "flex", flexDirection: "column", gap: 2, mb: 3 }}>
@@ -312,7 +317,7 @@ export const PricingAddons = () => {
312317
{selectedAddon.name} × {quantity}
313318
</Typography>
314319
<Typography variant="body1" fontWeight="500">
315-
{formatPrice(selectedAddon.basePrice * quantity)}
320+
{formatPrice((isYearly ? selectedAddon.yearlyPrice : selectedAddon.basePrice) * quantity)}
316321
</Typography>
317322
</Box>
318323

@@ -322,7 +327,7 @@ export const PricingAddons = () => {
322327
{secondaryOptions[0].name}
323328
</Typography>
324329
<Typography variant="body1" fontWeight="500">
325-
{formatPrice(secondaryOptions[0].price)}
330+
{formatPrice(isYearly ? secondaryOptions[0].yearlyPrice : secondaryOptions[0].price)}
326331
</Typography>
327332
</Box>
328333
)}
@@ -331,17 +336,16 @@ export const PricingAddons = () => {
331336

332337
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
333338
<Typography variant="h5" fontWeight="bold">
334-
Total Monthly Cost
339+
Total {isYearly ? "Annual" : "Monthly"} Cost
335340
</Typography>
336-
<Typography variant="h4" fontWeight="bold" color="primary.main">
341+
<Typography variant="h4" fontWeight="bold" color="primary.light">
337342
{formatPrice(totalPrice)}
338343
</Typography>
339344
</Box>
340345
</Box>
341346

342347
<Typography variant="caption" color="text.secondary">
343-
* Prices shown are monthly subscription costs. Annual subscriptions receive a 15% discount.
344-
Contact our sales team for enterprise pricing and custom configurations.
348+
* Prices shown are {isYearly ? "annual" : "monthly"} subscription costs. {isYearly ? "Monthly subscriptions are available at standard rates." : "Annual subscriptions receive a 15% discount."} Contact our sales team for enterprise pricing and custom configurations.
345349
</Typography>
346350
</Paper>
347351
</>

0 commit comments

Comments
 (0)