From 078ca8c31d9db576d7e701b297abcf9e5d151287 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 09:24:44 +0530
Subject: [PATCH 01/18] invoice settings -> payout settings

---
 .../payouts/invoice-settings-button.tsx       | 21 -------
 .../(dashboard)/payouts/page.tsx              |  4 +-
 .../payouts/payout-settings-button.tsx        | 21 +++++++
 ...l.tsx => update-payout-settings-modal.tsx} | 56 +++++++++----------
 4 files changed, 51 insertions(+), 51 deletions(-)
 delete mode 100644 apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/invoice-settings-button.tsx
 create mode 100644 apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-button.tsx
 rename apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/{update-invoice-settings-modal.tsx => update-payout-settings-modal.tsx} (71%)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/invoice-settings-button.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/invoice-settings-button.tsx
deleted file mode 100644
index 08ea4e6f1c7..00000000000
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/invoice-settings-button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import { Button } from "@dub/ui";
-import { useUpdateInvoiceSettingsModal } from "./update-invoice-settings-modal";
-
-export function InvoiceSettingsButton() {
-  const { UpdateInvoiceSettingsModal, setShowUpdateInvoiceSettingsModal } =
-    useUpdateInvoiceSettingsModal();
-
-  return (
-    <>
-      <UpdateInvoiceSettingsModal />
-      <Button
-        type="button"
-        text="Invoice settings"
-        variant="secondary"
-        onClick={() => setShowUpdateInvoiceSettingsModal(true)}
-      />
-    </>
-  );
-}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/page.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/page.tsx
index 1ebfcd5d915..bea03479e67 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/page.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/page.tsx
@@ -1,12 +1,12 @@
 import { PageContent } from "@/ui/layout/page-content";
 import { PageWidthWrapper } from "@/ui/layout/page-width-wrapper";
