update

2025-12-27 12:01:54 +07:00
parent e2063bce4c
commit 7606157d26
19 changed files with 259 additions and 37 deletions
--- a/src/app/[slug]/page.tsx
+++ b/src/app/[slug]/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { useParams } from 'next/navigation';
-import CategoryPage from '@/components/product/Category';
-import ProductDetailPage from '@/components/product/ProductDetail';
+import CategoryPage from '@/components/Product/Category';
+import ProductDetailPage from '@/components/Product/ProductDetail';

 import { resolvePageType } from '@/lib/resolvePageType';

@@ -14,7 +14,7 @@ export default function DynamicPage() {
  switch (pageType) {
    case 'category':
      return <CategoryPage slug={fullSlug} />;
-    case 'product':
+    case 'product-detail':
      return <ProductDetailPage slug={fullSlug} />;
    default:
      return <div>404 Không tìm thấy</div>;
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,10 +5,10 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import '@styles/globals.css';
-import Header from '@/components/other/Header';
-import Footer from '@/components/other/Footer';
+import Header from '@/components/Other/Header';
+import Footer from '@/components/Other/Footer';

-import PreLoader from '@components/common/PreLoader';
+import PreLoader from '@/components/Common/PreLoader';

 export default function RootLayout({
  children,
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Home from '@/components/home';
+import Home from '@/components/Home';
 import { Metadata } from 'next';

 export const metadata: Metadata = {
--- a/src/components/home/Deal/CounDown/index.tsx
+++ b/src/components/home/Deal/CounDown/index.tsx
@@ -1,16 +1,23 @@
 'use client';
 import React, { useState, useEffect } from 'react';

-const CounDown: React.FC = () => {
+interface CountDownProps {
+  deadline: Date | string;
+}
+
+const CounDown: React.FC<CountDownProps> = ({ deadline }) => {
  const [days, setDays] = useState(0);
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

-  const deadline: Date = new globalThis.Date('2025-12-31');
-
  const getTime = () => {
-    const time = deadline.getTime() - Date.now();
+    let time: number;
+    if (deadline instanceof Date) {
+      time = deadline.getTime() - Date.now();
+    } else {
+      time = Number(deadline) * 1000 - Date.now();
+    }

    setDays(Math.floor(time / (1000 * 60 * 60 * 24)));
    setHours(Math.floor((time / (1000 * 60 * 60)) % 24));
--- a/src/components/home/Category/index.tsx
+++ b/src/components/home/Category/index.tsx
@@ -4,11 +4,11 @@ import Link from 'next/link';
 import { FaCaretDown } from 'react-icons/fa';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay, Navigation, Pagination } from 'swiper/modules';
-import ItemProduct from '@/components/common/ItemProduct';
+import ItemProduct from '@/components/Common/ItemProduct';

 import { InfoCategory } from '@/types';

-import { menuData } from '@/components/other/Header/menuData';
+import { menuData } from '@/components/Other/Header/menuData';
 import { productData } from './productData';

 const BoxListCategory: React.FC = () => {
--- a/src/components/home/CategoryFeature/index.tsx
+++ b/src/components/home/CategoryFeature/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { menuData } from '../../other/Header/menuData';
+import { menuData } from '../../Other/Header/menuData';
 import ItemCategory from './ItemCategory';
 import { InfoCategory } from '@/types';

--- a/src/components/home/Deal/index.tsx
+++ b/src/components/home/Deal/index.tsx
@@ -7,7 +7,7 @@ import { FaCaretRight } from 'react-icons/fa';

 import { productDealData } from './productDealData';

-import CounDown from './CounDown';
+import CounDown from '../../Common/CounDown';
 import ProductItem from './ProductItem';

 const BoxProductDeal: React.FC = () => {
@@ -19,7 +19,7 @@ const BoxProductDeal: React.FC = () => {
          <h2 className="title font-bold">Giá tốt mỗi ngày</h2>
          <span className="text-time-deal-home color-white fz-16 font-bold">Kết thúc sau</span>
          <div className="global-time-deal flex items-center gap-2">
-            <CounDown />
+            <CounDown deadline={new Date('2025-12-31T23:59:59')} />
          </div>
        </div>
        <Link href="/deal" className="button-deal color-white mb-10 flex items-center">
--- a/src/components/other/Header/HeaderMid/index.tsx
+++ b/src/components/other/Header/HeaderMid/index.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { FaMapMarkerAlt, FaBars } from 'react-icons/fa';
-import BoxShowroom from '@components/common/BoxShowroom';
+import BoxShowroom from '@/components/Common/BoxShowroom';

 const HeaderMid: React.FC = () => {
  const PopupAddress = () => {
--- a/src/components/product/Category/index.tsx
+++ b/src/components/product/Category/index.tsx
@@ -6,12 +6,12 @@ import { productCategoryData } from '@/data/product/category';
 import { findCategoryBySlug } from '@/lib/product/category';

 // box
-import { Breadcrumb } from '@components/common/Breadcrumb';
+import { Breadcrumb } from '@/components/Common/Breadcrumb';
 import BannerCategory from './BannerCategory';
 import ItemCategoryChild from './ItemCategoryChild';
 import BoxFilter from './BoxFilter';
 import BoxSort from './BoxSort';
-import ItemProduct from '@/components/common/ItemProduct';
+import ItemProduct from '@/components/Common/ItemProduct';

 interface CategoryPageProps {
  slug: string; // khai báo prop slug
--- a/src/components/product/ProductDetail/BoxInfoRight/BoxBought/index.tsx
+++ b/src/components/product/ProductDetail/BoxInfoRight/BoxBought/index.tsx
@@ -0,0 +1,86 @@
+import { FaCheckSquare } from 'react-icons/fa';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Navigation, Pagination, Thumbs } from 'swiper/modules';
+
+export const BoxBought = () => {
+  return (
+    <div className="pro-customer-bought">
+      <svg
+        className="pcb-icon"
+        viewBox="0 0 438.533 438.533"
+        width={16}
+        height={16}
+        fill="red"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0
+        c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267
+        c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407
+        s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062
+        C438.533,179.485,428.732,142.795,409.133,109.203z M334.332,232.111L204.71,361.736c-3.617,3.613-7.896,5.428-12.847,5.428
+        c-4.952,0-9.235-1.814-12.85-5.428l-29.121-29.13c-3.617-3.613-5.426-7.898-5.426-12.847c0-4.941,1.809-9.232,5.426-12.847
+        l87.653-87.646l-87.657-87.65c-3.617-3.612-5.426-7.898-5.426-12.845c0-4.949,1.809-9.231,5.426-12.847l29.121-29.13
+        c3.619-3.615,7.898-5.424,12.85-5.424c4.95,0,9.233,1.809,12.85,5.424l129.622,129.621c3.613,3.614,5.42,7.898,5.42,12.847
+        C339.752,224.213,337.945,228.498,334.332,232.111z"
+          />
+        </g>
+      </svg>
+
+      <div className="pcb-slider swiper-customer-bought">
+        <Swiper
+          modules={[Autoplay, Navigation, Pagination, Thumbs]}
+          spaceBetween={12}
+          slidesPerView={1}
+          loop={true}
+          autoplay={{
+            delay: 3000,
+            disableOnInteraction: false,
+          }}
+        >
+          <SwiperSlide>
+            <div>
+              <p>
+                <b>Khách hàng Anh Tuấn (036 856 xxxx)</b>
+              </p>
+              <p>Đã mua hàng 2 giờ trước</p>
+            </div>
+          </SwiperSlide>
+          <SwiperSlide>
+            <div>
+              <p>
+                <b>Khách hàng Quốc Trung (035 348 xxxx)</b>
+              </p>
+              <p>Đã mua hàng 1 giờ trước</p>
+            </div>
+          </SwiperSlide>
+          <SwiperSlide>
+            <div>
+              <p>
+                <b>Khách hàng Quang Ngọc (097 478 xxxx)</b>
+              </p>
+              <p>Đã mua hàng 30 phút trước</p>
+            </div>
+          </SwiperSlide>
+          <SwiperSlide>
+            <div>
+              <p>
+                <b>Khách hàng Mạnh Lực (037 204 xxxx)</b>
+              </p>
+              <p>Đã mua hàng 25 phút trước</p>
+            </div>
+          </SwiperSlide>
+          <SwiperSlide>
+            <div>
+              <p>
+                <b>Khách hàng Hiếu (096 859 xxxx)</b>
+              </p>
+              <p>Đã mua hàng 20 phút trước</p>
+            </div>
+          </SwiperSlide>
+        </Swiper>
+      </div>
+    </div>
+  );
+};
--- a/src/components/product/ProductDetail/BoxInfoRight/BoxPrice/index.tsx
+++ b/src/components/product/ProductDetail/BoxInfoRight/BoxPrice/index.tsx
@@ -1,4 +1,6 @@
 import type { ProductDetailData } from '@/types';
+import CounDown from '@/components/Common/CounDown';
+import { formatCurrency } from '@/lib/formatPrice';

 export const BoxPrice = (item: ProductDetailData) => {
  return (
@@ -9,10 +11,70 @@ export const BoxPrice = (item: ProductDetailData) => {
            <i className="sprite sprite-flashsale-detail"></i>
            <p className="title-deal font-weight-800">flash sale</p>
          </div>
-          <div className="box-middle product-time-holder global-time-deal flex gap-2"></div>
-          <div className="box-right">
-            <div className="box-product-deal"></div>
+          <div className="box-middle product-time-holder global-time-deal flex gap-2">
+            <CounDown deadline={item.product_info.sale_rules.to_time} />
          </div>
+          <div className="box-right">
+            <div className="box-product-deal">
+              <p className="text-deal-detail">
+                Còn{' '}
+                {(() => {
+                  const deal = item.product_info.deal_list[0];
+                  return Number(deal.quantity) - deal.sale_order;
+                })()}
+                /{item.product_info.deal_list[0].quantity} sản phẩm
+              </p>
+
+              <div className="p-quantity-sale" data-quantity-left="3" data-quantity-sale-total="5">
+                <i className="sprite sprite-fire-deal"></i>
+                <div className="bg-gradient"></div>
+                {(() => {
+                  const deal = item.product_info.deal_list[0];
+                  const percentRemaining =
+                    ((Number(deal.quantity) - deal.sale_order) / Number(deal.quantity)) * 100;
+
+                  return (
+                    <>
+                      <p
+                        className="js-line-deal-left"
+                        style={{ width: `${percentRemaining}%` }}
+                      ></p>
+                    </>
+                  );
+                })()}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* giá */}
+
+      {item.product_info.marketPrice > '0' && item.product_info.sale_rules.type == 'deal' && (
+        <div
+          className="box-price-detail boder-radius-10 flex flex-wrap items-center"
+          style={{ rowGap: '8px' }}
+        >
+          <p className="price-detail font-bold">
+            {item.product_info.price !== '0'
+              ? `${formatCurrency(item.product_info.price)}đ`
+              : 'Liên hệ'}
+          </p>
+          {item.product_info.marketPrice > '0' && (
+            <>
+              <span className="market-price-detail font-weight-500">
+                {formatCurrency(item.product_info.marketPrice)}₫
+              </span>
+              <div className="save-price-detail flex items-center gap-1">
+                <span>Tiết kiệm</span>
+                {(() => {
+                  return formatCurrency(
+                    Number(item.product_info.marketPrice) - Number(item.product_info.price),
+                  );
+                })()}
+                <span>đ</span>
+              </div>
+            </>
+          )}
        </div>
      )}
    </>
--- a/src/components/product/ProductDetail/BoxInfoRight/TimeDeal/index.tsx
+++ b/src/components/product/ProductDetail/BoxInfoRight/TimeDeal/index.tsx
--- a/src/components/product/ProductDetail/BoxInfoRight/index.tsx
+++ b/src/components/product/ProductDetail/BoxInfoRight/index.tsx
@@ -2,11 +2,14 @@ import type { ProductDetailData } from '@/types';
 import Link from 'next/link';

 import { BoxPrice } from './BoxPrice';
+import { BoxBought } from './BoxBought';

 export const BoxInfoRight = (item: ProductDetailData) => {
  return (
    <>
-      <h1 className="product-name color-black line-clamp-3">{item.product_info.productName}</h1>
+      <h1 className="product-name color-black line-clamp-3 font-bold">
+        {item.product_info.productName}
+      </h1>

      <div className="list-basic-product-info flex flex-wrap items-center">
        <div className="item-basic">
@@ -125,6 +128,31 @@ export const BoxInfoRight = (item: ProductDetailData) => {
          </div>
        </>
      )}
+
+      {/*  yên tâm mua hàng */}
+      <div className="box-product-policy-detal boder-radius-10" style={{ marginTop: '24px' }}>
+        <h2 className="title font-[600]">Yên tâm mua hàng</h2>
+        <div className="list-showroom-detail flex flex-wrap justify-between">
+          <div className="item flex items-center gap-2">
+            <i className="sprite sprite-camket-detail"></i>
+            <p>Cam kết giá tốt nhất thị trường.</p>
+          </div>
+          <div className="item flex items-center gap-2">
+            <i className="sprite sprite-sanphammoi-detail"></i>
+            <p>Sản phẩm mới 100%.</p>
+          </div>
+          <div className="item flex items-center gap-2">
+            <i className="sprite sprite-1doi1-detail"></i>
+            <p>Lỗi 1 đổi 1 ngay lập tức.</p>
+          </div>
+          <div className="item flex items-center gap-2">
+            <i className="sprite sprite-hotrotragop-detail"></i>
+            <p>Hỗ trợ trả góp - Thủ tục nhanh gọn.</p>
+          </div>
+        </div>
+      </div>
+
+      <BoxBought />
    </>
  );
 };
--- a/src/components/product/ProductDetail/index.tsx
+++ b/src/components/product/ProductDetail/index.tsx
@@ -4,9 +4,9 @@ import Link from 'next/link';
 import type { ProductDetailData } from '@/types';
 import { productDetailData } from '@/data/product/detail';
 import { findProductDetailBySlug } from '@/lib/product/productdetail';
-import { ErrorLink } from '@components/common/error';
+import { ErrorLink } from '@/components/Common/error';

-import { Breadcrumb } from '@components/common/Breadcrumb';
+import { Breadcrumb } from '@/components/Common/Breadcrumb';
 import { ImageProduct } from './ImageProduct';
 import { ProductSummary } from './ProductSummary';
 import { ComboSetBox } from './ComboSet';
--- a/src/data/product/detail/index.ts
+++ b/src/data/product/detail/index.ts
@@ -320,7 +320,7 @@ export const productDetailData = [
        max_purchase: '0',
        remain_quantity: '1',
        from_time: '1766106000',
-        to_time: '1766716200',
+        to_time: '1766975400',
        type: 'deal',
        type_id: '565',
      },
@@ -388,6 +388,8 @@ export const productDetailData = [
          from_time: '1766106000',
          to_time: '1766716200',
          is_started: '1',
+          sale_order: 2,
+          sale_quantity: 2,
        },
      ],
      pricing_traces: [
@@ -1351,9 +1353,9 @@ export const productDetailData = [
        min_purchase: '1',
        max_purchase: '1',
        remain_quantity: '1',
-        from_time: '0',
-        to_time: '0',
-        type: '',
+        from_time: '19-12-2025, 8:00 am',
+        to_time: '29-12-2025, 9:30 am',
+        type: 'deal',
      },
      categoryInfo: [
        {
--- a/src/lib/resolvePageType.ts
+++ b/src/lib/resolvePageType.ts
@@ -8,7 +8,7 @@ export function resolvePageType(slug: string) {
  }
  // kiểm tra sản phẩm
  if (productDetailData.some((c) => c.product_info.productUrl == slug)) {
-    return 'product';
+    return 'product-detail';
  }
  return '404';
 }
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2236,6 +2236,7 @@ textarea::placeholder {
  justify-content: center;
  font-weight: 600;
 }
+
 .btn-product,
 .page-hompage .box-product-deal .btn-deal {
  color: #105fbd;
@@ -3284,15 +3285,22 @@ textarea::placeholder {
  border-top: 64px solid transparent;
  border-right: 30px solid #fff;
 }
-.page-product-detail .box-content-product-detail .box-flash-sale .item-time b {
-  border-radius: 5px;
+.page-product-detail .box-content-product-detail .box-flash-sale .global-time-deal p {
  background: #001644;
-  padding: 5px;
-  font-size: 16px;
  color: #fff;
-  margin-bottom: 4px;
-  display: block;
+  border-radius: 3px;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 28px;
+  font-size: 16px;
+  font-weight: 600;
+  display: flex;
 }
+.page-product-detail .global-time-deal .flex.items-center.gap-2 {
+  gap: calc(var(--spacing) * 1);
+}
+
 .page-product-detail .box-content-product-detail .box-flash-sale .box-middle span {
  margin-top: 4px;
 }
@@ -6016,3 +6024,30 @@ textarea::placeholder {
  background-size: 100% 100%;
  z-index: 1;
 }
+
+.pro-customer-bought {
+  position: relative;
+  padding-left: 30px;
+  margin: 8px 0;
+}
+.pro-customer-bought .pcb-icon {
+  position: absolute;
+  top: 4px;
+  left: 0;
+}
+.pro-customer-bought .pcb-slider {
+  font-size: 14px;
+  line-height: 24px;
+}
+.pro-customer-bought .pcb-slider .swiper-slide p:first-child {
+  font-size: 15px;
+}
+
+@media (max-width: 768px) {
+  .pro-customer-bought .pcb-slider {
+    font-size: 13px;
+  }
+  .pro-customer-bought .pcb-slider .swiper-slide p:first-child {
+    font-size: 14px;
+  }
+}
--- a/src/types/product/detail/index.ts
+++ b/src/types/product/detail/index.ts
@@ -88,6 +88,8 @@ interface Deal {
  from_time: string;
  to_time: string;
  is_started: string;
+  sale_order: number;
+  sale_quantity: number;
 }

 // Pricing Trace