remove the unused secure checkout file
This commit is contained in:
aryabenade
@@ -6,7 +6,6 @@ import { MelbournePage } from './pages/MelbournePage';
|
||||
import { PassesPage } from './pages/PassesPage';
|
||||
import { AttractionsPage } from './pages/AttractionsPage';
|
||||
import { AttractionDetailsPage } from './pages/AttractionDetailsPage';
|
||||
import { SecureCheckoutPage } from './pages/SecureCheckoutPage';
|
||||
import { BlogsPage } from './pages/BlogsPage';
|
||||
import { BlogDetailsPage } from './pages/BlogDetailsPage';
|
||||
import { FAQPage } from './components/FAQPage';
|
||||
@@ -128,12 +127,6 @@ export function AppRouter({
|
||||
</motion.div>
|
||||
} />
|
||||
|
||||
<Route path="/secure-checkout" element={
|
||||
<motion.div key="secure-checkout" {...pageTransition}>
|
||||
<SecureCheckoutPage {...commonNavHandlers} />
|
||||
</motion.div>
|
||||
} />
|
||||
|
||||
{/* Blog Routes */}
|
||||
<Route path="/blogs" element={
|
||||
<motion.div key="blogs" {...pageTransition}>
|
||||
|
||||
@@ -1,527 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { ArrowLeft, Lock, Shield, CreditCard, Check, X, Tag } from 'lucide-react';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { Input } from '../components/ui/input';
|
||||
import { Label } from '../components/ui/label';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
|
||||
import { Separator } from '../components/ui/separator';
|
||||
import { Badge } from '../components/ui/badge';
|
||||
import Navbar from '../components/Navbar';
|
||||
import { Footer } from '../components/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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user