Skip to content

Commit 4419e80

Browse files
Mishra-coderMishra-coder
committed
fix cart clear
1 parent 0366317 commit 4419e80

3 files changed

Lines changed: 113 additions & 14 deletions

File tree

‎frontend/src/App.jsx‎

Lines changed: 54 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,24 @@ function App() {
2020
const [sortOption, setSortOption] = useState('recommended');
2121
const [activeNav, setActiveNav] = useState('MEN');
2222
const [sneakersView, setSneakersView] = useState(false);
23-
const [loggedInUser, setLoggedInUser] = useState(null);
23+
const [loggedInUser, setLoggedInUser] = useState(() => {
24+
try { return JSON.parse(localStorage.getItem('zappify_user')) || null; } catch { return null; }
25+
});
2426
const [showCheckout, setShowCheckout] = useState(false);
2527
const [showAccount, setShowAccount] = useState(false);
26-
const [placedOrders, setPlacedOrders] = useState([]);
28+
const [placedOrders, setPlacedOrders] = useState(() => {
29+
try { return JSON.parse(localStorage.getItem('zappify_orders')) || []; } catch { return []; }
30+
});
31+
32+
const handleLogin = (user) => {
33+
setLoggedInUser(user);
34+
localStorage.setItem('zappify_user', JSON.stringify(user));
35+
};
36+
37+
const handleLogout = () => {
38+
setLoggedInUser(null);
39+
localStorage.removeItem('zappify_user');
40+
};
2741

2842
const toggleFilter = (item, type) => {
2943
if (type === 'category') {
@@ -97,7 +111,7 @@ function App() {
97111
wishlistCount={wishlistItems.length}
98112
activeNav={activeNav}
99113
loggedInUser={loggedInUser}
100-
onLogout={() => setLoggedInUser(null)}
114+
onLogout={handleLogout}
101115
onOpenAccount={() => setShowAccount(true)}
102116
/>
103117

@@ -168,7 +182,7 @@ function App() {
168182
wishlistItems={wishlistItems}
169183
onRemoveFromCart={removeFromCart}
170184
onToggleWishlist={toggleWishlist}
171-
onLoginSuccess={setLoggedInUser}
185+
onLoginSuccess={handleLogin}
172186
onCheckout={() => { setActiveOverlay(null); setShowCheckout(true); }}
173187
/>
174188
)}
@@ -179,7 +193,12 @@ function App() {
179193
cartItems={cartItems}
180194
onClose={() => setShowCheckout(false)}
181195
onRemoveFromCart={removeFromCart}
182-
onOrderPlaced={(items) => setPlacedOrders(prev => [...prev, ...items])}
196+
onOrderPlaced={(items) => {
197+
const updated = [...placedOrders, ...items];
198+
setPlacedOrders(updated);
199+
localStorage.setItem('zappify_orders', JSON.stringify(updated));
200+
setCartItems([]);
201+
}}
183202
/>
184203
)}
185204

@@ -188,7 +207,7 @@ function App() {
188207
user={loggedInUser}
189208
orders={placedOrders}
190209
onClose={() => setShowAccount(false)}
191-
onLogout={() => { setLoggedInUser(null); setShowAccount(false); }}
210+
onLogout={() => { handleLogout(); setShowAccount(false); }}
192211
/>
193212
)}
194213
</div>
@@ -197,9 +216,32 @@ function App() {
197216

198217
const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, onToggleWishlist, onLoginSuccess, onCheckout }) => {
199218
const [isSignUp, setIsSignUp] = useState(false);
219+
const [formData, setFormData] = useState({ name: '', email: '', password: '', confirm: '' });
220+
const [error, setError] = useState('');
200221
const isDrawer = type === 'cart' || type === 'wishlist';
201222
const cartTotal = cartItems.reduce((sum, i) => sum + i.price * i.qty, 0);
202223

224+
const handleAuth = () => {
225+
setError('');
226+
if (!formData.email || !formData.password) { setError('Please fill all fields'); return; }
227+
if (isSignUp) {
228+
if (!formData.name) { setError('Please enter your name'); return; }
229+
if (formData.password !== formData.confirm) { setError('Passwords do not match'); return; }
230+
if (formData.password.length < 6) { setError('Password must be at least 6 characters'); return; }
231+
const user = { name: formData.name, email: formData.email, picture: `https://ui-avatars.com/api/?name=${encodeURIComponent(formData.name)}&background=e85d04&color=fff` };
232+
onLoginSuccess(user);
233+
onClose();
234+
} else {
235+
const saved = JSON.parse(localStorage.getItem('zappify_user'));
236+
if (saved && saved.email === formData.email) {
237+
onLoginSuccess(saved);
238+
onClose();
239+
} else {
240+
setError('Account not found. Please sign up first.');
241+
}
242+
}
243+
};
244+
203245
return (
204246
<div className="overlay-system">
205247
<motion.div
@@ -300,11 +342,12 @@ const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, on
300342
<p>{isSignUp ? 'Join Zappify today' : 'Login to your Zappify account'}</p>
301343

302344
<div className="auth-form">
303-
{isSignUp && <input type="text" placeholder="Full Name" />}
304-
<input type="email" placeholder="Email Address" />
305-
<input type="password" placeholder="Password" />
306-
{isSignUp && <input type="password" placeholder="Confirm Password" />}
307-
<button className="btn-primary auth-btn">{isSignUp ? 'CREATE ACCOUNT' : 'SIGN IN'}</button>
345+
{isSignUp && <input type="text" placeholder="Full Name" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} />}
346+
<input type="email" placeholder="Email Address" value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} />
347+
<input type="password" placeholder="Password" value={formData.password} onChange={e => setFormData({...formData, password: e.target.value})} />
348+
{isSignUp && <input type="password" placeholder="Confirm Password" value={formData.confirm} onChange={e => setFormData({...formData, confirm: e.target.value})} />}
349+
{error && <p className="auth-error">{error}</p>}
350+
<button className="btn-primary auth-btn" onClick={handleAuth}>{isSignUp ? 'CREATE ACCOUNT' : 'SIGN IN'}</button>
308351
<div className="separator"><span>OR CONTINUE WITH</span></div>
309352
<div className="google-btn-wrap">
310353
<GoogleLogin

