Refactor payout method handling: replace direct payoutMethod usage with partner's defaultPayoutMethod across payout details and stats components for improved consistency and clarity.

Author: devkiran

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

@@ -46,7 +46,7 @@ type PayoutDetailsSheetProps = {
 };
 
 function PayoutDetailsSheetContent({ payout }: PayoutDetailsSheetProps) {
-  const { partner, payoutMethod } = usePartnerProfile();
+  const { partner } = usePartnerProfile();
 
   const {
     data: earnings,
@@ -143,8 +143,8 @@ function PayoutDetailsSheetContent({ payout }: PayoutDetailsSheetProps) {
               value: (
                 <span className="text-red-600">{payout.failureReason}</span>
               ),
-              tooltip: `Payout failures are usually due to ${payoutMethod === "paypal" ? "incorrect PayPal account configuration" : "invalid bank account details"}. Once you've [updated your account](/payouts?settings=true), ${
-                payoutMethod === "paypal"
+              tooltip: `Payout failures are usually due to ${partner?.defaultPayoutMethod === "paypal" ? "incorrect PayPal account configuration" : "invalid bank account details"}. Once you've [updated your account](/payouts?settings=true), ${
+                partner?.defaultPayoutMethod === "paypal"
                   ? "you can retry the payout"
                   : "the payout will be retried automatically"
               }.`,

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

@@ -112,7 +112,7 @@ function PayoutStatsCard({
 }
 
 export function PayoutStats() {
-  const { payoutMethod } = usePartnerProfile();
+  const { partner } = usePartnerProfile();
 
   const { payoutsCount, error } = usePartnerPayoutsCount<PayoutsCount[]>({
     groupBy: "status",
@@ -122,8 +122,8 @@ export function PayoutStats() {
     payoutsCount?.map((p) => [p.status, p]) || [],
   ) as Record<PayoutStatus, PayoutsCount>;
 
-  const tooltip = payoutMethod
-    ? PAYOUT_STATUS_DESCRIPTIONS[payoutMethod]
+  const tooltip = partner?.defaultPayoutMethod
+    ? PAYOUT_STATUS_DESCRIPTIONS[partner?.defaultPayoutMethod]
     : undefined;
 
   const payoutStats = [
@@ -145,7 +145,7 @@ export function PayoutStats() {
       error: !!error,
     },
 
-    ...(payoutMethod === "stripe"
+    ...(partner?.defaultPayoutMethod === "connect"
       ? [
           {
             label: "Processed",
@@ -266,7 +266,9 @@ export function PayoutStats() {
       <div
         className={cn(
           "hidden divide-x divide-neutral-200 overflow-hidden rounded-lg border border-neutral-200 bg-white md:grid",
-          payoutMethod === "stripe" ? "md:grid-cols-5" : "md:grid-cols-3",
+          partner?.defaultPayoutMethod === "connect"
+            ? "md:grid-cols-5"
+            : "md:grid-cols-3",
         )}
       >
         {payoutStats.map((stat) => (

apps/web/ui/partners/payout-row-menu.tsx

@@ -12,7 +12,7 @@ import { useState } from "react";
 import { toast } from "sonner";
 
 export function PayoutRowMenu({ row }: { row: Row<PartnerPayoutResponse> }) {
-  const { payoutMethod } = usePartnerProfile();
+  const { partner } = usePartnerProfile();
   const [isOpen, setIsOpen] = useState(false);
 
   const { executeAsync: executeRetryPayout, isPending: isRetryPayoutPending } =
@@ -42,7 +42,8 @@ export function PayoutRowMenu({ row }: { row: Row<PartnerPayoutResponse> }) {
   });
 
   const canRetry =
-    row.original.status === "failed" && payoutMethod === "paypal";
+    row.original.status === "failed" &&
+    partner?.defaultPayoutMethod === "paypal";
 
   if (!canRetry) {
     return null;