Skip to content

Commit 88581ba

Browse files
rubenfiszelrubenfiszel
committed
fix pricing
1 parent 9137dcd commit 88581ba

File tree

1 file changed

+73
-61
lines changed

1 file changed

+73
-61
lines changed

‎src/components/pricing/PriceCalculator.js

Lines changed: 73 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,42 @@ import classNames from 'classnames';
55
import Slider from './Slider';
66

77
const plans = [
8-
{
9-
name: 'Core package',
10-
description: 'Your own hosted dedicated Windmill cluster without restrictions or maintenance.',
11-
price: 600
12-
}
8+
{
9+
name: 'Core package',
10+
description: 'Your own hosted dedicated Windmill cluster without restrictions or maintenance.',
11+
price: 600
12+
}
1313
];
1414

1515
function calculatePrice(monthlyPrice, period, tierId) {
16-
if (period === 'annually') {
17-
if (tierId === 'tier-team') {
18-
return monthlyPrice * 12; // For 'tier-team', multiply by 12
19-
}
20-
return monthlyPrice * 10; // Default annual calculation
21-
}
22-
return monthlyPrice; // Monthly pricing remains unchanged
16+
if (period === 'annually') {
17+
if (tierId === 'tier-team') {
18+
return monthlyPrice * 12; // For 'tier-team', multiply by 12
19+
}
20+
return monthlyPrice * 10; // Default annual calculation
21+
}
22+
return monthlyPrice; // Monthly pricing remains unchanged
2323
}
2424

2525
const priceFormatter = new Intl.NumberFormat('en-US', {
26-
style: 'currency',
27-
currency: 'USD',
28-
minimumFractionDigits: 0,
29-
maximumFractionDigits: 0
26+
style: 'currency',
27+
currency: 'USD',
28+
minimumFractionDigits: 0,
29+
maximumFractionDigits: 0
3030
});
3131

