From 5e5b67e5b98d3183044dc5149fe67a29feeb3c41 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 10 Jun 2024 16:53:28 +0700 Subject: update promotion-program --- src/api/promoApi.js | 43 +++++++ src/lib/home/components/PromotionProgram.jsx | 22 +++- src/pages/shop/promo/[slug].jsx | 46 -------- src/pages/shop/promo/[slug].tsx | 161 +++++++++++++++++++++++++++ src/pages/shop/promo/index.jsx | 0 5 files changed, 221 insertions(+), 51 deletions(-) delete mode 100644 src/pages/shop/promo/[slug].jsx create mode 100644 src/pages/shop/promo/[slug].tsx delete mode 100644 src/pages/shop/promo/index.jsx (limited to 'src') diff --git a/src/api/promoApi.js b/src/api/promoApi.js index a4acc768..535df021 100644 --- a/src/api/promoApi.js +++ b/src/api/promoApi.js @@ -1,5 +1,6 @@ // src/api/promoApi.js import odooApi from '@/core/api/odooApi'; +// import { SolrResponse } from "../../../../src-migrate/types/solr.ts"; export const fetchPromoItems = async (type) => { try { @@ -10,3 +11,45 @@ export const fetchPromoItems = async (type) => { return []; } }; + +export const fetchPromoItemsSolr = async (type) => { + let start = 0 + let rows = 120 + try { + const queryParams = new URLSearchParams({ q: `type_value_s:${type}` }); + const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}&rows=${rows}&start=${start}`); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + const promotions = await map(data.response.docs); + return promotions; + } catch (error) { + console.error("Error fetching promotion data:", error); + return []; + } +}; + +const map = async (promotions) => { + const result = []; + for (const promotion of promotions) { + const data = { + id: promotion.id, + program_id: promotion.program_id_i, + name: promotion.name_s, + type: { + value: promotion.type_value_s, + label: promotion.type_label_s, + }, + limit: promotion.package_limit_i, + limit_user: promotion.package_limit_user_i, + limit_trx: promotion.package_limit_trx_i, + price: promotion.price_f, + total_qty: promotion.total_qty_i, + products: JSON.parse(promotion.products_s), + free_products: JSON.parse(promotion.free_products_s), + }; + result.push(data); + } + return result; +}; \ No newline at end of file diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx index 461383a1..a3c09a9b 100644 --- a/src/lib/home/components/PromotionProgram.jsx +++ b/src/lib/home/components/PromotionProgram.jsx @@ -1,16 +1,25 @@ import Link from '@/core/components/elements/Link/Link' import Image from 'next/image' import { bannerApi } from '@/api/bannerApi'; - +import useDevice from '@/core/hooks/useDevice' const { useQuery } = require('react-query') - const BannerSection = () => { const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' })); + const { isMobile, isDesktop } = useDevice() return ( - promotionProgram.data && +
+
+
Promo Tersedia
+ {isDesktop && ( + + Lihat Semua + + )} +
+ {promotionProgram.data && promotionProgram.data?.length > 0 && ( -
+
{promotionProgram.data?.map((banner) => ( { ))}
- ) + + )} +
+ ) } diff --git a/src/pages/shop/promo/[slug].jsx b/src/pages/shop/promo/[slug].jsx deleted file mode 100644 index 4211ceb8..00000000 --- a/src/pages/shop/promo/[slug].jsx +++ /dev/null @@ -1,46 +0,0 @@ -import dynamic from 'next/dynamic' -import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug' -import { useRouter } from 'next/router' -import _ from 'lodash' -import Seo from '@/core/components/Seo' -import Promocrumb from '@/lib/promo/components/Promocrumb' -import useBrand from '@/lib/brand/hooks/useBrand' - -const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')) -const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch')) -const Brand = dynamic(() => import('@/lib/brand/components/Brand')) - -export default function BrandDetail() { - const router = useRouter() - const { slug = '' } = router.query - console.log("apa itu slug",slug) - const brandName = getNameFromSlug(slug) - const id = getIdFromSlug(slug) - const {brand} = useBrand({id}) - return ( - - {/* seakarang arahkan web untuk menampilkan daftar promo sesuai slug */} - - - - - - harusnya disini menampilkan barang promosimya {slug} - - - {/* - {!_.isEmpty(router.query) && ( - - )} */} - - ) -} diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx new file mode 100644 index 00000000..cd3e93c4 --- /dev/null +++ b/src/pages/shop/promo/[slug].tsx @@ -0,0 +1,161 @@ +import dynamic from 'next/dynamic' +import { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import Seo from '../../../core/components/Seo' +import Promocrumb from '../../../lib/promo/components/Promocrumb' +import { fetchPromoItemsSolr } from '../../../api/promoApi' +import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx' +import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card' +import { IPromotion } from '../../../../src-migrate/types/promotion' +import React from 'react' +import { SolrResponse } from "../../../../src-migrate/types/solr.ts"; + + +const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout')) + +export default function PromoDetail() { + const router = useRouter() + const { slug = '' } = router.query + const [promoItems, setPromoItems] = useState([]) + const [promoData, setPromoData] = useState(null) + const [currentPage, setCurrentPage] = useState(1); + const itemsPerPage = 12; // Jumlah item yang ingin ditampilkan per halaman + const startIndex = (currentPage - 1) * itemsPerPage; + const endIndex = Math.min(startIndex + itemsPerPage, promoData?.length || 0); + const visiblePromotions = promoData?.slice(startIndex, endIndex); + const [loading, setLoading] = useState(true); // Menambahkan status loading + + + useEffect(() => { + const loadPromo = async () => { + try { + const items = await fetchPromoItemsSolr(Array.isArray(slug) ? slug[0] : slug) + console.log("slug sekarang ", slug) + + setPromoItems(items) + console.log("data dari promotion pakai SOLR", items) + + if (items.length === 0) { + setPromoData([]) + setLoading(false); + return; + } + + const promoDataPromises = items.map(async (item) => { + const queryParams = new URLSearchParams({ q: `id:${item.id}` }) + console.log("Constructed URL:", `/solr/promotion_program_lines/select?${queryParams.toString()}`) + + try { + const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}`) + console.log("respon data ", response) + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`) + } + + const data: SolrResponse = await response.json() + console.log("data promo IPromotion[]", data) + + const promotions = await map(data.response.docs) + return promotions; + } catch (fetchError) { + console.error("Error fetching promotion data:", fetchError) + return []; + } + }); + + const promoDataArray = await Promise.all(promoDataPromises); + const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []); + setPromoData(mergedPromoData); + setTimeout(() => setLoading(false), 120); // Menambahkan delay 200ms sebelum mengubah status loading + } catch (loadError) { + console.error("Error loading promo items:", loadError) + setLoading(false); + } + } + + if (slug) { + loadPromo() + } + }, [slug]) + + useEffect(() => { + window.scrollTo({ top: 0, behavior: 'auto' }); // Auto scroll to top when component mounts or updates + }, []); // Run only once when component mounts + + + const map = async (promotions: any[]): Promise => { + const result: IPromotion[] = [] + + for (const promotion of promotions) { + const data: IPromotion = { + id: promotion.id, + program_id: promotion.program_id_i, + name: promotion.name_s, + type: { + value: promotion.type_value_s, + label: promotion.type_label_s, + }, + limit: promotion.package_limit_i, + limit_user: promotion.package_limit_user_i, + limit_trx: promotion.package_limit_trx_i, + price: promotion.price_f, + total_qty: promotion.total_qty_i, + products: JSON.parse(promotion.products_s), + free_products: JSON.parse(promotion.free_products_s), + } + + result.push(data) + } + + return result + } + + console.log("data yg dikirim ke ProductPromoCard", promoData) + function capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1); + } + + const goToNextPage = () => { + setCurrentPage((prevPage) => prevPage + 1); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + + const goToPreviousPage = () => { + setCurrentPage((prevPage) => Math.max(prevPage - 1, 1)); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + + return ( + + + + + {loading ? ( +
+ +
+ ) : promoData && promoItems.length >= 1 ? ( + <> +
+ {visiblePromotions?.map((promotion) => ( +
+ +
+ ))} +
+
+ + +
+ + ) : ( +
+

Belum ada promo pada kategori ini

+
+ )} + + ) +} \ No newline at end of file diff --git a/src/pages/shop/promo/index.jsx b/src/pages/shop/promo/index.jsx deleted file mode 100644 index e69de29b..00000000 -- cgit v1.2.3