function MainComponent() { const [userRole, setUserRole] = React.useState(null); const [userSignIn, setUserSignIn] = React.useState(false); const [agentSignIn, setAgentSignIn] = React.useState(false); const [signedInUser, setSignedInUser] = React.useState(null); const [currentLocation, setCurrentLocation] = React.useState(null); const [agentRequest, setAgentRequest] = React.useState(false); const [agentsNearby, setAgentsNearby] = React.useState(null); const [selectedAgent, setSelectedAgent] = React.useState(null); const [paymentType, setPaymentType] = React.useState(null); async function signIn(role, formData) { const data = Object.fromEntries(new FormData(formData)); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: role, content: JSON.stringify(data) } ], system_prompt: `Handle ${role} sign-in data`, max_tokens: 2000 }) }); if (role === 'customer') { setUserSignIn(true); } else { setAgentSignIn(true); } const result = await response.json(); if (result.status) { if (role === 'customer') { setSignedInUser(data); } return true; } else { return false; } } async function requestAgent(data) { const response = await fetch(`/integrations/google-search/search?q=${data.task}+${data.location}`, { method: 'GET' }); const result = await response.json(); if (result.status === "success") { setAgentRequest(true); setAgentsNearby(result.items); } } function handleUserSelect(role) { setUserRole(role); if (role === 'customer') { setUserSignIn(true); } } function setCurrentLocationAndFetchAgents() { navigator.geolocation.getCurrentPosition((position)=>{ setCurrentLocation(position.coords); requestAgent({ task: "Find nearby SendThem agents", location: `Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}` }); }); } function renderUserRoleSelection() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-row divide-x divide-blue-500 bg-purple-600", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleUserSelect('customer'), className: "flex-1 bg-blue-500 text-white p-6 font-bold", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "For Customers"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleUserSelect('agent'), className: "flex-1 bg-blue-500 text-white p-6 font-bold", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "For Agents")); } function renderSignIn(role, fields, extraFields = null) { const isCustomer = role === 'customer'; const signInState = isCustomer ? userSignIn : agentSignIn; if (!signInState) return null; return /*#__PURE__*/ React.createElement("div", { className: "bg-purple-600 p-4 flex justify-center items-center", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); signIn(role, e.target); }, __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, fields.map((field)=>/*#__PURE__*/ React.createElement("input", { key: field.name, name: field.name, type: field.type, placeholder: field.placeholder, className: "block mb-4 p-2", required: field.required, ...field.type === "file" ? { accept: 'image/*' } : {}, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this })), extraFields && extraFields.map((field)=>/*#__PURE__*/ React.createElement("input", { key: field.name, name: field.name, type: field.type, placeholder: field.placeholder, className: "block mb-4 p-2", ...field.required ? { required: field.required } : {}, __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, "Sign In"))); } function renderCustomerApp() { if (!signedInUser) return null; return /*#__PURE__*/ React.createElement("div", { className: "bg-purple-600 relative h-full w-full", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "https://maps.google.com/maps?q=current%20location&t=&z=13&ie=UTF8&iwloc=&output=embed", className: "w-full h-3/4", allowFullScreen: "", loading: "lazy", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 right-0 bottom-0 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, !agentRequest ? /*#__PURE__*/ React.createElement("button", { onClick: setCurrentLocationAndFetchAgents, className: "text-xl bg-blue-500 text-white py-2 px-4 font-bold", __source: { fileName: "", lineNumber: 134, columnNumber: 14 }, __self: this }, "Request Agent") : renderAgentRequestForm())); } function handleRequestSubmit(e) { e.preventDefault(); requestAgent({ location: e.target.location.value, task: e.target.task.value, transport: e.target.transport.value }); } function renderAgentRequestForm() { return /*#__PURE__*/ React.createElement("form", { onSubmit: handleRequestSubmit, className: "w-full max-w-md", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "location", type: "text", placeholder: "Where are you sending the agent?", className: "block mb-4 p-2 w-full", required: true, __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "task", type: "text", placeholder: "What tasks will the agent perform there?", className: "block mb-4 p-2 w-full", required: true, __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "transport", className: "block mb-4 p-2 w-full", required: true, __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, "Choose agent type"), /*#__PURE__*/ React.createElement("option", { value: "bicycle", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, "Bicycle"), /*#__PURE__*/ React.createElement("option", { value: "walking", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, "Walking"), /*#__PURE__*/ React.createElement("option", { value: "small-car", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, "Small Car"), /*#__PURE__*/ React.createElement("option", { value: "medium-car", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, "Medium Car"), /*#__PURE__*/ React.createElement("option", { value: "big-car", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, "Big Car")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, "Confirm Order")); } function renderCustomerSignIn() { const fields = [ { name: 'name', type: 'text', placeholder: 'Name', required: true }, { name: 'surname', type: 'text', placeholder: 'Surname', required: true }, { name: 'idPassport', type: 'text', placeholder: 'ID/Passport Number', required: true }, { name: 'email', type: 'email', placeholder: 'Email Address', required: true }, { name: 'cellNumber', type: 'tel', placeholder: 'Cell Phone Number', required: true }, { name: 'password', type: 'password', placeholder: 'Password', required: true }, { name: 'passwordConfirm', type: 'password', placeholder: 'Confirm Password', required: true } ]; return renderSignIn('customer', fields); } function renderAgentSignIn() { const fields = [ { name: 'fullName', type: 'text', placeholder: 'Full Names', required: true }, { name: 'surname', type: 'text', placeholder: 'Surname', required: true }, { name: 'nationality', type: 'text', placeholder: 'Nationality', required: true }, { name: 'idPassport', type: 'text', placeholder: 'ID/Passport Number', required: true }, { name: 'email', type: 'email', placeholder: 'Email Address', required: true }, { name: 'address', type: 'text', placeholder: 'Physical Address', required: true }, { name: 'cellNumber', type: 'tel', placeholder: 'Cell Phone Number', required: true }, { name: 'transportMode', type: 'text', placeholder: 'Mode of Transport', required: true }, { name: 'password', type: 'password', placeholder: 'Password', required: true }, { name: 'passwordConfirm', type: 'password', placeholder: 'Confirm Password', required: true } ]; const extraFields = [ { name: 'vehicleInfo', type: 'text', placeholder: 'Vehicle Model and Registration' }, { name: 'profilePic', type: 'file', placeholder: 'Latest Picture' } ]; return renderSignIn('agent', fields, extraFields); } function renderContent() { if (signedInUser) { return renderCustomerApp(); } return /*#__PURE__*/ React.createElement(React.Fragment, null, renderUserRoleSelection(), userRole === 'customer' && renderCustomerSignIn(), userRole === 'agent' && renderAgentSignIn()); } return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 229, columnNumber: 10 }, __self: this }, renderContent()); }