update pricingdisplay, add FAQ, clean

Author: prakhargupta1

docs/src/components/pricing/InfoPrioritySupport.tsx

@@ -24,7 +24,7 @@ export default function InfoPrioritySupport(props: {
               color: 'text.secondary',
               fontWeight: 'normal',
               display: 'block',
-              mt: 0.8,
+              mt: 0.4,
               textAlign: 'center',
             }}
           >
@@ -42,7 +42,7 @@ export default function InfoPrioritySupport(props: {
               color: 'text.secondary',
               fontWeight: 'normal',
               display: 'block',
-              mt: 0.8,
+              mt: 0.4,
               textAlign: 'center',
             }}
           >

docs/src/components/pricing/PricingFAQ.tsx

@@ -180,6 +180,22 @@ const faqData = [
       </React.Fragment>
     ),
   },
+  {
+    summary: 'What is the validity of the priority support add-on?',
+    detail: (
+      <React.Fragment>
+        The priority support add-on is valid for 1 year from the date of purchase. It is same for
+        perpetual or annual license model.{' '}
+        <Link
+          target="_blank"
+          rel="noopener"
+          href="https://mui.com/legal/technical-support-sla/#support-plans"
+        >
+          Support plans.
+        </Link>
+      </React.Fragment>
+    ),
+  },
 ];
 
 const Accordion = styled(MuiAccordion)(({ theme }) => ({
@@ -265,12 +281,13 @@ export default function PricingFAQ() {
           {renderItem(1)}
           {renderItem(2)}
           {renderItem(3)}
+          {renderItem(4)}
         </Grid>
         <Grid size={{ xs: 12, md: 4 }}>
-          {renderItem(4)}
           {renderItem(5)}
           {renderItem(6)}
           {renderItem(7)}
+          {renderItem(8)}
         </Grid>
         <Grid size={{ xs: 12, md: 4 }}>
           <Paper

docs/src/components/pricing/PricingTable.tsx

@@ -20,6 +20,7 @@ import BusinessIcon from '@mui/icons-material/Business';
 import SupportAgentIcon from '@mui/icons-material/SupportAgent';
 import PrioritySupportSwitch from 'docs/src/components/pricing/PrioritySupportSwitch';
 import InfoPrioritySupport from 'docs/src/components/pricing/InfoPrioritySupport';
+import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
 
 const planInfo = {
   community: {
@@ -107,14 +108,16 @@ export function PlanPrice(props: PlanPriceProps) {
   const annual = licenseModel === 'annual';
   const planPriceMinHeight = 24;
 
+  const { prioritySupport } = usePrioritySupport();
+
   if (plan === 'community') {
     return (
       <React.Fragment>
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1, mb: 4 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 7 }}>
           <Typography
             variant="h3"
             component="div"
-            sx={{ fontWeight: 'bold', color: 'success.600', mt: 6 }}
+            sx={{ fontWeight: 'bold', color: 'success.600' }}
           >
             $0
           </Typography>
@@ -185,11 +188,27 @@ export function PlanPrice(props: PlanPriceProps) {
     const premiumPerpetualValue = premiumAnnualValue * 3;
     const premiumMonthlyValueForAnnual = premiumAnnualValue / 12;
 
-    const premiumDisplayedValue = annual ? premiumAnnualValue : premiumPerpetualValue;
+    const premiumAnnualValueWithPrioritySupport = premiumAnnualValue + 399;
+    const premiumPerpetualValueWithPrioritySupport = premiumPerpetualValue + 399;
+    const premiumMonthlyValueForAnnualWithPrioritySupport = 82; // premiumAnnualValueWithPrioritySupport / 12;
+
     const priceExplanation = getPriceExplanation(
-      annual ? premiumMonthlyValueForAnnual : premiumPerpetualValue,
+      prioritySupport
+        ? premiumMonthlyValueForAnnualWithPrioritySupport
+        : premiumMonthlyValueForAnnual,
     );
 
+    let premiumDisplayedValue: number = premiumAnnualValue;
+    if (annual && prioritySupport) {
+      premiumDisplayedValue = premiumAnnualValueWithPrioritySupport;
+    } else if (!annual && prioritySupport) {
+      premiumDisplayedValue = premiumPerpetualValueWithPrioritySupport;
+    } else if (annual && !prioritySupport) {
+      premiumDisplayedValue = premiumAnnualValue;
+    } else if (!annual && !prioritySupport) {
+      premiumDisplayedValue = premiumPerpetualValue;
+    }
+
     return (
       <React.Fragment>
         <LicenseModelSwitch />
@@ -246,27 +265,14 @@ export function PlanPrice(props: PlanPriceProps) {
           alignItems: 'center',
           flexDirection: 'column',
           justifyContent: 'center',
-          mt: 3,
-          mb: 1,
+          mt: 4,
         }}
       >
         <BusinessIcon sx={{ fontSize: 65, color: 'text.tertiary' }} />
       </Box>
       <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
         Custom pricing
       </Typography>
-      <Box
-        sx={{
-          mt: 6,
-        }}
-      >
-        <Typography
-          variant="body1"
-          sx={{ color: 'text.secondary', textAlign: 'center', fontSize: '0.875rem' }}
-        >
-          + Priority support included
-        </Typography>
-      </Box>
     </React.Fragment>
   );
 }
@@ -781,6 +787,14 @@ const rowHeaders: Record<string, React.ReactNode> = {
       }}
     />
   ),
+  'customer-success': (
+    <ColumnHead
+      {...{
+        label: 'Customer success manager',
+        tooltip: 'A dedicated person to help you get the most out of MUI products.',
+      }}
+    />
+  ),
 };
 
 const yes = <IconImage name="pricing/yes" title="Included" />;
@@ -902,6 +916,7 @@ const communityData: Record<string, React.ReactNode> = {
   'pre-screening': no,
   'issue-escalation': no,
   'security-questionnaire': no,
+  'customer-success': no,
 };
 
 const proData: Record<string, React.ReactNode> = {
@@ -1007,6 +1022,7 @@ const proData: Record<string, React.ReactNode> = {
   'pre-screening': no,
   'issue-escalation': no,
   'security-questionnaire': <Info value="Available from 10+ devs" />,
+  'customer-success': no,
 };
 
 const premiumData: Record<string, React.ReactNode> = {
@@ -1107,10 +1123,11 @@ const premiumData: Record<string, React.ReactNode> = {
   'priority-support': <PrioritySupportSwitch />,
   'tech-advisory': pending,
   'support-duration': <Info value="1 year" />,
-  'response-time': <InfoPrioritySupport value={yes} metadata="24 hours" value2="48 hours" />,
+  'response-time': <InfoPrioritySupport value={yes} metadata="24 hours" value2={no} />,
   'pre-screening': <InfoPrioritySupport value={yes} metadata="4 hours" value2={no} />,
   'issue-escalation': <InfoPrioritySupport value={yes} value2={no} />,
   'security-questionnaire': <Info value="Available from 4+ devs" />,
+  'customer-success': no,
 };
 
 const enterpriseData: Record<string, React.ReactNode> = {
@@ -1211,10 +1228,11 @@ const enterpriseData: Record<string, React.ReactNode> = {
   'priority-support': <Info value="Included" />,
   'tech-advisory': pending,
   'support-duration': <Info value="1 year" />,
-  'response-time': <Info value={yes} metadata={<React.Fragment>24 hours</React.Fragment>} />,
+  'response-time': <Info value={yes} metadata="24 hours" />,
   'pre-screening': <Info value={yes} metadata="4 hours" />,
   'issue-escalation': <Info value={yes} />,
   'security-questionnaire': <Info value="Available from 4+ devs" />,
+  'customer-success': yes,
 };
 
 function RowCategory(props: BoxProps) {
@@ -1918,6 +1936,8 @@ export default function PricingTable({
       {divider}
       {renderRow('issue-escalation')}
       {divider}
+      {renderRow('customer-success')}
+      {divider}
       {renderRow('security-questionnaire')}
       {divider}
     </Box>

docs/src/components/pricing/PrioritySupportSwitch.tsx

@@ -3,30 +3,48 @@ 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 Box from '@mui/material/Box';
 import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
+import Tooltip from '@mui/material/Tooltip';
 
 export default function PrioritySupportSwitch() {
   const { prioritySupport, setPrioritySupport } = usePrioritySupport();
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPrioritySupport(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 'top',
+    describeChild: true,
+    slotProps: {
+      tooltip: {
+        sx: {
+          fontSize: 12,
+        },
+      },
+    },
+  };
 
   return (
     <FormGroup>
       <FormControlLabel
         control={<Switch checked={prioritySupport} onChange={handleChange} />}
         label={
-          <Typography
-            variant="body1"
-            sx={{ color: 'text.secondary', textAlign: 'center', fontSize: '0.875rem' }}
-          >
-            Add priority support <Box component="span" sx={{ display: ['none', 'block'] }} />
-            at $399/year/dev
-          </Typography>
+          <Tooltip title={prioritySupportDescription} {...tooltipProps}>
+            <Typography
+              variant="body1"
+              sx={{ color: 'text.secondary', textAlign: 'center', fontSize: '0.875rem' }}
+            >
+              Priority support
+            </Typography>
+          </Tooltip>
         }
-        sx={{ mr: 0 }}
-        labelPlacement="bottom"
+        sx={{ mb: 0.5, ml: 1, gap: 1, justifyContent: 'center' }}
+        labelPlacement="end"
       />
     </FormGroup>
   );