diff --git a/src/components/buildpc/Popups.tsx b/src/components/buildpc/Popups.tsx index ea76b94..32a41cb 100644 --- a/src/components/buildpc/Popups.tsx +++ b/src/components/buildpc/Popups.tsx @@ -1,4 +1,5 @@ -export default function Popups() { +export default function Popups({ onRebuild }: any) { + return (<> {/* Rebuild */} diff --git a/src/components/buildpc/Promotion.tsx b/src/components/buildpc/Promotion.tsx index 1ea6860..b3a95a5 100644 --- a/src/components/buildpc/Promotion.tsx +++ b/src/components/buildpc/Promotion.tsx @@ -1,12 +1,17 @@ -export default function Promotion() { +export default function Promotion({ total }: any) { return (
-

- Chi phí dự tính: - 0đ +

+ Chi phí dự tính: + + {total.toLocaleString()} đ +

-
{/* // Khuyến mại buildpc */}
+
- ) + ); } \ No newline at end of file diff --git a/src/components/buildpc/categories/index.tsx b/src/components/buildpc/categories/index.tsx index d62cc8b..6841556 100644 --- a/src/components/buildpc/categories/index.tsx +++ b/src/components/buildpc/categories/index.tsx @@ -1,35 +1,22 @@ 'use client'; import { useEffect, useState } from "react"; +import { Fancybox } from "@fancyapps/ui/dist/fancybox/"; import { categoryDetail } from "@/data/buildpc/categoryDetail"; import ModalContent from "../modal"; import SelectedItemRow from "../modal/SelectedItemRow"; -export default function BuildPCCategories({ categories }: any) { +export default function BuildPCCategories({ + categories, + activeTab, + buildData, + setBuildData +}: any) { const [selectedCategory, setSelectedCategory] = useState(null); const [categoryInfo, setCategoryInfo] = useState(null); - const [buildData, setBuildData] = useState([]); - const storageKey = "buildpc"; - - // Load khi mount - useEffect(() => { - const oldData = localStorage.getItem(storageKey); - setBuildData(oldData ? JSON.parse(oldData) : []); - }, []); - - // Nghe event update - useEffect(() => { - const handleUpdate = () => { - const oldData = localStorage.getItem(storageKey); - setBuildData(oldData ? JSON.parse(oldData) : []); - }; - - window.addEventListener("buildpcUpdated", handleUpdate); - return () => window.removeEventListener("buildpcUpdated", handleUpdate); - }, []); - - // Set category info khi mở modal + const getStorageKey = () => `buildpc_tab_${activeTab}`; + useEffect(() => { if (selectedCategory) { const filterCategory = categoryDetail.find( @@ -39,15 +26,36 @@ export default function BuildPCCategories({ categories }: any) { } }, [selectedCategory]); - // Xoá sản phẩm + const handleSaveProduct = (rowId: number, product: any) => { + + const newData = [ + ...buildData.filter((b: any) => b.rowId !== rowId), // loại bỏ row cũ + { + rowId, + info: [product] + } + ]; + + localStorage.setItem(getStorageKey(), JSON.stringify(newData)); + setBuildData(newData); + + window.dispatchEvent(new Event("buildpcUpdated")); + }; + + // ============================== + // REMOVE + // ============================== const handleRemove = (rowId: number) => { const newData = buildData.filter((b: any) => b.rowId !== rowId); - localStorage.setItem(storageKey, JSON.stringify(newData)); + localStorage.setItem(getStorageKey(), JSON.stringify(newData)); setBuildData(newData); }; - // Đổi số lượng + // ============================== + // QUANTITY + // ============================== const handleQuantityChange = (rowId: number, quantity: number) => { + const newData = buildData.map((b: any) => { if (b.rowId === rowId) { return { @@ -63,7 +71,7 @@ export default function BuildPCCategories({ categories }: any) { return b; }); - localStorage.setItem(storageKey, JSON.stringify(newData)); + localStorage.setItem(getStorageKey(), JSON.stringify(newData)); setBuildData(newData); }; @@ -83,24 +91,34 @@ export default function BuildPCCategories({ categories }: any) {

- - {product ? ( + { product + ? ( setSelectedCategory(rowId)} + onEdit={(rowId: number) => setSelectedCategory(rowId)} /> ) : ( - setSelectedCategory(item.id)} + )}
@@ -114,7 +132,10 @@ export default function BuildPCCategories({ categories }: any) { id="js-modal-popup" style={{ display: 'none', padding: 0 }} > - +
); diff --git a/src/components/buildpc/index.tsx b/src/components/buildpc/index.tsx index da70a5f..439962f 100644 --- a/src/components/buildpc/index.tsx +++ b/src/components/buildpc/index.tsx @@ -1,7 +1,8 @@ 'use client'; import Link from "next/link"; import useFancybox from '@/hooks/useFancyBox'; -import { useState } from "react"; +import { Fancybox } from "@fancyapps/ui/dist/fancybox/"; +import { useState, useEffect, useMemo } from "react"; import { buildPcData } from "@/data/buildpc"; import Content from "./Content"; @@ -10,16 +11,48 @@ import BuildPcPopups from "./Popups"; import Promotion from "./Promotion"; import Buttons from "./Buttons"; + export default function BuildPc() { + const [fancyboxRef] = useFancybox({}); + + const [activeTab, setActiveTab] = useState(1); + const [buildData, setBuildData] = useState([]); - const [activeTab, setActiveTab] = useState(1); + const getStorageKey = (tab: number) => `buildpc_tab_${tab}`; + // Load data khi đổi tab + useEffect(() => { + const oldData = localStorage.getItem(getStorageKey(activeTab)); + setBuildData(oldData ? JSON.parse(oldData) : []); + }, [activeTab]); + + const handleTabChange = (tabIndex: number) => { - setActiveTab(tabIndex); - - } + }; + + const handleRebuild = () => { + const storageKey = getStorageKey(activeTab); + + localStorage.removeItem(storageKey); + + setBuildData([]); + + Fancybox.close(); + }; + + const totalPrice = useMemo(() => { + return buildData.reduce((total, item) => { + const product = item?.info?.[0]; + if (!product) return total; + + const price = Number(product.price) || 0; + const quantity = Number(product.quantity) || 1; + + return total + (price * quantity); + }, 0); + }, [buildData]); return ( <> @@ -60,7 +93,7 @@ export default function BuildPc() { -
+
{ [1, 2, 3, 4, 5].map((item) => (
) diff --git a/src/components/buildpc/modal/Products.tsx b/src/components/buildpc/modal/Products.tsx index 8f65027..b4a2ce5 100644 --- a/src/components/buildpc/modal/Products.tsx +++ b/src/components/buildpc/modal/Products.tsx @@ -1,15 +1,9 @@ 'use client'; import Link from "next/link"; -import { Fancybox } from "@fancyapps/ui/dist/fancybox/"; -export default function ProductItem({ item, rowId }: any) { +export default function ProductItem({ item, rowId, onSelect }: any) { - const handleBuy = () => { - if (typeof window === "undefined") return; - - const storageKey = "buildpc"; - const oldData = localStorage.getItem(storageKey); - const parsed = oldData ? JSON.parse(oldData) : []; + const handleSelect = () => { const productData = { id : item.productId, @@ -22,24 +16,7 @@ export default function ProductItem({ item, rowId }: any) { warranty : item.warranty || '' }; - const buildIndex = parsed.findIndex((b: any) => b.rowId === rowId); - - if (buildIndex !== -1) { - parsed[buildIndex].info = [productData]; - } else { - parsed.push({ - rowId: rowId, - info: [productData] - }); - } - - localStorage.setItem(storageKey, JSON.stringify(parsed)); - - // báo cho component cha - window.dispatchEvent(new Event("buildpcUpdated")); - - // đóng popup - Fancybox.close(); + onSelect(productData); }; @@ -89,7 +66,7 @@ export default function ProductItem({ item, rowId }: any) {