-import { InvoiceSettingsButton } from "./invoice-settings-button";
+import { PayoutSettingsButton } from "./payout-settings-button";
 import { PayoutStatsAndSettings } from "./payout-stats-and-settings";
 import { PayoutTable } from "./payout-table";
 
 export default function PartnersPayoutsSettings() {
   return (
-    <PageContent title="Payouts" controls={<InvoiceSettingsButton />}>
+    <PageContent title="Payouts" controls={<PayoutSettingsButton />}>
       <PageWidthWrapper className="grid grid-cols-1 gap-4 pb-10">
         <PayoutStatsAndSettings />
         <PayoutTable />
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-button.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-button.tsx
new file mode 100644
index 00000000000..b9651a0fc98
--- /dev/null
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-button.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { Button } from "@dub/ui";
+import { useUpdatePayoutSettingsModal } from "./update-payout-settings-modal";
+
+export function PayoutSettingsButton() {
+  const { UpdatePayoutSettingsModal, setShowUpdatePayoutSettingsModal } =
+    useUpdatePayoutSettingsModal();
+
+  return (
+    <>
+      <UpdatePayoutSettingsModal />
+      <Button
+        type="button"
+        text="Payout settings"
+        variant="secondary"
+        onClick={() => setShowUpdatePayoutSettingsModal(true)}
+      />
+    </>
+  );
+}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-invoice-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-payout-settings-modal.tsx
similarity index 71%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-invoice-settings-modal.tsx
rename to apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-payout-settings-modal.tsx
index ba99481cb16..3e593de8b59 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-invoice-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-payout-settings-modal.tsx
@@ -18,32 +18,32 @@ import TextareaAutosize from "react-textarea-autosize";
 import { toast } from "sonner";
 import { z } from "zod";
 
-type UpdateInvoiceSettingsModalProps = {
-  showUpdateInvoiceSettingsModal: boolean;
-  setShowUpdateInvoiceSettingsModal: Dispatch<SetStateAction<boolean>>;
+type UpdatePayoutSettingsModalProps = {
+  showUpdatePayoutSettingsModal: boolean;
+  setShowUpdatePayoutSettingsModal: Dispatch<SetStateAction<boolean>>;
 };
 
-type UpdateInvoiceSettingsFormData = z.infer<
+type UpdatePayoutSettingsFormData = z.infer<
   typeof partnerInvoiceSettingsSchema
 >;
 
-function UpdateInvoiceSettingsModal(props: UpdateInvoiceSettingsModalProps) {
-  const { showUpdateInvoiceSettingsModal, setShowUpdateInvoiceSettingsModal } =
+function UpdatePayoutSettingsModal(props: UpdatePayoutSettingsModalProps) {
+  const { showUpdatePayoutSettingsModal, setShowUpdatePayoutSettingsModal } =
     props;
 
   return (
     <Modal
-      showModal={showUpdateInvoiceSettingsModal}
-      setShowModal={setShowUpdateInvoiceSettingsModal}
+      showModal={showUpdatePayoutSettingsModal}
+      setShowModal={setShowUpdatePayoutSettingsModal}
     >
-      <UpdateInvoiceSettingsModalInner {...props} />
+      <UpdatePayoutSettingsModalInner {...props} />
     </Modal>
   );
 }
 
-function UpdateInvoiceSettingsModalInner({
-  setShowUpdateInvoiceSettingsModal,
-}: UpdateInvoiceSettingsModalProps) {
+function UpdatePayoutSettingsModalInner({
+  setShowUpdatePayoutSettingsModal,
+}: UpdatePayoutSettingsModalProps) {
   const { partner } = usePartnerProfile();
 
   const {
@@ -51,7 +51,7 @@ function UpdateInvoiceSettingsModalInner({
     handleSubmit,
     watch,
     formState: { isDirty },
-  } = useForm<UpdateInvoiceSettingsFormData>({
+  } = useForm<UpdatePayoutSettingsFormData>({
     defaultValues: {
       companyName: partner?.companyName ?? "",
       address: partner?.invoiceSettings?.address ?? "",
@@ -63,8 +63,8 @@ function UpdateInvoiceSettingsModalInner({
     updatePartnerInvoiceSettingsAction,
     {
       onSuccess: async () => {
-        toast.success("Invoice settings updated successfully!");
-        setShowUpdateInvoiceSettingsModal(false);
+        toast.success("Payout settings updated successfully!");
+        setShowUpdatePayoutSettingsModal(false);
         mutatePrefix("/api/partner-profile");
       },
       onError({ error }) {
@@ -73,7 +73,7 @@ function UpdateInvoiceSettingsModalInner({
     },
   );
 
-  const onSubmit = async (data: UpdateInvoiceSettingsFormData) => {
+  const onSubmit = async (data: UpdatePayoutSettingsFormData) => {
     await executeAsync(data);
   };
 
@@ -84,7 +84,7 @@ function UpdateInvoiceSettingsModalInner({
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="space-y-4 border-b border-neutral-200 p-4 sm:p-6">
-        <h3 className="text-lg font-medium leading-none">Invoice settings</h3>
+        <h3 className="text-lg font-medium leading-none">Payout settings</h3>
         <p className="text-sm font-normal text-neutral-600">
           This information is added to your payout invoices.
         </p>
@@ -137,7 +137,7 @@ function UpdateInvoiceSettingsModalInner({
           text="Cancel"
           disabled={isPending}
           className="h-8 w-fit px-3"
-          onClick={() => setShowUpdateInvoiceSettingsModal(false)}
+          onClick={() => setShowUpdatePayoutSettingsModal(false)}
         />
 
         <Button
@@ -152,24 +152,24 @@ function UpdateInvoiceSettingsModalInner({
   );
 }
 
-export function useUpdateInvoiceSettingsModal() {
-  const [showUpdateInvoiceSettingsModal, setShowUpdateInvoiceSettingsModal] =
+export function useUpdatePayoutSettingsModal() {
+  const [showUpdatePayoutSettingsModal, setShowUpdatePayoutSettingsModal] =
     useState(false);
 
-  const UpdateInvoiceSettingsModalCallback = useCallback(() => {
+  const UpdatePayoutSettingsModalCallback = useCallback(() => {
     return (
-      <UpdateInvoiceSettingsModal
-        showUpdateInvoiceSettingsModal={showUpdateInvoiceSettingsModal}
-        setShowUpdateInvoiceSettingsModal={setShowUpdateInvoiceSettingsModal}
+      <UpdatePayoutSettingsModal
+        showUpdatePayoutSettingsModal={showUpdatePayoutSettingsModal}
+        setShowUpdatePayoutSettingsModal={setShowUpdatePayoutSettingsModal}
       />
     );
-  }, [showUpdateInvoiceSettingsModal, setShowUpdateInvoiceSettingsModal]);
+  }, [showUpdatePayoutSettingsModal, setShowUpdatePayoutSettingsModal]);
 
   return useMemo(
     () => ({
-      setShowUpdateInvoiceSettingsModal,
-      UpdateInvoiceSettingsModal: UpdateInvoiceSettingsModalCallback,
+      setShowUpdatePayoutSettingsModal,
+      UpdatePayoutSettingsModal: UpdatePayoutSettingsModalCallback,
     }),
-    [setShowUpdateInvoiceSettingsModal, UpdateInvoiceSettingsModalCallback],
+    [setShowUpdatePayoutSettingsModal, UpdatePayoutSettingsModalCallback],
   );
 }

From 8d2b9a9c10c0932b6500c01e1900feb45aa2e148 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 09:28:35 +0530
Subject: [PATCH 02/18] simplify the component

---
 .../payouts/payout-settings-button.tsx        | 10 ++--
 ...gs-modal.tsx => payout-settings-modal.tsx} | 52 +++++++++----------
 2 files changed, 31 insertions(+), 31 deletions(-)
 rename apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/{update-payout-settings-modal.tsx => payout-settings-modal.tsx} (74%)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-button.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-button.tsx
index b9651a0fc98..04d151b934d 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-button.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-button.tsx
@@ -1,20 +1,20 @@
 "use client";
 
 import { Button } from "@dub/ui";
-import { useUpdatePayoutSettingsModal } from "./update-payout-settings-modal";
+import { usePayoutSettingsModal } from "./payout-settings-modal";
 
 export function PayoutSettingsButton() {
-  const { UpdatePayoutSettingsModal, setShowUpdatePayoutSettingsModal } =
-    useUpdatePayoutSettingsModal();
+  const { PayoutSettingsModal, setShowPayoutSettingsModal } =
+    usePayoutSettingsModal();
 
   return (
     <>
-      <UpdatePayoutSettingsModal />
+      <PayoutSettingsModal />
       <Button
         type="button"
         text="Payout settings"
         variant="secondary"
-        onClick={() => setShowUpdatePayoutSettingsModal(true)}
+        onClick={() => setShowPayoutSettingsModal(true)}
       />
     </>
   );
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
similarity index 74%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-payout-settings-modal.tsx
rename to apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 3e593de8b59..e1d9961d785 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/update-payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -18,32 +18,32 @@ import TextareaAutosize from "react-textarea-autosize";
 import { toast } from "sonner";
 import { z } from "zod";
 
-type UpdatePayoutSettingsModalProps = {
-  showUpdatePayoutSettingsModal: boolean;
-  setShowUpdatePayoutSettingsModal: Dispatch<SetStateAction<boolean>>;
+type PayoutSettingsModalProps = {
+  showPayoutSettingsModal: boolean;
+  setShowPayoutSettingsModal: Dispatch<SetStateAction<boolean>>;
 };
 
-type UpdatePayoutSettingsFormData = z.infer<
+type PayoutSettingsFormData = z.infer<
   typeof partnerInvoiceSettingsSchema
 >;
 
-function UpdatePayoutSettingsModal(props: UpdatePayoutSettingsModalProps) {
-  const { showUpdatePayoutSettingsModal, setShowUpdatePayoutSettingsModal } =
+function PayoutSettingsModal(props: PayoutSettingsModalProps) {
+  const { showPayoutSettingsModal, setShowPayoutSettingsModal } =
     props;
 
   return (
     <Modal
-      showModal={showUpdatePayoutSettingsModal}
-      setShowModal={setShowUpdatePayoutSettingsModal}
+      showModal={showPayoutSettingsModal}
+      setShowModal={setShowPayoutSettingsModal}
     >
-      <UpdatePayoutSettingsModalInner {...props} />
+      <PayoutSettingsModalInner {...props} />
     </Modal>
   );
 }
 
-function UpdatePayoutSettingsModalInner({
-  setShowUpdatePayoutSettingsModal,
-}: UpdatePayoutSettingsModalProps) {
+function PayoutSettingsModalInner({
+  setShowPayoutSettingsModal,
+}: PayoutSettingsModalProps) {
   const { partner } = usePartnerProfile();
 
   const {
@@ -51,7 +51,7 @@ function UpdatePayoutSettingsModalInner({
     handleSubmit,
     watch,
     formState: { isDirty },
-  } = useForm<UpdatePayoutSettingsFormData>({
+  } = useForm<PayoutSettingsFormData>({
     defaultValues: {
       companyName: partner?.companyName ?? "",
       address: partner?.invoiceSettings?.address ?? "",
@@ -64,7 +64,7 @@ function UpdatePayoutSettingsModalInner({
     {
       onSuccess: async () => {
         toast.success("Payout settings updated successfully!");
-        setShowUpdatePayoutSettingsModal(false);
+        setShowPayoutSettingsModal(false);
         mutatePrefix("/api/partner-profile");
       },
       onError({ error }) {
@@ -73,7 +73,7 @@ function UpdatePayoutSettingsModalInner({
     },
   );
 
-  const onSubmit = async (data: UpdatePayoutSettingsFormData) => {
+  const onSubmit = async (data: PayoutSettingsFormData) => {
     await executeAsync(data);
   };
 
@@ -137,7 +137,7 @@ function UpdatePayoutSettingsModalInner({
           text="Cancel"
           disabled={isPending}
           className="h-8 w-fit px-3"
-          onClick={() => setShowUpdatePayoutSettingsModal(false)}
+          onClick={() => setShowPayoutSettingsModal(false)}
         />
 
         <Button
@@ -152,24 +152,24 @@ function UpdatePayoutSettingsModalInner({
   );
 }
 
-export function useUpdatePayoutSettingsModal() {
-  const [showUpdatePayoutSettingsModal, setShowUpdatePayoutSettingsModal] =
+export function usePayoutSettingsModal() {
+  const [showPayoutSettingsModal, setShowPayoutSettingsModal] =
     useState(false);
 
-  const UpdatePayoutSettingsModalCallback = useCallback(() => {
+  const PayoutSettingsModalCallback = useCallback(() => {
     return (
-      <UpdatePayoutSettingsModal
-        showUpdatePayoutSettingsModal={showUpdatePayoutSettingsModal}
-        setShowUpdatePayoutSettingsModal={setShowUpdatePayoutSettingsModal}
+      <PayoutSettingsModal
+        showPayoutSettingsModal={showPayoutSettingsModal}
+        setShowPayoutSettingsModal={setShowPayoutSettingsModal}
       />
     );
-  }, [showUpdatePayoutSettingsModal, setShowUpdatePayoutSettingsModal]);
+  }, [showPayoutSettingsModal, setShowPayoutSettingsModal]);
 
   return useMemo(
     () => ({
-      setShowUpdatePayoutSettingsModal,
-      UpdatePayoutSettingsModal: UpdatePayoutSettingsModalCallback,
+      setShowPayoutSettingsModal,
+      PayoutSettingsModal: PayoutSettingsModalCallback,
     }),
-    [setShowUpdatePayoutSettingsModal, UpdatePayoutSettingsModalCallback],
+    [setShowPayoutSettingsModal, PayoutSettingsModalCallback],
   );
 }

From daf5f005058989cc4e6198fd2b517bc63eb1a7df Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 09:29:48 +0530
Subject: [PATCH 03/18] remove description

---
 .../(dashboard)/payouts/payout-settings-modal.tsx   | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index e1d9961d785..7f197bd3ef9 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -23,13 +23,10 @@ type PayoutSettingsModalProps = {
   setShowPayoutSettingsModal: Dispatch<SetStateAction<boolean>>;
 };
 
-type PayoutSettingsFormData = z.infer<
-  typeof partnerInvoiceSettingsSchema
->;
+type PayoutSettingsFormData = z.infer<typeof partnerInvoiceSettingsSchema>;
 
 function PayoutSettingsModal(props: PayoutSettingsModalProps) {
-  const { showPayoutSettingsModal, setShowPayoutSettingsModal } =
-    props;
+  const { showPayoutSettingsModal, setShowPayoutSettingsModal } = props;
 
   return (
     <Modal
@@ -85,9 +82,6 @@ function PayoutSettingsModalInner({
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="space-y-4 border-b border-neutral-200 p-4 sm:p-6">
         <h3 className="text-lg font-medium leading-none">Payout settings</h3>
-        <p className="text-sm font-normal text-neutral-600">
-          This information is added to your payout invoices.
-        </p>
       </div>
 
       <div className="flex flex-col gap-2 bg-neutral-50 p-4 sm:p-6">
@@ -153,8 +147,7 @@ function PayoutSettingsModalInner({
 }
 
 export function usePayoutSettingsModal() {
-  const [showPayoutSettingsModal, setShowPayoutSettingsModal] =
-    useState(false);
+  const [showPayoutSettingsModal, setShowPayoutSettingsModal] = useState(false);
 
   const PayoutSettingsModalCallback = useCallback(() => {
     return (

From b1f0099cfc04cd9d581b5e1aba6de2c268c5629d Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 09:30:52 +0530
Subject: [PATCH 04/18] install @radix-ui/react-slider

---
 apps/web/package.json |   1 +
 pnpm-lock.yaml        | 217 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 218 insertions(+)

diff --git a/apps/web/package.json b/apps/web/package.json
index eb770817e8b..98cbed3f2ce 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -35,6 +35,7 @@
     "@prisma/client": "5.18.0",
     "@prisma/nextjs-monorepo-workaround-plugin": "^6.0.1",
     "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-slider": "^1.3.5",
     "@react-pdf/renderer": "^4.1.5",
     "@sindresorhus/slugify": "^2.2.1",
     "@stripe/stripe-js": "^7.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ac48b499ce9..614d3818868 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,6 +94,9 @@ importers:
       '@radix-ui/react-hover-card':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slider':
+        specifier: ^1.3.5
+        version: 1.3.5(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-pdf/renderer':
         specifier: ^4.1.5
         version: 4.1.5(react@18.2.0)
@@ -2694,6 +2697,9 @@ packages:
   '@radix-ui/colors@1.0.1':
     resolution: {integrity: sha512-xySw8f0ZVsAEP+e7iLl3EvcBXX7gsIlC1Zso/sPBW9gIWerBTgz6axrjU+MZ39wD+WFi5h5zdWpsg3+hwt2Qsg==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.0.1':
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
 
@@ -2703,6 +2709,9 @@ packages:
   '@radix-ui/primitive@1.1.1':
     resolution: {integrity: sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==}
 
+  '@radix-ui/primitive@1.1.2':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+
   '@radix-ui/react-accordion@1.2.2':
     resolution: {integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==}
     peerDependencies:
@@ -2820,6 +2829,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.0.1':
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
@@ -2883,6 +2905,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dialog@1.0.5':
     resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
     peerDependencies:
@@ -2905,6 +2936,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.0.5':
     resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
     peerDependencies:
@@ -3205,6 +3245,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-radio-group@1.2.2':
     resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
     peerDependencies:
@@ -3244,6 +3297,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-slider@1.3.5':
+    resolution: {integrity: sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.0.2':
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -3280,6 +3346,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-switch@1.1.2':
     resolution: {integrity: sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==}
     peerDependencies:
@@ -3381,6 +3456,24 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-escape-keydown@1.0.3':
     resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
     peerDependencies:
@@ -3417,6 +3510,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-previous@1.1.0':
     resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
     peerDependencies:
@@ -3426,6 +3528,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.0.1':
     resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
     peerDependencies:
@@ -3462,6 +3573,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-visually-hidden@1.1.0':
     resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
     peerDependencies:
@@ -12539,6 +12659,8 @@ snapshots:
 
   '@radix-ui/colors@1.0.1': {}
 
+  '@radix-ui/number@1.1.1': {}
+
   '@radix-ui/primitive@1.0.1':
     dependencies:
       '@babel/runtime': 7.23.9
@@ -12547,6 +12669,8 @@ snapshots:
 
   '@radix-ui/primitive@1.1.1': {}
 
+  '@radix-ui/primitive@1.1.2': {}
+
   '@radix-ui/react-accordion@1.2.2(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -12683,6 +12807,18 @@ snapshots:
       '@types/react': 18.2.48
       '@types/react-dom': 18.2.14
 
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.14
+
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.47)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.9
@@ -12753,6 +12889,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.48
 
+  '@radix-ui/react-context@1.1.2(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
+
   '@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.1
@@ -12788,6 +12930,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.48
 
+  '@radix-ui/react-direction@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
+
   '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.9
@@ -13269,6 +13417,15 @@ snapshots:
       '@types/react': 18.2.48
       '@types/react-dom': 18.2.14
 
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.14
+
   '@radix-ui/react-radio-group@1.2.2(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -13321,6 +13478,25 @@ snapshots:
       '@types/react': 18.2.48
       '@types/react-dom': 18.2.14
 
+  '@radix-ui/react-slider@1.3.5(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.14
+
   '@radix-ui/react-slot@1.0.2(@types/react@18.2.47)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.9
@@ -13365,6 +13541,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.48
 
+  '@radix-ui/react-slot@1.2.3(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
+
   '@radix-ui/react-switch@1.1.2(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -13502,6 +13685,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.48
 
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
+
   '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.47)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.9
@@ -13558,12 +13756,24 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.48
 
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
+
   '@radix-ui/react-use-previous@1.1.0(@types/react@18.2.48)(react@18.2.0)':
     dependencies:
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.48
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
+
   '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.47)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.9
@@ -13624,6 +13834,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.48
 
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
+
   '@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.2.14)(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.14)(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

From 51727dfed783cbf43f6c800c89e6634582a59923 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 10:06:23 +0530
Subject: [PATCH 05/18] add Slider

---
 .../payouts/payout-settings-modal.tsx         | 151 +++++++++++++++++-
 ...s.ts => update-partner-payout-settings.ts} |  14 +-
 apps/web/lib/partners/constants.ts            |   2 +
 apps/web/lib/zod/schemas/partners.ts          |  18 ++-
 4 files changed, 167 insertions(+), 18 deletions(-)
 rename apps/web/lib/actions/partners/{update-partner-invoice-settings.ts => update-partner-payout-settings.ts} (59%)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 7f197bd3ef9..6a1ca6033c2 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -1,10 +1,13 @@
 "use client";
 
-import { updatePartnerInvoiceSettingsAction } from "@/lib/actions/partners/update-partner-invoice-settings";
+import { updatePartnerPayoutSettingsAction } from "@/lib/actions/partners/update-partner-payout-settings";
+import { MINIMUM_WITHDRAWAL_AMOUNTS } from "@/lib/partners/constants";
 import { mutatePrefix } from "@/lib/swr/mutate";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
-import { partnerInvoiceSettingsSchema } from "@/lib/zod/schemas/partners";
+import { partnerPayoutSettingsSchema } from "@/lib/zod/schemas/partners";
 import { Button, Modal } from "@dub/ui";
+import { cn } from "@dub/utils";
+import * as RadixSlider from "@radix-ui/react-slider";
 import { useAction } from "next-safe-action/hooks";
 import {
   Dispatch,
@@ -23,7 +26,7 @@ type PayoutSettingsModalProps = {
   setShowPayoutSettingsModal: Dispatch<SetStateAction<boolean>>;
 };
 
-type PayoutSettingsFormData = z.infer<typeof partnerInvoiceSettingsSchema>;
+type PayoutSettingsFormData = z.infer<typeof partnerPayoutSettingsSchema>;
 
 function PayoutSettingsModal(props: PayoutSettingsModalProps) {
   const { showPayoutSettingsModal, setShowPayoutSettingsModal } = props;
@@ -47,17 +50,19 @@ function PayoutSettingsModalInner({
     register,
     handleSubmit,
     watch,
+    setValue,
     formState: { isDirty },
   } = useForm<PayoutSettingsFormData>({
     defaultValues: {
-      companyName: partner?.companyName ?? "",
-      address: partner?.invoiceSettings?.address ?? "",
-      taxId: partner?.invoiceSettings?.taxId ?? "",
+      companyName: partner?.companyName || undefined,
+      address: partner?.invoiceSettings?.address || undefined,
+      taxId: partner?.invoiceSettings?.taxId || undefined,
+      minWithdrawalAmount: partner?.minWithdrawalAmount,
     },
   });
 
   const { executeAsync, isPending } = useAction(
-    updatePartnerInvoiceSettingsAction,
+    updatePartnerPayoutSettingsAction,
     {
       onSuccess: async () => {
         toast.success("Payout settings updated successfully!");
@@ -78,14 +83,54 @@ function PayoutSettingsModalInner({
     return !watch("companyName") || !isDirty;
   }, [watch, isDirty]);
 
+  const currentMinWithdrawalAmount = watch("minWithdrawalAmount");
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="space-y-4 border-b border-neutral-200 p-4 sm:p-6">
         <h3 className="text-lg font-medium leading-none">Payout settings</h3>
       </div>
 
+      {/*  Minimum withdrawal amount */}
+      <div className="space-y-6 bg-neutral-50 p-4 sm:p-6">
+        <div>
+          <h4 className="text-base font-semibold leading-6 text-neutral-900">
+            Minimum withdrawal amount
+          </h4>
+          <p className="text-sm font-medium leading-5 text-neutral-500">
+            Set the minimum amount for funds to be withdrawn from Dub into your
+            connected payout account.
+          </p>
+        </div>
+
+        <div>
+          <Slider
+            value={currentMinWithdrawalAmount}
+            onChange={(value) =>
+              setValue("minWithdrawalAmount", value, { shouldDirty: true })
+            }
+            min={MINIMUM_WITHDRAWAL_AMOUNTS[0]}
+            max={
+              MINIMUM_WITHDRAWAL_AMOUNTS[MINIMUM_WITHDRAWAL_AMOUNTS.length - 1]
+            }
+            marks={MINIMUM_WITHDRAWAL_AMOUNTS}
+            formatValue={(value) => `$${(value / 100).toFixed(0)} USD`}
+            hint="$2 payout fee for payouts under $100"
+          />
+        </div>
+      </div>
+
+      {/* Invoice details */}
       <div className="flex flex-col gap-2 bg-neutral-50 p-4 sm:p-6">
         <div className="space-y-4">
+          <div>
+            <h4 className="text-base font-semibold leading-6 text-neutral-900">
+              Invoice details (optional)
+            </h4>
+            <p className="text-sm font-medium leading-5 text-neutral-500">
+              This information is added to your payout invoices.
+            </p>
+          </div>
           <div>
             <label className="text-sm font-medium leading-5 text-neutral-900">
               Business name
@@ -166,3 +211,95 @@ export function usePayoutSettingsModal() {
     [setShowPayoutSettingsModal, PayoutSettingsModalCallback],
   );
 }
+
+// Generic, reusable slider component
+export type SliderProps = {
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  marks?: number[];
+  formatValue?: (value: number) => React.ReactNode;
+  className?: string;
+  hint?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export function Slider({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  marks,
+  formatValue,
+  className,
+  hint,
+  disabled,
+}: SliderProps) {
+  // Calculate percent for thumb/track
+  const percent = ((value - min) / (max - min)) * 100;
+  // Default marks: 4 evenly spaced
+  const sliderMarks = marks || [
+    min,
+    min + (max - min) / 3,
+    min + (2 * (max - min)) / 3,
+    max,
+  ];
+
+  return (
+    <div className={cn("w-full", className)}>
+      {/* Value label */}
+      <div className="mb-2 text-3xl font-semibold text-neutral-900">
+        {formatValue ? formatValue(value) : value}
+      </div>
+      {/* Slider */}
+      <RadixSlider.Root
+        className="relative flex h-6 w-full items-center"
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={([v]) => onChange(v)}
+        disabled={disabled}
+        aria-label="Slider"
+      >
+        {/* Track */}
+        <RadixSlider.Track className="relative h-3 w-full rounded-full bg-neutral-200">
+          {/* Active range */}
+          <RadixSlider.Range className="absolute h-3 rounded-full bg-neutral-900" />
+          {/* Marks/dots */}
+          {sliderMarks.map((mark, i) => {
+            const left = ((mark - min) / (max - min)) * 100;
+            return (
+              <span
+                key={mark}
+                className={cn(
+                  "absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border",
+                  left === percent
+                    ? "border-neutral-900 bg-white shadow"
+                    : "border-none bg-neutral-200",
+                  "transition-all duration-200",
+                )}
+                style={{ left: `calc(${left}% - 0.75rem)` }}
+              >
+                {/* Inner dot for active mark */}
+                {left === percent && (
+                  <span className="block h-4 w-4 rounded-full bg-neutral-900" />
+                )}
+              </span>
+            );
+          })}
+        </RadixSlider.Track>
+        {/* Thumb */}
+        <RadixSlider.Thumb
+          className="absolute left-0 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full border-2 border-neutral-900 bg-white shadow focus:outline-none focus:ring-2 focus:ring-neutral-400"
+          style={{ left: `calc(${percent}% - 0.75rem)` }}
+        />
+      </RadixSlider.Root>
+      {/* Hint/description */}
+      {hint && <div className="mt-2 text-xs text-neutral-500">{hint}</div>}
+    </div>
+  );
+}
diff --git a/apps/web/lib/actions/partners/update-partner-invoice-settings.ts b/apps/web/lib/actions/partners/update-partner-payout-settings.ts
similarity index 59%
rename from apps/web/lib/actions/partners/update-partner-invoice-settings.ts
rename to apps/web/lib/actions/partners/update-partner-payout-settings.ts
index b3ce5b738b7..8f17e4883fa 100644
--- a/apps/web/lib/actions/partners/update-partner-invoice-settings.ts
+++ b/apps/web/lib/actions/partners/update-partner-payout-settings.ts
@@ -1,19 +1,16 @@
 "use server";
 
-import { partnerInvoiceSettingsSchema } from "@/lib/zod/schemas/partners";
 import { prisma } from "@dub/prisma";
 import { Prisma } from "@prisma/client";
+import { partnerPayoutSettingsSchema } from "../../zod/schemas/partners";
 import { authPartnerActionClient } from "../safe-action";
 
-// TODO
-// See if we can combine this with the updatePartnerProfileAction
-
-// Update a partner invoice settings
-export const updatePartnerInvoiceSettingsAction = authPartnerActionClient
-  .schema(partnerInvoiceSettingsSchema)
+// Update a partner payout & invoice settings
+export const updatePartnerPayoutSettingsAction = authPartnerActionClient
+  .schema(partnerPayoutSettingsSchema)
   .action(async ({ ctx, parsedInput }) => {
     const { partner } = ctx;
-    const { companyName, address, taxId } = parsedInput;
+    const { companyName, address, taxId, minWithdrawalAmount } = parsedInput;
 
     const invoiceSettings = {
       address: address || undefined,
@@ -27,6 +24,7 @@ export const updatePartnerInvoiceSettingsAction = authPartnerActionClient
       data: {
         companyName,
         invoiceSettings,
+        minWithdrawalAmount,
       },
     });
   });
diff --git a/apps/web/lib/partners/constants.ts b/apps/web/lib/partners/constants.ts
index 11550a3c2fe..3578b4695d5 100644
--- a/apps/web/lib/partners/constants.ts
+++ b/apps/web/lib/partners/constants.ts
@@ -76,3 +76,5 @@ export const PROGRAM_IMPORT_SOURCES = [
     helpUrl: "https://dub.co/help/article/migrating-from-tolt",
   },
 ] as const;
+
+export const MINIMUM_WITHDRAWAL_AMOUNTS = [1000, 2500, 5000, 7500, 10000];
diff --git a/apps/web/lib/zod/schemas/partners.ts b/apps/web/lib/zod/schemas/partners.ts
index 72ba58a0fcc..3dc49654e8d 100644
--- a/apps/web/lib/zod/schemas/partners.ts
+++ b/apps/web/lib/zod/schemas/partners.ts
@@ -1,3 +1,4 @@
+import { MINIMUM_WITHDRAWAL_AMOUNTS } from "@/lib/partners/constants";
 import {
   PartnerBannedReason,
   PartnerProfileType,
@@ -207,6 +208,9 @@ export const PartnerSchema = z
       })
       .nullable()
       .describe("The partner's invoice settings."),
+    minWithdrawalAmount: z
+      .number()
+      .describe("The minimum withdrawal amount in cents."),
     createdAt: z
       .date()
       .describe("The date when the partner was created on Dub."),
@@ -230,6 +234,7 @@ export const EnrolledPartnerSchema = PartnerSchema.pick({
   paypalEmail: true,
   stripeConnectId: true,
   payoutsEnabledAt: true,
+  minWithdrawalAmount: true,
   createdAt: true,
 })
   .merge(
@@ -576,8 +581,15 @@ export const archivePartnerSchema = z.object({
   partnerId: z.string(),
 });
 
-export const partnerInvoiceSettingsSchema = z.object({
+export const partnerPayoutSettingsSchema = z.object({
   companyName: z.string().max(190).trim().min(1, "Business name is required."),
-  address: z.string().max(500).trim().nullable(),
-  taxId: z.string().max(100).trim().nullable(),
+  address: z.string().max(500).trim().nullish(),
+  taxId: z.string().max(100).trim().nullish(),
+  minWithdrawalAmount: z.coerce
+    .number()
+    .min(0, "Minimum withdrawal amount must be greater than 0.")
+    .default(10000)
+    .refine((val) => MINIMUM_WITHDRAWAL_AMOUNTS.includes(val), {
+      message: `Minimum withdrawal amount must be one of ${MINIMUM_WITHDRAWAL_AMOUNTS.join(", ")}`,
+    }),
 });

From a145a46f743f852c4c2ed18dea09de03e7ec2981 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 10:32:39 +0530
Subject: [PATCH 06/18] refactor: reintroduce @radix-ui/react-slider and update
 Slider component with enhanced functionality

---
 .../payouts/payout-settings-modal.tsx         | 40 ++++----
 apps/web/package.json                         |  1 -
 packages/ui/package.json                      |  1 +
 packages/ui/src/slider.tsx                    | 91 +++++++++++++++++++
 pnpm-lock.yaml                                |  6 +-
 5 files changed, 119 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui/src/slider.tsx

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 6a1ca6033c2..9463c4b774a 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -1,12 +1,16 @@
 "use client";
 
 import { updatePartnerPayoutSettingsAction } from "@/lib/actions/partners/update-partner-payout-settings";
-import { MINIMUM_WITHDRAWAL_AMOUNTS } from "@/lib/partners/constants";
+import {
+  BELOW_MIN_WITHDRAWAL_FEE_CENTS,
+  MIN_WITHDRAWAL_AMOUNT_CENTS,
+  MINIMUM_WITHDRAWAL_AMOUNTS,
+} from "@/lib/partners/constants";
 import { mutatePrefix } from "@/lib/swr/mutate";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { partnerPayoutSettingsSchema } from "@/lib/zod/schemas/partners";
 import { Button, Modal } from "@dub/ui";
-import { cn } from "@dub/utils";
+import { cn, currencyFormatter } from "@dub/utils";
 import * as RadixSlider from "@radix-ui/react-slider";
 import { useAction } from "next-safe-action/hooks";
 import {
@@ -106,16 +110,25 @@ function PayoutSettingsModalInner({
         <div>
           <Slider
             value={currentMinWithdrawalAmount}
-            onChange={(value) =>
-              setValue("minWithdrawalAmount", value, { shouldDirty: true })
-            }
+            onChange={(value) => {
+              const closest = MINIMUM_WITHDRAWAL_AMOUNTS.reduce((prev, curr) =>
+                Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev,
+              );
+
+              setValue("minWithdrawalAmount", closest, { shouldDirty: true });
+            }}
             min={MINIMUM_WITHDRAWAL_AMOUNTS[0]}
             max={
               MINIMUM_WITHDRAWAL_AMOUNTS[MINIMUM_WITHDRAWAL_AMOUNTS.length - 1]
             }
             marks={MINIMUM_WITHDRAWAL_AMOUNTS}
             formatValue={(value) => `$${(value / 100).toFixed(0)} USD`}
-            hint="$2 payout fee for payouts under $100"
+            hint={
+              currentMinWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS
+                ? `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
+                : undefined
+            }
+            disabled={false}
           />
         </div>
       </div>
@@ -238,9 +251,8 @@ export function Slider({
   hint,
   disabled,
 }: SliderProps) {
-  // Calculate percent for thumb/track
   const percent = ((value - min) / (max - min)) * 100;
-  // Default marks: 4 evenly spaced
+
   const sliderMarks = marks || [
     min,
     min + (max - min) / 3,
@@ -250,11 +262,10 @@ export function Slider({
 
   return (
     <div className={cn("w-full", className)}>
-      {/* Value label */}
       <div className="mb-2 text-3xl font-semibold text-neutral-900">
         {formatValue ? formatValue(value) : value}
       </div>
-      {/* Slider */}
+
       <RadixSlider.Root
         className="relative flex h-6 w-full items-center"
         value={[value]}
@@ -265,11 +276,9 @@ export function Slider({
         disabled={disabled}
         aria-label="Slider"
       >
-        {/* Track */}
         <RadixSlider.Track className="relative h-3 w-full rounded-full bg-neutral-200">
-          {/* Active range */}
           <RadixSlider.Range className="absolute h-3 rounded-full bg-neutral-900" />
-          {/* Marks/dots */}
+
           {sliderMarks.map((mark, i) => {
             const left = ((mark - min) / (max - min)) * 100;
             return (
@@ -284,7 +293,6 @@ export function Slider({
                 )}
                 style={{ left: `calc(${left}% - 0.75rem)` }}
               >
-                {/* Inner dot for active mark */}
                 {left === percent && (
                   <span className="block h-4 w-4 rounded-full bg-neutral-900" />
                 )}
@@ -292,13 +300,13 @@ export function Slider({
             );
           })}
         </RadixSlider.Track>
-        {/* Thumb */}
+
         <RadixSlider.Thumb
           className="absolute left-0 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full border-2 border-neutral-900 bg-white shadow focus:outline-none focus:ring-2 focus:ring-neutral-400"
           style={{ left: `calc(${percent}% - 0.75rem)` }}
         />
       </RadixSlider.Root>
-      {/* Hint/description */}
+
       {hint && <div className="mt-2 text-xs text-neutral-500">{hint}</div>}
     </div>
   );
diff --git a/apps/web/package.json b/apps/web/package.json
index 98cbed3f2ce..eb770817e8b 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -35,7 +35,6 @@
     "@prisma/client": "5.18.0",
     "@prisma/nextjs-monorepo-workaround-plugin": "^6.0.1",
     "@radix-ui/react-hover-card": "^1.1.1",
-    "@radix-ui/react-slider": "^1.3.5",
     "@react-pdf/renderer": "^4.1.5",
     "@sindresorhus/slugify": "^2.2.1",
     "@stripe/stripe-js": "^7.3.1",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 99ec7276df5..81f0b6dd3fc 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -64,6 +64,7 @@
     "@radix-ui/react-popover": "1.1.4",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-slider": "^1.3.5",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/react-visually-hidden": "^1.1.1",
diff --git a/packages/ui/src/slider.tsx b/packages/ui/src/slider.tsx
new file mode 100644
index 00000000000..fbbf43332b8
--- /dev/null
+++ b/packages/ui/src/slider.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { cn } from "@dub/utils";
+import * as RadixSlider from "@radix-ui/react-slider";
+import { ReactNode } from "react";
+
+export type SliderProps = {
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  marks?: number[];
+  formatValue?: (value: number) => ReactNode;
+  className?: string;
+  hint?: ReactNode;
+  disabled?: boolean;
+};
+
+export function Slider({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  marks,
+  formatValue,
+  className,
+  hint,
+  disabled,
+}: SliderProps) {
+  const percent = ((value - min) / (max - min)) * 100;
+
+  const sliderMarks = marks || [
+    min,
+    min + (max - min) / 3,
+    min + (2 * (max - min)) / 3,
+    max,
+  ];
+
+  return (
+    <div className={cn("w-full", className)}>
+      <div className="mb-2 text-3xl font-semibold text-neutral-900">
+        {formatValue ? formatValue(value) : value}
+      </div>
+
+      <RadixSlider.Root
+        className="relative flex h-6 w-full items-center"
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={([v]: number[]) => onChange(v)}
+        disabled={disabled}
+        aria-label="Slider"
+      >
+        <RadixSlider.Track className="relative h-3 w-full rounded-full bg-neutral-200">
+          <RadixSlider.Range className="absolute h-3 rounded-full bg-neutral-900" />
+
+          {sliderMarks.map((mark, i) => {
+            const left = ((mark - min) / (max - min)) * 100;
+            return (
+              <span
+                key={mark}
+                className={cn(
+                  "absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border",
+                  left === percent
+                    ? "border-neutral-900 bg-white shadow"
+                    : "border-none bg-neutral-200",
+                  "transition-all duration-200",
+                )}
+                style={{ left: `calc(${left}% - 0.75rem)` }}
+              >
+                {left === percent && (
+                  <span className="block h-4 w-4 rounded-full bg-neutral-900" />
+                )}
+              </span>
+            );
+          })}
+        </RadixSlider.Track>
+
+        <RadixSlider.Thumb
+          className="absolute left-0 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full border-2 border-neutral-900 bg-white shadow focus:outline-none focus:ring-2 focus:ring-neutral-400"
+          style={{ left: `calc(${percent}% - 0.75rem)` }}
+        />
+      </RadixSlider.Root>
+
+      {hint && <div className="mt-2 text-xs text-neutral-500">{hint}</div>}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 614d3818868..b34734df32d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,9 +94,6 @@ importers:
       '@radix-ui/react-hover-card':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slider':
-        specifier: ^1.3.5
-        version: 1.3.5(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-pdf/renderer':
         specifier: ^4.1.5
         version: 4.1.5(react@18.2.0)
@@ -686,6 +683,9 @@ importers:
       '@radix-ui/react-radio-group':
         specifier: ^1.2.2
         version: 1.2.2(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slider':
+        specifier: ^1.3.5
+        version: 1.3.5(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot':
         specifier: 1.1.1
         version: 1.1.1(@types/react@18.2.48)(react@18.2.0)

From 93cba93693874cb2450b48f2286d55b0c56cfdd2 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 11:21:22 +0530
Subject: [PATCH 07/18] move Slider to UI

---
 .../payouts/payout-settings-modal.tsx         | 112 ++----------------
 packages/ui/src/index.tsx                     |   1 +
 packages/ui/src/slider.tsx                    |  88 +++++++-------
 3 files changed, 54 insertions(+), 147 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 9463c4b774a..6067f1a928c 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -9,9 +9,8 @@ import {
 import { mutatePrefix } from "@/lib/swr/mutate";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { partnerPayoutSettingsSchema } from "@/lib/zod/schemas/partners";
-import { Button, Modal } from "@dub/ui";
-import { cn, currencyFormatter } from "@dub/utils";
-import * as RadixSlider from "@radix-ui/react-slider";
+import { Button, Modal, Slider } from "@dub/ui";
+import { currencyFormatter } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import {
   Dispatch,
@@ -87,7 +86,7 @@ function PayoutSettingsModalInner({
     return !watch("companyName") || !isDirty;
   }, [watch, isDirty]);
 
-  const currentMinWithdrawalAmount = watch("minWithdrawalAmount");
+  const minWithdrawalAmount = watch("minWithdrawalAmount");
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -108,8 +107,16 @@ function PayoutSettingsModalInner({
         </div>
 
         <div>
+          <div className="mb-2 text-2xl font-medium leading-6 text-neutral-800">
+            {currencyFormatter(minWithdrawalAmount / 100)} USD
+          </div>
+
           <Slider
-            value={currentMinWithdrawalAmount}
+            value={minWithdrawalAmount}
+            min={MINIMUM_WITHDRAWAL_AMOUNTS[0]}
+            max={
+              MINIMUM_WITHDRAWAL_AMOUNTS[MINIMUM_WITHDRAWAL_AMOUNTS.length - 1]
+            }
             onChange={(value) => {
               const closest = MINIMUM_WITHDRAWAL_AMOUNTS.reduce((prev, curr) =>
                 Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev,
@@ -117,18 +124,12 @@ function PayoutSettingsModalInner({
 
               setValue("minWithdrawalAmount", closest, { shouldDirty: true });
             }}
-            min={MINIMUM_WITHDRAWAL_AMOUNTS[0]}
-            max={
-              MINIMUM_WITHDRAWAL_AMOUNTS[MINIMUM_WITHDRAWAL_AMOUNTS.length - 1]
-            }
             marks={MINIMUM_WITHDRAWAL_AMOUNTS}
-            formatValue={(value) => `$${(value / 100).toFixed(0)} USD`}
             hint={
-              currentMinWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS
+              minWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS
                 ? `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
                 : undefined
             }
-            disabled={false}
           />
         </div>
       </div>
@@ -224,90 +225,3 @@ export function usePayoutSettingsModal() {
     [setShowPayoutSettingsModal, PayoutSettingsModalCallback],
   );
 }
-
-// Generic, reusable slider component
-export type SliderProps = {
-  value: number;
-  onChange: (value: number) => void;
-  min: number;
-  max: number;
-  step?: number;
-  marks?: number[];
-  formatValue?: (value: number) => React.ReactNode;
-  className?: string;
-  hint?: React.ReactNode;
-  disabled?: boolean;
-};
-
-export function Slider({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  marks,
-  formatValue,
-  className,
-  hint,
-  disabled,
-}: SliderProps) {
-  const percent = ((value - min) / (max - min)) * 100;
-
-  const sliderMarks = marks || [
-    min,
-    min + (max - min) / 3,
-    min + (2 * (max - min)) / 3,
-    max,
-  ];
-
-  return (
-    <div className={cn("w-full", className)}>
-      <div className="mb-2 text-3xl font-semibold text-neutral-900">
-        {formatValue ? formatValue(value) : value}
-      </div>
-
-      <RadixSlider.Root
-        className="relative flex h-6 w-full items-center"
-        value={[value]}
-        min={min}
-        max={max}
-        step={step}
-        onValueChange={([v]) => onChange(v)}
-        disabled={disabled}
-        aria-label="Slider"
-      >
-        <RadixSlider.Track className="relative h-3 w-full rounded-full bg-neutral-200">
-          <RadixSlider.Range className="absolute h-3 rounded-full bg-neutral-900" />
-
-          {sliderMarks.map((mark, i) => {
-            const left = ((mark - min) / (max - min)) * 100;
-            return (
-              <span
-                key={mark}
-                className={cn(
-                  "absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border",
-                  left === percent
-                    ? "border-neutral-900 bg-white shadow"
-                    : "border-none bg-neutral-200",
-                  "transition-all duration-200",
-                )}
-                style={{ left: `calc(${left}% - 0.75rem)` }}
-              >
-                {left === percent && (
-                  <span className="block h-4 w-4 rounded-full bg-neutral-900" />
-                )}
-              </span>
-            );
-          })}
-        </RadixSlider.Track>
-
-        <RadixSlider.Thumb
-          className="absolute left-0 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full border-2 border-neutral-900 bg-white shadow focus:outline-none focus:ring-2 focus:ring-neutral-400"
-          style={{ left: `calc(${percent}% - 0.75rem)` }}
-        />
-      </RadixSlider.Root>
-
-      {hint && <div className="mt-2 text-xs text-neutral-500">{hint}</div>}
-    </div>
-  );
-}
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 20ff890127e..a142ca1feca 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -30,6 +30,7 @@ export * from "./popover";
 export * from "./radio-group";
 export * from "./sheet";
 export * from "./shimmer-dots";
+export * from "./slider";
 export * from "./smart-datetime-picker";
 export * from "./status-badge";
 export * from "./switch";
diff --git a/packages/ui/src/slider.tsx b/packages/ui/src/slider.tsx
index fbbf43332b8..ef45a712c07 100644
--- a/packages/ui/src/slider.tsx
+++ b/packages/ui/src/slider.tsx
@@ -4,18 +4,17 @@ import { cn } from "@dub/utils";
 import * as RadixSlider from "@radix-ui/react-slider";
 import { ReactNode } from "react";
 
-export type SliderProps = {
+interface SliderProps {
   value: number;
   onChange: (value: number) => void;
   min: number;
   max: number;
   step?: number;
   marks?: number[];
-  formatValue?: (value: number) => ReactNode;
   className?: string;
   hint?: ReactNode;
   disabled?: boolean;
-};
+}
 
 export function Slider({
   value,
@@ -24,7 +23,6 @@ export function Slider({
   max,
   step = 1,
   marks,
-  formatValue,
   className,
   hint,
   disabled,
@@ -39,53 +37,47 @@ export function Slider({
   ];
 
   return (
-    <div className={cn("w-full", className)}>
-      <div className="mb-2 text-3xl font-semibold text-neutral-900">
-        {formatValue ? formatValue(value) : value}
-      </div>
+    <div className={cn(className)}>
+      <div className="w-full">
+        <RadixSlider.Root
+          className="relative flex h-8 w-full items-center"
+          value={[value]}
+          min={min}
+          max={max}
+          step={step}
+          onValueChange={([v]: number[]) => onChange(v)}
+          disabled={disabled}
+          aria-label="Slider"
+        >
+          <RadixSlider.Track className="relative h-4 w-full overflow-visible rounded-full bg-neutral-200">
+            <RadixSlider.Range className="absolute h-4 rounded-full bg-black" />
 
-      <RadixSlider.Root
-        className="relative flex h-6 w-full items-center"
-        value={[value]}
-        min={min}
-        max={max}
-        step={step}
-        onValueChange={([v]: number[]) => onChange(v)}
-        disabled={disabled}
-        aria-label="Slider"
-      >
-        <RadixSlider.Track className="relative h-3 w-full rounded-full bg-neutral-200">
-          <RadixSlider.Range className="absolute h-3 rounded-full bg-neutral-900" />
+            {sliderMarks.map((mark) => {
+              const left = ((mark - min) / (max - min)) * 100;
+              const isFilled = mark <= value;
 
-          {sliderMarks.map((mark, i) => {
-            const left = ((mark - min) / (max - min)) * 100;
-            return (
-              <span
-                key={mark}
-                className={cn(
-                  "absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border",
-                  left === percent
-                    ? "border-neutral-900 bg-white shadow"
-                    : "border-none bg-neutral-200",
-                  "transition-all duration-200",
-                )}
-                style={{ left: `calc(${left}% - 0.75rem)` }}
-              >
-                {left === percent && (
-                  <span className="block h-4 w-4 rounded-full bg-neutral-900" />
-                )}
-              </span>
-            );
-          })}
-        </RadixSlider.Track>
+              return (
+                <span
+                  key={mark}
+                  className={cn(
+                    "absolute top-1/2 z-10 size-2 -translate-y-1/2 rounded-full border transition-all duration-200",
+                    isFilled
+                      ? "border-black bg-white"
+                      : "border-neutral-300 bg-neutral-100",
+                  )}
+                  style={{ left: `calc(${left}% - 0.5rem)` }}
+                />
+              );
+            })}
+          </RadixSlider.Track>
 
-        <RadixSlider.Thumb
-          className="absolute left-0 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full border-2 border-neutral-900 bg-white shadow focus:outline-none focus:ring-2 focus:ring-neutral-400"
-          style={{ left: `calc(${percent}% - 0.75rem)` }}
-        />
-      </RadixSlider.Root>
+          <RadixSlider.Thumb className="z-20 flex h-[26px] w-[26px] items-center justify-center rounded-full border-0 bg-white shadow-[0_2px_2px_rgba(0,0,0,0.10),0_3px_3px_rgba(0,0,0,0.09)]">
+            <span className="block h-[16px] w-[16px] rounded-full bg-[#171717]" />
+          </RadixSlider.Thumb>
+        </RadixSlider.Root>
 
-      {hint && <div className="mt-2 text-xs text-neutral-500">{hint}</div>}
+        {hint && <div className="mt-2 text-xs text-neutral-500">{hint}</div>}
+      </div>
     </div>
   );
-} 
\ No newline at end of file
+}

From a26bfb71ad2acff7078832ca8b43deac4921074c Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 11:36:35 +0530
Subject: [PATCH 08/18] fix slider

---
 .../(dashboard)/payouts/payout-settings-modal.tsx           | 6 ++----
 packages/ui/src/slider.tsx                                  | 4 +++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 6067f1a928c..56a6d410d26 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -95,7 +95,7 @@ function PayoutSettingsModalInner({
       </div>
 
       {/*  Minimum withdrawal amount */}
-      <div className="space-y-6 bg-neutral-50 p-4 sm:p-6">
+      <div className="space-y-10 bg-neutral-50 p-4 sm:p-6">
         <div>
           <h4 className="text-base font-semibold leading-6 text-neutral-900">
             Minimum withdrawal amount
@@ -132,10 +132,8 @@ function PayoutSettingsModalInner({
             }
           />
         </div>
-      </div>
 
-      {/* Invoice details */}
-      <div className="flex flex-col gap-2 bg-neutral-50 p-4 sm:p-6">
+        {/* Invoice details */}
         <div className="space-y-4">
           <div>
             <h4 className="text-base font-semibold leading-6 text-neutral-900">
diff --git a/packages/ui/src/slider.tsx b/packages/ui/src/slider.tsx
index ef45a712c07..8aed034643e 100644
--- a/packages/ui/src/slider.tsx
+++ b/packages/ui/src/slider.tsx
@@ -76,7 +76,9 @@ export function Slider({
           </RadixSlider.Thumb>
         </RadixSlider.Root>
 
-        {hint && <div className="mt-2 text-xs text-neutral-500">{hint}</div>}
+        <div className="mt-2 text-xs text-neutral-500 min-h-[1rem]">
+          {hint}
+        </div>
       </div>
     </div>
   );

From c45ec5167446a5d836784724bd0bd08bf664bd73 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 11:38:32 +0530
Subject: [PATCH 09/18] Update partners.ts

---
 apps/web/lib/zod/schemas/partners.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/lib/zod/schemas/partners.ts b/apps/web/lib/zod/schemas/partners.ts
index 3dc49654e8d..e757cf1a876 100644
--- a/apps/web/lib/zod/schemas/partners.ts
+++ b/apps/web/lib/zod/schemas/partners.ts
@@ -587,7 +587,7 @@ export const partnerPayoutSettingsSchema = z.object({
   taxId: z.string().max(100).trim().nullish(),
   minWithdrawalAmount: z.coerce
     .number()
-    .min(0, "Minimum withdrawal amount must be greater than 0.")
+    .min(1000, "Minimum withdrawal amount must be greater than $10.")
     .default(10000)
     .refine((val) => MINIMUM_WITHDRAWAL_AMOUNTS.includes(val), {
       message: `Minimum withdrawal amount must be one of ${MINIMUM_WITHDRAWAL_AMOUNTS.join(", ")}`,

From 17e64183d991914a16f062fb6680b04af85c147c Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 11:40:44 +0530
Subject: [PATCH 10/18] Update payout-settings-modal.tsx

---
 .../payouts/payout-settings-modal.tsx         | 75 ++++++++++---------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 56a6d410d26..f23dbe2450f 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -96,45 +96,52 @@ function PayoutSettingsModalInner({
 
       {/*  Minimum withdrawal amount */}
       <div className="space-y-10 bg-neutral-50 p-4 sm:p-6">
-        <div>
-          <h4 className="text-base font-semibold leading-6 text-neutral-900">
-            Minimum withdrawal amount
-          </h4>
-          <p className="text-sm font-medium leading-5 text-neutral-500">
-            Set the minimum amount for funds to be withdrawn from Dub into your
-            connected payout account.
-          </p>
-        </div>
-
-        <div>
-          <div className="mb-2 text-2xl font-medium leading-6 text-neutral-800">
-            {currencyFormatter(minWithdrawalAmount / 100)} USD
+        <div className="space-y-6">
+          <div>
+            <h4 className="text-base font-semibold leading-6 text-neutral-900">
+              Minimum withdrawal amount
+            </h4>
+            <p className="text-sm font-medium leading-5 text-neutral-500">
+              Set the minimum amount for funds to be withdrawn from Dub into
+              your connected payout account.
+            </p>
           </div>
 
-          <Slider
-            value={minWithdrawalAmount}
-            min={MINIMUM_WITHDRAWAL_AMOUNTS[0]}
-            max={
-              MINIMUM_WITHDRAWAL_AMOUNTS[MINIMUM_WITHDRAWAL_AMOUNTS.length - 1]
-            }
-            onChange={(value) => {
-              const closest = MINIMUM_WITHDRAWAL_AMOUNTS.reduce((prev, curr) =>
-                Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev,
-              );
-
-              setValue("minWithdrawalAmount", closest, { shouldDirty: true });
-            }}
-            marks={MINIMUM_WITHDRAWAL_AMOUNTS}
-            hint={
-              minWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS
-                ? `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
-                : undefined
-            }
-          />
+          <div>
+            <div className="mb-2 text-2xl font-medium leading-6 text-neutral-800">
+              {currencyFormatter(minWithdrawalAmount / 100)} USD
+            </div>
+
+            <Slider
+              value={minWithdrawalAmount}
+              min={MINIMUM_WITHDRAWAL_AMOUNTS[0]}
+              max={
+                MINIMUM_WITHDRAWAL_AMOUNTS[
+                  MINIMUM_WITHDRAWAL_AMOUNTS.length - 1
+                ]
+              }
+              onChange={(value) => {
+                const closest = MINIMUM_WITHDRAWAL_AMOUNTS.reduce(
+                  (prev, curr) =>
+                    Math.abs(curr - value) < Math.abs(prev - value)
+                      ? curr
+                      : prev,
+                );
+
+                setValue("minWithdrawalAmount", closest, { shouldDirty: true });
+              }}
+              marks={MINIMUM_WITHDRAWAL_AMOUNTS}
+              hint={
+                minWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS
+                  ? `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
+                  : undefined
+              }
+            />
+          </div>
         </div>
 
         {/* Invoice details */}
-        <div className="space-y-4">
+        <div className="space-y-6">
           <div>
             <h4 className="text-base font-semibold leading-6 text-neutral-900">
               Invoice details (optional)

From 997c354617c9973f6bffd25da93ccf7b5cf2f993 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 11:58:07 +0530
Subject: [PATCH 11/18] Refactor payout settings to use allowed minimum amounts
 and update related schemas

---
 .../payouts/payout-settings-modal.tsx         | 12 +++---
 .../payouts/program-payout-settings-modal.tsx | 38 +++++++------------
 .../lib/actions/partners/update-program.ts    |  2 -
 apps/web/lib/partners/constants.ts            |  5 ++-
 apps/web/lib/zod/schemas/partners.ts          |  6 +--
 apps/web/lib/zod/schemas/programs.ts          |  9 +++--
 6 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index f23dbe2450f..dbe3167bb8f 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -4,7 +4,7 @@ import { updatePartnerPayoutSettingsAction } from "@/lib/actions/partners/update
 import {
   BELOW_MIN_WITHDRAWAL_FEE_CENTS,
   MIN_WITHDRAWAL_AMOUNT_CENTS,
-  MINIMUM_WITHDRAWAL_AMOUNTS,
+  ALLOWED_MIN_WITHDRAWAL_AMOUNTS,
 } from "@/lib/partners/constants";
 import { mutatePrefix } from "@/lib/swr/mutate";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
@@ -114,14 +114,14 @@ function PayoutSettingsModalInner({
 
             <Slider
               value={minWithdrawalAmount}
-              min={MINIMUM_WITHDRAWAL_AMOUNTS[0]}
+              min={ALLOWED_MIN_WITHDRAWAL_AMOUNTS[0]}
               max={
-                MINIMUM_WITHDRAWAL_AMOUNTS[
-                  MINIMUM_WITHDRAWAL_AMOUNTS.length - 1
+                ALLOWED_MIN_WITHDRAWAL_AMOUNTS[
+                  ALLOWED_MIN_WITHDRAWAL_AMOUNTS.length - 1
                 ]
               }
               onChange={(value) => {
-                const closest = MINIMUM_WITHDRAWAL_AMOUNTS.reduce(
+                const closest = ALLOWED_MIN_WITHDRAWAL_AMOUNTS.reduce(
                   (prev, curr) =>
                     Math.abs(curr - value) < Math.abs(prev - value)
                       ? curr
@@ -130,7 +130,7 @@ function PayoutSettingsModalInner({
 
                 setValue("minWithdrawalAmount", closest, { shouldDirty: true });
               }}
-              marks={MINIMUM_WITHDRAWAL_AMOUNTS}
+              marks={ALLOWED_MIN_WITHDRAWAL_AMOUNTS}
               hint={
                 minWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS
                   ? `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/program-payout-settings-modal.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/program-payout-settings-modal.tsx
index 9be934b3fc6..c31921e4e17 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/program-payout-settings-modal.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/program-payout-settings-modal.tsx
@@ -2,14 +2,14 @@
 
 import { parseActionError } from "@/lib/actions/parse-action-errors";
 import { updateProgramAction } from "@/lib/actions/partners/update-program";
-import { handleMoneyInputChange, handleMoneyKeyDown } from "@/lib/form-utils";
+import { ALLOWED_MIN_PAYOUT_AMOUNTS } from "@/lib/partners/constants";
 import { mutatePrefix } from "@/lib/swr/mutate";
 import useProgram from "@/lib/swr/use-program";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { ProgramProps } from "@/lib/types";
 import { HOLDING_PERIOD_DAYS } from "@/lib/zod/schemas/programs";
 import { Button, Modal } from "@dub/ui";
-import { cn } from "@dub/utils";
+import { currencyFormatter } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import {
   Dispatch,
@@ -53,7 +53,7 @@ function ProgramPayoutSettingsModalInner({
     register,
     handleSubmit,
     setValue,
-    formState: { isDirty, isValid, isSubmitting, errors },
+    formState: { isDirty, isValid, isSubmitting },
   } = useForm<FormData>({
     mode: "onBlur",
   });
@@ -61,7 +61,7 @@ function ProgramPayoutSettingsModalInner({
   useEffect(() => {
     if (program) {
       setValue("holdingPeriodDays", program.holdingPeriodDays);
-      setValue("minPayoutAmount", program.minPayoutAmount / 100);
+      setValue("minPayoutAmount", program.minPayoutAmount);
     }
   }, [program, setValue]);
 
@@ -118,26 +118,16 @@ function ProgramPayoutSettingsModalInner({
               Minimum payout amount
             </label>
             <div className="relative mt-2 rounded-md shadow-sm">
-              <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-neutral-400">
-                $
-              </span>
-
-              <input
-                className={cn(
-                  "block w-full rounded-md border-neutral-300 pl-6 pr-12 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm",
-                  errors.minPayoutAmount &&
-                    "border-red-600 pr-7 focus:border-red-500 focus:ring-red-600",
-                )}
-                {...register("minPayoutAmount", {
-                  valueAsNumber: true,
-                  onChange: handleMoneyInputChange,
-                })}
-                onKeyDown={handleMoneyKeyDown}
-              />
-
-              <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-neutral-400">
-                USD
-              </span>
+              <select
+                className="block w-full rounded-md border border-neutral-300 bg-white py-2 pl-3 pr-10 text-sm text-neutral-900 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
+                {...register("minPayoutAmount", { required: true })}
+              >
+                {ALLOWED_MIN_PAYOUT_AMOUNTS.map((amount) => (
+                  <option value={amount} key={amount}>
+                    {currencyFormatter(amount / 100)} USD
+                  </option>
+                ))}
+              </select>
             </div>
           </div>
         </div>
diff --git a/apps/web/lib/actions/partners/update-program.ts b/apps/web/lib/actions/partners/update-program.ts
index 33118e3a9d2..f4422663b4e 100644
--- a/apps/web/lib/actions/partners/update-program.ts
+++ b/apps/web/lib/actions/partners/update-program.ts
@@ -45,8 +45,6 @@ export const updateProgramAction = authActionClient
       defaultFolderId,
     } = parsedInput;
 
-    console.log({ minPayoutAmount });
-
     const programId = getDefaultProgramIdOrThrow(workspace);
     const program = await getProgramOrThrow({
       workspaceId: workspace.id,
diff --git a/apps/web/lib/partners/constants.ts b/apps/web/lib/partners/constants.ts
index 3578b4695d5..a3e60e06726 100644
--- a/apps/web/lib/partners/constants.ts
+++ b/apps/web/lib/partners/constants.ts
@@ -9,6 +9,9 @@ export const FOREX_MARKUP_RATE = 0.005; // 0.5%
 export const MIN_WITHDRAWAL_AMOUNT_CENTS = 10000; // $100
 export const BELOW_MIN_WITHDRAWAL_FEE_CENTS = 200; // $2
 
+export const ALLOWED_MIN_WITHDRAWAL_AMOUNTS = [1000, 2500, 5000, 7500, 10000];
+export const ALLOWED_MIN_PAYOUT_AMOUNTS = [0, 2000, 5000, 10000, 20000];
+
 // Direct debit payment types for Partner payout
 export const DIRECT_DEBIT_PAYMENT_TYPES_INFO: {
   type: Stripe.PaymentMethod.Type;
@@ -76,5 +79,3 @@ export const PROGRAM_IMPORT_SOURCES = [
     helpUrl: "https://dub.co/help/article/migrating-from-tolt",
   },
 ] as const;
-
-export const MINIMUM_WITHDRAWAL_AMOUNTS = [1000, 2500, 5000, 7500, 10000];
diff --git a/apps/web/lib/zod/schemas/partners.ts b/apps/web/lib/zod/schemas/partners.ts
index e757cf1a876..b696449e73f 100644
--- a/apps/web/lib/zod/schemas/partners.ts
+++ b/apps/web/lib/zod/schemas/partners.ts
@@ -1,4 +1,4 @@
-import { MINIMUM_WITHDRAWAL_AMOUNTS } from "@/lib/partners/constants";
+import { ALLOWED_MIN_WITHDRAWAL_AMOUNTS } from "@/lib/partners/constants";
 import {
   PartnerBannedReason,
   PartnerProfileType,
@@ -589,7 +589,7 @@ export const partnerPayoutSettingsSchema = z.object({
     .number()
     .min(1000, "Minimum withdrawal amount must be greater than $10.")
     .default(10000)
-    .refine((val) => MINIMUM_WITHDRAWAL_AMOUNTS.includes(val), {
-      message: `Minimum withdrawal amount must be one of ${MINIMUM_WITHDRAWAL_AMOUNTS.join(", ")}`,
+    .refine((val) => ALLOWED_MIN_WITHDRAWAL_AMOUNTS.includes(val), {
+      message: `Minimum withdrawal amount must be one of ${ALLOWED_MIN_WITHDRAWAL_AMOUNTS.join(", ")}`,
     }),
 });
diff --git a/apps/web/lib/zod/schemas/programs.ts b/apps/web/lib/zod/schemas/programs.ts
index 5785823c5dc..2294891f54c 100644
--- a/apps/web/lib/zod/schemas/programs.ts
+++ b/apps/web/lib/zod/schemas/programs.ts
@@ -2,7 +2,9 @@ import {
   DATE_RANGE_INTERVAL_PRESETS,
   DUB_PARTNERS_ANALYTICS_INTERVAL,
 } from "@/lib/analytics/constants";
+import { ALLOWED_MIN_PAYOUT_AMOUNTS } from "@/lib/partners/constants";
 import { LinkStructure, ProgramEnrollmentStatus } from "@dub/prisma/client";
+import { currencyFormatter } from "@dub/utils";
 import { z } from "zod";
 import { DiscountSchema } from "./discount";
 import { LinkSchema } from "./links";
@@ -57,9 +59,10 @@ export const updateProgramSchema = z.object({
     }),
   minPayoutAmount: z.coerce
     .number()
-    .nonnegative()
-    .nullish()
-    .transform((val) => (val ? val * 100 : 0)),
+    .refine((val) => ALLOWED_MIN_PAYOUT_AMOUNTS.includes(val), {
+      message: `Minimum payout amount must be one of ${ALLOWED_MIN_PAYOUT_AMOUNTS.map((amount) => currencyFormatter(amount / 100)).join(", ")}`,
+    })
+    .transform((val) => val * 100),
   linkStructure: z.nativeEnum(LinkStructure),
   supportEmail: z.string().email().max(255).nullish(),
   helpUrl: z.string().url().max(500).nullish(),

From cdd1f1943fd2462ee8b7866d0a76776cab0150a3 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 11:58:18 +0530
Subject: [PATCH 12/18] Update partners.ts

---
 apps/web/lib/zod/schemas/partners.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/lib/zod/schemas/partners.ts b/apps/web/lib/zod/schemas/partners.ts
index b696449e73f..895fdb83309 100644
--- a/apps/web/lib/zod/schemas/partners.ts
+++ b/apps/web/lib/zod/schemas/partners.ts
@@ -5,7 +5,7 @@ import {
   PartnerStatus,
   ProgramEnrollmentStatus,
 } from "@dub/prisma/client";
-import { COUNTRY_CODES } from "@dub/utils";
+import { COUNTRY_CODES, currencyFormatter } from "@dub/utils";
 import { z } from "zod";
 import { analyticsQuerySchema } from "./analytics";
 import { analyticsResponse } from "./analytics-response";
@@ -590,6 +590,6 @@ export const partnerPayoutSettingsSchema = z.object({
     .min(1000, "Minimum withdrawal amount must be greater than $10.")
     .default(10000)
     .refine((val) => ALLOWED_MIN_WITHDRAWAL_AMOUNTS.includes(val), {
-      message: `Minimum withdrawal amount must be one of ${ALLOWED_MIN_WITHDRAWAL_AMOUNTS.join(", ")}`,
+      message: `Minimum withdrawal amount must be one of ${ALLOWED_MIN_WITHDRAWAL_AMOUNTS.map((amount) => currencyFormatter(amount / 100)).join(", ")}`,
     }),
 });

From 4be527d2ebf99c9823f1589e2c62ad4bd5cd8ec6 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 12:12:22 +0530
Subject: [PATCH 13/18] Update partners.ts

---
 apps/web/lib/zod/schemas/partners.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/lib/zod/schemas/partners.ts b/apps/web/lib/zod/schemas/partners.ts
index 895fdb83309..0d8ae9e17c9 100644
--- a/apps/web/lib/zod/schemas/partners.ts
+++ b/apps/web/lib/zod/schemas/partners.ts
@@ -234,7 +234,6 @@ export const EnrolledPartnerSchema = PartnerSchema.pick({
   paypalEmail: true,
   stripeConnectId: true,
   payoutsEnabledAt: true,
-  minWithdrawalAmount: true,
   createdAt: true,
 })
   .merge(

From 2ad8b2fc9a43a8adb5bc67ff17914650db3678d6 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 13:22:46 +0530
Subject: [PATCH 14/18] Update payout-settings-modal.tsx

---
 .../(dashboard)/payouts/payout-settings-modal.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index dbe3167bb8f..a943a4100ad 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -2,14 +2,14 @@
 
 import { updatePartnerPayoutSettingsAction } from "@/lib/actions/partners/update-partner-payout-settings";
 import {
+  ALLOWED_MIN_WITHDRAWAL_AMOUNTS,
   BELOW_MIN_WITHDRAWAL_FEE_CENTS,
   MIN_WITHDRAWAL_AMOUNT_CENTS,
-  ALLOWED_MIN_WITHDRAWAL_AMOUNTS,
 } from "@/lib/partners/constants";
 import { mutatePrefix } from "@/lib/swr/mutate";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { partnerPayoutSettingsSchema } from "@/lib/zod/schemas/partners";
-import { Button, Modal, Slider } from "@dub/ui";
+import { Button, Modal, Slider, Sparkle3 } from "@dub/ui";
 import { currencyFormatter } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import {
@@ -132,9 +132,14 @@ function PayoutSettingsModalInner({
               }}
               marks={ALLOWED_MIN_WITHDRAWAL_AMOUNTS}
               hint={
-                minWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS
-                  ? `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
-                  : undefined
+                minWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS ? (
+                  `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
+                ) : (
+                  <div className="flex items-center gap-1 text-xs font-normal leading-4 text-neutral-500">
+                    <Sparkle3 className="size-4" />
+                    Free payouts unlocked
+                  </div>
+                )
               }
             />
           </div>

From ea7644a03a71d5a07b60824d8d303e1cd427d1ad Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 13:25:25 +0530
Subject: [PATCH 15/18] Update payout-settings-modal.tsx

---
 .../(dashboard)/payouts/payout-settings-modal.tsx            | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index a943a4100ad..818013901f3 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -9,8 +9,9 @@ import {
 import { mutatePrefix } from "@/lib/swr/mutate";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { partnerPayoutSettingsSchema } from "@/lib/zod/schemas/partners";
-import { Button, Modal, Slider, Sparkle3 } from "@dub/ui";
+import { Button, Modal, Slider } from "@dub/ui";
 import { currencyFormatter } from "@dub/utils";
+import { PartyPopper } from "lucide-react";
 import { useAction } from "next-safe-action/hooks";
 import {
   Dispatch,
@@ -136,7 +137,7 @@ function PayoutSettingsModalInner({
                   `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
                 ) : (
                   <div className="flex items-center gap-1 text-xs font-normal leading-4 text-neutral-500">
-                    <Sparkle3 className="size-4" />
+                    <PartyPopper className="size-4" />
                     Free payouts unlocked
                   </div>
                 )

From c0eaee1feab8d61f1b0d909257201ed2142d32f9 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Tue, 8 Jul 2025 12:09:09 -0400
Subject: [PATCH 16/18] General modal improvements

---
 .../payouts/payout-settings-modal.tsx         | 190 ++++++++++--------
 1 file changed, 103 insertions(+), 87 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 818013901f3..825878f090a 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -9,7 +9,7 @@ import {
 import { mutatePrefix } from "@/lib/swr/mutate";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { partnerPayoutSettingsSchema } from "@/lib/zod/schemas/partners";
-import { Button, Modal, Slider } from "@dub/ui";
+import { Button, Modal, Slider, useScrollProgress } from "@dub/ui";
 import { currencyFormatter } from "@dub/utils";
 import { PartyPopper } from "lucide-react";
 import { useAction } from "next-safe-action/hooks";
@@ -18,6 +18,7 @@ import {
   SetStateAction,
   useCallback,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { useForm } from "react-hook-form";
@@ -89,6 +90,9 @@ function PayoutSettingsModalInner({
 
   const minWithdrawalAmount = watch("minWithdrawalAmount");
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const { scrollProgress, updateScrollProgress } = useScrollProgress(scrollRef);
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="space-y-4 border-b border-neutral-200 p-4 sm:p-6">
@@ -96,103 +100,115 @@ function PayoutSettingsModalInner({
       </div>
 
       {/*  Minimum withdrawal amount */}
-      <div className="space-y-10 bg-neutral-50 p-4 sm:p-6">
-        <div className="space-y-6">
-          <div>
-            <h4 className="text-base font-semibold leading-6 text-neutral-900">
-              Minimum withdrawal amount
-            </h4>
-            <p className="text-sm font-medium leading-5 text-neutral-500">
-              Set the minimum amount for funds to be withdrawn from Dub into
-              your connected payout account.
-            </p>
-          </div>
-
-          <div>
-            <div className="mb-2 text-2xl font-medium leading-6 text-neutral-800">
-              {currencyFormatter(minWithdrawalAmount / 100)} USD
+      <div className="relative">
+        <div
+          ref={scrollRef}
+          onScroll={updateScrollProgress}
+          className="scrollbar-hide max-h-[calc(100dvh-200px)] space-y-10 overflow-y-auto bg-neutral-50 p-4 sm:p-6"
+        >
+          <div className="space-y-6">
+            <div>
+              <h4 className="text-base font-semibold leading-6 text-neutral-900">
+                Minimum withdrawal amount
+              </h4>
+              <p className="text-sm font-medium text-neutral-500">
+                Set the minimum amount for funds to be withdrawn from Dub into
+                your connected payout account.
+              </p>
             </div>
 
-            <Slider
-              value={minWithdrawalAmount}
-              min={ALLOWED_MIN_WITHDRAWAL_AMOUNTS[0]}
-              max={
-                ALLOWED_MIN_WITHDRAWAL_AMOUNTS[
-                  ALLOWED_MIN_WITHDRAWAL_AMOUNTS.length - 1
-                ]
-              }
-              onChange={(value) => {
-                const closest = ALLOWED_MIN_WITHDRAWAL_AMOUNTS.reduce(
-                  (prev, curr) =>
-                    Math.abs(curr - value) < Math.abs(prev - value)
-                      ? curr
-                      : prev,
-                );
-
-                setValue("minWithdrawalAmount", closest, { shouldDirty: true });
-              }}
-              marks={ALLOWED_MIN_WITHDRAWAL_AMOUNTS}
-              hint={
-                minWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS ? (
-                  `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
-                ) : (
-                  <div className="flex items-center gap-1 text-xs font-normal leading-4 text-neutral-500">
-                    <PartyPopper className="size-4" />
-                    Free payouts unlocked
-                  </div>
-                )
-              }
-            />
-          </div>
-        </div>
-
-        {/* Invoice details */}
-        <div className="space-y-6">
-          <div>
-            <h4 className="text-base font-semibold leading-6 text-neutral-900">
-              Invoice details (optional)
-            </h4>
-            <p className="text-sm font-medium leading-5 text-neutral-500">
-              This information is added to your payout invoices.
-            </p>
-          </div>
-          <div>
-            <label className="text-sm font-medium leading-5 text-neutral-900">
-              Business name
-            </label>
-            <div className="relative mt-2 rounded-md shadow-sm">
-              <input
-                required
-                autoFocus
-                className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
-                {...register("companyName", { required: true })}
+            <div>
+              <div className="mb-2 text-2xl font-medium leading-6 text-neutral-800">
+                {currencyFormatter(minWithdrawalAmount / 100)} USD
+              </div>
+
+              <Slider
+                value={minWithdrawalAmount}
+                min={ALLOWED_MIN_WITHDRAWAL_AMOUNTS[0]}
+                max={
+                  ALLOWED_MIN_WITHDRAWAL_AMOUNTS[
+                    ALLOWED_MIN_WITHDRAWAL_AMOUNTS.length - 1
+                  ]
+                }
+                onChange={(value) => {
+                  const closest = ALLOWED_MIN_WITHDRAWAL_AMOUNTS.reduce(
+                    (prev, curr) =>
+                      Math.abs(curr - value) < Math.abs(prev - value)
+                        ? curr
+                        : prev,
+                  );
+
+                  setValue("minWithdrawalAmount", closest, {
+                    shouldDirty: true,
+                  });
+                }}
+                marks={ALLOWED_MIN_WITHDRAWAL_AMOUNTS}
+                hint={
+                  minWithdrawalAmount < MIN_WITHDRAWAL_AMOUNT_CENTS ? (
+                    `${currencyFormatter(BELOW_MIN_WITHDRAWAL_FEE_CENTS / 100)} payout fee for payouts under $100`
+                  ) : (
+                    <div className="flex items-center gap-1 text-xs font-normal leading-4 text-neutral-500">
+                      <PartyPopper className="size-4" />
+                      Free payouts unlocked
+                    </div>
+                  )
+                }
               />
             </div>
           </div>
 
-          <div>
-            <label className="text-sm font-medium leading-5 text-neutral-900">
-              Business address
-            </label>
-            <TextareaAutosize
-              className="mt-2 block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
-              minRows={4}
-              {...register("address")}
-            />
-          </div>
+          {/* Invoice details */}
+          <div className="space-y-6">
+            <div>
+              <h4 className="text-base font-semibold leading-6 text-neutral-900">
+                Invoice details (optional)
+              </h4>
+              <p className="text-sm font-medium text-neutral-500">
+                This information is added to your payout invoices.
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium text-neutral-900">
+                Business name
+              </label>
+              <div className="relative mt-1.5 rounded-md shadow-sm">
+                <input
+                  required
+                  autoFocus
+                  className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                  {...register("companyName", { required: true })}
+                />
+              </div>
+            </div>
 
-          <div>
-            <label className="text-sm font-medium leading-5 text-neutral-900">
-              Business tax ID
-            </label>
-            <div className="relative mt-2 rounded-md shadow-sm">
-              <input
-                className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
-                {...register("taxId")}
+            <div>
+              <label className="text-sm font-medium text-neutral-900">
+                Business address
+              </label>
+              <TextareaAutosize
+                className="mt-1.5 block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                minRows={3}
+                {...register("address")}
               />
             </div>
+
+            <div>
+              <label className="text-sm font-medium text-neutral-900">
+                Business tax ID
+              </label>
+              <div className="relative mt-1.5 rounded-md shadow-sm">
+                <input
+                  className="block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                  {...register("taxId")}
+                />
+              </div>
+            </div>
           </div>
         </div>
+        <div
+          className="pointer-events-none absolute -bottom-px left-0 h-16 w-full rounded-b-lg bg-gradient-to-t from-white sm:bottom-0"
+          style={{ opacity: 1 - Math.pow(scrollProgress, 2) }}
+        />
       </div>
 
       <div className="flex items-center justify-end gap-2 border-t border-neutral-200 bg-neutral-50 px-4 py-5 sm:px-6">

From 3e6d77258f020aa892a96019b0491a6f5fe3e4e1 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Tue, 8 Jul 2025 12:48:44 -0400
Subject: [PATCH 17/18] Slider fixes

---
 .../payouts/payout-settings-modal.tsx         | 14 ++++--
 packages/ui/src/slider.tsx                    | 48 +++++++++----------
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 825878f090a..1a92df881cb 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -11,6 +11,7 @@ import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { partnerPayoutSettingsSchema } from "@/lib/zod/schemas/partners";
 import { Button, Modal, Slider, useScrollProgress } from "@dub/ui";
 import { currencyFormatter } from "@dub/utils";
+import NumberFlow from "@number-flow/react";
 import { PartyPopper } from "lucide-react";
 import { useAction } from "next-safe-action/hooks";
 import {
@@ -118,9 +119,16 @@ function PayoutSettingsModalInner({
             </div>
 
             <div>
-              <div className="mb-2 text-2xl font-medium leading-6 text-neutral-800">
-                {currencyFormatter(minWithdrawalAmount / 100)} USD
-              </div>
+              <NumberFlow
+                value={minWithdrawalAmount / 100}
+                suffix=" USD"
+                format={{
+                  style: "currency",
+                  currency: "USD",
+                  trailingZeroDisplay: "stripIfInteger",
+                }}
+                className="mb-2 text-2xl font-medium leading-6 text-neutral-800"
+              />
 
               <Slider
                 value={minWithdrawalAmount}
diff --git a/packages/ui/src/slider.tsx b/packages/ui/src/slider.tsx
index 8aed034643e..4cb176ae415 100644
--- a/packages/ui/src/slider.tsx
+++ b/packages/ui/src/slider.tsx
@@ -27,8 +27,6 @@ export function Slider({
   hint,
   disabled,
 }: SliderProps) {
-  const percent = ((value - min) / (max - min)) * 100;
-
   const sliderMarks = marks || [
     min,
     min + (max - min) / 3,
@@ -37,10 +35,10 @@ export function Slider({
   ];
 
   return (
-    <div className={cn(className)}>
+    <div className={cn("relative z-0", className)}>
       <div className="w-full">
         <RadixSlider.Root
-          className="relative flex h-8 w-full items-center"
+          className="relative flex h-8 w-full items-center [--thumb-radius:13px]"
           value={[value]}
           min={min}
           max={max}
@@ -50,35 +48,33 @@ export function Slider({
           aria-label="Slider"
         >
           <RadixSlider.Track className="relative h-4 w-full overflow-visible rounded-full bg-neutral-200">
-            <RadixSlider.Range className="absolute h-4 rounded-full bg-black" />
+            {/* Start of filled track (since actual filled track is inset by the thumb radius) */}
+            <div className="absolute left-0 top-0 h-full w-[var(--thumb-radius)] rounded-l-full bg-black" />
+
+            <div className="pointer-events-none absolute inset-x-[var(--thumb-radius)] inset-y-0">
+              <RadixSlider.Range className="absolute h-4 bg-black" />
 
-            {sliderMarks.map((mark) => {
-              const left = ((mark - min) / (max - min)) * 100;
-              const isFilled = mark <= value;
+              {sliderMarks.map((mark) => {
+                const left = ((mark - min) / (max - min)) * 100;
+                const isFilled = mark <= value;
 
-              return (
-                <span
-                  key={mark}
-                  className={cn(
-                    "absolute top-1/2 z-10 size-2 -translate-y-1/2 rounded-full border transition-all duration-200",
-                    isFilled
-                      ? "border-black bg-white"
-                      : "border-neutral-300 bg-neutral-100",
-                  )}
-                  style={{ left: `calc(${left}% - 0.5rem)` }}
-                />
-              );
-            })}
+                return (
+                  <span
+                    key={mark}
+                    className="absolute top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white"
+                    style={{ left: `${left}%` }}
+                  />
+                );
+              })}
+            </div>
           </RadixSlider.Track>
 
-          <RadixSlider.Thumb className="z-20 flex h-[26px] w-[26px] items-center justify-center rounded-full border-0 bg-white shadow-[0_2px_2px_rgba(0,0,0,0.10),0_3px_3px_rgba(0,0,0,0.09)]">
-            <span className="block h-[16px] w-[16px] rounded-full bg-[#171717]" />
+          <RadixSlider.Thumb className="z-20 flex size-[calc(var(--thumb-radius)*2)] items-center justify-center rounded-full border-0 bg-white shadow-[0_2px_2px_rgba(0,0,0,0.10),0_3px_3px_rgba(0,0,0,0.09)]">
+            <span className="block size-4 rounded-full bg-[#171717]" />
           </RadixSlider.Thumb>
         </RadixSlider.Root>
 
-        <div className="mt-2 text-xs text-neutral-500 min-h-[1rem]">
-          {hint}
-        </div>
+        <div className="mt-2 min-h-[1rem] text-xs text-neutral-500">{hint}</div>
       </div>
     </div>
   );

From eaa9d4c72e8a4d7c808af1ea3e8b8a0284922a44 Mon Sep 17 00:00:00 2001
From: Kiran K <kiran@dub.co>
Date: Tue, 8 Jul 2025 23:53:57 +0530
Subject: [PATCH 18/18] Update payout-settings-modal.tsx

---
 .../(dashboard)/payouts/payout-settings-modal.tsx                | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
index 1a92df881cb..6a54b97e7d6 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-settings-modal.tsx
@@ -125,6 +125,7 @@ function PayoutSettingsModalInner({
                 format={{
                   style: "currency",
                   currency: "USD",
+                  // @ts-ignore – trailingZeroDisplay is a valid option but TS is outdated
                   trailingZeroDisplay: "stripIfInteger",
                 }}
                 className="mb-2 text-2xl font-medium leading-6 text-neutral-800"