Skip to content

Commit 85e8ad7

Browse files
leecalcoteleecalcote
committed
Add plan links for Academy add-ons and integrate subscription button in PricingAddons component
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 8718c69 commit 85e8ad7

2 files changed

Lines changed: 97 additions & 4 deletions

File tree

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

Lines changed: 68 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
66
import { getAddOns } from "./pricingData";
77
import FeatureDetails from "../PlanCard/collapsible-details";
88
import PlanCardWrapper from "../PlanCard/planCard.style";
9+
import Button from "../../../reusecore/Button";
910

1011

1112
/* eslint-disable indent */
@@ -96,6 +97,65 @@ export const PricingAddons = ({ isYearly = false }) => {
9697
}).format(price);
9798
};
9899

100+
// Helper function to get the correct plan link for Academy sub-addons
101+
const getPlanLinkForAcademy = () => {
102+
if (!selectedAddon || selectedAddon.id !== "academy") {
103+
return { link: "#", name: "Subscribe" };
104+
}
105+
106+
// For Academy, we need to handle multiple potential sub-addons
107+
// Priority: if practical learning is selected, use that; otherwise use theory
108+
let targetSubAddon = null;
109+
let targetSubAddonName = "";
110+
111+
// Check if practical learning is selected
112+
if (selectedSubAddOns["academy-practical"]) {
113+
targetSubAddon = selectedAddon.subAddOns?.find(sub => sub.id === "academy-practical");
114+
targetSubAddonName = "with Practical Learning";
115+
} else {
116+
// Use theoretical learning (base addon that's always included)
117+
targetSubAddon = selectedAddon.subAddOns?.find(sub => sub.id === "academy-theory");
118+
targetSubAddonName = "";
119+
}
120+
121+
if (!targetSubAddon?.planLink || !targetSubAddon.pricing?.[quantityIndex]) {
122+
return { link: "#", name: "Subscribe" };
123+
}
124+
125+
const currentCadence = isYearlyState ? "yearly" : "monthly";
126+
const currentLearnerCount = targetSubAddon.pricing[quantityIndex].learners;
127+
128+
// Find the matching plan link based on cadence and learner count
129+
const matchingPlanLink = targetSubAddon.planLink.find(
130+
plan => plan.cadence === currentCadence && plan.learners === currentLearnerCount
131+
);
132+
133+
if (matchingPlanLink) {
134+
return {
135+
link: matchingPlanLink.link,
136+
name: `Subscribe (${currentLearnerCount} learners${targetSubAddonName ? " " + targetSubAddonName : ""})`
137+
};
138+
}
139+
140+
// Fallback if no exact match
141+
return { link: "#", name: "Subscribe" };
142+
};
143+
144+
// Helper function to get plan link for other addons
145+
const getPlanLinkForOtherAddons = () => {
146+
if (!selectedAddon || selectedAddon.id === "academy") {
147+
return { link: "#", name: "Subscribe" };
148+
}
149+
150+
// For non-Academy addons, they don't have specific plan links in the current data structure
151+
// So we'll create a generic subscription link - this might need to be updated
152+
// with actual subscription URLs when they become available
153+
return {
154+
link: "#", // This should be updated with actual subscription URL
155+
name: `Subscribe to ${selectedAddon.name}`
156+
};
157+
};
158+
99159
return (
100160
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
101161
<CssBaseline>
@@ -385,9 +445,6 @@ Add-on Selection
385445
})) || []}
386446
/>
387447
<Box sx={{ display: "flex", my: 2, justifyContent: "space-between" }}>
388-
{/* <Typography variant="body2" color="text.secondary" sx={{ fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }}>
389-
learners
390-
</Typography> */}
391448
<Typography variant="body2" sx={{ fontStyle: "italic", color: "text.secondary", fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }}>
392449
Looking for a plan larger than 2,500 learners? Great! <Link to="/contact">Let us know</Link>.
393450
{/* {selectedAddon?.maxUnits} */}
@@ -575,6 +632,14 @@ Add-on Selection
575632
</Typography>
576633
</Typography>
577634
</Box>
635+
<Box sx={{ display: "flex", justifyContent: "center", mt: 1 }}>
636+
<Button
637+
$primary
638+
$url={selectedAddon?.id === "academy" ? getPlanLinkForAcademy().link : getPlanLinkForOtherAddons().link}
639+
>
640+
{selectedAddon?.id === "academy" ? getPlanLinkForAcademy().name : getPlanLinkForOtherAddons().name}
641+
</Button>
642+
</Box>
578643
</Box>
579644

580645
<Typography sx={{ lineHeight: "1rem", fontSize: "0.8rem", fontStyle: "italic", fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }} color="text.secondary">

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,19 @@ import React from "react";
22
import { Cloud, Group } from "@mui/icons-material";
33
import AcademyIcon from "./AcademyIcon";
44

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+
514
// Academy add-ons have tiered pricing based on the number of learners
615

