[website] Implement the latest price changes proposal

docs/pages/pricing.tsx

@@ -12,7 +12,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 { PrioritySupportProvider } from 'docs/src/components/pricing/PrioritySupportContext';
+import { MultiAppProvider } from 'docs/src/components/pricing/MultiAppContext';
 import { LicenseModelProvider } from 'docs/src/components/pricing/LicenseModelContext';
 import PricingCards from 'docs/src/components/pricing/PricingCards';
 
@@ -29,7 +29,7 @@ export default function Pricing() {
       <main id="main-content">
         <HeroPricing />
         <LicenseModelProvider>
-          <PrioritySupportProvider>
+          <MultiAppProvider>
             <Container sx={{ display: { xs: 'none', md: 'block' } }}>
               <PricingCards />
             </Container>
@@ -42,7 +42,7 @@ export default function Pricing() {
             <Container sx={{ display: { xs: 'none', md: 'block' } }}>
               <PricingTable />
             </Container>
-          </PrioritySupportProvider>
+          </MultiAppProvider>
         </LicenseModelProvider>
         <PricingWhatToExpect />
         <Divider />

docs/src/components/icon/IconImage.tsx

@@ -63,8 +63,8 @@ export default function IconImage(props: IconImageProps) {
     defaultWidth = 36;
     defaultHeight = 36;
   } else if (name.startsWith('pricing/x-plan-')) {
-    defaultWidth = 13;
-    defaultHeight = 15;
+    defaultWidth = 17;
+    defaultHeight = 20;
   } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
     defaultWidth = 18;
     defaultHeight = 18;

docs/src/components/pricing/InfoPrioritySupport.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
+import { useMultiApp } from 'docs/src/components/pricing/MultiAppContext';
 
 export default function InfoPrioritySupport(props: {
   value: React.ReactNode;
@@ -9,11 +9,11 @@ export default function InfoPrioritySupport(props: {
   metadata2?: React.ReactNode;
 }) {
   const { value, value2, metadata, metadata2 } = props;
-  const { prioritySupport } = usePrioritySupport();
+  const { multiApp } = useMultiApp();
 
   return (
     <React.Fragment>
-      {prioritySupport ? (
+      {multiApp ? (
         <React.Fragment>
           <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
             {value}

docs/src/components/pricing/LicenseModelSwitch.tsx

@@ -75,7 +75,7 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
 }));
 
 const perpetualDescription =
-  'One-time purchase to use the current released versions forever. 12 months of updates included.';
+  'One-time purchase to use the current versions forever in development. 12 months of updates included.';
 const annualDescription =
   'Upon expiration, your permission to use the Software in development ends. The license is perpetual in production.';
 

docs/src/components/pricing/MultiAppContext.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const MultiApp = React.createContext<{
+  multiApp: boolean;
+  setMultiApp: React.Dispatch<React.SetStateAction<boolean>>;
+}>(undefined as any);
+
+if (process.env.NODE_ENV !== 'production') {
+  MultiApp.displayName = 'MultiApp';
+}
+
+export function MultiAppProvider(props: any) {
+  const [multiApp, setMultiApp] = React.useState<boolean>(false);
+  const value = React.useMemo(() => ({ multiApp, setMultiApp }), [multiApp, setMultiApp]);
+  return <MultiApp.Provider value={value}>{props.children}</MultiApp.Provider>;
+}
+
+export function useMultiApp() {
+  return React.useContext(MultiApp);
+}

docs/src/components/pricing/PrioritySupportSwitch.tsx → docs/src/components/pricing/MultiAppSwitch.tsx

@@ -4,33 +4,17 @@ import Switch from '@mui/material/Switch';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Typography from '@mui/material/Typography';
-import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
+import { useMultiApp } from 'docs/src/components/pricing/MultiAppContext';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 
-export default function PrioritySupportSwitch() {
-  const { prioritySupport, setPrioritySupport } = usePrioritySupport();
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setPrioritySupport(event.target.checked);
+export default function MultiAppSwitch() {
+  const { multiApp, setMultiApp } = useMultiApp();
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setMultiApp(event.target.checked);
   };
-  const prioritySupportDescription =
-    'At $399/year/dev, get the highest level of support with a 24h SLA response time, pre-screening and issue escalation.';
 
-  const tooltipProps = {
-    enterDelay: 400,
-    enterNextDelay: 50,
-    enterTouchDelay: 500,
-    placement: 'top' as const,
-    describeChild: true,
-    slotProps: {
-      tooltip: {
-        sx: {
-          fontSize: 12,
-        },
-      },
-    },
-  };
+  const MultiAppDescription = 'Use MUI X across multiple apps within your organization.';
 
   return (
     <Box
@@ -39,14 +23,15 @@ export default function PrioritySupportSwitch() {
         borderColor: 'primary.100',
         borderRadius: 1,
         padding: 2,
+        backgroundColor: 'background.paper',
         ...theme.applyDarkStyles({
           borderColor: `${alpha(theme.palette.primary[700], 0.4)}`,
         }),
       })}
     >
       <FormGroup>
         <FormControlLabel
-          control={<Switch checked={prioritySupport} onChange={handleChange} />}
+          control={<Switch checked={multiApp} onChange={onChange} />}
           label={
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
               <Typography
@@ -58,11 +43,8 @@ export default function PrioritySupportSwitch() {
                   whiteSpace: 'nowrap',
                 }}
               >
-                Priority Support
+                Multi App License
               </Typography>
-              <Tooltip title={prioritySupportDescription} {...tooltipProps}>
-                <InfoOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
-              </Tooltip>
             </Box>
           }
           sx={{
@@ -79,20 +61,20 @@ export default function PrioritySupportSwitch() {
           labelPlacement="start"
         />
       </FormGroup>
-      <Typography variant="body2" color="text.secondary">
-        24h SLA response time, support for MUI Core, and the highest priority on bug fixes.
+      <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+        {MultiAppDescription}
       </Typography>
     </Box>
   );
 }
 
-export function PrioritySupportSwitchTable() {
-  const { prioritySupport, setPrioritySupport } = usePrioritySupport();
+export function MultiAppSwitchTable() {
+  const { multiApp, setMultiApp } = useMultiApp();
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setPrioritySupport(event.target.checked);
+    setMultiApp(event.target.checked);
   };
-  const prioritySupportDescription =
-    'At $399/year/dev, get the highest level of support with a 24h SLA response time, pre-screening and issue escalation.';
+  const MultiAppDescription =
+    'Choose this option if you need to use MUI X across multiple applications within your organization.';
 
   const tooltipProps = {
     enterDelay: 400,
@@ -112,14 +94,14 @@ export function PrioritySupportSwitchTable() {
   return (
     <FormGroup>
       <FormControlLabel
-        control={<Switch checked={prioritySupport} onChange={handleChange} />}
+        control={<Switch checked={multiApp} onChange={handleChange} />}
         label={
-          <Tooltip title={prioritySupportDescription} {...tooltipProps}>
+          <Tooltip title={MultiAppDescription} {...tooltipProps}>
             <Typography
               variant="body1"
               sx={{ color: 'text.secondary', textAlign: 'center', fontSize: '0.875rem' }}
             >
-              Priority Support
+              Multi App License
             </Typography>
           </Tooltip>
         }