@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

package/dist/PricingSection/PricingCard/types.js

@@ -1,63 +1,66 @@
-/* eslint-disable @typescript-eslint/no-duplicate-enum-values */
-export let Currency = /*#__PURE__*/function (Currency) {
-  Currency["Aud"] = "AUD";
-  Currency["Cad"] = "CAD";
-  Currency["Eur"] = "EUR";
-  Currency["Gbp"] = "GBP";
-  Currency["Inr"] = "INR";
-  Currency["Nok"] = "NOK";
-  Currency["Pln"] = "PLN";
-  Currency["Sek"] = "SEK";
-  Currency["Usd"] = "USD";
-  return Currency;
+//#region src/PricingSection/PricingCard/types.ts
+let Currency = /* @__PURE__ */ function(Currency$1) {
+	Currency$1["Aud"] = "AUD";
+	Currency$1["Cad"] = "CAD";
+	Currency$1["Eur"] = "EUR";
+	Currency$1["Gbp"] = "GBP";
+	Currency$1["Inr"] = "INR";
+	Currency$1["Nok"] = "NOK";
+	Currency$1["Pln"] = "PLN";
+	Currency$1["Sek"] = "SEK";
+	Currency$1["Usd"] = "USD";
+	return Currency$1;
 }({});
-export let CFBCurrency = /*#__PURE__*/function (CFBCurrency) {
-  CFBCurrency["Dkk"] = "DKK";
-  CFBCurrency["Brl"] = "BRL";
-  CFBCurrency["Bgn"] = "BGN";
-  CFBCurrency["Chf"] = "CHF";
-  CFBCurrency["Czk"] = "CZK";
-  CFBCurrency["Hrk"] = "HRK";
-  CFBCurrency["Huf"] = "HUF";
-  CFBCurrency["Mxn"] = "MXN";
-  CFBCurrency["Ron"] = "RON";
-  return CFBCurrency;
+let CFBCurrency = /* @__PURE__ */ function(CFBCurrency$1) {
+	CFBCurrency$1["Dkk"] = "DKK";
+	CFBCurrency$1["Brl"] = "BRL";
+	CFBCurrency$1["Bgn"] = "BGN";
+	CFBCurrency$1["Chf"] = "CHF";
+	CFBCurrency$1["Czk"] = "CZK";
+	CFBCurrency$1["Hrk"] = "HRK";
+	CFBCurrency$1["Huf"] = "HUF";
+	CFBCurrency$1["Mxn"] = "MXN";
+	CFBCurrency$1["Ron"] = "RON";
+	return CFBCurrency$1;
 }({});
-export let CurrencySymbol = /*#__PURE__*/function (CurrencySymbol) {
-  CurrencySymbol["Dollar"] = "$";
-  CurrencySymbol["Pound"] = "\xA3";
-  CurrencySymbol["Euro"] = "\u20AC";
-  CurrencySymbol["Rupee"] = "\u20B9";
-  CurrencySymbol["Krona"] = "kr";
-  CurrencySymbol["Krone"] = "kr";
-  CurrencySymbol["ZLOTY"] = "z\u0142";
-  CurrencySymbol["Lev"] = "\u041B\u0432.";
-  CurrencySymbol["Real"] = "R$";
-  CurrencySymbol["Franc"] = "Fr.";
-  CurrencySymbol["Koruna"] = "K\u010D";
-  CurrencySymbol["Kuna"] = "kn";
-  CurrencySymbol["Forint"] = "Ft";
-  CurrencySymbol["Leu"] = "lei";
-  return CurrencySymbol;
+let CurrencySymbol = /* @__PURE__ */ function(CurrencySymbol$1) {
+	CurrencySymbol$1["Dollar"] = "$";
+	CurrencySymbol$1["Pound"] = "£";
+	CurrencySymbol$1["Euro"] = "€";
+	CurrencySymbol$1["Rupee"] = "₹";
+	CurrencySymbol$1["Krona"] = "kr";
+	CurrencySymbol$1["Krone"] = "kr";
+	CurrencySymbol$1["ZLOTY"] = "zł";
+	CurrencySymbol$1["Lev"] = "Лв.";
+	CurrencySymbol$1["Real"] = "R$";
+	CurrencySymbol$1["Franc"] = "Fr.";
+	CurrencySymbol$1["Koruna"] = "Kč";
+	CurrencySymbol$1["Kuna"] = "kn";
+	CurrencySymbol$1["Forint"] = "Ft";
+	CurrencySymbol$1["Leu"] = "lei";
+	return CurrencySymbol$1;
 }({});
 const currencySymbols = {
-  [Currency.Usd]: CurrencySymbol.Dollar,
-  [Currency.Cad]: CurrencySymbol.Dollar,
-  [Currency.Aud]: CurrencySymbol.Dollar,
-  [Currency.Eur]: CurrencySymbol.Euro,
-  [Currency.Gbp]: CurrencySymbol.Pound,
-  [Currency.Inr]: CurrencySymbol.Rupee,
-  [Currency.Sek]: CurrencySymbol.Krona,
-  [Currency.Nok]: CurrencySymbol.Krone,
-  [Currency.Pln]: CurrencySymbol.ZLOTY,
-  [CFBCurrency.Bgn]: CurrencySymbol.Lev,
-  [CFBCurrency.Brl]: CurrencySymbol.Real,
-  [CFBCurrency.Chf]: CurrencySymbol.Franc,
-  [CFBCurrency.Czk]: CurrencySymbol.Koruna,
-  [CFBCurrency.Dkk]: CurrencySymbol.Krone,
-  [CFBCurrency.Hrk]: CurrencySymbol.Kuna,
-  [CFBCurrency.Huf]: CurrencySymbol.Forint,
-  [CFBCurrency.Mxn]: CurrencySymbol.Dollar,
-  [CFBCurrency.Ron]: CurrencySymbol.Leu
+	[Currency.Usd]: CurrencySymbol.Dollar,
+	[Currency.Cad]: CurrencySymbol.Dollar,
+	[Currency.Aud]: CurrencySymbol.Dollar,
+	[Currency.Eur]: CurrencySymbol.Euro,
+	[Currency.Gbp]: CurrencySymbol.Pound,
+	[Currency.Inr]: CurrencySymbol.Rupee,
+	[Currency.Sek]: CurrencySymbol.Krona,
+	[Currency.Nok]: CurrencySymbol.Krone,
+	[Currency.Pln]: CurrencySymbol.ZLOTY,
+	[CFBCurrency.Bgn]: CurrencySymbol.Lev,
+	[CFBCurrency.Brl]: CurrencySymbol.Real,
+	[CFBCurrency.Chf]: CurrencySymbol.Franc,
+	[CFBCurrency.Czk]: CurrencySymbol.Koruna,
+	[CFBCurrency.Dkk]: CurrencySymbol.Krone,
+	[CFBCurrency.Hrk]: CurrencySymbol.Kuna,
+	[CFBCurrency.Huf]: CurrencySymbol.Forint,
+	[CFBCurrency.Mxn]: CurrencySymbol.Dollar,
+	[CFBCurrency.Ron]: CurrencySymbol.Leu
 };
-export const getCurrencySymbol = currency => currencySymbols[currency];
+const getCurrencySymbol = (currency) => currencySymbols[currency];
+
+//#endregion
+export { getCurrencySymbol };

package/dist/PricingSection/ProductCTA.cjs

@@ -0,0 +1,106 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_types = require('./types.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/PricingSection/ProductCTA.tsx
+const getCTATitle = (product, isTrialPlan, isPlusUser) => {
+	switch (product) {
+		case require_types.Product.Teams:
+			if (isTrialPlan) return "Try Teams for free";
+			return "Purchase now";
+		case require_types.Product.Enterprise: return "Request a demo";
+		case require_types.Product.Basic: return "Sign up";
+		case require_types.Product.Pro:
+		case require_types.Product.Gold:
+			if (isTrialPlan) return "Try Pro for free";
+			if (isPlusUser) return "Upgrade to Pro";
+			return "Upgrade now";
+		case require_types.Product.Silver:
+			if (isTrialPlan) return "Try Plus for free";
+			if (isPlusUser) return "Your current plan";
+			return "Upgrade now";
+		default: return "";
+	}
+};
+const getCTAUrl = ({ product, productDetails, userHasSilver }) => {
+	const planId = productDetails?.planId;
+	switch (product) {
+		case require_types.Product.Basic: return "/register";
+		case require_types.Product.Pro:
+		case require_types.Product.Silver:
+		case require_types.Product.Gold:
+			if (userHasSilver) return "/account/billing?changePlan=true";
+			return `/checkout?plan_id=${planId || void 0}`;
+		case require_types.Product.Teams: return "/business/checkout?plan_type=trial";
+		case require_types.Product.Enterprise: return "/business/teams-quote";
+		default: return "";
+	}
+};
+const ProductCTA = ({ product, productDetails, user, simple, trackBusinessClick }) => {
+	const userHasBasic = !user.anonymous && (!user.proSilver || !user.proGold);
+	const userHasSilver = user.proSilver;
+	const isTeams = product === require_types.Product.Teams;
+	const isEnterprise = product === require_types.Product.Enterprise;
+	const shouldHideCTA = () => {
+		if (isTeams) return false;
+		if ((userHasBasic || userHasSilver) && product === require_types.Product.Basic) return true;
+		if (userHasSilver) return false;
+		if (user.proGold) return true;
+		return false;
+	};
+	const hideCTAButton = shouldHideCTA();
+	const ButtonComponent = product === require_types.Product.Gold || product === require_types.Product.Pro || product === require_types.Product.Teams ? _codecademy_gamut.FillButton : _codecademy_gamut.StrokeButton;
+	return hideCTAButton ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+		pt: 0,
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		flexDirection: isTeams && !simple ? "row" : "column",
+		gap: 8,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonComponent, {
+			mt: 8,
+			disabled: product === require_types.Product.Silver && userHasSilver,
+			href: getCTAUrl({
+				productDetails,
+				product,
+				userHasSilver
+			}),
+			onClick: () => {
+				if (trackBusinessClick) {
+					if (isTeams) trackBusinessClick({
+						target: "business_trial",
+						context: "top_card"
+					});
+					if (isEnterprise) trackBusinessClick({
+						target: "business_enterprise",
+						context: "top_card"
+					});
+				}
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				as: "span",
+				children: getCTATitle(product, !!productDetails?.isTrialPlan, userHasSilver)
+			})
+		}), isTeams ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [simple ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+			as: "span",
+			mt: 8,
+			children: ` or `
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			mt: 8,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.StrokeButton, {
+				href: "/business/checkout?plan_type=directpurchase",
+				onClick: () => {
+					if (trackBusinessClick) trackBusinessClick({
+						target: "business_purchase",
+						context: "top_card"
+					});
+				},
+				children: "Purchase now"
+			})
+		})] }) : null]
+	});
+};
+
+//#endregion
+exports.ProductCTA = ProductCTA;

