Skip to content

Commit 5c2a4ba

Browse files
steven-teysteven-tey
committed
upgrade CommissionStatusBadges
1 parent 0d69c01 commit 5c2a4ba

File tree

11 files changed

+180
-104
lines changed

11 files changed

+180
-104
lines changed

‎apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-stats.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
"use client";
22

33
import useSalesCount from "@/lib/swr/use-sales-count";
4+
import { CommissionStatusBadges } from "@/ui/partners/commission-status-badges";
45
import { ProgramStatsFilter } from "@/ui/partners/program-stats-filter";
5-
import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
66
import { useRouterStuff } from "@dub/ui";
77
import { Users } from "@dub/ui/icons";
88
import { useParams, useSearchParams } from "next/navigation";
@@ -51,8 +51,8 @@ export function SaleStats() {
5151
? salesCount?.pending.earnings
5252
: undefined
5353
}
54-
icon={SaleStatusBadges.pending.icon}
55-
iconClassName={SaleStatusBadges.pending.className}
54+
icon={CommissionStatusBadges.pending.icon}
55+
iconClassName={CommissionStatusBadges.pending.className}
5656
variant="loose"
5757
error={!!error}
5858
/>
@@ -72,8 +72,8 @@ export function SaleStats() {
7272
? salesCount?.processed.earnings
7373
: undefined
7474
}
75-
icon={SaleStatusBadges.processed.icon}
76-
iconClassName={SaleStatusBadges.processed.className}
75+
icon={CommissionStatusBadges.processed.icon}
76+
iconClassName={CommissionStatusBadges.processed.className}
7777
variant="loose"
7878
error={!!error}
7979
/>
@@ -93,8 +93,8 @@ export function SaleStats() {
9393
? salesCount?.paid.earnings
9494
: undefined
9595
}
96-
icon={SaleStatusBadges.paid.icon}
97-
iconClassName={SaleStatusBadges.paid.className}
96+
icon={CommissionStatusBadges.paid.icon}
97+
iconClassName={CommissionStatusBadges.paid.className}
9898
variant="loose"
9999
error={!!error}
100100
/>

