Navigation button added on payment success page

app/javascript/src/components/payments/Success/index.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 
+import { LeftArrowIcon } from "miruIcons";
 import { useNavigate, useParams } from "react-router-dom";
+import { Button } from "StyledComponents";
 
 import invoicesApi from "apis/invoices";
 import Loader from "common/Loader";
@@ -28,6 +30,10 @@ const Success = () => {
     }
   };
 
+  const redirectToHomePage = () => {
+    navigate("/invoices");
+  };
+
   useEffect(() => {
     fetchPaymentSuccess();
   }, []);
@@ -60,14 +66,21 @@ const Success = () => {
             </svg>
           </div>
           <div className="py-16">
-            <div className="text-center">
+            <div className="flex flex-col items-center">
               <p className="tracking-wide text-sm font-semibold uppercase text-indigo-600">{`Invoice ${invoice?.invoice_number}`}</p>
               <h1 className="tracking-tight mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
                 Payment was successful. 🎉
               </h1>
               <p className="mt-2 text-base text-gray-500">
                 We have received your payment.
               </p>
+              <Button
+                className="mt-8 flex items-center justify-between text-lg font-semibold"
+                onClick={redirectToHomePage}
+              >
+                <LeftArrowIcon className="mr-1" />
+                Go To Home Page
+              </Button>
             </div>
           </div>
         </main>