awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-10 11:29:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4721 from Infisical/fix/pricing-calculation-on-billing-page

Browse Source 
[ENG-3823] fix: pricing calculation on billing page
This commit is contained in:
Piyush Gupta
2025-10-24 18:27:39 +05:30
committed by GitHub
parent b3cdaada30 eb1bf79066
commit b03843bae4
4 changed files with 65 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/api/organization/types.ts
+2
View File
@@ -66,6 +66,8 @@ export type PlanBillingInfo = {
interval: "month" | "year";
intervalCount: number;
quantity: number;
users: number;
identities: number;
};
export type Invoice = {
frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx
+27 -10
View File
@@ -1,10 +1,10 @@
import { useEffect } from "react";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { faArrowUpRightFromSquare, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useQueryClient } from "@tanstack/react-query";
import { OrgPermissionCan } from "@app/components/permissions";
import { Button } from "@app/components/v2";
import { Button, Tooltip } from "@app/components/v2";
import {
OrgPermissionBillingActions,
OrgPermissionSubjects,
@@ -27,6 +27,9 @@ export const PreviewSection = () => {
const { subscription } = useSubscription(true);
const queryClient = useQueryClient();
const { data, isPending } = useGetOrgPlanBillingInfo(currentOrg?.id ?? "");
const totalAmount = data?.amount ? data.amount * (data.users + data.identities) : 0;
const getOrgTrialUrl = useGetOrgTrialUrl();
const createCustomerPortalSession = useCreateCustomerPortalSession();
@@ -190,14 +193,28 @@ export const PreviewSection = () => {
</OrgPermissionCan>
)}
</div>
<div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Price</p>
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
{subscription.status === "trialing"
? "$0.00 / month"
: `${formatAmount(data.amount)} / ${data.interval}`}
</p>
</div>
{subscription.slug !== "enterprise" ? (
<div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Price</p>
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
{subscription.status === "trialing" ? (
"$0.00 / month"
) : (
<>
{formatAmount(totalAmount)} / {data.interval}
{(subscription.slug === "pro" || subscription.slug === "pro-annual") && (
<Tooltip
content={`Total price is based on the number of users and machine identities at ${formatAmount(data.amount)} each. You have ${data.users} ${data.users > 1 ? "users" : "user"} and ${data.identities} ${data.identities > 1 ? "machine identities" : "machine identity"}.`}
className="max-w-lg"
>
<FontAwesomeIcon icon={faInfoCircle} className="ml-2" size="xs" />
</Tooltip>
)}
</>
)}
</p>
</div>
) : null}
<div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Subscription renews on</p>
<p className="mb-8 text-2xl font-medium text-mineshaft-50">