From 22eb9f6abfe6a6ee9143d8a957aa03ecd95e34e8 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie Date: Sat, 6 Apr 2024 17:55:26 -0700 Subject: [PATCH] feat: add Nano instance to pricing page --- .../Pricing/ComputePricingCalculator.tsx | 53 ++++++++++++------ .../Pricing/ComputePricingTable.tsx | 15 +---- apps/www/data/PricingAddOnTable.json | 19 +++++++ package-lock.json | 56 +++++++++---------- package.json | 19 ++++++- 5 files changed, 99 insertions(+), 63 deletions(-) diff --git a/apps/www/components/Pricing/ComputePricingCalculator.tsx b/apps/www/components/Pricing/ComputePricingCalculator.tsx index ef37ff2ecc0..f3b8a99efc4 100644 --- a/apps/www/components/Pricing/ComputePricingCalculator.tsx +++ b/apps/www/components/Pricing/ComputePricingCalculator.tsx @@ -26,7 +26,7 @@ const plans = [ }, ] -const findIntanceValueByColumn = (instance: any, column: string) => +const findInstanceValueByColumn = (instance: any, column: string) => instance.columns?.find((col: any) => col.key === column)?.value const parsePrice = (price: string) => parseInt(price?.toString().replace('$', '').replace(',', '')) @@ -34,18 +34,19 @@ const parsePrice = (price: string) => parseInt(price?.toString().replace('$', '' const ComputePricingCalculator = () => { const computeInstances = pricingAddOn.database.rows const priceSteps = computeInstances.map((instance) => - parsePrice(findIntanceValueByColumn(instance, 'pricing')) + parsePrice(findInstanceValueByColumn(instance, 'pricing')) ) // Base discount credits that come with every paid plan const COMPUTE_CREDITS = 10 const [activePlan, setActivePlan] = useState(plans[0]) const [activeInstances, setActiveInstances] = useState([{ ...computeInstances[0], position: 0 }]) + const [computeCredits, setComputeCredits] = useState(0) // Final calculated price: plan cost + compute aggregate - compute credits - const [activePrice, setActivePrice] = useState(activePlan.price + priceSteps[0] - COMPUTE_CREDITS) + const [activePrice, setActivePrice] = useState(activePlan.price + priceSteps[0] - computeCredits) useEffect(() => { - setActivePrice(activePlan.price + priceSteps[0] - COMPUTE_CREDITS) + setActivePrice(activePlan.price + priceSteps[0] - computeCredits) }, []) const handleUpdateInstance = (position: number, value: number[]) => { @@ -64,22 +65,38 @@ const ComputePricingCalculator = () => { const calculateComputeAggregate = (price: number) => { activeInstances.map( (activeInstance: any) => - (price += parsePrice(findIntanceValueByColumn(activeInstance, 'pricing'))) + (price += parsePrice(findInstanceValueByColumn(activeInstance, 'pricing'))) ) return price } + const applyCredits = () => { + if ( + activeInstances.some( + (instance) => parsePrice(findInstanceValueByColumn(instance, 'pricing')) > 0 + ) + ) { + setComputeCredits(COMPUTE_CREDITS) + } else { + setComputeCredits(0) + } + } + const calculatePrice = () => { let aggregatePrice = 0 const computeAggregate = calculateComputeAggregate(aggregatePrice) - return setActivePrice(computeAggregate + activePlan.price - COMPUTE_CREDITS) + return setActivePrice(computeAggregate + activePlan.price - computeCredits) } + useEffect(() => { + applyCredits() + }, [activeInstances]) + useEffect(() => { calculatePrice() - }, [activeInstances, activePlan]) + }, [activeInstances, activePlan, computeCredits]) const removeInstance = (position: number) => { const newArray = activeInstances @@ -95,8 +112,8 @@ const ComputePricingCalculator = () => { const findSliderComputeValue = (activeInstance: any) => { // find index of compute based on active compute name const selectedCompute = computeInstances - .map((compute) => findIntanceValueByColumn(compute, 'plan')) - .indexOf(findIntanceValueByColumn(activeInstance, 'plan')) + .map((compute) => findInstanceValueByColumn(compute, 'plan')) + .indexOf(findInstanceValueByColumn(activeInstance, 'plan')) return [selectedCompute + 1] } @@ -113,7 +130,7 @@ const ComputePricingCalculator = () => {
Compute Credits - - ${COMPUTE_CREDITS} + - ${computeCredits}
) @@ -239,20 +256,20 @@ const ComputePricingCalculator = () => { - {findIntanceValueByColumn(activeInstance, 'plan')} + {findInstanceValueByColumn(activeInstance, 'plan')}

Project {activeInstance.position + 1}

- {findIntanceValueByColumn(activeInstance, 'pricing')} + {findInstanceValueByColumn(activeInstance, 'pricing')} {
- {findIntanceValueByColumn(activeInstance, 'memory')} RAM /{' '} - {findIntanceValueByColumn(activeInstance, 'cpu')} CPU / Connections: Direct{' '} - {findIntanceValueByColumn(activeInstance, 'directConnections')}, Pooler{' '} - {findIntanceValueByColumn(activeInstance, 'poolerConnections')} + {findInstanceValueByColumn(activeInstance, 'memory')} RAM /{' '} + {findInstanceValueByColumn(activeInstance, 'cpu')} CPU / Connections: Direct{' '} + {findInstanceValueByColumn(activeInstance, 'directConnections')}, Pooler{' '} + {findInstanceValueByColumn(activeInstance, 'poolerConnections')}
diff --git a/apps/www/components/Pricing/ComputePricingTable.tsx b/apps/www/components/Pricing/ComputePricingTable.tsx index 3aeab97e435..a87ebbd48a8 100644 --- a/apps/www/components/Pricing/ComputePricingTable.tsx +++ b/apps/www/components/Pricing/ComputePricingTable.tsx @@ -28,20 +28,7 @@ const ComputePricingTable = () => { {pricingAddOn.database.rows.map((row, i) => ( - {i === 0 && ( - - - First instance is free on paid plans - - - )} - + {row.columns.map((column) => ( {column.key === 'dedicated' ? ( diff --git a/apps/www/data/PricingAddOnTable.json b/apps/www/data/PricingAddOnTable.json index 46c5da32861..93e907bbaa6 100644 --- a/apps/www/data/PricingAddOnTable.json +++ b/apps/www/data/PricingAddOnTable.json @@ -8,6 +8,25 @@ "Additional Disk Bandwidth" ], "rows": [ + { + "columns": [ + { "key": "plan", "title": "Plan", "value": "Nano (Free)" }, + { "key": "pricing", "title": "Price USD", "value": "$0" }, + { "key": "cpu", "title": "CPU", "value": "Shared" }, + { "key": "dedicated", "title": "Dedicated", "value": false }, + { "key": "memory", "title": "Memory", "value": "Up to 0.5 GB" }, + { + "key": "directConnections", + "title": "Connections: Direct", + "value": "60" + }, + { + "key": "poolerConnections", + "title": "Connections: Pooler", + "value": "200" + } + ] + }, { "columns": [ { "key": "plan", "title": "Plan", "value": "Micro" }, diff --git a/package-lock.json b/package-lock.json index 388e955554d..455cfb81d37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "prettier-plugin-sql-cst": "^0.11.0", "sass": "^1.72.0", "supabase": "^1.151.1", - "turbo": "^1.13.0" + "turbo": "^1.13.2" }, "engines": { "node": ">=20.0.0", @@ -44473,26 +44473,26 @@ } }, "node_modules/turbo": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.13.0.tgz", - "integrity": "sha512-r02GtNmkOPcQvUzVE6lg474QVLyU02r3yh3lUGqrFHf5h5ZEjgDGWILsAUqplVqjri1Y/oOkTssks4CObTAaiw==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.13.2.tgz", + "integrity": "sha512-rX/d9f4MgRT3yK6cERPAkfavIxbpBZowDQpgvkYwGMGDQ0Nvw1nc0NVjruE76GrzXQqoxR1UpnmEP54vBARFHQ==", "dev": true, "bin": { "turbo": "bin/turbo" }, "optionalDependencies": { - "turbo-darwin-64": "1.13.0", - "turbo-darwin-arm64": "1.13.0", - "turbo-linux-64": "1.13.0", - "turbo-linux-arm64": "1.13.0", - "turbo-windows-64": "1.13.0", - "turbo-windows-arm64": "1.13.0" + "turbo-darwin-64": "1.13.2", + "turbo-darwin-arm64": "1.13.2", + "turbo-linux-64": "1.13.2", + "turbo-linux-arm64": "1.13.2", + "turbo-windows-64": "1.13.2", + "turbo-windows-arm64": "1.13.2" } }, "node_modules/turbo-darwin-64": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.13.0.tgz", - "integrity": "sha512-ctHeJXtQgBcgxnCXwrJTGiq57HtwF7zWz5NTuSv//5yeU01BtQIt62ArKfjudOhRefWJbX3Z5srn88XTb9hfww==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.13.2.tgz", + "integrity": "sha512-CCSuD8CfmtncpohCuIgq7eAzUas0IwSbHfI8/Q3vKObTdXyN8vAo01gwqXjDGpzG9bTEVedD0GmLbD23dR0MLA==", "cpu": [ "x64" ], @@ -44503,9 +44503,9 @@ ] }, "node_modules/turbo-darwin-arm64": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.13.0.tgz", - "integrity": "sha512-/Q9/pNFkF9w83tNxwMpgapwLYdQ12p8mpty2YQRoUiS9ClWkcqe136jR0mtuMqzlNlpREOFZaoyIthjt6Sdo0g==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.13.2.tgz", + "integrity": "sha512-0HySm06/D2N91rJJ89FbiI/AodmY8B3WDSFTVEpu2+8spUw7hOJ8okWOT0e5iGlyayUP9gr31eOeL3VFZkpfCw==", "cpu": [ "arm64" ], @@ -44516,9 +44516,9 @@ ] }, "node_modules/turbo-linux-64": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.13.0.tgz", - "integrity": "sha512-hgbT7o020BGV4L7Sd8hhFTd5zVKPKxbsr0dPfel/9NkdTmptz2aGZ0Vb2MAa18SY3XaCQpDxmdYuOzvvRpo5ZA==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.13.2.tgz", + "integrity": "sha512-7HnibgbqZrjn4lcfIouzlPu8ZHSBtURG4c7Bedu7WJUDeZo+RE1crlrQm8wuwO54S0siYqUqo7GNHxu4IXbioQ==", "cpu": [ "x64" ], @@ -44529,9 +44529,9 @@ ] }, "node_modules/turbo-linux-arm64": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.13.0.tgz", - "integrity": "sha512-WK01i2wDZARrV+HEs495A3hNeGMwQR5suYk7G+ceqqW7b+dOTlQdvUjnI3sg7wAnZPgjafFs/hoBaZdJjVa/nw==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.13.2.tgz", + "integrity": "sha512-sUq4dbpk6SNKg/Hkwn256Vj2AEYSQdG96repio894h5/LEfauIK2QYiC/xxAeW3WBMc6BngmvNyURIg7ltrePg==", "cpu": [ "arm64" ], @@ -44542,9 +44542,9 @@ ] }, "node_modules/turbo-windows-64": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.13.0.tgz", - "integrity": "sha512-hJgSZJZwlWHNwLEthaqJqJWGm4NqF5X/I7vE0sPE4i/jeDl8f0n1hcOkgJkJiNXVxhj+qy/9+4dzbPLKT9imaQ==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.13.2.tgz", + "integrity": "sha512-DqzhcrciWq3dpzllJR2VVIyOhSlXYCo4mNEWl98DJ3FZ08PEzcI3ceudlH6F0t/nIcfSItK1bDP39cs7YoZHEA==", "cpu": [ "x64" ], @@ -44555,9 +44555,9 @@ ] }, "node_modules/turbo-windows-arm64": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.13.0.tgz", - "integrity": "sha512-L/ErxYoXeq8tmjU/AIGicC9VyBN1zdYw8JlM4yPmMI0pJdY8E4GaYK1IiIazqq7M72lmQhU/WW7fV9FqEktwrw==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.13.2.tgz", + "integrity": "sha512-WnPMrwfCXxK69CdDfS1/j2DlzcKxSmycgDAqV0XCYpK/812KB0KlvsVAt5PjEbZGXkY88pCJ1BLZHAjF5FcbqA==", "cpu": [ "arm64" ], diff --git a/package.json b/package.json index 67decd729e5..33f890ac98a 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,13 @@ "author": "Supabase, Inc.", "license": "Apache-2.0", "private": true, - "workspaces": ["apps/*", "apps/docs/spec/parser", "tests", "playwright-tests", "packages/*"], + "workspaces": [ + "apps/*", + "apps/docs/spec/parser", + "tests", + "playwright-tests", + "packages/*" + ], "scripts": { "build": "turbo run build", "build:studio": "turbo run build --filter=studio", @@ -37,7 +43,7 @@ "prettier-plugin-sql-cst": "^0.11.0", "sass": "^1.72.0", "supabase": "^1.151.1", - "turbo": "^1.13.0" + "turbo": "^1.13.2" }, "repository": { "type": "git", @@ -47,7 +53,14 @@ "npm": ">=9.0.0", "node": ">=20.0.0" }, - "keywords": ["postgres", "firebase", "storage", "functions", "database", "auth"], + "keywords": [ + "postgres", + "firebase", + "storage", + "functions", + "database", + "auth" + ], "volta": { "node": "20.11.1" }