16+
17+
718
export const getAddOns = (theme) => [
819
{
920
id: "academy",
@@ -30,6 +41,15 @@ export const getAddOns = (theme) => [
3041
{ learners: 2500, monthlyPerUser: 0.44, yearlyPerUser: 0.44, currency: "$" },
3142
// { learners: "2500+", monthlyPerUser: "contact us", yearlyPerUser: "contact us", currency: "$" },
3243
],
44+
planLink: [
45+
{ learners: 250, cadence: "monthly", name: "enterprise-add-on-academy-theory-250", link: "https://cloud.layer5.io/account/plans/upgrade?plan=7fe3c084-c25d-4add-88da-70f7de1b1338", },
46+
{ learners: 500, cadence: "monthly", name: "enterprise-add-on-academy-theory-500", link: "https://cloud.layer5.io/account/plans/upgrade?plan=3b1c48e1-456d-405d-9639-4794e8a78f6c"},
47+
{ learners: 1000, cadence: "monthly", name: "enterprise-add-on-academy-theory-1000", link: "https://cloud.layer5.io/account/plans/upgrade?plan=8d641b71-cc54-4e77-9908-4f66bfecd4ba" },
48+
{ learners: 2500, cadence: "monthly", name: "enterprise-add-on-academy-theory-2500", link: "https://cloud.layer5.io/account/plans/upgrade?plan=7a7569b4-e552-481c-a323-d51ebfe603d0" },{ learners: 250, cadence: "yearly", name: "enterprise-add-on-academy-theory-250", link: "https://cloud.layer5.io/account/plans/upgrade?plan=4c4c7f40-dcc5-4ab9-b381-ee4d1ee4f603", },
49+
{ learners: 500, cadence: "yearly", name: "enterprise-add-on-academy-theory-500", link: "https://cloud.layer5.io/account/plans/upgrade?plan=13b69e5e-0cc2-4a24-948c-4955d1c9c44d"},
50+
{ learners: 1000, cadence: "yearly", name: "enterprise-add-on-academy-theory-1000", link: "https://cloud.layer5.io/account/plans/upgrade?plan=9dcdef1a-283c-4405-acf0-cdd76ba9ec65" },
51+
{ learners: 2500, cadence: "yearly", name: "enterprise-add-on-academy-theory-2500", link: "https://cloud.layer5.io/account/plans/upgrade?plan=7a7569b4-e552-481c-a323-d51ebfe603d0" },
52+
],
3353
features: ["Learning Paths", "Challenges", "Certifications", "Instructor Console"],
3454
},
3555
{
@@ -42,7 +62,15 @@ export const getAddOns = (theme) => [
4262
{ learners: 500, monthlyPerUser: 0.80, yearlyPerUser: 0.67, currency: "$" },
4363
{ learners: 1000, monthlyPerUser: 0.49, yearlyPerUser: 0.49, currency: "$" },
4464
{ learners: 2500, monthlyPerUser: 0.44, yearlyPerUser: 0.44, currency: "$" },
45-
// { learners: "2500+", monthlyPerUser: "contact us", yearlyPerUser: "contact us", currency: "$" },
65+
],
66+
planLink: [
67+
{ learners: 250, cadence: "monthly", name: "enterprise-add-on-academy-labs-250", link: "https://cloud.layer5.io/account/plans/upgrade?plan=cc52a8c7-8f19-4475-8a43-896711438423", },
68+
{ learners: 500, cadence: "monthly", name: "enterprise-add-on-academy-labs-500", link: "https://cloud.layer5.io/account/plans/upgrade?plan=5643b020-fba2-41e5-a26a-8e7dd00728eb"},
69+
{ learners: 1000, cadence: "monthly", name: "enterprise-add-on-academy-labs-1000", link: "https://cloud.layer5.io/account/plans/upgrade?plan=ac7b571a-97c4-4c38-896a-c7228cf6cd75" },
70+
{ learners: 2500, cadence: "monthly", name: "enterprise-add-on-academy-labs-2500", link: "https://cloud.layer5.io/account/plans/upgrade?plan=aace63be-0f9c-4147-a30b-21b8b741c0e4" },{ learners: 250, cadence: "yearly", name: "enterprise-add-on-academy-labs-250", link: "https://cloud.layer5.io/account/plans/upgrade?plan=33cf6739-af74-4ef2-ae51-4e21cc915a84", },
71+
{ learners: 500, cadence: "yearly", name: "enterprise-add-on-academy-labs-500", link: "https://cloud.layer5.io/account/plans/upgrade?plan=0c15f971-45a6-4429-98a9-407eaa430ae8"},
72+
{ learners: 1000, cadence: "yearly", name: "enterprise-add-on-academy-labs-1000", link: "https://cloud.layer5.io/account/plans/upgrade?plan=88d4bd46-5c0f-4b32-bc6c-6d37b555c993" },
73+
{ learners: 2500, cadence: "yearly", name: "enterprise-add-on-academy-labs-2500", link: "https://cloud.layer5.io/account/plans/upgrade?plan=5c34cf16-2884-4606-94e5-e95985e1b42c" },
4674
],
4775
features: ["Hands-on Learning", "Collaborative Instruction", "Visual Design", "Orchestrated Infrastructure"],
4876
}

0 commit comments

Comments
 (0)