usePartners + improve onboarding progress

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-table.tsx

@@ -74,7 +74,6 @@ export function PartnerTable() {
 
   const { partnersCount, error: countError } = usePartnersCount<number>();
 
-  // TODO: Combine with usePartners
   const {
     data: partners,
     error,

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/use-column-visibility.ts

@@ -23,7 +23,6 @@ export const partnersColumns = {
     "sales",
     "saleAmount",
     "commissions",
-    "netRevenue",
   ],
 };
 

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/use-payout-filters.tsx

@@ -151,11 +151,11 @@ function usePartnerFilterOptions(search: string) {
     partnersCount && partnersCount > PARTNERS_MAX_PAGE_SIZE,
   );
 
-  const { data: partners, loading: partnersLoading } = usePartners({
+  const { partners, loading: partnersLoading } = usePartners({
     query: { search: partnersAsync ? search : "" },
   });
 
-  const { data: selectedPartners } = usePartners({
+  const { partners: selectedPartners } = usePartners({
     query: {
       ids: searchParamsObj.partnerId ? [searchParamsObj.partnerId] : undefined,
     },
@@ -176,7 +176,7 @@ function usePartnerFilterOptions(search: string) {
           ...(selectedPartners
             ?.filter((st) => !partners?.some((t) => t.id === st.id))
             ?.map((st) => ({ ...st, hideDuringSearch: true })) ?? []),
-        ] as (EnrolledPartnerProps & { hideDuringSearch?: boolean })[]) ?? null;
+        ] as (EnrolledPartnerProps & { hideDuringSearch?: boolean })[]);
   }, [partnersLoading, partners, selectedPartners, searchParamsObj.partnerId]);
 
   return { partners: result, partnersAsync };

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

@@ -167,11 +167,11 @@ function usePartnerFilterOptions(search: string) {
     partnersCount && partnersCount > PARTNERS_MAX_PAGE_SIZE,
   );
 
-  const { data: partners, loading: partnersLoading } = usePartners({
+  const { partners, loading: partnersLoading } = usePartners({
     query: { search: partnersAsync ? search : "" },
   });
 
-  const { data: selectedPartners } = usePartners({
+  const { partners: selectedPartners } = usePartners({
     query: {
       ids: searchParamsObj.partnerId ? [searchParamsObj.partnerId] : undefined,
     },

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/top-partners.tsx

@@ -1,26 +1,13 @@
-import useWorkspace from "@/lib/swr/use-workspace";
-import { EnrolledPartnerProps } from "@/lib/types";
+import usePartners from "@/lib/swr/use-partners";
 import { buttonVariants } from "@dub/ui";
-import {
-  cn,
-  currencyFormatter,
-  DICEBEAR_AVATAR_URL,
-  fetcher,
-} from "@dub/utils";
+import { cn, currencyFormatter, DICEBEAR_AVATAR_URL } from "@dub/utils";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import useSWR from "swr";
 
 export function TopPartners() {
   const { slug, programId } = useParams();
-  const { id: workspaceId } = useWorkspace();
 
-  const { data: partners, error } = useSWR<EnrolledPartnerProps[]>(
-    `/api/partners?workspaceId=${workspaceId}&programId=${programId}`,
-    fetcher,
-  );
-
-  const isLoading = !partners && !error;
+  const { partners, loading } = usePartners();
 
   return (
     <div className="rounded-md border border-neutral-200">
@@ -41,7 +28,7 @@ export function TopPartners() {
       </div>
       <div className="p-3">
         <div className="h-px min-h-64">
-          {isLoading ? (
+          {loading ? (
             <div className="grid grid-cols-1 gap-1">
               {[...Array(5)].map((_, i) => (
                 <div

apps/web/lib/swr/use-partners.ts

@@ -34,7 +34,7 @@ export default function usePartners(
   );
 
   return {
-    data,
+    partners: data,
     loading: isLoading,
     error,
   };

apps/web/ui/layout/toolbar/onboarding/onboarding-button.tsx

@@ -47,25 +47,30 @@ function OnboardingButtonInner({
         display: "Create a new Dub link",
         cta: `/${slug}`,
         checked: totalLinks === 0 ? false : true,
+        recommended: true,
       },
       {
         display: "Set up your custom domain",
         cta: `/${slug}/settings/domains`,
         checked: domainsCount && domainsCount > 0,
+        recommended: true,
       },
       {
         display: "Invite your teammates",
         cta: `/${slug}/settings/people`,
         checked: (users && users.length > 1) || (invites && invites.length > 0),
+        recommended: false,
       },
     ];
   }, [slug, domainsCount, totalLinks, users, invites]);
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const completedTasks = tasks.filter((task) => task.checked).length;
+  const remainingRecommendedTasks = tasks.filter(
+    (task) => task.recommended && !task.checked,
+  ).length;
 
-  return loading || completedTasks === tasks.length ? null : (
+  return loading || remainingRecommendedTasks === 0 ? null : (
     <Popover
       align="end"
       popoverContentClassName="rounded-xl"
@@ -132,7 +137,8 @@ function OnboardingButtonInner({
       >
         <span>Getting Started</span>
         <span className="text-neutral-400">
-          {Math.round((completedTasks / tasks.length) * 100)}% complete
+          {Math.round((remainingRecommendedTasks / tasks.length) * 100)}%
+          complete
         </span>
       </button>
     </Popover>

apps/web/ui/partners/create-payout-sheet.tsx

@@ -11,14 +11,7 @@ import { Button, Combobox, Sheet, useEnterSubmit } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import { useParams, useRouter } from "next/navigation";
-import {
-  Dispatch,
-  SetStateAction,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { Dispatch, SetStateAction, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -40,9 +33,8 @@ function CreatePayoutSheetContent(props: CreatePayoutSheetProps) {
   const { setIsOpen } = props;
 
   const router = useRouter();
-  const dateRangePickerId = useId();
   const { program } = useProgram();
-  const { data: partners } = usePartners();
+  const { partners } = usePartners();
   const { id: workspaceId } = useWorkspace();
   const { slug, programId } = useParams();
 

apps/web/ui/partners/discount-partners-table.tsx

@@ -28,7 +28,7 @@ export function DiscountPartnersTable({
   >([]);
 
   // Get filtered partners for the combobox
-  const { data: searchPartners } = usePartners({
+  const { partners: searchPartners } = usePartners({
     query: {
       search: debouncedSearch,
     },

apps/web/ui/partners/reward-partners-table.tsx

@@ -28,7 +28,7 @@ export function RewardPartnersTable({
   >([]);
 
   // Get filtered partners for the combobox
-  const { data: searchPartners } = usePartners({
+  const { partners: searchPartners } = usePartners({
     query: {
       search: debouncedSearch,
     },