‎frontend/src/components/ProductDetail.jsx‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
import React, { useState } from 'react';
2-
import { motion } from 'framer-motion';
3-
import { ArrowLeft, ShoppingBag, Heart, Share2, ShieldCheck } from 'lucide-react';
2+
import { motion, AnimatePresence } from 'framer-motion';
3+
import { ArrowLeft, ShoppingBag, Heart, Share2, ShieldCheck, X } from 'lucide-react';
4+
5+
const SIZE_CHART = [
6+
{ uk: '6', us: '7', eu: '39', cm: '24.5' },
7+
{ uk: '7', us: '8', eu: '40', cm: '25.5' },
8+
{ uk: '8', us: '9', eu: '41', cm: '26' },
9+
{ uk: '9', us: '10', eu: '42', cm: '27' },
10+
{ uk: '10', us: '11', eu: '43', cm: '27.5' },
11+
{ uk: '11', us: '12', eu: '44', cm: '28.5' },
12+
];
413

514
const ProductDetail = ({ product, onBack, onAddToCart, onToggleWishlist, isWishlisted }) => {
615
const [selectedSize, setSelectedSize] = useState(null);
16+
const [showSizeChart, setShowSizeChart] = useState(false);
717
const sizes = ['7', '8', '9', '10', '11'];
818

919
const handleAddToCart = () => {
@@ -46,7 +56,7 @@ const ProductDetail = ({ product, onBack, onAddToCart, onToggleWishlist, isWishl
4656
<div className="size-selection">
4757
<div className="section-head">
4858
<h3>SELECT SIZE (UK)</h3>
49-
<span>SIZE CHART</span>
59+
<span className="size-chart-link" onClick={() => setShowSizeChart(true)}>SIZE CHART</span>
5060
</div>
5161
<div className="sizes-grid">
5262
{sizes.map(size => (
@@ -80,6 +90,37 @@ const ProductDetail = ({ product, onBack, onAddToCart, onToggleWishlist, isWishl
8090
</div>
8191
</div>
8292
</div>
93+
94+
<AnimatePresence>
95+
{showSizeChart && (
96+
<div className="size-chart-overlay" onClick={() => setShowSizeChart(false)}>
97+
<motion.div
98+
className="size-chart-modal"
99+
initial={{ opacity: 0, scale: 0.9 }}
100+
animate={{ opacity: 1, scale: 1 }}
101+
exit={{ opacity: 0, scale: 0.9 }}
102+
onClick={e => e.stopPropagation()}
103+
>
104+
<div className="size-chart-header">
105+
<h3>UK SIZE CHART</h3>
106+
<button onClick={() => setShowSizeChart(false)}><X size={20} /></button>
107+
</div>
108+
<table className="size-table">
109+
<thead>
110+
<tr><th>UK</th><th>US</th><th>EU</th><th>CM</th></tr>
111+
</thead>
112+
<tbody>
113+
{SIZE_CHART.map(row => (
114+
<tr key={row.uk} className={selectedSize === row.uk ? 'highlighted' : ''}>
115+
<td>{row.uk}</td><td>{row.us}</td><td>{row.eu}</td><td>{row.cm}</td>
116+
</tr>
117+
))}
118+
</tbody>
119+
</table>
120+
</motion.div>
121+
</div>
122+
)}
123+
</AnimatePresence>
83124
</div>
84125
);
85126
};

‎frontend/src/index.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1123,3 +1123,18 @@ ul {
11231123
.orders-empty span { font-size: 13px; color: #aaa; }
11241124
.account-logout-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border: 1.5px solid #e8e8e8; border-radius: 12px; background: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #555; cursor: pointer; }
11251125
.account-logout-btn:hover { border-color: #e85d04; color: #e85d04; }
1126+
1127+
/* Size Chart */
1128+
.size-chart-link { cursor: pointer; font-size: 12px; font-weight: 700; color: #e85d04; text-decoration: underline; }
1129+
.size-chart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
1130+
.size-chart-modal { background: #fff; border-radius: 16px; padding: 24px; width: 340px; }
1131+
.size-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
1132+
.size-chart-header h3 { font-size: 14px; font-weight: 800; letter-spacing: 1px; }
1133+
.size-chart-header button { background: none; border: none; cursor: pointer; color: #888; }
1134+
.size-table { width: 100%; border-collapse: collapse; font-size: 14px; }
1135+
.size-table th { background: #f5f5f5; padding: 10px; text-align: center; font-weight: 700; font-size: 12px; letter-spacing: 1px; }
1136+
.size-table td { padding: 10px; text-align: center; border-bottom: 1px solid #f0f0f0; }
1137+
.size-table tr.highlighted td { background: #fff0e6; font-weight: 700; color: #e85d04; }
1138+
1139+
/* Auth error */
1140+
.auth-error { color: #e85d04; font-size: 13px; text-align: center; margin: -4px 0; }

0 commit comments

Comments
 (0)