@codecademy/brand 3.6.0-alpha.6ca7d4c7b6.0 → 3.6.0-alpha.a5f54cdefd.0

package/dist/PricingSection/ProductCTA.js

@@ -1,109 +1,44 @@
-import { Box, FillButton, FlexBox, StrokeButton, Text } from '@codecademy/gamut';
+import { FillButton, StrokeButton } 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) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+const getDefaultCtaConfig = product => {
   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:
+      return {
+        label: 'Get free account',
+        href: '/register'
+      };
     case Product.Silver:
+      return {
+        label: 'Try Plus for free',
+        href: '/checkout?plan_id=proSilverAnnualV2_7trial&plan_type=plus'
+      };
     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';
+    case Product.Pro:
+      return {
+        label: 'Try Pro for free',
+        href: '/checkout?plan_id=proGoldAnnualV2_7trial&plan_type=pro'
+      };
     default:
-      return '';
+      return {
+        label: 'Try Pro for free',
+        href: '/checkout'
+      };
   }
 };
 export const ProductCTA = ({
   product,
-  productDetails,
-  user,
-  simple
+  ctaConfig,
+  isCurrentPlan
 }) => {
-  const userHasBasic = !user.anonymous && (!user.proSilver || !user.proGold);
-  const userHasSilver = user.proSilver;
-  const isTeams = product === Product.Teams;
-  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
-      }),
-      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",
-          children: "Purchase now"
-        })
-      })]
-    }) : null]
+  const defaultCtaConfig = getDefaultCtaConfig(product);
+  const ButtonComponent = product === Product.Gold || product === Product.Pro ? FillButton : StrokeButton;
+  return /*#__PURE__*/_jsx(ButtonComponent, {
+    mt: 8,
+    href: ctaConfig?.href || defaultCtaConfig.href,
+    onClick: ctaConfig?.onClick,
+    mx: 24,
+    disabled: isCurrentPlan,
+    children: isCurrentPlan && 'Your current plan' || ctaConfig?.label || defaultCtaConfig.label
   });
 };

package/dist/PricingSection/Products.d.ts

@@ -1,11 +1,11 @@
 import { PlansByType } from './config';
-import { AllCurrency } from './PricingCard/types';
-import { User } from './types';
+import { CopyConfig, CtaConfig, User } from './types';
 interface ProductsProps {
     plansByType: PlansByType;
-    user: User;
+    ctaConfig?: CtaConfig;
+    copyConfig?: CopyConfig;
+    user?: User;
     isUserInIndia: boolean;
-    currency: AllCurrency;
 }
 export declare const Products: React.FC<ProductsProps>;
 export {};

package/dist/PricingSection/Products.js

