mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +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
@@ -0,0 +1,156 @@
|
||||
import { MigrationInterface, QueryRunner } from 'typeorm';
|
||||
|
||||
/**
|
||||
* Full wagon re-seed — runs in this order:
|
||||
*
|
||||
* 1. DELETE all existing wagons (hard delete, not soft).
|
||||
* 2. UPSERT all 10 standard wagon types so they are guaranteed to exist.
|
||||
* 3. INSERT 50 wagons per wagon type (500 total), distributed evenly across
|
||||
* the 5 main operational yards (10 wagons per yard per type):
|
||||
*
|
||||
* KALITY — Kality Rail Terminal
|
||||
* MOJO — Mojo Dry Port
|
||||
* DIRE_DAWA — Dire Dawa Yard
|
||||
* DJIB_PORT — Djibouti Port Terminal
|
||||
* NAGAD — Nagad Terminal, Djibouti
|
||||
*
|
||||
* Wagon numbers follow the pattern <TYPE_CODE>-NNNN (e.g. NW5-0001 … NW5-0050).
|
||||
* Yard IDs are fetched live from freight.yards so the migration is safe across
|
||||
* all environments regardless of UUID values.
|
||||
*/
|
||||
export class SeedWagonsWithYardAssignment1784000000001
|
||||
implements MigrationInterface
|
||||
{
|
||||
name = 'SeedWagonsWithYardAssignment1784000000001';
|
||||
|
||||
public async up(queryRunner: QueryRunner): Promise<void> {
|
||||
// ── STEP 1: Remove all wagons ──────────────────────────────────────────
|
||||
await queryRunner.query(`DELETE FROM freight.wagons;`);
|
||||
|
||||
// ── STEP 2: Ensure all 10 wagon types exist ────────────────────────────
|
||||
await queryRunner.query(`
|
||||
INSERT INTO freight.wagon_types (
|
||||
code,
|
||||
name,
|
||||
capacity_tons,
|
||||
length_meters,
|
||||
max_wagons_per_train,
|
||||
supported_load_types,
|
||||
is_active,
|
||||
tare_weight_tons
|
||||
)
|
||||
VALUES
|
||||
('NW7', 'Double deck sedan wagon', 22, 26.066, NULL, ARRAY['vehicles', 'sedan'], true, 18.0),
|
||||
('NW5', 'Flat wagon (container)', 70, 14.000, 53, ARRAY['container', 'steel', 'machinery'], true, 22.0),
|
||||
('PW2', 'Box wagon', 70, 17.066, 18, ARRAY['general cargo', 'break bulk'], true, 20.0),
|
||||
('GW2', 'Tank wagon', 70, 12.228, 37, ARRAY['liquid', 'fuel'], true, 25.0),
|
||||
('CW4', 'Gondola covered wagon', 70, 13.976, 37, ARRAY['covered bulk cargo'], true, 22.0),
|
||||
('CW3', 'Gondola open wagon', 70, 13.976, NULL, ARRAY['open bulk cargo'], true, 20.0),
|
||||
('KW2', 'Hopper covered wagon', 69, 16.466, NULL, ARRAY['bulk grains'], true, 22.0),
|
||||
('KW3', 'Hopper open wagon', 70, 14.400, NULL, ARRAY['coal', 'bulk cargo'], true, 20.0),
|
||||
('NW6', 'Flat wagon (long cargo)', 70, 18.560, NULL, ARRAY['long cargo'], true, 22.0),
|
||||
('BW1', 'Refrigerated wagon', 38, 21.996, NULL, ARRAY['refrigerated cargo'], true, 24.0)
|
||||
ON CONFLICT (code) DO UPDATE SET
|
||||
name = EXCLUDED.name,
|
||||
capacity_tons = EXCLUDED.capacity_tons,
|
||||
length_meters = EXCLUDED.length_meters,
|
||||
max_wagons_per_train = EXCLUDED.max_wagons_per_train,
|
||||
supported_load_types = EXCLUDED.supported_load_types,
|
||||
is_active = true,
|
||||
tare_weight_tons = EXCLUDED.tare_weight_tons,
|
||||
deleted_at = NULL,
|
||||
updated_at = now();
|
||||
`);
|
||||
|
||||
// ── STEP 3: Seed 50 wagons per type across 5 yards ────────────────────
|
||||
await queryRunner.query(`
|
||||
DO $$
|
||||
DECLARE
|
||||
wt RECORD;
|
||||
yard_kality UUID;
|
||||
yard_mojo UUID;
|
||||
yard_dire_dawa UUID;
|
||||
yard_djib_port UUID;
|
||||
yard_nagad UUID;
|
||||
yards UUID[];
|
||||
i INT;
|
||||
yard_id UUID;
|
||||
wagon_num TEXT;
|
||||
v_tare NUMERIC;
|
||||
v_payload NUMERIC;
|
||||
BEGIN
|
||||
-- Fetch yard IDs by code (safe across envs — UUIDs differ per DB)
|
||||
SELECT id INTO yard_kality FROM freight.yards WHERE code = 'KALITY' LIMIT 1;
|
||||
SELECT id INTO yard_mojo FROM freight.yards WHERE code = 'MOJO' LIMIT 1;
|
||||
SELECT id INTO yard_dire_dawa FROM freight.yards WHERE code = 'DIRE_DAWA' LIMIT 1;
|
||||
SELECT id INTO yard_djib_port FROM freight.yards WHERE code = 'DJIB_PORT' LIMIT 1;
|
||||
SELECT id INTO yard_nagad FROM freight.yards WHERE code = 'NAGAD' LIMIT 1;
|
||||
|
||||
IF yard_kality IS NULL OR yard_mojo IS NULL OR yard_dire_dawa IS NULL
|
||||
OR yard_djib_port IS NULL OR yard_nagad IS NULL
|
||||
THEN
|
||||
RAISE EXCEPTION 'One or more operational yards not found. Run the yards seed first.';
|
||||
END IF;
|
||||
|
||||
yards := ARRAY[
|
||||
yard_kality,
|
||||
yard_mojo,
|
||||
yard_dire_dawa,
|
||||
yard_djib_port,
|
||||
yard_nagad
|
||||
];
|
||||
|
||||
FOR wt IN
|
||||
SELECT id, code, capacity_tons, tare_weight_tons
|
||||
FROM freight.wagon_types
|
||||
WHERE is_active = true
|
||||
ORDER BY code
|
||||
LOOP
|
||||
v_tare := COALESCE(wt.tare_weight_tons, 20.0);
|
||||
v_payload := COALESCE(wt.capacity_tons, 60.0);
|
||||
|
||||
FOR i IN 1 .. 50 LOOP
|
||||
wagon_num := wt.code || '-' || LPAD(i::TEXT, 4, '0');
|
||||
yard_id := yards[ ((i - 1) % 5) + 1 ]; -- round-robin: 1→K, 2→M, 3→D, 4→J, 5→N, 6→K …
|
||||
|
||||
INSERT INTO freight.wagons (
|
||||
id,
|
||||
wagon_number,
|
||||
wagon_type_id,
|
||||
tare_weight,
|
||||
max_payload_weight,
|
||||
status,
|
||||
current_yard_id,
|
||||
train_id,
|
||||
sequence_number,
|
||||
notes,
|
||||
train_set_wagon_id,
|
||||
current_train_schedule_id,
|
||||
created_at,
|
||||
updated_at
|
||||
)
|
||||
VALUES (
|
||||
uuid_generate_v4(),
|
||||
wagon_num,
|
||||
wt.id,
|
||||
v_tare,
|
||||
v_payload,
|
||||
'Available',
|
||||
yard_id,
|
||||
NULL, NULL, NULL, NULL, NULL,
|
||||
now(), now()
|
||||
)
|
||||
ON CONFLICT (wagon_number) DO NOTHING;
|
||||
END LOOP;
|
||||
|
||||
RAISE NOTICE 'Seeded 50 wagons for type %.', wt.code;
|
||||
END LOOP;
|
||||
END $$;
|
||||
`);
|
||||
}
|
||||
|
||||
public async down(queryRunner: QueryRunner): Promise<void> {
|
||||
// Remove all seeded wagons (full wipe — mirrors what up() did)
|
||||
await queryRunner.query(`DELETE FROM freight.wagons;`);
|
||||
}
|
||||
}
|
||||
@@ -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