From 616e9292cd1db6bbc0cd28208e5403dd667152b9 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 27 Sep 2023 14:05:15 +0700 Subject: Update with chakra UI theme --- src/lib/checkout/components/CheckoutOld.jsx | 1 - src/lib/product/components/Product/ColumnsSLA.jsx | 89 ++++------- .../product/components/Product/ProductDesktop.jsx | 98 +++++------- .../components/Product/ProductDesktopVariant.jsx | 88 ++++------- .../product/components/Product/ProductMobile.jsx | 1 - .../components/Product/ProductMobileVariant.jsx | 11 +- .../product/components/ProductFilterDesktop.jsx | 165 ++++++++++++--------- src/lib/product/components/ProductSearch.jsx | 8 +- 8 files changed, 199 insertions(+), 262 deletions(-) (limited to 'src/lib') diff --git a/src/lib/checkout/components/CheckoutOld.jsx b/src/lib/checkout/components/CheckoutOld.jsx index 088b641b..6852059e 100644 --- a/src/lib/checkout/components/CheckoutOld.jsx +++ b/src/lib/checkout/components/CheckoutOld.jsx @@ -22,7 +22,6 @@ import DesktopView from '@/core/components/views/DesktopView' import ExpedisiList from '../api/ExpedisiList' import whatsappUrl from '@/core/utils/whatsappUrl' import { createSlug } from '@/core/utils/slug' -import { Button, Modal } from 'flowbite-react' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' const SELF_PICKUP_ID = 32 diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx index 33da703a..e5296f96 100644 --- a/src/lib/product/components/Product/ColumnsSLA.jsx +++ b/src/lib/product/components/Product/ColumnsSLA.jsx @@ -1,8 +1,9 @@ import odooApi from '@/core/api/odooApi' import { createSlug } from '@/core/utils/slug' import whatsappUrl from '@/core/utils/whatsappUrl' -import { Button, Spinner } from 'flowbite-react' -import { memo, useEffect, useState } from 'react' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' +import { memo } from 'react' import { useQuery } from 'react-query' const ColumnSLA = ({ variant, product }) => { @@ -12,67 +13,35 @@ const ColumnSLA = ({ variant, product }) => { return ( <> - {dataSLA.isFetching ? ( -
- -
- ) : dataSLA?.data?.qty > 0 ? ( - dataSLA?.data?.qty - ) : ( - - Tanya Admin - - )} + + {dataSLA?.data?.qty > 0 ? ( + dataSLA?.data?.qty + ) : ( + + Tanya Admin + + )} + + - {dataSLA.isFetching ? ( - - ) : dataSLA?.data?.slaDate != '-' ? ( - - ) : ( - '-' - )} + + + + ) diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 6da289bc..5cc35df7 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -15,7 +15,6 @@ import ProductCard from '../ProductCard' import productSimilarApi from '../../api/productSimilarApi' import whatsappUrl from '@/core/utils/whatsappUrl' import odooApi from '@/core/api/odooApi' -import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' import ImageNext from 'next/image' @@ -23,6 +22,8 @@ import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import { LazyLoadComponent } from 'react-lazy-load-image-component' import ColumnsSLA from './ColumnsSLA' import { useProductCartContext } from '@/contexts/ProductCartContext' +import { Box, Skeleton, Tooltip } from '@chakra-ui/react' +import { Info } from 'lucide-react' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -40,7 +41,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null) const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) - const {setRefreshCart , refreshCart} = useProductCartContext() + const { setRefreshCart, refreshCart } = useProductCartContext() const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) @@ -256,16 +257,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {

{product?.name}

-
Nomor SKU
-
SKU-{product.id}
+
Nomor SKU
+
SKU-{product.id}
-
Part Number
-
{product.code || '-'}
+
Part Number
+
{product.code || '-'}
-
Manufacture
-
+
Manufacture
+
{product.manufacture?.name ? ( {
-
Persiapan Barang
-
- {product.variants.length > 1 ? ( +
Persiapan Barang
+
+ {product.variants.length > 1 && ( - ) : product.variants[0].sla ? ( - product.variants[0].sla?.slaDate != '-' ? ( - - ) : ( - '-' - ) - ) : ( - + + {product.variants[0]?.sla?.slaDate} + + + + )} + )}
+ {product.variants.length === 1 && (
-
Stock
-
- {isLoadingSLA && ( -
- -
- )} +
Stock
+
+ {!product.variants[0]?.sla && } {product?.variants[0].sla?.qty > 0 && ( {product?.variants[0].sla?.qty} )} @@ -366,9 +337,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
)} +
1 ? '' : 'bg-gray_r-4'} `}> -
Berat Barang
-
+
Berat Barang
+
{product?.weight > 0 && {product?.weight} KG} {product?.weight == 0 && ( { const router = useRouter() @@ -149,16 +150,16 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })

{product?.name}

-
Nomor SKU
-
SKU-{product.id}
+
Nomor SKU
+
SKU-{product.id}
-
Part Number
-
{product.code || '-'}
+
Part Number
+
{product.code || '-'}
-
Manufacture
-
+
Manufacture
+
{product.manufacture?.name ? (
+
-
Persiapan Barang
-
- {product.sla ? ( - product.sla?.slaDate != '-' ? ( - - ) : ( - '-' - ) - ) : ( - +
Persiapan Barang
+
+ {!product?.sla && } + {product?.sla && ( + + + {product?.sla?.slaDate} + + + )}
+
-
Stock
-
- {isLoadingSLA && ( -
- -
- )} +
Stock
+
-
Berat Barang
-
+
Berat Barang
+ - ): ( + ) : ( '-' )} diff --git a/src/lib/product/components/ProductFilterDesktop.jsx b/src/lib/product/components/ProductFilterDesktop.jsx index ce6c12ed..b64349c7 100644 --- a/src/lib/product/components/ProductFilterDesktop.jsx +++ b/src/lib/product/components/ProductFilterDesktop.jsx @@ -2,7 +2,21 @@ import { useRouter } from 'next/router' import { useState } from 'react' import _ from 'lodash' import { toQuery } from 'lodash-contrib' -import { Accordion, Checkbox, Label, TextInput } from 'flowbite-react' +import { + Accordion, + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Box, + Button, + Checkbox, + Input, + InputGroup, + InputLeftAddon, + Stack, + VStack +} from '@chakra-ui/react' const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = null }) => { const router = useRouter() @@ -13,7 +27,7 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu const [priceFrom, setPriceFrom] = useState(query?.priceFrom) const [priceTo, setPriceTo] = useState(query?.priceTo) - const handleCategorysChange = (event) => { + const handleCategoriesChange = (event) => { const value = event.target.value const isChecked = event.target.checked if (isChecked) { @@ -48,80 +62,95 @@ const ProductFilterDesktop = ({ brands, categories, prefixUrl, defaultBrand = nu return ( <> - - - Kategori - -
+ + + + + Brand + + + + + + + {brands.map((brand, index) => ( +
+ + {brand} + +
+ ))} + + + + + + + + Kategori + + + + + + {categories.map((category, index) => (
- +
))} -
- - - - {!defaultBrand && ( - <> - Brand - -
- {brands.map((brand, index) => ( -
- - -
- ))} -
- - - )} - - - Harga - -
- setPriceFrom(e.target.value)} - /> -
-
- setPriceTo(e.target.value)} - /> -
- - + + + + + + + + Harga + + + + + + + + Rp + setPriceFrom(e.target.value)} + /> + + + Rp + setPriceTo(e.target.value)} + /> + + + + -
- -
+ + ) } diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index ae9618d2..df9aa91b 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -39,9 +39,11 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { const oddIndexSuggestions = response.data.spellcheck.suggestions.filter( (_, index) => index % 2 === 1 ) + const oddIndexCollations = response.data.spellcheck.collations.filter( (_, index) => index % 2 === 1 ) + const dataSpellings = oddIndexSuggestions.reduce((acc, curr) => { oddIndexCollations.forEach((collation) => { acc.push(collation.collationQuery) @@ -52,7 +54,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { return acc }, []) - setQ(dataSpellings[0]) + if (dataSpellings.length > 0) { + setQ(dataSpellings[0]) + } setSpellings(dataSpellings) }) @@ -183,7 +187,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { defaultBrand={defaultBrand} />
-
+

Hasil Pencarian

-- cgit v1.2.3