mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-08 00:45:41 +00:00
Redesign payment verification UI with Mantine components and fix route direction logic
- Refactor CheckPaymentPage and PaymentFailurePage to use Mantine UI components with modern card-based layouts - Add gradient headers, themed icons, and improved visual hierarchy for payment status states - Implement PaymentCard wrapper component for consistent styling across payment pages - Update route direction logic to trim country values and simplify Djibouti import/export detection - Replace shadcn/ui components with M
This commit is contained in:
marshal
@@ -293,17 +293,17 @@ export function getRouteDirection(
|
||||
dest: Freight.BookingReferenceYard | null | undefined,
|
||||
): Freight.ScheduleTradeDirection | null {
|
||||
if (!origin || !dest) return null;
|
||||
if (origin.country === "Ethiopia" && dest.country === "Ethiopia") {
|
||||
return "DOMESTIC";
|
||||
}
|
||||
if (origin.country === "Ethiopia" && dest.country === "Djibouti") {
|
||||
return "EXPORT";
|
||||
}
|
||||
if (origin.country === "Djibouti" && dest.country === "Ethiopia") {
|
||||
|
||||
const originCountry = origin.country?.trim();
|
||||
const destCountry = dest.country?.trim();
|
||||
|
||||
if (originCountry === "Djibouti") {
|
||||
return "IMPORT";
|
||||
}
|
||||
|
||||
return null;
|
||||
if (destCountry === "Djibouti" && originCountry !== "Djibouti") {
|
||||
return "EXPORT";
|
||||
}
|
||||
return "DOMESTIC";
|
||||
}
|
||||
|
||||
export function calcWagons(containers: ContainerConfig[]) {
|
||||
|
||||
@@ -1,8 +1,16 @@
|
||||
import { useMemo } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CheckCircle2, LoaderCircle, XCircle } from "lucide-react";
|
||||
import { Button } from "@edr/ui-common";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Loader,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
} from "@mantine/core";
|
||||
import { AlertTriangle, CheckCircle2, FileSearch, FileText, Home, RotateCcw } from "lucide-react";
|
||||
import { api } from "@/services/api";
|
||||
|
||||
function extractOrderId(): string | null {
|
||||
@@ -13,6 +21,35 @@ function extractOrderId(): string | null {
|
||||
return segments[segments.length - 1] ?? null;
|
||||
}
|
||||
|
||||
function PaymentCard({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
minHeight: "100dvh",
|
||||
background: "#f8fafc",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "24px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: 460,
|
||||
background: "#fff",
|
||||
borderRadius: 24,
|
||||
border: "1.5px solid #e5e7eb",
|
||||
boxShadow: "0 4px 24px 0 rgba(0,0,0,0.07)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CheckPaymentPage() {
|
||||
const navigate = useNavigate();
|
||||
const orderId = useMemo(() => extractOrderId(), []);
|
||||
@@ -29,105 +66,307 @@ export default function CheckPaymentPage() {
|
||||
|
||||
if (!orderId) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-4">
|
||||
<div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 text-center shadow-sm">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<XCircle className="size-10 text-destructive" />
|
||||
<p className="text-lg font-bold text-foreground">
|
||||
No payment reference found
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/bookings")}
|
||||
>
|
||||
Back to My Bookings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PaymentCard>
|
||||
<Box
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #f97316 0%, #fb923c 100%)",
|
||||
padding: "40px 32px 32px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<ThemeIcon
|
||||
size={80}
|
||||
radius="xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.18)",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
margin: "0 auto 20px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<FileSearch size={42} color="#fff" />
|
||||
</ThemeIcon>
|
||||
<Text fw={800} fz={24} c="#fff" lh={1.2}>
|
||||
No payment reference
|
||||
</Text>
|
||||
<Text fz={14} c="rgba(255,255,255,0.82)" mt={8}>
|
||||
We could not find a payment order to verify.
|
||||
</Text>
|
||||
</Box>
|
||||
<Stack gap={10} p={32}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
color="orange"
|
||||
onClick={() => navigate("/bookings")}
|
||||
styles={{ root: { height: 48, fontWeight: 700 } }}
|
||||
>
|
||||
Back to my bookings
|
||||
</Button>
|
||||
</Stack>
|
||||
</PaymentCard>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-4">
|
||||
<div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 text-center shadow-sm">
|
||||
{isLoading && (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<LoaderCircle className="size-10 animate-spin text-primary" />
|
||||
<p className="text-lg font-semibold text-foreground">
|
||||
Checking payment status…
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
if (isLoading) {
|
||||
return (
|
||||
<PaymentCard>
|
||||
<Box style={{ padding: "64px 32px", textAlign: "center" }}>
|
||||
<Loader size={48} color="edr-green" type="dots" mx="auto" mb={24} />
|
||||
<Text fw={700} fz={18} c="#10202F">
|
||||
Verifying your payment…
|
||||
</Text>
|
||||
<Text fz={14} c="dimmed" mt={8}>
|
||||
Please wait, this usually takes a few seconds.
|
||||
</Text>
|
||||
</Box>
|
||||
</PaymentCard>
|
||||
);
|
||||
}
|
||||
|
||||
{isSuccess && (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-full bg-primary/10">
|
||||
<CheckCircle2 className="size-8 text-primary" />
|
||||
</div>
|
||||
<p className="text-lg font-bold text-foreground">
|
||||
Payment was successful!
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your booking has been confirmed and payment is complete.
|
||||
</p>
|
||||
if (isSuccess) {
|
||||
return (
|
||||
<PaymentCard>
|
||||
<Box
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #059669 0%, #0ea371 100%)",
|
||||
padding: "40px 32px 32px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<ThemeIcon
|
||||
size={80}
|
||||
radius="xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.2)",
|
||||
border: "2px solid rgba(255,255,255,0.35)",
|
||||
margin: "0 auto 20px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<CheckCircle2 size={42} color="#fff" strokeWidth={2} />
|
||||
</ThemeIcon>
|
||||
<Text fw={800} fz={24} c="#fff" lh={1.2}>
|
||||
Payment verified
|
||||
</Text>
|
||||
<Text fz={14} c="rgba(255,255,255,0.82)" mt={8} lh={1.5}>
|
||||
Your booking is confirmed and payment is complete.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack gap={0} p={32}>
|
||||
<Box
|
||||
style={{
|
||||
background: "#f0fdf4",
|
||||
border: "1px solid #bbf7d0",
|
||||
borderRadius: 14,
|
||||
padding: "14px 18px",
|
||||
}}
|
||||
>
|
||||
<Text fz={13.5} c="#14532d" lh={1.5} ta="center">
|
||||
EDR staff will assign a train and you will be notified of any updates.
|
||||
</Text>
|
||||
</Box>
|
||||
<Divider my={24} color="#e5e7eb" />
|
||||
<Stack gap={10}>
|
||||
<Button
|
||||
type="button"
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
color="edr-green"
|
||||
leftSection={<FileText size={17} />}
|
||||
onClick={() => navigate("/bookings")}
|
||||
className="mt-2"
|
||||
styles={{ root: { height: 48, fontWeight: 700, fontSize: 15 } }}
|
||||
>
|
||||
Go to My Bookings
|
||||
Go to my bookings
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && data && !isSuccess && (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-full bg-destructive/10">
|
||||
<XCircle className="size-8 text-destructive" />
|
||||
</div>
|
||||
<p className="text-lg font-bold text-foreground">
|
||||
Payment status: {data.status}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Please try again or contact support if the issue persists.
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate("/bookings")}
|
||||
className="mt-2"
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
leftSection={<Home size={17} />}
|
||||
onClick={() => navigate("/")}
|
||||
styles={{ root: { height: 44, fontWeight: 600, fontSize: 14 } }}
|
||||
>
|
||||
Back to My Bookings
|
||||
Back to home
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Stack>
|
||||
<Text fz={12} c="dimmed" ta="center" mt={20}>
|
||||
Questions?{" "}
|
||||
<Text span c="edr-green" fw={600}>
|
||||
support@edr.et
|
||||
</Text>
|
||||
</Text>
|
||||
</Stack>
|
||||
</PaymentCard>
|
||||
);
|
||||
}
|
||||
|
||||
{isError && (
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-full bg-destructive/10">
|
||||
<XCircle className="size-8 text-destructive" />
|
||||
</div>
|
||||
<p className="text-lg font-bold text-foreground">
|
||||
Something went wrong
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
if (isError) {
|
||||
return (
|
||||
<PaymentCard>
|
||||
<Box
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #dc2626 0%, #ef4444 100%)",
|
||||
padding: "40px 32px 32px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<ThemeIcon
|
||||
size={80}
|
||||
radius="xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.18)",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
margin: "0 auto 20px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<AlertTriangle size={42} color="#fff" strokeWidth={2} />
|
||||
</ThemeIcon>
|
||||
<Text fw={800} fz={24} c="#fff" lh={1.2}>
|
||||
Verification failed
|
||||
</Text>
|
||||
<Text fz={14} c="rgba(255,255,255,0.82)" mt={8} lh={1.5}>
|
||||
We could not verify your payment status.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack gap={0} p={32}>
|
||||
<Box
|
||||
style={{
|
||||
background: "#fff7f7",
|
||||
border: "1px solid #fecaca",
|
||||
borderRadius: 14,
|
||||
padding: "14px 18px",
|
||||
}}
|
||||
>
|
||||
<Text fz={13.5} c="#7f1d1d" ta="center" lh={1.5}>
|
||||
{error instanceof Error
|
||||
? error.message
|
||||
: "Failed to check payment status."}
|
||||
</p>
|
||||
: "An unexpected error occurred. Please try again or contact support."}
|
||||
</Text>
|
||||
</Box>
|
||||
<Divider my={24} color="#e5e7eb" />
|
||||
<Stack gap={10}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
color="red"
|
||||
leftSection={<RotateCcw size={17} />}
|
||||
onClick={() => navigate("/bookings")}
|
||||
className="mt-2"
|
||||
styles={{ root: { height: 48, fontWeight: 700, fontSize: 15 } }}
|
||||
>
|
||||
Back to My Bookings
|
||||
Back to my bookings
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
leftSection={<Home size={17} />}
|
||||
onClick={() => navigate("/")}
|
||||
styles={{ root: { height: 44, fontWeight: 600, fontSize: 14 } }}
|
||||
>
|
||||
Back to home
|
||||
</Button>
|
||||
</Stack>
|
||||
<Text fz={12} c="dimmed" ta="center" mt={20}>
|
||||
Need help?{" "}
|
||||
<Text span c="red.6" fw={600}>
|
||||
support@edr.et
|
||||
</Text>
|
||||
</Text>
|
||||
</Stack>
|
||||
</PaymentCard>
|
||||
);
|
||||
}
|
||||
|
||||
// Non-success status (e.g. PAY_FAIL, PENDING, etc.)
|
||||
return (
|
||||
<PaymentCard>
|
||||
<Box
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #d97706 0%, #f59e0b 100%)",
|
||||
padding: "40px 32px 32px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<ThemeIcon
|
||||
size={80}
|
||||
radius="xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.18)",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
margin: "0 auto 20px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<AlertTriangle size={42} color="#fff" strokeWidth={2} />
|
||||
</ThemeIcon>
|
||||
<Text fw={800} fz={24} c="#fff" lh={1.2}>
|
||||
Payment incomplete
|
||||
</Text>
|
||||
<Text fz={14} c="rgba(255,255,255,0.82)" mt={8} lh={1.5}>
|
||||
Status:{" "}
|
||||
<Text span fw={700}>
|
||||
{data?.status ?? "Unknown"}
|
||||
</Text>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack gap={0} p={32}>
|
||||
<Box
|
||||
style={{
|
||||
background: "#fffbeb",
|
||||
border: "1px solid #fde68a",
|
||||
borderRadius: 14,
|
||||
padding: "14px 18px",
|
||||
}}
|
||||
>
|
||||
<Text fz={13.5} c="#78350f" ta="center" lh={1.5}>
|
||||
Your payment did not complete successfully. Nothing has been charged.
|
||||
You can retry from your booking page.
|
||||
</Text>
|
||||
</Box>
|
||||
<Divider my={24} color="#e5e7eb" />
|
||||
<Stack gap={10}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
color="orange"
|
||||
leftSection={<RotateCcw size={17} />}
|
||||
onClick={() => navigate("/bookings")}
|
||||
styles={{ root: { height: 48, fontWeight: 700, fontSize: 15 } }}
|
||||
>
|
||||
Back to my bookings — retry payment
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
leftSection={<Home size={17} />}
|
||||
onClick={() => navigate("/")}
|
||||
styles={{ root: { height: 44, fontWeight: 600, fontSize: 14 } }}
|
||||
>
|
||||
Back to home
|
||||
</Button>
|
||||
</Stack>
|
||||
<Text fz={12} c="dimmed" ta="center" mt={20}>
|
||||
Need help?{" "}
|
||||
<Text span c="orange.7" fw={600}>
|
||||
support@edr.et
|
||||
</Text>
|
||||
</Text>
|
||||
</Stack>
|
||||
</PaymentCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,43 +1,171 @@
|
||||
import { XCircle } from "lucide-react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
} from "@mantine/core";
|
||||
import { AlertTriangle, ArrowLeft, Home, RotateCcw } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "@edr/ui-common";
|
||||
|
||||
/**
|
||||
* Public page the payment provider redirects the browser to after a failed or
|
||||
* cancelled payment (PAYMENT_FAILURE_URL). Generic — it explains nothing was
|
||||
* charged and sends the customer back to their bookings to retry from "Pay now".
|
||||
*/
|
||||
export default function PaymentFailurePage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-4">
|
||||
<div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 text-center shadow-sm">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex size-16 items-center justify-center rounded-full bg-destructive/10">
|
||||
<XCircle className="size-9 text-destructive" />
|
||||
</div>
|
||||
<p className="text-xl font-bold text-foreground">
|
||||
Payment was not completed
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your payment didn't go through and you haven't been charged. You can
|
||||
try again from your booking using "Pay now".
|
||||
</p>
|
||||
<div className="mt-2 flex w-full flex-col gap-2">
|
||||
<Button type="button" onClick={() => navigate("/bookings")}>
|
||||
Back to My Bookings
|
||||
<Box
|
||||
style={{
|
||||
minHeight: "100dvh",
|
||||
background: "linear-gradient(135deg, #fff7f7 0%, #f8fafc 60%, #fef2f2 100%)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "24px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: 460,
|
||||
background: "#fff",
|
||||
borderRadius: 24,
|
||||
border: "1.5px solid #fecaca",
|
||||
boxShadow:
|
||||
"0 4px 24px 0 rgba(220,38,38,0.07), 0 1px 4px 0 rgba(0,0,0,0.04)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Red header stripe */}
|
||||
<Box
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #dc2626 0%, #ef4444 100%)",
|
||||
padding: "40px 32px 32px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<ThemeIcon
|
||||
size={80}
|
||||
radius="xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.18)",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
margin: "0 auto 20px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<AlertTriangle size={42} color="#fff" strokeWidth={2} />
|
||||
</ThemeIcon>
|
||||
<Text fw={800} fz={24} c="#fff" lh={1.2}>
|
||||
Payment not completed
|
||||
</Text>
|
||||
<Text fz={14} c="rgba(255,255,255,0.82)" mt={8} lh={1.5}>
|
||||
Nothing was charged — your booking is still active.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Body */}
|
||||
<Stack gap={0} p={32}>
|
||||
<Stack gap={16}>
|
||||
<Box
|
||||
style={{
|
||||
background: "#fff7f7",
|
||||
border: "1px solid #fecaca",
|
||||
borderRadius: 14,
|
||||
padding: "16px 20px",
|
||||
}}
|
||||
>
|
||||
<Stack gap={10}>
|
||||
<Group gap={10} wrap="nowrap">
|
||||
<Box
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
background: "#ef4444",
|
||||
flexShrink: 0,
|
||||
marginTop: 2,
|
||||
}}
|
||||
/>
|
||||
<Text fz={13.5} c="#7f1d1d" lh={1.5}>
|
||||
Your payment was declined or cancelled. No charge was made.
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap={10} wrap="nowrap">
|
||||
<Box
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
background: "#ef4444",
|
||||
flexShrink: 0,
|
||||
marginTop: 2,
|
||||
}}
|
||||
/>
|
||||
<Text fz={13.5} c="#7f1d1d" lh={1.5}>
|
||||
You can retry using the <strong>Pay now</strong> button on
|
||||
your booking page.
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap={10} wrap="nowrap">
|
||||
<Box
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
background: "#ef4444",
|
||||
flexShrink: 0,
|
||||
marginTop: 2,
|
||||
}}
|
||||
/>
|
||||
<Text fz={13.5} c="#7f1d1d" lh={1.5}>
|
||||
Contact support if the problem persists.
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Divider my={24} color="#e5e7eb" />
|
||||
|
||||
<Stack gap={10}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
color="red"
|
||||
leftSection={<RotateCcw size={17} />}
|
||||
onClick={() => navigate("/bookings")}
|
||||
styles={{
|
||||
root: { height: 48, fontWeight: 700, fontSize: 15 },
|
||||
}}
|
||||
>
|
||||
Back to my bookings — retry payment
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
leftSection={<Home size={17} />}
|
||||
onClick={() => navigate("/")}
|
||||
styles={{
|
||||
root: { height: 44, fontWeight: 600, fontSize: 14 },
|
||||
}}
|
||||
>
|
||||
Back to home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<Text fz={12} c="dimmed" ta="center" mt={20} lh={1.5}>
|
||||
Need help?{" "}
|
||||
<Text span c="red.6" fw={600}>
|
||||
support@edr.et
|
||||
</Text>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,43 +1,170 @@
|
||||
import { CheckCircle2 } from "lucide-react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
} from "@mantine/core";
|
||||
import { CheckCircle2, FileText, Home } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "@edr/ui-common";
|
||||
|
||||
/**
|
||||
* Public page the payment provider redirects the browser to after a successful
|
||||
* payment (PAYMENT_RETURN_URL). Generic — it confirms success and points the
|
||||
* customer back to their bookings, where the booking reflects the paid state.
|
||||
*/
|
||||
export default function PaymentSuccessPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-4">
|
||||
<div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 text-center shadow-sm">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="flex size-16 items-center justify-center rounded-full bg-primary/10">
|
||||
<CheckCircle2 className="size-9 text-primary" />
|
||||
</div>
|
||||
<p className="text-xl font-bold text-foreground">
|
||||
<Box
|
||||
style={{
|
||||
minHeight: "100dvh",
|
||||
background: "linear-gradient(135deg, #f0fdf4 0%, #f8fafc 60%, #ecfdf5 100%)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "24px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: 460,
|
||||
background: "#fff",
|
||||
borderRadius: 24,
|
||||
border: "1.5px solid #d1fae5",
|
||||
boxShadow:
|
||||
"0 4px 24px 0 rgba(10,111,77,0.08), 0 1px 4px 0 rgba(0,0,0,0.04)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Green header stripe */}
|
||||
<Box
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #059669 0%, #0ea371 100%)",
|
||||
padding: "40px 32px 32px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<ThemeIcon
|
||||
size={80}
|
||||
radius="xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.2)",
|
||||
border: "2px solid rgba(255,255,255,0.35)",
|
||||
margin: "0 auto 20px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<CheckCircle2 size={42} color="#fff" strokeWidth={2} />
|
||||
</ThemeIcon>
|
||||
<Text fw={800} fz={24} c="#fff" lh={1.2}>
|
||||
Payment successful
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Thank you — your payment has been received. Your booking will be
|
||||
updated shortly and is now confirmed for scheduling.
|
||||
</p>
|
||||
<div className="mt-2 flex w-full flex-col gap-2">
|
||||
<Button type="button" onClick={() => navigate("/bookings")}>
|
||||
Go to My Bookings
|
||||
</Text>
|
||||
<Text fz={14} c="rgba(255,255,255,0.82)" mt={8} lh={1.5}>
|
||||
Your payment has been received and confirmed.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Body */}
|
||||
<Stack gap={0} p={32}>
|
||||
<Stack gap={16}>
|
||||
<Box
|
||||
style={{
|
||||
background: "#f0fdf4",
|
||||
border: "1px solid #bbf7d0",
|
||||
borderRadius: 14,
|
||||
padding: "16px 20px",
|
||||
}}
|
||||
>
|
||||
<Stack gap={10}>
|
||||
<Group gap={10} wrap="nowrap">
|
||||
<Box
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
background: "#16a34a",
|
||||
flexShrink: 0,
|
||||
marginTop: 2,
|
||||
}}
|
||||
/>
|
||||
<Text fz={13.5} c="#14532d" lh={1.5}>
|
||||
Your booking is now confirmed for scheduling.
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap={10} wrap="nowrap">
|
||||
<Box
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
background: "#16a34a",
|
||||
flexShrink: 0,
|
||||
marginTop: 2,
|
||||
}}
|
||||
/>
|
||||
<Text fz={13.5} c="#14532d" lh={1.5}>
|
||||
A receipt will be sent to your registered email.
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap={10} wrap="nowrap">
|
||||
<Box
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
background: "#16a34a",
|
||||
flexShrink: 0,
|
||||
marginTop: 2,
|
||||
}}
|
||||
/>
|
||||
<Text fz={13.5} c="#14532d" lh={1.5}>
|
||||
EDR staff will process your booking and assign a train.
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Divider my={24} color="#e5e7eb" />
|
||||
|
||||
<Stack gap={10}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
color="edr-green"
|
||||
leftSection={<FileText size={17} />}
|
||||
onClick={() => navigate("/bookings")}
|
||||
styles={{
|
||||
root: { height: 48, fontWeight: 700, fontSize: 15 },
|
||||
}}
|
||||
>
|
||||
Go to my bookings
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
fullWidth
|
||||
size="md"
|
||||
radius={12}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
leftSection={<Home size={17} />}
|
||||
onClick={() => navigate("/")}
|
||||
styles={{
|
||||
root: { height: 44, fontWeight: 600, fontSize: 14 },
|
||||
}}
|
||||
>
|
||||
Back to home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<Text fz={12} c="dimmed" ta="center" mt={20} lh={1.5}>
|
||||
Questions? Contact{" "}
|
||||
<Text span c="edr-green" fw={600}>
|
||||
support@edr.et
|
||||
</Text>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user