Merge branch 'main' into earnings-calculator

Author: steven-tey

apps/web/app/(ee)/api/cron/payouts/process/process-payouts.ts

@@ -1,6 +1,7 @@
 import { getPayoutEligibilityFilter } from "@/lib/api/payouts/payout-eligibility-filter";
 import { FAST_ACH_FEE_CENTS, FOREX_MARKUP_RATE } from "@/lib/constants/payouts";
 import { qstash } from "@/lib/cron";
+import { calculatePayoutFeeWithWaiver } from "@/lib/partners/calculate-payout-fee-with-waiver";
 import {
   CUTOFF_PERIOD,
   CUTOFF_PERIOD_TYPES,
@@ -41,6 +42,8 @@ interface ProcessPayoutsProps {
     | "payoutsUsage"
     | "payoutsLimit"
     | "payoutFee"
+    | "payoutFeeWaiverLimit"
+    | "payoutFeeWaiverUsage"
     | "webhookEnabled"
   >;
   program: Pick<
@@ -155,9 +158,19 @@ export async function processPayouts({
     `Using payout fee of ${payoutFee} for payment method ${paymentMethod.type}`,
   );
 
-  const fastAchFee =
-    invoice.paymentMethod === "ach_fast" ? FAST_ACH_FEE_CENTS : 0;
-  const invoiceFee = Math.round(totalPayoutAmount * payoutFee) + fastAchFee;
+  const {
+    feeFreeAmount,
+    feeChargedAmount,
+    feeWaiverRemaining,
+    fee: invoiceFee,
+  } = calculatePayoutFeeWithWaiver({
+    payoutAmount: totalPayoutAmount,
+    payoutFee,
+    payoutFeeWaiverLimit: workspace.payoutFeeWaiverLimit,
+    payoutFeeWaiverUsage: workspace.payoutFeeWaiverUsage,
+    fastAchFee: invoice.paymentMethod === "ach_fast" ? FAST_ACH_FEE_CENTS : 0,
+  });
+
   const invoiceTotal = totalPayoutAmount + invoiceFee;
 
   console.log({
@@ -166,6 +179,9 @@ export async function processPayouts({
     totalPayoutAmount,
     invoiceFee,
     invoiceTotal,
+    feeFreeAmount,
+    feeChargedAmount,
+    feeWaiverRemaining,
   });
 
   await prisma.invoice.update({
@@ -244,6 +260,9 @@ export async function processPayouts({
       payoutsUsage: {
         increment: totalPayoutAmount,
       },
+      payoutFeeWaiverUsage: {
+        increment: feeFreeAmount,
+      },
     },
     include: {
       users: {

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/plan-usage.tsx

@@ -38,7 +38,7 @@ import {
 } from "@dub/utils";
 import NumberFlow from "@number-flow/react";
 import Link from "next/link";
-import { CSSProperties, useMemo } from "react";
+import { CSSProperties, ReactNode, useMemo } from "react";
 import { UsageChart } from "./usage-chart";
 
 export default function PlanUsage() {
@@ -55,6 +55,8 @@ export default function PlanUsage() {
     payoutsUsage,
     payoutsLimit,
     payoutFee,
+    payoutFeeWaiverLimit,
+    payoutFeeWaiverUsage,
     domains,
     domainsLimit,
     foldersUsage,
@@ -122,6 +124,33 @@ export default function PlanUsage() {
     return tabs;
   }, [usage, usageLimit, linksUsage, linksLimit, totalLinks]);
 
+  // Display the payout fee in a readable format
+  const payoutFeeDisplay = useMemo((): ReactNode => {
+    if (!plan || payoutFee === undefined) return undefined;
+
+    const hasTieredPricing = payoutFeeWaiverLimit && payoutFeeWaiverLimit > 0;
+    const hasWaiverRemaining =
+      payoutFeeWaiverUsage !== undefined &&
+      payoutFeeWaiverUsage < payoutFeeWaiverLimit!;
+
+    if (hasTieredPricing && hasWaiverRemaining) {
+      const waiverLimitFormatted = nFormatter(payoutFeeWaiverLimit / 100, {
+        full: payoutFeeWaiverLimit < 100000,
+      });
+
+      return (
+        <>
+          <span className="text-neutral-400 line-through">
+            {payoutFee * 100}%
+          </span>{" "}
+          0% for the first ${waiverLimitFormatted}
+        </>
+      );
+    }
+
+    return `${payoutFee * 100}%`;
+  }, [plan, payoutFee, payoutFeeWaiverLimit, payoutFeeWaiverUsage]);
+
   return (
     <div className="rounded-xl border border-neutral-200 bg-white">
       <div className="flex flex-col items-start justify-between gap-y-4 p-6 md:px-8 lg:flex-row">
@@ -231,11 +260,7 @@ export default function PlanUsage() {
           <UsageCategory
             title="Payout fees"
             icon={CirclePercentage}
-            usage={
-              plan && payoutFee !== undefined
-                ? `${payoutFee * 100}%`
-                : undefined
-            }
+            usage={payoutFeeDisplay}
             href="https://dub.co/help/article/partner-payouts#payout-fees-and-timing"
           />
         </div>
@@ -439,7 +464,7 @@ function UsageTabCard({
 function UsageCategory(data: {
   title: string;
   icon: Icon;
-  usage?: number | string;
+  usage?: number | string | ReactNode;
   usageLimit?: number;
   href?: string;
   unit?: string;
@@ -465,9 +490,7 @@ function UsageCategory(data: {
         {usage || usage === 0 ? (
           <p>
             {typeof usage === "number"
-              ? `${unit ?? ""}${nFormatter(usage / (unit === "$" ? 100 : 1), {
-                  full: true,
-                })}`
+              ? `${unit ?? ""}${nFormatter(usage / (unit === "$" ? 100 : 1), { full: true })}`
               : usage}
           </p>
         ) : (

apps/web/lib/actions/partners/confirm-payouts.ts

@@ -168,6 +168,7 @@ export const confirmPayoutsAction = authActionClient
       const mandate = await checkPaymentMethodMandate({
         paymentMethodId,
       });
+
       if (!mandate) {
         // if mandate is not valid, remove the payment method
         await stripe.paymentMethods.detach(paymentMethodId);