summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/lib/product/api/productSearchApi.js2
-rw-r--r--src/lib/product/components/ProductSearch.jsx1
-rw-r--r--src/lib/promo/api/productSearchApi.js11
-rw-r--r--src/lib/promo/hooks/usePromotionSearch.js15
-rw-r--r--src/pages/api/shop/promo.js202
-rw-r--r--src/pages/shop/promo/[slug].jsx394
-rw-r--r--src/pages/shop/promo/[slug].tsx523
-rw-r--r--src/utils/solrMapping.js27
-rw-r--r--tsconfig.json2
9 files changed, 651 insertions, 526 deletions
diff --git a/src/lib/product/api/productSearchApi.js b/src/lib/product/api/productSearchApi.js
index 1626b7b7..8ff8e57d 100644
--- a/src/lib/product/api/productSearchApi.js
+++ b/src/lib/product/api/productSearchApi.js
@@ -1,7 +1,7 @@
import _ from 'lodash-contrib'
import axios from 'axios'
-const productSearchApi = async ({ query, operation = 'AND' }) => {
+const productSearchApi = async ({ query, operation = 'OR' }) => {
const dataProductSearch = await axios(
`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?${query}&operation=${operation}`
)
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index eaeac71a..ab55cae0 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -87,7 +87,6 @@ const ProductSearch = ({
recurse(category);
return ids;
};
-
useEffect(() => {
if(prefixUrl.includes('category')){
const ids = collectIds(dataCategoriesProduct);
diff --git a/src/lib/promo/api/productSearchApi.js b/src/lib/promo/api/productSearchApi.js
new file mode 100644
index 00000000..2f792fd4
--- /dev/null
+++ b/src/lib/promo/api/productSearchApi.js
@@ -0,0 +1,11 @@
+import _ from 'lodash-contrib'
+import axios from 'axios'
+
+const productSearchApi = async ({ query, operation = 'AND' }) => {
+ const dataProductSearch = await axios(
+ `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/promo?${query}&operation=${operation}`
+ )
+ return dataProductSearch.data
+}
+
+export default productSearchApi
diff --git a/src/lib/promo/hooks/usePromotionSearch.js b/src/lib/promo/hooks/usePromotionSearch.js
new file mode 100644
index 00000000..1a194646
--- /dev/null
+++ b/src/lib/promo/hooks/usePromotionSearch.js
@@ -0,0 +1,15 @@
+import { useQuery } from 'react-query'
+import productSearchApi from '../api/productSearchApi'
+import _ from 'lodash-contrib'
+
+const usePromotionSearch = ({ query, operation }) => {
+ const queryString = _.toQuery(query)
+ const fetchProductSearch = async () => await productSearchApi({ query: queryString , operation : operation})
+ const productSearch = useQuery(`promoSearch-${queryString}`, fetchProductSearch)
+
+ return {
+ productSearch
+ }
+}
+
+export default usePromotionSearch
diff --git a/src/pages/api/shop/promo.js b/src/pages/api/shop/promo.js
new file mode 100644
index 00000000..221a9adb
--- /dev/null
+++ b/src/pages/api/shop/promo.js
@@ -0,0 +1,202 @@
+import { productMappingSolr, promoMappingSolr } from '@/utils/solrMapping';
+import axios from 'axios';
+import camelcaseObjectDeep from 'camelcase-object-deep';
+
+export default async function handler(req, res) {
+ const {
+ q = '*',
+ page = 1,
+ brand = '',
+ category = '',
+ priceFrom = 0,
+ priceTo = 0,
+ orderBy = 'if(exists(sequence_i),0,1) asc, sequence_i asc,',
+ operation = 'AND',
+ fq = '',
+ limit = 30,
+ } = req.query;
+
+ let { stock = '' } = req.query;
+
+ let paramOrderBy = 'if(exists(sequence_i),0,1) asc, sequence_i asc,';
+ switch (orderBy) {
+ case 'price-asc':
+ paramOrderBy += 'price_tier1_v2_f ASC';
+ break;
+ case 'price-desc':
+ paramOrderBy += 'price_tier1_v2_f DESC';
+ break;
+ case 'popular':
+ paramOrderBy += 'product_rating_f DESC, search_rank_i DESC,';
+ break;
+ case 'popular-weekly':
+ paramOrderBy += 'search_rank_weekly_i DESC';
+ break;
+ case 'stock':
+ paramOrderBy += 'product_rating_f DESC, stock_total_f DESC';
+ break;
+ case 'flashsale-price-asc':
+ paramOrderBy += 'flashsale_price_f ASC';
+ break;
+ default:
+ paramOrderBy += '';
+ break;
+ }
+
+ let checkQ = q.trim().split(/[\s\+\-\!\(\)\{\}\[\]\^"~\*\?:\\\/]+/);
+ let newQ = checkQ.length > 1 ? escapeSolrQuery(q) + '*' : escapeSolrQuery(q);
+
+ let offset = (page - 1) * limit;
+ let parameter = [
+ 'facet.field=manufacture_name_s',
+ 'facet.field=category_name',
+ 'facet=true',
+ 'indent=true',
+ // `facet.query=${escapeSolrQuery(q)}`,
+ `q.op=${operation}`,
+ `q=${q}`,
+ // 'qf=name_s',
+ `start=${parseInt(offset)}`,
+ `rows=${limit}`,
+ `sort=${paramOrderBy}`,
+ `fq=product_ids:[* TO *]`,
+ ];
+
+ if (priceFrom > 0 || priceTo > 0) {
+ parameter.push(
+ `fq=price_tier1_v2_f:[${priceFrom == '' ? '*' : priceFrom} TO ${
+ priceTo == '' ? '*' : priceTo
+ }]`
+ );
+ }
+
+ let { auth } = req.cookies;
+ if (auth) {
+ auth = JSON.parse(auth);
+ if (auth.feature.onlyReadyStock) stock = true;
+ }
+
+ if (brand)
+ parameter.push(
+ `fq=${brand
+ .split(',')
+ .map(
+ (manufacturer) =>
+ `manufacture_name_s:"${encodeURIComponent(manufacturer)}"`
+ )
+ .join(' OR ')}`
+ );
+ if (category)
+ parameter.push(
+ `fq=${category
+ .split(',')
+ .map((cat) => `category_name:"${encodeURIComponent(cat)}"`)
+ .join(' OR ')}`
+ );
+ // if (category) parameter.push(`fq=category_name:${capitalizeFirstLetter(category.replace(/,/g, ' OR '))}`)
+ if (stock) parameter.push(`fq=stock_total_f:{1 TO *}`);
+
+ // Single fq in url params
+ if (typeof fq === 'string') parameter.push(`fq=${fq}`);
+ // Multi fq in url params
+ if (Array.isArray(fq))
+ parameter = parameter.concat(fq.map((val) => `fq=${val}`));
+
+ let result = await axios(
+ process.env.SOLR_HOST + '/solr/promotion_program_lines/select?' + parameter.join('&')
+ );
+ try {
+ result.data.response.products = promoMappingSolr(
+ result.data.response.docs
+ );
+
+ result.data.responseHeader.params.start = parseInt(
+ result.data.responseHeader.params.start
+ );
+ result.data.responseHeader.params.rows = parseInt(
+ result.data.responseHeader.params.rows
+ );
+ delete result.data.response.docs;
+ // result.data = camelcaseObjectDeep(result.data);
+ result.data = result.data;
+ res.status(200).json(result.data);
+ } catch (error) {
+ res.status(400).json({ error: error.message });
+ }
+}
+
+const escapeSolrQuery = (query) => {
+ if (query == '*') return query;
+
+ query = query.replace(/-/g, ' ');
+
+ const specialChars = /([\+\!\(\)\{\}\[\]\^"~\*\?:\\\/])/g;
+ const words = query.split(/\s+/);
+ const escapedWords = words.map((word) => {
+ if (specialChars.test(word)) {
+ return word.replace(specialChars, '\\$1');
+ }
+ return word;
+ });
+
+ return escapedWords.join(' ');
+};
+
+
+/*const productResponseMap = (products, pricelist) => {
+ return products.map((product) => {
+ let price = product.price_tier1_v2_f || 0
+ let priceDiscount = product.price_discount_f || 0
+ let discountPercentage = product.discount_f || 0
+
+ if (pricelist) {
+ // const pricelistDiscount = product?.[`price_${pricelist}_f`] || false
+ // const pricelistDiscountPerc = product?.[`discount_${pricelist}_f`] || false
+
+ // if (pricelistDiscount && pricelistDiscount > 0) priceDiscount = pricelistDiscount
+ // if (pricelistDiscountPerc && pricelistDiscountPerc > 0)
+ // discountPercentage = pricelistDiscountPerc
+
+ price = product?.[`price_${pricelist}_f`] || 0
+ }
+
+ if (product?.flashsale_id_i > 0) {
+ price = product?.flashsale_base_price_f || 0
+ priceDiscount = product?.flashsale_price_f || 0
+ discountPercentage = product?.flashsale_discount_f || 0
+ }
+
+ let productMapped = {
+ id: product.product_id_i || '',
+ image: product.image_s || '',
+ code: product.default_code_s || '',
+ name: product.name_s || '',
+ lowestPrice: { price, priceDiscount, discountPercentage },
+ variantTotal: product.variant_total_i || 0,
+ stockTotal: product.stock_total_f || 0,
+ weight: product.weight_f || 0,
+ manufacture: {},
+ categories: [],
+ flashSale: {
+ id: product?.flashsale_id_i,
+ name: product?.product?.flashsale_name_s,
+ tag : product?.flashsale_tag_s || 'FLASH SALE'
+ }
+ }
+
+ if (product.manufacture_id_i && product.manufacture_name_s) {
+ productMapped.manufacture = {
+ id: product.manufacture_id_i || '',
+ name: product.manufacture_name_s || ''
+ }
+ }
+
+ productMapped.categories = [
+ {
+ id: product.category_id_i || '',
+ name: product.category_name_s || ''
+ }
+ ]
+ return productMapped
+ })
+}*/
diff --git a/src/pages/shop/promo/[slug].jsx b/src/pages/shop/promo/[slug].jsx
new file mode 100644
index 00000000..cfb2c841
--- /dev/null
+++ b/src/pages/shop/promo/[slug].jsx
@@ -0,0 +1,394 @@
+import dynamic from 'next/dynamic'
+import NextImage from 'next/image';
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import Seo from '../../../core/components/Seo.jsx'
+import Promocrumb from '../../../lib/promo/components/Promocrumb.jsx'
+import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx'
+import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card.tsx'
+import React from 'react'
+import DesktopView from '../../../core/components/views/DesktopView.jsx';
+import MobileView from '../../../core/components/views/MobileView.jsx';
+import 'swiper/swiper-bundle.css';
+import useDevice from '../../../core/hooks/useDevice.js'
+import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktopPromotion.jsx';
+import ProductFilter from '../../../lib/product/components/ProductFilter.jsx';
+import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
+import { formatCurrency } from '../../../core/utils/formatValue.js';
+import Pagination from '../../../core/components/elements/Pagination/Pagination.js';
+import whatsappUrl from '../../../core/utils/whatsappUrl.js';
+import _ from 'lodash';
+import useActive from '../../../core/hooks/useActive.js';
+import useProductSearch from '../../../lib/promo/hooks/usePromotionSearch.js';
+
+const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout.jsx'))
+
+export default function PromoDetail() {
+ const router = useRouter()
+ const { slug = '', brand ='', category='', page = '1' } = router.query
+ const [currentPage, setCurrentPage] = useState(parseInt(10) || 1);
+ const [orderBy, setOrderBy] = useState(router.query?.orderBy);
+ const popup = useActive();
+ const prefixUrl = `/shop/promo/${slug}`
+ const [queryFinal, setQueryFinal] = useState({});
+ const [limit, setLimit] = useState(30);
+ const [q, setQ] = useState('*');
+ const [finalQuery, setFinalQuery] = useState({});
+ const [products, setProducts] = useState(null);
+ const [brandValues, setBrand] = useState(
+ !router.pathname.includes('brands')
+ ? router.query.brand
+ ? router.query.brand.split(',')
+ : []
+ : []
+ );
+
+ const [categoryValues, setCategory] = useState(
+ router.query?.category?.split(',') || router.query?.category?.split(',')
+ );
+
+ const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null);
+ const [priceTo, setPriceTo] = useState(router.query?.priceTo || null);
+
+
+ useEffect(() => {
+ const newQuery = {
+ fq: `type_value_s:${slug}`,
+ page : router.query.page? router.query.page : 1,
+ brand : router.query.brand? router.query.brand : '',
+ category : router.query.category? router.query.category : '',
+ priceFrom : router.query.priceFrom? router.query.priceFrom : '',
+ priceTo : router.query.priceTo? router.query.priceTo : '',
+ limit : router.query.limit? router.query.limit : '',
+ orderBy : router.query.orderBy? router.query.orderBy : ''
+ };
+ setFinalQuery(newQuery);
+}, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage]);
+ useEffect(() => {
+ setQueryFinal({ ...finalQuery, q, limit, orderBy });
+ }, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage, finalQuery]);
+
+ const { productSearch } = useProductSearch({
+ query: queryFinal,
+ operation: 'OR',
+ });
+
+
+ const pageCount = Math.ceil(productSearch.data?.response.numFound / limit);
+ const productStart = productSearch.data?.responseHeader.params.start;
+ const productRows = limit;
+ const productFound = productSearch.data?.response.numFound;
+
+ useEffect(() => {
+ setProducts(productSearch.data?.response?.products);
+ }, [productSearch]);
+
+ const brands = [];
+ for (
+ let i = 0;
+ i < productSearch.data?.facet_counts?.facet_fields?.manufacture_name_s.length;
+ i += 2
+ ) {
+ const brand =
+ productSearch.data?.facet_counts?.facet_fields?.manufacture_name_s[i];
+ const qty =
+ productSearch.data?.facet_counts?.facet_fields?.manufacture_name_s[i + 1];
+ if (qty > 0) {
+ brands.push({ brand, qty });
+ }
+ }
+
+ const categories = [];
+ for (
+ let i = 0;
+ i < productSearch.data?.facet_counts?.facet_fields?.category_name.length;
+ i += 2
+ ) {
+ const name = productSearch.data?.facet_counts?.facet_fields?.category_name[i];
+ const qty =
+ productSearch.data?.facet_counts?.facet_fields?.category_name[i + 1];
+ if (qty > 0) {
+ categories.push({ name, qty });
+ }
+ }
+
+ function capitalizeFirstLetter(string) {
+ string = string.replace(/_/g, ' ');
+ return string.replace(/(^\w|\s\w)/g, function(match) {
+ return match.toUpperCase();
+ });
+ }
+
+ const handleDeleteFilter = async (source, value) => {
+ let params = {
+ q: router.query.q,
+ orderBy: '',
+ brand: brandValues.join(','),
+ category: categoryValues?.join(','),
+ priceFrom: priceFrom || '',
+ priceTo: priceTo || '',
+ };
+
+ let brands = brandValues;
+ let catagories = categoryValues;
+ switch (source) {
+ case 'brands':
+ brands = brandValues.filter((item) => item !== value);
+ params.brand = brands.join(',');
+ await setBrandValues(brands);
+ break;
+ case 'category':
+ catagories = categoryValues.filter((item) => item !== value);
+ params.category = catagories.join(',');
+ await setCategoryValues(catagories);
+ break;
+ case 'price':
+ params.priceFrom = '';
+ params.priceTo = '';
+ break;
+ case 'delete':
+ params = {
+ q: router.query.q,
+ orderBy: '',
+ brand: '',
+ category: '',
+ priceFrom: '',
+ priceTo: '',
+ };
+ break;
+ }
+
+ handleSubmitFilter(params);
+ };
+ const handleSubmitFilter = (params) => {
+ params = _.pickBy(params, _.identity);
+ params = toQuery(params);
+ router.push(`${slug}?${params}`);
+ };
+
+
+ const toQuery = (obj) => {
+ const str = Object.keys(obj)
+ .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
+ .join('&')
+ return str
+ }
+
+ const whatPromo = capitalizeFirstLetter(slug)
+ const queryWithoutSlug = _.omit(router.query, ['slug'])
+
+ return (
+ <BasicLayout>
+ <Seo
+ title={`Promo ${Array.isArray(slug) ? slug[0] : slug} Terkini`}
+ description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif'
+ />
+ <Promocrumb brandName={whatPromo} />
+ <MobileView>
+ <div className='p-4 pt-0'>
+ <h1 className='mb-2 font-semibold text-h-sm'>Promo {whatPromo}</h1>
+
+ <FilterChoicesComponent
+ brandValues={brandValues}
+ categoryValues={categoryValues}
+ priceFrom={priceFrom}
+ priceTo={priceTo}
+ handleDeleteFilter={handleDeleteFilter}
+ />
+ {products?.length >= 1 && (
+ <div className='flex items-center gap-x-2 mb-5 justify-between'>
+ <div>
+ <button
+ className='btn-light py-2 px-5 h-[40px]'
+ onClick={popup.activate}
+ >
+ Filter
+ </button>
+ </div>
+ </div>
+ )}
+ {productSearch.isLoading && <div className='container flex justify-center my-4'>
+ <LogoSpinner width={48} height={48} />
+ </div>}
+ {products && (
+ <>
+ <div className='grid grid-cols-1 gap-x-1 gap-y-1'>
+ {products?.map((promotion) => (
+ <div key={promotion.id} className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
+ <ProductPromoCard promotion={promotion}/>
+ </div>
+ ))}
+ </div>
+ </>
+ ) }
+
+ <Pagination
+ pageCount={pageCount}
+ currentPage={parseInt(page)}
+ url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`}
+ className='mt-6 mb-2'
+ />
+ <ProductFilter
+ active={popup.active}
+ close={popup.deactivate}
+ brands={brands || []}
+ categories={categories || []}
+ prefixUrl={router.asPath.includes('?') ? `${router.asPath}` : `${router.asPath}?`}
+ defaultBrand={null}
+ />
+ </div>
+
+ </MobileView>
+ <DesktopView>
+ <div className='container mx-auto flex mb-3 flex-col'>
+ <div className='w-full pl-6'>
+ <h1 className='text-2xl mb-2 font-semibold'>Promo {whatPromo}</h1>
+ <div className=' w-full h-full flex flex-row items-center '>
+
+ <div className='detail-filter w-1/2 flex justify-start items-center mt-4'>
+
+ <FilterChoicesComponent
+ brandValues={brandValues}
+ categoryValues={categoryValues}
+ priceFrom={priceFrom}
+ priceTo={priceTo}
+ handleDeleteFilter={handleDeleteFilter}
+ />
+ </div>
+ <div className='Filter w-1/2 flex flex-col'>
+
+ <ProductFilterDesktop
+ brands={brands || []}
+ categories={categories || []}
+ prefixUrl={'/shop/promo'}
+ // defaultBrand={null}
+ />
+ </div>
+ </div>
+ {productSearch.isLoading ? (
+ <div className='container flex justify-center my-4'>
+ <LogoSpinner width={48} height={48} />
+ </div>
+ ) : products && products.length >= 1 ? (
+ <>
+ <div className='grid grid-cols-1 gap-x-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'>
+ {products?.map((promotion) => (
+ <div key={promotion.id} className="min-w-[400px] max-w-[400px] mb-[20px] sm:min-w-[350px] md:min-w-[380px] lg:min-w-[400px] xl:min-w-[400px] ">
+ <ProductPromoCard promotion={promotion}/>
+ </div>
+ ))}
+ </div>
+ </>
+ ) : (
+ <div className="text-center my-8">
+ <p>Belum ada promo pada kategori ini</p>
+ </div>
+ )}
+ <div className='flex justify-between items-center mt-6 mb-2'>
+ <div className='pt-2 pb-6 flex items-center gap-x-3'>
+ <NextImage
+ src='/images/logo-question.png'
+ alt='Logo Question Indoteknik'
+ width={60}
+ height={60}
+ />
+ <div className='text-gray_r-12/90'>
+ <span>
+ Barang yang anda cari tidak ada?{' '}
+ <a
+ href={
+ router.query?.q
+ ? whatsappUrl('productSearch', {
+ name: router.query.q,
+ })
+ : whatsappUrl()
+ }
+ className='text-danger-500'
+ >
+ Hubungi Kami
+ </a>
+ </span>
+ </div>
+ </div>
+
+
+
+ <Pagination
+ pageCount={pageCount}
+ currentPage={parseInt(page)}
+ url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`}
+ className='mt-6 mb-2'
+ />
+ </div>
+
+ </div>
+ </div>
+ </DesktopView>
+ </BasicLayout>
+ )
+ }
+
+const FilterChoicesComponent = ({
+ brandValues,
+ categoryValues,
+ priceFrom,
+ priceTo,
+ handleDeleteFilter,
+ }) => (
+ <div className='flex items-center mb-4'>
+ <HStack spacing={2} className='flex-wrap'>
+ {brandValues?.map((value, index) => (
+ <Tag
+ size='lg'
+ key={index}
+ borderRadius='lg'
+ variant='outline'
+ colorScheme='gray'
+ >
+ <TagLabel>{value}</TagLabel>
+ <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} />
+ </Tag>
+ ))}
+
+ {categoryValues?.map((value, index) => (
+ <Tag
+ size='lg'
+ key={index}
+ borderRadius='lg'
+ variant='outline'
+ colorScheme='gray'
+ >
+ <TagLabel>{value}</TagLabel>
+ <TagCloseButton
+ onClick={() => handleDeleteFilter('category', value)}
+ />
+ </Tag>
+ ))}
+ {priceFrom && priceTo && (
+ <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'>
+ <TagLabel>
+ {formatCurrency(priceFrom) + '-' + formatCurrency(priceTo)}
+ </TagLabel>
+ <TagCloseButton
+ onClick={() => handleDeleteFilter('price', priceFrom)}
+ />
+ </Tag>
+ )}
+ {brandValues?.length > 0 ||
+ categoryValues?.length > 0 ||
+ priceFrom ||
+ priceTo ? (
+ <span>
+ <button
+ className='btn-transparent py-2 px-5 h-[40px] text-red-700'
+ onClick={() => handleDeleteFilter('delete')}
+ >
+ Hapus Semua
+ </button>
+ </span>
+ ) : (
+ ''
+ )}
+ </HStack>
+ </div>
+);
diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx
deleted file mode 100644
index aaee1249..00000000
--- a/src/pages/shop/promo/[slug].tsx
+++ /dev/null
@@ -1,523 +0,0 @@
-import dynamic from 'next/dynamic'
-import NextImage from 'next/image';
-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, fetchVariantSolr } 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";
-import DesktopView from '../../../core/components/views/DesktopView';
-import MobileView from '../../../core/components/views/MobileView';
-import 'swiper/swiper-bundle.css';
-import useDevice from '../../../core/hooks/useDevice'
-import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktopPromotion';
-import ProductFilter from '../../../lib/product/components/ProductFilter';
-import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
-import { formatCurrency } from '../../../core/utils/formatValue';
-import Pagination from '../../../core/components/elements/Pagination/Pagination';
-import SideBanner from '../../../../src-migrate/modules/side-banner';
-import whatsappUrl from '../../../core/utils/whatsappUrl';
-import { cons, toQuery } from 'lodash-contrib';
-import _ from 'lodash';
-import useActive from '../../../core/hooks/useActive';
-
-const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout'))
-
-export default function PromoDetail() {
- const router = useRouter()
- const { slug = '', brand ='', category='', priceFrom = '', priceTo = '', page = '1' } = router.query
- const [promoItems, setPromoItems] = useState<any[]>([])
- const [promoData, setPromoData] = useState<IPromotion[] | null>(null)
- const [currentPage, setCurrentPage] = useState(parseInt(page as string, 10) || 1);
- const itemsPerPage = 12; // Jumlah item yang ingin ditampilkan per halaman
- const [loading, setLoading] = useState(true);
- const { isMobile, isDesktop } = useDevice()
- const [brands, setBrands] = useState<Brand[]>([]);
- const [categories, setCategories] = useState<Category[]>([]);
- const [brandValues, setBrandValues] = useState<string[]>([]);
- const [categoryValues, setCategoryValues] = useState<string[]>([]);
- const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular');
- const popup = useActive();
- const prefixUrl = `/shop/promo/${slug}`
-
- useEffect(() => {
- if (router.query.brand) {
- let brandsArray: string[] = [];
- if (Array.isArray(router.query.brand)) {
- brandsArray = router.query.brand;
- } else if (typeof router.query.brand === 'string') {
- brandsArray = router.query.brand.split(',').map((brand) => brand.trim());
- }
- setBrandValues(brandsArray);
- } else {
- setBrandValues([]);
- }
-
- if (router.query.category) {
- let categoriesArray: string[] = [];
-
- if (Array.isArray(router.query.category)) {
- categoriesArray = router.query.category;
- } else if (typeof router.query.category === 'string') {
- categoriesArray = router.query.category.split(',').map((category) => category.trim());
- }
- setCategoryValues(categoriesArray);
- } else {
- setCategoryValues([]);
- }
- }, [router.query.brand, router.query.category]);
-
- interface Brand {
- brand: string;
- qty: number;
- }
-
- interface Category {
- name: string;
- qty: number;
- }
-
- useEffect(() => {
- const loadPromo = async () => {
- setLoading(true);
- const brandsData: Brand[] = [];
- const categoriesData: Category[] = [];
-
- const pageNumber = Array.isArray(page) ? parseInt(page[0], 10) : parseInt(page, 10);
- setCurrentPage(pageNumber)
-
- try {
- const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`,0,100);
- setPromoItems(items);
-
- if (items.length === 0) {
- setPromoData([])
- setLoading(false);
- return;
- }
-
- const brandArray = Array.isArray(brand) ? brand : brand.split(',');
- const categoryArray = Array.isArray(category) ? category : category.split(',');
-
- const promoDataPromises = items.map(async (item) => {
-
- try {
- let brandQuery = '';
- if (brand) {
- brandQuery = brandArray.map(b => `manufacture_name_s:${b}`).join(' OR ');
- brandQuery = `(${brandQuery})`;
- }
-
- let categoryQuery = '';
- if (category) {
- categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
- categoryQuery = `(${categoryQuery})`;
- }
-
- let priceQuery = '';
- if (priceFrom && priceTo) {
- priceQuery = `price_f:[${priceFrom} TO ${priceTo}]`;
- } else if (priceFrom) {
- priceQuery = `price_f:[${priceFrom} TO *]`;
- } else if (priceTo) {
- priceQuery = `price_f:[* TO ${priceTo}]`;
- }
-
- let combinedQuery = '';
- let combinedQueryPrice = `${priceQuery}`;
- if (brand && category && priceFrom || priceTo) {
- combinedQuery = `${brandQuery} AND ${categoryQuery} `;
- } else if (brand && category) {
- combinedQuery = `${brandQuery} AND ${categoryQuery}`;
- } else if (brand && priceFrom || priceTo) {
- combinedQuery = `${brandQuery}`;
- } else if (category && priceFrom || priceTo) {
- combinedQuery = `${categoryQuery}`;
- } else if (brand) {
- combinedQuery = brandQuery;
- } else if (category) {
- combinedQuery = categoryQuery;
- }
-
- if (combinedQuery && priceFrom || priceTo) {
- const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
- const product = response.response.docs[0];
- const product_id = product.id;
- const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`,0,100);
- return response2;
- }else if(combinedQuery){
- const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
- const product = response.response.docs[0];
- const product_id = product.id;
- const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `,0,100);
- return response2;
- } else {
- const response = await fetchPromoItemsSolr(`id:${item.id}`,0,100);
- return response;
- }
- } catch (fetchError) {
- return [];
- }
- });
-
- const promoDataArray = await Promise.all(promoDataPromises);
- const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
- setPromoData(mergedPromoData);
-
- const dataBrandCategoryPromises = promoDataArray.map(async (promoData) => {
- if (promoData) {
- const dataBrandCategory = promoData.map(async (item) => {
- let response;
- if(category){
- const categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
- response = await fetchVariantSolr(`id:${item.products[0].product_id} AND (${categoryQuery})`);
- }else{
- response = await fetchVariantSolr(`id:${item.products[0].product_id}`)
- }
-
-
- if (response.response?.docs?.length > 0) {
- const product = response.response.docs[0];
- const manufactureNameS = product.manufacture_name;
- if (Array.isArray(manufactureNameS)) {
- for (let i = 0; i < manufactureNameS.length; i += 2) {
- const brand = manufactureNameS[i];
- const qty = 1;
- const existingBrandIndex = brandsData.findIndex(b => b.brand === brand);
- if (existingBrandIndex !== -1) {
- brandsData[existingBrandIndex].qty += qty;
- } else {
- brandsData.push({ brand, qty });
- }
- }
- }
-
- const categoryNameS = product.category_name;
- if (Array.isArray(categoryNameS)) {
- for (let i = 0; i < categoryNameS.length; i += 2) {
- const name = categoryNameS[i];
- const qty = 1;
- const existingCategoryIndex = categoriesData.findIndex(c => c.name === name);
- if (existingCategoryIndex !== -1) {
- categoriesData[existingCategoryIndex].qty += qty;
- } else {
- categoriesData.push({ name, qty });
- }
- }
- }
- }
- });
-
- return Promise.all(dataBrandCategory);
- }
- });
-
- await Promise.all(dataBrandCategoryPromises);
- setBrands(brandsData);
- setCategories(categoriesData);
- setLoading(false);
-
- } catch (loadError) {
- // console.error("Error loading promo items:", loadError)
- setLoading(false);
- }
- }
-
- if (slug) {
- loadPromo()
- }
- },[slug, brand, category, priceFrom, priceTo, currentPage]);
-
-
- function capitalizeFirstLetter(string) {
- string = string.replace(/_/g, ' ');
- return string.replace(/(^\w|\s\w)/g, function(match) {
- return match.toUpperCase();
- });
- }
-
- const handleDeleteFilter = async (source, value) => {
- let params = {
- q: router.query.q,
- orderBy: '',
- brand: brandValues.join(','),
- category: categoryValues.join(','),
- priceFrom: priceFrom || '',
- priceTo: priceTo || '',
- };
-
- let brands = brandValues;
- let catagories = categoryValues;
- switch (source) {
- case 'brands':
- brands = brandValues.filter((item) => item !== value);
- params.brand = brands.join(',');
- await setBrandValues(brands);
- break;
- case 'category':
- catagories = categoryValues.filter((item) => item !== value);
- params.category = catagories.join(',');
- await setCategoryValues(catagories);
- break;
- case 'price':
- params.priceFrom = '';
- params.priceTo = '';
- break;
- case 'delete':
- params = {
- q: router.query.q,
- orderBy: '',
- brand: '',
- category: '',
- priceFrom: '',
- priceTo: '',
- };
- break;
- }
-
- handleSubmitFilter(params);
- };
- const handleSubmitFilter = (params) => {
- params = _.pickBy(params, _.identity);
- params = toQuery(params);
- router.push(`${slug}?${params}`);
- };
-
- const visiblePromotions = promoData?.slice( (currentPage-1) * itemsPerPage, currentPage * 12)
-
- const toQuery = (obj) => {
- const str = Object.keys(obj)
- .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
- .join('&')
- return str
- }
-
- const whatPromo = capitalizeFirstLetter(slug)
- const queryWithoutSlug = _.omit(router.query, ['slug'])
- const queryString = toQuery(queryWithoutSlug)
-
- return (
- <BasicLayout>
- <Seo
- title={`Promo ${Array.isArray(slug) ? slug[0] : slug} Terkini`}
- description='B2B Marketplace MRO & Industri dengan Layanan Pembayaran Tempo, Faktur Pajak, Online Quotation, Garansi Resmi & Harga Kompetitif'
- />
- <Promocrumb brandName={whatPromo} />
- <MobileView>
- <div className='p-4 pt-0'>
- <h1 className='mb-2 font-semibold text-h-sm'>Promo {whatPromo}</h1>
-
- <FilterChoicesComponent
- brandValues={brandValues}
- categoryValues={categoryValues}
- priceFrom={priceFrom}
- priceTo={priceTo}
- handleDeleteFilter={handleDeleteFilter}
- />
- {promoItems.length >= 1 && (
- <div className='flex items-center gap-x-2 mb-5 justify-between'>
- <div>
- <button
- className='btn-light py-2 px-5 h-[40px]'
- onClick={popup.activate}
- >
- Filter
- </button>
- </div>
- </div>
- )}
-
- {loading ? (
- <div className='container flex justify-center my-4'>
- <LogoSpinner width={48} height={48} />
- </div>
- ) : promoData && promoItems.length >= 1 ? (
- <>
- <div className='grid grid-cols-1 gap-x-1 gap-y-1'>
- {visiblePromotions?.map((promotion) => (
- <div key={promotion.id} className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
- <ProductPromoCard promotion={promotion}/>
- </div>
- ))}
- </div>
- </>
- ) : (
- <div className="text-center my-8">
- <p>Belum ada promo pada kategori ini</p>
- </div>
- )}
-
- <Pagination
- pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)}
- currentPage={currentPage}
- url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`}
- className='mt-6 mb-2'
- />
- <ProductFilter
- active={popup.active}
- close={popup.deactivate}
- brands={brands || []}
- categories={categories || []}
- prefixUrl={router.asPath.includes('?') ? `${router.asPath}` : `${router.asPath}?`}
- defaultBrand={null}
- />
- </div>
-
- </MobileView>
- <DesktopView>
- <div className='container mx-auto flex mb-3 flex-col'>
- <div className='w-full pl-6'>
- <h1 className='text-2xl mb-2 font-semibold'>Promo {whatPromo}</h1>
- <div className=' w-full h-full flex flex-row items-center '>
-
- <div className='detail-filter w-1/2 flex justify-start items-center mt-4'>
-
- <FilterChoicesComponent
- brandValues={brandValues}
- categoryValues={categoryValues}
- priceFrom={priceFrom}
- priceTo={priceTo}
- handleDeleteFilter={handleDeleteFilter}
- />
- </div>
- <div className='Filter w-1/2 flex flex-col'>
-
- <ProductFilterDesktop
- brands={brands || []}
- categories={categories || []}
- prefixUrl={'/shop/promo'}
- // defaultBrand={null}
- />
- </div>
- </div>
- {loading ? (
- <div className='container flex justify-center my-4'>
- <LogoSpinner width={48} height={48} />
- </div>
- ) : promoData && promoItems.length >= 1 ? (
- <>
- <div className='grid grid-cols-1 gap-x-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'>
- {visiblePromotions?.map((promotion) => (
- <div key={promotion.id} className="min-w-[400px] max-w-[400px] mb-[20px] sm:min-w-[350px] md:min-w-[380px] lg:min-w-[400px] xl:min-w-[400px] ">
- <ProductPromoCard promotion={promotion}/>
- </div>
- ))}
- </div>
- </>
- ) : (
- <div className="text-center my-8">
- <p>Belum ada promo pada kategori ini</p>
- </div>
- )}
- <div className='flex justify-between items-center mt-6 mb-2'>
- <div className='pt-2 pb-6 flex items-center gap-x-3'>
- <NextImage
- src='/images/logo-question.png'
- alt='Logo Question Indoteknik'
- width={60}
- height={60}
- />
- <div className='text-gray_r-12/90'>
- <span>
- Barang yang anda cari tidak ada?{' '}
- <a
- href={
- router.query?.q
- ? whatsappUrl('productSearch', {
- name: router.query.q,
- })
- : whatsappUrl()
- }
- className='text-danger-500'
- >
- Hubungi Kami
- </a>
- </span>
- </div>
- </div>
-
-
-
- <Pagination
- pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)}
- currentPage={currentPage}
- url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`}
- className='mt-6 mb-2'
- />
- </div>
-
- </div>
- </div>
- </DesktopView>
- </BasicLayout>
- )
- }
-
-const FilterChoicesComponent = ({
- brandValues,
- categoryValues,
- priceFrom,
- priceTo,
- handleDeleteFilter,
- }) => (
- <div className='flex items-center mb-4'>
- <HStack spacing={2} className='flex-wrap'>
- {brandValues?.map((value, index) => (
- <Tag
- size='lg'
- key={index}
- borderRadius='lg'
- variant='outline'
- colorScheme='gray'
- >
- <TagLabel>{value}</TagLabel>
- <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} />
- </Tag>
- ))}
-
- {categoryValues?.map((value, index) => (
- <Tag
- size='lg'
- key={index}
- borderRadius='lg'
- variant='outline'
- colorScheme='gray'
- >
- <TagLabel>{value}</TagLabel>
- <TagCloseButton
- onClick={() => handleDeleteFilter('category', value)}
- />
- </Tag>
- ))}
- {priceFrom && priceTo && (
- <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'>
- <TagLabel>
- {formatCurrency(priceFrom) + '-' + formatCurrency(priceTo)}
- </TagLabel>
- <TagCloseButton
- onClick={() => handleDeleteFilter('price', priceFrom)}
- />
- </Tag>
- )}
- {brandValues?.length > 0 ||
- categoryValues?.length > 0 ||
- priceFrom ||
- priceTo ? (
- <span>
- <button
- className='btn-transparent py-2 px-5 h-[40px] text-red-700'
- onClick={() => handleDeleteFilter('delete')}
- >
- Hapus Semua
- </button>
- </span>
- ) : (
- ''
- )}
- </HStack>
- </div>
-);
diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js
index fee474be..0d50b99b 100644
--- a/src/utils/solrMapping.js
+++ b/src/utils/solrMapping.js
@@ -1,3 +1,29 @@
+export const promoMappingSolr = (promotions) => {
+ return promotions.map((promotion) =>{
+ let productMapped = {
+ 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,
+ sequence: promotion.sequence_i,
+ total_qty: promotion.total_qty_i,
+ products: JSON.parse(promotion.products_s) || '',
+ product_id: promotion.product_ids[0],
+ qty_sold_f:promotion.total_qty_sold_f,
+ free_products: JSON.parse(promotion.free_products_s)
+ };
+ return productMapped;
+ })
+};
+
+
export const productMappingSolr = (products, pricelist) => {
return products.map((product) => {
let price = product.price_tier1_v2_f || 0;
@@ -123,3 +149,4 @@ const flashsaleTime = (endDate) => {
isFlashSale: flashsaleEndDate > currentTime,
};
};
+
diff --git a/tsconfig.json b/tsconfig.json
index 8613c022..3afcd9ea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -34,7 +34,7 @@
"**/*.tsx",
"**/*.jsx",
".next/types/**/*.ts"
-, "src/pages/shop/promo/index.tsx", "src/pages/shop/promo/[slug].jsx" ],
+, "src/pages/shop/promo/index.tsx", "src/pages/shop/promo/[slug].jsx", "src/lib/promo/hooks/usePromotionSearch.js" ],
"exclude": [
"node_modules",
"src"
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:14:01 +0000