package/dist/PricingSection/ProductCTA.js

@@ -1,135 +1,105 @@
-import { Box, FillButton, FlexBox, StrokeButton, Text } from '@codecademy/gamut';
-import { Product } from './types';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const getCTATitle = (product, isTrialPlan, isPlusUser) => {
-  switch (product) {
-    case Product.Teams:
-      if (isTrialPlan) {
-        return 'Try Teams for free';
-      }
-      return 'Purchase now';
-    case Product.Enterprise:
-      return 'Request a demo';
-    case Product.Basic:
-      return 'Sign up';
-    case Product.Pro:
-    case Product.Gold:
-      if (isTrialPlan) {
-        return 'Try Pro for free';
-      }
-      if (isPlusUser) return 'Upgrade to Pro';
-      return 'Upgrade now';
-    case Product.Silver:
-      if (isTrialPlan) {
-        return 'Try Plus for free';
-      }
-      if (isPlusUser) return 'Your current plan';
-      return 'Upgrade now';
-    default:
-      return '';
-  }
+import { Product } from "./types.js";
+import { Box, FillButton, FlexBox, StrokeButton, Text } from "@codecademy/gamut";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/PricingSection/ProductCTA.tsx
+const getCTATitle = (product, isTrialPlan, isPlusUser) => {
+	switch (product) {
+		case Product.Teams:
+			if (isTrialPlan) return "Try Teams for free";
+			return "Purchase now";
+		case Product.Enterprise: return "Request a demo";
+		case Product.Basic: return "Sign up";
+		case Product.Pro:
+		case Product.Gold:
+			if (isTrialPlan) return "Try Pro for free";
+			if (isPlusUser) return "Upgrade to Pro";
+			return "Upgrade now";
+		case Product.Silver:
+			if (isTrialPlan) return "Try Plus for free";
+			if (isPlusUser) return "Your current plan";
+			return "Upgrade now";
+		default: return "";
+	}
 };
-const getCTAUrl = ({
-  product,
-  productDetails,
-  userHasSilver
-}) => {
-  const planId = productDetails?.planId;
-  switch (product) {
-    case Product.Basic:
-      return '/register';
-    case Product.Pro:
-    case Product.Silver:
-    case Product.Gold:
-      if (userHasSilver) {
-        return '/account/billing?changePlan=true';
-      }
-      return `/checkout?plan_id=${planId || undefined}`;
-    case Product.Teams:
-      return '/business/checkout?plan_type=trial';
-    case Product.Enterprise:
-      return '/business/teams-quote';
-    default:
-      return '';
-  }
+const getCTAUrl = ({ product, productDetails, userHasSilver }) => {
+	const planId = productDetails?.planId;
+	switch (product) {
+		case Product.Basic: return "/register";
+		case Product.Pro:
+		case Product.Silver:
+		case Product.Gold:
+			if (userHasSilver) return "/account/billing?changePlan=true";
+			return `/checkout?plan_id=${planId || void 0}`;
+		case Product.Teams: return "/business/checkout?plan_type=trial";
+		case Product.Enterprise: return "/business/teams-quote";
+		default: return "";
+	}
 };
-export const ProductCTA = ({
-  product,
-  productDetails,
-  user,
-  simple,
-  trackBusinessClick
-}) => {
-  const userHasBasic = !user.anonymous && (!user.proSilver || !user.proGold);
-  const userHasSilver = user.proSilver;
-  const isTeams = product === Product.Teams;
-  const isEnterprise = product === Product.Enterprise;
-  const shouldHideCTA = () => {
-    if (isTeams) return false;
-    if ((userHasBasic || userHasSilver) && product === Product.Basic) {
-      return true;
-    }
-    if (userHasSilver) return false;
-    if (user.proGold) return true;
-    return false;
-  };
-  const hideCTAButton = shouldHideCTA();
-  const ButtonComponent = product === Product.Gold || product === Product.Pro || product === Product.Teams ? FillButton : StrokeButton;
-  return hideCTAButton ? null : /*#__PURE__*/_jsxs(Box, {
-    pt: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexDirection: isTeams && !simple ? 'row' : 'column',
-    gap: 8,
-    children: [/*#__PURE__*/_jsx(ButtonComponent, {
-      mt: 8,
-      disabled: product === Product.Silver && userHasSilver,
-      href: getCTAUrl({
-        productDetails,
-        product,
-        userHasSilver
-      }),
-      onClick: () => {
-        if (trackBusinessClick) {
-          if (isTeams) {
-            trackBusinessClick({
-              target: 'business_trial',
-              context: 'top_card'
-            });
-          }
-          if (isEnterprise) {
-            trackBusinessClick({
-              target: 'business_enterprise',
-              context: 'top_card'
-            });
-          }
-        }
-      },
-      children: /*#__PURE__*/_jsx(Text, {
-        as: "span",
-        children: getCTATitle(product, !!productDetails?.isTrialPlan, userHasSilver)
-      })
-    }), isTeams ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [simple ? null : /*#__PURE__*/_jsx(Text, {
-        as: "span",
-        mt: 8,
-        children: ` or `
-      }), /*#__PURE__*/_jsx(FlexBox, {
-        mt: 8,
-        children: /*#__PURE__*/_jsx(StrokeButton, {
-          href: "/business/checkout?plan_type=directpurchase",
-          onClick: () => {
-            if (trackBusinessClick) {
-              trackBusinessClick({
-                target: 'business_purchase',
-                context: 'top_card'
-              });
-            }
-          },
-          children: "Purchase now"
-        })
-      })]
-    }) : null]
-  });
-};
+const ProductCTA = ({ product, productDetails, user, simple, trackBusinessClick }) => {
+	const userHasBasic = !user.anonymous && (!user.proSilver || !user.proGold);
+	const userHasSilver = user.proSilver;
+	const isTeams = product === Product.Teams;
+	const isEnterprise = product === Product.Enterprise;
+	const shouldHideCTA = () => {
+		if (isTeams) return false;
+		if ((userHasBasic || userHasSilver) && product === Product.Basic) return true;
+		if (userHasSilver) return false;
+		if (user.proGold) return true;
+		return false;
+	};
+	const hideCTAButton = shouldHideCTA();
+	const ButtonComponent = product === Product.Gold || product === Product.Pro || product === Product.Teams ? FillButton : StrokeButton;
+	return hideCTAButton ? null : /* @__PURE__ */ jsxs(Box, {
+		pt: 0,
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		flexDirection: isTeams && !simple ? "row" : "column",
+		gap: 8,
+		children: [/* @__PURE__ */ jsx(ButtonComponent, {
+			mt: 8,
+			disabled: product === Product.Silver && userHasSilver,
+			href: getCTAUrl({
+				productDetails,
+				product,
+				userHasSilver
+			}),
+			onClick: () => {
+				if (trackBusinessClick) {
+					if (isTeams) trackBusinessClick({
+						target: "business_trial",
+						context: "top_card"
+					});
+					if (isEnterprise) trackBusinessClick({
+						target: "business_enterprise",
+						context: "top_card"
+					});
+				}
+			},
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				children: getCTATitle(product, !!productDetails?.isTrialPlan, userHasSilver)
+			})
+		}), isTeams ? /* @__PURE__ */ jsxs(Fragment, { children: [simple ? null : /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			mt: 8,
+			children: ` or `
+		}), /* @__PURE__ */ jsx(FlexBox, {
+			mt: 8,
+			children: /* @__PURE__ */ jsx(StrokeButton, {
+				href: "/business/checkout?plan_type=directpurchase",
+				onClick: () => {
+					if (trackBusinessClick) trackBusinessClick({
+						target: "business_purchase",
+						context: "top_card"
+					});
+				},
+				children: "Purchase now"
+			})
+		})] }) : null]
+	});
+};
+
+//#endregion
+export { ProductCTA };

