Shema
This commit is contained in:
Timo Knuth
@@ -1,175 +1,175 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { Copy, Check, ExternalLink, Gift } from 'lucide-react';
|
||||
|
||||
interface CouponData {
|
||||
code: string;
|
||||
discount: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
expiryDate?: string;
|
||||
redeemUrl?: string;
|
||||
}
|
||||
|
||||
export default function CouponPage() {
|
||||
const params = useParams();
|
||||
const slug = params.slug as string;
|
||||
const [coupon, setCoupon] = useState<CouponData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCoupon() {
|
||||
try {
|
||||
const res = await fetch(`/api/qrs/public/${slug}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
if (data.contentType === 'COUPON') {
|
||||
setCoupon(data.content as CouponData);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching coupon:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchCoupon();
|
||||
}, [slug]);
|
||||
|
||||
const copyCode = async () => {
|
||||
if (coupon?.code) {
|
||||
await navigator.clipboard.writeText(coupon.code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
// Loading
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-pink-100">
|
||||
<div className="w-10 h-10 border-3 border-pink-200 border-t-pink-600 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Not found
|
||||
if (!coupon) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-pink-100 px-6">
|
||||
<div className="text-center bg-white rounded-2xl p-8 shadow-lg">
|
||||
<p className="text-gray-500 text-lg">This coupon is not available.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isExpired = coupon.expiryDate && new Date(coupon.expiryDate) < new Date();
|
||||
|
||||
return (<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6 py-12">
|
||||
<div className="max-w-sm w-full">
|
||||
{/* Card */}
|
||||
<div className="bg-white rounded-3xl shadow-xl overflow-hidden">
|
||||
{/* Colorful Header */}
|
||||
<div className="bg-gradient-to-br from-[#DB5375] to-[#B3FFB3] text-gray-900 p-8 text-center relative overflow-hidden">
|
||||
{/* Decorative circles */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="w-14 h-14 bg-[#DB5375]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<Gift className="w-7 h-7 text-[#DB5375]" />
|
||||
</div>
|
||||
<p className="text-gray-700 text-sm mb-1">{coupon.title || 'Special Offer'}</p>
|
||||
<p className="text-4xl font-bold tracking-tight text-gray-900">{coupon.discount}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dotted line with circles */}
|
||||
<div className="relative py-4">
|
||||
<div className="relative py-4">
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-5 h-10 bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] rounded-r-full"></div>
|
||||
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-5 h-10 bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] rounded-l-full"></div>
|
||||
<div className="border-t-2 border-dashed border-gray-200 mx-8"></div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="px-8 pb-8">
|
||||
{coupon.description && (
|
||||
<p className="text-gray-500 text-sm text-center mb-6">{coupon.description}</p>
|
||||
)}
|
||||
|
||||
{/* Code Box */}
|
||||
<div className="bg-gray-50 rounded-2xl p-5 mb-4 border border-emerald-100">
|
||||
<p className="text-xs text-emerald-600 text-center mb-2 font-medium uppercase tracking-wider">Your Code</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<code className="text-2xl font-mono font-bold text-gray-900 tracking-wider">
|
||||
{coupon.code}
|
||||
</code>
|
||||
<button
|
||||
onClick={copyCode}
|
||||
className={`p-2.5 rounded-xl transition-all ${copied
|
||||
? 'bg-emerald-100 text-emerald-600'
|
||||
: 'bg-white text-gray-500 hover:text-rose-500 shadow-sm hover:shadow'
|
||||
}`}
|
||||
aria-label="Copy code"
|
||||
>
|
||||
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
{copied && (
|
||||
<p className="text-emerald-600 text-xs text-center mt-2 font-medium">Copied!</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expiry */}
|
||||
{coupon.expiryDate && (
|
||||
<p className={`text-sm text-center mb-6 font-medium ${isExpired ? 'text-red-500' : 'text-gray-400'}`}>
|
||||
{isExpired
|
||||
? '⚠️ This coupon has expired'
|
||||
: `Valid until ${new Date(coupon.expiryDate).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}`
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Redeem Button */}
|
||||
{coupon.redeemUrl && !isExpired && (
|
||||
<a
|
||||
href={ensureAbsoluteUrl(coupon.redeemUrl)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full py-4 rounded-xl font-semibold text-center bg-gradient-to-r from-[#076653] to-[#0C342C] text-white hover:from-[#087861] hover:to-[#0E4036] transition-all shadow-lg shadow-emerald-200"
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
Redeem Now
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="text-center text-sm text-white/60 mt-6">
|
||||
Powered by QR Master
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ensureAbsoluteUrl(url: string | undefined): string | undefined {
|
||||
if (!url) return undefined;
|
||||
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
|
||||
return url;
|
||||
}
|
||||
return `https://${url}`;
|
||||
}
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { Copy, Check, ExternalLink, Gift } from 'lucide-react';
|
||||
|
||||
interface CouponData {
|
||||
code: string;
|
||||
discount: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
expiryDate?: string;
|
||||
redeemUrl?: string;
|
||||
}
|
||||
|
||||
export default function CouponPage() {
|
||||
const params = useParams();
|
||||
const slug = params.slug as string;
|
||||
const [coupon, setCoupon] = useState<CouponData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCoupon() {
|
||||
try {
|
||||
const res = await fetch(`/api/qrs/public/${slug}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
if (data.contentType === 'COUPON') {
|
||||
setCoupon(data.content as CouponData);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching coupon:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
fetchCoupon();
|
||||
}, [slug]);
|
||||
|
||||
const copyCode = async () => {
|
||||
if (coupon?.code) {
|
||||
await navigator.clipboard.writeText(coupon.code);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
// Loading
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-pink-100">
|
||||
<div className="w-10 h-10 border-3 border-pink-200 border-t-pink-600 rounded-full animate-spin"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Not found
|
||||
if (!coupon) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-pink-100 px-6">
|
||||
<div className="text-center bg-white rounded-2xl p-8 shadow-lg">
|
||||
<p className="text-gray-500 text-lg">This coupon is not available.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isExpired = coupon.expiryDate && new Date(coupon.expiryDate) < new Date();
|
||||
|
||||
return (<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] px-6 py-12">
|
||||
<div className="max-w-sm w-full">
|
||||
{/* Card */}
|
||||
<div className="bg-white rounded-3xl shadow-xl overflow-hidden">
|
||||
{/* Colorful Header */}
|
||||
<div className="bg-gradient-to-br from-[#DB5375] to-[#B3FFB3] text-gray-900 p-8 text-center relative overflow-hidden">
|
||||
{/* Decorative circles */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="w-14 h-14 bg-[#DB5375]/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<Gift className="w-7 h-7 text-[#DB5375]" />
|
||||
</div>
|
||||
<p className="text-gray-700 text-sm mb-1">{coupon.title || 'Special Offer'}</p>
|
||||
<p className="text-4xl font-bold tracking-tight text-gray-900">{coupon.discount}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dotted line with circles */}
|
||||
<div className="relative py-4">
|
||||
<div className="relative py-4">
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-5 h-10 bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] rounded-r-full"></div>
|
||||
<div className="absolute right-0 top-1/2 -translate-y-1/2 w-5 h-10 bg-gradient-to-br from-[#FAF8F5] via-[#C6C0B3] to-[#4C5F4E] rounded-l-full"></div>
|
||||
<div className="border-t-2 border-dashed border-gray-200 mx-8"></div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="px-8 pb-8">
|
||||
{coupon.description && (
|
||||
<p className="text-gray-500 text-sm text-center mb-6">{coupon.description}</p>
|
||||
)}
|
||||
|
||||
{/* Code Box */}
|
||||
<div className="bg-gray-50 rounded-2xl p-5 mb-4 border border-emerald-100">
|
||||
<p className="text-xs text-emerald-600 text-center mb-2 font-medium uppercase tracking-wider">Your Code</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<code className="text-2xl font-mono font-bold text-gray-900 tracking-wider">
|
||||
{coupon.code}
|
||||
</code>
|
||||
<button
|
||||
onClick={copyCode}
|
||||
className={`p-2.5 rounded-xl transition-all ${copied
|
||||
? 'bg-emerald-100 text-emerald-600'
|
||||
: 'bg-white text-gray-500 hover:text-rose-500 shadow-sm hover:shadow'
|
||||
}`}
|
||||
aria-label="Copy code"
|
||||
>
|
||||
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
{copied && (
|
||||
<p className="text-emerald-600 text-xs text-center mt-2 font-medium">Copied!</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expiry */}
|
||||
{coupon.expiryDate && (
|
||||
<p className={`text-sm text-center mb-6 font-medium ${isExpired ? 'text-red-500' : 'text-gray-400'}`}>
|
||||
{isExpired
|
||||
? '⚠️ This coupon has expired'
|
||||
: `Valid until ${new Date(coupon.expiryDate).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}`
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Redeem Button */}
|
||||
{coupon.redeemUrl && !isExpired && (
|
||||
<a
|
||||
href={ensureAbsoluteUrl(coupon.redeemUrl)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full py-4 rounded-xl font-semibold text-center bg-gradient-to-r from-[#076653] to-[#0C342C] text-white hover:from-[#087861] hover:to-[#0E4036] transition-all shadow-lg shadow-emerald-200"
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
Redeem Now
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="text-center text-sm text-white/60 mt-6">
|
||||
Powered by QR Master
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ensureAbsoluteUrl(url: string | undefined): string | undefined {
|
||||
if (!url) return undefined;
|
||||
if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(url)) {
|
||||
return url;
|
||||
}
|
||||
return `https://${url}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user