diff options
Diffstat (limited to 'src/lib/product/components')
| -rw-r--r-- | src/lib/product/components/ProductCard.jsx | 59 | ||||
| -rw-r--r-- | src/lib/product/components/ProductSearch.jsx | 121 |
2 files changed, 88 insertions, 92 deletions
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 22ce0533..d3b50302 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -17,12 +17,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const [discount, setDiscount] = useState(0); let voucherPastiHemat = 0; - - if (product?.voucherPastiHemat ? product?.voucherPastiHemat.length : voucherPastiHemat > 0) { - const stringVoucher = product?.voucherPastiHemat[0]; - const validJsonString = stringVoucher.replace(/'/g, '"'); - voucherPastiHemat = JSON.parse(validJsonString); - } + voucherPastiHemat = product?.newVoucherPastiHemat[0]; const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, @@ -48,18 +43,18 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const hitungDiscountVoucher = () => { let countDiscount = 0; - if (voucherPastiHemat.discount_type === 'percentage') { + if (voucherPastiHemat.discountType === 'percentage') { countDiscount = product?.lowestPrice.priceDiscount * - (voucherPastiHemat.discount_amount / 100); + (voucherPastiHemat.discountAmount / 100); if ( - voucherPastiHemat.max_discount > 0 && - countDiscount > voucherPastiHemat.max_discount + voucherPastiHemat.maxDiscount > 0 && + countDiscount > voucherPastiHemat.maxDiscount ) { - countDiscount = voucherPastiHemat.max_discount; + countDiscount = voucherPastiHemat.maxDiscount; } } else { - countDiscount = voucherPastiHemat.discount_amount; + countDiscount = voucherPastiHemat.discountAmount; } setDiscount(countDiscount); @@ -147,20 +142,24 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { </Link> <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'> <div className='flex justify-between '> - {product?.manufacture?.name ? ( - <Link href={URL.manufacture} className='mb-1 mt-1'> - {product.manufacture.name} - </Link> - ) : ( - <div>-</div> - )} - {product?.isInBu && ( - <Link href='/panduan-pick-up-service' className='group'> - <Image src='/images/PICKUP-NOW.png' className='group-hover:scale-105 transition-transform duration-200' alt='pickup now' width={90} height={12} /> - </Link> - - - )} + {product?.manufacture?.name ? ( + <Link href={URL.manufacture} className='mb-1 mt-1'> + {product.manufacture.name} + </Link> + ) : ( + <div>-</div> + )} + {product?.isInBu && ( + <Link href='/panduan-pick-up-service' className='group'> + <Image + src='/images/PICKUP-NOW.png' + className='group-hover:scale-105 transition-transform duration-200' + alt='pickup now' + width={90} + height={12} + /> + </Link> + )} </div> <Link href={URL.product} @@ -301,11 +300,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { </div> )} {product?.manufacture?.name ? ( - <div className='flex justify-between'> + <div className='flex justify-between'> <Link href={URL.manufacture} className='mb-1'> - {product.manufacture.name} - </Link> - {/* {product?.is_in_bu && ( + {product.manufacture.name} + </Link> + {/* {product?.is_in_bu && ( <div className='bg-red-500 rounded'> <span className='p-[6px] text-xs text-white'> Click & Pickup diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 1edc31c9..26114acf 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -28,7 +28,7 @@ import SideBanner from '~/modules/side-banner'; import FooterBanner from '~/modules/footer-banner'; import CategorySection from './CategorySection'; import LobSectionCategory from './LobSectionCategory'; -import { getIdFromSlug } from '@/core/utils/slug' +import { getIdFromSlug } from '@/core/utils/slug'; import { data } from 'autoprefixer'; const ProductSearch = ({ @@ -45,35 +45,40 @@ const ProductSearch = ({ const [orderBy, setOrderBy] = useState(router.query?.orderBy); const [finalQuery, setFinalQuery] = useState({}); const [queryFinal, setQueryFinal] = useState({}); - const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]) - const [dataCategoriesLob, setDataCategoriesLob] = useState([]) - const categoryId = getIdFromSlug(prefixUrl) - const [data, setData] = useState([]) + const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]); + const [dataCategoriesLob, setDataCategoriesLob] = useState([]); + const categoryId = getIdFromSlug(prefixUrl); + const [data, setData] = useState([]); const [dataLob, setDataLob] = useState([]); if (defaultBrand) query.brand = defaultBrand.toLowerCase(); - const dataIdCategories = [] + const dataIdCategories = []; useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const loadProduct = async () => { - const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${categoryId}`); + const getCategoriesId = await odooApi( + 'GET', + `/api/v1/category/numFound?parent_id=${categoryId}` + ); if (getCategoriesId) { setDataCategoriesProduct(getCategoriesId); } }; loadProduct(); - }else if(prefixUrl.includes('lob')){ + } else if (prefixUrl.includes('lob')) { const loadProduct = async () => { - const lobData = await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`); - + const lobData = await odooApi( + 'GET', + `/api/v1/lob_homepage/${categoryId}/category_id` + ); + if (lobData) { setDataLob(lobData); } }; loadProduct(); - } }, [categoryId]); - + const collectIds = (category) => { const ids = []; function recurse(cat) { @@ -88,45 +93,40 @@ const ProductSearch = ({ return ids; }; useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const ids = collectIds(dataCategoriesProduct); const newQuery = { fq: `category_id_ids:(${ids.join(' OR ')})`, - 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 : '' + 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); - } else if (prefixUrl.includes('lob')){ - + } else if (prefixUrl.includes('lob')) { const fetchCategoryData = async () => { if (dataLob[0]?.categoryIds) { - for (const cate of dataLob[0].categoryIds) { - - dataIdCategories.push(cate.childId) + dataIdCategories.push(cate.childId); } - - + const mergedArray = dataIdCategories.flat(); - + const newQuery = { fq: `category_id_ids:(${mergedArray.join(' OR ')})`, - category : router.query.category? router.query.category : '', - page : router.query.page? router.query.page : 1, - brand : router.query.brand? router.query.brand : '', - 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 : '' + category: router.query.category ? router.query.category : '', + page: router.query.page ? router.query.page : 1, + brand: router.query.brand ? router.query.brand : '', + 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); - } }; fetchCategoryData(); @@ -139,7 +139,7 @@ const ProductSearch = ({ } else { setQueryFinal({ ...query, q, limit, orderBy }); } - }, [prefixUrl,dataCategoriesProduct, query, finalQuery]); + }, [prefixUrl, dataCategoriesProduct, query, finalQuery]); const { productSearch } = useProductSearch({ query: queryFinal, @@ -162,7 +162,7 @@ const ProductSearch = ({ 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); @@ -170,8 +170,8 @@ const ProductSearch = ({ const productStart = productSearch.data?.responseHeader.params.start; const productRows = limit; const productFound = productSearch.data?.response.numFound; - const [dataCategories, setDataCategories] = useState([]) - + const [dataCategories, setDataCategories] = useState([]); + useEffect(() => { if (productFound == 0 && query.q && !spellings) { searchSpellApi({ query: query.q }).then((response) => { @@ -201,7 +201,7 @@ const ProductSearch = ({ }); } }, [productFound, query, spellings]); - let id = [] + let id = []; useEffect(() => { const checkIfBrand = async () => { const brand = await axios( @@ -218,21 +218,21 @@ const ProductSearch = ({ checkIfBrand(); } }, [q]); - + useEffect(() => { - if(prefixUrl.includes('category')){ + if (prefixUrl.includes('category')) { const loadCategories = async () => { - const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`) - if(getCategories){ - setDataCategories(getCategories) - } - } - loadCategories() + const getCategories = await odooApi( + 'GET', + `/api/v1/category/child?parent_id=${categoryId}` + ); + if (getCategories) { + setDataCategories(getCategories); + } + }; + loadCategories(); } - }, []) - - - + }, []); const brands = []; for ( @@ -248,7 +248,6 @@ const ProductSearch = ({ brands.push({ brand, qty }); } } - const categories = []; for ( @@ -263,7 +262,6 @@ const ProductSearch = ({ categories.push({ name, qty }); } } - const orderOptions = [ { value: '', label: 'Pilih Filter' }, @@ -382,7 +380,6 @@ const ProductSearch = ({ const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock'; - console.log('is spelling', spellings); return ( <> <MobileView> @@ -443,8 +440,8 @@ const ProductSearch = ({ SpellingComponent )} </div> - <LobSectionCategory categories={dataLob}/> - <CategorySection categories={dataCategories}/> + <LobSectionCategory categories={dataLob} /> + <CategorySection categories={dataCategories} /> {productFound > 0 && ( <div className='flex items-center gap-x-2 mb-5 justify-between'> @@ -536,8 +533,8 @@ const ProductSearch = ({ </div> <div className='w-9/12 pl-6'> - <LobSectionCategory categories={dataLob}/> - <CategorySection categories={dataCategories}/> + <LobSectionCategory categories={dataLob} /> + <CategorySection categories={dataCategories} /> {bannerPromotionHeader && bannerPromotionHeader?.image && ( <div className='mb-3'> <Image |