import { useState, useEffect } from "react"; import Offcanvas from "../../components/Offcanvas"; import { Formik, Form, Field, ErrorMessage } from "formik"; import * as Yup from "yup"; import Select from "react-select"; import Button from "../../components/Buttons"; import pendant from '../../assets/images/product/pendant.png'; import { productApi } from "../../api/productApi"; import { orderApi } from "../../api/orderApi"; import { customerApi } from "../../api/customerApi"; import Swal from 'sweetalert2'; const channels = [ { key: "whatsapp", label: "WhatsApp", color: "emerald" }, { key: "instagram", label: "Instagram", color: "pink" }, ]; const inputCls = 'w-full border border-[#ECE2D2] bg-[#FBF6ED] rounded-[10px] px-[14px] py-[10px] text-[14px] text-[#3B2F28] outline-none box-border focus:border-[#CF8F42] focus:ring-1 focus:ring-[#CF8F42] transition'; const selectStyles = { control: (base: any, state: any) => ({ ...base, transition: "all 0.2s ease", backgroundColor: "#FBF6ED", borderColor: state.isFocused ? "#CF8F42" : "#ECE2D2", boxShadow: state.isFocused ? "0 0 0 3px rgba(207, 143, 66, 0.15)" : "none", borderRadius: "10px", padding: "2px 6px", minHeight: "42px", fontSize: "14px", color: "#3B2F28", "&:hover": { borderColor: "#CF8F42", }, }), valueContainer: (base: any) => ({ ...base, padding: "2px 6px", }), input: (base: any) => ({ ...base, color: "#3B2F28", }), placeholder: (base: any) => ({ ...base, color: "#9A8F86", fontSize: "14px", }), singleValue: (base: any) => ({ ...base, color: "#3B2F28", fontSize: "14px", }), menu: (base: any) => ({ ...base, borderRadius: "10px", overflow: "hidden", marginTop: 6, backgroundColor: "#ffffff", border: "1px solid #ECE2D2", }), option: (base: any, state: any) => ({ ...base, fontSize: "14px", backgroundColor: state.isFocused ? "#FBF6ED" : state.isSelected ? "#F3E3C7" : "#fff", color: "#3B2F28", cursor: "pointer", }), dropdownIndicator: (base: any) => ({ ...base, color: "#3B2F28", "&:hover": { color: "#CF8F42", }, }), indicatorSeparator: () => ({ display: "none", }), }; const validationSchema = Yup.object({ name: Yup.string().trim().required("Full name is required"), phone: Yup.string() .trim() .required("Phone Number 1 is required") .matches(/^[0-9+\s()-]{7,20}$/, "Invalid phone number"), phone2: Yup.string() .trim() .matches(/^[0-9+\s()-]{7,20}$/, "Invalid phone number") .nullable(), email: Yup.string().trim().email("Invalid email address").nullable(), address: Yup.string().trim().required("Address / Street details are required"), city: Yup.string().trim().nullable(), state: Yup.string().trim().nullable(), pincode: Yup.string().trim().required("Pincode is required"), channel: Yup.string().required(), }); const INDIAN_STATES = [ 'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat', 'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh', 'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab', 'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttar Pradesh', 'Uttarakhand', 'West Bengal', 'Delhi', 'Jammu and Kashmir', 'Ladakh', 'Puducherry', 'Chandigarh' ]; const CITY_TO_STATE: Record = { bangalore: 'Karnataka', bengaluru: 'Karnataka', mysore: 'Karnataka', mysuru: 'Karnataka', hubli: 'Karnataka', mangalore: 'Karnataka', chennai: 'Tamil Nadu', coimbatore: 'Tamil Nadu', madurai: 'Tamil Nadu', salem: 'Tamil Nadu', trichy: 'Tamil Nadu', tiruchirappalli: 'Tamil Nadu', tirunelveli: 'Tamil Nadu', erode: 'Tamil Nadu', vellore: 'Tamil Nadu', hyderabad: 'Telangana', secunderabad: 'Telangana', warangal: 'Telangana', visakhapatnam: 'Andhra Pradesh', vijayawada: 'Andhra Pradesh', guntur: 'Andhra Pradesh', mumbai: 'Maharashtra', pune: 'Maharashtra', nagpur: 'Maharashtra', thane: 'Maharashtra', nashik: 'Maharashtra', delhi: 'Delhi', 'new delhi': 'Delhi', noida: 'Uttar Pradesh', gurgaon: 'Haryana', gurugram: 'Haryana', kolkata: 'West Bengal', ahmedabad: 'Gujarat', surat: 'Gujarat', vadodara: 'Gujarat', jaipur: 'Rajasthan', jodhpur: 'Rajasthan', udaipur: 'Rajasthan', lucknow: 'Uttar Pradesh', kanpur: 'Uttar Pradesh', agra: 'Uttar Pradesh', varanasi: 'Uttar Pradesh', kochi: 'Kerala', cochin: 'Kerala', thiruvananthapuram: 'Kerala', trivandrum: 'Kerala', kozhikode: 'Kerala', calicut: 'Kerala', bhopal: 'Madhya Pradesh', indore: 'Madhya Pradesh', patna: 'Bihar', chandigarh: 'Chandigarh', bhubaneswar: 'Odisha', guwahati: 'Assam', }; function isState(str?: string | null): boolean { if (!str) return false; return INDIAN_STATES.some((s) => s.toLowerCase() === str.trim().toLowerCase()); } export function parseCustomerAddress(rawAddress?: string | null): { address: string; city: string; state: string; pincode: string; } { if ( !rawAddress || !rawAddress.trim() || rawAddress.trim().toLowerCase() === 'india' || rawAddress.trim().toLowerCase() === 'no address provided' ) { return { address: '', city: '', state: '', pincode: '' }; } let text = rawAddress.trim(); // 1. Extract 6-digit Pincode (e.g. 560001 or - 560001) let pincode = ''; const pinMatch = text.match(/(?:^|[^0-9])([1-9][0-9]{5})(?:[^0-9]|$)/); if (pinMatch) { pincode = pinMatch[1]; text = text.replace(new RegExp('[-–,]?\\s*' + pincode + '.*$', 'i'), '').trim(); } // 2. Split remainder by commas const parts = text.split(',').map((p) => p.trim()).filter(Boolean); let city = ''; let state = ''; let address = ''; if (parts.length >= 3) { const last = parts[parts.length - 1]; const secondLast = parts[parts.length - 2]; if (isState(last)) { state = last; city = secondLast; address = parts.slice(0, parts.length - 2).join(', '); } else { city = last; address = parts.slice(0, parts.length - 1).join(', '); } } else if (parts.length === 2) { const last = parts[1]; if (isState(last)) { state = last; address = parts[0]; } else { city = last; address = parts[0]; } } else if (parts.length === 1) { address = parts[0]; } // 3. Fallback state from city if not present if (!state && city) { const matchedState = CITY_TO_STATE[city.toLowerCase()]; if (matchedState) { state = matchedState; } } return { address, city, state, pincode }; } const initialValues = { name: "", phone: "", phone2: "", email: "", address: "", city: "", state: "", pincode: "", channel: "whatsapp", }; export default function QuickOrderAdd({ open, setOpen, onSuccess, initialData }: any) { const [selectedChannel, setSelectedChannel] = useState("whatsapp"); const [customersData, setCustomersData] = useState([]); const [filteredPhoneCustomers, setFilteredPhoneCustomers] = useState([]); const [showPhoneDropdown, setShowPhoneDropdown] = useState(false); const [filteredNameCustomers, setFilteredNameCustomers] = useState([]); const [showNameDropdown, setShowNameDropdown] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); useEffect(() => { if (open) { if (initialData?.channel) { setSelectedChannel(initialData.channel); } customerApi.getAllCustomers().then((res) => { if (res.success) { setCustomersData(res.data); } }); } }, [open, initialData]); const selectCustomer = (c: any, form: any) => { // 1. Full Name if (c.name && c.name !== 'Unknown') { form.setFieldValue("name", c.name); } // 2. Phone Number 1 & 2 const rawPhone = (c.phone && c.phone !== 'N/A') ? c.phone : ""; const phoneParts = rawPhone.split(/[,/|]/).map((p: string) => p.trim()).filter(Boolean); const phone1 = phoneParts[0] || (c.phone !== 'N/A' ? c.phone : ""); const phone2 = phoneParts[1] || ""; form.setFieldValue("phone", phone1); form.setFieldValue("phone2", phone2); // 3. Email (skip dummy generated emails if any) if (c.email && !c.email.endsWith('@example.com')) { form.setFieldValue("email", c.email); } else { form.setFieldValue("email", ""); } // 4. Communication Channel if (c.channel && (c.channel === 'whatsapp' || c.channel === 'instagram')) { form.setFieldValue("channel", c.channel); setSelectedChannel(c.channel); } // 5. Address, City, State, Pincode const parsed = parseCustomerAddress(c.address); form.setFieldValue("address", parsed.address || (c.address && c.address !== 'India' ? c.address : "")); form.setFieldValue("city", parsed.city || ""); form.setFieldValue("state", parsed.state || ""); form.setFieldValue("pincode", parsed.pincode || ""); // Close any open dropdowns setShowPhoneDropdown(false); setShowNameDropdown(false); }; return ( setOpen(false)} header={

Customer Registration Form

} footer={
} > { setIsSubmitting(true); try { const addressTrimmed = (values.address || '').trim(); const cityTrimmed = (values.city || '').trim(); const stateTrimmed = (values.state || '').trim(); const pincodeTrimmed = (values.pincode || '').trim(); const parts: string[] = [addressTrimmed]; if (cityTrimmed && !addressTrimmed.toLowerCase().includes(cityTrimmed.toLowerCase())) { parts.push(cityTrimmed); } if (stateTrimmed && !addressTrimmed.toLowerCase().includes(stateTrimmed.toLowerCase())) { parts.push(stateTrimmed); } let formattedAddress = parts.filter(Boolean).join(', '); if (pincodeTrimmed && !formattedAddress.includes(pincodeTrimmed)) { formattedAddress = formattedAddress ? `${formattedAddress} - ${pincodeTrimmed}` : pincodeTrimmed; } const phoneList = [values.phone?.trim(), values.phone2?.trim()].filter(Boolean); const formattedPhone = phoneList.join(', '); await orderApi.createOrder({ channel: values.channel, customer_name: values.name.trim(), customer_phone: formattedPhone, customer_email: values.email?.trim() || null, shipping_address: formattedAddress, qty: 0, amount: 0, }); Swal.fire({ icon: 'success', title: 'Patron Added to Waiting List!', toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 }); resetForm(); setSelectedChannel("whatsapp"); setOpen(false); if (onSuccess) onSuccess(); } catch (e) { console.error(e); Swal.fire({ icon: 'error', title: 'Failed to submit', text: 'Please try again.', toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 }); } setIsSubmitting(false); setSubmitting(false); }} > {({ values, setFieldValue }) => (
{channels.map((c) => { const active = selectedChannel === c.key; const styles = { whatsapp: { active: "bg-emerald-50 border-emerald-500 text-emerald-700 ring-2 ring-emerald-500/20", inactive: "text-emerald-600 hover:border-emerald-400", }, instagram: { active: "bg-pink-50 border-pink-500 text-pink-700 ring-2 ring-pink-500/20", inactive: "text-pink-600 hover:border-pink-400", }, }; return ( ); })}
{/* INPUTS */}
{({ field, form }: any) => ( <> { field.onChange(e); const val = e.target.value; if (val.trim().length >= 2) { const searchVal = val.toLowerCase().trim(); const searchDigits = val.replace(/\D/g, ''); const matches = customersData.filter((c: any) => { const cName = (c.name || '').toLowerCase().trim(); const cPhone = (c.phone || '').trim(); const cPhoneDigits = cPhone.replace(/\D/g, ''); if (cName && cName !== 'unknown' && cName.includes(searchVal)) return true; if (searchDigits.length >= 3 && cPhoneDigits.includes(searchDigits)) return true; return false; }); setFilteredNameCustomers(matches); setShowNameDropdown(matches.length > 0); } else { setShowNameDropdown(false); } }} onBlur={(e) => { field.onBlur(e); setTimeout(() => setShowNameDropdown(false), 250); }} /> {showNameDropdown && (
Matching Patrons {filteredNameCustomers.length} found
{filteredNameCustomers.map((c, i) => (
{ e.preventDefault(); selectCustomer(c, form); }} >
{(c.name && c.name !== 'Unknown' ? c.name[0] : 'C').toUpperCase()}
{c.name && c.name !== 'Unknown' ? c.name : 'Unknown Patron'}
{c.phone || 'No Phone'}
{c.address && c.address !== 'India' && (
📍 {c.address}
)}
))}
)} )}
{({ field, form }: any) => ( <> { field.onChange(e); const val = e.target.value; if (val.trim().length >= 3) { const searchVal = val.toLowerCase().trim(); const searchDigits = val.replace(/\D/g, ''); const matches = customersData.filter((c: any) => { const cPhone = (c.phone || '').trim(); const cName = (c.name || '').toLowerCase().trim(); const cPhoneDigits = cPhone.replace(/\D/g, ''); if (searchDigits.length >= 3 && cPhoneDigits.includes(searchDigits)) return true; if (cPhone.includes(searchVal)) return true; if (cName && cName !== 'unknown' && cName.includes(searchVal)) return true; return false; }); setFilteredPhoneCustomers(matches); setShowPhoneDropdown(matches.length > 0); } else { setShowPhoneDropdown(false); } }} onBlur={(e) => { field.onBlur(e); setTimeout(() => setShowPhoneDropdown(false), 250); }} /> {showPhoneDropdown && (
Matching Patrons {filteredPhoneCustomers.length} found
{filteredPhoneCustomers.map((c, i) => (
{ e.preventDefault(); selectCustomer(c, form); }} >
{(c.name && c.name !== 'Unknown' ? c.name[0] : 'C').toUpperCase()}
{c.name && c.name !== 'Unknown' ? c.name : 'Unknown Patron'}
{c.phone || 'No Phone'}
{c.address && c.address !== 'India' && (
📍 {c.address}
)}
))}
)} )}
)} ); }