Feedback Ruben

windmill-labs · Nov 14, 2024 · 725606d · 725606d
1 parent f1604ea
commit 725606d
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 70 deletions.
diff --git a/src/components/Pricing.js b/src/components/Pricing.js
@@ -146,6 +146,11 @@ const pricing = {
 						<span>SLA & Priority Support 24/7 with 3h response time and engineer assistance</span>
 					)
 				},
+				{
+					text: (
+						<span>Dedicated Slack or Discord channel</span>
+					)
+				},
 				{
 					text: <span>Design partners for roadmap</span>
 				}
@@ -161,7 +166,12 @@ const pricing = {
 					features: [
 						{ text: 'No Audit logs' },
 						{ text: 'No Distributed dependency cache backed by S3' },
-						{ text: 'Max 10 users with SSO' }
+						{ text: 'Max 10 users with SSO' },
+						{
+							text: (
+								<span>Max 10 <a href="#compute-units" className="custom-link text-gray-900 hover:text-gray-600 dark:text-white dark:hover:text-gray-200">compute units</a> (CU)</span>
+							)
+						},
 					]
 				},
 				{ text: 'Support with 48h response time by email' }
@@ -211,7 +221,6 @@ const pricing = {
 				{
 					text: <span>Everything in free</span>
 				},
-
 				{
 					text: <span>Audit logs 7 days retention</span>
 				},
@@ -287,7 +296,9 @@ const pricing = {
 						</span>
 					)
 				},
-
+				{
+					text: <span>Dedicated Slack or Discord channel</span>
+				},
 				{
 					text: <span>Design partners for roadmap</span>
 				}

diff --git a/src/components/QuoteForm.tsx b/src/components/QuoteForm.tsx
@@ -1,13 +1,14 @@
 import { Dialog } from '@headlessui/react';
 import { Loader2, X } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 export function QuoteForm({
 	workers,
 	developers,
 	operators,
 	frequency,
 	plan,
+	total_price,
 	open,
 	setOpen,
 	selectedOption
@@ -145,73 +146,78 @@ export function QuoteForm({
 							? 'Enterprise - Nonprofit'
 							: 'Self-Hosted EE'}
 						</div>
+
 						<div className="flex flex-row justify-between">
-							<span className="font-medium text-gray-800 dark:text-gray-200">Frequency</span>
-							{frequency}
+							<span className="font-medium text-gray-800 dark:text-gray-200">Price</span>
+							${total_price.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}/{frequency === 'monthly' ? 'mo' : 'yr'}
 						</div>
 						<div className="flex flex-row justify-between">
-							<span className="font-medium text-gray-800 dark:text-gray-200">Total seat units</span>
+							<span className="font-medium text-gray-800 dark:text-gray-200">Total seat units (SU)</span>
 							{Math.ceil(operators / 2) + developers}
 						</div>
 						{developers > 0 && (
 							<div className="flex flex-row justify-between font-normal text-gray-600 dark:text-gray-300">
-								<span className="pl-4">Developers</span>
-								<div>
-									{developers} ({developers} {developers === 1 ? 'seat' : 'seats'})
+								<span className="pl-4 w-40">Developers</span>
+								<div className="grid grid-cols-[60px_20px_60px] gap-1">
+									<span className="text-right">{developers}</span>
+									<span className="text-center">=</span>
+									<span className="text-right">{developers} SU</span>
 								</div>
 							</div>
 						)}
 						{operators > 0 && (
 							<div className="flex flex-row justify-between font-normal text-gray-600 dark:text-gray-300">
-								<span className="pl-4">Operators</span>
-								<div>
-									{operators} ({Math.ceil(operators / 2)} {Math.ceil(operators / 2) === 1 ? 'seat' : 'seats'})
+								<span className="pl-4 w-40">Operators</span>
+								<div className="grid grid-cols-[60px_20px_60px] gap-1">
+									<span className="text-right">{operators}</span>
+									<span className="text-center">=</span>
+									<span className="text-right">{Math.ceil(operators / 2)} SU</span>
 								</div>
 							</div>
 						)}
 						<div className="flex flex-row justify-between">
-							<span className="font-medium text-gray-800 dark:text-gray-200">Total compute units</span>
+							<span className="font-medium text-gray-800 dark:text-gray-200">Total compute units (CU)</span>
 							<div>
-								{computeUnits} {computeUnits === 1 ? 'compute unit' : 'compute units'}
+								{computeUnits}
 							</div>
 						</div>
 						{workers.standard > 0 && (
 							<div className="flex flex-row justify-between font-normal text-gray-600 dark:text-gray-300">
-								<span className="pl-4">Standard workers</span>
-								<div className="grid grid-cols-3 w-36">
-									<span className="text-left w-2">{workers.standard}</span>
-									<span className="text-center w-2">=</span>
-									<span className="text-right w-15">{workers.standard} CU</span>
+								<span className="pl-4 w-40">Standard workers</span>
+								<div className="grid grid-cols-[60px_20px_60px] gap-1">
+									<span className="text-right">{workers.standard}</span>
+									<span className="text-center">=</span>
+									<span className="text-right">{workers.standard} CU</span>
 								</div>
 							</div>
 						)}
 						{workers.small > 0 && (
 							<div className="flex flex-row justify-between font-normal text-gray-600 dark:text-gray-300">
-								<span className="pl-4">Small workers</span>
-								<div className="grid grid-cols-3 w-36">
-									<span className="text-left w-8">{workers.small}</span>
-									<span className="text-center w-2">=</span>
-									<span className="text-right w-15">{Math.ceil(workers.small / 2)} CU</span>
+								<span className="pl-4 w-40">Small workers</span>
+								<div className="grid grid-cols-[60px_20px_60px] gap-1">
+									<span className="text-right">{workers.small}</span>
+									<span className="text-center">=</span>
+									<span className="text-right">{Math.ceil(workers.small / 2)} CU</span>
 								</div>
 							</div>
 						)}
 						{workers.large > 0 && (
 							<div className="flex flex-row justify-between font-normal text-gray-600 dark:text-gray-300">
-								<span className="pl-4">Large workers</span>
-								<div className="grid grid-cols-3 w-36">
-									<span className="text-left w-8">{workers.large}</span>
-									<span className="text-center w-2">=</span>
-									<span className="text-right w-15">{workers.large * 2} CU</span>
+								<span className="pl-4 w-40">Large workers</span>
+								<div className="grid grid-cols-[60px_20px_60px] gap-1">
+									<span className="text-right">{workers.large}</span>
+									<span className="text-center">=</span>
+									<span className="text-right">{workers.large * 2} CU</span>
 								</div>
 							</div>
 						)}
 						{workers.native > 0 && (
 							<div className="flex flex-row justify-between font-normal text-gray-600 dark:text-gray-300">
-								<span className="pl-4">Native workers</span>
-								<div className="grid grid-cols-3 w-36">
-									<span className="text-left w-8">{workers.native}</span>
-									<span className="text-center w-2">=</span>
-									<span className="text-right w-15">
+								<span className="pl-4 w-40">Native workers</span>
+								<div className="grid grid-cols-[60px_20px_60px] gap-1">
+									<span className="text-right">{workers.native * 8}</span>
+									<span className="text-center">=</span>
+									<span className="text-right">
 										{selectedOption === 'SMB' && plan === 'selfhosted_ee' 
 											? Math.min(workers.native, 10) 
 											: workers.native} CU