Skip to content

Add Share/Save, cancellation policy, demo credentials, and Guest favorite badge #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sandeepyadav-lt wants to merge 1 commit into from
Closed

Add Share/Save, cancellation policy, demo credentials, and Guest favorite badge #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions frontend/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ const Header = () => {
>
Become a Host
</Link>
<a
href="#"
className="hidden md:block text-sm font-semibold text-gray-700 hover:bg-gray-100 px-4 py-2 rounded-full"
>
Help
</a>


<div className="relative">
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/components/ListingCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@ const ListingCard = ({ listing }: ListingCardProps) => {
}}
/>

{/* Guest Favorite Badge */}
{listing.reviewCount && listing.reviewCount >= 50 && (
<span className="absolute top-3 left-3 bg-white text-xs font-bold px-2.5 py-1 rounded-full shadow-md border border-gray-100">
Guest favorite
</span>
)}

{/* Favorite Button */}
<button
onClick={handleFavoriteClick}
Expand Down
58 changes: 44 additions & 14 deletions frontend/src/pages/ListingDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import {
FaParking,
FaTv,
FaSnowflake,
FaShareAlt,
FaRegHeart,
FaShieldAlt,
} from 'react-icons/fa';
import { listingService } from '../services/listingService';
import { bookingService } from '../services/bookingService';
Expand Down Expand Up @@ -100,20 +103,32 @@ const ListingDetail = () => {
<h1 className="text-3xl font-semibold text-gray-900 mb-2">
{listing.title}
</h1>
<div className="flex items-center space-x-4 text-sm">
{listing.rating && (
<div className="flex items-center">
<FaStar className="text-black mr-1" />
<span className="font-semibold">{listing.rating}</span>
<span className="text-gray-600 ml-1">
({listing.reviewCount} reviews)
</span>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4 text-sm">
{listing.rating && (
<div className="flex items-center">
<FaStar className="text-black mr-1" />
<span className="font-semibold">{listing.rating}</span>
<span className="text-gray-600 ml-1">
({listing.reviewCount} reviews)
</span>
</div>
)}
<div className="flex items-center text-gray-600">
<FaMapMarkerAlt className="mr-1" />
{listing.location.city}, {listing.location.state},{' '}
{listing.location.country}
</div>
)}
<div className="flex items-center text-gray-600">
<FaMapMarkerAlt className="mr-1" />
{listing.location.city}, {listing.location.state},{' '}
{listing.location.country}
</div>
<div className="flex items-center space-x-3">
<button className="flex items-center space-x-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 px-3 py-2 rounded-lg transition">
<FaShareAlt />
<span>Share</span>
</button>
<button className="flex items-center space-x-2 text-sm font-semibold text-gray-700 hover:bg-gray-100 px-3 py-2 rounded-lg transition">
<FaRegHeart />
<span>Save</span>
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -193,6 +208,20 @@ const ListingDetail = () => {
</div>
</div>

{/* Cancellation Policy */}
<div className="pb-8 border-b border-gray-200">
<h3 className="text-xl font-semibold mb-4">Cancellation policy</h3>
<div className="flex items-start space-x-4">
<FaShieldAlt className="text-green-600 text-xl mt-1 flex-shrink-0" />
<div>
<p className="font-semibold text-gray-900">Free cancellation within 48 hours</p>
<p className="text-gray-600 text-sm mt-1">
Cancel before check-in for a partial refund. After that, the first night is non-refundable.
</p>
</div>
</div>
</div>

{/* Reviews */}
{reviews && reviews.length > 0 && (
<div className="pb-8 border-b border-gray-200">
Expand Down Expand Up @@ -295,10 +324,11 @@ const ListingDetail = () => {
<button
onClick={handleBooking}
disabled={bookingMutation.isPending || !checkIn || !checkOut}
className="w-full bg-airbnb-red text-white font-semibold py-3 rounded-lg hover:bg-red-600 transition disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full bg-gradient-to-r from-airbnb-red to-pink-600 text-white font-semibold py-3 rounded-lg hover:from-red-600 hover:to-pink-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
>
{bookingMutation.isPending ? 'Booking...' : 'Reserve'}
</button>
<p className="text-center text-sm text-gray-500 mt-2">You won't be charged yet</p>

{nights > 0 && (
<div className="mt-6 space-y-2">
Expand Down
40 changes: 40 additions & 0 deletions frontend/src/pages/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,13 @@ const Login = () => {
</p>
</div>

{/* Demo Credentials */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<p className="text-sm font-medium text-blue-800 mb-1">Demo Credentials</p>
<p className="text-xs text-blue-600">Email: <span className="font-mono">demo@example.com</span></p>
<p className="text-xs text-blue-600">Password: <span className="font-mono">password123</span></p>
</div>

<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
<div className="rounded-md shadow-sm -space-y-px">
<div>
Expand Down Expand Up @@ -126,6 +133,39 @@ const Login = () => {
{loginMutation.isPending ? 'Signing in...' : 'Sign in'}
</button>
</div>

<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-gray-50 text-gray-500">or continue with</span>
</div>
</div>

<div className="grid grid-cols-2 gap-3">
<button
type="button"
className="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition"
>
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/>
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
Google
</button>
<button
type="button"
className="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition"
>
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
GitHub
</button>
</div>
</form>
</div>
</div>
Expand Down
Loading