fix: improve subscription display in OrganizationSettings component; handle undefined values for plan, status, billing interval, and renewal date

This commit is contained in:
Usman Baig
2026-01-31 13:32:39 +01:00
parent 6cbf64a473
commit 62c81f7911

View File

@@ -549,14 +549,14 @@ export default function OrganizationSettings() {
<h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-1">Current Plan</h3> <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-1">Current Plan</h3>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl font-bold text-neutral-900 dark:text-white capitalize"> <span className="text-2xl font-bold text-neutral-900 dark:text-white capitalize">
{subscription.plan_id === 'price_1Q...' ? 'Pro' : subscription.plan_id || 'Free'} Plan {subscription.plan_id?.startsWith('price_') ? 'Pro' : (subscription.plan_id === 'free' || !subscription.plan_id ? 'Free' : subscription.plan_id)} Plan
</span> </span>
<span className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${ <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
subscription.subscription_status === 'active' subscription.subscription_status === 'active'
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
: 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300' : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
}`}> }`}>
{subscription.subscription_status} {subscription.subscription_status || 'Free'}
</span> </span>
</div> </div>
</div> </div>
@@ -575,7 +575,7 @@ export default function OrganizationSettings() {
<div> <div>
<div className="text-sm text-neutral-500 mb-1">Billing Interval</div> <div className="text-sm text-neutral-500 mb-1">Billing Interval</div>
<div className="font-medium text-neutral-900 dark:text-white capitalize"> <div className="font-medium text-neutral-900 dark:text-white capitalize">
{subscription.billing_interval}ly {subscription.billing_interval ? `${subscription.billing_interval}ly` : ''}
</div> </div>
</div> </div>
<div> <div>
@@ -587,7 +587,9 @@ export default function OrganizationSettings() {
<div> <div>
<div className="text-sm text-neutral-500 mb-1">Renews On</div> <div className="text-sm text-neutral-500 mb-1">Renews On</div>
<div className="font-medium text-neutral-900 dark:text-white"> <div className="font-medium text-neutral-900 dark:text-white">
{new Date(subscription.current_period_end).toLocaleDateString()} {subscription.current_period_end
? new Date(subscription.current_period_end).toLocaleDateString()
: ''}
</div> </div>
</div> </div>
</div> </div>