3232
export default function PriceCalculator({ period, tier }) {
33-
const [selected, setSelected] = useState(plans[0]);
34-
const [seats, setSeats] = useState(tier.price.seat ? tier.price.seat.default : 2);
35-
const [vCPUs, setvCPUs] = useState(tier.price.vCPU ? tier.price.vCPU.default : 2);
33+
const [selected, setSelected] = useState(plans[0]);
34+
const [seats, setSeats] = useState(tier.price.seat ? tier.price.seat.default : 2);
35+
const [vCPUs, setvCPUs] = useState(tier.price.vCPU ? tier.price.vCPU.default : 2);
3636

37-
function computeTotalPrice() {
37+
function computeTotalPrice() {
3838
let total = 0;
39-
39+
4040
if (tier.id === 'tier-team') {
4141
// For 'tier-team', calculate the base price, adjusting for the period
4242
total = calculatePrice(tier.minPrice, period.value, tier.id);
43-
43+
4444
// Calculate seat price, assuming the first seat's cost is included in the base price for 'tier-team' only
4545
if (tier.price.seat) {
4646
// Adjust the total calculation by adding seat costs only for additional seats beyond the first
@@ -52,56 +52,56 @@ export default function PriceCalculator({ period, tier }) {
5252
if (tier.id === 'tier-enterprise') {
5353
total = calculatePrice(selected.price, period.value, tier.id);
5454
}
55-
55+
5656
// Add full seat price for all seats without adjusting for the first seat
5757
if (tier.price.seat) {
5858
total += calculatePrice(tier.price.seat.monthly, period.value, tier.id) * seats;
5959
}
6060
}
61-
61+
6262
// Add price for vCPUs if applicable, this part remains unchanged
6363
if (tier.price.vCPU) {
6464
total += calculatePrice(tier.price.vCPU.monthly, period.value, tier.id) * vCPUs;
6565
}
6666
return total;
67-
}
67+
}
6868

69-
return (
69+
return (
7070
<div className="mt-16 grow flex flex-col justify-start">
7171
<div className="flex justify-between items-center">
7272
<h4>Price</h4>
73-
73+
7474
<div>
7575
<span className="text-2xl text-gray-900 font-semibold dark:text-white">
7676
{priceFormatter.format(computeTotalPrice())}
7777
</span>
7878
<span className="text-md text-gray-500">
7979
{period.value === 'annually' ? '/yr' : '/mo'}
8080
</span>
81-
</div>
82-
</div>
81+
</div>
82+
</div>
8383

84-
<p className="mt-4 flex items-baseline gap-x-1">
85-
<ul className="flex flex-col gap-2 w-full">
86-
{Object.keys(tier.price).map((key) => (
87-
<li key={key} className="flex flex-col ">
88-
<div className="flex justify-between w-full items-center">
89-
<div>
90-
<span className="text-sm text-gray-600 dark:text-gray-200">
91-
{key === 'vCPU' ? vCPUs.toLocaleString() : seats.toLocaleString()}
92-
</span>
93-
<span className="text-sm font-semibold tracking-tight text-gray-600 dark:text-gray-200">
94-
{' '}
95-
{key}s:
96-
</span>
97-
</div>
98-
<div>
99-
<span className="text-sm text-gray-900 font-semibold dark:text-white">
100-
${calculatePrice(tier.price[key].monthly, period.value, tier.id)}
101-
</span>
102-
<span className="text-sm text-gray-400">
103-
{period.value === 'annually' ? `/yr/${key}` : `/mo/${key}`}
104-
</span>
84+
<div className="mt-4 flex items-baseline gap-x-1">
85+
<ul className="flex flex-col gap-2 w-full">
86+
{Object.keys(tier.price).map((key) => (
87+
<li key={key} className="flex flex-col ">
88+
<div className="flex justify-between w-full items-center">
89+
<div>
90+
<span className="text-sm text-gray-600 dark:text-gray-200">
91+
{key === 'vCPU' ? vCPUs.toLocaleString() : seats.toLocaleString()}
92+
</span>
93+
<span className="text-sm font-semibold tracking-tight text-gray-600 dark:text-gray-200">
94+
{' '}
95+
{key}s:
96+
</span>
97+
</div>
98+
<div>
99+
<span className="text-sm text-gray-900 font-semibold dark:text-white">
100+
${calculatePrice(tier.price[key].monthly, period.value, tier.id)}
101+
</span>
102+
<span className="text-sm text-gray-400">
103+
{period.value === 'annually' ? `/yr/${key}` : `/mo/${key}`}
104+
</span>
105105
</div>
106106
</div>
107107

@@ -123,7 +123,7 @@ export default function PriceCalculator({ period, tier }) {
123123
</li>
124124
))}
125125
</ul>
126-
</p>
126+
</div>
127127
{tier.id === 'tier-enterprise' ? (
128128
<div className="mt-8">
129129
<RadioGroup value={selected} onChange={setSelected}>
@@ -190,9 +190,10 @@ export default function PriceCalculator({ period, tier }) {
190190
<h5 className="font-semibold">Summary</h5>
191191
<div className="mt-2 flex items-baseline gap-x-1">
192192
<div className="text-sm text-gray-600 mt-1">
193-
<span>{`~${
194-
seats * 10 * (period.value === 'annually' ? 12 : 1
195-
).toLocaleString()}k executions of 100ms per `}
193+
<span>
194+
{`~${
195+
seats * 10 * (period.value === 'annually' ? 12 : 1).toLocaleString()
196+
}k executions of 100ms per `}
196197
</span>
197198
<span>{period.value === 'annually' ? 'year' : 'month'}</span>
198199
</div>
@@ -202,7 +203,9 @@ export default function PriceCalculator({ period, tier }) {
202203
{seats.toLocaleString()} {seats > 1 ? 'developers' : 'developer'}
203204
</span>
204205
<b className="text-sm">OR</b>
205-
<span className="whitespace-nowrap text-sm">{(seats * 2).toLocaleString()} operators</span>
206+
<span className="whitespace-nowrap text-sm">
207+
{(seats * 2).toLocaleString()} operators
208+
</span>
206209
</div>
207210
</div>
208211
) : null}
@@ -213,7 +216,8 @@ export default function PriceCalculator({ period, tier }) {
213216
<div className="mt-2 flex items-baseline gap-x-1">
214217
<div className="text-sm text-gray-600 mt-1">
215218
<span>{`~${
216-
vCPUs * 26 * (period.value === 'annually' ? 12 : 1).toLocaleString()}M executions of 100ms per `}</span>
219+
vCPUs * 26 * (period.value === 'annually' ? 12 : 1).toLocaleString()
220+
}M executions of 100ms per `}</span>
217221
<span>{period.value === 'annually' ? 'year' : 'month'}</span>
218222
</div>
219223
</div>
@@ -222,7 +226,9 @@ export default function PriceCalculator({ period, tier }) {
222226
{seats.toLocaleString()} {seats > 1 ? 'developers' : 'developer'}
223227
</span>
224228
<b className="text-sm">OR</b>
225-
<span className="whitespace-nowrap text-sm">{(seats * 2).toLocaleString()} operators</span>
229+
<span className="whitespace-nowrap text-sm">
230+
{(seats * 2).toLocaleString()} operators
231+
</span>
226232
</div>
227233
</div>
228234
) : null}
@@ -233,7 +239,8 @@ export default function PriceCalculator({ period, tier }) {
233239
<div className="mt-2 flex items-baseline gap-x-1">
234240
<div className="text-sm text-gray-600 mt-1">
235241
<span>{`~${
236-
vCPUs * 26 * (period.value === 'annually' ? 12 : 1).toLocaleString()}M executions of 100ms per `}</span>
242+
vCPUs * 26 * (period.value === 'annually' ? 12 : 1).toLocaleString()
243+
}M executions of 100ms per `}</span>
237244
<span>{period.value === 'annually' ? 'year' : 'month'}</span>
238245
</div>
239246
</div>
@@ -242,7 +249,9 @@ export default function PriceCalculator({ period, tier }) {
242249
{seats.toLocaleString()} {seats > 1 ? 'developers' : 'developer'}
243250
</span>
244251
<b className="text-sm">OR</b>
245-
<span className="whitespace-nowrap text-sm">{(seats * 2).toLocaleString()} operators</span>
252+
<span className="whitespace-nowrap text-sm">
253+
{(seats * 2).toLocaleString()} operators
254+
</span>
246255
</div>
247256
</div>
248257
) : null}
@@ -253,7 +262,8 @@ export default function PriceCalculator({ period, tier }) {
253262
<div className="mt-2 flex items-baseline gap-x-1">
254263
<div className="text-sm text-gray-600 mt-1">
255264
<span>{`~${
256-
vCPUs * 26 * (period.value === 'annually' ? 12 : 1).toLocaleString()}M executions of 100ms per `}</span>
265+
vCPUs * 26 * (period.value === 'annually' ? 12 : 1).toLocaleString()
266+
}M executions of 100ms per `}</span>
257267
<span>{period.value === 'annually' ? 'year' : 'month'}</span>
258268
</div>
259269
</div>
@@ -262,7 +272,9 @@ export default function PriceCalculator({ period, tier }) {
262272
{seats.toLocaleString()} {seats > 1 ? 'developers' : 'developer'}
263273
</span>
264274
<b className="text-sm">OR</b>
265-
<span className="whitespace-nowrap text-sm">{(seats * 2).toLocaleString()} operators</span>
275+
<span className="whitespace-nowrap text-sm">
276+
{(seats * 2).toLocaleString()} operators
277+
</span>
266278
</div>
267279
</div>
268280
) : null}

0 commit comments

Comments
 (0)