feat: Refactor PaymentsPage to streamline subscription view rendering

- Introduced a dedicated function to determine which subscription view to display based on the subscription status, improving code readability and maintainability.
- Updated the HomePageNavbar component to standardize quotation marks and enhance layout consistency.
- Modified subscription tier limits to enable custom channel features for all tiers, enhancing user capabilities.

Author: pblvrt

packages/app/app/studio/[organization]/(root)/payments/page.tsx

@@ -6,55 +6,82 @@ import { ActiveSubscriptionView } from './components/ActiveSubscriptionView';
 import { ExpiredSubscriptionView } from './components/ExpiredSubscriptionView';
 
 export default function PaymentsPage() {
-  const { 
-    organization, 
-    organizationId, 
-    subscriptionStatus, 
+  const {
+    organization,
+    organizationId,
+    subscriptionStatus,
     stagesStatus,
     daysLeft,
-    subscriptionTier
+    subscriptionTier,
   } = useOrganizationContext();
 
+  // Determine which view to show based on priority
+  const renderSubscriptionView = () => {
+    // Priority 1: Active subscription - show current status
+    if (subscriptionStatus.isActive) {
+      return (
+        <ActiveSubscriptionView
+          organization={organization}
+          organizationId={organizationId}
+          daysLeft={daysLeft}
+          stagesStatus={stagesStatus}
+        />
+      );
+    }
+
+    // Priority 2: Expired or failed subscription - show expired notice
+    if (subscriptionStatus.hasExpired || subscriptionStatus.isFailed) {
+      return (
+        <ExpiredSubscriptionView
+          organizationId={organizationId}
+          stagesStatus={stagesStatus}
+        />
+      );
+    }
+
+    // Priority 3: Cancelled subscription - show expired notice with cancellation info
+    if (organization.subscriptionStatus === 'canceling') {
+      return (
+        <ExpiredSubscriptionView
+          organizationId={organizationId}
+          stagesStatus={stagesStatus}
+          isCancelled={true}
+          subscriptionEndDate={
+            organization.subscriptionPeriodEnd
+              ? new Date(organization.subscriptionPeriodEnd)
+              : undefined
+          }
+        />
+      );
+    }
+
+    // Priority 4: No subscription or free tier - show pricing tiers
+    if (
+      organization.subscriptionStatus === 'none' ||
+      (organization.subscriptionTier === 'free' &&
+        organization.subscriptionStatus !== 'active')
+    ) {
+      return <NewSubscriptionView organizationId={organizationId} />;
+    }
+
+    // Priority 5: Any other case - show expired notice
+    return (
+      <ExpiredSubscriptionView
+        organizationId={organizationId}
+        stagesStatus={stagesStatus}
+        subscriptionEndDate={
+          organization.subscriptionPeriodEnd
+            ? new Date(organization.subscriptionPeriodEnd)
+            : undefined
+        }
+      />
+    );
+  };
+
   // Wrap all content in a scrollable container
   const content = (
     <div className="h-full w-full overflow-y-auto">
-      <div className="min-h-full w-full">
-        {/* If never had a subscription or has free tier, show pricing tiers */}
-        {(organization.subscriptionStatus === 'none' || 
-          (organization.subscriptionTier === 'free' && organization.subscriptionStatus !== 'active')) && (
-          <NewSubscriptionView organizationId={organizationId} />
-        )}
-
-        {/* If subscription has expired or failed, show expired notice + pricing tiers */}
-        {(subscriptionStatus.hasExpired || subscriptionStatus.isFailed) && (
-          <ExpiredSubscriptionView 
-            organizationId={organizationId}
-            stagesStatus={stagesStatus}
-          />
-        )}
-
-        {/* If subscription is active - show current status + add resources card */}
-        {subscriptionStatus.isActive && (
-          <ActiveSubscriptionView 
-            organization={organization}
-            organizationId={organizationId}
-            daysLeft={daysLeft}
-            stagesStatus={stagesStatus}
-          />
-        )}
-
-        {/* Has had subscription before but not active - show expired notice + pricing tiers */}
-        {!subscriptionStatus.isActive && !subscriptionStatus.hasExpired && !subscriptionStatus.isFailed && 
-         organization.subscriptionStatus !== 'none' && 
-         !(organization.subscriptionTier === 'free' && organization.subscriptionStatus !== 'active') && (
-          <ExpiredSubscriptionView 
-            organizationId={organizationId}
-            stagesStatus={stagesStatus}
-            isCancelled={organization.subscriptionStatus === 'canceling'}
-            subscriptionEndDate={organization.subscriptionPeriodEnd ? new Date(organization.subscriptionPeriodEnd) : undefined}
-          />
-        )}
-      </div>
+      <div className="min-h-full w-full">{renderSubscriptionView()}</div>
     </div>
   );