('');
+
+ useEffect(() => {
+ if (typeof window !== 'undefined') {
+ const summaryJson = localStorage.getItem('lastOrderSummary');
+ if (summaryJson) {
+ setOrderSummary(JSON.parse(summaryJson));
+ // For this simulation, generate a mock order ID if not present
+ setMockOrderId(summaryJson.includes("orderId") ? JSON.parse(summaryJson).orderId : `Opti-${Date.now().toString().slice(-6)}`);
+ } else {
+ // If no summary, perhaps redirect to homepage as order process wasn't completed properly
+ // This indicates the user might have landed here directly without placing an order.
+ console.warn("Order success page: No lastOrderSummary found in localStorage. Redirecting to home.");
+ router.replace('/'); // Use replace to prevent going back to this empty success page
+ }
+ // Optional: Clear the summary from localStorage after displaying it once,
+ // to prevent showing old data if the user revisits this page via history.
+ // localStorage.removeItem('lastOrderSummary');
+ // However, for now, let's keep it so a refresh shows the data.
+ }
+
+ // Prevent users from using the back button to go to the review page again
+ // as the cart would be empty and checkout details cleared.
+ // This is a simple client-side attempt; server-side state is more robust.
+ const handleBackButton = (event: PopStateEvent) => {
+ // Redirect to homepage if they try to go back from success page
+ router.replace('/');
+ };
+ window.addEventListener('popstate', handleBackButton);
+ return () => {
+ window.removeEventListener('popstate', handleBackButton);
+ };
+
+ }, [router]);
+
+
+ if (!orderSummary) {
+ return (
+
+
Loading order confirmation...
+
+
+
Thank You For Your Order!
+
Your order has been placed successfully.
+
+
+
+
Order Confirmation
+
+ Order ID: {orderSummary.orderId || mockOrderId}
+
+
+ Total Items: {orderSummary.totalItems}
+
+
+ Order Subtotal: ${orderSummary.orderSubtotal.toFixed(2)}
+
+
+ You will receive an email confirmation shortly with your order details.
+ (This is a simulation, so no email will actually be sent.)
+
+
+
+
+
+
Article not found.
;
+ }
+
+ return (
+
+
+
+ {article.imageUrl && (
+
+
+ )}
+
+ {/* Using prose for Tailwind typography styling if content is HTML/Markdown */}
+
+
+
+
+
+
+
Category not found.
;
+ }
+
+ return (
+
+
+
+ {articlesInCategory.length > 0 ? (
+
+ {articlesInCategory.map(article => (
+
+
+
+
+
{article.title}
+
{article.summary}
+
{new Date(article.publishedDate).toLocaleDateString()}
+
+ ))}
+
+ ) : (
+
No articles found in this category yet.
+ )}
+
Understanding your eyeglass prescription can seem daunting at first, but it's simpler than you think! Here’s a breakdown of common terms:
OD (Oculus Dexter): This refers to your right eye.OS (Oculus Sinister): This refers to your left eye.OU (Oculus Uterque): This means both eyes.Sphere (SPH): This indicates the amount of lens power, measured in diopters, prescribed to correct nearsightedness (-) or farsightedness (+).Cylinder (CYL): This indicates the amount of lens power for astigmatism. If this column is blank, it means you have little or no astigmatism that requires correction.Axis: Measured in degrees, this indicates the orientation of the astigmatism correction.Add: This is the added magnifying power applied to the bottom part of multifocal lenses to correct presbyopia (the need for reading glasses).PD (Pupillary Distance): The distance between the centers of your pupils, crucial for accurately crafting your lenses.Always consult your optometrist if you have questions about your specific prescription.
",
+ category: mockArticleCategories[0], imageUrl: '/images/placeholder.png', author: 'Dr. Vision Well', publishedDate: '2023-05-15', isFeatured: true
+ },
+ {
+ id: 'article2', title: 'The Ultimate Guide to Choosing Frames for Your Face Shape', slug: 'frames-for-face-shape',
+ summary: 'Find the most flattering eyeglass frames based on your face shape. Whether you have a round, oval, square, or heart-shaped face, we have tips for you.',
+ content: "Choosing the right frames isn't just about vision correction; it's a fashion statement! The key is to find frames that complement your face shape.
Round Face: Look for angular, rectangular frames to add definition.
Oval Face: Most frame shapes work well. Consider frames that are as wide as or wider than the broadest part of your face.
Square Face: Round or oval frames can soften angular features.
Heart-Shaped Face: Frames that are wider at the bottom, or rimless styles, can add balance.
Don't be afraid to experiment and have fun with different styles!
",
+ category: mockArticleCategories[1], imageUrl: '/images/placeholder.png', author: 'Style Eyes', publishedDate: '2023-06-20', isFeatured: true
+ },
+ {
+ id: 'article3', title: 'Top 5 Tips for Comfortable Contact Lens Wear', slug: 'contact-lens-comfort-tips',
+ summary: 'Maximize your comfort while wearing contact lenses with these essential tips, from hygiene to hydration.',
+ content: "Contact lenses offer great freedom, but comfort is key. Follow these tips:
Wash Your Hands: Always wash and dry your hands thoroughly before handling lenses.Follow Your Wear Schedule: Don't overwear your lenses beyond the recommended time (daily, weekly, monthly).Use Fresh Solution: Never reuse old solution. Clean your lens case regularly.Stay Hydrated: Drinking enough water can help prevent dry eyes.Give Your Eyes a Break: Have a pair of backup glasses and avoid sleeping in lenses unless prescribed for extended wear.Digital eye strain is a common issue. Here's how to fight it:
The 20-20-20 Rule: Every 20 minutes, look at something 20 feet away for at least 20 seconds.Adjust Screen Settings: Optimize brightness, contrast, and text size. Consider a matte screen filter.Proper Ergonomics: Position your screen slightly below eye level and at arm's length.Blink Often: We tend to blink less when staring at screens. Make a conscious effort to blink more.Consider Blue Light Filtering Glasses: Some find these helpful, though research is ongoing.
+
+
+ {/* Featured Articles Section */}
+ {featuredArticles.length > 0 && (
+
+ Featured Articles
+
+ {featuredArticles.map(article => (
+
+
+
+
+
{article.title}
+
{article.summary}
+
In: {article.category.name} • {new Date(article.publishedDate).toLocaleDateString()}
+
+ ))}
+
+ )}
+
+ {/* Article Categories Section */}
+
+ Browse by Category
+
+ {mockArticleCategories.map(category => (
+
+
{category.name}
+ {category.description &&
{category.description}
}
+
+ ))}
+
+
(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [selectedVariant, setSelectedVariant] = useState(null);
+ const [quantity, setQuantity] = useState(1); // Add quantity state
+
+ // Prescription state
+ const [prescriptionMode, setPrescriptionMode] = useState<'manual' | 'saved' | 'upload' | null>(null);
+ const [manualPrescriptionData, setManualPrescriptionData] = useState>({});
+ const [savedPrescriptions, setSavedPrescriptions] = useState([]);
+ const [selectedSavedPrescriptionId, setSelectedSavedPrescriptionId] = useState(null);
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+ useEffect(() => {
+ if (typeof window !== 'undefined') {
+ setIsLoggedIn(!!localStorage.getItem('authToken'));
+ }
+
+ if (id) {
+ const fetchProductDetails = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const data = await getProductById(id);
+ setProduct(data);
+ if (data.variants && data.variants.length > 0) {
+ setSelectedVariant(data.variants[0]);
+ }
+ if (data.requires_prescription && !prescriptionMode) { // Set default mode only if not already set
+ setPrescriptionMode('manual');
+ }
+ } catch (err: any) {
+ setError(err.message || `Failed to fetch product with ID: ${id}.`);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchProductDetails();
+ }
+ }, [id, prescriptionMode]); // Added prescriptionMode to dependency array if it influences initial loading logic
+
+ useEffect(() => {
+ if (isLoggedIn && product?.requires_prescription) {
+ const fetchSavedPrescriptions = async () => {
+ try {
+ const data = await getMyPrescriptions();
+ setSavedPrescriptions(data);
+ } catch (err) {
+ console.error("Failed to fetch saved prescriptions:", err);
+ }
+ };
+ fetchSavedPrescriptions();
+ }
+ }, [isLoggedIn, product?.requires_prescription]);
+
+
+ const handleAddToCart = () => {
+ if (!product) return;
+
+ let prescriptionDetailsForCart: CartPrescriptionDetails | null = null;
+
+ if (product.requires_prescription) {
+ if (prescriptionMode === 'manual') {
+ // Basic validation for manual prescription before proceeding
+ if (!manualPrescriptionData.patient_name || manualPrescriptionData.sphere_left === undefined || manualPrescriptionData.sphere_right === undefined ) {
+ alert("Please fill in all required prescription fields (Patient Name, SPH for both eyes) in the form below.");
+ // Optionally, focus on the form or the first invalid field.
+ return;
+ }
+ prescriptionDetailsForCart = { type: 'manual', data: manualPrescriptionData };
+ } else if (prescriptionMode === 'saved') {
+ if (!selectedSavedPrescriptionId) {
+ alert("Please select a saved prescription.");
+ return;
+ }
+ const selectedRx = savedPrescriptions.find(rx => rx.id === selectedSavedPrescriptionId);
+ if (!selectedRx) {
+ alert("Selected saved prescription not found. Please try again.");
+ return;
+ }
+ prescriptionDetailsForCart = { type: 'saved', data: selectedRx };
+ } else if (prescriptionMode === 'upload') {
+ const uploadUrlInput = document.getElementById('rx_upload_url') as HTMLInputElement;
+ const uploadUrl = uploadUrlInput?.value;
+ if (!uploadUrl || !uploadUrl.trim()) { // Check if URL is empty or just whitespace
+ alert("Please provide a URL for your uploaded prescription.");
+ uploadUrlInput?.focus();
+ return;
+ }
+ try {
+ new URL(uploadUrl); // Validate if it's a proper URL
+ } catch (_) {
+ alert("Please enter a valid URL for your prescription.");
+ uploadUrlInput?.focus();
+ return;
+ }
+ prescriptionDetailsForCart = { type: 'upload', url: uploadUrl };
+ } else {
+ // This case should ideally not be reached if a default prescriptionMode is set.
+ alert("Please select or enter your prescription information.");
+ return;
+ }
+ }
+
+ addItemToCart(product, selectedVariant, quantity, prescriptionDetailsForCart);
+ alert(`${product.name} (Quantity: ${quantity}) added to cart!`);
+ // Optionally, redirect to cart page or show a more subtle notification (toast)
+ // router.push('/cart');
+ };
+
+ // This function is used as a callback for the PrescriptionForm
+ // to update the PDP's state when the form data changes or is "confirmed"
+ // without necessarily saving to backend from the form itself.
+ const handleManualPrescriptionFormConfirm = (dataFromForm: UserPrescriptionCreationData) => {
+ console.log("PrescriptionForm data confirmed on PDP:", dataFromForm);
+ setManualPrescriptionData(dataFromForm);
+ // Provide feedback to the user that the data is captured and they can proceed to add to cart.
+ // This could be a state update that shows a message like "Prescription details ready."
+ alert("Manual prescription data captured and ready for cart.");
+ };
+
+
+ if (loading) return Loading product details...
;
+ if (error) return Error: {error}
;
+ if (!product) return Product not found.
;
+
+ const placeholderImage = "/images/placeholder.png";
+
+ return (
+
+
+
+
+
+
+
{product.name}
+ {product.category_name && (
+
+ {product.category_name}
+
+ )}
+
${selectedVariant ? (product.price + (selectedVariant.price_modifier || 0)).toFixed(2) : product.price.toFixed(2)}
+
{product.description}
+
+ {product.variants && product.variants.length > 0 && (
+
+
Select {product.variants[0].attributes?.color ? 'Color' : (product.variants[0].attributes?.size ? 'Size' : 'Option')}:
+
+ {product.variants.map(variant => (
+ setSelectedVariant(variant)}
+ className={`px-3 py-1 border rounded-md text-sm ${selectedVariant?.id === variant.id ? 'bg-blue-500 text-white border-blue-500' : 'bg-white hover:border-gray-400'}`}
+ >
+ {variant.name} {variant.price_modifier ? ` (${variant.price_modifier > 0 ? '+' : ''}$${variant.price_modifier.toFixed(2)})` : ''}
+
+ ))}
+
+
+ )}
+
+
+ Quantity:
+
+
+
0 ? 'text-green-600' : 'text-red-600'}`}>
+ {product.stock_quantity > 0 ? `${product.stock_quantity} in stock` : 'Out of stock'}
+ {selectedVariant && ` for ${selectedVariant.name}`}
+
+
+ {product.requires_prescription && (
+
+
Prescription Required
+
+ setPrescriptionMode('manual')} className={`px-4 py-2 -mb-px border-b-2 ${prescriptionMode === 'manual' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>Enter Manually
+ {isLoggedIn && setPrescriptionMode('saved')} className={`px-4 py-2 -mb-px border-b-2 ${prescriptionMode === 'saved' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>Use Saved }
+ setPrescriptionMode('upload')} className={`px-4 py-2 -mb-px border-b-2 ${prescriptionMode === 'upload' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}>Upload File
+
+
+ {prescriptionMode === 'manual' && (
+
+
Enter Your Prescription Details:
+
+ {/* Removed the redundant "Confirm Manual Prescription" button from PDP,
+ as PrescriptionForm should handle its own submission via its internal button,
+ which then calls handleManualPrescriptionFormConfirm.
+ The user should click "Add to Cart" after the form signals data is ready (e.g. via an alert from onSave).
+ */}
+
+ )}
+
+ {prescriptionMode === 'saved' && isLoggedIn && (
+
+
Select a Saved Prescription:
+ {savedPrescriptions.length > 0 ? (
+
setSelectedSavedPrescriptionId(e.target.value)}
+ className="block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+ >
+ -- Select a prescription --
+ {savedPrescriptions.map(rx => (
+
+ {rx.prescription_name || `For ${rx.patient_name} (${new Date(rx.prescription_date).toLocaleDateString()})`}
+
+ ))}
+
+ ) : (
+
You have no saved prescriptions.
+ )}
+
+ )}
+
+ {prescriptionMode === 'upload' && (
+
+
Provide Link to Your Prescription File:
+
+ File upload functionality is not yet implemented.
+ If you have uploaded your prescription elsewhere, please paste the link below.
+
+
Link to your Prescription File*
+
+
+ )}
+
+ )}
+
+
+ {product.stock_quantity > 0 ? 'Add to Cart' : 'Out of Stock'}
+
+
+
+
SKU: {selectedVariant?.sku_suffix ? `${product.sku}-${selectedVariant.sku_suffix}` : product.sku}
+
+
+
+
+
+
Product Information
+
+
{product.description}
+
+
+
(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [page, setPage] = useState(1);
+ const limit = 12; // Number of products per page
+
+ useEffect(() => {
+ const fetchProductList = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const data = await getProducts({ page, limit });
+ setProductData(data);
+ } catch (err: any) {
+ setError(err.message || 'Failed to fetch products.');
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchProductList();
+ }, [page]);
+
+ if (loading && !productData) return Loading products...
;
+ if (error) return Error: {error}
;
+ if (!productData || productData.data.length === 0) return No products found.
;
+
+ const totalPages = productData.pagination.totalPages;
+
+ return (
+
+
All Products
+
+ {productData.data.map((product) => (
+
+ ))}
+
+ {/* Pagination Controls */}
+ {totalPages > 1 && (
+
+ setPage(p => Math.max(1, p - 1))}
+ disabled={page === 1 || loading}
+ className="px-4 py-2 bg-gray-300 rounded disabled:opacity-50 hover:bg-gray-400"
+ >
+ Previous
+
+ Page {page} of {totalPages}
+ setPage(p => Math.min(totalPages, p + 1))}
+ disabled={page === totalPages || loading}
+ className="px-4 py-2 bg-gray-300 rounded disabled:opacity-50 hover:bg-gray-400"
+ >
+ Next
+
+
+ )}
+
= ({ children }) => {
+ const pathname = usePathname();
+
+ return (
+
+
+ My Account
+
+ {navItems.map((item) => (
+ { /* Implement logout logic here: remove token, redirect */
+ if (typeof window !== 'undefined') localStorage.removeItem('authToken');
+ window.location.href = '/'; // Redirect to homepage
+ }}
+ className="w-full mt-4 text-left block px-4 py-2 rounded-md text-sm font-medium text-red-600 hover:bg-red-50"
+ >
+ Logout
+
+
+
+
+ {children}
+
+
+
+ {steps.map((step, index) => (
+
+ {index < currentStepIndex ? (
+ // Completed step
+ {step.name}
+
+ ) : index === currentStepIndex ? (
+ // Current step
+
+
+ {index + 1}
+
+
{step.name}
+
+
+ {index + 1}
+
+
{step.name}
+
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default CheckoutProgress;
diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
index b97af93..3688b7c 100644
--- a/frontend/src/components/layout/Navbar.tsx
+++ b/frontend/src/components/layout/Navbar.tsx
@@ -1,23 +1,41 @@
+// In frontend/src/components/layout/Navbar.tsx
+'use client'; // Required if Navbar uses client-side hooks like from Zustand
import Link from 'next/link';
+import { useCartStore } from '@/store/cartStore'; // Adjust path
+import { FaShoppingCart, FaUserCircle } from 'react-icons/fa'; // Example icons
const Navbar = () => {
+ const totalItems = useCartStore(state => state.getTotalItems()); // Get live item count
+
return (
-
+
-
OptiCart
-
-
+
-
-
-
User
{/* Placeholder for User Account Icon */}
-
Cart
{/* Placeholder for Cart Icon */}
+
+ Account
+
+
+ {totalItems}
+
+ )}
+ Cart
+
= ({ initialData, onSave }) => {
+ const router = useRouter();
+ const [formData, setFormData] = useState(defaultFormData);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (initialData) {
+ // Convert numeric fields that might be null/undefined to empty strings for input compatibility if needed,
+ // or handle their type correctly. For controlled components, ensure types match.
+ // Date needs to be in YYYY-MM-DD for ) => {
+ const { name, value, type } = e.target;
+ let parsedValue: string | number | undefined = value;
+
+ if (type === 'number') {
+ // Allow empty string for optional numbers, otherwise parse
+ parsedValue = value === '' ? undefined : parseFloat(value);
+ }
+
+ setFormData(prev => ({ ...prev, [name]: parsedValue }));
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError(null);
+
+ // Basic Validation
+ if (!formData.patient_name || !formData.prescription_date || formData.sphere_right === undefined || formData.sphere_left === undefined) {
+ setError('Patient Name, Prescription Date, and Sphere values for both eyes are required.');
+ setIsLoading(false);
+ return;
+ }
+
+ // Ensure numeric fields that are optional but empty are sent as undefined, not NaN or empty string if API expects numbers
+ const dataToSubmit = { ...formData };
+ for (const key in dataToSubmit) {
+ if (typeof (dataToSubmit as any)[key] === 'number' && isNaN((dataToSubmit as any)[key])) {
+ (dataToSubmit as any)[key] = undefined;
+ }
+ }
+
+
+ try {
+ let savedPrescription: UserPrescription;
+ if (initialData?.id) {
+ savedPrescription = await updateMyPrescription(initialData.id, dataToSubmit);
+ } else {
+ savedPrescription = await createPrescription(dataToSubmit);
+ }
+ if (onSave) {
+ onSave(savedPrescription);
+ } else {
+ router.push('/account/prescriptions'); // Default redirect
+ }
+ } catch (err: any) {
+ setError(err.message || 'Failed to save prescription.');
+ console.error(err);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ // Helper for number input fields
+ const numberInputProps = (name: keyof UserPrescriptionCreationData, step: string = "0.25") => ({
+ type: "number",
+ name: name,
+ id: name,
+ value: formData[name] === undefined ? '' : String(formData[name]), // Handle undefined for empty input
+ onChange: handleChange,
+ step: step,
+ className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+ });
+
+
+ return (
+
+ );
+};
+
+export default PrescriptionForm;
diff --git a/frontend/src/components/products/ProductCard.tsx b/frontend/src/components/products/ProductCard.tsx
new file mode 100644
index 0000000..2f8eb02
--- /dev/null
+++ b/frontend/src/components/products/ProductCard.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image'; // Using next/image for optimization
+import { Product } from '@/services/api'; // Assuming api.ts is in src/services
+
+interface ProductCardProps {
+ product: Product;
+}
+
+const ProductCard: React.FC = ({ product }) => {
+ const placeholderImage = "/images/placeholder.png"; // Add a placeholder image to public/images
+
+ return (
+
+
+
+
+
{product.name}
+
+ {product.category_name && (
+
+ {product.category_name}
+
+ )}
+
${product.price.toFixed(2)}
+
SKU: {product.sku}
+ {product.stock_quantity !== undefined && (
+
0 ? 'text-green-600' : 'text-red-600'}`}>
+ {product.stock_quantity > 0 ? `${product.stock_quantity} in stock` : 'Out of stock'}
+
+ )}
+
+ View Details
+
+
;
+}
+
+export interface Product {
+ id: string;
+ name: string;
+ description: string;
+ price: number;
+ sku: string;
+ stock_quantity: number;
+ main_image_url?: string;
+ category_name?: string;
+ category_slug?: string;
+ variants?: ProductVariant[];
+ // Add other fields as needed from your backend Product model
+}
+
+export interface PaginatedProducts {
+ data: Product[];
+ pagination: {
+ totalItems: number;
+ totalPages: number;
+ currentPage: number;
+ pageSize: number;
+ };
+}
+
+// Category Types
+export interface Category {
+ id: string;
+ name: string;
+ slug: string;
+ description?: string;
+ parent_id?: string;
+}
+
+// API Service Functions
+export const getProducts = (params: { category?: string; sortBy?: string; order?: string; limit?: number; page?: number } = {}): Promise => {
+ const queryParams = new URLSearchParams();
+ if (params.category) queryParams.append('category', params.category);
+ if (params.sortBy) queryParams.append('sortBy', params.sortBy);
+ if (params.order) queryParams.append('order', params.order);
+ if (params.limit) queryParams.append('limit', params.limit.toString());
+ if (params.page) queryParams.append('page', params.page.toString());
+ return fetchAPI(`/products?${queryParams.toString()}`);
+};
+
+export const getProductById = (id: string): Promise => {
+ return fetchAPI(`/products/${id}`);
+};
+
+export const getCategories = (): Promise => {
+ return fetchAPI('/categories');
+};
+
+export const getCategoryBySlug = (slug: string): Promise => {
+ return fetchAPI(`/categories/${slug}`);
+};
+
+export const getProductsByCategorySlug = (slug: string, params: { sortBy?: string; order?: string; limit?: number; page?: number } = {}): Promise => {
+ const queryParams = new URLSearchParams();
+ if (params.sortBy) queryParams.append('sortBy', params.sortBy);
+ if (params.order) queryParams.append('order', params.order);
+ if (params.limit) queryParams.append('limit', params.limit.toString());
+ if (params.page) queryParams.append('page', params.page.toString());
+ return fetchAPI(`/categories/${slug}/products?${queryParams.toString()}`);
+};
+
+// Append these to your existing api.ts
+
+// Prescription Types (align with backend UserPrescriptions table)
+export interface UserPrescription {
+ id: string;
+ user_id: string;
+ prescription_name?: string;
+ prescription_type: string; // e.g., "eyeglass_single_vision", "eyeglass_progressive"
+ patient_name: string;
+ prescriber_name?: string;
+ prescription_date: string; // Should be formatted as YYYY-MM-DD
+ expiry_date?: string; // Should be formatted as YYYY-MM-DD
+ pd_right?: number;
+ pd_left?: number;
+ pd_both?: number;
+ sphere_right: number;
+ cylinder_right?: number;
+ axis_right?: number;
+ add_right?: number;
+ prism_diopters_right?: number;
+ prism_base_direction_right?: string;
+ sphere_left: number;
+ cylinder_left?: number;
+ axis_left?: number;
+ add_left?: number;
+ prism_diopters_left?: number;
+ prism_base_direction_left?: string;
+ notes?: string;
+ uploaded_file_url?: string;
+ created_at: string;
+ updated_at: string;
+}
+
+export type UserPrescriptionCreationData = Omit;
+export type UserPrescriptionUpdateData = Partial;
+
+
+// Assumes you have a way to get the auth token (e.g., from context, localStorage)
+// This is a placeholder; actual token management is more complex.
+const getAuthToken = (): string | null => {
+ if (typeof window !== 'undefined') {
+ return localStorage.getItem('authToken'); // Example: retrieve token
+ }
+ return null;
+};
+
+// Prescription API Service Functions
+export const createPrescription = (data: UserPrescriptionCreationData): Promise => {
+ const token = getAuthToken();
+ if (!token) return Promise.reject(new Error('No auth token found'));
+ return fetchAPI('/prescriptions', {
+ method: 'POST',
+ headers: { 'Authorization': `Bearer ${token}` },
+ body: JSON.stringify(data),
+ });
+};
+
+export const getMyPrescriptions = (): Promise => {
+ const token = getAuthToken();
+ if (!token) return Promise.reject(new Error('No auth token found'));
+ return fetchAPI('/prescriptions', {
+ headers: { 'Authorization': `Bearer ${token}` },
+ });
+};
+
+export const getMyPrescriptionById = (id: string): Promise => {
+ const token = getAuthToken();
+ if (!token) return Promise.reject(new Error('No auth token found'));
+ return fetchAPI(`/prescriptions/${id}`, {
+ headers: { 'Authorization': `Bearer ${token}` },
+ });
+};
+
+export const updateMyPrescription = (id: string, data: UserPrescriptionUpdateData): Promise => {
+ const token = getAuthToken();
+ if (!token) return Promise.reject(new Error('No auth token found'));
+ return fetchAPI(`/prescriptions/${id}`, {
+ method: 'PUT',
+ headers: { 'Authorization': `Bearer ${token}` },
+ body: JSON.stringify(data),
+ });
+};
+
+export const deleteMyPrescription = (id: string): Promise => {
+ const token = getAuthToken();
+ if (!token) return Promise.reject(new Error('No auth token found'));
+ return fetchAPI(`/prescriptions/${id}`, {
+ method: 'DELETE',
+ headers: { 'Authorization': `Bearer ${token}` },
+ }).then(() => undefined); // Ensure it resolves to void
+};
diff --git a/frontend/src/store/cartStore.ts b/frontend/src/store/cartStore.ts
new file mode 100644
index 0000000..743753a
--- /dev/null
+++ b/frontend/src/store/cartStore.ts
@@ -0,0 +1,128 @@
+import { create } from 'zustand';
+import { Product, ProductVariant, UserPrescription, UserPrescriptionCreationData } from '@/services/api'; // Adjust path
+
+// Define the structure for prescription details attached to a cart item
+export interface CartPrescriptionDetails {
+ type: 'manual' | 'saved' | 'upload';
+ data?: Partial | UserPrescription; // For manual or saved
+ url?: string; // For upload
+ // Potentially add a unique ID generated on the client for manual prescriptions not yet saved
+ // to distinguish them if multiple manual Rxs are added for different items.
+ tempId?: string;
+}
+
+export interface CartItem {
+ product: Product;
+ variant?: ProductVariant | null; // A product might not have variants
+ quantity: number;
+ prescriptionDetails?: CartPrescriptionDetails | null;
+}
+
+interface CartState {
+ items: CartItem[];
+ addItem: (product: Product, variant?: ProductVariant | null, quantity?: number, prescriptionDetails?: CartPrescriptionDetails | null) => void;
+ removeItem: (productId: string, variantId?: string | null, prescriptionTempId?: string | null) => void;
+ updateQuantity: (productId: string, variantId?: string | null, newQuantity: number, prescriptionTempId?: string | null) => void;
+ clearCart: () => void;
+ getTotalItems: () => number;
+ getSubtotal: () => number;
+}
+
+// Helper to create a unique ID for cart entries, especially for items with different prescriptions
+const generateCartItemId = (productId: string, variantId?: string | null, prescription?: CartPrescriptionDetails | null): string => {
+ let id = productId;
+ if (variantId) {
+ id += `-${variantId}`;
+ }
+ // If prescription makes the item unique (e.g. two same frames with different manual Rxs)
+ if (prescription?.type === 'manual' && prescription.tempId) {
+ id += `-rx-${prescription.tempId}`;
+ } else if (prescription?.type === 'saved' && (prescription.data as UserPrescription)?.id) {
+ id += `-rx-${(prescription.data as UserPrescription).id}`;
+ } else if (prescription?.type === 'upload' && prescription.url) {
+ // This might not be unique enough if URL isn't perfectly unique
+ id += `-rxupload-${encodeURIComponent(prescription.url).substring(0,10)}`;
+ }
+ return id;
+};
+
+
+export const useCartStore = create((set, get) => ({
+ items: [],
+ addItem: (product, variant = null, quantity = 1, prescriptionDetails = null) => {
+ set((state) => {
+ const existingItemIndex = state.items.findIndex(
+ (item) =>
+ item.product.id === product.id &&
+ (variant ? item.variant?.id === variant.id : !item.variant) &&
+ // More complex check if same product/variant can be added multiple times with different prescriptions
+ // For now, assume one entry per product/variant, or prescriptions make them unique if IDs are handled.
+ // This simple check will increment quantity if product/variant matches.
+ // A more robust solution would involve generating a unique cart item ID based on product, variant, AND prescription.
+ JSON.stringify(item.prescriptionDetails) === JSON.stringify(prescriptionDetails) // Basic check
+ );
+
+ let newItems;
+ if (existingItemIndex > -1) {
+ newItems = [...state.items];
+ newItems[existingItemIndex].quantity += quantity;
+ } else {
+ // If it's a manual prescription without a saved ID, generate a temporary client-side ID for uniqueness
+ let currentPrescriptionDetails = prescriptionDetails;
+ if (prescriptionDetails?.type === 'manual' && !prescriptionDetails.tempId) {
+ currentPrescriptionDetails = { ...prescriptionDetails, tempId: Date.now().toString() };
+ }
+ newItems = [...state.items, { product, variant, quantity, prescriptionDetails: currentPrescriptionDetails }];
+ }
+ return { items: newItems };
+ });
+ },
+ removeItem: (productId, variantId = null, prescriptionTempId = null) => {
+ set((state) => ({
+ items: state.items.filter(item =>
+ !(item.product.id === productId &&
+ (variantId ? item.variant?.id === variantId : !item.variant) &&
+ (prescriptionTempId && item.prescriptionDetails?.type === 'manual' ? item.prescriptionDetails.tempId === prescriptionTempId : true)
+ )
+ )
+ }));
+ },
+ updateQuantity: (productId, variantId = null, newQuantity, prescriptionTempId = null) => {
+ set((state) => ({
+ items: state.items.map((item) => {
+ if (
+ item.product.id === productId &&
+ (variantId ? item.variant?.id === variantId : !item.variant) &&
+ (prescriptionTempId && item.prescriptionDetails?.type === 'manual' ? item.prescriptionDetails.tempId === prescriptionTempId : true)
+ ) {
+ return { ...item, quantity: Math.max(0, newQuantity) }; // Prevent negative quantity
+ }
+ return item;
+ }).filter(item => item.quantity > 0) // Remove item if quantity becomes 0
+ }));
+ },
+ clearCart: () => set({ items: [] }),
+ getTotalItems: () => {
+ return get().items.reduce((total, item) => total + item.quantity, 0);
+ },
+ getSubtotal: () => {
+ return get().items.reduce((subtotal, item) => {
+ const itemPrice = item.variant ? (item.product.price + (item.variant.price_modifier || 0)) : item.product.price;
+ return subtotal + itemPrice * item.quantity;
+ }, 0);
+ },
+}));
+
+// Optional: Persist cart to localStorage ( Zustand middleware )
+// import { persist, createJSONStorage } from 'zustand/middleware'
+// export const useCartStore = create(
+// persist(
+// (set, get) => ({
+// // ... (rest of your store implementation)
+// }),
+// {
+// name: 'cart-storage', // name of the item in the storage (must be unique)
+// storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
+// }
+// )
+// )
From 13250167801979a52fe2bdc6f12fcf200b9a74b9 Mon Sep 17 00:00:00 2001
From: serverlesssamurai23
Date: Fri, 23 May 2025 18:36:09 +0530
Subject: [PATCH 3/4] Update README.md
---
README.md | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 8e5fd19..8b13789 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1 @@
-# AWS
-CLF-C02: AWS Certified Cloud Practitioner
+
From 5510f2911acceefa0a2e5006b10c571608e7688d Mon Sep 17 00:00:00 2001
From: serverlesssamurai23
Date: Fri, 23 May 2025 18:41:47 +0530
Subject: [PATCH 4/4] Update README.md
---
README.md | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 8b13789..bb4f015 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,11 @@
-
+Technology Stack
+Frontend
+Framework: React (Next.js recommended for SSR)
+Styling: Tailwind CSS
+Backend
+Framework/Language: Node.js with Express.js
+Database: PostgreSQL
+Other Key Decisions
+Payment Gateway: [To be decided - e.g., Stripe, PayPal]
+Deployment Platform: [To be decided - e.g., Vercel, Heroku, AWS]
+Version Control: Git (already in use)