‎apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-table.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import useSalesCount from "@/lib/swr/use-sales-count";
44
import useWorkspace from "@/lib/swr/use-workspace";
55
import { SaleResponse } from "@/lib/types";
66
import FilterButton from "@/ui/analytics/events/filter-button";
7+
import { CommissionStatusBadges } from "@/ui/partners/commission-status-badges";
78
import { PartnerRowItem } from "@/ui/partners/partner-row-item";
89
import { SaleRowMenu } from "@/ui/partners/sale-row-menu";
9-
import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
1010
import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
1111
import SimpleDateRangePicker from "@/ui/shared/simple-date-range-picker";
1212
import {
@@ -144,7 +144,7 @@ const SaleTableBusinessInner = memo(
144144
{
145145
header: "Status",
146146
cell: ({ row }) => {
147-
const badge = SaleStatusBadges[row.original.status];
147+
const badge = CommissionStatusBadges[row.original.status];
148148

149149
return (
150150
<StatusBadge icon={null} variant={badge.variant}>

‎apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/use-sale-filters.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import useSalesCount from "@/lib/swr/use-sales-count";
66
import { CustomerProps, EnrolledPartnerProps } from "@/lib/types";
77
import { CUSTOMERS_MAX_PAGE_SIZE } from "@/lib/zod/schemas/customers";
88
import { PARTNERS_MAX_PAGE_SIZE } from "@/lib/zod/schemas/partners";
9-
import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
9+
import { CommissionStatusBadges } from "@/ui/partners/commission-status-badges";
1010
import { CircleDotted, useRouterStuff } from "@dub/ui";
1111
import { User, Users } from "@dub/ui/icons";
1212
import { cn, DICEBEAR_AVATAR_URL, nFormatter } from "@dub/utils";
@@ -75,22 +75,26 @@ export function useSaleFilters() {
7575
key: "status",
7676
icon: CircleDotted,
7777
label: "Status",
78-
options: Object.entries(SaleStatusBadges).map(([value, { label }]) => {
79-
const Icon = SaleStatusBadges[value].icon;
80-
return {
81-
value,
82-
label,
83-
icon: (
84-
<Icon
85-
className={cn(
86-
SaleStatusBadges[value].className,
87-
"size-4 bg-transparent",
88-
)}
89-
/>
90-
),
91-
right: nFormatter(salesCount?.[value]?.count || 0, { full: true }),
92-
};
93-
}),
78+
options: Object.entries(CommissionStatusBadges).map(
79+
([value, { label }]) => {
80+
const Icon = CommissionStatusBadges[value].icon;
81+
return {
82+
value,
83+
label,
84+
icon: (
85+
<Icon
86+
className={cn(
87+
CommissionStatusBadges[value].className,
88+
"size-4 bg-transparent",
89+
)}
90+
/>
91+
),
92+
right: nFormatter(salesCount?.[value]?.count || 0, {
93+
full: true,
94+
}),
95+
};
96+
},
97+
),
9498
},
9599
],
96100
[salesCount, partners, customers],

‎apps/web/app/app.dub.co/embed/referrals/earnings.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { SALES_PAGE_SIZE } from "@/lib/partners/constants";
22
import { PartnerEarningsResponse } from "@/lib/types";
3-
import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
3+
import { CommissionStatusBadges } from "@/ui/partners/commission-status-badges";
44
import { Gift, StatusBadge, Table, usePagination, useTable } from "@dub/ui";
55
import {
66
currencyFormatter,
@@ -66,7 +66,7 @@ export function ReferralsEmbedEarnings({ salesCount }: { salesCount: number }) {
6666
{
6767
header: "Status",
6868
cell: ({ row }) => {
69-
const badge = SaleStatusBadges[row.original.status];
69+
const badge = CommissionStatusBadges[row.original.status];
7070

7171
return (
7272
<StatusBadge icon={null} variant={badge.variant}>

‎apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/earnings/earnings-composite-chart.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { usePartnerEarningsTimeseries } from "@/lib/swr/use-partner-earnings-tim
88
import usePartnerLinks from "@/lib/swr/use-partner-links";
99
import { LinkIcon } from "@/ui/links/link-icon";
1010
import { CommissionTypeIcon } from "@/ui/partners/comission-type-icon";
11-
import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
11+
import { CommissionStatusBadges } from "@/ui/partners/commission-status-badges";
1212
import SimpleDateRangePicker from "@/ui/shared/simple-date-range-picker";
1313
import { Filter, LoadingSpinner, ToggleGroup, useRouterStuff } from "@dub/ui";
1414
import { Areas, TimeSeriesChart, XAxis, YAxis } from "@dub/ui/charts";
@@ -317,14 +317,14 @@ function EarningsTableControls() {
317317
icon: CircleDotted,
318318
label: "Status",
319319
options: statuses?.map(({ status, _count }) => {
320-
const Icon = SaleStatusBadges[status].icon;
320+
const Icon = CommissionStatusBadges[status].icon;
321321
return {
322322
value: status,
323-
label: SaleStatusBadges[status].label,
323+
label: CommissionStatusBadges[status].label,
324324
icon: (
325325
<Icon
326326
className={cn(
327-
SaleStatusBadges[status].className,
327+
CommissionStatusBadges[status].className,
328328
"size-4 bg-transparent",
329329
)}
330330
/>

‎apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/earnings/earnings-table.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import usePartnerEarningsCount from "@/lib/swr/use-partner-earnings-count";
44
import useProgramEnrollment from "@/lib/swr/use-program-enrollment";
55
import { PartnerEarningsResponse } from "@/lib/types";
66
import FilterButton from "@/ui/analytics/events/filter-button";
7+
import { CommissionStatusBadges } from "@/ui/partners/commission-status-badges";
78
import { CommissionTypeBadge } from "@/ui/partners/commission-type-badge";
8-
import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
99
import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
1010
import {
1111
CopyText,
@@ -157,10 +157,21 @@ export function EarningsTablePartner({ limit }: { limit?: number }) {
157157
{
158158
header: "Status",
159159
cell: ({ row }) => {
160-
const badge = SaleStatusBadges[row.original.status];
160+
const badge = CommissionStatusBadges[row.original.status];
161161

162162
return (
163-
<StatusBadge icon={null} variant={badge.variant}>
163+
<StatusBadge
164+
icon={null}
165+
variant={badge.variant}
166+
tooltip={badge.tooltip({
167+
holdingPeriodDays:
168+
programEnrollment?.program.holdingPeriodDays ?? 0,
169+
minPayoutAmount:
170+
programEnrollment?.program.minPayoutAmount ?? 10000,
171+
supportEmail:
172+
programEnrollment?.program.supportEmail ?? "support@dub.co",
173+
})}
174+
>
164175
{badge.label}
165176
</StatusBadge>
166177
);

‎apps/web/ui/analytics/bar-list.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,9 @@ export function LineItem({
221221
<Tooltip
222222
content={
223223
<div className="overflow-auto px-4 py-2">
224-
<LinkifyTooltipContent>{title}</LinkifyTooltipContent>
224+
<LinkifyTooltipContent tooltipClassName="max-w-md">
225+
{title}
226+
</LinkifyTooltipContent>
225227
</div>
226228
}
227229
>

‎apps/web/ui/partners/commission-status-badges.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { LinkifyTooltipContent } from "@dub/ui";
2+
import {
3+
CircleCheck,
4+
CircleHalfDottedClock,
5+
CircleXmark,
6+
Duplicate,
7+
ShieldAlert,
8+
} from "@dub/ui/icons";
9+
import { currencyFormatter } from "@dub/utils";
10+
11+
interface CommissionTooltipDataProps {
12+
holdingPeriodDays: number;
13+
minPayoutAmount: number;
14+
supportEmail: string;
15+
}
16+
17+
export const CommissionStatusBadges = {
18+
pending: {
19+
label: "Pending",
20+
variant: "pending",
21+
className: "text-orange-600 bg-orange-100",
22+
icon: CircleHalfDottedClock,
23+
tooltip: (data: CommissionTooltipDataProps) =>
24+
`This commission is pending and will be eligible for payout after the program's ${data.holdingPeriodDays}-day holding period.`,
25+
},
26+
processed: {
27+
label: "Processed",
28+
variant: "new",
29+
className: "text-blue-600 bg-blue-100",
30+
icon: CircleHalfDottedClock,
31+
tooltip: (data: CommissionTooltipDataProps) =>
32+
`This commission has been processed and will be paid out once your payout total reaches the program's minimum payout amount of ${currencyFormatter(data.minPayoutAmount / 100)}.`,
33+
},
34+
paid: {
35+
label: "Paid",
36+
variant: "success",
37+
className: "text-green-600 bg-green-100",
38+
icon: CircleCheck,
39+
tooltip: (_: CommissionTooltipDataProps) => null,
40+
},
41+
fraud: {
42+
label: "Fraud",
43+
variant: "error",
44+
className: "text-red-600 bg-red-100",
45+
icon: ShieldAlert,
46+
tooltip: (data: CommissionTooltipDataProps) => (
47+
<LinkifyTooltipContent>
48+
This commission was flagged as fraudulent. Reach out to{" "}
49+
{data.supportEmail} if you believe this is incorrect.
50+
</LinkifyTooltipContent>
51+
),
52+
},
53+
duplicate: {
54+
label: "Duplicate",
55+
variant: "error",
56+
className: "text-red-600 bg-red-100",
57+
icon: Duplicate,
58+
tooltip: (data: CommissionTooltipDataProps) => (
59+
<LinkifyTooltipContent>
60+
This commission was flagged as duplicate. Reach out to{" "}
61+
{data.supportEmail} if you believe this is incorrect.
62+
</LinkifyTooltipContent>
63+
),
64+
},
65+
refunded: {
66+
label: "Refunded",
67+
variant: "error",
68+
className: "text-red-600 bg-red-100",
69+
icon: CircleXmark,
70+
tooltip: (data: CommissionTooltipDataProps) => (
71+
<LinkifyTooltipContent>
72+
This commission was refunded. Reach out to {data.supportEmail} if you
73+
believe this is incorrect.
74+
</LinkifyTooltipContent>
75+
),
76+
},
77+
canceled: {
78+
label: "Canceled",
79+
variant: "neutral",
80+
className: "text-gray-600 bg-gray-100",
81+
icon: CircleXmark,
82+
tooltip: (data: CommissionTooltipDataProps) => (
83+
<LinkifyTooltipContent>
84+
This commission was canceled. Reach out to {data.supportEmail} if you
85+
believe this is incorrect.
86+
</LinkifyTooltipContent>
87+
),
88+
},
89+
};

‎apps/web/ui/partners/sale-status-badges.tsx‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

0 commit comments

Comments
 (0)