Skip to content

Commit c09132b

Browse files
jankeromnesjankeromnes
committed
[dashboard] Differentiate usage-based upgrade UI for teams vs users
1 parent 9fe12c1 commit c09132b

File tree

2 files changed

+131
-13
lines changed

2 files changed

+131
-13
lines changed

‎components/dashboard/src/components/UsageBasedBillingConfig.tsx

Lines changed: 130 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-
1212
import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
1313
import { Ordering } from "@gitpod/gitpod-protocol/lib/usage";
1414
import { ReactComponent as Spinner } from "../icons/Spinner.svg";
15+
import { ReactComponent as Check } from "../images/check-circle.svg";
1516
import { ThemeContext } from "../theme-context";
1617
import { PaymentContext } from "../payment-context";
1718
import { getGitpodService } from "../service/service";
@@ -27,6 +28,7 @@ interface Props {
2728

2829
export default function UsageBasedBillingConfig({ attributionId }: Props) {
2930
const location = useLocation();
31+
const { currency } = useContext(PaymentContext);
3032
const [showUpdateLimitModal, setShowUpdateLimitModal] = useState<boolean>(false);
3133
const [showBillingSetupModal, setShowBillingSetupModal] = useState<boolean>(false);
3234
const [stripeSubscriptionId, setStripeSubscriptionId] = useState<string | undefined>();
@@ -168,7 +170,10 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
168170

169171
const showSpinner = !attributionId || isLoadingStripeSubscription || !!pendingStripeSubscription;
170172
const showBalance = !showSpinner && !(AttributionId.parse(attributionId)?.kind === "team" && !stripeSubscriptionId);
171-
const showUpgradeBilling = !showSpinner && !stripeSubscriptionId;
173+
const showUpgradeTeam =
174+
!showSpinner && AttributionId.parse(attributionId)?.kind === "team" && !stripeSubscriptionId;
175+
const showUpgradeUser =
176+
!showSpinner && AttributionId.parse(attributionId)?.kind === "user" && !stripeSubscriptionId;
172177
const showManageBilling = !showSpinner && !!stripeSubscriptionId;
173178

174179
const updateUsageLimit = async (newLimit: number) => {
@@ -195,7 +200,7 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
195200
</Alert>
196201
)}
197202
{showSpinner && (
198-
<div className="flex flex-col mt-4 h-32 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
203+
<div className="flex flex-col mt-4 h-52 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
199204
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Balance</div>
200205
<Spinner className="m-2 h-5 w-5 animate-spin" />
201206
</div>
@@ -244,21 +249,136 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
244249
</div>
245250
</div>
246251
)}
247-
{showUpgradeBilling && (
248-
<div className="flex flex-col mt-4 h-32 p-4 rounded-xl bg-gray-100 dark:bg-gray-800">
249-
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Billing</div>
250-
<div className="text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">Inactive</div>
251-
<button className="self-end" onClick={() => setShowBillingSetupModal(true)}>
252+
{showUpgradeTeam && (
253+
<div className="flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
254+
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Upgrade Plan</div>
255+
<div className="mt-1 text-xl font-semibold flex-grow text-gray-500 dark:text-gray-400">
256+
Pay-as-you-go
257+
</div>
258+
<div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
259+
<Check className="m-0.5 w-5 h-5" />
260+
<div className="flex flex-col">
261+
<span>
262+
36¢ for 10 credits or 1 hour of Standard workspace usage.{" "}
263+
<a
264+
className="gp-link"
265+
href="https://www.gitpod.io/docs/configure/billing/usage-based-billing"
266+
>
267+
Learn more about credits
268+
</a>
269+
</span>
270+
</div>
271+
</div>
272+
<button className="mt-5 self-end" onClick={() => setShowBillingSetupModal(true)}>
252273
Upgrade Plan
253274
</button>
254275
</div>
255276
)}
277+
{showUpgradeUser && (
278+
<div className="flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
279+
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
280+
<div className="mt-1 text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">
281+
Free
282+
</div>
283+
<div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
284+
<Check className="m-0.5 w-5 h-5 text-orange-500" />
285+
<div className="flex flex-col">
286+
<span className="font-bold text-gray-500 dark:text-gray-400">500 credits</span>
287+
<span>
288+
50 hours of Standard workspace usage.{" "}
289+
<a
290+
className="gp-link"
291+
href="https://www.gitpod.io/docs/configure/billing/usage-based-billing"
292+
>
293+
Learn more about credits
294+
</a>
295+
</span>
296+
</div>
297+
</div>
298+
<div className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-800 -m-4 p-4 mt-8 rounded-b-xl">
299+
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Upgrade Plan</div>
300+
<div className="mt-1 text-xl font-semibold flex-grow text-gray-500 dark:text-gray-400">
301+
{currency === "EUR" ? "€" : "$"}9 / month
302+
</div>
303+
<div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
304+
<Check className="m-0.5 w-5 h-5" />
305+
<div className="flex flex-col">
306+
<span className="font-bold">1,000 credits</span>
307+
</div>
308+
</div>
309+
<div className="mt-2 flex space-x-1 text-gray-400 dark:text-gray-500">
310+
<Check className="m-0.5 w-5 h-5" />
311+
<div className="flex flex-col">
312+
<span className="font-bold">Pay-as-you-go after 1,000 credits</span>
313+
<span>36¢ for 10 credits or 1 hour of Standard workspace usage.</span>
314+
</div>
315+
</div>
316+
<div className="mt-5 flex flex-col">
317+
<button className="self-end" onClick={() => setShowBillingSetupModal(true)}>
318+
Upgrade Plan
319+
</button>
320+
</div>
321+
</div>
322+
</div>
323+
)}
256324
{showManageBilling && (
257325
<div className="max-w-xl flex space-x-4">
258-
<div className="flex-grow flex flex-col mt-4 h-32 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
326+
<div className="flex-grow flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-900">
259327
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
260-
<div className="text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">Paid</div>
261-
<a className="self-end" href={stripePortalUrl}>
328+
{AttributionId.parse(attributionId)?.kind === "user" ? (
329+
<>
330+
<div className="mt-1 text-xl font-semibold flex-grow text-gray-800 dark:text-gray-100">
331+
{currency === "EUR" ? "€" : "$"}9 / month
332+
</div>
333+
<div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
334+
<Check className="m-0.5 w-5 h-5 text-orange-500" />
335+
<div className="flex flex-col">
336+
<span className="font-bold text-gray-500 dark:text-gray-400">
337+
1,000 credits
338+
</span>
339+
<span>
340+
100 hours of Standard workspace usage.{" "}
341+
<a
342+
className="gp-link"
343+
href="https://www.gitpod.io/docs/configure/billing/usage-based-billing"
344+
>
345+
Learn more about credits
346+
</a>
347+
</span>
348+
</div>
349+
</div>
350+
<div className="mt-3 flex space-x-1 text-gray-400 dark:text-gray-500">
351+
<Check className="m-0.5 w-5 h-5 text-orange-500" />
352+
<div className="flex flex-col">
353+
<span className="font-bold text-gray-500 dark:text-gray-400">
354+
Pay-as-you-go after 1,000 credits
355+
</span>
356+
<span>36¢ for 10 credits or 1 hour of Standard workspace usage.</span>
357+
</div>
358+
</div>
359+
</>
360+
) : (
361+
<>
362+
<div className="mt-1 text-xl font-semibold flex-grow text-gray-800 dark:text-gray-100">
363+
Pay-as-you-go
364+
</div>
365+
<div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
366+
<Check className="m-0.5 w-5 h-5 text-orange-500" />
367+
<div className="flex flex-col">
368+
<span>
369+
36¢ for 10 credits or 1 hour of Standard workspace usage.{" "}
370+
<a
371+
className="gp-link"
372+
href="https://www.gitpod.io/docs/configure/billing/usage-based-billing"
373+
>
374+
Learn more about credits
375+
</a>
376+
</span>
377+
</div>
378+
</div>
379+
</>
380+
)}
381+
<a className="mt-5 self-end" href={stripePortalUrl}>
262382
<button className="secondary" disabled={!stripePortalUrl}>
263383
Manage Plan
264384
</button>

‎components/dashboard/src/images/check-circle.svg

Lines changed: 1 addition & 3 deletions
Loading

0 commit comments

Comments
 (0)