import React, { ReactElement, useEffect, useState } from 'react'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { mdiStar, mdiShieldCheck, mdiClockOutline, mdiMapMarker, mdiPhone, mdiWeb, mdiEmail, mdiCurrencyUsd, mdiCheckDecagram, mdiMessageDraw, mdiAccount } from '@mdi/js'; import axios from 'axios'; import LayoutGuest from '../../layouts/Guest'; import BaseIcon from '../../components/BaseIcon'; import LoadingSpinner from '../../components/LoadingSpinner'; import dataFormatter from '../../helpers/dataFormatter'; import { useAppSelector } from '../../stores/hooks'; const BusinessDetailsPublic = () => { const router = useRouter(); const { id } = router.query; const [loading, setLoading] = useState(true); const [business, setBusiness] = useState(null); const { currentUser } = useAppSelector((state) => state.auth); useEffect(() => { if (id) { fetchBusiness(); } }, [id]); const fetchBusiness = async () => { setLoading(true); try { const response = await axios.get(`/businesses/${id}`); setBusiness(response.data); } catch (error) { console.error('Error fetching business:', error); } finally { setLoading(false); } }; const claimListing = async () => { if (!currentUser) { router.push('/login'); return; } try { await axios.post(`/businesses/${id}/claim`); fetchBusiness(); // Refresh data } catch (error) { console.error('Error claiming business:', error); alert('Failed to claim business. Please try again.'); } }; const getBusinessImage = () => { if (business && business.business_photos_business && business.business_photos_business.length > 0) { const photo = business.business_photos_business[0].photos && business.business_photos_business[0].photos[0]; if (photo && photo.publicUrl) { return `/api/file/download?privateUrl=${photo.publicUrl}`; } } return null; }; if (loading) return
; if (!business) return
Business not found.
; const displayRating = business.rating ? Number(business.rating).toFixed(1) : 'New'; return (
{business.name} | Crafted Network™ {/* Hero Header */}
{/* Business Photo */}
{getBusinessImage() ? ( {business.name} ) : ( )} {(business.reliability_score >= 80 || business.is_claimed) && (
)}

{business.name}

{business.city}, {business.state} {displayRating} Rating {business.is_claimed ? ( Verified Pro ) : ( Unclaimed Listing )}
Avg Rating
{displayRating} / 5.0
Response Time
~{business.response_time_median_minutes || 30}m
Status
Available
Total Reviews
{business.reviews_business?.length || 0}
{/* Main Content */}
{!business.is_claimed && (

Is this your business?

Claim your listing to respond to reviews, update your profile, and get more leads.

)} {/* Photos Gallery */} {business.business_photos_business?.length > 0 && (

Photos

{business.business_photos_business.map((bp: any) => ( bp.photos?.map((p: any) => (
Business
)) ))}
)} {/* About */}

About the Business

{/* Pricing */}

Service Pricing Range

{business.service_prices_business?.map((price: any) => (

{price.service_name}

{price.notes || 'Standard professional service.'}

${price.typical_price}
Typical Price
))} {!business.service_prices_business?.length &&

No pricing information available.

}
{/* Reviews */}

Customer Reviews

{business.reviews_business?.map((review: any) => (
{[...Array(5)].map((_, i) => ( ))}
{dataFormatter.dateFormatter(review.created_at_ts)}

"{review.text}"

{review.user?.firstName || 'Anonymous'}
{review.is_verified_job && (
Verified Job
)}
))} {!business.reviews_business?.length && (

No reviews yet.

Be the first to share your experience!

)}
{/* Sidebar */}
{/* Contact Info */}

Contact & Location

Call Now
{business.phone || 'Contact for details'}
Email
{business.email}
Website
{business.website || 'N/A'}
Address
{business.address}, {business.city}, {business.state} {business.zip}
{/* Badges */}

Trust Signals

{business.business_badges_business?.filter((b:any) => b.status === 'APPROVED').map((badge: any) => (
{badge.badge_type.replace(/_/g, ' ')}
Verified Badge
))} {business.is_claimed && (
Claimed Listing
Verified Owner
)} {!business.business_badges_business?.length && !business.is_claimed &&

Pending verification...

}
); }; BusinessDetailsPublic.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default BusinessDetailsPublic;