update

src/components/product/ProductDetail/ComboSet/index.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+import 'swiper/css';
+import { ComboSet, ComboProduct, ComboGroup } from '@/types';
+import { ItemComboSet } from './ItemComboset';
+import { ChangeProductPopup } from './ChangeProductPopup';
+
+interface ComboProps {
+  combo_set: ComboSet[];
+}
+
+interface PopupGroup {
+  title: string;
+  products: ComboProduct[];
+}
+
+export const ComboSetBox: React.FC<ComboProps> = ({ combo_set }) => {
+  const [openPopup, setOpenPopup] = useState(false);
+  const [popupGroup, setPopupGroup] = useState<PopupGroup>({
+    title: '',
+    products: [],
+  });
+  const [selectedProduct, setSelectedProduct] = useState<ComboProduct | null>(null);
+
+  const handleOpenPopup = (
+    titleGroup: string,
+    products: ComboProduct[],
+    currentItem: ComboProduct,
+  ) => {
+    setPopupGroup({ title: titleGroup, products });
+    setSelectedProduct(currentItem); // lưu sản phẩm đang hiển thị
+    setOpenPopup(true);
+  };
+
+  const handleReplaceProduct = (newProduct: ComboProduct) => {
+    // cập nhật selectedProduct bằng sản phẩm mới
+    setSelectedProduct(newProduct);
+    setOpenPopup(false);
+  };
+
+  const getDisplayedProduct = (group: ComboGroup) => {
+    // Nếu selectedProduct thuộc group này thì hiển thị nó
+    if (selectedProduct && group.product_list.some((p) => p.id === selectedProduct.id)) {
+      return selectedProduct;
+    }
+    // Ngược lại lấy sản phẩm mặc định
+    return group.product_list.find((p) => p.is_first === 'yes') || group.product_list[0];
+  };
+
+  if (!combo_set || combo_set.length === 0) return null;
+  const setInfo = combo_set[0];
+
+  return (
+    <div className="box-comboset mb-8">
+      <p className="title-comboset font-weight-600">Mua theo combo</p>
+      <div id="comboset">
+        <Swiper
+          className="list-product-comboset swiper-comboset"
+          modules={[Autoplay, Navigation, Pagination]}
+          spaceBetween={16}
+          slidesPerView={3}
+          navigation
+        >
+          {setInfo.group_list.map((group, index) => {
+            // lấy sản phẩm đầu tiên theo logic "is_first" hoặc mặc định
+            const firstProduct =
+              group.product_list.find((p) => p.is_first === 'yes') || group.product_list[0];
+
+            return (
+              <SwiperSlide key={index}>
+                <ItemComboSet
+                  item={getDisplayedProduct(group)}
+                  keyGroup={group.key}
+                  titleGroup={group.title}
+                  setId={setInfo.id}
+                  products={group.product_list}
+                  onOpenPopup={handleOpenPopup}
+                />
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+
+        <div className="comboset-info mt-4 flex justify-between">
+          <div className="box-left">
+            <div className="total-comboset flex items-center gap-2">
+              <p>Tạm tính:</p>
+              <p className="js-pass-price price text-red font-weight-600">
+                {/* giả sử lấy giá từ product_info */}
+                3.050.000 đ
+              </p>
+            </div>
+            <p className="save-price-combo">
+              Tiết kiệm thêm <span className="save-price">215.000đ</span>
+            </p>
+          </div>
+          <div className="box-right flex items-center justify-end gap-2">
+            <p className="js-combo-set js-combo-set-checkout buy_combo" data-set-id={setInfo.id}>
+              Mua thêm <span id="count-pro-selected">0</span> sản phẩm
+            </p>
+          </div>
+        </div>
+      </div>
+      <ChangeProductPopup
+        titleGroup={popupGroup.title}
+        products={popupGroup.products}
+        open={openPopup}
+        onClose={() => setOpenPopup(false)}
+        onSelect={handleReplaceProduct}
+      />
+    </div>
+  );
+};