diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx index 7e0a73b2f..ffdcbc994 100644 --- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx +++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/ManagePlansTable.tsx @@ -34,7 +34,7 @@ export const ManagePlansTable = ({ const createCustomerPortalSession = useCreateCustomerPortalSession(); const displayCell = (value: null | number | string | boolean) => { - if (value === null) return "-"; + if (value === null) return "Unlimited"; if (typeof value === "boolean") { if (value) return ( diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx index b65ac6b44..9d7bd0374 100644 --- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx +++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx @@ -12,7 +12,7 @@ export const PreviewSection = () => { const { subscription, isLoading: isSubscriptionLoading } = useSubscription(); const { data, isLoading } = useGetOrgPlanBillingInfo(currentOrg?._id ?? ""); const createCustomerPortalSession = useCreateCustomerPortalSession(); - + const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ "managePlan" ] as const); @@ -35,6 +35,12 @@ export const PreviewSection = () => { return formattedDate; } + + function formatPlanSlug(slug: string) { + return slug + .replace(/(\b[a-z])/g, match => match.toUpperCase()) + .replace(/-/g, " "); + } return (
@@ -52,11 +58,13 @@ export const PreviewSection = () => {
)} - {!isLoading && data && ( + {!isLoading && subscription && data && (

Current plan

-

Starter

+

+ {formatPlanSlug(subscription.slug)} +