Enhance PricingAddons: Refactor icon handling and update getAddOns to use icon types

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

src/components/Pricing/PricingAddons/index.js

@@ -21,12 +21,13 @@ import {
   useTheme,
   SistentThemeProvider
 } from  "@sistent/sistent";
-import { Calculate, CheckCircle } from "@mui/icons-material";
+import { Calculate, CheckCircle, Cloud, Group } from "@mui/icons-material";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 import { getAddOns } from "./pricingData";
 import FeatureDetails from "../PlanCard/collapsible-details";
 import PlanCardWrapper from "../PlanCard/planCard.style";
 import Button from "../../../reusecore/Button";
+import AcademyIcon from "./AcademyIcon";
 
 export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan }) => {
   const [selectedAddon, setSelectedAddon] = useState(null);
@@ -41,8 +42,25 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
   const theme = useTheme();
 
   const addOns = React.useMemo(() => {
-    return theme ? getAddOns(theme) : [];
-  }, [theme]);
+    return getAddOns();
+  }, []);
+
+  // Helper function to render icons based on type
+  const renderIcon = (iconType) => {
+    switch (iconType) {
+    case "academy":
+      return <AcademyIcon
+        primaryFill={theme?.palette?.background?.inverse || "#00B39F"}
+        secondaryFill={theme?.palette?.background?.inverse || "#eee"}
+      />;
+    case "cloud":
+      return <Cloud sx={{ color: theme?.palette?.background?.inverse || "#FFFFFF" }} />;
+    case "group":
+      return <Group sx={{ color: theme?.palette?.background?.inverse || "#00B39F" }} />;
+    default:
+      return null;
+    }
+  };
 
   useEffect(() => {
     if (selectedAddon) {
@@ -272,7 +290,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, enterprisePlan })
                         {addOns.map((addon) => (
                           <MenuItem key={addon.id} value={addon.id}>
                             <Box sx={{ display: "flex", alignItems: "center", gap: 2, py: 1 }}>
-                              {addon.icon}
+                              {renderIcon(addon.iconType)}
                               <Box>
                                 <Typography variant="body1" fontWeight="500" sx={{ fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }}>
                                   {addon.name}

src/components/Pricing/PricingAddons/pricingData.js

@@ -1,29 +1,12 @@
-import React from "react";
-import { Cloud, Group } from "@mui/icons-material";
-import AcademyIcon from "./AcademyIcon";
-
-
-// const planLink = {
-//   "Personal": "https://cloud.layer5.io/account/plans",
-//   "Team Designer": "https://cloud.layer5.io/account/plans/upgrade?plan=49b77ce8-eeea-4ec4-adf3-48979a14b140",
-//   "Team Operator": "https://cloud.layer5.io/account/plans/upgrade?plan=f7a5b2b5-b36b-421e-9211-f4dfb204e5b3",
-//   "Enterprise": "https://cloud.layer5.io/account/plans/upgrade?plan=ad68ce59-8c5a-42b0-955c-9b2b2f7c98e3"
-// };
-
-
 // Academy add-ons have tiered pricing based on the number of learners
+// Icons are handled separately to avoid serialization issues
 
-
-
-export const getAddOns = (theme) => [
+export const getAddOns = () => [
   {
     id: "academy",
     name: "Academy",
     description: "A comprehensive learning management system for creators and learners.",
-    icon: <AcademyIcon
-      primaryFill={theme?.palette?.background?.inverse || "#00B39F"}
-      secondaryFill={theme?.palette?.background?.inverse || "#eee"}
-    />,
+    iconType: "academy", // Reference to icon type instead of component
     unitLabel: "learners",
     unitLabelSingular: "learner",
     maxUnits: 5000,
@@ -86,7 +69,7 @@ export const getAddOns = (theme) => [
     description: "Managed cloud instances for comprehensive infrastructure configuration and lifecycle management",
     monthlyPrice: 64,
     yearlyPrice: 653, // ~15% discount for yearly
-    icon: <Cloud sx={{ color: theme?.palette?.background?.inverse || "#FFFFFF" }} />,
+    iconType: "cloud", // Reference to icon type instead of component
     unitLabel: "servers",
     unitLabelSingular: "server",
     maxUnits: 50,
@@ -103,7 +86,7 @@ export const getAddOns = (theme) => [
     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.",
     monthlyPrice: 1.50,
     yearlyPrice: 15.30, // ~15% discount for yearly
-    icon: <Group sx={{ color: theme?.palette?.background?.inverse || "#00B39F" }} />,
+    iconType: "group", // Reference to icon type instead of component
     unitLabel: "collaborators",
     unitLabelSingular: "collaborator",
     maxUnits: 200,