Spruce up contact and repair request forms, fix Docker build timeouts
Some checks failed
Build and Deploy / deploy (push) Has been cancelled
Some checks failed
Build and Deploy / deploy (push) Has been cancelled
- Contact page: two-column layout with rover image and email card sidebar - Repair request: hero section, "How it works" steps sidebar, return address field, warranty/charges checkbox - Reduce static generation concurrency to prevent Docker build timeouts - Bump staticPageGenerationTimeout to 300s Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Tim Hadwen
@@ -2,7 +2,11 @@ import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: "standalone",
|
||||
staticPageGenerationTimeout: 120,
|
||||
staticPageGenerationTimeout: 300,
|
||||
experimental: {
|
||||
staticGenerationMaxConcurrency: 8,
|
||||
staticGenerationMinPagesPerWorker: 25,
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { FormField } from "@/components/ui/FormField";
|
||||
@@ -34,7 +35,7 @@ export default function ContactForm() {
|
||||
|
||||
if (submitted) {
|
||||
return (
|
||||
<section className="bg-white py-16 sm:py-24">
|
||||
<section className="bg-muted py-16 sm:py-24">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
||||
@@ -53,113 +54,150 @@ export default function ContactForm() {
|
||||
"w-full rounded-lg border border-border bg-white px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20";
|
||||
|
||||
return (
|
||||
<section className="bg-white py-16 sm:py-24">
|
||||
<section className="bg-muted py-16 sm:py-24">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-12">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
||||
Contact us.
|
||||
</h1>
|
||||
<p className="mt-4 text-foreground-light">
|
||||
Email:{" "}
|
||||
<a
|
||||
href="mailto:contact@micromelon.com.au"
|
||||
className="text-brand-dark underline hover:text-foreground"
|
||||
>
|
||||
contact@micromelon.com.au
|
||||
</a>
|
||||
</p>
|
||||
<div className="mb-10">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
||||
Contact us.
|
||||
</h1>
|
||||
<p className="mt-3 text-foreground-light">
|
||||
Have a question or need a quote? Fill in the form and we'll get back to you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-12 md:grid-cols-2">
|
||||
{/* Form */}
|
||||
<div>
|
||||
<div className="rounded-2xl border border-border bg-white p-6 shadow-sm sm:p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<FormField
|
||||
label="Your Name"
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Your full name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<FormField
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<FormField
|
||||
label="Phone Number"
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="Your phone number"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
/>
|
||||
|
||||
{/* School search combobox */}
|
||||
<div ref={institutionRef} className="relative">
|
||||
<label htmlFor="institution" className="mb-2 block text-sm font-medium text-foreground">
|
||||
School / Organisation
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="institution"
|
||||
value={institution}
|
||||
onChange={(e) => {
|
||||
setInstitution(e.target.value);
|
||||
setInstitutionOpen(true);
|
||||
}}
|
||||
onFocus={() => setInstitutionOpen(true)}
|
||||
placeholder="Search or type your school name"
|
||||
className={inputClasses}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{institutionOpen && institution.length > 0 && (() => {
|
||||
const query = institution.toLowerCase();
|
||||
const matches = KNOWN_SCHOOLS.filter((s) => s.toLowerCase().includes(query));
|
||||
const exactMatch = KNOWN_SCHOOLS.some((s) => s.toLowerCase() === query);
|
||||
if (matches.length === 0 && !exactMatch) return null;
|
||||
if (matches.length === 1 && matches[0].toLowerCase() === query) return null;
|
||||
return (
|
||||
<ul className="absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-border bg-white shadow-lg">
|
||||
{matches.map((school) => (
|
||||
<li key={school}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setInstitution(school);
|
||||
setInstitutionOpen(false);
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm text-foreground hover:bg-muted"
|
||||
>
|
||||
{school}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
label="Message"
|
||||
name="message"
|
||||
type="textarea"
|
||||
required
|
||||
placeholder="How can we help?"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Button type="submit" variant="primary">
|
||||
SEND
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<FormField
|
||||
label="Your Name"
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Your full name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<FormField
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<FormField
|
||||
label="Phone Number"
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="Your phone number"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
/>
|
||||
{/* Sidebar */}
|
||||
<div>
|
||||
<div className="sticky top-24 space-y-6">
|
||||
<div className="overflow-hidden rounded-2xl">
|
||||
<Image
|
||||
src="/images/products/rover-candid.png"
|
||||
alt="Micromelon Rover"
|
||||
width={600}
|
||||
height={400}
|
||||
className="w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* School search combobox */}
|
||||
<div ref={institutionRef} className="relative">
|
||||
<label htmlFor="institution" className="mb-2 block text-sm font-medium text-foreground">
|
||||
School / Organisation
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="institution"
|
||||
value={institution}
|
||||
onChange={(e) => {
|
||||
setInstitution(e.target.value);
|
||||
setInstitutionOpen(true);
|
||||
}}
|
||||
onFocus={() => setInstitutionOpen(true)}
|
||||
placeholder="Search or type your school name"
|
||||
className={inputClasses}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{institutionOpen && institution.length > 0 && (() => {
|
||||
const query = institution.toLowerCase();
|
||||
const matches = KNOWN_SCHOOLS.filter((s) => s.toLowerCase().includes(query));
|
||||
const exactMatch = KNOWN_SCHOOLS.some((s) => s.toLowerCase() === query);
|
||||
if (matches.length === 0 && !exactMatch) return null;
|
||||
if (matches.length === 1 && matches[0].toLowerCase() === query) return null;
|
||||
return (
|
||||
<ul className="absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-border bg-white shadow-lg">
|
||||
{matches.map((school) => (
|
||||
<li key={school}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setInstitution(school);
|
||||
setInstitutionOpen(false);
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm text-foreground hover:bg-muted"
|
||||
>
|
||||
{school}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
})()}
|
||||
<div className="rounded-2xl border border-border bg-white p-5 shadow-sm">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand/10">
|
||||
<svg className="h-5 w-5 text-brand" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Email</p>
|
||||
<a
|
||||
href="mailto:contact@micromelon.com.au"
|
||||
className="text-sm font-medium text-brand-dark hover:underline"
|
||||
>
|
||||
contact@micromelon.com.au
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
We typically respond within 1 business day.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
label="Message"
|
||||
name="message"
|
||||
type="textarea"
|
||||
required
|
||||
placeholder="How can we help?"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Button type="submit" variant="primary">
|
||||
SEND
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { SectionHeading } from "@/components/ui/SectionHeading";
|
||||
import { KNOWN_SCHOOLS } from "@/data/schools";
|
||||
|
||||
interface RoverEntry {
|
||||
@@ -23,6 +23,8 @@ export default function RepairRequestForm() {
|
||||
const [rovers, setRovers] = useState<RoverEntry[]>([
|
||||
{ id: nextId++, serialNumber: "", issue: "" },
|
||||
]);
|
||||
const [returnAddress, setReturnAddress] = useState("");
|
||||
const [agreedToCharges, setAgreedToCharges] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const institutionRef = useRef<HTMLDivElement>(null);
|
||||
@@ -63,6 +65,7 @@ export default function RepairRequestForm() {
|
||||
email,
|
||||
phone,
|
||||
institution,
|
||||
returnAddress,
|
||||
rovers: rovers.map((r) => ({
|
||||
serialNumber: r.serialNumber,
|
||||
issue: r.issue,
|
||||
@@ -79,7 +82,7 @@ export default function RepairRequestForm() {
|
||||
|
||||
if (submitted) {
|
||||
return (
|
||||
<section className="bg-white py-16 sm:py-24">
|
||||
<section className="bg-muted py-16 sm:py-24">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
||||
@@ -97,183 +100,267 @@ export default function RepairRequestForm() {
|
||||
const inputClasses =
|
||||
"w-full rounded-lg border border-border bg-white px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20";
|
||||
|
||||
const steps = [
|
||||
{ number: 1, title: "Submit your request", description: "Fill in the form with your rover details and the issues you're experiencing." },
|
||||
{ number: 2, title: "Receive confirmation", description: "You'll receive a confirmation email acknowledging your repair request." },
|
||||
{ number: 3, title: "Return Order PDF", description: "We'll email you a Return Order PDF with instructions on how and where to ship your rover." },
|
||||
{ number: 4, title: "We repair your rovers", description: "Repairs normally take 1–2 weeks. If your rovers are out of warranty, you'll receive a quote before we proceed." },
|
||||
{ number: 5, title: "Repaired & on its way", description: "Once repairs are complete, you'll receive an email letting you know your rover is on its way back." },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="bg-white py-16 sm:py-24">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<SectionHeading
|
||||
title="Rover Repair Request"
|
||||
subtitle="Let us know which rovers need repair and we'll organise getting them fixed."
|
||||
centered={false}
|
||||
/>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<>
|
||||
{/* Hero section */}
|
||||
<section className="bg-muted">
|
||||
<Container>
|
||||
<div className="grid items-center gap-8 py-16 sm:py-20 md:grid-cols-2">
|
||||
<div>
|
||||
<label htmlFor="name" className="mb-2 block text-sm font-medium text-foreground">
|
||||
Name <span className="text-brand">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
required
|
||||
placeholder="Your full name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className={inputClasses}
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
||||
Rover Repair Request
|
||||
</h1>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
Let us know which rovers need repair and we'll organise getting them fixed.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<Image
|
||||
src="/images/products/rover-candid.png"
|
||||
alt="Micromelon Rover"
|
||||
width={420}
|
||||
height={280}
|
||||
className="rounded-2xl object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Form + sidebar */}
|
||||
<section className="bg-white py-16 sm:py-20">
|
||||
<Container>
|
||||
<div className="grid gap-12 md:grid-cols-2">
|
||||
{/* Form */}
|
||||
<div>
|
||||
<label htmlFor="email" className="mb-2 block text-sm font-medium text-foreground">
|
||||
Email <span className="text-brand">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
required
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="mb-2 block text-sm font-medium text-foreground">
|
||||
Name <span className="text-brand">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
required
|
||||
placeholder="Your full name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="mb-2 block text-sm font-medium text-foreground">
|
||||
Phone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
placeholder="Your phone number"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="mb-2 block text-sm font-medium text-foreground">
|
||||
Email <span className="text-brand">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
required
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* School search combobox */}
|
||||
<div ref={institutionRef} className="relative">
|
||||
<label htmlFor="institution" className="mb-2 block text-sm font-medium text-foreground">
|
||||
School / Organisation <span className="text-brand">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="institution"
|
||||
required
|
||||
value={institution}
|
||||
onChange={(e) => {
|
||||
setInstitution(e.target.value);
|
||||
setInstitutionOpen(true);
|
||||
}}
|
||||
onFocus={() => setInstitutionOpen(true)}
|
||||
placeholder="Search or type your school name"
|
||||
className={inputClasses}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{institutionOpen && institution.length > 0 && (() => {
|
||||
const query = institution.toLowerCase();
|
||||
const matches = KNOWN_SCHOOLS.filter((s) => s.toLowerCase().includes(query));
|
||||
const exactMatch = KNOWN_SCHOOLS.some((s) => s.toLowerCase() === query);
|
||||
if (matches.length === 0 && !exactMatch) return null;
|
||||
if (matches.length === 1 && matches[0].toLowerCase() === query) return null;
|
||||
return (
|
||||
<ul className="absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-border bg-white shadow-lg">
|
||||
{matches.map((school) => (
|
||||
<li key={school}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setInstitution(school);
|
||||
setInstitutionOpen(false);
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm text-foreground hover:bg-muted"
|
||||
>
|
||||
{school}
|
||||
</button>
|
||||
</li>
|
||||
<div>
|
||||
<label htmlFor="phone" className="mb-2 block text-sm font-medium text-foreground">
|
||||
Phone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
placeholder="Your phone number"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* School search combobox */}
|
||||
<div ref={institutionRef} className="relative">
|
||||
<label htmlFor="institution" className="mb-2 block text-sm font-medium text-foreground">
|
||||
School / Organisation <span className="text-brand">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="institution"
|
||||
required
|
||||
value={institution}
|
||||
onChange={(e) => {
|
||||
setInstitution(e.target.value);
|
||||
setInstitutionOpen(true);
|
||||
}}
|
||||
onFocus={() => setInstitutionOpen(true)}
|
||||
placeholder="Search or type your school name"
|
||||
className={inputClasses}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{institutionOpen && institution.length > 0 && (() => {
|
||||
const query = institution.toLowerCase();
|
||||
const matches = KNOWN_SCHOOLS.filter((s) => s.toLowerCase().includes(query));
|
||||
const exactMatch = KNOWN_SCHOOLS.some((s) => s.toLowerCase() === query);
|
||||
if (matches.length === 0 && !exactMatch) return null;
|
||||
if (matches.length === 1 && matches[0].toLowerCase() === query) return null;
|
||||
return (
|
||||
<ul className="absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border border-border bg-white shadow-lg">
|
||||
{matches.map((school) => (
|
||||
<li key={school}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setInstitution(school);
|
||||
setInstitutionOpen(false);
|
||||
}}
|
||||
className="w-full px-4 py-2 text-left text-sm text-foreground hover:bg-muted"
|
||||
>
|
||||
{school}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* Rovers */}
|
||||
<div>
|
||||
<label className="mb-3 block text-sm font-medium text-foreground">
|
||||
Rovers for Repair <span className="text-brand">*</span>
|
||||
</label>
|
||||
<div className="space-y-3">
|
||||
{rovers.map((rover, index) => (
|
||||
<div
|
||||
key={rover.id}
|
||||
className="rounded-xl border border-border bg-muted/50 p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Rover {index + 1}
|
||||
</span>
|
||||
{rovers.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeRover(rover.id)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-foreground">
|
||||
Serial Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="00001234"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]{8}"
|
||||
maxLength={8}
|
||||
value={rover.serialNumber}
|
||||
onChange={(e) => updateRover(rover.id, "serialNumber", e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-foreground">
|
||||
Issue <span className="text-brand">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
rows={2}
|
||||
placeholder="Describe what's wrong with this rover"
|
||||
value={rover.issue}
|
||||
onChange={(e) => updateRover(rover.id, "issue", e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* Rovers */}
|
||||
<div>
|
||||
<label className="mb-3 block text-sm font-medium text-foreground">
|
||||
Rovers for Repair <span className="text-brand">*</span>
|
||||
</label>
|
||||
<div className="space-y-3">
|
||||
{rovers.map((rover, index) => (
|
||||
<div
|
||||
key={rover.id}
|
||||
className="rounded-xl border border-border bg-muted/50 p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Rover {index + 1}
|
||||
</span>
|
||||
{rovers.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeRover(rover.id)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-foreground">
|
||||
Serial Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="00001234"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]{8}"
|
||||
maxLength={8}
|
||||
value={rover.serialNumber}
|
||||
onChange={(e) => updateRover(rover.id, "serialNumber", e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-foreground">
|
||||
Issue <span className="text-brand">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
rows={2}
|
||||
placeholder="Describe what's wrong with this rover"
|
||||
value={rover.issue}
|
||||
onChange={(e) => updateRover(rover.id, "issue", e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addRover}
|
||||
className="mt-3 flex items-center gap-2 rounded-lg border border-dashed border-border px-4 py-2.5 text-sm font-medium text-foreground-light hover:border-foreground-light hover:text-foreground transition-colors"
|
||||
>
|
||||
<span className="text-lg leading-none">+</span>
|
||||
Add another rover
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addRover}
|
||||
className="mt-3 flex items-center gap-2 rounded-lg border border-dashed border-border px-4 py-2.5 text-sm font-medium text-foreground-light hover:border-foreground-light hover:text-foreground transition-colors"
|
||||
>
|
||||
<span className="text-lg leading-none">+</span>
|
||||
Add another rover
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="returnAddress" className="mb-2 block text-sm font-medium text-foreground">
|
||||
Return Address <span className="text-brand">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="returnAddress"
|
||||
required
|
||||
rows={3}
|
||||
placeholder="Street address, suburb, state, postcode"
|
||||
value={returnAddress}
|
||||
onChange={(e) => setReturnAddress(e.target.value)}
|
||||
className={inputClasses}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="agree-charges"
|
||||
required
|
||||
checked={agreedToCharges}
|
||||
onChange={(e) => setAgreedToCharges(e.target.checked)}
|
||||
className="mt-1 h-4 w-4 shrink-0 rounded border-border text-brand accent-brand focus:ring-brand/20"
|
||||
/>
|
||||
<label htmlFor="agree-charges" className="text-sm text-muted-foreground">
|
||||
I understand that rover repairs within the standard 1-year warranty period are covered at no cost for manufacturing defects. Repairs outside the warranty period, or for damage caused by misuse, intentional damage, or neglect, are subject to a $50 service fee plus the cost of replacement parts. Micromelon reserves the right to assess the rover and provide a quote before proceeding with any chargeable repairs. <span className="text-brand">*</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button type="submit" variant="primary" disabled={submitting || !agreedToCharges}>
|
||||
{submitting ? "Submitting..." : "Submit Repair Request"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div>
|
||||
<Button type="submit" variant="primary" disabled={submitting}>
|
||||
{submitting ? "Submitting..." : "Submit Repair Request"}
|
||||
</Button>
|
||||
<div className="sticky top-24">
|
||||
<div className="rounded-2xl border border-border bg-muted p-6">
|
||||
<h3 className="text-lg font-bold text-foreground">How it works</h3>
|
||||
<div className="mt-5 space-y-8">
|
||||
{steps.map((step) => (
|
||||
<div key={step.number} className="flex gap-4">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand text-sm font-bold text-white">
|
||||
{step.number}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">{step.title}</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">{step.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user