function MainComponent({ step, email = '', activities, onEmailSubmit, onActivitiesSubmit }) { const [currentEmail, setCurrentEmail] = React.useState(email); const [submissionStatus, setSubmissionStatus] = React.useState(null); const handleLoginSubmit = (event)=>{ event.preventDefault(); onEmailSubmit(currentEmail); }; const handleActivitiesSubmit = async (event)=>{ event.preventDefault(); const data = new FormData(event.target); const activitiesData = activities.map((_, index)=>({ category: data.get(`category-${index}`), content: data.get(`content-${index}`), time: data.get(`time-${index}`), projectId: data.get(`projectId-${index}`) })); await onActivitiesSubmit(activitiesData); setSubmissionStatus("Activities registered successfully!"); }; const ActivityForm = activities.map((activity, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4 items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `category-${index}`, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Category"), /*#__PURE__*/ React.createElement("select", { id: `category-${index}`, name: `category-${index}`, defaultValue: activity.category, className: "mt-1 p-2 w-full bg-white border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Initial Demo", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Initial Demo"), /*#__PURE__*/ React.createElement("option", { value: "RFP Response", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "RFP Response"), /*#__PURE__*/ React.createElement("option", { value: "Hearing", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Hearing"), /*#__PURE__*/ React.createElement("option", { value: "Custom Demo", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Custom Demo"), /*#__PURE__*/ React.createElement("option", { value: "QA Support", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "QA Support"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `content-${index}`, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Content"), /*#__PURE__*/ React.createElement("input", { type: "text", id: `content-${index}`, name: `content-${index}`, defaultValue: activity.content, className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `time-${index}`, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("input", { type: "time", id: `time-${index}`, name: `time-${index}`, defaultValue: activity.time, className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `projectId-${index}`, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Project ID"), /*#__PURE__*/ React.createElement("input", { type: "text", id: `projectId-${index}`, name: `projectId-${index}`, defaultValue: activity.projectId, className: "mt-1 p-2 w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }))))); return /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 min-h-screen p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("form", { onSubmit: handleLoginSubmit, className: "max-w-lg mx-auto mt-10 bg-blue-300 p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Enter Microsoft Account"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: currentEmail, onChange: (e)=>setCurrentEmail(e.target.value), className: "mt-3 p-3 w-full border border-gray-300 rounded-md", placeholder: "e.g., yourname@example.com", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-6", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Login"))), step === 2 && /*#__PURE__*/ React.createElement("form", { onSubmit: handleActivitiesSubmit, className: "max-w-4xl mx-auto mt-10", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, ActivityForm, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Confirm"))), submissionStatus && /*#__PURE__*/ React.createElement("div", { className: "text-center p-2 mt-4 bg-green-400 rounded-md", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, submissionStatus)); } function StoryComponent() { const [step, setStep] = React.useState(1); const activities = [ { category: "Initial Demo", content: "Product introduction", time: "02:00", projectId: "PD1001" }, { category: "RFP Response", content: "Response to RFP doc", time: "03:00", projectId: "PD1002" }, { category: "Hearing", content: "Client hearing session", time: "01:30", projectId: "PD1003" }, { category: "Custom Demo", content: "Custom product demo", time: "02:30", projectId: "PD1004" }, { category: "QA Support", content: "Quality assurance", time: "01:00", projectId: "PD1005" } ]; const handleEmailSubmit = (email)=>{ setStep(2); }; const handleActivitiesSubmit = (activities)=>{ console.log('Activities submitted:', activities); setStep(3); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, step === 3 ? /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 bg-blue-300 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-xl text-white", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Activities registered successfully!")) : /*#__PURE__*/ React.createElement(MainComponent, { step: step, email: "example@microsoft.com", activities: activities, onEmailSubmit: handleEmailSubmit, onActivitiesSubmit: handleActivitiesSubmit, __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this })); }