From eca4323d8659ccdb36d169ce6ef4a3347532cfb2 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:06:53 +0300
Subject: [PATCH 01/31] add-enterprise-column
---
docs/src/components/pricing/PricingTable.tsx | 241 ++++++++++++++++---
1 file changed, 212 insertions(+), 29 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 6dd607e3477de8..ee20b8ba23a323 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -26,13 +26,19 @@ const planInfo = {
pro: {
iconName: 'pricing/x-plan-pro',
title: 'Pro',
- description: 'Best for professional developers building enterprise or data-rich applications.',
+ description: 'Best for professional developers or startups building data-rich applications.',
},
premium: {
iconName: 'pricing/x-plan-premium',
title: 'Premium',
description:
- 'The most advanced features for data-rich applications, as well as the highest priority for support.',
+ 'The most advanced features for data-rich applications along with standard support.',
+ },
+ enterprise: {
+ iconName: 'pricing/x-plan-premium',
+ title: 'Enterprise',
+ description:
+ 'All features of Premium coupled with enterprise-grade priority support and feature requests.',
},
} as const;
@@ -46,7 +52,7 @@ export function PlanName({
plan,
disableDescription = false,
}: {
- plan: 'community' | 'pro' | 'premium';
+ plan: 'community' | 'pro' | 'premium' | 'enterprise';
disableDescription?: boolean;
}) {
const { title, iconName, description } = planInfo[plan];
@@ -85,7 +91,7 @@ export function PlanName({
}
interface PlanPriceProps {
- plan: 'community' | 'pro' | 'premium';
+ plan: 'community' | 'pro' | 'premium' | 'enterprise';
}
export function PlanPrice(props: PlanPriceProps) {
@@ -168,13 +174,60 @@ export function PlanPrice(props: PlanPriceProps) {
);
}
- // else Premium
- const premiumMonthlyValue = annual ? 49 : 49 * 3;
- const premiumAnnualValue = premiumMonthlyValue * 12;
- const premiumDisplayedValue = monthlyDisplay ? premiumMonthlyValue : premiumAnnualValue;
+ if (plan === 'premium') {
+ const premiumMonthlyValue = annual ? 49 : 49 * 3;
+ const premiumAnnualValue = premiumMonthlyValue * 12;
+
+ const premiumDisplayedValue = monthlyDisplay ? premiumMonthlyValue : premiumAnnualValue;
+ const priceExplanation = getPriceExplanation(
+ monthlyDisplay ? premiumAnnualValue : premiumMonthlyValue,
+ );
+
+ return (
+
+
+
+
+
+ {formatCurrency(premiumDisplayedValue)}
+
+
+
+ {priceUnit}
+
+
+
+ {(annual || monthlyDisplay) && (
+
+ {priceExplanation}
+
+ )}
+
+
+ );
+ }
+
+ // else enterprise
+ const enterpriseMonthlyValue = annual ? 79 : 79 * 3;
+ const enterpriseAnnualValue = enterpriseMonthlyValue * 12;
+
+ const enterpriseDisplayedValue = monthlyDisplay ? enterpriseMonthlyValue : enterpriseAnnualValue;
const priceExplanation = getPriceExplanation(
- monthlyDisplay ? premiumAnnualValue : premiumMonthlyValue,
+ monthlyDisplay ? enterpriseAnnualValue : enterpriseMonthlyValue,
);
return (
@@ -183,7 +236,7 @@ export function PlanPrice(props: PlanPriceProps) {
- {formatCurrency(premiumDisplayedValue)}
+ {formatCurrency(enterpriseDisplayedValue)}
@@ -1017,25 +1070,116 @@ const premiumData: Record = {
'mui-x-development-perpetual': ,
'mui-x-updates': ,
// Support
- 'core-support': ,
+ 'core-support': ,
'x-support': ,
'tech-advisory': pending,
'support-duration': ,
- 'response-time': (
-
- Available later on
-
- 2 business days.
-
1 business day (priority add-on only)
-
- }
- />
- ),
- 'pre-screening': ,
- 'issue-escalation': ,
+ 'response-time': 2 business days} />,
+ 'pre-screening': no,
+ 'issue-escalation': no,
+ 'security-questionnaire': ,
+};
+
+const enterpriseData: Record = {
+ // Core
+ 'Base UI': yes,
+ 'MUI System': yes,
+ 'Material UI': yes,
+ 'Joy UI': yes,
+ // MUI X
+ // data grid - columns
+ 'data-grid/column-groups': yes,
+ 'data-grid/column-spanning': yes,
+ 'data-grid/column-resizing': yes,
+ 'data-grid/column-autosizing': yes,
+ 'data-grid/column-reorder': yes,
+ 'data-grid/column-pinning': yes,
+ // data grid - rows
+ 'data-grid/row-height': yes,
+ 'data-grid/row-spanning': yes,
+ 'data-grid/row-reordering': yes,
+ 'data-grid/row-pinning': yes,
+ 'data-grid/row-selection': yes,
+ 'data-grid/row-multiselection': yes,
+ 'data-grid/row-cell-selection': yes,
+ // data grid - filter
+ 'data-grid/filter-quick': yes,
+ 'data-grid/filter-column': yes,
+ 'data-grid/header-filters': yes,
+ 'data-grid/filter-multicolumn': yes,
+ 'data-grid/column-sorting': yes,
+ 'data-grid/multi-column-sorting': yes,
+ 'data-grid/pagination': yes,
+ 'data-grid/pagination-large': yes,
+ // data grid - edit
+ 'data-grid/edit-row': yes,
+ 'data-grid/edit-cell': yes,
+ // data grid - export
+ 'data-grid/file-csv': yes,
+ 'data-grid/file-print': yes,
+ 'data-grid/file-clipboard-copy': yes,
+ 'data-grid/file-clipboard-paste': yes,
+ 'data-grid/file-excel': yes,
+ 'data-grid/customizable-components': yes,
+ 'data-grid/virtualize-column': yes,
+ 'data-grid/virtualize-row': yes,
+ 'data-grid/tree-data': yes,
+ 'data-grid/master-detail': yes,
+ 'data-grid/grouping': yes,
+ 'data-grid/aggregation': yes,
+ 'data-grid/pivoting': pending,
+ 'data-grid/accessibility': yes,
+ 'data-grid/keyboard-nav': yes,
+ 'data-grid/localization': yes,
+ 'date-picker/simple': yes,
+ 'date-picker/range': yes,
+
+ // charts - components
+ 'charts/line': yes,
+ 'charts/bar': yes,
+ 'charts/scatter': yes,
+ 'charts/pie': yes,
+ 'charts/sparkline': yes,
+ 'charts/gauge': yes,
+ 'charts/heatmap': yes,
+ 'charts/treemap': pending,
+ 'charts/radar': pending,
+ 'charts/funnel': pending,
+ 'charts/sankey': pending,
+ 'charts/gantt': pending,
+ 'charts/gantt-advanced': toBeDefined,
+ 'charts/candlestick': toBeDefined,
+ 'charts/large-dataset': toBeDefined,
+ // charts - features
+ 'charts/legend': yes,
+ 'charts/tooltip': yes,
+ 'charts/zoom-and-pan': yes,
+ 'charts/export': pending,
+ // charts - datagrid
+ 'charts/cell-with-charts': yes,
+ 'charts/filter-interaction': pending,
+ 'charts/selection-interaction': pending,
+ // Tree View
+ 'tree-view/simple-tree-view': yes,
+ 'tree-view/rich-tree-view': yes,
+ 'tree-view/selection': yes,
+ 'tree-view/multi-selection': yes,
+ 'tree-view/inline-editing': yes,
+ 'tree-view/drag-to-reorder': yes,
+ 'tree-view/virtualization': pending,
+ // general
+ 'mui-x-production': yes,
+ 'mui-x-development': ,
+ 'mui-x-development-perpetual': ,
+ 'mui-x-updates': ,
+ // Support
+ 'core-support': yes,
+ 'x-support': ,
+ 'tech-advisory': pending,
+ 'support-duration': ,
+ 'response-time': 1 business day} />,
+ 'pre-screening': ,
+ 'issue-escalation': ,
'security-questionnaire': ,
};
@@ -1136,7 +1280,7 @@ function StickyHead({
Plans
- {(['community', 'pro', 'premium'] as const).map((plan) => (
+ {(['community', 'pro', 'premium', 'enterprise'] as const).map((plan) => (
@@ -1171,6 +1315,7 @@ function renderMasterRow(key: string, gridSx: object, plans: Array) {
{id === 'community' && communityData[key]}
{id === 'pro' && proData[key]}
{id === 'premium' && premiumData[key]}
+ {id === 'enterprise' && enterpriseData[key]}
))}
@@ -1229,6 +1374,28 @@ function PricingTableBuyPremium() {
);
}
+function PricingTableBuyEnterprise() {
+ const { licenseModel } = useLicenseModel();
+
+ return (
+ }
+ sx={{ py: 1, mt: 'auto' }}
+ >
+ Buy now
+
+ );
+}
+
const StyledCollapse = styled(Collapse, {
name: 'MuiSlider',
slot: 'Track',
@@ -1247,11 +1414,11 @@ const StyledCollapse = styled(Collapse, {
export default function PricingTable({
columnHeaderHidden,
- plans = ['community', 'pro', 'premium'],
+ plans = ['community', 'pro', 'premium', 'enterprise'],
...props
}: BoxProps & {
columnHeaderHidden?: boolean;
- plans?: Array<'community' | 'pro' | 'premium'>;
+ plans?: Array<'community' | 'pro' | 'premium' | 'enterprise'>;
}) {
const router = useRouter();
const [dataGridCollapsed, setDataGridCollapsed] = React.useState(false);
@@ -1341,6 +1508,13 @@ export default function PricingTable({
+
+
+
+
)}
}>
@@ -1373,6 +1547,9 @@ export default function PricingTable({
{dataGridUnfoldMore}
|
+
+ {dataGridUnfoldMore}
+ |
)}
{benefits &&
@@ -85,6 +86,16 @@ const Plan = React.forwardRef<
);
});
+function getButtonText(plan: string) {
+ if (plan.match(/(pro|premium)/)) {
+ return 'Buy now';
+ }
+ if (plan.match(/enterprise/)) {
+ return 'Contact us';
+ }
+ return 'Get started';
+}
+
export default function PricingList() {
const [planIndex, setPlanIndex] = React.useState(0);
return (
@@ -126,7 +137,11 @@ export default function PricingList() {
label="Pro"
sx={{ borderWidth: '0 1px 0 1px', borderStyle: 'solid', borderColor: 'divider' }}
/>
-
+
+
{planIndex === 0 && (
@@ -152,6 +167,14 @@ export default function PricingList() {
)}
+ {planIndex === 3 && (
+
+
+
+ )}
);
}
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 472742db5aacdc..3fe6604700d019 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -1263,7 +1263,7 @@ function StickyHead({
From f8e889060752493be2ddf8709f05e3434c918ed4 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:28:04 +0300
Subject: [PATCH 05/31] add a priority support row and pnpm dedupe
---
docs/src/components/pricing/PricingList.tsx | 2 +-
docs/src/components/pricing/PricingTable.tsx | 33 +++
pnpm-lock.yaml | 207 ++++++++++++++++++-
3 files changed, 231 insertions(+), 11 deletions(-)
diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
index 33effd602976cb..5d2f94dfe80b0a 100644
--- a/docs/src/components/pricing/PricingList.tsx
+++ b/docs/src/components/pricing/PricingList.tsx
@@ -91,7 +91,7 @@ function getButtonText(plan: string) {
return 'Buy now';
}
if (plan.match(/enterprise/)) {
- return 'Contact us';
+ return 'Contact sales';
}
return 'Get started';
}
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 3fe6604700d019..0226d9a3fd65d6 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -692,6 +692,15 @@ const rowHeaders: Record = {
}}
/>
),
+ 'priority-support': (
+
+ ),
'tech-advisory': (
= {
// Support
'core-support': ,
'x-support': ,
+ 'priority-support': no,
'tech-advisory': no,
'support-duration': no,
'response-time': no,
@@ -958,6 +968,16 @@ const proData: Record = {
// Support
'core-support': ,
'x-support': ,
+ 'priority-support': (
+
+ {'Add-on'}
+
+ }
+ />
+ ),
'tech-advisory': no,
'support-duration': ,
'response-time': no,
@@ -1061,6 +1081,16 @@ const premiumData: Record = {
// Support
'core-support': ,
'x-support': ,
+ 'priority-support': (
+
+ {'Add-on'}
+
+ }
+ />
+ ),
'tech-advisory': pending,
'support-duration': ,
'response-time': 72 hours} />,
@@ -1164,6 +1194,7 @@ const enterpriseData: Record = {
// Support
'core-support': yes,
'x-support': ,
+ 'priority-support': yes,
'tech-advisory': pending,
'support-duration': ,
'response-time': 24 hours} />,
@@ -1861,6 +1892,8 @@ export default function PricingTable({
{divider}
{renderRow('x-support')}
{divider}
+ {renderRow('priority-support')}
+ {divider}
{renderRow('support-duration')}
{divider}
{renderRow('response-time')}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d20ec3c39480f..2d6ab9f2987d84 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -350,7 +350,7 @@ importers:
version: link:../../packages/mui-utils/build
next:
specifier: latest
- version: 14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ version: 15.0.2(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react:
specifier: ^18.3.1
version: 18.3.1
@@ -360,7 +360,7 @@ importers:
devDependencies:
'@pigment-css/nextjs-plugin':
specifier: 0.0.24
- version: 0.0.24(@types/react@18.3.11)(next@14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+ version: 0.0.24(@types/react@18.3.11)(next@15.0.2(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
'@types/node':
specifier: ^20.16.11
version: 20.16.11
@@ -1402,7 +1402,7 @@ importers:
version: 7.25.7
'@mui/base':
specifier: '*'
- version: 5.0.0-beta.59(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ version: 5.0.0-beta.61(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/internal-markdown':
specifier: workspace:^
version: link:../markdown
@@ -3930,8 +3930,8 @@ packages:
'@types/react':
optional: true
- '@mui/base@5.0.0-beta.59':
- resolution: {integrity: sha512-LQZ2907rPMut/2Lq6qSnyP+nqOHLO3buMv91m7SdLpqp/lXU5+8vUXcf5oOwTNis6hfSvYGSQJ493Q00OzxDmQ==}
+ '@mui/base@5.0.0-beta.61':
+ resolution: {integrity: sha512-YaMOTXS3ecDNGsPKa6UdlJ8loFLvcL9+VbpCK3hfk71OaNauZRp4Yf7KeXDYr7Ms3M/XBD3SaiR6JMr6vYtfDg==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@types/react': ^18.3.11
@@ -4089,6 +4089,14 @@ packages:
'@types/react':
optional: true
+ '@mui/types@7.2.19':
+ resolution: {integrity: sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==}
+ peerDependencies:
+ '@types/react': ^18.3.11
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+
'@mui/utils@5.16.6':
resolution: {integrity: sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==}
engines: {node: '>=12.0.0'}
@@ -4129,6 +4137,16 @@ packages:
'@types/react':
optional: true
+ '@mui/utils@6.1.6':
+ resolution: {integrity: sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==}
+ engines: {node: '>=14.0.0'}
+ peerDependencies:
+ '@types/react': ^18.3.11
+ react: ^17.0.0 || ^18.0.0 || ^19.0.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+
'@mui/x-charts-vendor@7.20.0':
resolution: {integrity: sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==}
@@ -4431,6 +4449,9 @@ packages:
'@next/env@14.2.15':
resolution: {integrity: sha512-S1qaj25Wru2dUpcIZMjxeMVSwkt8BK4dmWHHiBuRstcIyOsMapqT4A4jSB6onvqeygkSSmOkyny9VVx8JIGamQ==}
+ '@next/env@15.0.2':
+ resolution: {integrity: sha512-c0Zr0ModK5OX7D4ZV8Jt/wqoXtitLNPwUfG9zElCZztdaZyNVnN40rDXVZ/+FGuR4CcNV5AEfM6N8f+Ener7Dg==}
+
'@next/eslint-plugin-next@14.2.15':
resolution: {integrity: sha512-pKU0iqKRBlFB/ocOI1Ip2CkKePZpYpnw5bEItEkuZ/Nr9FQP1+p7VDWr4VfOdff4i9bFmrOaeaU1bFEyAcxiMQ==}
@@ -4440,42 +4461,84 @@ packages:
cpu: [arm64]
os: [darwin]
+ '@next/swc-darwin-arm64@15.0.2':
+ resolution: {integrity: sha512-GK+8w88z+AFlmt+ondytZo2xpwlfAR8U6CRwXancHImh6EdGfHMIrTSCcx5sOSBei00GyLVL0ioo1JLKTfprgg==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [darwin]
+
'@next/swc-darwin-x64@14.2.15':
resolution: {integrity: sha512-5TGyjFcf8ampZP3e+FyCax5zFVHi+Oe7sZyaKOngsqyaNEpOgkKB3sqmymkZfowy3ufGA/tUgDPPxpQx931lHg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
+ '@next/swc-darwin-x64@15.0.2':
+ resolution: {integrity: sha512-KUpBVxIbjzFiUZhiLIpJiBoelqzQtVZbdNNsehhUn36e2YzKHphnK8eTUW1s/4aPy5kH/UTid8IuVbaOpedhpw==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [darwin]
+
'@next/swc-linux-arm64-gnu@14.2.15':
resolution: {integrity: sha512-3Bwv4oc08ONiQ3FiOLKT72Q+ndEMyLNsc/D3qnLMbtUYTQAmkx9E/JRu0DBpHxNddBmNT5hxz1mYBphJ3mfrrw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
+ '@next/swc-linux-arm64-gnu@15.0.2':
+ resolution: {integrity: sha512-9J7TPEcHNAZvwxXRzOtiUvwtTD+fmuY0l7RErf8Yyc7kMpE47MIQakl+3jecmkhOoIyi/Rp+ddq7j4wG6JDskQ==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [linux]
+
'@next/swc-linux-arm64-musl@14.2.15':
resolution: {integrity: sha512-k5xf/tg1FBv/M4CMd8S+JL3uV9BnnRmoe7F+GWC3DxkTCD9aewFRH1s5rJ1zkzDa+Do4zyN8qD0N8c84Hu96FQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
+ '@next/swc-linux-arm64-musl@15.0.2':
+ resolution: {integrity: sha512-BjH4ZSzJIoTTZRh6rG+a/Ry4SW0HlizcPorqNBixBWc3wtQtj4Sn9FnRZe22QqrPnzoaW0ctvSz4FaH4eGKMww==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [linux]
+
'@next/swc-linux-x64-gnu@14.2.15':
resolution: {integrity: sha512-kE6q38hbrRbKEkkVn62reLXhThLRh6/TvgSP56GkFNhU22TbIrQDEMrO7j0IcQHcew2wfykq8lZyHFabz0oBrA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
+ '@next/swc-linux-x64-gnu@15.0.2':
+ resolution: {integrity: sha512-i3U2TcHgo26sIhcwX/Rshz6avM6nizrZPvrDVDY1bXcLH1ndjbO8zuC7RoHp0NSK7wjJMPYzm7NYL1ksSKFreA==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [linux]
+
'@next/swc-linux-x64-musl@14.2.15':
resolution: {integrity: sha512-PZ5YE9ouy/IdO7QVJeIcyLn/Rc4ml9M2G4y3kCM9MNf1YKvFY4heg3pVa/jQbMro+tP6yc4G2o9LjAz1zxD7tQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
+ '@next/swc-linux-x64-musl@15.0.2':
+ resolution: {integrity: sha512-AMfZfSVOIR8fa+TXlAooByEF4OB00wqnms1sJ1v+iu8ivwvtPvnkwdzzFMpsK5jA2S9oNeeQ04egIWVb4QWmtQ==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [linux]
+
'@next/swc-win32-arm64-msvc@14.2.15':
resolution: {integrity: sha512-2raR16703kBvYEQD9HNLyb0/394yfqzmIeyp2nDzcPV4yPjqNUG3ohX6jX00WryXz6s1FXpVhsCo3i+g4RUX+g==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
+ '@next/swc-win32-arm64-msvc@15.0.2':
+ resolution: {integrity: sha512-JkXysDT0/hEY47O+Hvs8PbZAeiCQVxKfGtr4GUpNAhlG2E0Mkjibuo8ryGD29Qb5a3IOnKYNoZlh/MyKd2Nbww==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [win32]
+
'@next/swc-win32-ia32-msvc@14.2.15':
resolution: {integrity: sha512-fyTE8cklgkyR1p03kJa5zXEaZ9El+kDNM5A+66+8evQS5e/6v0Gk28LqA0Jet8gKSOyP+OTm/tJHzMlGdQerdQ==}
engines: {node: '>= 10'}
@@ -4488,6 +4551,12 @@ packages:
cpu: [x64]
os: [win32]
+ '@next/swc-win32-x64-msvc@15.0.2':
+ resolution: {integrity: sha512-foaUL0NqJY/dX0Pi/UcZm5zsmSk5MtP/gxx3xOPyREkMFN+CTjctPfu3QaqrQHinaKdPnMWPJDKt4VjDfTBe/Q==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [win32]
+
'@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
@@ -5249,6 +5318,9 @@ packages:
'@swc/counter@0.1.3':
resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+ '@swc/helpers@0.5.13':
+ resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
+
'@swc/helpers@0.5.5':
resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
@@ -9914,6 +9986,27 @@ packages:
sass:
optional: true
+ next@15.0.2:
+ resolution: {integrity: sha512-rxIWHcAu4gGSDmwsELXacqAPUk+j8dV/A9cDF5fsiCMpkBDYkO2AEaL1dfD+nNmDiU6QMCFN8Q30VEKapT9UHQ==}
+ engines: {node: '>=18.18.0'}
+ hasBin: true
+ peerDependencies:
+ '@opentelemetry/api': ^1.1.0
+ '@playwright/test': ^1.41.2
+ babel-plugin-react-compiler: '*'
+ react: ^18.2.0 || 19.0.0-rc-02c0e824-20241028
+ react-dom: ^18.2.0 || 19.0.0-rc-02c0e824-20241028
+ sass: ^1.3.0
+ peerDependenciesMeta:
+ '@opentelemetry/api':
+ optional: true
+ '@playwright/test':
+ optional: true
+ babel-plugin-react-compiler:
+ optional: true
+ sass:
+ optional: true
+
nise@6.1.1:
resolution: {integrity: sha512-aMSAzLVY7LyeM60gvBS423nBmIPP+Wy7St7hsb+8/fc1HmeoHJfLO8CKse4u3BtOZvQLJghYPI2i/1WZrEj5/g==}
@@ -11852,6 +11945,19 @@ packages:
babel-plugin-macros:
optional: true
+ styled-jsx@5.1.6:
+ resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+ engines: {node: '>= 12.0.0'}
+ peerDependencies:
+ '@babel/core': '*'
+ babel-plugin-macros: '*'
+ react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+ peerDependenciesMeta:
+ '@babel/core':
+ optional: true
+ babel-plugin-macros:
+ optional: true
+
styled-system@5.1.5:
resolution: {integrity: sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==}
@@ -14735,12 +14841,12 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.11
- '@mui/base@5.0.0-beta.59(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+ '@mui/base@5.0.0-beta.61(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.7
'@floating-ui/react-dom': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@mui/types': 7.2.18(@types/react@18.3.11)
- '@mui/utils': 6.1.4(@types/react@18.3.11)(react@18.3.1)
+ '@mui/types': 7.2.19(@types/react@18.3.11)
+ '@mui/utils': 6.1.6(@types/react@18.3.11)(react@18.3.1)
'@popperjs/core': 2.11.8
clsx: 2.1.1
prop-types: 15.8.1
@@ -14898,6 +15004,10 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.11
+ '@mui/types@7.2.19(@types/react@18.3.11)':
+ optionalDependencies:
+ '@types/react': 18.3.11
+
'@mui/utils@5.16.6(@types/react@18.3.11)(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.7
@@ -14946,6 +15056,18 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.11
+ '@mui/utils@6.1.6(@types/react@18.3.11)(react@18.3.1)':
+ dependencies:
+ '@babel/runtime': 7.25.7
+ '@mui/types': 7.2.19(@types/react@18.3.11)
+ '@types/prop-types': 15.7.13
+ clsx: 2.1.1
+ prop-types: 15.8.1
+ react: 18.3.1
+ react-is: 18.3.1
+ optionalDependencies:
+ '@types/react': 18.3.11
+
'@mui/x-charts-vendor@7.20.0':
dependencies:
'@babel/runtime': 7.25.7
@@ -15229,6 +15351,8 @@ snapshots:
'@next/env@14.2.15': {}
+ '@next/env@15.0.2': {}
+
'@next/eslint-plugin-next@14.2.15':
dependencies:
glob: 10.3.10
@@ -15236,30 +15360,54 @@ snapshots:
'@next/swc-darwin-arm64@14.2.15':
optional: true
+ '@next/swc-darwin-arm64@15.0.2':
+ optional: true
+
'@next/swc-darwin-x64@14.2.15':
optional: true
+ '@next/swc-darwin-x64@15.0.2':
+ optional: true
+
'@next/swc-linux-arm64-gnu@14.2.15':
optional: true
+ '@next/swc-linux-arm64-gnu@15.0.2':
+ optional: true
+
'@next/swc-linux-arm64-musl@14.2.15':
optional: true
+ '@next/swc-linux-arm64-musl@15.0.2':
+ optional: true
+
'@next/swc-linux-x64-gnu@14.2.15':
optional: true
+ '@next/swc-linux-x64-gnu@15.0.2':
+ optional: true
+
'@next/swc-linux-x64-musl@14.2.15':
optional: true
+ '@next/swc-linux-x64-musl@15.0.2':
+ optional: true
+
'@next/swc-win32-arm64-msvc@14.2.15':
optional: true
+ '@next/swc-win32-arm64-msvc@15.0.2':
+ optional: true
+
'@next/swc-win32-ia32-msvc@14.2.15':
optional: true
'@next/swc-win32-x64-msvc@14.2.15':
optional: true
+ '@next/swc-win32-x64-msvc@15.0.2':
+ optional: true
+
'@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
optional: true
@@ -15692,10 +15840,10 @@ snapshots:
'@opentelemetry/api@1.8.0':
optional: true
- '@pigment-css/nextjs-plugin@0.0.24(@types/react@18.3.11)(next@14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+ '@pigment-css/nextjs-plugin@0.0.24(@types/react@18.3.11)(next@15.0.2(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
dependencies:
'@pigment-css/unplugin': 0.0.24(@types/react@18.3.11)(react@18.3.1)
- next: 14.2.15(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ next: 15.0.2(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
transitivePeerDependencies:
- '@types/react'
- react
@@ -16402,6 +16550,10 @@ snapshots:
'@swc/counter@0.1.3': {}
+ '@swc/helpers@0.5.13':
+ dependencies:
+ tslib: 2.6.2
+
'@swc/helpers@0.5.5':
dependencies:
'@swc/counter': 0.1.3
@@ -22323,6 +22475,33 @@ snapshots:
- '@babel/core'
- babel-plugin-macros
+ next@15.0.2(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ dependencies:
+ '@next/env': 15.0.2
+ '@swc/counter': 0.1.3
+ '@swc/helpers': 0.5.13
+ busboy: 1.6.0
+ caniuse-lite: 1.0.30001667
+ postcss: 8.4.31
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+ styled-jsx: 5.1.6(@babel/core@7.25.8)(babel-plugin-macros@3.1.0)(react@18.3.1)
+ optionalDependencies:
+ '@next/swc-darwin-arm64': 15.0.2
+ '@next/swc-darwin-x64': 15.0.2
+ '@next/swc-linux-arm64-gnu': 15.0.2
+ '@next/swc-linux-arm64-musl': 15.0.2
+ '@next/swc-linux-x64-gnu': 15.0.2
+ '@next/swc-linux-x64-musl': 15.0.2
+ '@next/swc-win32-arm64-msvc': 15.0.2
+ '@next/swc-win32-x64-msvc': 15.0.2
+ '@opentelemetry/api': 1.8.0
+ '@playwright/test': 1.47.2
+ sharp: 0.33.5
+ transitivePeerDependencies:
+ - '@babel/core'
+ - babel-plugin-macros
+
nise@6.1.1:
dependencies:
'@sinonjs/commons': 3.0.1
@@ -24608,6 +24787,14 @@ snapshots:
'@babel/core': 7.25.8
babel-plugin-macros: 3.1.0
+ styled-jsx@5.1.6(@babel/core@7.25.8)(babel-plugin-macros@3.1.0)(react@18.3.1):
+ dependencies:
+ client-only: 0.0.1
+ react: 18.3.1
+ optionalDependencies:
+ '@babel/core': 7.25.8
+ babel-plugin-macros: 3.1.0
+
styled-system@5.1.5:
dependencies:
'@styled-system/background': 5.1.2
From 5cf13da097bfbfeda2095d25dae0ae272ad2dfb3 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:41:27 +0300
Subject: [PATCH 06/31] icon-color
---
.../static/branding/pricing/x-plan-enterprise.svg | 10 ++++++++++
docs/src/components/pricing/PricingTable.tsx | 2 +-
2 files changed, 11 insertions(+), 1 deletion(-)
create mode 100644 docs/public/static/branding/pricing/x-plan-enterprise.svg
diff --git a/docs/public/static/branding/pricing/x-plan-enterprise.svg b/docs/public/static/branding/pricing/x-plan-enterprise.svg
new file mode 100644
index 00000000000000..2e31c528395686
--- /dev/null
+++ b/docs/public/static/branding/pricing/x-plan-enterprise.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 0226d9a3fd65d6..3dfaae8778460a 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -36,7 +36,7 @@ const planInfo = {
'The most advanced features for data-rich applications along with standard support.',
},
enterprise: {
- iconName: 'pricing/x-plan-premium',
+ iconName: 'pricing/x-plan-enterprise',
title: 'Enterprise',
description:
'All features of Premium coupled with enterprise-grade priority support and feature requests.',
From 93a56b397213f62bee75a0bac24f720608a72254 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Fri, 1 Nov 2024 13:57:24 +0300
Subject: [PATCH 07/31] edit
---
docs/src/components/pricing/PricingTable.tsx | 23 ++++++++++++--------
1 file changed, 14 insertions(+), 9 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 3dfaae8778460a..1ea08bf85c4596 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -695,9 +695,8 @@ const rowHeaders: Record = {
'priority-support': (
),
@@ -970,9 +969,12 @@ const proData: Record = {
'x-support': ,
'priority-support': (
+ value={
+
{'Add-on'}
}
@@ -1083,9 +1085,12 @@ const premiumData: Record = {
'x-support': ,
'priority-support': (
+ value={
+
{'Add-on'}
}
From 56828debfecd290c659e37e3592f913da20c158b Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Thu, 7 Nov 2024 13:46:26 +0300
Subject: [PATCH 08/31] from review
- made annual pricing main (monthly only shows below)
- added a billing explainer
- row header borderRadius: 1 -> borderRadius: '12px 0 0 12px',
- removed priority support from Pro
- priority support pricing added in the table
---
docs/src/components/pricing/PricingTable.tsx | 124 ++++++++++++-------
1 file changed, 78 insertions(+), 46 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 1ea08bf85c4596..d2c2bf1aaa10f3 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -121,29 +121,31 @@ export function PlanPrice(props: PlanPriceProps) {
);
}
- const monthlyDisplay = annual;
-
- const priceUnit = monthlyDisplay ? '/ month / dev' : '/ dev';
+ const priceUnit = annual ? '/ year / dev' : '/ dev';
const getPriceExplanation = (displayedValue: number) => {
+ if (annual) {
+ return `Eq. to $${displayedValue}/month/dev.`;
+ }
+ };
+ const getBillingExplanation = () => {
if (!annual) {
- return `$${displayedValue}/dev billed once.`;
+ return `One-time payment`;
}
- return monthlyDisplay
- ? `Billed annually at $${displayedValue}/dev.`
- : `$${displayedValue}/dev/month billed annualy.`;
+ return `Annual billing`;
};
if (plan === 'pro') {
- const monthlyValue = annual ? 15 : 15 * 3;
- const annualValue = monthlyValue * 12;
+ const annualValue = 180;
+ const perpetualValue = annualValue * 3;
+ const monthlyValueForAnnual = annualValue / 12;
- const mainDisplayValue = monthlyDisplay ? monthlyValue : annualValue;
- const priceExplanation = getPriceExplanation(monthlyDisplay ? annualValue : monthlyValue);
+ const mainDisplayValue = annual ? annualValue : perpetualValue;
+ const priceExplanation = getPriceExplanation(annual ? monthlyValueForAnnual : perpetualValue);
return (
-
+
- {(annual || monthlyDisplay) && (
-
+ {
+
{priceExplanation}
- )}
+ }
+
+
+
+ {getBillingExplanation()}
+
);
}
if (plan === 'premium') {
- const premiumMonthlyValue = annual ? 49 : 49 * 3;
- const premiumAnnualValue = premiumMonthlyValue * 12;
+ const premiumAnnualValue = 588;
+ const premiumPerpetualValue = premiumAnnualValue * 3;
+ const premiumMonthlyValueForAnnual = premiumAnnualValue / 12;
- const premiumDisplayedValue = monthlyDisplay ? premiumMonthlyValue : premiumAnnualValue;
+ const premiumDisplayedValue = annual ? premiumAnnualValue : premiumPerpetualValue;
const priceExplanation = getPriceExplanation(
- monthlyDisplay ? premiumAnnualValue : premiumMonthlyValue,
+ annual ? premiumMonthlyValueForAnnual : premiumPerpetualValue,
);
return (
@@ -194,10 +211,9 @@ export function PlanPrice(props: PlanPriceProps) {
alignItems: 'center',
justifyContent: 'center',
mt: 1,
- mb: 4,
+ mb: 0,
}}
>
-
- {(annual || monthlyDisplay) && (
-
+ {
+
{priceExplanation}
- )}
+ }
+
+
+
+ {getBillingExplanation()}
+
);
@@ -427,7 +457,7 @@ function RowHead({
sx={[
{
justifyContent: 'flex-start',
- borderRadius: 1,
+ borderRadius: '12px 0 0 12px',
p: 1,
transition: 'none',
typography: 'body2',
@@ -677,7 +707,12 @@ const rowHeaders: Record = {
'core-support': (
+ Technical support for
+ MUI Core
+
+ ),
tooltip:
'Support for MUI Core (for example Material UI) is provided by the community. MUI Core maintainers focus on solving root issues to support the community at large.',
}}
@@ -686,7 +721,12 @@ const rowHeaders: Record = {
'x-support': (
+ Technical support for
+ MUI X
+
+ ),
tooltip:
'You can ask for technical support, report bugs and submit unlimited feature requests to the advanced components. We take your subscription plan as one of the prioritization criteria.',
}}
@@ -716,7 +756,10 @@ const rowHeaders: Record = {
),
'response-time': (
),
'pre-screening': (
@@ -967,19 +1010,7 @@ const proData: Record = {
// Support
'core-support': ,
'x-support': ,
- 'priority-support': (
-
- {'Add-on'}
-
- }
- />
- ),
+ 'priority-support': no,
'tech-advisory': no,
'support-duration': ,
'response-time': no,
@@ -1094,6 +1125,7 @@ const premiumData: Record = {
{'Add-on'}
}
+ metadata={available at $399/year/dev}
/>
),
'tech-advisory': pending,
@@ -1493,7 +1525,7 @@ export default function PricingTable({
const renderNestedRow = (key: string) => renderMasterRow(key, nestedGridSx, plans);
return (
-
+
{!columnHeaderHidden && (
@@ -1897,10 +1929,10 @@ export default function PricingTable({
{divider}
{renderRow('x-support')}
{divider}
- {renderRow('priority-support')}
- {divider}
{renderRow('support-duration')}
{divider}
+ {renderRow('priority-support')}
+ {divider}
{renderRow('response-time')}
{divider}
{renderRow('pre-screening')}
From eb5b944bc673e7c991a190491cd1fba56f087d34 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:25:17 +0300
Subject: [PATCH 09/31] better way to showcase priority support
---
docs/src/components/pricing/PricingTable.tsx | 189 ++++++++++++++-----
1 file changed, 137 insertions(+), 52 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index d2c2bf1aaa10f3..737595246754a9 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -17,6 +17,9 @@ 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 BusinessIcon from '@mui/icons-material/Business';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
const planInfo = {
community: {
@@ -124,14 +127,14 @@ export function PlanPrice(props: PlanPriceProps) {
const priceUnit = annual ? '/ year / dev' : '/ dev';
const getPriceExplanation = (displayedValue: number) => {
if (annual) {
- return `Eq. to $${displayedValue}/month/dev.`;
+ return `Eq. to $${displayedValue} / month / dev`;
}
};
const getBillingExplanation = () => {
if (!annual) {
return `One-time payment`;
}
- return `Annual billing`;
+ return `Billed annually`;
};
if (plan === 'pro') {
@@ -163,30 +166,30 @@ export function PlanPrice(props: PlanPriceProps) {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
- mb: 2,
minHeight: planPriceMinHeight,
}}
>
- {
-
- {priceExplanation}
-
- }
+
+ {getBillingExplanation()}
+
-
- {getBillingExplanation()}
-
+ {
+
+ {priceExplanation}
+
+ }
);
@@ -231,31 +234,39 @@ export function PlanPrice(props: PlanPriceProps) {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
- mb: 2,
minHeight: planPriceMinHeight,
}}
>
- {
-
- {priceExplanation}
-
- }
+
+ {getBillingExplanation()}
+
-
- {getBillingExplanation()}
-
+ {
+
+ {priceExplanation}
+
+ }
+
+ }
+ label="Include Priority support"
+ sx={{ mr: 0 }}
+ labelPlacement="bottom"
+ />
+
);
}
@@ -269,15 +280,24 @@ export function PlanPrice(props: PlanPriceProps) {
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
- mt: 5,
- mb: 4,
+ mt: 3,
+ mb: 1,
}}
>
-
+
Custom pricing
+
+
+ + Priority support included
+
+
);
}
@@ -735,8 +755,8 @@ const rowHeaders: Record = {
'priority-support': (
),
@@ -1115,22 +1135,16 @@ const premiumData: Record = {
'core-support': ,
'x-support': ,
'priority-support': (
-
- {'Add-on'}
-
- }
- metadata={available at $399/year/dev}
- />
+ Available at $399/year/dev} />
),
'tech-advisory': pending,
'support-duration': ,
- 'response-time': 72 hours} />,
+ 'response-time': (
+ 24 hours (with priority support)}
+ />
+ ),
'pre-screening': no,
'issue-escalation': no,
'security-questionnaire': ,
@@ -1231,7 +1245,7 @@ const enterpriseData: Record = {
// Support
'core-support': yes,
'x-support': ,
- 'priority-support': yes,
+ 'priority-support': ,
'tech-advisory': pending,
'support-duration': ,
'response-time': 24 hours} />,
@@ -1475,12 +1489,14 @@ export default function PricingTable({
const [dataGridCollapsed, setDataGridCollapsed] = React.useState(false);
const [chartsCollapsed, setChartsCollapsed] = React.useState(false);
const [treeViewCollapsed, setTreeViewCollapsed] = React.useState(false);
+ const [prioritySupportCollapsed, setPrioritySupportCollapsed] = React.useState(false);
React.useEffect(() => {
if (router.query['expand-path'] === 'all') {
setDataGridCollapsed(true);
setChartsCollapsed(true);
setTreeViewCollapsed(true);
+ setPrioritySupportCollapsed(true);
}
}, [router.query]);
@@ -1520,6 +1536,12 @@ export default function PricingTable({
sx={{ color: 'grey.600', opacity: treeViewCollapsed ? 0 : 1 }}
/>
);
+ const prioritySupportUnfoldMore = (
+
+ );
const renderRow = (key: string) => renderMasterRow(key, gridSx, plans);
const renderNestedRow = (key: string) => renderMasterRow(key, nestedGridSx, plans);
@@ -1931,13 +1953,76 @@ export default function PricingTable({
{divider}
{renderRow('support-duration')}
{divider}
- {renderRow('priority-support')}
- {divider}
- {renderRow('response-time')}
- {divider}
- {renderRow('pre-screening')}
- {divider}
- {renderRow('issue-escalation')}
+
+ |
+ {prioritySupportUnfoldMore} |
+
+ {prioritySupportUnfoldMore}
+ |
+
+ {prioritySupportUnfoldMore}
+ |
+
+ {prioritySupportUnfoldMore}
+ |
+ setPrioritySupportCollapsed((bool) => !bool)}
+ endIcon={
+
+ }
+ sx={[
+ (theme) => ({
+ px: 1,
+ justifyContent: 'flex-start',
+ fontSize: '0.875rem',
+ fontWeight: 'medium',
+ borderRadius: '0px',
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ width: '100%',
+ height: '100%',
+ '&:hover': {
+ bgcolor: alpha(theme.palette.primary.main, 0.06),
+ '@media (hover: none)': {
+ bgcolor: 'initial',
+ },
+ },
+ }),
+ (theme) =>
+ theme.applyDarkStyles({
+ '&:hover': {
+ bgcolor: alpha(theme.palette.primary.main, 0.06),
+ },
+ }),
+ ]}
+ >
+ Priority Support
+
+
+
+ {divider}
+ {renderRow('priority-support')}
+ {divider}
+ {renderRow('response-time')}
+ {divider}
+ {renderRow('pre-screening')}
+ {divider}
+ {renderRow('issue-escalation')}
+ {divider}
+
{divider}
{renderRow('security-questionnaire')}
{divider}
From 31a0e09225893b1fbe8005e2f4388ee7a37eb2d5 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:44:38 +0300
Subject: [PATCH 10/31] support icon
---
docs/src/components/pricing/PricingTable.tsx | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 737595246754a9..77b77287cb798d 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -20,6 +20,7 @@ import BusinessIcon from '@mui/icons-material/Business';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
+import SupportAgentIcon from '@mui/icons-material/SupportAgent';
const planInfo = {
community: {
@@ -262,7 +263,11 @@ export function PlanPrice(props: PlanPriceProps) {
}
- label="Include Priority support"
+ label={
+
+ Add Priority support
+
+ }
sx={{ mr: 0 }}
labelPlacement="bottom"
/>
@@ -1946,7 +1951,9 @@ export default function PricingTable({
{divider}
{renderRow('mui-x-updates')}
- Support
+ }>
+ Support
+
{renderRow('core-support')}
{divider}
{renderRow('x-support')}
From 2152572e6047733fec07d826d94a7416a411d8ed Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Thu, 7 Nov 2024 17:12:47 +0300
Subject: [PATCH 11/31] minor
---
docs/src/components/pricing/PricingTable.tsx | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 77b77287cb798d..03f454703a4c86 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -264,7 +264,10 @@ export function PlanPrice(props: PlanPriceProps) {
}
label={
-
+
Add Priority support
}
@@ -299,7 +302,10 @@ export function PlanPrice(props: PlanPriceProps) {
mt: 9,
}}
>
-
+
+ Priority support included
From 29123d7f2d782a2506d719a3c007047b95b52497 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Fri, 15 Nov 2024 12:21:24 +0300
Subject: [PATCH 12/31] try
---
docs/pages/pricing.tsx | 5 +-
docs/src/components/pricing/PricingTable.tsx | 198 +++++++-----------
.../pricing/PrioritySupportContext.tsx | 28 +++
3 files changed, 108 insertions(+), 123 deletions(-)
create mode 100644 docs/src/components/pricing/PrioritySupportContext.tsx
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
index 9ffc17f0704147..f52c07ad5e5b64 100644
--- a/docs/pages/pricing.tsx
+++ b/docs/pages/pricing.tsx
@@ -13,6 +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 { PrioritySupportProvider } from 'docs/src/components/pricing/PrioritySupportContext';
import { LicenseModelProvider } from 'docs/src/components/pricing/LicenseModelContext';
export default function Pricing() {
@@ -35,7 +36,9 @@ export default function Pricing() {
{/* Desktop */}
-
+
+
+
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 03f454703a4c86..3b74521170508d 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -21,6 +21,9 @@ import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';
+import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
+
+const a = false; //to be removed
const planInfo = {
community: {
@@ -97,6 +100,8 @@ export function PlanName({
interface PlanPriceProps {
plan: 'community' | 'pro' | 'premium' | 'enterprise';
+ // checked?: boolean;
+ // handleChange2?: (event: React.ChangeEvent) => void;
}
export function PlanPrice(props: PlanPriceProps) {
@@ -106,6 +111,11 @@ export function PlanPrice(props: PlanPriceProps) {
const annual = licenseModel === 'annual';
const planPriceMinHeight = 24;
+ const { isPrioritySupport, setIsPrioritySupport } = usePrioritySupport();
+ const handleChange = (event: React.ChangeEvent) => {
+ setIsPrioritySupport(event.target.checked);
+ };
+
if (plan === 'community') {
return (
@@ -128,14 +138,9 @@ export function PlanPrice(props: PlanPriceProps) {
const priceUnit = annual ? '/ year / dev' : '/ dev';
const getPriceExplanation = (displayedValue: number) => {
if (annual) {
- return `Eq. to $${displayedValue} / month / dev`;
- }
- };
- const getBillingExplanation = () => {
- if (!annual) {
- return `One-time payment`;
+ return `Equivalent to $${displayedValue} / month / dev`;
}
- return `Billed annually`;
+ return '';
};
if (plan === 'pro') {
@@ -162,18 +167,6 @@ export function PlanPrice(props: PlanPriceProps) {
{priceUnit}
-
-
- {getBillingExplanation()}
-
-
@@ -230,18 +224,6 @@ export function PlanPrice(props: PlanPriceProps) {
{priceUnit}
-
-
- {getBillingExplanation()}
-
-
}
+ control={}
label={
- Add Priority support
+ Add priority support
+ at $399/year/dev
}
+ checked={isPrioritySupport}
+ onChange={handleChange}
sx={{ mr: 0 }}
labelPlacement="bottom"
/>
@@ -299,7 +284,7 @@ export function PlanPrice(props: PlanPriceProps) {
{typeof value === 'string' ? (
@@ -766,7 +757,7 @@ const rowHeaders: Record = {
'priority-support': (
@@ -1146,16 +1137,31 @@ const premiumData: Record = {
'core-support': ,
'x-support': ,
'priority-support': (
- Available at $399/year/dev} />
- ),
- 'tech-advisory': pending,
- 'support-duration': ,
- 'response-time': (
24 hours (with priority support)}
+ value={
+
+ }
+ label={
+
+ Add
+
+ }
+ // checked={isPrioritySupport}
+ // onChange={handleSwitchChange}
+ sx={{ mr: 0 }}
+ labelPlacement="bottom"
+ />
+
+ }
/>
),
+ 'tech-advisory': pending,
+ 'support-duration': ,
+ 'response-time': ,
'pre-screening': no,
'issue-escalation': no,
'security-questionnaire': ,
@@ -1375,6 +1381,7 @@ function StickyHead({
const divider = ;
function renderMasterRow(key: string, gridSx: object, plans: Array) {
+ // const { isPrioritySupport, setIsPrioritySupport } = usePrioritySupport();
return (
{
if (router.query['expand-path'] === 'all') {
setDataGridCollapsed(true);
setChartsCollapsed(true);
setTreeViewCollapsed(true);
- setPrioritySupportCollapsed(true);
}
}, [router.query]);
@@ -1547,12 +1552,20 @@ export default function PricingTable({
sx={{ color: 'grey.600', opacity: treeViewCollapsed ? 0 : 1 }}
/>
);
- const prioritySupportUnfoldMore = (
-
- );
+
+ /* const [isPrioritySupport, setIsPrioritySupport] = React.useState(false);
+ const handleSwitchChange = (event: React.ChangeEvent) => {
+ setIsPrioritySupport(event.target.checked);
+ };
+ console.log('isPrioritySupportMain', isPrioritySupport);
+ */
+
+ /*
+ const { isPrioritySupport, setIsPrioritySupport } = usePrioritySupport();
+ const handleChange = (event: React.ChangeEvent) => {
+ setIsPrioritySupport(event.target.checked);
+ };
+ */
const renderRow = (key: string) => renderMasterRow(key, gridSx, plans);
const renderNestedRow = (key: string) => renderMasterRow(key, nestedGridSx, plans);
@@ -1589,7 +1602,11 @@ export default function PricingTable({
-
+
@@ -1966,76 +1983,13 @@ export default function PricingTable({
{divider}
{renderRow('support-duration')}
{divider}
-
- |
- {prioritySupportUnfoldMore} |
-
- {prioritySupportUnfoldMore}
- |
-
- {prioritySupportUnfoldMore}
- |
-
- {prioritySupportUnfoldMore}
- |
- setPrioritySupportCollapsed((bool) => !bool)}
- endIcon={
-
- }
- sx={[
- (theme) => ({
- px: 1,
- justifyContent: 'flex-start',
- fontSize: '0.875rem',
- fontWeight: 'medium',
- borderRadius: '0px',
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- '&:hover': {
- bgcolor: alpha(theme.palette.primary.main, 0.06),
- '@media (hover: none)': {
- bgcolor: 'initial',
- },
- },
- }),
- (theme) =>
- theme.applyDarkStyles({
- '&:hover': {
- bgcolor: alpha(theme.palette.primary.main, 0.06),
- },
- }),
- ]}
- >
- Priority Support
-
-
-
- {divider}
- {renderRow('priority-support')}
- {divider}
- {renderRow('response-time')}
- {divider}
- {renderRow('pre-screening')}
- {divider}
- {renderRow('issue-escalation')}
- {divider}
-
+ {renderRow('priority-support')}
+ {divider}
+ {renderRow('response-time')}
+ {divider}
+ {renderRow('pre-screening')}
+ {divider}
+ {renderRow('issue-escalation')}
{divider}
{renderRow('security-questionnaire')}
{divider}
diff --git a/docs/src/components/pricing/PrioritySupportContext.tsx b/docs/src/components/pricing/PrioritySupportContext.tsx
new file mode 100644
index 00000000000000..b8725c7cb158ad
--- /dev/null
+++ b/docs/src/components/pricing/PrioritySupportContext.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+const PrioritySupport = React.createContext<{
+ isPrioritySupport: boolean;
+ setIsPrioritySupport: React.Dispatch>;
+}>({
+ isPrioritySupport: false,
+ setIsPrioritySupport: () => {},
+});
+
+/*
+if (process.env.NODE_ENV !== 'production') {
+ LicenseModel.displayName = 'LicenseModel';
+}
+*/
+
+export function PrioritySupportProvider(props: any) {
+ const [isPrioritySupport, setIsPrioritySupport] = React.useState(false);
+ const value = React.useMemo(
+ () => ({ isPrioritySupport, setIsPrioritySupport }),
+ [isPrioritySupport, setIsPrioritySupport],
+ );
+ return {props.children};
+}
+
+export function usePrioritySupport() {
+ return React.useContext(PrioritySupport);
+}
From 4f85cc9b3b252c2c1682586d135ee65d5d8a13b3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Fri, 15 Nov 2024 11:41:32 +0100
Subject: [PATCH 13/31] reset pnpm-lock.yaml changes
---
pnpm-lock.yaml | 76 +-------------------------------------------------
1 file changed, 1 insertion(+), 75 deletions(-)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f495f1cb908853..a1c623912a212f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4112,14 +4112,6 @@ packages:
'@types/react':
optional: true
- '@mui/types@7.2.19':
- resolution: {integrity: sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==}
- peerDependencies:
- '@types/react': ^18.3.11
- peerDependenciesMeta:
- '@types/react':
- optional: true
-
'@mui/utils@5.16.6':
resolution: {integrity: sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==}
engines: {node: '>=12.0.0'}
@@ -4140,16 +4132,6 @@ packages:
'@types/react':
optional: true
- '@mui/utils@6.1.6':
- resolution: {integrity: sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==}
- engines: {node: '>=14.0.0'}
- peerDependencies:
- '@types/react': ^18.3.11
- react: ^17.0.0 || ^18.0.0 || ^19.0.0
- peerDependenciesMeta:
- '@types/react':
- optional: true
-
'@mui/x-charts-vendor@7.20.0':
resolution: {integrity: sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==}
@@ -4560,12 +4542,6 @@ packages:
cpu: [x64]
os: [win32]
- '@next/swc-win32-x64-msvc@15.0.2':
- resolution: {integrity: sha512-foaUL0NqJY/dX0Pi/UcZm5zsmSk5MtP/gxx3xOPyREkMFN+CTjctPfu3QaqrQHinaKdPnMWPJDKt4VjDfTBe/Q==}
- engines: {node: '>= 10'}
- cpu: [x64]
- os: [win32]
-
'@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
@@ -15222,18 +15198,6 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.12
- '@mui/utils@6.1.6(@types/react@18.3.11)(react@18.3.1)':
- dependencies:
- '@babel/runtime': 7.25.7
- '@mui/types': 7.2.19(@types/react@18.3.11)
- '@types/prop-types': 15.7.13
- clsx: 2.1.1
- prop-types: 15.8.1
- react: 18.3.1
- react-is: 18.3.1
- optionalDependencies:
- '@types/react': 18.3.11
-
'@mui/x-charts-vendor@7.20.0':
dependencies:
'@babel/runtime': 7.26.0
@@ -15574,9 +15538,6 @@ snapshots:
'@next/swc-win32-x64-msvc@15.0.3':
optional: true
- '@next/swc-win32-x64-msvc@15.0.2':
- optional: true
-
'@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
optional: true
@@ -16008,7 +15969,7 @@ snapshots:
'@opentelemetry/api@1.8.0':
optional: true
-
+
'@pigment-css/nextjs-plugin@0.0.26(@types/react@18.3.12)(next@15.0.3(@babel/core@7.26.0)(@opentelemetry/api@1.8.0)(@playwright/test@1.48.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack-sources@3.2.3)':
dependencies:
'@pigment-css/unplugin': 0.0.26(@types/react@18.3.12)(react@18.3.1)(webpack-sources@3.2.3)
@@ -22787,33 +22748,6 @@ snapshots:
- '@babel/core'
- babel-plugin-macros
- next@15.0.2(@babel/core@7.25.8)(@opentelemetry/api@1.8.0)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
- dependencies:
- '@next/env': 15.0.2
- '@swc/counter': 0.1.3
- '@swc/helpers': 0.5.13
- busboy: 1.6.0
- caniuse-lite: 1.0.30001667
- postcss: 8.4.31
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
- styled-jsx: 5.1.6(@babel/core@7.25.8)(babel-plugin-macros@3.1.0)(react@18.3.1)
- optionalDependencies:
- '@next/swc-darwin-arm64': 15.0.2
- '@next/swc-darwin-x64': 15.0.2
- '@next/swc-linux-arm64-gnu': 15.0.2
- '@next/swc-linux-arm64-musl': 15.0.2
- '@next/swc-linux-x64-gnu': 15.0.2
- '@next/swc-linux-x64-musl': 15.0.2
- '@next/swc-win32-arm64-msvc': 15.0.2
- '@next/swc-win32-x64-msvc': 15.0.2
- '@opentelemetry/api': 1.8.0
- '@playwright/test': 1.47.2
- sharp: 0.33.5
- transitivePeerDependencies:
- - '@babel/core'
- - babel-plugin-macros
-
nise@6.1.1:
dependencies:
'@sinonjs/commons': 3.0.1
@@ -25143,14 +25077,6 @@ snapshots:
'@babel/core': 7.26.0
babel-plugin-macros: 3.1.0
- styled-jsx@5.1.6(@babel/core@7.25.8)(babel-plugin-macros@3.1.0)(react@18.3.1):
- dependencies:
- client-only: 0.0.1
- react: 18.3.1
- optionalDependencies:
- '@babel/core': 7.25.8
- babel-plugin-macros: 3.1.0
-
styled-system@5.1.5:
dependencies:
'@styled-system/background': 5.1.2
From e2d56361f68bbb554c19433575e1bdfceb6b58b2 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Fri, 15 Nov 2024 11:44:29 +0100
Subject: [PATCH 14/31] cleanup context provider
---
docs/src/components/pricing/PrioritySupportContext.tsx | 9 ++-------
1 file changed, 2 insertions(+), 7 deletions(-)
diff --git a/docs/src/components/pricing/PrioritySupportContext.tsx b/docs/src/components/pricing/PrioritySupportContext.tsx
index b8725c7cb158ad..009144460a8e47 100644
--- a/docs/src/components/pricing/PrioritySupportContext.tsx
+++ b/docs/src/components/pricing/PrioritySupportContext.tsx
@@ -3,16 +3,11 @@ import * as React from 'react';
const PrioritySupport = React.createContext<{
isPrioritySupport: boolean;
setIsPrioritySupport: React.Dispatch>;
-}>({
- isPrioritySupport: false,
- setIsPrioritySupport: () => {},
-});
+}>(undefined as any);
-/*
if (process.env.NODE_ENV !== 'production') {
- LicenseModel.displayName = 'LicenseModel';
+ PrioritySupport.displayName = 'PrioritySupport';
}
-*/
export function PrioritySupportProvider(props: any) {
const [isPrioritySupport, setIsPrioritySupport] = React.useState(false);
From af233babded149f968201d2bf9b46edee393e2f3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Fri, 15 Nov 2024 11:46:50 +0100
Subject: [PATCH 15/31] compress SVG
---
.../static/branding/pricing/x-plan-enterprise.svg | 11 +----------
docs/src/components/pricing/PricingList.tsx | 7 +++++--
2 files changed, 6 insertions(+), 12 deletions(-)
diff --git a/docs/public/static/branding/pricing/x-plan-enterprise.svg b/docs/public/static/branding/pricing/x-plan-enterprise.svg
index 2e31c528395686..0a88d2d3b9ce28 100644
--- a/docs/public/static/branding/pricing/x-plan-enterprise.svg
+++ b/docs/public/static/branding/pricing/x-plan-enterprise.svg
@@ -1,10 +1 @@
-
\ No newline at end of file
+
diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
index 5d2f94dfe80b0a..2c67a21b7397ec 100644
--- a/docs/src/components/pricing/PricingList.tsx
+++ b/docs/src/components/pricing/PricingList.tsx
@@ -90,10 +90,13 @@ function getButtonText(plan: string) {
if (plan.match(/(pro|premium)/)) {
return 'Buy now';
}
- if (plan.match(/enterprise/)) {
+ if (plan === 'enterprise') {
return 'Contact sales';
}
- return 'Get started';
+ if (plan === 'community') {
+ return 'Get started';
+ }
+ return 'missing';
}
export default function PricingList() {
From cc2cb122aca4489993d3260694309e59f6296fe2 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Fri, 15 Nov 2024 11:47:34 +0100
Subject: [PATCH 16/31] define before use
---
docs/src/components/pricing/PricingList.tsx | 26 ++++++++++-----------
1 file changed, 13 insertions(+), 13 deletions(-)
diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
index 2c67a21b7397ec..52da0aa2924a83 100644
--- a/docs/src/components/pricing/PricingList.tsx
+++ b/docs/src/components/pricing/PricingList.tsx
@@ -12,6 +12,19 @@ import { Link } from '@mui/docs/Link';
import PricingTable, { PlanName, PlanPrice } from 'docs/src/components/pricing/PricingTable';
import { useLicenseModel } from 'docs/src/components/pricing/LicenseModelContext';
+function getButtonText(plan: string) {
+ if (plan.match(/(pro|premium)/)) {
+ return 'Buy now';
+ }
+ if (plan === 'enterprise') {
+ return 'Contact sales';
+ }
+ if (plan === 'community') {
+ return 'Get started';
+ }
+ return 'missing';
+}
+
const Plan = React.forwardRef<
HTMLDivElement,
{
@@ -86,19 +99,6 @@ const Plan = React.forwardRef<
);
});
-function getButtonText(plan: string) {
- if (plan.match(/(pro|premium)/)) {
- return 'Buy now';
- }
- if (plan === 'enterprise') {
- return 'Contact sales';
- }
- if (plan === 'community') {
- return 'Get started';
- }
- return 'missing';
-}
-
export default function PricingList() {
const [planIndex, setPlanIndex] = React.useState(0);
return (
From bdff1efa2a13ad4d0a5759dce3f379d2f159c1f0 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Fri, 15 Nov 2024 11:51:45 +0100
Subject: [PATCH 17/31] fix provider location
---
docs/pages/pricing.tsx | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
index f52c07ad5e5b64..d1e52e8c805441 100644
--- a/docs/pages/pricing.tsx
+++ b/docs/pages/pricing.tsx
@@ -30,16 +30,16 @@ export default function Pricing() {
- {/* Mobile, Tablet */}
-
-
-
- {/* Desktop */}
-
-
+
+ {/* Mobile, Tablet */}
+
+
+
+ {/* Desktop */}
+
-
-
+
+
From 7f5cd32b0792f908676ce0b395ce62db85ec7e22 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Fri, 15 Nov 2024 11:58:35 +0100
Subject: [PATCH 18/31] scope for performance
---
docs/src/components/pricing/PricingTable.tsx | 46 +++++--------------
.../pricing/PrioritySupportContext.tsx | 10 ++--
2 files changed, 17 insertions(+), 39 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 3b74521170508d..4848c7912a0a56 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -22,6 +22,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';
import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
+import PrioritySupportSwitch from 'docs/src/components/pricing/PrioritySupportSwitch';
const a = false; //to be removed
@@ -111,11 +112,6 @@ export function PlanPrice(props: PlanPriceProps) {
const annual = licenseModel === 'annual';
const planPriceMinHeight = 24;
- const { isPrioritySupport, setIsPrioritySupport } = usePrioritySupport();
- const handleChange = (event: React.ChangeEvent) => {
- setIsPrioritySupport(event.target.checked);
- };
-
if (plan === 'community') {
return (
@@ -198,7 +194,6 @@ export function PlanPrice(props: PlanPriceProps) {
const priceExplanation = getPriceExplanation(
annual ? premiumMonthlyValueForAnnual : premiumPerpetualValue,
);
- console.log('isPrioritySupportNew', isPrioritySupport); //to be removed
return (
@@ -242,24 +237,7 @@ export function PlanPrice(props: PlanPriceProps) {
}
-
- }
- label={
-
- Add priority support
- at $399/year/dev
-
- }
- checked={isPrioritySupport}
- onChange={handleChange}
- sx={{ mr: 0 }}
- labelPlacement="bottom"
- />
-
+
);
}
@@ -301,9 +279,9 @@ export function PlanPrice(props: PlanPriceProps) {
function Info(props: {
value: React.ReactNode;
metadata?: React.ReactNode;
- isPrioritySupport?: boolean;
+ prioritySupport?: boolean;
}) {
- const { isPrioritySupport } = usePrioritySupport();
+ const { prioritySupport } = usePrioritySupport();
const { value, metadata } = props;
return (
@@ -1150,7 +1128,7 @@ const premiumData: Record = {
Add
}
- // checked={isPrioritySupport}
+ // checked={prioritySupport}
// onChange={handleSwitchChange}
sx={{ mr: 0 }}
labelPlacement="bottom"
@@ -1381,7 +1359,7 @@ function StickyHead({
const divider = ;
function renderMasterRow(key: string, gridSx: object, plans: Array) {
- // const { isPrioritySupport, setIsPrioritySupport } = usePrioritySupport();
+ // const { prioritySupport, setPrioritySupport } = usePrioritySupport();
return (
);
- /* const [isPrioritySupport, setIsPrioritySupport] = React.useState(false);
+ /* const [prioritySupport, setPrioritySupport] = React.useState(false);
const handleSwitchChange = (event: React.ChangeEvent) => {
- setIsPrioritySupport(event.target.checked);
+ setPrioritySupport(event.target.checked);
};
- console.log('isPrioritySupportMain', isPrioritySupport);
+ console.log('prioritySupportMain', prioritySupport);
*/
/*
- const { isPrioritySupport, setIsPrioritySupport } = usePrioritySupport();
+ const { prioritySupport, setPrioritySupport } = usePrioritySupport();
const handleChange = (event: React.ChangeEvent) => {
- setIsPrioritySupport(event.target.checked);
+ setPrioritySupport(event.target.checked);
};
*/
@@ -1604,7 +1582,7 @@ export default function PricingTable({
diff --git a/docs/src/components/pricing/PrioritySupportContext.tsx b/docs/src/components/pricing/PrioritySupportContext.tsx
index 009144460a8e47..0e5435354483e3 100644
--- a/docs/src/components/pricing/PrioritySupportContext.tsx
+++ b/docs/src/components/pricing/PrioritySupportContext.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
const PrioritySupport = React.createContext<{
- isPrioritySupport: boolean;
- setIsPrioritySupport: React.Dispatch>;
+ prioritySupport: boolean;
+ setPrioritySupport: React.Dispatch>;
}>(undefined as any);
if (process.env.NODE_ENV !== 'production') {
@@ -10,10 +10,10 @@ if (process.env.NODE_ENV !== 'production') {
}
export function PrioritySupportProvider(props: any) {
- const [isPrioritySupport, setIsPrioritySupport] = React.useState(false);
+ const [prioritySupport, setPrioritySupport] = React.useState(false);
const value = React.useMemo(
- () => ({ isPrioritySupport, setIsPrioritySupport }),
- [isPrioritySupport, setIsPrioritySupport],
+ () => ({ prioritySupport, setPrioritySupport }),
+ [prioritySupport, setPrioritySupport],
);
return {props.children};
}
From fb647296b8eeeddc31d05121f01b81e3a51a7c7d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Fri, 15 Nov 2024 12:02:41 +0100
Subject: [PATCH 19/31] fix build
---
docs/src/components/pricing/PricingTable.tsx | 58 ++-----------------
.../pricing/PrioritySupportSwitch.tsx | 33 +++++++++++
2 files changed, 38 insertions(+), 53 deletions(-)
create mode 100644 docs/src/components/pricing/PrioritySupportSwitch.tsx
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 4848c7912a0a56..a551a6f3e2d217 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -17,15 +17,10 @@ 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 BusinessIcon from '@mui/icons-material/Business';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';
import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
import PrioritySupportSwitch from 'docs/src/components/pricing/PrioritySupportSwitch';
-const a = false; //to be removed
-
const planInfo = {
community: {
iconName: 'pricing/x-plan-community',
@@ -276,11 +271,7 @@ export function PlanPrice(props: PlanPriceProps) {
);
}
-function Info(props: {
- value: React.ReactNode;
- metadata?: React.ReactNode;
- prioritySupport?: boolean;
-}) {
+function Info(props: { value: React.ReactNode; metadata?: React.ReactNode }) {
const { prioritySupport } = usePrioritySupport();
const { value, metadata } = props;
@@ -1019,6 +1010,8 @@ const proData: Record = {
'security-questionnaire': ,
};
+const a = false;
+
const premiumData: Record = {
// Core
'Base UI': yes,
@@ -1114,29 +1107,7 @@ const premiumData: Record = {
// Support
'core-support': ,
'x-support': ,
- 'priority-support': (
-
- }
- label={
-
- Add
-
- }
- // checked={prioritySupport}
- // onChange={handleSwitchChange}
- sx={{ mr: 0 }}
- labelPlacement="bottom"
- />
-
- }
- />
- ),
+ 'priority-support': ,
'tech-advisory': pending,
'support-duration': ,
'response-time': ,
@@ -1359,7 +1330,6 @@ function StickyHead({
const divider = ;
function renderMasterRow(key: string, gridSx: object, plans: Array) {
- // const { prioritySupport, setPrioritySupport } = usePrioritySupport();
return (
);
- /* const [prioritySupport, setPrioritySupport] = React.useState(false);
- const handleSwitchChange = (event: React.ChangeEvent) => {
- setPrioritySupport(event.target.checked);
- };
- console.log('prioritySupportMain', prioritySupport);
- */
-
- /*
- const { prioritySupport, setPrioritySupport } = usePrioritySupport();
- const handleChange = (event: React.ChangeEvent) => {
- setPrioritySupport(event.target.checked);
- };
- */
-
const renderRow = (key: string) => renderMasterRow(key, gridSx, plans);
const renderNestedRow = (key: string) => renderMasterRow(key, nestedGridSx, plans);
@@ -1580,11 +1536,7 @@ export default function PricingTable({
-
+
diff --git a/docs/src/components/pricing/PrioritySupportSwitch.tsx b/docs/src/components/pricing/PrioritySupportSwitch.tsx
new file mode 100644
index 00000000000000..a8d3bfbe24f60a
--- /dev/null
+++ b/docs/src/components/pricing/PrioritySupportSwitch.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+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';
+
+export default function PrioritySupportSwitch() {
+ const { prioritySupport, setPrioritySupport } = usePrioritySupport();
+ const handleChange = (event: React.ChangeEvent) => {
+ setPrioritySupport(event.target.checked);
+ };
+
+ return (
+
+ }
+ label={
+
+ Add priority support
+ at $399/year/dev
+
+ }
+ sx={{ mr: 0 }}
+ labelPlacement="bottom"
+ />
+
+ );
+}
From 4c6e30b935fac8dcfa4fcc7aeb14c7ef91e7d97a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Fri, 15 Nov 2024 12:03:36 +0100
Subject: [PATCH 20/31] wip
---
docs/src/components/pricing/PricingTable.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index a551a6f3e2d217..972769a616f1b0 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -1111,8 +1111,8 @@ const premiumData: Record = {
'tech-advisory': pending,
'support-duration': ,
'response-time': ,
- 'pre-screening': no,
- 'issue-escalation': no,
+ 'pre-screening': a ? no : yes,
+ 'issue-escalation': a ? no : yes,
'security-questionnaire': ,
};
From 6c849d744b2bc26c2efd5786d6b5276662232116 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Fri, 15 Nov 2024 15:57:46 +0300
Subject: [PATCH 21/31] more
---
.../pricing/InfoPrioritySupport.tsx | 55 +++++++++++++++++++
docs/src/components/pricing/PricingTable.tsx | 17 +++---
2 files changed, 62 insertions(+), 10 deletions(-)
create mode 100644 docs/src/components/pricing/InfoPrioritySupport.tsx
diff --git a/docs/src/components/pricing/InfoPrioritySupport.tsx b/docs/src/components/pricing/InfoPrioritySupport.tsx
new file mode 100644
index 00000000000000..86cc9a10a96532
--- /dev/null
+++ b/docs/src/components/pricing/InfoPrioritySupport.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
+
+export default function InfoPrioritySupport(props: {
+ value: React.ReactNode;
+ value2?: React.ReactNode;
+ metadata?: React.ReactNode;
+ metadata2?: React.ReactNode;
+}) {
+ const { value, value2, metadata, metadata2 } = props;
+ const { prioritySupport } = usePrioritySupport();
+
+ return (
+
+ {prioritySupport ? (
+
+
+ {value}
+
+
+ {metadata}
+
+
+ ) : (
+
+
+ {value2}
+
+
+ {metadata2}
+
+
+ )}
+
+ );
+}
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 972769a616f1b0..ad69cf4ce52422 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -18,8 +18,8 @@ import LicenseModelSwitch from 'docs/src/components/pricing/LicenseModelSwitch';
import { useLicenseModel } from 'docs/src/components/pricing/LicenseModelContext';
import BusinessIcon from '@mui/icons-material/Business';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';
-import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
import PrioritySupportSwitch from 'docs/src/components/pricing/PrioritySupportSwitch';
+import InfoPrioritySupport from 'docs/src/components/pricing/InfoPrioritySupport';
const planInfo = {
community: {
@@ -272,7 +272,6 @@ export function PlanPrice(props: PlanPriceProps) {
}
function Info(props: { value: React.ReactNode; metadata?: React.ReactNode }) {
- const { prioritySupport } = usePrioritySupport();
const { value, metadata } = props;
return (
@@ -1010,8 +1009,6 @@ const proData: Record = {
'security-questionnaire': ,
};
-const a = false;
-
const premiumData: Record = {
// Core
'Base UI': yes,
@@ -1105,14 +1102,14 @@ const premiumData: Record = {
'mui-x-development-perpetual': ,
'mui-x-updates': ,
// Support
- 'core-support': ,
+ 'core-support': ,
'x-support': ,
'priority-support': ,
'tech-advisory': pending,
'support-duration': ,
- 'response-time': ,
- 'pre-screening': a ? no : yes,
- 'issue-escalation': a ? no : yes,
+ 'response-time': ,
+ 'pre-screening': ,
+ 'issue-escalation': ,
'security-questionnaire': ,
};
@@ -1907,14 +1904,14 @@ export default function PricingTable({
}>
Support
- {renderRow('core-support')}
- {divider}
{renderRow('x-support')}
{divider}
{renderRow('support-duration')}
{divider}
{renderRow('priority-support')}
{divider}
+ {renderRow('core-support')}
+ {divider}
{renderRow('response-time')}
{divider}
{renderRow('pre-screening')}
From b672f8d18636692194629c70372f1f2c82f7bd9a Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Mon, 18 Nov 2024 11:38:03 +0300
Subject: [PATCH 22/31] update pricingdisplay, add FAQ, clean
---
.../pricing/InfoPrioritySupport.tsx | 4 +-
docs/src/components/pricing/PricingFAQ.tsx | 19 +++++-
docs/src/components/pricing/PricingTable.tsx | 60 ++++++++++++-------
.../pricing/PrioritySupportSwitch.tsx | 38 ++++++++----
4 files changed, 88 insertions(+), 33 deletions(-)
diff --git a/docs/src/components/pricing/InfoPrioritySupport.tsx b/docs/src/components/pricing/InfoPrioritySupport.tsx
index 86cc9a10a96532..78c784b24f0fc3 100644
--- a/docs/src/components/pricing/InfoPrioritySupport.tsx
+++ b/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',
}}
>
diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx
index e87cad9037e9e2..dc95fb07856e58 100644
--- a/docs/src/components/pricing/PricingFAQ.tsx
+++ b/docs/src/components/pricing/PricingFAQ.tsx
@@ -180,6 +180,22 @@ const faqData = [
),
},
+ {
+ summary: 'What is the validity of the priority support add-on?',
+ detail: (
+
+ The priority support add-on is valid for 1 year from the date of purchase. It is same for
+ perpetual or annual license model.{' '}
+
+ Support plans.
+
+
+ ),
+ },
];
const Accordion = styled(MuiAccordion)(({ theme }) => ({
@@ -265,12 +281,13 @@ export default function PricingFAQ() {
{renderItem(1)}
{renderItem(2)}
{renderItem(3)}
+ {renderItem(4)}
- {renderItem(4)}
{renderItem(5)}
{renderItem(6)}
{renderItem(7)}
+ {renderItem(8)}
-
+
$0
@@ -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 (
@@ -246,8 +265,7 @@ export function PlanPrice(props: PlanPriceProps) {
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
- mt: 3,
- mb: 1,
+ mt: 4,
}}
>
@@ -255,18 +273,6 @@ export function PlanPrice(props: PlanPriceProps) {
Custom pricing
-
-
- + Priority support included
-
-
);
}
@@ -781,6 +787,14 @@ const rowHeaders: Record = {
}}
/>
),
+ 'customer-success': (
+
+ ),
};
const yes = ;
@@ -902,6 +916,7 @@ const communityData: Record = {
'pre-screening': no,
'issue-escalation': no,
'security-questionnaire': no,
+ 'customer-success': no,
};
const proData: Record = {
@@ -1007,6 +1022,7 @@ const proData: Record = {
'pre-screening': no,
'issue-escalation': no,
'security-questionnaire': ,
+ 'customer-success': no,
};
const premiumData: Record = {
@@ -1107,10 +1123,11 @@ const premiumData: Record = {
'priority-support': ,
'tech-advisory': pending,
'support-duration': ,
- 'response-time': ,
+ 'response-time': ,
'pre-screening': ,
'issue-escalation': ,
'security-questionnaire': ,
+ 'customer-success': no,
};
const enterpriseData: Record = {
@@ -1211,10 +1228,11 @@ const enterpriseData: Record = {
'priority-support': ,
'tech-advisory': pending,
'support-duration': ,
- 'response-time': 24 hours} />,
+ 'response-time': ,
'pre-screening': ,
'issue-escalation': ,
'security-questionnaire': ,
+ '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}
diff --git a/docs/src/components/pricing/PrioritySupportSwitch.tsx b/docs/src/components/pricing/PrioritySupportSwitch.tsx
index a8d3bfbe24f60a..61ceb80d0970da 100644
--- a/docs/src/components/pricing/PrioritySupportSwitch.tsx
+++ b/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) => {
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 (
}
label={
-
- Add priority support
- at $399/year/dev
-
+
+
+ Priority support
+
+
}
- sx={{ mr: 0 }}
- labelPlacement="bottom"
+ sx={{ mb: 0.5, ml: 1, gap: 1, justifyContent: 'center' }}
+ labelPlacement="end"
/>
);
From d952df7fafa9f261136b2a665f088347f8fafef5 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Mon, 18 Nov 2024 11:57:36 +0300
Subject: [PATCH 23/31] plan description
---
docs/src/components/pricing/PricingTable.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index c7f3e8d2a8dea3..4a866cf6dd2ecb 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -43,7 +43,7 @@ const planInfo = {
iconName: 'pricing/x-plan-enterprise',
title: 'Enterprise',
description:
- 'All features of Premium coupled with enterprise-grade priority support and feature requests.',
+ 'All features of Premium coupled with enterprise-grade support and customer success.',
},
} as const;
From b826a22ebdd96de230db44659d6331a76ceda8fc Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Wed, 8 Jan 2025 21:12:14 +0530
Subject: [PATCH 24/31] add-changes-from-figma
---
docs/pages/pricing.tsx | 7 +-
docs/src/components/pricing/PricingCards.tsx | 505 ++++++++++++++++++
docs/src/components/pricing/PricingTable.tsx | 26 +-
.../pricing/PrioritySupportSwitch.tsx | 86 ++-
4 files changed, 609 insertions(+), 15 deletions(-)
create mode 100644 docs/src/components/pricing/PricingCards.tsx
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
index d1e52e8c805441..05fc63b3eedcee 100644
--- a/docs/pages/pricing.tsx
+++ b/docs/pages/pricing.tsx
@@ -15,6 +15,8 @@ import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
import { PrioritySupportProvider } from 'docs/src/components/pricing/PrioritySupportContext';
import { LicenseModelProvider } from 'docs/src/components/pricing/LicenseModelContext';
+import PricingCards from 'docs/src/components/pricing/PricingCards';
+
export default function Pricing() {
return (
@@ -28,9 +30,12 @@ export default function Pricing() {
-
+
+
+
+
{/* Mobile, Tablet */}
diff --git a/docs/src/components/pricing/PricingCards.tsx b/docs/src/components/pricing/PricingCards.tsx
new file mode 100644
index 00000000000000..8e2083a3cd8e10
--- /dev/null
+++ b/docs/src/components/pricing/PricingCards.tsx
@@ -0,0 +1,505 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+// import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+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 IconImage from 'docs/src/components/icon/IconImage';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import { Link } from '@mui/docs/Link';
+
+const planInfo = {
+ community: {
+ iconName: 'pricing/x-plan-community',
+ title: 'Community',
+ description: 'Get started with the industry-standard React UI library, MIT-licensed.',
+ features: ['+40 free components', 'Community support'],
+ },
+ pro: {
+ iconName: 'pricing/x-plan-pro',
+ title: 'Pro',
+ description: 'Best for professional developers or startups building data-rich applications.',
+ features: [
+ 'All Community features and...',
+ 'MUI X Pro access',
+ '10+ Pro features',
+ 'Pro support',
+ ],
+ },
+ premium: {
+ iconName: 'pricing/x-plan-premium',
+ title: 'Premium',
+ description:
+ 'The most advanced features for data-rich applications along with standard support.',
+ features: [
+ 'All Pro features and...',
+ 'MUI X Premium access',
+ '5+ Premium features',
+ 'Premium support',
+ ],
+ },
+ enterprise: {
+ iconName: 'pricing/x-plan-enterprise',
+ title: 'Enterprise',
+ description:
+ 'All features of Premium coupled with enterprise-grade support and customer success.',
+ features: [
+ 'All Premium features and...',
+ 'Technical support for all libraries',
+ 'Guaranteed response time',
+ 'Pre-screening',
+ 'Issue escalation',
+ 'Customer success manager',
+ ],
+ },
+} as const;
+
+const formatter = new Intl.NumberFormat('en-US');
+
+function formatCurrency(value: number) {
+ return `$${formatter.format(value)}`;
+}
+
+export function PlanName({
+ plan,
+ disableDescription = false,
+}: {
+ plan: 'community' | 'pro' | 'premium' | 'enterprise';
+ disableDescription?: boolean;
+}) {
+ const { title, iconName, description } = planInfo[plan];
+ return (
+
+
+ {title}
+
+ {!disableDescription && (
+
+ {description}
+
+ )}
+
+ );
+}
+
+interface PlanPriceProps {
+ plan: 'community' | 'pro' | 'premium' | 'enterprise';
+ // checked?: boolean;
+ // handleChange2?: (event: React.ChangeEvent) => void;
+}
+
+export function PlanPrice(props: PlanPriceProps) {
+ const { plan } = props;
+
+ const { licenseModel } = useLicenseModel();
+ const annual = licenseModel === 'annual';
+ const planPriceMinHeight = 24;
+
+ const { prioritySupport } = usePrioritySupport();
+
+ if (plan === 'community') {
+ return (
+
+
+
+ $0
+
+
+
+
+ Free forever!
+
+
+ }
+ sx={{ py: 1, mt: 2 }}
+ >
+ Get started
+
+
+ );
+ }
+
+ const priceUnit = annual ? '/ year / dev' : '/ dev';
+ const getPriceExplanation = (displayedValue: number) => {
+ if (annual) {
+ return `Equivalent to $${displayedValue} / month / dev`;
+ }
+ return '';
+ };
+
+ if (plan === 'pro') {
+ const annualValue = 180;
+ const perpetualValue = annualValue * 3;
+ const monthlyValueForAnnual = annualValue / 12;
+
+ const mainDisplayValue = annual ? annualValue : perpetualValue;
+ const priceExplanation = getPriceExplanation(annual ? monthlyValueForAnnual : perpetualValue);
+
+ return (
+
+
+
+ {formatCurrency(mainDisplayValue)}
+
+
+
+ {priceUnit}
+
+
+
+ {
+
+ {priceExplanation}
+
+ }
+
+ }
+ sx={{ py: 1, width: '100%', mt: 2 }}
+ >
+ Buy now
+
+
+ );
+ }
+
+ if (plan === 'premium') {
+ const premiumAnnualValue = 588;
+ const premiumPerpetualValue = premiumAnnualValue * 3;
+ const premiumMonthlyValueForAnnual = premiumAnnualValue / 12;
+
+ const premiumAnnualValueWithPrioritySupport = premiumAnnualValue + 399;
+ const premiumPerpetualValueWithPrioritySupport = premiumPerpetualValue + 399;
+ const premiumMonthlyValueForAnnualWithPrioritySupport = 82; // premiumAnnualValueWithPrioritySupport / 12;
+
+ const priceExplanation = getPriceExplanation(
+ 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 (
+
+
+
+ {formatCurrency(premiumDisplayedValue)}
+
+
+
+ {priceUnit}
+
+
+
+ {
+
+ {priceExplanation}
+
+ }
+
+ }
+ sx={{ py: 1, mt: 2, mb: 2 }}
+ >
+ Buy now
+
+
+
+ );
+ }
+
+ // else enterprise
+ return (
+
+
+ {/* */}
+
+
+ Custom pricing
+
+
+
+ Got a bigger team? Request a quote!
+
+
+ }
+ sx={{ py: 1, width: '100%', mt: 2 }}
+ >
+ Contact Sales
+
+
+ );
+}
+
+export default function PricingCards() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {planInfo.community.features.map((feature, index) => (
+
+
+ {feature}
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+ {planInfo.pro.features.map((feature, index) => (
+
+
+ {feature}
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* */}
+
+ {planInfo.premium.features.map((feature, index) => (
+
+ {/* */}
+
+ {feature}
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+ {planInfo.enterprise.features.map((feature, index) => (
+
+
+ {feature}
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 4a866cf6dd2ecb..9bfa369c37b965 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -18,7 +18,7 @@ import LicenseModelSwitch from 'docs/src/components/pricing/LicenseModelSwitch';
import { useLicenseModel } from 'docs/src/components/pricing/LicenseModelContext';
import BusinessIcon from '@mui/icons-material/Business';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';
-import PrioritySupportSwitch from 'docs/src/components/pricing/PrioritySupportSwitch';
+import { PrioritySupportSwitch2 } from 'docs/src/components/pricing/PrioritySupportSwitch';
import InfoPrioritySupport from 'docs/src/components/pricing/InfoPrioritySupport';
import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
@@ -55,7 +55,7 @@ function formatCurrency(value: number) {
export function PlanName({
plan,
- disableDescription = false,
+ disableDescription = true,
}: {
plan: 'community' | 'pro' | 'premium' | 'enterprise';
disableDescription?: boolean;
@@ -251,7 +251,7 @@ export function PlanPrice(props: PlanPriceProps) {
}
-
+
);
}
@@ -1120,7 +1120,7 @@ const premiumData: Record = {
// Support
'core-support': ,
'x-support': ,
- 'priority-support': ,
+ 'priority-support': ,
'tech-advisory': pending,
'support-duration': ,
'response-time': ,
@@ -1383,6 +1383,7 @@ function PricingTableDevelopment(props: any) {
: renderRow('mui-x-development-perpetual');
}
+/*
function PricingTableBuyPro() {
const { licenseModel } = useLicenseModel();
@@ -1441,6 +1442,7 @@ function PricingTableBuyEnterprise() {
);
}
+*/
const StyledCollapse = styled(Collapse, {
name: 'MuiSlider',
@@ -1529,7 +1531,7 @@ export default function PricingTable({
-
+ {/*
Get started
-
+ */}
-
+ {/* */}
-
-
+ {/* */}
+ {/* */}
-
+ {/* */}
)}
diff --git a/docs/src/components/pricing/PrioritySupportSwitch.tsx b/docs/src/components/pricing/PrioritySupportSwitch.tsx
index 61ceb80d0970da..a9923a00184ba4 100644
--- a/docs/src/components/pricing/PrioritySupportSwitch.tsx
+++ b/docs/src/components/pricing/PrioritySupportSwitch.tsx
@@ -5,6 +5,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import Typography from '@mui/material/Typography';
import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
export default function PrioritySupportSwitch() {
const { prioritySupport, setPrioritySupport } = usePrioritySupport();
@@ -29,6 +30,84 @@ export default function PrioritySupportSwitch() {
},
};
+ return (
+
+
+
+ }
+ label={
+
+
+ Priority support
+
+
+ }
+ sx={{
+ mb: 0.5,
+ ml: 0,
+ gap: 7,
+ }}
+ labelPlacement="start"
+ />
+
+
+
+ 24h SLA response time, support for MUI Core, and the highest priority on bug fixes.
+
+
+ );
+}
+
+export function PrioritySupportSwitch2() {
+ const { prioritySupport, setPrioritySupport } = usePrioritySupport();
+ const handleChange = (event: React.ChangeEvent) => {
+ 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 (
}
- sx={{ mb: 0.5, ml: 1, gap: 1, justifyContent: 'center' }}
- labelPlacement="end"
+ sx={{
+ mb: 0.5,
+ gap: 1,
+ }}
+ labelPlacement="start"
/>
);
From bb151a1b7b47ffd849b7711d665c8c70e195b952 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Wed, 8 Jan 2025 22:08:15 +0530
Subject: [PATCH 25/31] theme
---
docs/src/components/pricing/PricingCards.tsx | 31 +++++++++++++-------
1 file changed, 20 insertions(+), 11 deletions(-)
diff --git a/docs/src/components/pricing/PricingCards.tsx b/docs/src/components/pricing/PricingCards.tsx
index 8e2083a3cd8e10..b627ebd1ddfeda 100644
--- a/docs/src/components/pricing/PricingCards.tsx
+++ b/docs/src/components/pricing/PricingCards.tsx
@@ -1,5 +1,6 @@
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';
@@ -436,17 +437,25 @@ export default function PricingCards() {
({
+ display: 'flex',
+ border: '1px solid',
+ borderRadius: 1,
+ flexDirection: 'column',
+ p: 2,
+ pt: 1.5,
+ flex: '1 1 0px',
+ borderColor: 'primary.light',
+ background:
+ 'linear-gradient(0deg, rgba(250, 250, 250, 1) 0%, rgba(255,255,255,0) 100%)',
+ }),
+ (theme) =>
+ theme.applyDarkStyles({
+ borderColor: 'primaryDark.700',
+ background: alpha(theme.palette.primaryDark[700], 0.3),
+ }),
+ ]}
>
From 3426146e9ad85fb5bfaf398372db3ce893b6cfe3 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Thu, 9 Jan 2025 10:33:12 +0530
Subject: [PATCH 26/31] fix dark mode
---
docs/src/components/pricing/HeroPricing.tsx | 2 +-
docs/src/components/pricing/PricingCards.tsx | 8 ++++----
docs/src/components/pricing/PrioritySupportSwitch.tsx | 6 +++---
3 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/docs/src/components/pricing/HeroPricing.tsx b/docs/src/components/pricing/HeroPricing.tsx
index 6607c2ab17c119..f3ae6e9a6f50db 100644
--- a/docs/src/components/pricing/HeroPricing.tsx
+++ b/docs/src/components/pricing/HeroPricing.tsx
@@ -6,7 +6,7 @@ import GradientText from 'docs/src/components/typography/GradientText';
export default function HeroPricing() {
return (
-
+
{feature}
@@ -427,7 +427,7 @@ export default function PricingCards() {
{feature}
@@ -467,7 +467,7 @@ export default function PricingCards() {
{/* */}
@@ -500,7 +500,7 @@ export default function PricingCards() {
{feature}
diff --git a/docs/src/components/pricing/PrioritySupportSwitch.tsx b/docs/src/components/pricing/PrioritySupportSwitch.tsx
index a9923a00184ba4..4c7983ea4d39e1 100644
--- a/docs/src/components/pricing/PrioritySupportSwitch.tsx
+++ b/docs/src/components/pricing/PrioritySupportSwitch.tsx
@@ -37,8 +37,8 @@ export default function PrioritySupportSwitch() {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-between',
- border: '1px solid',
- borderColor: 'primary.light',
+ border: '1px dashed',
+ borderColor: 'primary.dark',
borderRadius: 1,
padding: 2,
}}
@@ -60,7 +60,7 @@ export default function PrioritySupportSwitch() {
Date: Thu, 9 Jan 2025 13:29:23 +0530
Subject: [PATCH 27/31] adjustments-mobileview
---
docs/src/components/pricing/PricingCards.tsx | 99 +-----
docs/src/components/pricing/PricingList.tsx | 96 ++----
docs/src/components/pricing/PricingTable.tsx | 301 ++----------------
.../pricing/PrioritySupportSwitch.tsx | 66 ++--
4 files changed, 86 insertions(+), 476 deletions(-)
diff --git a/docs/src/components/pricing/PricingCards.tsx b/docs/src/components/pricing/PricingCards.tsx
index 038f5971c756d7..2f77da4d6769eb 100644
--- a/docs/src/components/pricing/PricingCards.tsx
+++ b/docs/src/components/pricing/PricingCards.tsx
@@ -12,52 +12,7 @@ import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportC
import IconImage from 'docs/src/components/icon/IconImage';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import { Link } from '@mui/docs/Link';
-
-const planInfo = {
- community: {
- iconName: 'pricing/x-plan-community',
- title: 'Community',
- description: 'Get started with the industry-standard React UI library, MIT-licensed.',
- features: ['+40 free components', 'Community support'],
- },
- pro: {
- iconName: 'pricing/x-plan-pro',
- title: 'Pro',
- description: 'Best for professional developers or startups building data-rich applications.',
- features: [
- 'All Community features and...',
- 'MUI X Pro access',
- '10+ Pro features',
- 'Pro support',
- ],
- },
- premium: {
- iconName: 'pricing/x-plan-premium',
- title: 'Premium',
- description:
- 'The most advanced features for data-rich applications along with standard support.',
- features: [
- 'All Pro features and...',
- 'MUI X Premium access',
- '5+ Premium features',
- 'Premium support',
- ],
- },
- enterprise: {
- iconName: 'pricing/x-plan-enterprise',
- title: 'Enterprise',
- description:
- 'All features of Premium coupled with enterprise-grade support and customer success.',
- features: [
- 'All Premium features and...',
- 'Technical support for all libraries',
- 'Guaranteed response time',
- 'Pre-screening',
- 'Issue escalation',
- 'Customer success manager',
- ],
- },
-} as const;
+import { PlanName, planInfo } from 'docs/src/components/pricing/PricingTable';
const formatter = new Intl.NumberFormat('en-US');
@@ -65,52 +20,8 @@ function formatCurrency(value: number) {
return `$${formatter.format(value)}`;
}
-export function PlanName({
- plan,
- disableDescription = false,
-}: {
- plan: 'community' | 'pro' | 'premium' | 'enterprise';
- disableDescription?: boolean;
-}) {
- const { title, iconName, description } = planInfo[plan];
- return (
-
-
- {title}
-
- {!disableDescription && (
-
- {description}
-
- )}
-
- );
-}
-
interface PlanPriceProps {
plan: 'community' | 'pro' | 'premium' | 'enterprise';
- // checked?: boolean;
- // handleChange2?: (event: React.ChangeEvent) => void;
}
export function PlanPrice(props: PlanPriceProps) {
@@ -386,7 +297,7 @@ export default function PricingCards() {
}}
>
-
+
@@ -417,7 +328,7 @@ export default function PricingCards() {
}}
>
-
+
{/* */}
@@ -458,7 +369,7 @@ export default function PricingCards() {
]}
>
-
+
{/* */}
@@ -490,7 +401,7 @@ export default function PricingCards() {
}}
>
-
+
{/* */}
diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
index 52da0aa2924a83..01acb9862f71e4 100644
--- a/docs/src/components/pricing/PricingList.tsx
+++ b/docs/src/components/pricing/PricingList.tsx
@@ -1,41 +1,27 @@
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
import Fade from '@mui/material/Fade';
import Paper, { PaperProps } from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import { Link } from '@mui/docs/Link';
-import PricingTable, { PlanName, PlanPrice } from 'docs/src/components/pricing/PricingTable';
-import { useLicenseModel } from 'docs/src/components/pricing/LicenseModelContext';
-
-function getButtonText(plan: string) {
- if (plan.match(/(pro|premium)/)) {
- return 'Buy now';
- }
- if (plan === 'enterprise') {
- return 'Contact sales';
- }
- if (plan === 'community') {
- return 'Get started';
- }
- return 'missing';
-}
+import PricingTable, { PlanName, planInfo } from 'docs/src/components/pricing/PricingTable';
+import { PlanPrice } from 'docs/src/components/pricing/PricingCards';
+import LicenseModelSwitch from 'docs/src/components/pricing/LicenseModelSwitch';
const Plan = React.forwardRef<
HTMLDivElement,
{
plan: 'community' | 'pro' | 'premium' | 'enterprise';
- benefits?: Array;
+
unavailable?: boolean;
} & PaperProps
->(function Plan({ plan, benefits, unavailable, sx, ...props }, ref) {
+>(function Plan({ plan, unavailable, sx, ...props }, ref) {
const globalTheme = useTheme();
const mode = globalTheme.palette.mode;
- const { licenseModel } = useLicenseModel();
+
+ const { features } = planInfo[plan];
return (
-
-
+
+
+ {(plan === 'pro' || plan === 'premium') && }
- {unavailable ? (
-
- In progress!
-
- ) : (
- }
- sx={{ py: 1 }}
+ {features.map((feature, index) => (
+
- {getButtonText(plan)}
-
- )}
- {benefits &&
- benefits.map((text) => (
-
+
-
- {text}
+
+ {feature}
- ))}
+
+ ))}
);
});
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 9bfa369c37b965..ad71bdf52e12c2 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -14,45 +14,57 @@ import LaunchRounded from '@mui/icons-material/LaunchRounded';
import UnfoldMoreRounded from '@mui/icons-material/UnfoldMoreRounded';
import { Link } from '@mui/docs/Link';
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 BusinessIcon from '@mui/icons-material/Business';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';
import { PrioritySupportSwitch2 } from 'docs/src/components/pricing/PrioritySupportSwitch';
import InfoPrioritySupport from 'docs/src/components/pricing/InfoPrioritySupport';
-import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
-const planInfo = {
+export const planInfo = {
community: {
iconName: 'pricing/x-plan-community',
title: 'Community',
description: 'Get started with the industry-standard React UI library, MIT-licensed.',
+ features: ['+40 free components', 'Community support'],
},
pro: {
iconName: 'pricing/x-plan-pro',
title: 'Pro',
description: 'Best for professional developers or startups building data-rich applications.',
+ features: [
+ 'All Community features and...',
+ 'MUI X Pro access',
+ '10+ Pro features',
+ 'Pro support',
+ ],
},
premium: {
iconName: 'pricing/x-plan-premium',
title: 'Premium',
description:
'The most advanced features for data-rich applications along with standard support.',
+ features: [
+ 'All Pro features and...',
+ 'MUI X Premium access',
+ '5+ Premium features',
+ 'Premium support',
+ ],
},
enterprise: {
iconName: 'pricing/x-plan-enterprise',
title: 'Enterprise',
description:
'All features of Premium coupled with enterprise-grade support and customer success.',
+ features: [
+ 'All Premium features and...',
+ 'Technical support for all libraries',
+ 'Guaranteed response time',
+ 'Pre-screening',
+ 'Issue escalation',
+ 'Customer success manager',
+ ],
},
} as const;
-const formatter = new Intl.NumberFormat('en-US');
-
-function formatCurrency(value: number) {
- return `$${formatter.format(value)}`;
-}
-
export function PlanName({
plan,
disableDescription = true,
@@ -95,188 +107,6 @@ export function PlanName({
);
}
-interface PlanPriceProps {
- plan: 'community' | 'pro' | 'premium' | 'enterprise';
- // checked?: boolean;
- // handleChange2?: (event: React.ChangeEvent) => void;
-}
-
-export function PlanPrice(props: PlanPriceProps) {
- const { plan } = 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 '';
- };
-
- if (plan === 'pro') {
- const annualValue = 180;
- const perpetualValue = annualValue * 3;
- const monthlyValueForAnnual = annualValue / 12;
-
- const mainDisplayValue = annual ? annualValue : perpetualValue;
- const priceExplanation = getPriceExplanation(annual ? monthlyValueForAnnual : perpetualValue);
-
- return (
-
-
-
-
- {formatCurrency(mainDisplayValue)}
-
-
-
- {priceUnit}
-
-
-
- {
-
- {priceExplanation}
-
- }
-
-
- );
- }
-
- if (plan === 'premium') {
- const premiumAnnualValue = 588;
- const premiumPerpetualValue = premiumAnnualValue * 3;
- const premiumMonthlyValueForAnnual = premiumAnnualValue / 12;
-
- const premiumAnnualValueWithPrioritySupport = premiumAnnualValue + 399;
- const premiumPerpetualValueWithPrioritySupport = premiumPerpetualValue + 399;
- const premiumMonthlyValueForAnnualWithPrioritySupport = 82; // premiumAnnualValueWithPrioritySupport / 12;
-
- const priceExplanation = getPriceExplanation(
- 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 (
-
-
-
-
- {formatCurrency(premiumDisplayedValue)}
-
-
-
- {priceUnit}
-
-
-
- {
-
- {priceExplanation}
-
- }
-
-
-
- );
- }
-
- // else enterprise
- return (
-
-
-
-
-
- Custom pricing
-
-
- );
-}
-
function Info(props: { value: React.ReactNode; metadata?: React.ReactNode }) {
const { value, metadata } = props;
@@ -1383,67 +1213,6 @@ function PricingTableDevelopment(props: any) {
: renderRow('mui-x-development-perpetual');
}
-/*
-function PricingTableBuyPro() {
- const { licenseModel } = useLicenseModel();
-
- return (
- }
- sx={{ py: 1, mt: 'auto' }}
- >
- Buy now
-
- );
-}
-
-function PricingTableBuyPremium() {
- const { licenseModel } = useLicenseModel();
-
- return (
- }
- sx={{ py: 1, mt: 'auto' }}
- >
- Buy now
-
- );
-}
-
-function PricingTableBuyEnterprise() {
- return (
- }
- sx={{ py: 1, mt: 'auto' }}
- >
- Contact Sales
-
- );
-}
-*/
-
const StyledCollapse = styled(Collapse, {
name: 'MuiSlider',
slot: 'Track',
@@ -1531,37 +1300,15 @@ export default function PricingTable({
- {/*
- }
- sx={{ py: 1, mt: 'auto' }}
- >
- Get started
- */}
-
- {/* */}
+
- {/* */}
- {/* */}
-
- {/* */}
+
)}
diff --git a/docs/src/components/pricing/PrioritySupportSwitch.tsx b/docs/src/components/pricing/PrioritySupportSwitch.tsx
index 4c7983ea4d39e1..2b537d898374e3 100644
--- a/docs/src/components/pricing/PrioritySupportSwitch.tsx
+++ b/docs/src/components/pricing/PrioritySupportSwitch.tsx
@@ -33,51 +33,39 @@ export default function PrioritySupportSwitch() {
return (
-
-
- }
- label={
-
-
- Priority support
-
-
- }
- sx={{
- mb: 0.5,
- ml: 0,
- gap: 7,
- }}
- labelPlacement="start"
- />
-
-
+
+ }
+ label={
+
+
+ Priority support
+
+
+ }
+ sx={{
+ mb: 0.5,
+ ml: 0,
+ mr: 0,
+ display: 'flex',
+ justifyContent: 'space-between',
+ }}
+ labelPlacement="start"
+ />
+
24h SLA response time, support for MUI Core, and the highest priority on bug fixes.
From 62c42e37547918b26db7e2b73b8b326a4a33a830 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Thu, 9 Jan 2025 13:59:01 +0530
Subject: [PATCH 28/31] noPaddingBottom
---
docs/src/components/pricing/HeroPricing.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/src/components/pricing/HeroPricing.tsx b/docs/src/components/pricing/HeroPricing.tsx
index f3ae6e9a6f50db..6607c2ab17c119 100644
--- a/docs/src/components/pricing/HeroPricing.tsx
+++ b/docs/src/components/pricing/HeroPricing.tsx
@@ -6,7 +6,7 @@ import GradientText from 'docs/src/components/typography/GradientText';
export default function HeroPricing() {
return (
-
+
Date: Wed, 15 Jan 2025 16:35:18 +0530
Subject: [PATCH 29/31] improve-conflict
---
docs/next-env.d.ts | 2 +-
docs/pages/pricing.tsx | 1 -
docs/src/components/pricing/PricingTable.tsx | 424 +++++++++----------
docs/tsconfig.json | 9 +-
4 files changed, 199 insertions(+), 237 deletions(-)
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
index 52e831b4342482..a4a7b3f5cfa2f9 100644
--- a/docs/next-env.d.ts
+++ b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
///
// NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
index 05fc63b3eedcee..2107ba9b4d0e7c 100644
--- a/docs/pages/pricing.tsx
+++ b/docs/pages/pricing.tsx
@@ -17,7 +17,6 @@ import { PrioritySupportProvider } from 'docs/src/components/pricing/PrioritySup
import { LicenseModelProvider } from 'docs/src/components/pricing/LicenseModelContext';
import PricingCards from 'docs/src/components/pricing/PricingCards';
-
export default function Pricing() {
return (
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index d0c8a21b82bd6e..69c690798d5129 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -65,12 +65,6 @@ export const planInfo = {
},
} as const;
-const formatter = new Intl.NumberFormat('en-US');
-
-function formatCurrency(value: number) {
- return `$${formatter.format(value)}`;
-}
-
// TODO: Collapse should expose an API to customize the duration based on the height.
function transitionTheme(theme: any) {
return {
@@ -1315,90 +1309,82 @@ export default function PricingTable({
const renderNestedRow = (key: string) => renderMasterRow(key, nestedGridSx, plans);
return (
-
-
- {!columnHeaderHidden && (
-
-
- Plans
-
-
-
+
+
+
+ {!columnHeaderHidden && (
+
+
+ Plans
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- )}
- }>
- MUI Core (open-source)
-
- {renderRow('Material UI')}
- {divider}
- {renderRow('Joy UI')}
- {divider}
- {renderRow('Base UI')}
- {divider}
- {renderRow('MUI System')}
- }>
- MUI X (open-core)
-
-
- |
- {dataGridUnfoldMore} |
-
- {dataGridUnfoldMore}
- |
-
- {dataGridUnfoldMore}
- |
-
- {dataGridUnfoldMore}
- |
- setDataGridCollapsed((bool) => !bool)}
- endIcon={
-
- }
- sx={[
- (theme) => ({
- px: 1,
- justifyContent: 'flex-start',
- fontSize: '0.875rem',
- fontWeight: 'medium',
- borderRadius: '0px',
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- '&:hover': {
- bgcolor: alpha(theme.palette.primary.main, 0.06),
- '@media (hover: none)': {
- bgcolor: 'initial',
- },
- },
- }),
- (theme) =>
- theme.applyDarkStyles({
+ )}
+ }>
+ MUI Core (open-source)
+
+ {renderRow('Material UI')}
+ {divider}
+ {renderRow('Joy UI')}
+ {divider}
+ {renderRow('Base UI')}
+ {divider}
+ {renderRow('MUI System')}
+ }>
+ MUI X (open-core)
+
+
+ |
+ {dataGridUnfoldMore} |
+
+ {dataGridUnfoldMore}
+ |
+
+ {dataGridUnfoldMore}
+ |
+
+ {dataGridUnfoldMore}
+ |
+ setDataGridCollapsed((bool) => !bool)}
+ endIcon={
+
+ }
+ sx={[
+ (theme) => ({
+ px: 1,
+ justifyContent: 'flex-start',
+ fontSize: '0.875rem',
+ fontWeight: 'medium',
+ borderRadius: '0px',
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ width: '100%',
+ height: '100%',
'&:hover': {
bgcolor: alpha(theme.palette.primary.main, 0.06),
'@media (hover: none)': {
@@ -1406,6 +1392,15 @@ export default function PricingTable({
},
},
}),
+ (theme) =>
+ theme.applyDarkStyles({
+ '&:hover': {
+ bgcolor: alpha(theme.palette.primary.main, 0.06),
+ '@media (hover: none)': {
+ bgcolor: 'initial',
+ },
+ },
+ }),
(theme) =>
theme.applyDarkStyles({
'&:hover': {
@@ -1512,61 +1507,47 @@ export default function PricingTable({
{divider}
{renderRow('date-picker/range')}
{divider}
- {renderNestedRow('data-grid/localization')}
-
- {divider}
- {renderRow('date-picker/simple')}
- {divider}
- {renderRow('date-picker/range')}
- {divider}
-
- |
- {chartsUnfoldMore} |
-
- {chartsUnfoldMore}
- |
- {chartsUnfoldMore} |
-
- {chartsUnfoldMore}
- |
- setChartsCollapsed((bool) => !bool)}
- endIcon={
-
- }
- sx={[
- (theme) => ({
- px: 1,
- justifyContent: 'flex-start',
- fontSize: '0.875rem',
- fontWeight: 'medium',
- borderRadius: '0px',
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- '&:hover': {
- bgcolor: alpha(theme.palette.primary.main, 0.06),
- '@media (hover: none)': {
- bgcolor: 'initial',
- },
- },
- }),
- (theme) =>
- theme.applyDarkStyles({
+
+ |
+ {chartsUnfoldMore} |
+
+ {chartsUnfoldMore}
+ |
+
+ {chartsUnfoldMore}
+ |
+
+ {chartsUnfoldMore}
+ |
+ setChartsCollapsed((bool) => !bool)}
+ endIcon={
+
+ }
+ sx={[
+ (theme) => ({
+ px: 1,
+ justifyContent: 'flex-start',
+ fontSize: '0.875rem',
+ fontWeight: 'medium',
+ borderRadius: '0px',
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ width: '100%',
+ height: '100%',
'&:hover': {
bgcolor: alpha(theme.palette.primary.main, 0.06),
'@media (hover: none)': {
@@ -1574,6 +1555,15 @@ export default function PricingTable({
},
},
}),
+ (theme) =>
+ theme.applyDarkStyles({
+ '&:hover': {
+ bgcolor: alpha(theme.palette.primary.main, 0.06),
+ '@media (hover: none)': {
+ bgcolor: 'initial',
+ },
+ },
+ }),
(theme) =>
theme.applyDarkStyles({
'&:hover': {
@@ -1634,59 +1624,47 @@ export default function PricingTable({
{renderNestedRow('charts/selection-interaction')}
{divider}
- {renderNestedRow('charts/selection-interaction')}
-
- {divider}
-
- |
- {treeViewUnfoldMore} |
-
- {treeViewUnfoldMore}
- |
-
- {treeViewUnfoldMore}
- |
-
- {treeViewUnfoldMore}
- |
- setTreeViewCollapsed((bool) => !bool)}
- endIcon={
-
- }
- sx={[
- (theme) => ({
- px: 1,
- justifyContent: 'flex-start',
- fontSize: '0.875rem',
- fontWeight: 'medium',
- borderRadius: '0px',
- position: 'absolute',
- left: 0,
- top: 0,
- width: '100%',
- height: '100%',
- '&:hover': {
- bgcolor: alpha(theme.palette.primary.main, 0.06),
- '@media (hover: none)': {
- bgcolor: 'initial',
- },
- },
- }),
- (theme) =>
- theme.applyDarkStyles({
+
+ |
+ {treeViewUnfoldMore} |
+
+ {treeViewUnfoldMore}
+ |
+
+ {treeViewUnfoldMore}
+ |
+
+ {treeViewUnfoldMore}
+ |
+ setTreeViewCollapsed((bool) => !bool)}
+ endIcon={
+
+ }
+ sx={[
+ (theme) => ({
+ px: 1,
+ justifyContent: 'flex-start',
+ fontSize: '0.875rem',
+ fontWeight: 'medium',
+ borderRadius: '0px',
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ width: '100%',
+ height: '100%',
'&:hover': {
bgcolor: alpha(theme.palette.primary.main, 0.06),
'@media (hover: none)': {
@@ -1694,6 +1672,15 @@ export default function PricingTable({
},
},
}),
+ (theme) =>
+ theme.applyDarkStyles({
+ '&:hover': {
+ bgcolor: alpha(theme.palette.primary.main, 0.06),
+ '@media (hover: none)': {
+ bgcolor: 'initial',
+ },
+ },
+ }),
(theme) =>
theme.applyDarkStyles({
'&:hover': {
@@ -1729,7 +1716,9 @@ export default function PricingTable({
{divider}
{renderRow('mui-x-updates')}
- Support
+ }>
+ Support
+
{renderRow('core-support')}
{divider}
{renderRow('x-support')}
@@ -1738,34 +1727,15 @@ export default function PricingTable({
{divider}
{renderRow('response-time')}
{divider}
-
- {divider}
- {renderRow('mui-x-production')}
- {divider}
-
- {divider}
- {renderRow('mui-x-updates')}
- }>
- Support
-
- {renderRow('x-support')}
- {divider}
- {renderRow('support-duration')}
- {divider}
- {renderRow('priority-support')}
- {divider}
- {renderRow('core-support')}
- {divider}
- {renderRow('response-time')}
- {divider}
- {renderRow('pre-screening')}
- {divider}
- {renderRow('issue-escalation')}
- {divider}
- {renderRow('customer-success')}
- {divider}
- {renderRow('security-questionnaire')}
- {divider}
-
+ {renderRow('pre-screening')}
+ {divider}
+ {renderRow('issue-escalation')}
+ {divider}
+ {renderRow('customer-success')}
+ {divider}
+ {renderRow('security-questionnaire')}
+ {divider}
+
+
);
}
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index f72d9e329a56d7..07f77c865797d8 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -11,13 +11,6 @@
"esModuleInterop": true,
"incremental": true
},
- "include": [
- "next-env.d.ts",
- "next.config.mjs",
- "types",
- "src",
- "pages",
- "data"
- ],
+ "include": ["next-env.d.ts", "next.config.mjs", "types", "src", "pages", "data"],
"exclude": ["docs/.next", "docs/export", "node_modules"]
}
From 76b8ac7739f4ac2850cf81b17e5d6737e122de43 Mon Sep 17 00:00:00 2001
From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com>
Date: Wed, 15 Jan 2025 17:06:29 +0530
Subject: [PATCH 30/31] more
---
docs/src/components/pricing/PricingTable.tsx | 27 --------------------
1 file changed, 27 deletions(-)
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 69c690798d5129..863e07dea8cecc 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -1392,15 +1392,6 @@ export default function PricingTable({
},
},
}),
- (theme) =>
- theme.applyDarkStyles({
- '&:hover': {
- bgcolor: alpha(theme.palette.primary.main, 0.06),
- '@media (hover: none)': {
- bgcolor: 'initial',
- },
- },
- }),
(theme) =>
theme.applyDarkStyles({
'&:hover': {
@@ -1555,15 +1546,6 @@ export default function PricingTable({
},
},
}),
- (theme) =>
- theme.applyDarkStyles({
- '&:hover': {
- bgcolor: alpha(theme.palette.primary.main, 0.06),
- '@media (hover: none)': {
- bgcolor: 'initial',
- },
- },
- }),
(theme) =>
theme.applyDarkStyles({
'&:hover': {
@@ -1672,15 +1654,6 @@ export default function PricingTable({
},
},
}),
- (theme) =>
- theme.applyDarkStyles({
- '&:hover': {
- bgcolor: alpha(theme.palette.primary.main, 0.06),
- '@media (hover: none)': {
- bgcolor: 'initial',
- },
- },
- }),
(theme) =>
theme.applyDarkStyles({
'&:hover': {
From 4ae411fdc945e785097672b258cd650dfda31409 Mon Sep 17 00:00:00 2001
From: zanivan
Date: Mon, 20 Jan 2025 09:51:22 -0300
Subject: [PATCH 31/31] Small design tweaks
---
docs/src/components/pricing/PricingCards.tsx | 97 +++++++++++++------
.../pricing/PrioritySupportSwitch.tsx | 17 ++--
2 files changed, 76 insertions(+), 38 deletions(-)
diff --git a/docs/src/components/pricing/PricingCards.tsx b/docs/src/components/pricing/PricingCards.tsx
index 2f77da4d6769eb..147b2def9c81fc 100644
--- a/docs/src/components/pricing/PricingCards.tsx
+++ b/docs/src/components/pricing/PricingCards.tsx
@@ -291,8 +291,9 @@ export default function PricingCards() {
borderColor: 'divider',
borderRadius: 1,
flexDirection: 'column',
- p: 2,
- pt: 1.5,
+ gap: 3,
+ py: 3,
+ px: 2,
flex: '1 1 0px',
}}
>
@@ -300,13 +301,21 @@ export default function PricingCards() {
-
+
{planInfo.community.features.map((feature, index) => (
{feature}
@@ -322,8 +331,9 @@ export default function PricingCards() {
borderColor: 'divider',
borderRadius: 1,
flexDirection: 'column',
- p: 2,
- pt: 1.5,
+ gap: 3,
+ py: 3,
+ px: 2,
flex: '1 1 0px',
}}
>
@@ -332,13 +342,21 @@ export default function PricingCards() {
{/* */}
-
+
{planInfo.pro.features.map((feature, index) => (
{feature}
@@ -348,37 +366,43 @@ export default function PricingCards() {
({
- display: 'flex',
- border: '1px solid',
- borderRadius: 1,
- flexDirection: 'column',
- p: 2,
- pt: 1.5,
- flex: '1 1 0px',
- borderColor: 'primary.light',
- background:
- 'linear-gradient(0deg, rgba(250, 250, 250, 1) 0%, rgba(255,255,255,0) 100%)',
+ sx={(theme) => ({
+ 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',
}),
- (theme) =>
- theme.applyDarkStyles({
- borderColor: 'primaryDark.700',
- background: alpha(theme.palette.primaryDark[700], 0.3),
- }),
- ]}
+ })}
>
{/* */}
-
+
{planInfo.premium.features.map((feature, index) => (
{/* */}
@@ -395,8 +419,9 @@ export default function PricingCards() {
borderColor: 'divider',
borderRadius: 1,
flexDirection: 'column',
- p: 2,
- pt: 1.5,
+ gap: 3,
+ py: 3,
+ px: 2,
flex: '1 1 0px',
}}
>
@@ -405,13 +430,21 @@ export default function PricingCards() {
{/* */}
-
+
{planInfo.enterprise.features.map((feature, index) => (
{feature}
diff --git a/docs/src/components/pricing/PrioritySupportSwitch.tsx b/docs/src/components/pricing/PrioritySupportSwitch.tsx
index 2b537d898374e3..573e4eb307712c 100644
--- a/docs/src/components/pricing/PrioritySupportSwitch.tsx
+++ b/docs/src/components/pricing/PrioritySupportSwitch.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import { alpha } from '@mui/material/styles';
import Switch from '@mui/material/Switch';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
@@ -32,12 +33,15 @@ export default function PrioritySupportSwitch() {
return (
({
+ border: '1px solid',
+ borderColor: 'primary.100',
borderRadius: 1,
padding: 2,
- }}
+ ...theme.applyDarkStyles({
+ borderColor: `${alpha(theme.palette.primary[700], 0.4)}`,
+ }),
+ })}
>