function CheckoutScreen({ onClose, isVisible, product, handleSubmit }) { const [paymentInfo, setPaymentInfo] = React.useState({ cardNumber: '', cardHolder: '', expirationDate: '', cvv: '' }); const backdropStyle = isVisible ? 'flex' : 'hidden'; const handleInputChange = (e)=>{ const { name, value } = e.target; setPaymentInfo({ ...paymentInfo, [name]: value }); }; return /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 bg-[#00000080] ${backdropStyle} items-center justify-center p-4`, __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg w-full max-w-lg p-6 m-auto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#121212] font-bold", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Checkout"), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "text-[#121212] text-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("div", { className: "border-b pb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-[#121212] mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, product.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, `$${product.price.toFixed(2)}`))), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>handleSubmit(e, paymentInfo), className: "space-y-6 mt-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cardNumber", className: "text-[#121212] block mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Card Number"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardNumber", id: "cardNumber", value: paymentInfo.cardNumber, onChange: handleInputChange, className: "w-full px-3 py-2 border rounded-md", placeholder: "1234 5678 9012 3456", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cardHolder", className: "text-[#121212] block mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Card Holder"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardHolder", id: "cardHolder", value: paymentInfo.cardHolder, onChange: handleInputChange, className: "w-full px-3 py-2 border rounded-md", placeholder: "Name on card", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "expirationDate", className: "text-[#121212] block mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Expiration Date"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "expirationDate", id: "expirationDate", value: paymentInfo.expirationDate, onChange: handleInputChange, className: "w-full px-3 py-2 border rounded-md", placeholder: "MM/YY", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cvv", className: "text-[#121212] block mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "CVV"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cvv", id: "cvv", value: paymentInfo.cvv, onChange: handleInputChange, className: "w-full px-3 py-2 border rounded-md", placeholder: "123", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#0056b3] text-white py-3 rounded-md hover:bg-[#004494]", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Place Order")))); } function CheckoutScreenStory() { const productData = { title: "Awesome Product", description: "This is a really awesome product that you definitely need.", price: 199.99 }; const handleSubmit = (e, paymentInfo)=>{ e.preventDefault(); console.log('Order placed with payment info:', paymentInfo); }; const [checkoutVisible, setCheckoutVisible] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CheckoutScreen, { isVisible: checkoutVisible, onClose: ()=>setCheckoutVisible(false), product: productData, handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCheckoutVisible(true), className: "bg-[#0056b3] text-white px-8 py-3 rounded-md hover:bg-[#004494]", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "Checkout Product"))); } function PurchaseTracker({ items, onPurchase }) { const totalAmount = items.reduce((acc, item)=>acc + item.price * item.quantity, 0); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white shadow-md rounded-lg p-6", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#121212] mb-6", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "Your Cart"), /*#__PURE__*/ React.createElement("div", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center py-4", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `${item.name}`, className: "w-16 h-16 object-cover rounded-md", style: { aspectRatio: '1' }, __source: { fileName: "", lineNumber: 12, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 19, columnNumber: 19 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 20, columnNumber: 19 }, __self: this }, "Quantity: ", item.quantity))), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "$", item.price * item.quantity)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center font-roboto text-[#121212] mt-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Total Amount"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "$", totalAmount.toFixed(2))), /*#__PURE__*/ React.createElement("button", { className: "mt-6 w-full bg-blue-600 text-white font-roboto font-medium py-3 rounded-md hover:bg-blue-700", onClick: onPurchase, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Checkout"))); } function PurchaseTrackerStory() { const items = [ { name: 'Keyboard', quantity: 1, price: 99.99, image: 'images/keyboard.jpg' }, { name: 'Mouse', quantity: 2, price: 49.99, image: 'images/mouse.jpg' }, { name: 'Monitor', quantity: 1, price: 199.99, image: 'images/monitor.jpg' } ]; const handlePurchase = ()=>{ alert('Purchase Completed!'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PurchaseTracker, { items: items, onPurchase: handlePurchase, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function SimpleBuyButton({ onBuy }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700 transition-colors", onClick: onBuy, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Buy Now"); } function SimpleBuyButtonStory() { const handleBuy = ()=>{ window.location.href = '/purchase'; }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SimpleBuyButton, { onBuy: handleBuy, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedConsole, setSelectedConsole] = React.useState(null); const [showPurchase, setShowPurchase] = React.useState(false); const [showCheckout, setShowCheckout] = React.useState(false); const consoles = [ { name: 'PS1', image: 'images/ps1.jpg', price: 30.00 }, { name: 'PS2', image: 'images/ps2.jpg', price: 40.00 }, { name: 'PS3', image: 'images/ps3.jpg', price: 60.00 }, { name: 'Xbox', image: 'images/xbox.jpg', price: 35.00 }, { name: 'Xbox 360', image: 'images/xbox-360.jpg', price: 50.00 }, { name: 'Xbox One', image: 'images/xbox-one.jpg', price: 75.00 }, { name: 'Nintendo 64', image: 'images/nintendo-64.jpg', price: 45.00 }, { name: 'Super Nintendo', image: 'images/super-nintendo.jpg', price: 55.00 } ]; const handleBuy = (console1)=>{ setSelectedConsole(console1); setShowPurchase(true); }; const handleCheckout = ()=>{ setShowCheckout(true); }; const handleSubmit = (e, paymentInfo)=>{ e.preventDefault(); console.log('Order placed with payment info:', paymentInfo); setShowPurchase(false); setShowCheckout(false); }; const storePage = /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, consoles.map((console1)=>/*#__PURE__*/ React.createElement("div", { key: console1.name, className: "bg-white p-4 shadow-md rounded-lg text-center space-y-3", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: console1.image, alt: `${console1.name} console`, className: "w-32 h-32 mx-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, console1.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "$", console1.price.toFixed(2)), /*#__PURE__*/ React.createElement(SimpleBuyButton, { onBuy: ()=>handleBuy(console1), __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })))); const purchasePage = selectedConsole && (showCheckout ? /*#__PURE__*/ React.createElement(CheckoutScreen, { isVisible: showCheckout, onClose: ()=>setShowCheckout(false), product: { title: selectedConsole.name, description: `Retro ${selectedConsole.name} console.`, price: selectedConsole.price }, handleSubmit: handleSubmit, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }) : /*#__PURE__*/ React.createElement(PurchaseTracker, { items: [ { name: selectedConsole.name, quantity: 1, price: selectedConsole.price, image: selectedConsole.image } ], onPurchase: handleCheckout, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-10 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, !showPurchase ? storePage : purchasePage); }