feat: create payment result page (#39)

dezh-tech · Jan 9, 2025 · 1417bc2 · 1417bc2
1 parent 28da27b
commit 1417bc2
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 3 deletions.
diff --git a/src/components/pages/PaymentResult/index.tsx b/src/components/pages/PaymentResult/index.tsx
@@ -0,0 +1,54 @@
+import { buttonVariants } from "@/components/ui/Button/buttonVariants";
+import Tag from "@/components/ui/Tag";
+import { PaymentStatus } from "@/enums/paymentStatus";
+import { cn } from "@/lib/utils";
+import { Link, useSearchParams } from "react-router-dom";
+
+const PaymentResult = () => {
+    const [searchParams] = useSearchParams();
+    const paymentStatus = searchParams.get("status");
+    const isItPayed = Number(paymentStatus) === PaymentStatus.SUCCESSFUL;
+    const title = isItPayed
+        ? "   Payment was Successful"
+        : "Payment was Failed ";
+    const description = isItPayed
+        ? "you can use your nip-05 address on your client right now and share it with everyone! "
+        : " ";
+    return (
+        <main className="space-y-16  mx-auto  pt-[254px] min-h-[90dvh]">
+            <div className="flex flex-col items-center gap-7 ">
+                <Tag className="animate-fade-down animate-delay-100">
+                    Payment result
+                </Tag>
+                <div className="space-y-4  ">
+                    <h2 className="gradient-text text-center font-bold   text-[64px] uppercase animate-fade-up animate-delay-300 ">
+                        {title}
+                    </h2>
+                    <p className="text-center text-lg text-[#80899F] max-w-[729px] mx-auto font-roboto-mono animate-fade-up animate-delay-500">
+                        {description}
+                    </p>
+                </div>
+                <div className="w-full [&_button]:flex-1  flex gap-5  max-w-[729px] mx-auto animate-fade-up animate-delay-700">
+                    {/* TODO: update links */}
+                    <Link
+                        className={cn(
+                            buttonVariants({ variant: "secondary" }),
+                            "flex-1 ",
+                        )}
+                        to={isItPayed ? "/" : "/availability"}
+                    >
+                        {isItPayed ? "Back to home " : "Choose another name"}
+                    </Link>
+                    <Link
+                        className={cn(buttonVariants(), "flex-1 ")}
+                        to="/availability"
+                    >
+                        {isItPayed ? "Manage" : "  Try again "}
+                    </Link>
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default PaymentResult;
diff --git a/src/components/ui/Button/buttonVariants.ts b/src/components/ui/Button/buttonVariants.ts
@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 
 export const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-mono transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-roboto-mono transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
     {
         variants: {
             variant: {
@@ -11,12 +11,12 @@ export const buttonVariants = cva(
                     "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
                 outline:
                     "rounded-full font-semibold text-[#D8ECF8] bg-[#161a20] relative after:content-[''] after:-z-10 after:absolute after:w-[100%] after:scale-105 after:h-[100%] after:rounded-full after:bg-[linear-gradient(to_bottom_left,_#a0c5f7,_#070c20)]",
-                secondary: "bg-[#282E4A] text-white",
+                secondary: "bg-[#282E4A] text-white rounded-xl",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
                 link: "text-primary underline-offset-4 hover:underline",
             },
             size: {
-                default: "h-9 px-4 py-2",
+                default: "h-[56px] px-4 py-2",
                 sm: "h-8 rounded-md px-3 text-xs",
                 lg: "h-10 rounded-md px-8",
                 icon: "h-9 w-9",

diff --git a/src/enums/paymentStatus.ts b/src/enums/paymentStatus.ts
@@ -0,0 +1,4 @@
+export enum PaymentStatus {
+    SUCCESSFUL = 0,
+    FAILED = 1,
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -4,6 +4,7 @@ import RootLayout from "@/components/layout/RootLayout";
 import { HomePage, NotFoundPage } from "@/components/pages";
 import AvailabilityPage from "@/components/pages/Availability";
 import SetUserName from "@/components/pages/SetUserName";
+import PaymentResult from "@/components/pages/PaymentResult";
 
 export const router = createBrowserRouter([
     {
@@ -22,6 +23,10 @@ export const router = createBrowserRouter([
                 path: "/set-username",
                 element: <SetUserName />,
             },
+            { 
+                path: "/payment-result",
+                element: <PaymentResult />,
+            },
             {
                 path: "*",
                 element: <NotFoundPage />,