527 lines
20 KiB
TypeScript
527 lines
20 KiB
TypeScript
import { useState } from 'react';
|
|
import { motion } from 'motion/react';
|
|
import { ArrowLeft, Lock, Shield, CreditCard, Check, X, Tag } from 'lucide-react';
|
|
import { Button } from './ui/button';
|
|
import { Input } from './ui/input';
|
|
import { Label } from './ui/label';
|
|
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
|
|
import { Separator } from './ui/separator';
|
|
import { Badge } from './ui/badge';
|
|
import Navbar from './Navbar';
|
|
import { Footer } from './Footer';
|
|
|
|
interface User {
|
|
email: string;
|
|
name: string;
|
|
}
|
|
|
|
interface SecureCheckoutPageProps {
|
|
onBackClick: () => void;
|
|
onHomeClick: () => void;
|
|
onMelbourneClick: () => void;
|
|
onPassesClick: () => void;
|
|
onCheckoutClick: () => void;
|
|
onSignInClick: () => void;
|
|
onSignOutClick: () => void;
|
|
onAttractionsClick: () => void;
|
|
onBlogsClick: () => void;
|
|
onHowItWorksClick: () => void;
|
|
onFAQClick: () => void;
|
|
onPrivacyPolicyClick: () => void;
|
|
onAboutUsClick: () => void;
|
|
onProfileClick: () => void;
|
|
onCityCardsClick: () => void;
|
|
onMagicItineraryClick: () => void;
|
|
onPostCardsClick: () => void;
|
|
onOffersClick: () => void;
|
|
onContactUsClick?: () => void;
|
|
onEsimsClick?: () => void;
|
|
onHotelDiscountsClick?: () => void;
|
|
currentPage?: string;
|
|
user: User | null;
|
|
}
|
|
|
|
export function SecureCheckoutPage({
|
|
onBackClick,
|
|
onHomeClick,
|
|
onMelbourneClick,
|
|
onPassesClick,
|
|
onCheckoutClick,
|
|
onSignInClick,
|
|
onSignOutClick,
|
|
onAttractionsClick,
|
|
onBlogsClick,
|
|
onHowItWorksClick,
|
|
onFAQClick,
|
|
onPrivacyPolicyClick,
|
|
onAboutUsClick,
|
|
onProfileClick,
|
|
onCityCardsClick,
|
|
onMagicItineraryClick,
|
|
onPostCardsClick,
|
|
onOffersClick,
|
|
onContactUsClick,
|
|
onEsimsClick,
|
|
onHotelDiscountsClick,
|
|
currentPage,
|
|
user
|
|
}: SecureCheckoutPageProps) {
|
|
const [selectedTab, setSelectedTab] = useState('myself');
|
|
const [formData, setFormData] = useState({
|
|
firstName: 'Frank',
|
|
lastName: 'Adam S',
|
|
email: 'frank2023@mail.com',
|
|
phone: '',
|
|
travelDate: '',
|
|
billingAddress: '',
|
|
city: '',
|
|
country: 'England',
|
|
state: '',
|
|
zipCode: '000000'
|
|
});
|
|
const [discountCode, setDiscountCode] = useState('');
|
|
const [isEmailVerified, setIsEmailVerified] = useState(false);
|
|
const [showPaymentSuccess, setShowPaymentSuccess] = useState(false);
|
|
|
|
const orderSummary = {
|
|
item: 'Melbourne - Unlimited Card',
|
|
duration: '2 Days',
|
|
adults: 3,
|
|
kids: 3,
|
|
quantity: 1,
|
|
price: 49.80,
|
|
discount: 7.20,
|
|
tax: 2.24
|
|
};
|
|
|
|
const subtotal = orderSummary.price;
|
|
const discount = orderSummary.discount;
|
|
const total = subtotal - discount;
|
|
|
|
const handleInputChange = (field: string, value: string) => {
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handlePayment = () => {
|
|
setShowPaymentSuccess(true);
|
|
setTimeout(() => {
|
|
setShowPaymentSuccess(false);
|
|
onHomeClick();
|
|
}, 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Navbar
|
|
onHomeClick={onHomeClick}
|
|
onMelbourneClick={onMelbourneClick}
|
|
onPassesClick={onPassesClick}
|
|
onCheckoutClick={onCheckoutClick}
|
|
onSignInClick={onSignInClick}
|
|
onSignOutClick={onSignOutClick}
|
|
onAttractionsClick={onAttractionsClick}
|
|
onBlogsClick={onBlogsClick}
|
|
onHowItWorksClick={onHowItWorksClick}
|
|
onFAQClick={onFAQClick}
|
|
onPrivacyPolicyClick={onPrivacyPolicyClick}
|
|
onAboutUsClick={onAboutUsClick}
|
|
onProfileClick={onProfileClick}
|
|
onCityCardsClick={onCityCardsClick}
|
|
onMagicItineraryClick={onMagicItineraryClick}
|
|
onPostCardsClick={onPostCardsClick}
|
|
onOffersClick={onOffersClick}
|
|
currentPage={currentPage}
|
|
isUserSignedIn={!!user}
|
|
user={user}
|
|
/>
|
|
|
|
<div className="container mx-auto px-4 py-12">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="mb-8"
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onBackClick}
|
|
className="mb-6 p-0 hover:bg-transparent"
|
|
>
|
|
<ArrowLeft className="w-5 h-5 mr-2" />
|
|
Back
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-4 mb-2">
|
|
<h1 className="font-merchant text-3xl md:text-4xl leading-tight">
|
|
Secure <span className="text-primary">Checkout</span>
|
|
</h1>
|
|
<div className="flex items-center gap-2 text-green-600">
|
|
<Shield className="w-5 h-5" />
|
|
<span className="font-poppins text-sm font-medium">SSL Secured</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-muted-foreground">
|
|
Complete your purchase securely. Your payment information is protected.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid lg:grid-cols-3 gap-8">
|
|
{/* Checkout Form */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="lg:col-span-2"
|
|
>
|
|
<Card className="shadow-lg border-0">
|
|
<CardHeader className="pb-6">
|
|
<Tabs value={selectedTab} onValueChange={setSelectedTab} className="w-full">
|
|
<TabsList className="grid w-fit grid-cols-2 bg-muted/50">
|
|
<TabsTrigger value="myself" className="px-6">For myself</TabsTrigger>
|
|
<TabsTrigger value="gift" className="px-6">To gift Someone</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-8">
|
|
{/* Personal Information */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-medium">
|
|
1
|
|
</div>
|
|
<h2 className="font-merchant text-xl font-medium leading-snug">Personal Information</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="firstName">First Name</Label>
|
|
<Input
|
|
id="firstName"
|
|
value={formData.firstName}
|
|
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="lastName">Last Name</Label>
|
|
<Input
|
|
id="lastName"
|
|
value={formData.lastName}
|
|
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email Address</Label>
|
|
<div className="relative">
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => handleInputChange('email', e.target.value)}
|
|
className="h-12 pr-20"
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
variant={isEmailVerified ? "default" : "outline"}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 h-8"
|
|
onClick={() => setIsEmailVerified(!isEmailVerified)}
|
|
>
|
|
{isEmailVerified ? (
|
|
<>
|
|
<Check className="w-3 h-3 mr-1" />
|
|
Verified
|
|
</>
|
|
) : (
|
|
'Verify'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">Phone Number</Label>
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
placeholder="Enter mobile number"
|
|
value={formData.phone}
|
|
onChange={(e) => handleInputChange('phone', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="travelDate">Select Travel Date</Label>
|
|
<Input
|
|
id="travelDate"
|
|
type="date"
|
|
value={formData.travelDate}
|
|
onChange={(e) => handleInputChange('travelDate', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<Separator />
|
|
|
|
{/* Billing Information */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="space-y-6"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-medium">
|
|
2
|
|
</div>
|
|
<h2 className="font-merchant text-xl font-medium leading-snug">Billing Information</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="billingAddress">Billing Address</Label>
|
|
<Input
|
|
id="billingAddress"
|
|
placeholder="Enter Address"
|
|
value={formData.billingAddress}
|
|
onChange={(e) => handleInputChange('billingAddress', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="city">City</Label>
|
|
<Input
|
|
id="city"
|
|
placeholder="Enter City"
|
|
value={formData.city}
|
|
onChange={(e) => handleInputChange('city', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="country">Country</Label>
|
|
<Input
|
|
id="country"
|
|
value={formData.country}
|
|
onChange={(e) => handleInputChange('country', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="state">State</Label>
|
|
<Input
|
|
id="state"
|
|
placeholder="State"
|
|
value={formData.state}
|
|
onChange={(e) => handleInputChange('state', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="zipCode">Zip Code</Label>
|
|
<Input
|
|
id="zipCode"
|
|
value={formData.zipCode}
|
|
onChange={(e) => handleInputChange('zipCode', e.target.value)}
|
|
className="h-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Order Summary */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="lg:col-span-1"
|
|
>
|
|
<Card className="shadow-lg border-0 sticky top-6">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<CreditCard className="w-5 h-5" />
|
|
Order Summary
|
|
</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-6">
|
|
{/* Item Details */}
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-start">
|
|
<div className="space-y-2">
|
|
<h3 className="font-poppins font-medium">{orderSummary.item}</h3>
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<span>{orderSummary.duration}</span>
|
|
<span>•</span>
|
|
<span>Adults-{orderSummary.adults}</span>
|
|
<span>•</span>
|
|
<span>Kids-{orderSummary.kids}</span>
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Qty: {orderSummary.quantity}
|
|
</div>
|
|
</div>
|
|
<div className="font-poppins text-lg font-medium">
|
|
${orderSummary.price.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Discount Code */}
|
|
<div className="space-y-3">
|
|
<div className="flex gap-2">
|
|
<Input
|
|
placeholder="Gift or discount code"
|
|
value={discountCode}
|
|
onChange={(e) => setDiscountCode(e.target.value)}
|
|
className="flex-1"
|
|
/>
|
|
<Button variant="outline" className="px-6">
|
|
Apply
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Price Breakdown */}
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between">
|
|
<span>Subtotal</span>
|
|
<span>${subtotal.toFixed(2)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-green-600">
|
|
<span>Discount</span>
|
|
<span>-${discount.toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Total */}
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<div className="font-medium">Total</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Including ${orderSummary.tax.toFixed(2)} in taxes
|
|
</div>
|
|
</div>
|
|
<div className="text-2xl font-bold text-primary">
|
|
${total.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment Button */}
|
|
<Button
|
|
onClick={handlePayment}
|
|
className="w-full h-14 text-lg bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary/80 relative overflow-hidden group"
|
|
disabled={showPaymentSuccess}
|
|
>
|
|
{showPaymentSuccess ? (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<Check className="w-5 h-5" />
|
|
Payment Successful!
|
|
</motion.div>
|
|
) : (
|
|
<>
|
|
<Lock className="w-5 h-5 mr-2" />
|
|
Pay ${total.toFixed(2)}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
{/* Security Notice */}
|
|
<div className="text-xs text-muted-foreground leading-relaxed">
|
|
Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our privacy policy.
|
|
</div>
|
|
|
|
{/* Trust Badges */}
|
|
<div className="flex items-center justify-center gap-4 pt-4">
|
|
<div className="flex items-center gap-2 text-green-600">
|
|
<Shield className="w-4 h-4" />
|
|
<span className="text-xs">256-bit SSL</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-blue-600">
|
|
<Lock className="w-4 h-4" />
|
|
<span className="text-xs">Secure Payment</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
<Footer
|
|
onHomeClick={onHomeClick}
|
|
onMelbourneClick={onMelbourneClick}
|
|
onPassesClick={onPassesClick}
|
|
onCheckoutClick={onCheckoutClick}
|
|
onSignInClick={onSignInClick}
|
|
onAttractionsClick={onAttractionsClick}
|
|
onBlogsClick={onBlogsClick}
|
|
onHowItWorksClick={onHowItWorksClick}
|
|
onFAQClick={onFAQClick}
|
|
onPrivacyPolicyClick={onPrivacyPolicyClick}
|
|
onAboutUsClick={onAboutUsClick}
|
|
onProfileClick={onProfileClick}
|
|
onCityCardsClick={onCityCardsClick}
|
|
onMagicItineraryClick={onMagicItineraryClick}
|
|
onPostCardsClick={onPostCardsClick}
|
|
onOffersClick={onOffersClick}
|
|
/>
|
|
|
|
{/* Success Overlay */}
|
|
{showPaymentSuccess && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0, rotate: 180 }}
|
|
animate={{ scale: 1, rotate: 0 }}
|
|
className="bg-white p-8 rounded-2xl shadow-2xl text-center max-w-sm mx-4"
|
|
>
|
|
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Check className="w-8 h-8 text-green-600" />
|
|
</div>
|
|
<h3 className="text-xl font-medium mb-2">Payment Successful!</h3>
|
|
<p className="text-muted-foreground">
|
|
Your Melbourne CityCard has been purchased successfully.
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |