@codecademy/brand 3.6.0-alpha.eb8166002f.0 → 3.6.0

package/dist/PricingSection/ProductCTA.d.ts

@@ -1,6 +1,8 @@
-import { CtaConfig, Product } from './types';
-export declare const ProductCTA: ({ product, ctaConfig, isCurrentPlan, }: {
+import { Product, ProductDetails, User } from './types';
+export declare const getCTATitle: (product: Product, isTrialPlan: boolean, isPlusUser?: boolean) => "" | "Request a demo" | "Try Teams for free" | "Purchase now" | "Sign up" | "Try Pro for free" | "Upgrade to Pro" | "Upgrade now" | "Try Plus for free" | "Your current plan";
+export declare const ProductCTA: ({ product, productDetails, user, simple, }: {
     product: Product;
-    ctaConfig: CtaConfig[keyof CtaConfig];
-    isCurrentPlan?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+    productDetails: ProductDetails;
+    user: User;
+    simple?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/PricingSection/ProductCTA.js

@@ -1,44 +1,109 @@
-import { FillButton, StrokeButton } from '@codecademy/gamut';
+import { Box, FillButton, FlexBox, StrokeButton, Text } from '@codecademy/gamut';
 import { Product } from './types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const getDefaultCtaConfig = product => {
+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 {
-        label: 'Get free account',
-        href: '/register'
-      };
-    case Product.Silver:
-      return {
-        label: 'Try Plus for free',
-        href: '/checkout?plan_id=proSilverAnnualV2_7trial&plan_type=plus'
-      };
+      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: 'Try Pro for free',
-        href: '/checkout?plan_id=proGoldAnnualV2_7trial&plan_type=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 {
-        label: 'Try Pro for free',
-        href: '/checkout'
-      };
+      return '';
   }
 };
 export const ProductCTA = ({
   product,
-  ctaConfig,
-  isCurrentPlan
+  productDetails,
+  user,
+  simple
 }) => {
-  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
+  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]
   });
 };

package/dist/PricingSection/Products.d.ts

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

package/dist/PricingSection/Products.js

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

package/dist/PricingSection/config.js

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

package/dist/PricingSection/index.d.ts

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

package/dist/PricingSection/index.js

@@ -1,58 +1,39 @@
-import { Box } from '@codecademy/gamut';
-import { Background } from '@codecademy/gamut-styles';
+import { Box, ContentContainer, Text } from '@codecademy/gamut';
+import { CheckerLoose } from '@codecademy/gamut-patterns';
 import { groupPlansByType } from './config';
 import { Products } from './Products';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const PricingSection = ({
   products,
   title,
-  planTypes,
-  ctaConfig,
-  copyConfig,
   user,
   isUserInIndia,
-  ...bgProps
+  currency
 }) => {
-  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
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "h1",
+      textAlign: "center",
+      fontSize: {
+        _: 34,
+        md: 44
       },
-      mx: "auto",
-      children: [title, /*#__PURE__*/_jsx(Products, {
-        plansByType: groupPlansByType(filteredProducts),
-        ctaConfig: ctaConfig,
-        copyConfig: copyConfig,
-        user: user,
-        isUserInIndia: isUserInIndia
+      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
+        })
       })]
-    })
+    })]
   });
 };

package/dist/PricingSection/types.d.ts

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

package/dist/PricingSection/types.js

@@ -4,5 +4,6 @@ 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.eb8166002f.0",
+  "version": "3.6.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",