gnx/Hotel-Booking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Iliyan Angelov
2025-12-01 23:30:28 +02:00
parent f7d6f24e49
commit 86e78247c3
38 changed files with 3765 additions and 547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
Frontend/src/features/content/pages/AboutPage.tsx
View File

@@ -18,10 +18,14 @@ import { createSanitizedHtml } from '../../../shared/utils/htmlSanitizer';
const AboutPage: React.FC = () => {
const { settings } = useCompanySettings();
const [pageContent, setPageContent] = useState<PageContent | null>(null);
const [apiError, setApiError] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchPageContent = async () => {
try {
setLoading(true);
setApiError(false);
const response = await pageContentService.getAboutContent();
if (response.status === 'success' && response.data?.page_content) {
setPageContent(response.data.page_content);
@@ -39,10 +43,16 @@ const AboutPage: React.FC = () => {
}
metaDescription.setAttribute('content', response.data.page_content.meta_description);
}
} else {
// No data received - don't set error, just leave pageContent as null
setPageContent(null);
}
} catch (err: any) {
console.error('Error fetching page content:', err);
setApiError(true);
setPageContent(null);
} finally {
setLoading(false);
}
};
@@ -50,9 +60,10 @@ const AboutPage: React.FC = () => {
}, []);
const displayPhone = settings.company_phone || '+1 (234) 567-890';
const displayEmail = settings.company_email || 'info@luxuryhotel.com';
const displayAddress = settings.company_address || '123 Luxury Street\nCity, State 12345\nCountry';
// Only use company settings from API, no hardcoded fallbacks
const displayPhone = settings.company_phone || null;
const displayEmail = settings.company_email || null;
const displayAddress = settings.company_address || null;
const defaultValues = [
@@ -96,21 +107,23 @@ const AboutPage: React.FC = () => {
}
];
const values = pageContent?.values && pageContent.values.length > 0
// Only use default values/features if pageContent was successfully loaded but is empty
// Don't use defaults if API failed
const values = pageContent && pageContent.values && pageContent.values.length > 0
? pageContent.values.map((v: any) => ({
icon: v.icon || defaultValues.find(d => d.title === v.title)?.icon || 'Heart',
title: v.title,
description: v.description
}))
: defaultValues;
: (pageContent && !apiError ? defaultValues : []);
const features = pageContent?.features && pageContent.features.length > 0
const features = pageContent && pageContent.features && pageContent.features.length > 0
? pageContent.features.map((f: any) => ({
icon: f.icon || defaultFeatures.find(d => d.title === f.title)?.icon || 'Star',
title: f.title,
description: f.description
}))
: defaultFeatures;
: (pageContent && !apiError ? defaultFeatures : []);
const team = pageContent?.team && typeof pageContent.team === 'string'
@@ -130,6 +143,29 @@ const AboutPage: React.FC = () => {
return IconComponent;
};
// Show error state if API failed
if (apiError) {
return (
<div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50 flex items-center justify-center">
<div className="text-center p-8">
<h1 className="text-2xl font-bold text-gray-900 mb-4">Unable to Load Content</h1>
<p className="text-gray-600">Please check your connection and try again later.</p>
</div>
</div>
);
}
// Show loading state
if (loading) {
return (
<div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50 flex items-center justify-center">
<div className="text-center p-8">
<p className="text-gray-600">Loading...</p>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50">
{}
@@ -235,6 +271,7 @@ const AboutPage: React.FC = () => {
</section>
{}
{values.length > 0 && (
<section className="py-20 md:py-28 bg-gradient-to-b from-slate-50 via-white to-slate-50 relative">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(212,175,55,0.03),transparent_50%)]"></div>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
@@ -280,8 +317,10 @@ const AboutPage: React.FC = () => {
</div>
</div>
</section>
)}
{}
{features.length > 0 && (
<section className="py-20 md:py-28 bg-white relative overflow-hidden">
<div className="absolute inset-0 bg-[linear-gradient(135deg,transparent_0%,rgba(212,175,55,0.02)_50%,transparent_100%)]"></div>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
@@ -327,8 +366,8 @@ const AboutPage: React.FC = () => {
</div>
</div>
</section>
)}
{}
{(pageContent?.mission || pageContent?.vision) && (
<section className="py-20 md:py-28 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden">
<div className="absolute inset-0">
@@ -570,7 +609,9 @@ const AboutPage: React.FC = () => {
We'd love to hear from you. Contact us for reservations or inquiries.
</p>
</div>
{(displayAddress || displayPhone || displayEmail) && (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-10 mb-16">
{displayAddress && (
<div className="group text-center p-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-[#d4af37]/40 hover:-translate-y-2">
<div className="w-16 h-16 bg-gradient-to-br from-[#d4af37] via-[#f5d76e] to-[#d4af37] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-[#d4af37]/20 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500">
<MapPin className="w-8 h-8 text-white drop-shadow-md" />
@@ -588,6 +629,8 @@ const AboutPage: React.FC = () => {
))}
</p>
</div>
)}
{displayPhone && (
<div className="group text-center p-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-[#d4af37]/40 hover:-translate-y-2" style={{ animationDelay: '0.1s' }}>
<div className="w-16 h-16 bg-gradient-to-br from-[#d4af37] via-[#f5d76e] to-[#d4af37] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-[#d4af37]/20 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500">
<Phone className="w-8 h-8 text-white drop-shadow-md" />
@@ -601,6 +644,8 @@ const AboutPage: React.FC = () => {
</a>
</p>
</div>
)}
{displayEmail && (
<div className="group text-center p-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-[#d4af37]/40 hover:-translate-y-2" style={{ animationDelay: '0.2s' }}>
<div className="w-16 h-16 bg-gradient-to-br from-[#d4af37] via-[#f5d76e] to-[#d4af37] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-[#d4af37]/20 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500">
<Mail className="w-8 h-8 text-white drop-shadow-md" />
@@ -614,7 +659,9 @@ const AboutPage: React.FC = () => {
</a>
</p>
</div>
)}
</div>
)}
<div className="text-center">
<Link
to="/rooms"