include SidebarUsage on free plans + improve PAYOUT_STATUS_DESCRIPTIONS

Author: steven-tey

apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-stats.tsx

@@ -4,6 +4,7 @@ import usePartnerPayoutsCount from "@/lib/swr/use-partner-payouts-count";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { PayoutsCount } from "@/lib/types";
 import { PayoutStatusBadges } from "@/ui/partners/payout-status-badges";
+import { PAYOUT_STATUS_DESCRIPTIONS } from "@/ui/partners/payout-status-descriptions";
 import { AlertCircleFill } from "@/ui/shared/icons";
 import { PayoutStatus } from "@dub/prisma/client";
 import { Tooltip } from "@dub/ui";
@@ -15,30 +16,6 @@ import {
 } from "@dub/utils";
 import { HelpCircle } from "lucide-react";
 
-const tooltips = {
-  stripe: {
-    pending:
-      "Payouts that have passed the program's holding period and are waiting to be processed.",
-    processing:
-      " Payouts that are being processed by the program – this can take up to 5 business days.",
-    processed:
-      "Payouts that have been processed by the program and will be paid out to your connected bank account once they reach your minimum withdrawal balance.",
-    sent: "Payouts that are on their way to your connected bank account – this can take anywhere from 1 to 14 business days depending on your bank location.",
-    completed:
-      "Payouts that have been paid out to your connected bank account.",
-  },
-
-  paypal: {
-    pending:
-      "Payouts that have passed the program's holding period and are waiting to be processed.",
-    processing:
-      "Payouts that have been processed by the program and are on their way to your PayPal account - this can take up to 5 business days.",
-    processed: "",
-    sent: "",
-    completed: "Payouts that have been paid out to your PayPal account",
-  },
-} as const;
-
 function PayoutStatsCard({
   label,
   amount,
@@ -143,7 +120,9 @@ export function PayoutStats() {
     }
   }
 
-  const tooltip = payoutMethod ? tooltips[payoutMethod] : undefined;
+  const tooltip = payoutMethod
+    ? PAYOUT_STATUS_DESCRIPTIONS[payoutMethod]
+    : undefined;
 
   const payoutStats = [
     {

apps/web/ui/layout/sidebar/app-sidebar-nav.tsx

@@ -43,6 +43,7 @@ import { Hyperlink } from "./icons/hyperlink";
 import { LinesY } from "./icons/lines-y";
 import { User } from "./icons/user";
 import { SidebarNav, SidebarNavAreas, SidebarNavGroups } from "./sidebar-nav";
+import { SidebarUsage } from "./usage";
 import { useProgramApplicationsCount } from "./use-program-applications-count";
 import { WorkspaceDropdown } from "./workspace-dropdown";
 
@@ -439,7 +440,7 @@ export function AppSidebarNav({
         showConversionGuides: canTrackConversions && customersCount === 0,
       }}
       toolContent={toolContent}
-      newsContent={newsContent}
+      newsContent={plan && (plan === "free" ? <SidebarUsage /> : newsContent)}
       switcher={<WorkspaceDropdown />}
     />
   );

apps/web/ui/layout/sidebar/news.tsx

@@ -38,7 +38,7 @@ export function News({ articles }: { articles: NewsArticle[] }) {
 
   return cards.length || showCompleted ? (
     <div
-      className="group overflow-hidden border-t border-neutral-200 px-3 pt-6 transition-all duration-200 hover:pt-10"
+      className="group overflow-hidden border-t border-neutral-200 p-3 pt-6 transition-all duration-200 hover:pt-10"
       data-active={cardCount !== 0}
     >
       <div className="relative size-full">

apps/web/ui/layout/sidebar/sidebar-nav-old.tsx

@@ -203,15 +203,17 @@ export function SidebarNav<T extends Record<any, any>>({
               </div>
 
               {/* Fixed bottom sections */}
-              <div className="flex flex-col gap-2 p-3 pt-0">
+              <div className="flex flex-col gap-2">
                 {data.showConversionGuides && (
-                  <Link
-                    href={`/${data.slug}/guides`}
-                    className="flex items-center gap-2 rounded-lg bg-neutral-200/75 px-2.5 py-2 text-xs text-neutral-700 transition-colors hover:bg-neutral-200"
-                  >
-                    <BookOpen className="size-4" />
-                    Set up conversion tracking
-                  </Link>
+                  <div className="px-3 pb-2">
+                    <Link
+                      href={`/${data.slug}/guides`}
+                      className="flex items-center gap-2 rounded-lg bg-neutral-200/75 px-2.5 py-2 text-xs text-neutral-700 transition-colors hover:bg-neutral-200"
+                    >
+                      <BookOpen className="size-4" />
+                      Set up conversion tracking
+                    </Link>
+                  </div>
                 )}
 
                 <AnimatePresence>

apps/web/ui/layout/sidebar/sidebar-nav.tsx

@@ -18,7 +18,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { CSSProperties, forwardRef, useMemo, useState } from "react";
 
-export function Usage() {
+export function SidebarUsage() {
   const { slug } = useParams() as { slug?: string };
 
   return slug ? <UsageInner /> : null;