diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx index be1ce9846e19a0..6a277036d55886 100644 --- a/docs/pages/pricing.tsx +++ b/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() {
- + @@ -42,7 +42,7 @@ export default function Pricing() { - + diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx index 2e48ac592c8342..b22254d47eb620 100644 --- a/docs/src/components/icon/IconImage.tsx +++ b/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; diff --git a/docs/src/components/pricing/InfoPrioritySupport.tsx b/docs/src/components/pricing/InfoPrioritySupport.tsx index 78c784b24f0fc3..39a986ebb27b2b 100644 --- a/docs/src/components/pricing/InfoPrioritySupport.tsx +++ b/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 ( - {prioritySupport ? ( + {multiApp ? ( {value} diff --git a/docs/src/components/pricing/LicenseModelSwitch.tsx b/docs/src/components/pricing/LicenseModelSwitch.tsx index 21b3cbc08efe99..2349eb384c6acd 100644 --- a/docs/src/components/pricing/LicenseModelSwitch.tsx +++ b/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.'; diff --git a/docs/src/components/pricing/MultiAppContext.tsx b/docs/src/components/pricing/MultiAppContext.tsx new file mode 100644 index 00000000000000..71d0fa4f5fd21b --- /dev/null +++ b/docs/src/components/pricing/MultiAppContext.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; + +const MultiApp = React.createContext<{ + multiApp: boolean; + setMultiApp: React.Dispatch>; +}>(undefined as any); + +if (process.env.NODE_ENV !== 'production') { + MultiApp.displayName = 'MultiApp'; +} + +export function MultiAppProvider(props: any) { + const [multiApp, setMultiApp] = React.useState(false); + const value = React.useMemo(() => ({ multiApp, setMultiApp }), [multiApp, setMultiApp]); + return {props.children}; +} + +export function useMultiApp() { + return React.useContext(MultiApp); +} diff --git a/docs/src/components/pricing/PrioritySupportSwitch.tsx b/docs/src/components/pricing/MultiAppSwitch.tsx similarity index 55% rename from docs/src/components/pricing/PrioritySupportSwitch.tsx rename to docs/src/components/pricing/MultiAppSwitch.tsx index c1cd9f582f56b7..913f19978e935d 100644 --- a/docs/src/components/pricing/PrioritySupportSwitch.tsx +++ b/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) => { - setPrioritySupport(event.target.checked); +export default function MultiAppSwitch() { + const { multiApp, setMultiApp } = useMultiApp(); + const onChange = (event: React.ChangeEvent) => { + 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 ( } + control={} label={ - Priority Support + Multi App License - - - } sx={{ @@ -79,20 +61,20 @@ export default function PrioritySupportSwitch() { labelPlacement="start" /> - - 24h SLA response time, support for MUI Core, and the highest priority on bug fixes. + + {MultiAppDescription} ); } -export function PrioritySupportSwitchTable() { - const { prioritySupport, setPrioritySupport } = usePrioritySupport(); +export function MultiAppSwitchTable() { + const { multiApp, setMultiApp } = useMultiApp(); const handleChange = (event: React.ChangeEvent) => { - 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 expect to use MUI X across multiple applications within your organization.'; const tooltipProps = { enterDelay: 400, @@ -112,14 +94,14 @@ export function PrioritySupportSwitchTable() { return ( } + control={} label={ - + - Priority Support + Multi App License } diff --git a/docs/src/components/pricing/PricingCards.tsx b/docs/src/components/pricing/PricingCards.tsx index ae3585f9f28fcc..6f597b8907e25f 100644 --- a/docs/src/components/pricing/PricingCards.tsx +++ b/docs/src/components/pricing/PricingCards.tsx @@ -2,13 +2,10 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { alpha } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; import IconImage from 'docs/src/components/icon/IconImage'; import LicenseModelSwitch from 'docs/src/components/pricing/LicenseModelSwitch'; import { useLicenseModel } from 'docs/src/components/pricing/LicenseModelContext'; -import PrioritySupportSwitch from 'docs/src/components/pricing/PrioritySupportSwitch'; -import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import { Link } from '@mui/docs/Link'; import { @@ -16,15 +13,28 @@ import { PremiumSupportIcon, PrioritySupportIcon, } from 'docs/src/components/pricing/SupportIcons'; +import MultiAppSwitch from 'docs/src/components/pricing/MultiAppSwitch'; +import { MultiAppProvider, useMultiApp } from 'docs/src/components/pricing/MultiAppContext'; export interface Feature { - text?: string; - highlight?: string; - text2?: string; + primaryLabel?: React.ReactNode; + secondaryLabel?: string; icon?: 'support' | 'check'; supportType?: 'community' | 'pro' | 'premium' | 'priority'; } +function highlightText(text: string): React.ReactNode { + return ( + + {text} + + ); +} + export type PlanName = 'community' | 'pro' | 'premium' | 'enterprise'; export const planInfo: Record< @@ -41,11 +51,12 @@ export const planInfo: Record< title: 'Community', description: 'Get started with the industry-standard React UI library, MIT-licensed.', features: [ - { text: '40+ free components', icon: 'check' }, { - icon: 'support', + icon: 'check', supportType: 'community', + primaryLabel: 'Community support', }, + { primaryLabel: '40+ free components', icon: 'check' }, ], }, pro: { @@ -53,10 +64,19 @@ export const planInfo: Record< title: 'Pro', description: 'Best for professional developers or startups building data-rich applications.', features: [ - { text: 'All Community features and…', icon: 'check' }, - { text: 'MUI X', highlight: 'Pro', text2: 'access', icon: 'check' }, - { text: '10+', highlight: 'Pro', text2: 'features', icon: 'check' }, - { highlight: 'Pro', text2: 'support', icon: 'support', supportType: 'pro' }, + { + primaryLabel: {highlightText('Pro')} support, + icon: 'support', + supportType: 'pro', + }, + { + primaryLabel: MUI X {highlightText('Pro')} access, + icon: 'check', + }, + { + primaryLabel: 10+ {highlightText('Pro')} features, + icon: 'check', + }, ], }, premium: { @@ -65,10 +85,16 @@ export const planInfo: Record< description: 'The most advanced features for data-rich applications along with standard support.', features: [ - { text: 'All Pro', text2: 'features and…', icon: 'check' }, - { text: 'MUI X', highlight: 'Premium', text2: 'access', icon: 'check' }, - { text: '5+', highlight: 'Premium', text2: 'features', icon: 'check' }, - { highlight: 'Premium', text2: 'support', icon: 'support', supportType: 'premium' }, + { + primaryLabel: {highlightText('Premium')} support, + icon: 'support', + supportType: 'premium', + }, + { primaryLabel: 'Access new features first', icon: 'check' }, + { + primaryLabel: 5+ {highlightText('Premium')} features, + icon: 'check', + }, ], }, enterprise: { @@ -77,301 +103,284 @@ export const planInfo: Record< description: 'All features of Premium coupled with enterprise-grade support and customer success.', features: [ - { text: 'All Premium', text2: 'features and…', icon: 'check' }, - { text: 'Technical support for all libraries', icon: 'check' }, - { text: 'Guaranteed response time', icon: 'check' }, - { text: 'Pre-screening', icon: 'check' }, - { text: 'Issue escalation', icon: 'check' }, - { text: 'Customer Success Manager', icon: 'check' }, - { highlight: 'Priority', text2: 'support', icon: 'support', supportType: 'priority' }, + { + primaryLabel: {highlightText('Priority')} support, + icon: 'support', + supportType: 'priority', + }, + { primaryLabel: 'Multi-app license included', icon: 'check' }, + { primaryLabel: 'Technical support for all libraries', icon: 'check' }, + { primaryLabel: 'Guaranteed response time', icon: 'check' }, + { primaryLabel: 'Pre-screening', icon: 'check' }, + { primaryLabel: 'Issue escalation', icon: 'check' }, + { primaryLabel: 'Customer Success Manager', icon: 'check' }, + { primaryLabel: 'Available from 15 seats', icon: 'check' }, ], }, }; +export const multiAppPlanInfo: Partial> = { + pro: [ + { + primaryLabel: {highlightText('Pro')} support, + icon: 'support', + supportType: 'pro', + }, + { primaryLabel: 'Multi-app license included', icon: 'check' }, + { + primaryLabel: MUI X {highlightText('Pro')} access, + icon: 'check', + }, + { + primaryLabel: 10+ {highlightText('Pro')} features, + icon: 'check', + }, + ], + premium: [ + { + primaryLabel: {highlightText('Premium')} support, + icon: 'support', + supportType: 'premium', + }, + { primaryLabel: 'Multi-app license included', icon: 'check' }, + { primaryLabel: 'Access new features first', icon: 'check' }, + { + primaryLabel: MUI X {highlightText('Premium')} access, + icon: 'check', + }, + { + primaryLabel: 5+ {highlightText('Premium')} features, + icon: 'check', + }, + ], +}; + +export function getPlanFeatures(plan: PlanName, multiApp: boolean): Feature[] { + if (multiApp && (plan === 'pro' || plan === 'premium') && multiAppPlanInfo[plan]) { + return multiAppPlanInfo[plan]!; + } + return planInfo[plan].features; +} + +const previousPlanNames: Record = { + community: '', + pro: 'Community', + premium: 'Pro', + enterprise: 'Premium', +}; + +function getPreviousPlanName(plan: PlanName): string { + return previousPlanNames[plan]; +} + const formatter = new Intl.NumberFormat('en-US'); function formatCurrency(value: number) { return `$${formatter.format(value)}`; } +function PlanPriceDisplay({ + price, + priceUnit, + priceExplanation, + priceColor = 'primary.main', + href, + buttonText = 'Buy now', + buttonVariant = 'contained', +}: { + price: number | string; + priceUnit?: string; + priceExplanation: React.ReactNode; + priceColor?: string; + href: string; + buttonText?: string; + buttonVariant?: 'contained' | 'outlined'; +}) { + return ( + + {/* Main price */} + + + {typeof price === 'number' ? formatCurrency(price) : price} + + {priceUnit && ( + + {priceUnit} + + )} + + {/* Monthly price breakdown */} + + {priceExplanation} + + + + ); +} + interface PlanPriceProps { plan: 'community' | 'pro' | 'premium' | 'enterprise'; + multiApp?: boolean; } export function PlanPrice(props: PlanPriceProps) { - const { plan } = props; + const { plan, multiApp = false } = props; const { licenseModel } = useLicenseModel(); const annual = licenseModel === 'annual'; - const planPriceMinHeight = 24; - const { prioritySupport } = usePrioritySupport(); + if (plan === 'community') { return ( - - - - $0 - - - - - Free forever! - - - - + ); } const priceUnit = annual ? '/ year / dev' : '/ dev'; const getPriceExplanation = (displayedValue: number) => { if (annual) { - return `Equivalent to $${displayedValue} / month / dev`; + return ( + + Equivalent to ${displayedValue.toFixed(2)} / month / dev + + ); } return ''; }; - const perpetualMultiplier = 3; + + const getProStoreUrl = (license: string, isMultiApp: boolean) => { + if (isMultiApp) { + return license === 'annual' + ? 'https://mui.com/store/items/mui-x-pro/?addons=mui-x-multi-app-license' + : 'https://mui.com/store/items/mui-x-pro-perpetual/?addons=mui-x-multi-app-license'; + } + return license === 'annual' + ? 'https://mui.com/store/items/mui-x-pro/' + : 'https://mui.com/store/items/mui-x-pro-perpetual/'; + }; if (plan === 'pro') { - const annualValue = 180; - const perpetualValue = annualValue * perpetualMultiplier; + const annualValue = 299; + const perpetualValue = 657; const monthlyValueForAnnual = annualValue / 12; - const mainDisplayValue = annual ? annualValue : perpetualValue; - const priceExplanation = getPriceExplanation(annual ? monthlyValueForAnnual : perpetualValue); + const proAnnualValueWithMultiApp = 499; + const proPerpetualValueWithMultiApp = 1097; + const proMonthlyValueForAnnualWithMultiApp = + Math.round((proAnnualValueWithMultiApp / 12) * 100) / 100; + + let priceForExplanation: number; + if (multiApp) { + priceForExplanation = proMonthlyValueForAnnualWithMultiApp; + } else if (annual) { + priceForExplanation = monthlyValueForAnnual; + } else { + priceForExplanation = perpetualValue; + } + + let mainDisplayValue: number = annual ? annualValue : perpetualValue; + if (annual && multiApp) { + mainDisplayValue = proAnnualValueWithMultiApp; + } else if (!annual && multiApp) { + mainDisplayValue = proPerpetualValueWithMultiApp; + } else if (annual && !multiApp) { + mainDisplayValue = annualValue; + } else if (!annual && !multiApp) { + mainDisplayValue = perpetualValue; + } return ( - - - - {formatCurrency(mainDisplayValue)} - - - - {priceUnit} - - - - { - - {priceExplanation} - - } - - - + ); } if (plan === 'premium') { - const premiumAnnualValue = 588; - - const premiumPerpetualValue = premiumAnnualValue * perpetualMultiplier; + const premiumAnnualValue = 599; + const premiumPerpetualValue = 1318; const premiumMonthlyValueForAnnual = premiumAnnualValue / 12; - const premiumAnnualValueWithPrioritySupport = premiumAnnualValue + 399; - const premiumPerpetualValueWithPrioritySupport = premiumPerpetualValue + 399; - const premiumMonthlyValueForAnnualWithPrioritySupport = 82; // premiumAnnualValueWithPrioritySupport / 12; - - const priceExplanation = getPriceExplanation( - prioritySupport - ? premiumMonthlyValueForAnnualWithPrioritySupport - : premiumMonthlyValueForAnnual, - ); + const premiumAnnualValueWithPrioritySupport = 999; + const premiumPerpetualValueWithPrioritySupport = 2198; + const premiumMonthlyValueForAnnualWithPrioritySupport = + Math.round((premiumAnnualValueWithPrioritySupport / 12) * 100) / 100; let premiumDisplayedValue: number = premiumAnnualValue; - if (annual && prioritySupport) { + if (annual && multiApp) { premiumDisplayedValue = premiumAnnualValueWithPrioritySupport; - } else if (!annual && prioritySupport) { + } else if (!annual && multiApp) { premiumDisplayedValue = premiumPerpetualValueWithPrioritySupport; - } else if (annual && !prioritySupport) { + } else if (annual && !multiApp) { premiumDisplayedValue = premiumAnnualValue; - } else if (!annual && !prioritySupport) { + } else if (!annual && !multiApp) { premiumDisplayedValue = premiumPerpetualValue; } return ( - - - - {formatCurrency(premiumDisplayedValue)} - - - - {priceUnit} - - - - { - - {priceExplanation} - - } - - - - + ); } - // else enterprise - return ( - - - - Custom pricing - - - - - Got a big team? Request a personalized quote! - - - - - ); + buttonText="Contact Sales" + buttonVariant="outlined" + /> + ); + } + + return null; } function getHref(annual: boolean, prioritySupport: boolean): string { @@ -392,13 +401,13 @@ export function FeatureItem({ feature, idPrefix }: { feature: Feature; idPrefix? {feature.icon === 'check' && ( - + )} {feature.icon === 'support' && ( )} - - {feature.text} - {feature.highlight && ( - - {feature.highlight} +
+ + {feature.primaryLabel} + + {feature.secondaryLabel && ( + + {feature.secondaryLabel} )} - {feature.text2 && ` ${feature.text2}`} - +
); } @@ -459,38 +460,97 @@ export function PlanNameDisplay({ }) { const { title, iconName, description } = planInfo[plan]; return ( - - - {title} - + + + + + {title} + + + {!disableDescription && ( {description} )} - + + ); +} + +interface PricingCardWrapperProps { + plan: PlanName; + highlighted?: boolean; +} + +function PricingCardWrapper({ plan, highlighted = false }: PricingCardWrapperProps) { + const { multiApp } = useMultiApp(); + + return ( + ({ + display: 'flex', + border: '1px solid', + borderColor: highlighted ? 'primary.200' : 'divider', + borderRadius: 1, + flexDirection: 'column', + gap: 2, + py: 3, + px: 2, + flex: '1 1 0px', + ...(highlighted && { + background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, + boxShadow: '0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset', + ...theme.applyDarkStyles({ + borderColor: `${alpha(theme.palette.primary[700], 0.4)}`, + boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset', + }), + }), + })} + > + + + + + {plan !== 'community' && plan !== 'enterprise' && } + + {plan !== 'community' && ( + + Everything in {getPreviousPlanName(plan)} plan and... + + )} + + {getPlanFeatures(plan, multiApp).map((feature, index) => ( + + ))} + + ); } @@ -509,150 +569,14 @@ export default function PricingCards() { maxWidth: '100%', }} > - - - - - - - - {planInfo.community.features.map((feature, index) => ( - - - - ))} - - - - - - - - - - - {planInfo.pro.features.map((feature, index) => ( - - - - ))} - - - - ({ - display: 'flex', - border: '1px solid', - borderColor: 'primary.200', - borderRadius: 1, - flexDirection: 'column', - gap: 3, - py: 3, - px: 2, - flex: '1 1 0px', - background: `${(theme.vars || theme).palette.gradients.linearSubtle}`, - boxShadow: '0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset', - ...theme.applyDarkStyles({ - borderColor: `${alpha(theme.palette.primary[700], 0.4)}`, - boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset', - }), - })} - > - - - - - - {planInfo.premium.features.map((feature, index) => ( - - - - ))} - - - - - - - - - - - {planInfo.enterprise.features.map((feature, index) => ( - - - - ))} - - + + + + + + + + ); diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx index d9a77de4b69b5c..04445a3e8c8edb 100644 --- a/docs/src/components/pricing/PricingList.tsx +++ b/docs/src/components/pricing/PricingList.tsx @@ -8,10 +8,12 @@ import PricingTable from 'docs/src/components/pricing/PricingTable'; import { PlanPrice, PlanNameDisplay, - planInfo, FeatureItem, + getPlanFeatures, } from 'docs/src/components/pricing/PricingCards'; import LicenseModelSwitch from 'docs/src/components/pricing/LicenseModelSwitch'; +import MultiAppSwitch from 'docs/src/components/pricing/MultiAppSwitch'; +import { useMultiApp } from 'docs/src/components/pricing/MultiAppContext'; const Plan = React.forwardRef< HTMLDivElement, @@ -21,33 +23,36 @@ const Plan = React.forwardRef< unavailable?: boolean; } & PaperProps >(function Plan({ plan, unavailable, sx, ...props }, ref) { - const { features } = planInfo[plan]; + const { multiApp } = useMultiApp(); + const features = getPlanFeatures(plan, multiApp); return ( - - {(plan === 'pro' || plan === 'premium') && } - - - {features.map((feature, index) => ( - - + {(plan === 'pro' || plan === 'premium') && ( + + - ))} + )} + + {plan !== 'community' && plan !== 'enterprise' && } + + {features.map((feature, index) => ( + + ))} + ); }); diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index ee3528373ca17d..8af9bf035ee714 100644 --- a/docs/src/components/pricing/PricingTable.tsx +++ b/docs/src/components/pricing/PricingTable.tsx @@ -16,7 +16,7 @@ import { Link } from '@mui/docs/Link'; import IconImage from 'docs/src/components/icon/IconImage'; import { useLicenseModel } from 'docs/src/components/pricing/LicenseModelContext'; import SupportAgentIcon from '@mui/icons-material/SupportAgent'; -import { PrioritySupportSwitchTable } from 'docs/src/components/pricing/PrioritySupportSwitch'; +import { MultiAppSwitchTable } from 'docs/src/components/pricing/MultiAppSwitch'; import InfoPrioritySupport from 'docs/src/components/pricing/InfoPrioritySupport'; import { PlanName, planInfo } from './PricingCards'; @@ -537,8 +537,8 @@ const rowHeaders: Record = { label: 'Priority Support', tooltip: ( - At $399/year/dev, get the highest level of support with a 24h SLA response time, - pre-screening and issue escalation. More details in the{' '} + The highest level of support with 1 business day response time, pre-screening and issue + escalation. More details in the{' '} = { 'response-time': no, 'pre-screening': no, 'issue-escalation': no, - 'security-questionnaire': , + 'security-questionnaire': , }; const premiumData: Record = { @@ -938,13 +938,13 @@ const premiumData: Record = { // Support 'core-support': , 'x-support': , - 'priority-support': , + 'multi-app': , 'tech-advisory': pending, 'support-duration': , 'response-time': , 'pre-screening': , 'issue-escalation': , - 'security-questionnaire': , + 'security-questionnaire': , 'customer-success': no, }; @@ -1050,7 +1050,7 @@ const enterpriseData: Record = { 'response-time': , 'pre-screening': , 'issue-escalation': , - 'security-questionnaire': , + 'security-questionnaire': yes, }; function RowCategory(props: BoxProps) { diff --git a/docs/src/components/pricing/PrioritySupportContext.tsx b/docs/src/components/pricing/PrioritySupportContext.tsx deleted file mode 100644 index 0e5435354483e3..00000000000000 --- a/docs/src/components/pricing/PrioritySupportContext.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -const PrioritySupport = React.createContext<{ - prioritySupport: boolean; - setPrioritySupport: React.Dispatch>; -}>(undefined as any); - -if (process.env.NODE_ENV !== 'production') { - PrioritySupport.displayName = 'PrioritySupport'; -} - -export function PrioritySupportProvider(props: any) { - const [prioritySupport, setPrioritySupport] = React.useState(false); - const value = React.useMemo( - () => ({ prioritySupport, setPrioritySupport }), - [prioritySupport, setPrioritySupport], - ); - return {props.children}; -} - -export function usePrioritySupport() { - return React.useContext(PrioritySupport); -} diff --git a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx index 9ea90947bfe742..38fd71d123bab0 100644 --- a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx +++ b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx index 8d1cde0e06e8fe..46a4f8dd290bdc 100644 --- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx +++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import clsx from 'clsx'; import PropTypes from 'prop-types'; diff --git a/packages/mui-material/src/PigmentStack/PigmentStack.tsx b/packages/mui-material/src/PigmentStack/PigmentStack.tsx index 4b0e34d9abbe2f..dc685f4eaed110 100644 --- a/packages/mui-material/src/PigmentStack/PigmentStack.tsx +++ b/packages/mui-material/src/PigmentStack/PigmentStack.tsx @@ -1,3 +1,4 @@ +'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx';