222 lines
7.9 KiB
TypeScript
222 lines
7.9 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
|
|
type Props = { onSave: (data: any) => void };
|
|
|
|
const DAYS = [
|
|
"MONDAY",
|
|
"TUESDAY",
|
|
"WEDNESDAY",
|
|
"THURSDAY",
|
|
"FRIDAY",
|
|
"SATURDAY",
|
|
"SUNDAY",
|
|
];
|
|
|
|
export default function Settings({ onSave }: Props) {
|
|
const [addressLine1, setAddressLine1] = useState("");
|
|
const [city, setCity] = useState("");
|
|
const [stateOrProvince, setStateOrProvince] = useState("");
|
|
const [postalCode, setPostalCode] = useState("");
|
|
const [country, setCountry] = useState("US");
|
|
const [name, setName] = useState("");
|
|
const [phone, setPhone] = useState("");
|
|
const [timeZoneId, setTimeZoneId] = useState("America/New_York");
|
|
const [open, setOpen] = useState("09:00:00");
|
|
const [close, setClose] = useState("18:00:00");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const operatingHours = DAYS.map((day) => ({
|
|
dayOfWeekEnum: day,
|
|
intervals: [{ open, close }],
|
|
}));
|
|
|
|
const payload = {
|
|
location: {
|
|
address: { addressLine1, city, stateOrProvince, postalCode, country },
|
|
},
|
|
locationTypes: ["STORE"],
|
|
name,
|
|
phone,
|
|
operatingHours,
|
|
timeZoneId,
|
|
merchantLocationStatus: "ENABLED",
|
|
};
|
|
|
|
onSave(payload);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-6">
|
|
<div className="w-full max-w-2xl bg-white border border-gray-100 rounded-3xl shadow-2xl p-10 relative overflow-hidden">
|
|
{/* Glow Accent */}
|
|
<div className="absolute top-0 left-0 w-full h-2 bg-[#00d1ff]" />
|
|
|
|
<h2 className="text-3xl font-bold text-center text-[#00d1ff] mb-8 tracking-tight">
|
|
Create New Location
|
|
</h2>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{/* Store Name */}
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
Store Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
placeholder="Enter store name"
|
|
/>
|
|
</div>
|
|
|
|
{/* Phone */}
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
Phone *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={phone}
|
|
onChange={(e) => setPhone(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
placeholder="Enter phone number"
|
|
/>
|
|
</div>
|
|
|
|
{/* Address */}
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
Address Line 1 *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={addressLine1}
|
|
onChange={(e) => setAddressLine1(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
placeholder="Enter address"
|
|
/>
|
|
</div>
|
|
|
|
{/* City / State */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
City *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={city}
|
|
onChange={(e) => setCity(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
placeholder="City"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
State *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={stateOrProvince}
|
|
onChange={(e) => setStateOrProvince(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
placeholder="State"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Postal / Country */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
Postal Code *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={postalCode}
|
|
onChange={(e) => setPostalCode(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
placeholder="Postal Code"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
Country *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={country}
|
|
onChange={(e) => setCountry(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
placeholder="Country Code (e.g. US)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Time Zone */}
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
Time Zone *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={timeZoneId}
|
|
onChange={(e) => setTimeZoneId(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
placeholder="e.g. America/New_York"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hours */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
Open Time *
|
|
</label>
|
|
<input
|
|
type="time"
|
|
value={open}
|
|
onChange={(e) => setOpen(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-semibold text-gray-700 mb-1">
|
|
Close Time *
|
|
</label>
|
|
<input
|
|
type="time"
|
|
value={close}
|
|
onChange={(e) => setClose(e.target.value)}
|
|
required
|
|
className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Button */}
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-[#00d1ff] text-white py-3 rounded-xl font-semibold shadow-lg hover:bg-[#00c2ed] hover:shadow-xl transition-all duration-300"
|
|
>
|
|
Save & Console JSON
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|