Products
+
+ {statusMessage && (
+
+
+ {statusMessage}
+
+
+
+ )}
void;
+ updateQuantity: (productId: number, quantity: number) => void;
+ removeFromCart: (productId: number) => void;
+ clearCart: () => void;
+ applyCoupon: (couponCode: string) => void;
+}
+
+const CART_STORAGE_KEY = 'octocat.cart.v1';
+
+const CartContext = createContext(undefined);
+
+const readStoredCart = (): CartState => {
+ const fallbackState: CartState = { items: [], couponCode: '' };
+
+ if (typeof window === 'undefined') {
+ return fallbackState;
+ }
+
+ try {
+ const storedState = window.localStorage.getItem(CART_STORAGE_KEY);
+ if (!storedState) {
+ return fallbackState;
+ }
+
+ const parsedState = JSON.parse(storedState) as Partial;
+ return {
+ items: Array.isArray(parsedState.items) ? parsedState.items : [],
+ couponCode: typeof parsedState.couponCode === 'string' ? parsedState.couponCode : '',
+ };
+ } catch {
+ return fallbackState;
+ }
+};
+
+export function CartProvider({ children }: { children: React.ReactNode }) {
+ const [cartState, setCartState] = useState(readStoredCart);
+
+ useEffect(() => {
+ if (typeof window === 'undefined') {
+ return;
+ }
+
+ window.localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cartState));
+ }, [cartState]);
+
+ const addToCart = (product: Product, quantity: number) => {
+ if (quantity <= 0) {
+ return;
+ }
+
+ setCartState((prevState) => {
+ const existingItem = prevState.items.find((item) => item.product.productId === product.productId);
+
+ if (existingItem) {
+ return {
+ ...prevState,
+ items: prevState.items.map((item) =>
+ item.product.productId === product.productId
+ ? { ...item, quantity: item.quantity + quantity }
+ : item,
+ ),
+ };
+ }
+
+ return {
+ ...prevState,
+ items: [...prevState.items, { product, quantity }],
+ };
+ });
+ };
+
+ const updateQuantity = (productId: number, quantity: number) => {
+ setCartState((prevState) => {
+ if (quantity <= 0) {
+ return {
+ ...prevState,
+ items: prevState.items.filter((item) => item.product.productId !== productId),
+ };
+ }
+
+ return {
+ ...prevState,
+ items: prevState.items.map((item) =>
+ item.product.productId === productId ? { ...item, quantity } : item,
+ ),
+ };
+ });
+ };
+
+ const removeFromCart = (productId: number) => {
+ setCartState((prevState) => ({
+ ...prevState,
+ items: prevState.items.filter((item) => item.product.productId !== productId),
+ }));
+ };
+
+ const clearCart = () => {
+ setCartState((prevState) => ({
+ ...prevState,
+ items: [],
+ couponCode: '',
+ }));
+ };
+
+ const applyCoupon = (couponCode: string) => {
+ setCartState((prevState) => ({
+ ...prevState,
+ couponCode: couponCode.trim(),
+ }));
+ };
+
+ const itemCount = useMemo(
+ () => cartState.items.reduce((sum, item) => sum + item.quantity, 0),
+ [cartState.items],
+ );
+
+ const contextValue: CartContextValue = {
+ items: cartState.items,
+ couponCode: cartState.couponCode,
+ itemCount,
+ addToCart,
+ updateQuantity,
+ removeFromCart,
+ clearCart,
+ applyCoupon,
+ };
+
+ return {children};
+}
+
+export const useCart = () => {
+ const context = useContext(CartContext);
+ if (context === undefined) {
+ throw new Error('useCart must be used within a CartProvider');
+ }
+ return context;
+};
diff --git a/frontend/src/types/cart.ts b/frontend/src/types/cart.ts
new file mode 100644
index 0000000..e46c4d1
--- /dev/null
+++ b/frontend/src/types/cart.ts
@@ -0,0 +1,11 @@
+import type { Product } from './product';
+
+export interface CartItem {
+ product: Product;
+ quantity: number;
+}
+
+export interface CartState {
+ items: CartItem[];
+ couponCode: string;
+}
diff --git a/frontend/src/types/product.ts b/frontend/src/types/product.ts
new file mode 100644
index 0000000..c8530cc
--- /dev/null
+++ b/frontend/src/types/product.ts
@@ -0,0 +1,11 @@
+export interface Product {
+ productId: number;
+ supplierId: number;
+ name: string;
+ description: string;
+ price: number;
+ sku: string;
+ unit: string;
+ imgName: string;
+ discount?: number;
+}
diff --git a/frontend/src/utils/cartPricing.ts b/frontend/src/utils/cartPricing.ts
new file mode 100644
index 0000000..84c1085
--- /dev/null
+++ b/frontend/src/utils/cartPricing.ts
@@ -0,0 +1,30 @@
+import type { CartItem } from '../types/cart';
+import type { Product } from '../types/product';
+
+export const CART_DISCOUNT_RATE = 0.05;
+export const CART_SHIPPING_FEE = 10;
+
+export const getEffectiveUnitPrice = (product: Product): number => {
+ const discount = product.discount ?? 0;
+ return product.price * (1 - discount);
+};
+
+export const calculateSubtotal = (items: CartItem[]): number => {
+ return items.reduce((sum, item) => sum + getEffectiveUnitPrice(item.product) * item.quantity, 0);
+};
+
+export const calculateCartSummary = (items: CartItem[]) => {
+ const subtotal = calculateSubtotal(items);
+ const discount = subtotal * CART_DISCOUNT_RATE;
+ const shipping = CART_SHIPPING_FEE;
+ const total = subtotal - discount + shipping;
+
+ return {
+ subtotal,
+ discount,
+ shipping,
+ total,
+ };
+};
+
+export const formatCurrency = (value: number): string => `$${value.toFixed(2)}`;