CityCards/CityCards-Website
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change the heading of paymentPage

Browse Source
This commit is contained in:
aryabenade
2026-04-20 16:25:27 +05:30
parent b19d3194cf
commit a88958603e
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/CheckoutPage2.tsx
View File

@@ -254,7 +254,7 @@ function CheckoutConfigCard({
</div> </div>
<div className="px-6 pb-6"> <div className="px-6 pb-6">
<motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={onProceed} className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20"> <motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={() => navigate(`/payment/390`)} className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20">
Proceed to Pay Proceed to Pay
</motion.button> </motion.button>
</div> </div>
@@ -604,13 +604,13 @@ export function CheckoutPage2({
onClick={() => navigate(-1)} onClick={() => navigate(-1)}
className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8" className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8"
> >
<ArrowLeft className="w-4 h-4" />Back to Cart <ArrowLeft className="w-4 h-4" />Back
</button> </button>
<div className="mb-10"> <div className="mb-10">
<h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight"> <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
<span className="font-light">Checkout</span>{' '} <span className="font-light">Checkout</span>{' '}
<span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent"> <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent pr-3">
{city?.name || checkoutItem.city} {city?.name || checkoutItem.city}
</span> </span>
</h2> </h2>

12
src/pages/PaymentDetailsPage.tsx
View File

@@ -10,7 +10,7 @@ import { Card, CardContent, CardHeader } from '../components/ui/card';
import { Separator } from '../components/ui/separator'; import { Separator } from '../components/ui/separator';
import { useGetUserProfileDetailsQuery } from '../Redux/services/profile.service'; import { useGetUserProfileDetailsQuery } from '../Redux/services/profile.service';
import LoadingSpinner from '../components/LoadingSpinner'; import LoadingSpinner from '../components/LoadingSpinner';
import { useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { useGetCardBookingDetailsQuery, useStoreRecepientDetailsMutation, useStoreRecipientDetailsMutation } from '../Redux/services/cards.service'; import { useGetCardBookingDetailsQuery, useStoreRecepientDetailsMutation, useStoreRecipientDetailsMutation } from '../Redux/services/cards.service';
import { toast } from 'sonner'; import { toast } from 'sonner';
@@ -190,6 +190,7 @@ export function PaymentDetailsPage({
city: '', city: '',
postalCode: '' postalCode: ''
}); });
const navigate = useNavigate()
const userId = localStorage.getItem("userId"); const userId = localStorage.getItem("userId");
const { bookingId } = useParams() const { bookingId } = useParams()
@@ -314,7 +315,7 @@ export function PaymentDetailsPage({
{/* Back Button */} {/* Back Button */}
<button <button
onClick={onBackClick} onClick={() => navigate(-1)}
className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8" className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8"
> >
<ArrowLeft className="w-4 h-4" /> Back <ArrowLeft className="w-4 h-4" /> Back
@@ -324,8 +325,9 @@ export function PaymentDetailsPage({
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-8"> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
<div className="flex items-center gap-4 mb-2"> <div className="flex items-center gap-4 mb-2">
<h1 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight"> <h1 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
<span className="font-light">Secure</span>{' '} <span className="font-light">Review &
<span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent">Checkout</span> </span>{' '}
<span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent pr-2">Pay</span>
</h1> </h1>
<div className="flex items-center gap-2 text-[#22a86b]"> <div className="flex items-center gap-2 text-[#22a86b]">
<Shield className="w-4 h-4" /> <Shield className="w-4 h-4" />
@@ -603,7 +605,7 @@ export function PaymentDetailsPage({
) : ( ) : (
<> <>
<Lock className="w-4 h-4" /> <Lock className="w-4 h-4" />
Complete Payment · ${bookingDetails.totalAmount} Complete Payment · ${bookingDetails?.totalAmount}
</> </>
)} )}
</motion.button> </motion.button>