@@ -5,9 +5,10 @@ import { Product } from './types';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Products = ({
   plansByType,
+  ctaConfig,
+  copyConfig,
   user,
-  isUserInIndia,
-  currency
+  isUserInIndia
 }) => {
   const productsLength = Object.keys(plansByType).length;
   const renderCard = product => {
@@ -17,45 +18,30 @@ export const Products = ({
           product: Product.Basic,
           productDetails: getProductDetails(plansByType, product),
           plansByType: plansByType,
+          isCurrentPlan: user && !user.anonymous && !user.proSilver && !user.proGold,
           isUserInIndia: isUserInIndia,
-          currency: currency,
-          user: user
+          ctaConfig: ctaConfig?.basic,
+          copyConfig: copyConfig?.basic
         }, product);
       case Product.Silver:
         return /*#__PURE__*/_jsx(PricingCard, {
           product: Product.Silver,
           productDetails: getProductDetails(plansByType, product),
           plansByType: plansByType,
+          isCurrentPlan: user?.proSilver,
           isUserInIndia: isUserInIndia,
-          currency: currency,
-          user: user
+          ctaConfig: ctaConfig?.['pro-silver'],
+          copyConfig: copyConfig?.['pro-silver']
         }, product);
       case Product.Gold:
         return /*#__PURE__*/_jsx(PricingCard, {
           product: Product.Gold,
           productDetails: getProductDetails(plansByType, product),
           plansByType: plansByType,
+          isCurrentPlan: user?.proGold,
           isUserInIndia: isUserInIndia,
-          currency: currency,
-          user: user
-        }, product);
-      case Product.Teams:
-        return /*#__PURE__*/_jsx(PricingCard, {
-          product: Product.Teams,
-          productDetails: getProductDetails(plansByType, product),
-          plansByType: plansByType,
-          isUserInIndia: isUserInIndia,
-          currency: currency,
-          user: user
-        }, product);
-      case Product.Enterprise:
-        return /*#__PURE__*/_jsx(PricingCard, {
-          product: Product.Enterprise,
-          productDetails: getProductDetails(plansByType, product),
-          plansByType: plansByType,
-          isUserInIndia: isUserInIndia,
-          currency: currency,
-          user: user
+          ctaConfig: ctaConfig?.['pro-gold'],
+          copyConfig: copyConfig?.['pro-gold']
         }, product);
       default:
         return null;
@@ -63,8 +49,7 @@ export const Products = ({
   };
   return /*#__PURE__*/_jsx(GridBox, {
     as: "ul",
-    pt: 16,
-    pb: 24,
+    pt: 24,
     px: 0,
     mb: 0,
     center: true,

package/dist/PricingSection/config.d.ts

@@ -2,7 +2,7 @@ import { Product, ProductDetails } from './types';
 type Period = 'annual' | 'monthly';
 type PlansByPeriod = Record<Period, ProductDetails>;
 export type PlansByType = Record<Product, PlansByPeriod>;
-export declare const getProductDescription: (product: Product) => "Start learning something new with basic access" | "Train your team with in-demand skills and flexible admin tools" | "Customizable training for your organization" | "Build in-demand technical skills for work or a personal project" | "Develop the skills and experience to land a job in tech";
+export declare const getProductDescription: (product: Product) => "" | "Start learning something new with basic access" | "Build in-demand technical skills for work or a personal project" | "Develop the skills and experience to land a job in tech";
 export declare const getProductDetails: (products: PlansByType, product: Product) => ProductDetails;
 export declare const groupPlansByType: (products: ProductDetails[]) => PlansByType;
 export {};

package/dist/PricingSection/config.js

@@ -4,9 +4,7 @@ export const getProductDescription = product => {
     case Product.Basic:
       return 'Start learning something new with basic access';
     case Product.Teams:
-      return 'Train your team with in-demand skills and flexible admin tools';
-    case Product.Enterprise:
-      return 'Customizable training for your organization';
+      return '';
     case Product.Pro:
     case Product.Silver:
       return 'Build in-demand technical skills for work or a personal project';
@@ -15,7 +13,7 @@ export const getProductDescription = product => {
   }
 };
 export const getProductDetails = (products, product) => {
-  if (product === Product.Basic) {
+  if (product === Product.Basic || product === Product.Teams) {
     return products[product].monthly;
   }
   return products[product].annual;

package/dist/PricingSection/index.d.ts

@@ -1,12 +1,13 @@
 import { Background } from '@codecademy/gamut-styles';
-import { AllCurrency } from './PricingCard/types';
-import type { ProductDetails, User } from './types';
+import type { CopyConfig, CtaConfig, PlanType, ProductDetails, User } from './types';
 type PricingSectionProps = Omit<Partial<React.ComponentProps<typeof Background>>, 'title'> & {
     products: ProductDetails[];
     title?: React.ReactNode;
-    user: User;
+    planTypes?: PlanType[];
+    ctaConfig?: CtaConfig;
+    copyConfig?: CopyConfig;
+    user?: User;
     isUserInIndia: boolean;
-    currency: AllCurrency;
 };
 export declare const PricingSection: React.FC<PricingSectionProps>;
 export {};

package/dist/PricingSection/index.js

@@ -1,39 +1,58 @@
-import { Box, ContentContainer, Text } from '@codecademy/gamut';
-import { CheckerLoose } from '@codecademy/gamut-patterns';
+import { Box } from '@codecademy/gamut';
+import { Background } from '@codecademy/gamut-styles';
 import { groupPlansByType } from './config';
 import { Products } from './Products';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PricingSection = ({
   products,
   title,
+  planTypes,
+  ctaConfig,
+  copyConfig,
   user,
   isUserInIndia,
-  currency
+  ...bgProps
 }) => {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Text, {
-      as: "h1",
-      textAlign: "center",
-      fontSize: {
-        _: 34,
-        md: 44
+  const filteredProducts = products.filter(product => {
+    // if planTypes prop is provided, only show products that match the specified planTypes
+    const isValidPlanType = planTypes ? planTypes.includes(product.planType) : product.planType !== 'teams';
+
+    // if user prop is provided, only show upsell cards (and the user's current plan for comparison)
+    if (user) {
+      if (product.planType === 'basic') {
+        return isValidPlanType && !user.proSilver && !user.proGold;
+      }
+      if (product.planType === 'pro-silver') {
+        return isValidPlanType && !user.proGold;
+      }
+    }
+    return isValidPlanType;
+  });
+  return /*#__PURE__*/_jsx(Background, {
+    bg: "beige",
+    px: {
+      _: 16,
+      md: 32,
+      lg: 64,
+      xl: 96
+    },
+    mb: 48,
+    ...bgProps,
+    children: /*#__PURE__*/_jsxs(Box, {
+      maxWidth: 1440,
+      px: {
+        _: 32,
+        lg: 64,
+        xl: 96
       },
-      width: "100%",
-      mb: 16,
-      children: title
-    }), /*#__PURE__*/_jsxs(Box, {
-      position: "relative",
-      children: [/*#__PURE__*/_jsx(CheckerLoose, {
-        height: "100%",
-        position: "absolute"
-      }), /*#__PURE__*/_jsx(ContentContainer, {
-        children: /*#__PURE__*/_jsx(Products, {
-          plansByType: groupPlansByType(products),
-          user: user,
-          isUserInIndia: isUserInIndia,
-          currency: currency
-        })
+      mx: "auto",
+      children: [title, /*#__PURE__*/_jsx(Products, {
+        plansByType: groupPlansByType(filteredProducts),
+        ctaConfig: ctaConfig,
+        copyConfig: copyConfig,
+        user: user,
+        isUserInIndia: isUserInIndia
       })]
-    })]
+    })
   });
 };

package/dist/PricingSection/types.d.ts

@@ -3,8 +3,7 @@ export declare enum Product {
     Pro = "pro",
     Teams = "teams",
     Silver = "pro-silver",
-    Gold = "pro-gold",
-    Enterprise = "enterprise"
+    Gold = "pro-gold"
 }
 export interface ProductDetails {
     isTrialPlan?: boolean | null | undefined;
@@ -15,7 +14,7 @@ export interface ProductDetails {
     savings?: string | null | undefined;
     includedTaxRate?: string | null | undefined;
 }
-export type PlanType = 'basic' | 'pro-silver' | 'pro-gold' | 'teams' | 'enterprise';
+export type PlanType = 'basic' | 'pro-silver' | 'pro-gold' | 'teams';
 export type CtaConfig = Partial<Record<PlanType, {
     label?: string;
     href?: string;

package/dist/PricingSection/types.js

@@ -4,6 +4,5 @@ export let Product = /*#__PURE__*/function (Product) {
   Product["Teams"] = "teams";
   Product["Silver"] = "pro-silver";
   Product["Gold"] = "pro-gold";
-  Product["Enterprise"] = "enterprise";
   return Product;
 }({});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "3.6.0-alpha.6ca7d4c7b6.0",
+  "version": "3.6.0-alpha.a5f54cdefd.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",

package/dist/PricingSection/ConditionalColorMode.d.ts

@@ -1,4 +0,0 @@
-export declare const ConditionalColorMode: React.FC<{
-    condition: boolean;
-    children: React.ReactNode;
-}>;

package/dist/PricingSection/ConditionalColorMode.js

@@ -1,13 +0,0 @@
-import { ColorMode } from '@codecademy/gamut-styles';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export const ConditionalColorMode = ({
-  condition,
-  children
-}) => {
-  return condition ? /*#__PURE__*/_jsx(ColorMode, {
-    mode: "dark",
-    children: children
-  }) : /*#__PURE__*/_jsx(_Fragment, {
-    children: children
-  });
-};

package/dist/PricingSection/PricingCard/types.d.ts

@@ -1,40 +0,0 @@
-export declare enum Currency {
-    Aud = "AUD",
-    Cad = "CAD",
-    Eur = "EUR",
-    Gbp = "GBP",
-    Inr = "INR",
-    Nok = "NOK",
-    Pln = "PLN",
-    Sek = "SEK",
-    Usd = "USD"
-}
-export declare enum CFBCurrency {
-    Dkk = "DKK",
-    Brl = "BRL",
-    Bgn = "BGN",
-    Chf = "CHF",
-    Czk = "CZK",
-    Hrk = "HRK",
-    Huf = "HUF",
-    Mxn = "MXN",
-    Ron = "RON"
-}
-export declare enum CurrencySymbol {
-    Dollar = "$",
-    Pound = "\u00A3",
-    Euro = "\u20AC",
-    Rupee = "\u20B9",
-    Krona = "kr",
-    Krone = "kr",
-    ZLOTY = "z\u0142",
-    Lev = "\u041B\u0432.",
-    Real = "R$",
-    Franc = "Fr.",
-    Koruna = "K\u010D",
-    Kuna = "kn",
-    Forint = "Ft",
-    Leu = "lei"
-}
-export type AllCurrency = Currency | CFBCurrency;
-export declare const getCurrencySymbol: (currency: AllCurrency) => CurrencySymbol;

package/dist/PricingSection/PricingCard/types.js

@@ -1,63 +0,0 @@
-/* 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;
-}({});
-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;
-}({});
-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;
-}({});
-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
-};
-export const getCurrencySymbol = currency => currencySymbols[currency];