Skip to content

Commit 23ac39b

Browse files
committed
Enhance PricingAddons: Refactor icon handling and update getAddOns to use icon types
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 45e3da6 commit 23ac39b

2 files changed

Lines changed: 27 additions & 26 deletions

File tree

src/components/Pricing/PricingAddons/index.js

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,13 @@ import {
2121
useTheme,
2222
SistentThemeProvider
2323
} from "@sistent/sistent";
24-
import { Calculate, CheckCircle } from "@mui/icons-material";
24+
import { Calculate, CheckCircle, Cloud, Group } from "@mui/icons-material";
2525
import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
2626
import { getAddOns } from "./pricingData";
2727
import FeatureDetails from "../PlanCard/collapsible-details";
2828
import PlanCardWrapper from "../PlanCard/planCard.style";
2929
import Button from "../../../reusecore/Button";
30+
import AcademyIcon from "./AcademyIcon";
3031

3132
export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan }) => {
3233
const [selectedAddon, setSelectedAddon] = useState(null);
@@ -41,8 +42,25 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
4142
const theme = useTheme();
4243

4344
const addOns = React.useMemo(() => {
44-
return theme ? getAddOns(theme) : [];
45-
}, [theme]);
45+
return getAddOns();
46+
}, []);
47+
48+
// Helper function to render icons based on type
49+
const renderIcon = (iconType) => {
50+
switch (iconType) {
51+
case "academy":
52+
return <AcademyIcon
53+
primaryFill={theme?.palette?.background?.inverse || "#00B39F"}
54+
secondaryFill={theme?.palette?.background?.inverse || "#eee"}
55+
/>;
56+
case "cloud":
57+
return <Cloud sx={{ color: theme?.palette?.background?.inverse || "#FFFFFF" }} />;
58+
case "group":
59+
return <Group sx={{ color: theme?.palette?.background?.inverse || "#00B39F" }} />;
60+
default:
61+
return null;
62+
}
63+
};
4664

4765
useEffect(() => {
4866
if (selectedAddon) {
@@ -272,7 +290,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
272290
{addOns.map((addon) => (
273291
<MenuItem key={addon.id} value={addon.id}>
274292
<Box sx={{ display: "flex", alignItems: "center", gap: 2, py: 1 }}>
275-
{addon.icon}
293+
{renderIcon(addon.iconType)}
276294
<Box>
277295
<Typography variant="body1" fontWeight="500" sx={{ fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }}>
278296
{addon.name}

src/components/Pricing/PricingAddons/pricingData.js

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,12 @@
1-
import React from "react";
2-
import { Cloud, Group } from "@mui/icons-material";
3-
import AcademyIcon from "./AcademyIcon";
4-
5-
6-
// const planLink = {
7-
// "Personal": "https://cloud.layer5.io/account/plans",
8-
// "Team Designer": "https://cloud.layer5.io/account/plans/upgrade?plan=49b77ce8-eeea-4ec4-adf3-48979a14b140",
9-
// "Team Operator": "https://cloud.layer5.io/account/plans/upgrade?plan=f7a5b2b5-b36b-421e-9211-f4dfb204e5b3",
10-
// "Enterprise": "https://cloud.layer5.io/account/plans/upgrade?plan=ad68ce59-8c5a-42b0-955c-9b2b2f7c98e3"
11-
// };
12-
13-
141
// Academy add-ons have tiered pricing based on the number of learners
2+
// Icons are handled separately to avoid serialization issues
153

16-
17-
18-
export const getAddOns = (theme) => [
4+
export const getAddOns = () => [
195
{
206
id: "academy",
217
name: "Academy",
228
description: "A comprehensive learning management system for creators and learners.",
23-
icon: <AcademyIcon
24-
primaryFill={theme?.palette?.background?.inverse || "#00B39F"}
25-
secondaryFill={theme?.palette?.background?.inverse || "#eee"}
26-
/>,
9+
iconType: "academy", // Reference to icon type instead of component
2710
unitLabel: "learners",
2811
unitLabelSingular: "learner",
2912
maxUnits: 5000,
@@ -86,7 +69,7 @@ export const getAddOns = (theme) => [
8669
description: "Managed cloud instances for comprehensive infrastructure configuration and lifecycle management",
8770
monthlyPrice: 64,
8871
yearlyPrice: 653, // ~15% discount for yearly
89-
icon: <Cloud sx={{ color: theme?.palette?.background?.inverse || "#FFFFFF" }} />,
72+
iconType: "cloud", // Reference to icon type instead of component
9073
unitLabel: "servers",
9174
unitLabelSingular: "server",
9275
maxUnits: 50,
@@ -103,7 +86,7 @@ export const getAddOns = (theme) => [
10386
description: "This premium offering delivers a secure, high-performance WebRTC solution, purpose-built for real-time, multiplayer collaboration across distributed teams. Powered by Conflict-Free Replicated Data Types (CRDT), this feature ensures seamless, low-latency synchronization of cloud native designs, configurations, and operational workflows, even in complex multi-cluster Kubernetes and public Cloud environments.",
10487
monthlyPrice: 1.50,
10588
yearlyPrice: 15.30, // ~15% discount for yearly
106-
icon: <Group sx={{ color: theme?.palette?.background?.inverse || "#00B39F" }} />,
89+
iconType: "group", // Reference to icon type instead of component
10790
unitLabel: "collaborators",
10891
unitLabelSingular: "collaborator",
10992
maxUnits: 200,

0 commit comments

Comments
 (0)