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 ( + + ); +} + 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} + ); } From b1d16029268a884830989b594a8ba76a9c9aa3a6 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Thu, 31 Oct 2024 18:34:31 +0300 Subject: [PATCH 04/31] mobile-view and static header --- docs/src/components/pricing/PricingList.tsx | 33 +++++++++++++++++--- docs/src/components/pricing/PricingTable.tsx | 2 +- 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx index 3db627f0ccf805..33effd602976cb 100644 --- a/docs/src/components/pricing/PricingList.tsx +++ b/docs/src/components/pricing/PricingList.tsx @@ -15,7 +15,7 @@ import { useLicenseModel } from 'docs/src/components/pricing/LicenseModelContext const Plan = React.forwardRef< HTMLDivElement, { - plan: 'community' | 'pro' | 'premium'; + plan: 'community' | 'pro' | 'premium' | 'enterprise'; benefits?: Array; unavailable?: boolean; } & PaperProps @@ -32,7 +32,7 @@ const Plan = React.forwardRef< {...props} > - + {unavailable ? ( @@ -46,7 +46,7 @@ const Plan = React.forwardRef< ) : ( )} {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} + + + + + {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} - - - - - {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! + + + + + ); + } + + 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 + + + + Got a bigger team? Request a quote! + + + + + ); +} + +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({ - + {/* + */}
- + {/* */}
- + {/* */}
- - + {/* */} + {/* */}
- + {/* */}
- + {/* */}
)} 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 ? ( - - ) : ( - - )} - {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 ( - - ); -} - -function PricingTableBuyPremium() { - const { licenseModel } = useLicenseModel(); - - return ( - - ); -} - -function PricingTableBuyEnterprise() { - return ( - - ); -} -*/ - const StyledCollapse = styled(Collapse, { name: 'MuiSlider', slot: 'Track', @@ -1531,37 +1300,15 @@ export default function PricingTable({ - {/* - */} -
- - {/* */} -
- {/* */} +
- {/* */} - {/* */} -
- - {/* */} -
- {/* */} +
)} 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} - -