package/dist/PricingSection/Products.cjs

@@ -0,0 +1,86 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_types = require('./types.cjs');
+const require_config = require('./config.cjs');
+const require_index = require('./PricingCard/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/PricingSection/Products.tsx
+const Products = ({ plansByType, user, isUserInIndia, currency, trackBusinessClick }) => {
+	const productsLength = Object.keys(plansByType).length;
+	const renderCard = (product) => {
+		switch (product) {
+			case require_types.Product.Basic: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.PricingCard, {
+				product: require_types.Product.Basic,
+				productDetails: require_config.getProductDetails(plansByType, product),
+				plansByType,
+				isUserInIndia,
+				currency,
+				user
+			}, product);
+			case require_types.Product.Silver: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.PricingCard, {
+				product: require_types.Product.Silver,
+				productDetails: require_config.getProductDetails(plansByType, product),
+				plansByType,
+				isUserInIndia,
+				currency,
+				user
+			}, product);
+			case require_types.Product.Gold: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.PricingCard, {
+				product: require_types.Product.Gold,
+				productDetails: require_config.getProductDetails(plansByType, product),
+				plansByType,
+				isUserInIndia,
+				currency,
+				user
+			}, product);
+			case require_types.Product.Teams: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.PricingCard, {
+				product: require_types.Product.Teams,
+				productDetails: require_config.getProductDetails(plansByType, product),
+				plansByType,
+				isUserInIndia,
+				currency,
+				user,
+				trackBusinessClick
+			}, product);
+			case require_types.Product.Enterprise: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.PricingCard, {
+				product: require_types.Product.Enterprise,
+				productDetails: require_config.getProductDetails(plansByType, product),
+				plansByType,
+				isUserInIndia,
+				currency,
+				user,
+				trackBusinessClick
+			}, product);
+			default: return null;
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
+		as: "ul",
+		pt: 16,
+		pb: 24,
+		px: 0,
+		mb: 0,
+		center: true,
+		fit: true,
+		gridAutoFlow: {
+			_: "row",
+			md: "column"
+		},
+		columnGap: 24,
+		rowGap: 24,
+		alignItems: {
+			_: "unset",
+			md: "stretch"
+		},
+		justifyItems: "center",
+		gridTemplateColumns: {
+			_: "1fr",
+			md: `repeat(${productsLength}, ${productsLength <= 2 ? "max-content" : "1fr"})`
+		},
+		children: Object.keys(plansByType).map(renderCard)
+	});
+};
+
+//#endregion
+exports.Products = Products;