Refresh page after payment

src/app/create-account/page.tsx

@@ -247,7 +247,7 @@ export default function CreateAccount() {
       paymentID,
     })
     utils.user.getCurrent.setData(undefined, updatedUser)
-    router.replace("/dashboard")
+    router.push("/dashboard")
   }
 
   const handleSkipPayment = async () => {

src/app/dashboard/(root)/page.tsx

@@ -1,25 +1,10 @@
-import { toast } from "~/components/ui/use-toast"
 import { api } from "~/trpc/server"
-import PaymentBlock from "../../../components/payment/online/wrapper"
+import PaymentFormWrapper from "~/components/payment/online/wrapper"
 
 export default async function Dashboard() {
   const user = await api.user.getCurrent.query()
   const cards = await api.payment.getCards.query()
 
-  const handleAfterPayment = async (paymentID: string) => {
-    "use server"
-    await api.user.updateRole.mutate({
-      id: user.id,
-      role: "member",
-      paymentID,
-    })
-
-    toast({
-      title: "Successfully updated role",
-      description: "You are now a member of Coders for Causes",
-    })
-  }
-
   return (
     <>
       <div className="container flex flex-wrap gap-x-8 gap-y-4 py-8">
@@ -47,7 +32,7 @@ export default async function Dashboard() {
                   </ul>
                 </div>
               </div>
-              <PaymentBlock user={user} cards={cards} afterPayment={handleAfterPayment} />
+              <PaymentFormWrapper user={user} cards={cards} />
             </div>
           )}
         </div>

src/components/payment/online/wrapper.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useRouter } from "next/navigation"
 import OnlinePaymentForm, { type OnlinePaymentFormProps } from "~/components/payment/online"
 import { toast } from "~/components/ui/use-toast"
 import { api } from "~/trpc/react"
@@ -10,8 +11,9 @@ interface PaymentBlockProps extends OnlinePaymentFormProps {
 }
 
 // wrapped in a client component because the dashboard should be server-rendered
-export default function PaymentFormWrapper({ cards, user }: PaymentBlockProps) {
+export default function PaymentFormWrapper({ cards, user }: Pick<PaymentBlockProps, "cards" | "user">) {
   const updateRole = api.user.updateRole.useMutation()
+  const router = useRouter()
 
   const handleAfterPayment = async (paymentID: string) => {
     await updateRole.mutateAsync({
@@ -24,6 +26,8 @@ export default function PaymentFormWrapper({ cards, user }: PaymentBlockProps) {
       title: "Successfully updated role",
       description: "You are now a member of Coders for Causes",
     })
+
+    router.refresh()
   }
 
   return <OnlinePaymentForm cards={cards} afterPayment={handleAfterPayment} />