import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import { CheckCircle, Phone, User, MapPin, Truck } from "lucide-react";
import { z } from "zod";
// Algerian Wilayas with delivery prices
const wilayas = [
{ code: "16", name: "الجزائر", price: 400 },
{ code: "09", name: "البليدة", price: 400 },
{ code: "35", name: "بومرداس", price: 400 },
{ code: "42", name: "تيبازة", price: 400 },
{ code: "01", name: "أدرار", price: 800 },
{ code: "02", name: "الشلف", price: 500 },
{ code: "03", name: "الأغواط", price: 600 },
{ code: "04", name: "أم البواقي", price: 600 },
{ code: "05", name: "باتنة", price: 600 },
{ code: "06", name: "بجاية", price: 500 },
{ code: "07", name: "بسكرة", price: 600 },
{ code: "08", name: "بشار", price: 800 },
{ code: "10", name: "البويرة", price: 500 },
{ code: "11", name: "تمنراست", price: 1000 },
{ code: "12", name: "تبسة", price: 600 },
{ code: "13", name: "تلمسان", price: 600 },
{ code: "14", name: "تيارت", price: 600 },
{ code: "15", name: "تيزي وزو", price: 500 },
{ code: "17", name: "الجلفة", price: 600 },
{ code: "18", name: "جيجل", price: 500 },
{ code: "19", name: "سطيف", price: 500 },
{ code: "20", name: "سعيدة", price: 600 },
{ code: "21", name: "سكيكدة", price: 500 },
{ code: "22", name: "سيدي بلعباس", price: 600 },
{ code: "23", name: "عنابة", price: 500 },
{ code: "24", name: "قالمة", price: 500 },
{ code: "25", name: "قسنطينة", price: 500 },
{ code: "26", name: "المدية", price: 500 },
{ code: "27", name: "مستغانم", price: 500 },
{ code: "28", name: "المسيلة", price: 600 },
{ code: "29", name: "معسكر", price: 600 },
{ code: "30", name: "ورقلة", price: 700 },
{ code: "31", name: "وهران", price: 500 },
{ code: "32", name: "البيض", price: 700 },
{ code: "33", name: "إليزي", price: 1000 },
{ code: "34", name: "برج بوعريريج", price: 500 },
{ code: "36", name: "الطارف", price: 500 },
{ code: "37", name: "تندوف", price: 1000 },
{ code: "38", name: "تيسمسيلت", price: 600 },
{ code: "39", name: "الوادي", price: 700 },
{ code: "40", name: "خنشلة", price: 600 },
{ code: "41", name: "سوق أهراس", price: 600 },
{ code: "43", name: "ميلة", price: 500 },
{ code: "44", name: "عين الدفلى", price: 500 },
{ code: "45", name: "النعامة", price: 700 },
{ code: "46", name: "عين تموشنت", price: 600 },
{ code: "47", name: "غرداية", price: 700 },
{ code: "48", name: "غليزان", price: 500 },
{ code: "49", name: "تيميمون", price: 900 },
{ code: "50", name: "برج باجي مختار", price: 1000 },
{ code: "51", name: "أولاد جلال", price: 700 },
{ code: "52", name: "بني عباس", price: 900 },
{ code: "53", name: "عين صالح", price: 900 },
{ code: "54", name: "عين قزام", price: 1000 },
{ code: "55", name: "توقرت", price: 700 },
{ code: "56", name: "جانت", price: 1000 },
{ code: "57", name: "المغير", price: 700 },
{ code: "58", name: "المنيعة", price: 800 },
];
const PRODUCT_PRICE = 15700;
const orderSchema = z.object({
fullName: z.string().trim().min(3, "الاسم يجب أن يكون 3 أحرف على الأقل").max(100, "الاسم طويل جداً"),
phone: z.string().trim().regex(/^(0)(5|6|7)[0-9]{8}$/, "رقم الهاتف غير صحيح (مثال: 0551234567)"),
wilaya: z.string().min(1, "يرجى اختيار الولاية"),
address: z.string().trim().min(10, "العنوان يجب أن يكون 10 أحرف على الأقل").max(300, "العنوان طويل جداً"),
});
const OrderForm = () => {
const { toast } = useToast();
const [formData, setFormData] = useState({
fullName: "",
phone: "",
wilaya: "",
address: "",
});
const [errors, setErrors] = useState>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const selectedWilaya = wilayas.find(w => w.code === formData.wilaya);
const deliveryPrice = selectedWilaya?.price || 0;
const totalPrice = PRODUCT_PRICE + deliveryPrice;
const handleChange = (e: React.ChangeEvent) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
if (errors[name]) {
setErrors(prev => ({ ...prev, [name]: "" }));
}
};
const handleWilayaChange = (value: string) => {
setFormData(prev => ({ ...prev, wilaya: value }));
if (errors.wilaya) {
setErrors(prev => ({ ...prev, wilaya: "" }));
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setErrors({});
const result = orderSchema.safeParse(formData);
if (!result.success) {
const fieldErrors: Record = {};
result.error.errors.forEach(err => {
if (err.path[0]) {
fieldErrors[err.path[0] as string] = err.message;
}
});
setErrors(fieldErrors);
return;
}
setIsSubmitting(true);
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1500));
setIsSubmitting(false);
setIsSubmitted(true);
toast({
title: "تم تأكيد الطلب بنجاح!",
description: "سنتواصل معك قريباً لتأكيد التوصيل",
});
};
if (isSubmitted) {
return (
);
}
return (
);
};
export default OrderForm;
شكراً لك! تم استلام طلبك
سيتواصل معك فريقنا خلال 24 ساعة لتأكيد الطلب وترتيب التوصيل.
تفاصيل الطلب:
الاسم: {formData.fullName}
الهاتف: {formData.phone}
الولاية: {selectedWilaya?.name}
العنوان: {formData.address}
سعر المنتج: {PRODUCT_PRICE.toLocaleString()} DA
سعر التوصيل: {deliveryPrice.toLocaleString()} DA
المجموع: {totalPrice.toLocaleString()} DA
اطلب الآن
املأ النموذج وسنتواصل معك لتأكيد الطلب - الدفع عند الاستلام
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import { CheckCircle, Phone, User, MapPin, Truck } from "lucide-react";
import { z } from "zod";
// Algerian Wilayas with delivery prices
const wilayas = [
{ code: "16", name: "الجزائر", price: 400 },
{ code: "09", name: "البليدة", price: 400 },
{ code: "35", name: "بومرداس", price: 400 },
{ code: "42", name: "تيبازة", price: 400 },
{ code: "01", name: "أدرار", price: 800 },
{ code: "02", name: "الشلف", price: 500 },
{ code: "03", name: "الأغواط", price: 600 },
{ code: "04", name: "أم البواقي", price: 600 },
{ code: "05", name: "باتنة", price: 600 },
{ code: "06", name: "بجاية", price: 500 },
{ code: "07", name: "بسكرة", price: 600 },
{ code: "08", name: "بشار", price: 800 },
{ code: "10", name: "البويرة", price: 500 },
{ code: "11", name: "تمنراست", price: 1000 },
{ code: "12", name: "تبسة", price: 600 },
{ code: "13", name: "تلمسان", price: 600 },
{ code: "14", name: "تيارت", price: 600 },
{ code: "15", name: "تيزي وزو", price: 500 },
{ code: "17", name: "الجلفة", price: 600 },
{ code: "18", name: "جيجل", price: 500 },
{ code: "19", name: "سطيف", price: 500 },
{ code: "20", name: "سعيدة", price: 600 },
{ code: "21", name: "سكيكدة", price: 500 },
{ code: "22", name: "سيدي بلعباس", price: 600 },
{ code: "23", name: "عنابة", price: 500 },
{ code: "24", name: "قالمة", price: 500 },
{ code: "25", name: "قسنطينة", price: 500 },
{ code: "26", name: "المدية", price: 500 },
{ code: "27", name: "مستغانم", price: 500 },
{ code: "28", name: "المسيلة", price: 600 },
{ code: "29", name: "معسكر", price: 600 },
{ code: "30", name: "ورقلة", price: 700 },
{ code: "31", name: "وهران", price: 500 },
{ code: "32", name: "البيض", price: 700 },
{ code: "33", name: "إليزي", price: 1000 },
{ code: "34", name: "برج بوعريريج", price: 500 },
{ code: "36", name: "الطارف", price: 500 },
{ code: "37", name: "تندوف", price: 1000 },
{ code: "38", name: "تيسمسيلت", price: 600 },
{ code: "39", name: "الوادي", price: 700 },
{ code: "40", name: "خنشلة", price: 600 },
{ code: "41", name: "سوق أهراس", price: 600 },
{ code: "43", name: "ميلة", price: 500 },
{ code: "44", name: "عين الدفلى", price: 500 },
{ code: "45", name: "النعامة", price: 700 },
{ code: "46", name: "عين تموشنت", price: 600 },
{ code: "47", name: "غرداية", price: 700 },
{ code: "48", name: "غليزان", price: 500 },
{ code: "49", name: "تيميمون", price: 900 },
{ code: "50", name: "برج باجي مختار", price: 1000 },
{ code: "51", name: "أولاد جلال", price: 700 },
{ code: "52", name: "بني عباس", price: 900 },
{ code: "53", name: "عين صالح", price: 900 },
{ code: "54", name: "عين قزام", price: 1000 },
{ code: "55", name: "توقرت", price: 700 },
{ code: "56", name: "جانت", price: 1000 },
{ code: "57", name: "المغير", price: 700 },
{ code: "58", name: "المنيعة", price: 800 },
];
const PRODUCT_PRICE = 15700;
const orderSchema = z.object({
fullName: z.string().trim().min(3, "الاسم يجب أن يكون 3 أحرف على الأقل").max(100, "الاسم طويل جداً"),
phone: z.string().trim().regex(/^(0)(5|6|7)[0-9]{8}$/, "رقم الهاتف غير صحيح (مثال: 0551234567)"),
wilaya: z.string().min(1, "يرجى اختيار الولاية"),
address: z.string().trim().min(10, "العنوان يجب أن يكون 10 أحرف على الأقل").max(300, "العنوان طويل جداً"),
});
const OrderForm = () => {
const { toast } = useToast();
const [formData, setFormData] = useState({
fullName: "",
phone: "",
wilaya: "",
address: "",
});
const [errors, setErrors] = useState>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const selectedWilaya = wilayas.find(w => w.code === formData.wilaya);
const deliveryPrice = selectedWilaya?.price || 0;
const totalPrice = PRODUCT_PRICE + deliveryPrice;
const handleChange = (e: React.ChangeEvent) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
if (errors[name]) {
setErrors(prev => ({ ...prev, [name]: "" }));
}
};
const handleWilayaChange = (value: string) => {
setFormData(prev => ({ ...prev, wilaya: value }));
if (errors.wilaya) {
setErrors(prev => ({ ...prev, wilaya: "" }));
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setErrors({});
const result = orderSchema.safeParse(formData);
if (!result.success) {
const fieldErrors: Record = {};
result.error.errors.forEach(err => {
if (err.path[0]) {
fieldErrors[err.path[0] as string] = err.message;
}
});
setErrors(fieldErrors);
return;
}
setIsSubmitting(true);
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1500));
setIsSubmitting(false);
setIsSubmitted(true);
toast({
title: "تم تأكيد الطلب بنجاح!",
description: "سنتواصل معك قريباً لتأكيد التوصيل",
});
};
if (isSubmitted) {
return (
);
}
return (
);
};
export default OrderForm;
شكراً لك! تم استلام طلبك
سيتواصل معك فريقنا خلال 24 ساعة لتأكيد الطلب وترتيب التوصيل.
تفاصيل الطلب:
الاسم: {formData.fullName}
الهاتف: {formData.phone}
الولاية: {selectedWilaya?.name}
العنوان: {formData.address}
سعر المنتج: {PRODUCT_PRICE.toLocaleString()} DA
سعر التوصيل: {deliveryPrice.toLocaleString()} DA
المجموع: {totalPrice.toLocaleString()} DA
اطلب الآن
املأ النموذج وسنتواصل معك لتأكيد الطلب - الدفع عند الاستلام
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import { CheckCircle, Phone, User, MapPin, Truck } from "lucide-react";
import { z } from "zod";
// Algerian Wilayas with delivery prices
const wilayas = [
{ code: "16", name: "الجزائر", price: 400 },
{ code: "09", name: "البليدة", price: 400 },
{ code: "35", name: "بومرداس", price: 400 },
{ code: "42", name: "تيبازة", price: 400 },
{ code: "01", name: "أدرار", price: 800 },
{ code: "02", name: "الشلف", price: 500 },
{ code: "03", name: "الأغواط", price: 600 },
{ code: "04", name: "أم البواقي", price: 600 },
{ code: "05", name: "باتنة", price: 600 },
{ code: "06", name: "بجاية", price: 500 },
{ code: "07", name: "بسكرة", price: 600 },
{ code: "08", name: "بشار", price: 800 },
{ code: "10", name: "البويرة", price: 500 },
{ code: "11", name: "تمنراست", price: 1000 },
{ code: "12", name: "تبسة", price: 600 },
{ code: "13", name: "تلمسان", price: 600 },
{ code: "14", name: "تيارت", price: 600 },
{ code: "15", name: "تيزي وزو", price: 500 },
{ code: "17", name: "الجلفة", price: 600 },
{ code: "18", name: "جيجل", price: 500 },
{ code: "19", name: "سطيف", price: 500 },
{ code: "20", name: "سعيدة", price: 600 },
{ code: "21", name: "سكيكدة", price: 500 },
{ code: "22", name: "سيدي بلعباس", price: 600 },
{ code: "23", name: "عنابة", price: 500 },
{ code: "24", name: "قالمة", price: 500 },
{ code: "25", name: "قسنطينة", price: 500 },
{ code: "26", name: "المدية", price: 500 },
{ code: "27", name: "مستغانم", price: 500 },
{ code: "28", name: "المسيلة", price: 600 },
{ code: "29", name: "معسكر", price: 600 },
{ code: "30", name: "ورقلة", price: 700 },
{ code: "31", name: "وهران", price: 500 },
{ code: "32", name: "البيض", price: 700 },
{ code: "33", name: "إليزي", price: 1000 },
{ code: "34", name: "برج بوعريريج", price: 500 },
{ code: "36", name: "الطارف", price: 500 },
{ code: "37", name: "تندوف", price: 1000 },
{ code: "38", name: "تيسمسيلت", price: 600 },
{ code: "39", name: "الوادي", price: 700 },
{ code: "40", name: "خنشلة", price: 600 },
{ code: "41", name: "سوق أهراس", price: 600 },
{ code: "43", name: "ميلة", price: 500 },
{ code: "44", name: "عين الدفلى", price: 500 },
{ code: "45", name: "النعامة", price: 700 },
{ code: "46", name: "عين تموشنت", price: 600 },
{ code: "47", name: "غرداية", price: 700 },
{ code: "48", name: "غليزان", price: 500 },
{ code: "49", name: "تيميمون", price: 900 },
{ code: "50", name: "برج باجي مختار", price: 1000 },
{ code: "51", name: "أولاد جلال", price: 700 },
{ code: "52", name: "بني عباس", price: 900 },
{ code: "53", name: "عين صالح", price: 900 },
{ code: "54", name: "عين قزام", price: 1000 },
{ code: "55", name: "توقرت", price: 700 },
{ code: "56", name: "جانت", price: 1000 },
{ code: "57", name: "المغير", price: 700 },
{ code: "58", name: "المنيعة", price: 800 },
];
const PRODUCT_PRICE = 15700;
const orderSchema = z.object({
fullName: z.string().trim().min(3, "الاسم يجب أن يكون 3 أحرف على الأقل").max(100, "الاسم طويل جداً"),
phone: z.string().trim().regex(/^(0)(5|6|7)[0-9]{8}$/, "رقم الهاتف غير صحيح (مثال: 0551234567)"),
wilaya: z.string().min(1, "يرجى اختيار الولاية"),
address: z.string().trim().min(10, "العنوان يجب أن يكون 10 أحرف على الأقل").max(300, "العنوان طويل جداً"),
});
const OrderForm = () => {
const { toast } = useToast();
const [formData, setFormData] = useState({
fullName: "",
phone: "",
wilaya: "",
address: "",
});
const [errors, setErrors] = useState>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const selectedWilaya = wilayas.find(w => w.code === formData.wilaya);
const deliveryPrice = selectedWilaya?.price || 0;
const totalPrice = PRODUCT_PRICE + deliveryPrice;
const handleChange = (e: React.ChangeEvent) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
if (errors[name]) {
setErrors(prev => ({ ...prev, [name]: "" }));
}
};
const handleWilayaChange = (value: string) => {
setFormData(prev => ({ ...prev, wilaya: value }));
if (errors.wilaya) {
setErrors(prev => ({ ...prev, wilaya: "" }));
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setErrors({});
const result = orderSchema.safeParse(formData);
if (!result.success) {
const fieldErrors: Record = {};
result.error.errors.forEach(err => {
if (err.path[0]) {
fieldErrors[err.path[0] as string] = err.message;
}
});
setErrors(fieldErrors);
return;
}
setIsSubmitting(true);
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1500));
setIsSubmitting(false);
setIsSubmitted(true);
toast({
title: "تم تأكيد الطلب بنجاح!",
description: "سنتواصل معك قريباً لتأكيد التوصيل",
});
};
if (isSubmitted) {
return (
);
}
return (
);
};
export default OrderForm;
شكراً لك! تم استلام طلبك
سيتواصل معك فريقنا خلال 24 ساعة لتأكيد الطلب وترتيب التوصيل.
تفاصيل الطلب:
الاسم: {formData.fullName}
الهاتف: {formData.phone}
الولاية: {selectedWilaya?.name}
العنوان: {formData.address}
سعر المنتج: {PRODUCT_PRICE.toLocaleString()} DA
سعر التوصيل: {deliveryPrice.toLocaleString()} DA
المجموع: {totalPrice.toLocaleString()} DA
اطلب الآن
املأ النموذج وسنتواصل معك لتأكيد الطلب - الدفع عند الاستلام