awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 01:27:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Correct current plan text in usage and billing

Browse Source
This commit is contained in:
Tuan Dang
2023-06-27 19:01:31 +07:00
parent 5cd9f37fdf
commit 29d50f850b
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
+11 -3
View File
@@ -12,7 +12,7 @@ export const PreviewSection = () => {
const { subscription, isLoading: isSubscriptionLoading } = useSubscription(); const { subscription, isLoading: isSubscriptionLoading } = useSubscription();
const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? ""); const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? "");
const createCustomerPortalSession = useCreateCustomerPortalSession(); const createCustomerPortalSession = useCreateCustomerPortalSession();
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
"managePlan" "managePlan"
] as const); ] as const);
@@ -35,6 +35,12 @@ export const PreviewSection = () => {
return formattedDate; return formattedDate;
} }
function formatPlanSlug(slug: string) {
return slug
.replace(/(\b[a-z])/g, match => match.toUpperCase())
.replace(/-/g, " ");
}
return ( return (
<div> <div>
@@ -52,11 +58,13 @@ export const PreviewSection = () => {
</Button> </Button>
</div> </div>
)} )}
{!isLoading && data && ( {!isLoading && data && subscription && (
<div className="flex mt-8 max-w-screen-lg"> <div className="flex mt-8 max-w-screen-lg">
<div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600"> <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
<p className="mb-2 text-gray-400">Current plan</p> <p className="mb-2 text-gray-400">Current plan</p>
<p className="text-2xl mb-8 text-mineshaft-50 font-semibold">Starter</p> <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
{formatPlanSlug(subscription.slug)}
</p>
<button <button
type="button" type="button"
onClick={async () => { onClick={async () => {