forked from UKSOURCE/ipv6
Merge pull request 'fix run build' (#12) from feat/toan-19052026-paypal into develop
Reviewed-on: UKSOURCE/ipv6#12
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function RegistrationCancelPage() {
|
||||
function CancelContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const token = searchParams.get("token");
|
||||
const [cancelled, setCancelled] = useState(false);
|
||||
@@ -21,6 +21,18 @@ export default function RegistrationCancelPage() {
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!cancelled && (
|
||||
<p className="mt-6 text-on-surface-variant text-xs opacity-60">
|
||||
Đang cập nhật trạng thái...
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RegistrationCancelPage() {
|
||||
return (
|
||||
<main className="min-h-screen bg-[var(--color-background)] flex items-center justify-center px-[var(--spacing-gutter)] py-[80px]">
|
||||
<div className="w-full max-w-[560px]">
|
||||
@@ -59,11 +71,9 @@ export default function RegistrationCancelPage() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{!cancelled && (
|
||||
<p className="mt-6 text-on-surface-variant text-xs opacity-60">
|
||||
Đang cập nhật trạng thái...
|
||||
</p>
|
||||
)}
|
||||
<Suspense fallback={null}>
|
||||
<CancelContent />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function RegistrationSuccessPage() {
|
||||
function SuccessContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const token = searchParams.get("token");
|
||||
const payerId = searchParams.get("PayerID");
|
||||
@@ -43,99 +43,122 @@ export default function RegistrationSuccessPage() {
|
||||
}, [token, payerId]);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[var(--color-background)] flex items-center justify-center px-[var(--spacing-gutter)] py-[80px]">
|
||||
<div className="w-full max-w-[560px]">
|
||||
{state === "loading" && (
|
||||
<div className="glass-panel rounded-xl p-[48px] text-center">
|
||||
<div className="flex justify-center mb-6">
|
||||
<span className="material-symbols-outlined text-[48px] text-primary animate-spin">
|
||||
progress_activity
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-on-surface-variant text-lg">
|
||||
Đang xử lý thanh toán của bạn...
|
||||
</p>
|
||||
<>
|
||||
{state === "loading" && (
|
||||
<div className="glass-panel rounded-xl p-[48px] text-center">
|
||||
<div className="flex justify-center mb-6">
|
||||
<span className="material-symbols-outlined text-[48px] text-primary animate-spin">
|
||||
progress_activity
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-on-surface-variant text-lg">
|
||||
Đang xử lý thanh toán của bạn...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === "success" && (
|
||||
<div className="glass-panel rounded-xl p-[48px] text-center relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
|
||||
{state === "success" && (
|
||||
<div className="glass-panel rounded-xl p-[48px] text-center relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
|
||||
|
||||
<div className="flex justify-center mb-6">
|
||||
<span className="material-symbols-outlined text-[64px] text-green-400">
|
||||
check_circle
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-center mb-6">
|
||||
<span className="material-symbols-outlined text-[64px] text-green-400">
|
||||
check_circle
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="font-[var(--font-display-lg)] text-[clamp(1.5rem,3vw,2rem)] text-on-surface mb-3 leading-[1.2]">
|
||||
Thanh toán thành công!
|
||||
</h1>
|
||||
<h1 className="font-[var(--font-display-lg)] text-[clamp(1.5rem,3vw,2rem)] text-on-surface mb-3 leading-[1.2]">
|
||||
Thanh toán thành công!
|
||||
</h1>
|
||||
|
||||
<p className="text-on-surface-variant text-base mb-8">
|
||||
Cảm ơn bạn đã đăng ký tham dự IPv6 Summit.
|
||||
</p>
|
||||
<p className="text-on-surface-variant text-base mb-8">
|
||||
Cảm ơn bạn đã đăng ký tham dự IPv6 Summit.
|
||||
</p>
|
||||
|
||||
<div className="bg-[var(--color-surface-container-high)] rounded-lg p-6 mb-8 text-left space-y-3">
|
||||
{registrationId && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-on-surface-variant text-sm">Mã đăng ký</span>
|
||||
<span className="text-primary font-mono font-medium">
|
||||
#{registrationId}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-[var(--color-surface-container-high)] rounded-lg p-6 mb-8 text-left space-y-3">
|
||||
{registrationId && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-on-surface-variant text-sm">Số tiền đã thanh toán</span>
|
||||
<span className="text-on-surface font-medium">$120 USD</span>
|
||||
<span className="text-on-surface-variant text-sm">Mã đăng ký</span>
|
||||
<span className="text-primary font-mono font-medium">
|
||||
#{registrationId}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Chúng tôi sẽ liên hệ với bạn qua email để xác nhận.
|
||||
</p>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 text-primary hover:text-on-surface transition-colors text-sm"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">home</span>
|
||||
Về trang chủ
|
||||
</Link>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-on-surface-variant text-sm">Số tiền đã thanh toán</span>
|
||||
<span className="text-on-surface font-medium">$120 USD</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === "error" && (
|
||||
<div className="glass-panel rounded-xl p-[48px] text-center relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
|
||||
|
||||
<div className="flex justify-center mb-6">
|
||||
<span className="material-symbols-outlined text-[64px] text-red-400">
|
||||
error
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="font-[var(--font-display-lg)] text-[clamp(1.5rem,3vw,2rem)] text-on-surface mb-3 leading-[1.2]">
|
||||
Có lỗi xảy ra
|
||||
</h1>
|
||||
|
||||
{errorMessage && (
|
||||
<p className="text-on-surface-variant text-base mb-8">
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Chúng tôi sẽ liên hệ với bạn qua email để xác nhận.
|
||||
</p>
|
||||
|
||||
<div className="mt-8">
|
||||
<Link
|
||||
href="/registration"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg gold-gradient-bg text-on-primary font-medium transition-opacity hover:opacity-90"
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 text-primary hover:text-on-surface transition-colors text-sm"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">refresh</span>
|
||||
Thử lại đăng ký
|
||||
<span className="material-symbols-outlined text-[18px]">home</span>
|
||||
Về trang chủ
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === "error" && (
|
||||
<div className="glass-panel rounded-xl p-[48px] text-center relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
|
||||
|
||||
<div className="flex justify-center mb-6">
|
||||
<span className="material-symbols-outlined text-[64px] text-red-400">
|
||||
error
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="font-[var(--font-display-lg)] text-[clamp(1.5rem,3vw,2rem)] text-on-surface mb-3 leading-[1.2]">
|
||||
Có lỗi xảy ra
|
||||
</h1>
|
||||
|
||||
{errorMessage && (
|
||||
<p className="text-on-surface-variant text-base mb-8">
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Link
|
||||
href="/registration"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg gold-gradient-bg text-on-primary font-medium transition-opacity hover:opacity-90"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[18px]">refresh</span>
|
||||
Thử lại đăng ký
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RegistrationSuccessPage() {
|
||||
return (
|
||||
<main className="min-h-screen bg-[var(--color-background)] flex items-center justify-center px-[var(--spacing-gutter)] py-[80px]">
|
||||
<div className="w-full max-w-[560px]">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="glass-panel rounded-xl p-[48px] text-center">
|
||||
<div className="flex justify-center mb-6">
|
||||
<span className="material-symbols-outlined text-[48px] text-primary animate-spin">
|
||||
progress_activity
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-on-surface-variant text-lg">
|
||||
Đang tải...
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<SuccessContent />
|
||||
</Suspense>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user