RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix contact layout and chat ui

Browse Source
This commit is contained in:
Harkamal Randhawa
2026-04-15 23:12:23 -06:00
parent 8a9e4e75b5
commit e193e29499
4 changed files with 119 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
web/app/contact/page.js
View File

@@ -50,7 +50,7 @@ export default function ContactPage() {
setSendSuccess(true);
setSubject("");
setBody("");
} catch (err) {
} catch {
setSendError("Failed to send message. Please try again.");
} finally {
setSending(false);
@@ -61,67 +61,63 @@ export default function ContactPage() {
<main className="info-page">
<section className="info-hero">
<h1 className="info-title">Contact Us</h1>
<p className="info-subtitle">Reach the team, find a location, or connect with store personnel.</p>
<p className="info-subtitle">Reach the team, find a location, or send us a message.</p>
<div className="title-decoration"></div>
</section>
<section className="info-content">
<section className="contact-layout">
<div className="info-card">
<h2>General Contact</h2>
<h2>Get in Touch</h2>
<p>Email: hello@leonspetstore.com.au</p>
<p>Phone: (03) 9000 0000</p>
<p>Hours: Mon–Sat, 9:00 AM – 6:00 PM</p>
</div>
{token && (
<div className="info-card">
<h2>Send Us a Message</h2>
{sendSuccess ? (
<p className="contact-success">Your message has been sent. We&apos;ll be in touch soon.</p>
) : (
<form className="auth-form" onSubmit={handleSend}>
<label className="auth-label">
Subject
<input
className="auth-input"
type="text"
value={subject}
onChange={(e) => setSubject(e.target.value)}
required
maxLength={150}
/>
</label>
<label className="auth-label">
Message
<textarea
className="auth-input"
style={{ resize: "vertical" }}
value={body}
onChange={(e) => setBody(e.target.value)}
required
maxLength={2000}
rows={6}
/>
</label>
{sendError && <p className="contact-error">{sendError}</p>}
<button className="auth-submit-btn" type="submit" disabled={sending}>
{sending ? "Sending…" : "Send Message"}
</button>
</form>
)}
</div>
)}
{token && (
<div className="contact-form-section">
<h3>Send Us a Message</h3>
{sendSuccess ? (
<p className="contact-success">Your message has been sent. We&apos;ll be in touch soon.</p>
) : (
<form className="auth-form" onSubmit={handleSend}>
<label className="auth-label">
Subject
<input
className="auth-input"
type="text"
value={subject}
onChange={(e) => setSubject(e.target.value)}
required
maxLength={150}
/>
</label>
<label className="auth-label">
Message
<textarea
className="auth-input"
style={{ resize: "vertical" }}
value={body}
onChange={(e) => setBody(e.target.value)}
required
maxLength={2000}
rows={5}
/>
</label>
{sendError && <p className="contact-error">{sendError}</p>}
<button className="auth-submit-btn" type="submit" disabled={sending}>
{sending ? "Sending…" : "Send Message"}
</button>
</form>
)}
</div>
)}
</div>
<div className="info-card">
<h2>Store Locations</h2>
{loading && <p>Loading locations...</p>}
{error && <p style={{ color: "red" }}>Failed to load locations: {error}</p>}
{!loading && !error && locations.length === 0 && (
<p>No store locations found.</p>
)}
{!loading && !error && locations.length === 0 && <p>No store locations found.</p>}
{!loading && !error && locations.length > 0 && (
<div className="info-card-grid">