[website] Polish pricing page

oliviertassinari · Jul 16, 2023 · 322431e · 322431e
1 parent dfc4ffd
commit 322431e
Show file tree

Hide file tree

Showing 11 changed files with 234 additions and 237 deletions.
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
@@ -13,7 +13,7 @@ import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
-import { LicenseTypeProvider } from 'docs/src/components/pricing/LicenseTypeContext';
+import { LicensingModelProvider } from 'docs/src/components/pricing/LicensingModelContext';
 
 export default function Pricing() {
   return (
@@ -27,7 +27,7 @@ export default function Pricing() {
       <main id="main-content">
         <HeroPricing />
         <Divider />
-        <LicenseTypeProvider>
+        <LicensingModelProvider>
           {/* Mobile, Tablet */}
           <Container sx={{ display: { xs: 'block', md: 'none' }, pb: 3, mt: '-1px' }}>
             <PricingList />
@@ -36,7 +36,7 @@ export default function Pricing() {
           <Container sx={{ display: { xs: 'none', md: 'block' } }}>
             <PricingTable />
           </Container>
-        </LicenseTypeProvider>
+        </LicensingModelProvider>
         <Testimonials />
         <PricingWhatToExpect />
         <PricingFAQ />

diff --git a/...c/static/branding/pricing/block-green.svg → ...tic/branding/pricing/x-plan-community.svg b/...c/static/branding/pricing/block-green.svg → ...tic/branding/pricing/x-plan-community.svg
diff --git a/...ic/static/branding/pricing/block-gold.svg → ...tatic/branding/pricing/x-plan-premium.svg b/...ic/static/branding/pricing/block-gold.svg → ...tatic/branding/pricing/x-plan-premium.svg
diff --git a/...ic/static/branding/pricing/block-blue.svg → ...ic/static/branding/pricing/x-plan-pro.svg b/...ic/static/branding/pricing/block-blue.svg → ...ic/static/branding/pricing/x-plan-pro.svg
diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx
@@ -11,9 +11,9 @@ export type IconImageProps = {
     | 'product-toolpad'
     | 'product-templates'
     | 'product-designkits'
-    | 'block-green'
-    | 'block-blue'
-    | 'block-gold'
+    | 'x-plan-pro'
+    | 'x-plan-premium'
+    | 'x-plan-community'
     | 'yes'
     | 'no'
     | 'time'
@@ -59,22 +59,20 @@ export default function IconImage(props: IconImageProps) {
   let defaultHeight;
   let category = '';
   let mode = `-${theme.palette.mode}`;
+
   if (name.startsWith('product-')) {
     defaultWidth = 36;
     defaultHeight = 36;
-  }
-  if (name.startsWith('block-')) {
+  } else if (name.startsWith('x-plan-')) {
     category = 'pricing/';
     mode = '';
     defaultWidth = 13;
     defaultHeight = 15;
-  }
-  if (['yes', 'no', 'time'].indexOf(name) !== -1) {
+  } else if (['yes', 'no', 'time'].indexOf(name) !== -1) {
     category = 'pricing/';
     defaultWidth = 18;
     defaultHeight = 18;
-  }
-  if (
+  } else if (
     [
       'spotify',
       'amazon',
@@ -99,14 +97,16 @@ export default function IconImage(props: IconImageProps) {
   ) {
     category = 'companies/';
   }
+
   const width = widthProp ?? defaultWidth;
   const height = heightProp ?? defaultHeight;
 
-  if (!mounted && neverHydrated && !!theme.vars) {
+  if (!mounted && neverHydrated && !!theme.vars && mode !== '') {
     // Prevent hydration mismatch between the light and dark mode image source.
     return <Box component="span" sx={{ width, height, display: 'inline-block' }} />;
   }
-  const element = (
+
+  const child = (
     <Img
       src={`/static/branding/${category}${name}${mode}.svg`}
       alt=""
@@ -116,8 +116,10 @@ export default function IconImage(props: IconImageProps) {
       {...other}
     />
   );
-  if (!title) {
-    return element;
+
+  if (title) {
+    return <Tooltip title={title}>{child}</Tooltip>;
   }
-  return <Tooltip title={title}>{element}</Tooltip>;
+
+  return child;
 }
diff --git a/docs/src/components/pricing/LicenseTypeContext.tsx b/docs/src/components/pricing/LicenseTypeContext.tsx
diff --git a/docs/src/components/pricing/LicensingModelContext.tsx b/docs/src/components/pricing/LicensingModelContext.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const LicenseModel = React.createContext<any>({});
+
+if (process.env.NODE_ENV !== 'production') {
+  LicenseModel.displayName = 'LicenseModel';
+}
+
+export function LicensingModelProvider(props: any) {
+  const [licensingModel, setLicensingModel] = React.useState<string>('annual');
+  const value = React.useMemo(
+    () => ({ licensingModel, setLicensingModel }),
+    [licensingModel, setLicensingModel],
+  );
+  return <LicenseModel.Provider value={value}>{props.children}</LicenseModel.Provider>;
+}
+
+export function useLicensingModel() {
+  return React.useContext(LicenseModel);
+}
diff --git a/.../components/pricing/LicenseTypeWidget.tsx → ...mponents/pricing/LicensingModelWidget.tsx b/.../components/pricing/LicenseTypeWidget.tsx → ...mponents/pricing/LicensingModelWidget.tsx
@@ -4,7 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
-import { useLicenseType } from 'docs/src/components/pricing/LicenseTypeContext';
+import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext';
 
 const StyledTabs = styled(Tabs)(({ theme }) => ({
   margin: '14px auto 4px',
@@ -16,7 +16,11 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
   border: '1px solid',
   borderColor: (theme.vars || theme).palette.grey[200],
   backgroundColor: (theme.vars || theme).palette.grey[50],
-  '& .MuiTabs-scroller': {
+  '&:has(.Mui-focusVisible)': {
+    outline: `2px solid ${(theme.vars || theme).palette.primary.main}`,
+  },
+  '& .MuiTabs-scroller, & .MuiTab-root': {
+    // Override inline-style to see the box-shadow
     overflow: 'visible!important',
   },
   '& span': {
@@ -33,10 +37,6 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
     '&:hover': {
       color: (theme.vars || theme).palette.grey[800],
     },
-    '&.Mui-focusVisible': {
-      outline: `2px solid ${(theme.vars || theme).palette.primary.main}`,
-      outlineOffset: 2,
-    },
     '&.Mui-selected': {
       color: (theme.vars || theme).palette.grey[900],
       fontWeight: 600,
@@ -90,24 +90,24 @@ const tooltipProps = {
   },
 };
 
-export default function LicenseTypeWidget() {
-  const { licenseType, setLicenseType } = useLicenseType();
+export default function LicenseModelWidget() {
+  const { licensingModel, setLicensingModel } = useLicensingModel();
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setLicenseType(newValue);
+    setLicensingModel(newValue);
   };
 
   return (
     <Box sx={{ display: 'flex' }}>
       <StyledTabs
-        aria-label="license type"
+        aria-label="licensing model"
         selectionFollowsFocus
-        value={licenseType}
+        value={licensingModel}
         onChange={handleChange}
       >
         <Tab
           disableFocusRipple
-          value="Perpetual"
+          value="perpetual"
           label={
             <Tooltip title={perpetualDescription} {...tooltipProps}>
               <span>Perpetual</span>
@@ -116,7 +116,7 @@ export default function LicenseTypeWidget() {
         />
         <Tab
           disableFocusRipple
-          value="Annual"
+          value="annual"
           label={
             <Tooltip title={annualDescription} {...tooltipProps}>
               <span>Annual</span>

diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
@@ -10,7 +10,7 @@ import Tab from '@mui/material/Tab';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import Link from 'docs/src/modules/components/Link';
 import PricingTable, { PlanName, PlanPrice } from 'docs/src/components/pricing/PricingTable';
-import { useLicenseType } from 'docs/src/components/pricing/LicenseTypeContext';
+import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext';
 
 const Plan = React.forwardRef<
   HTMLDivElement,
@@ -22,7 +22,7 @@ const Plan = React.forwardRef<
 >(function Plan({ plan, benefits, unavailable, sx, ...props }, ref) {
   const globalTheme = useTheme();
   const mode = globalTheme.palette.mode;
-  const { licenseType } = useLicenseType();
+  const { licensingModel } = useLicensingModel();
 
   return (
     <Paper
@@ -54,11 +54,11 @@ const Plan = React.forwardRef<
             {
               community: '/material-ui/getting-started/usage/',
               pro:
-                licenseType === 'annual'
+                licensingModel === 'annual'
                   ? 'https://mui.com/store/items/mui-x-pro/'
                   : 'https://mui.com/store/items/mui-x-pro-perpetual/',
               premium:
-                licenseType === 'annual'
+                licensingModel === 'annual'
                   ? 'https://mui.com/store/items/mui-x-premium/'
                   : 'https://mui.com/store/items/mui-x-premium-perpetual/',
             }[plan]

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
@@ -11,25 +11,25 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { useRouter } from 'next/router';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import Link from 'docs/src/modules/components/Link';
-import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage';
+import IconImage from 'docs/src/components/icon/IconImage';
 import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import UnfoldMoreRounded from '@mui/icons-material/UnfoldMoreRounded';
-import LicenseTypeWidget from 'docs/src/components/pricing/LicenseTypeWidget';
-import { useLicenseType } from 'docs/src/components/pricing/LicenseTypeContext';
+import LicenseModelWidget from 'docs/src/components/pricing/LicensingModelWidget';
+import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext';
 
 const planInfo = {
   community: {
-    color: 'green',
+    iconName: 'x-plan-community',
     title: 'Community',
     description: 'Get started with the industry-standard React UI library, MIT-licensed.',
   },
   pro: {
-    color: 'blue',
+    iconName: 'x-plan-pro',
     title: 'Pro',
     description: 'Best for professional developers building enterprise or data-rich applications.',
   },
   premium: {
-    color: 'gold',
+    iconName: 'x-plan-premium',
     title: 'Premium',
     description:
       'The most advanced features for data-rich applications, as well as the highest priority for support.',
@@ -49,15 +49,15 @@ export function PlanName({
   plan: 'community' | 'pro' | 'premium';
   disableDescription?: boolean;
 }) {
-  const { title, color, description } = planInfo[plan];
+  const { title, iconName, description } = planInfo[plan];
   return (
     <React.Fragment>
       <Typography
         variant="body2"
         fontWeight="bold"
         sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', pr: 0.5 }}
       >
-        <IconImage name={`block-${color}` as IconImageProps['name']} sx={{ mr: 1 }} /> {title}
+        <IconImage name={iconName} sx={{ mr: 1 }} /> {title}
       </Typography>
       {!disableDescription && (
         <Typography
@@ -86,8 +86,8 @@ interface PlanPriceProps {
 export function PlanPrice(props: PlanPriceProps) {
   const { plan } = props;
 
-  const { licenseType } = useLicenseType();
-  const annual = licenseType === 'Annual';
+  const { licensingModel } = useLicensingModel();
+  const annual = licensingModel === 'annual';
   const planPriceMinHeight = 64;
 
   if (plan === 'community') {
@@ -113,7 +113,7 @@ export function PlanPrice(props: PlanPriceProps) {
 
   const monthlyDisplay = annual;
 
-  const priceUnit = monthlyDisplay ? '/ dev / month' : '/ dev';
+  const priceUnit = monthlyDisplay ? '/ month / dev' : '/ dev';
   const getPriceExplanation = (displayedValue: number) => {
     if (!annual) {
       return `$${displayedValue}/dev billed once.`;
@@ -132,7 +132,7 @@ export function PlanPrice(props: PlanPriceProps) {
 
     return (
       <React.Fragment>
-        <LicenseTypeWidget />
+        <LicenseModelWidget />
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1, mb: 4 }}>
           <Typography variant="h3" component="div" fontWeight="bold" color="primary.main">
             {formatCurrency(mainDisplayValue)}
@@ -149,7 +149,7 @@ export function PlanPrice(props: PlanPriceProps) {
             </Typography>
           )}
           <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }} textAlign="center">
-            No additional fee beyond 10 devs.
+            {'No additional fee beyond 10 devs.'}
           </Typography>
         </Box>
       </React.Fragment>
@@ -171,7 +171,7 @@ export function PlanPrice(props: PlanPriceProps) {
 
   return (
     <React.Fragment>
-      <LicenseTypeWidget />
+      <LicenseModelWidget />
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1, mb: 4 }}>
         <Typography
           variant="body2"
@@ -1004,22 +1004,22 @@ function renderMasterRow(key: string, gridSx: object, plans: Array<any>) {
 
 function PricingTableDevelopment(props: any) {
   const { renderRow } = props;
-  const { licenseType } = useLicenseType();
+  const { licensingModel } = useLicensingModel();
 
-  return licenseType === 'Annual'
+  return licensingModel === 'annual'
     ? renderRow('mui-x-development')
     : renderRow('mui-x-development-perpetual');
 }
 
 function PricingTableBuyPro() {
-  const { licenseType } = useLicenseType();
+  const { licensingModel } = useLicensingModel();
 
   return (
     <Button
       component={Link}
       noLinkStyle
       href={
-        licenseType === 'Annual'
+        licensingModel === 'annual'
           ? 'https://mui.com/store/items/mui-x-pro/'
           : 'https://mui.com/store/items/mui-x-pro-perpetual/'
       }
@@ -1033,14 +1033,14 @@ function PricingTableBuyPro() {
 }
 
 function PricingTableBuyPremium() {
-  const { licenseType } = useLicenseType();
+  const { licensingModel } = useLicensingModel();
 
   return (
     <Button
       component={Link}
       noLinkStyle
       href={
-        licenseType === 'Annual'
+        licensingModel === 'annual'
           ? 'https://mui.com/store/items/mui-x-premium/'
           : 'https://mui.com/store/items/mui-x-premium-perpetual/'
       }