amirhosein.ashourlooandClaude Sonnet 5
d624ad8a32
Neither workshops nor portfolio is in this tenant's enabledModules
(["products","blog","finance"]) - same reasoning as before, page/nav entry
withheld until either is actually enabled.
Shopping cart (new):
- CartProvider (client context): live cart state, add/update/remove/refresh,
reads AUTH_TOKEN_COOKIE, calls the real /businesses/{id}/cart* endpoints
(bearer-only, no guest cart - by design, not a gap)
- CartButton: header/bottom-nav icon with a live count badge and a popup
preview; "ادامه" hands off to the customer portal's own cart/checkout,
since this storefront has no checkout UI (address/payment) to hand off to
internally - out of scope for this pass
- ProductBuyPanel: quantity stepper, wired to CartProvider.addItem() instead
of its own ad-hoc fetch+token logic, toast on success
- Cart/CartItem types are a best-effort guess at an undocumented response
shape (OpenAPI gives no field-level schema) - unverified against real data
since store-items are still empty; read every field defensively
Store-items pages (new): /store-items (flat listing of purchasable variants,
always priced unlike /products) and /store-items/{id} (detail - no slug,
resolves the variant's productId and reuses the product's own gallery/
description/technical-info/comments/related-products, just with that
variant preselected).
Contact form: now shows a toast + inline success text and resets while
staying on screen, instead of swapping to a separate "thank you" panel.
New shared providers: ToastProvider (useToast) and CartProvider, both
mounted once in layout.tsx.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
87 lines
3.4 KiB
TypeScript
87 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { submitContactForm } from "@/lib/api";
|
|
import { useToast } from "./providers/ToastProvider";
|
|
import { CheckIcon } from "./icons";
|
|
|
|
type Status = "idle" | "submitting" | "sent" | "error";
|
|
|
|
// Posts straight to POST /tenants/moalem.shop/contact-submissions — a real,
|
|
// documented endpoint, no bearer required. On success: a toast, inline
|
|
// success text, and the form resets and stays put (not swapped for a
|
|
// separate "thank you" panel) so another message can be sent right away.
|
|
export default function ContactForm() {
|
|
const [status, setStatus] = useState<Status>("idle");
|
|
const { showToast } = useToast();
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
const form = e.currentTarget;
|
|
const data = new FormData(form);
|
|
const name = String(data.get("name") || "").trim();
|
|
const title = String(data.get("title") || "").trim();
|
|
const text = String(data.get("text") || "").trim();
|
|
const email = String(data.get("email") || "").trim();
|
|
const cellNumber = String(data.get("cellNumber") || "").trim();
|
|
if (!name || !title || !text) return;
|
|
|
|
setStatus("submitting");
|
|
try {
|
|
await submitContactForm({
|
|
name,
|
|
title,
|
|
text,
|
|
email: email || undefined,
|
|
cellNumber: cellNumber || undefined,
|
|
});
|
|
form.reset();
|
|
setStatus("sent");
|
|
showToast("پیام شما با موفقیت ارسال شد");
|
|
} catch {
|
|
setStatus("error");
|
|
}
|
|
}
|
|
|
|
const input =
|
|
"h-12 w-full rounded-xl border border-line bg-white px-4 text-sm outline-none transition focus:border-brand";
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} onChange={() => status === "sent" && setStatus("idle")} className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<input name="name" required placeholder="نام و نام خانوادگی" className={input} />
|
|
<input name="cellNumber" placeholder="شماره موبایل" inputMode="tel" className={input} />
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<input name="email" type="email" placeholder="ایمیل (اختیاری)" className={input} />
|
|
<input name="title" required placeholder="موضوع پیام" className={input} />
|
|
</div>
|
|
<textarea
|
|
name="text"
|
|
required
|
|
rows={5}
|
|
placeholder="متن پیام شما…"
|
|
className="w-full rounded-xl border border-line bg-white p-4 text-sm outline-none transition focus:border-brand"
|
|
/>
|
|
|
|
{status === "error" && (
|
|
<p className="text-[12.5px] text-brand">ارسال پیام ناموفق بود. لطفاً دوباره تلاش کنید.</p>
|
|
)}
|
|
{status === "sent" && (
|
|
<p className="flex items-center gap-1.5 text-[12.5px] font-bold text-brand">
|
|
<CheckIcon className="size-4" />
|
|
پیام شما ارسال شد. همکاران ما در اسرع وقت با شما تماس میگیرند.
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={status === "submitting"}
|
|
className="flex h-12 w-full items-center justify-center rounded-xl bg-brand text-sm font-bold text-white transition hover:bg-brand-dark disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto sm:px-10"
|
|
>
|
|
{status === "submitting" ? "در حال ارسال…" : "ارسال پیام"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|