diff options
Diffstat (limited to 'src/lib/quotation/components/Quotationheader.jsx')
| -rw-r--r-- | src/lib/quotation/components/Quotationheader.jsx | 265 |
1 files changed, 0 insertions, 265 deletions
diff --git a/src/lib/quotation/components/Quotationheader.jsx b/src/lib/quotation/components/Quotationheader.jsx deleted file mode 100644 index 4529c977..00000000 --- a/src/lib/quotation/components/Quotationheader.jsx +++ /dev/null @@ -1,265 +0,0 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; -import { createSlug } from '@/core/utils/slug'; -import useAuth from '@/core/hooks/useAuth'; -import { useRouter } from 'next/router'; -import odooApi from '@/core/api/odooApi'; -import { useProductCartContext } from '@/contexts/ProductCartContext'; -import Image from '@/core/components/elements/Image/Image'; -import whatsappUrl from '@/core/utils/whatsappUrl'; -import { AnimatePresence, motion } from 'framer-motion'; -import style from '../../../../src-migrate/modules/cart/styles/item-promo.module.css'; -import useTransactions from '../../transaction/hooks/useTransactions'; -import currencyFormat from '@/core/utils/currencyFormat'; -const { DocumentCheckIcon, PhotoIcon } = require('@heroicons/react/24/outline'); -const { default: Link } = require('next/link'); - -const Quotationheader = (quotationCount) => { - const auth = useAuth(); - const query = { - context: 'quotation', - site: auth?.webRole === null && auth?.site ? auth.site : null, - }; - - const router = useRouter(); - const [subTotal, setSubTotal] = useState(null); - const [buttonLoading, SetButtonTerapkan] = useState(false); - const itemLoading = [1, 2, 3]; - const [countQuotation, setCountQuotation] = useState(null); - const { productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading, productQuotation, setProductQuotation } = - useProductCartContext(); - - const [isHovered, setIsHovered] = useState(false); - const [isTop, setIsTop] = useState(true); - - const qotation = useMemo(() => { - return productQuotation || []; - }, [productQuotation]); - - const handleMouseEnter = () => { - setIsHovered(true); - getCart(); - }; - - const handleMouseLeave = () => { - setIsHovered(false); - }; - - const getCart = () => { - if (!productQuotation && auth) { - refreshCartf(); - } - }; - let { transactions } = useTransactions({ query }); - - const refreshCartf = useCallback(async () => { - setIsloading(true); - let pendingTransactions = transactions?.data?.saleOrders.filter(transaction => transaction.status === 'draft'); - setProductQuotation(pendingTransactions); - setCountQuotation(pendingTransactions?.length ? pendingTransactions?.length : pendingTransactions?.length); - setIsloading(false); - }, [setProductQuotation, setIsloading]); - - useEffect(() => { - if (!qotation) return - - let calculateTotalDiscountAmount = 0 - for (const product of qotation) { - // if (qotation.quantity == '') continue - calculateTotalDiscountAmount += product.amountUntaxed - } - let subTotal = calculateTotalDiscountAmount - setSubTotal(subTotal) - }, [qotation]) - - useEffect(() => { - if (refreshCart) { - refreshCartf(); - } - setRefreshCart(false); - }, [ refreshCartf, setRefreshCart]); - - useEffect(() => { - setCountQuotation(quotationCount.quotationCount); - setProductQuotation(quotationCount.data); - }, [quotationCount]); - - useEffect(() => { - const handleScroll = () => { - setIsTop(window.scrollY === 0); - }; - window.addEventListener('scroll', handleScroll); - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); - - const handleCheckout = async () => { - SetButtonTerapkan(true); - let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`); - router.push('/my/quotations'); - }; - - return ( - <div className='relative group'> - <div> - <Link - href='/my/quotations' - target='_blank' - rel='noreferrer' - className='flex items-center gap-x-2 !text-gray_r-12/80' - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - > - <div className={`relative ${countQuotation > 0 && 'mr-2'}`}> - <DocumentCheckIcon className='w-7' /> - {countQuotation > 0 && ( - <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> - {countQuotation} - </span> - )} - </div> - <span> - List - <br /> - Quotation - </span> - </Link> - </div> - <AnimatePresence> - {isHovered && ( - <> - <motion.div - initial={{ opacity: 0 }} - animate={{ opacity: 1, top: isTop ? 230 : 155 }} - exit={{ opacity: 0 }} - transition={{ duration: 0.15, top: { duration: 0.3 } }} - className={`fixed left-0 w-full h-full bg-black/50 z-10`} - /> - <motion.div - initial={{ opacity: 0 }} - animate={{ opacity: 1, transition: { duration: 0.2 } }} - exit={{ opacity: 0, transition: { duration: 0.3 } }} - className='absolute z-10 left-0 w-96' - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - > - <motion.div - initial={{ height: 0 }} - animate={{ height: 'auto' }} - exit={{ height: 0 }} - className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden' - > - <div className='p-2 flex justify-between items-center'> - <h5 className='text-base font-semibold leading-none'>Daftar Quotation</h5> - </div> - <hr className='mt-3 mb-3 border border-gray-100' /> - <div className='flow-root max-h-[250px] overflow-y-auto'> - {!auth && ( - <div className='justify-center p-4'> - <p className='text-gray-500 text-center '> - Silahkan{' '} - <Link href='/login' className='text-red-600 underline leading-6'> - Login - </Link>{' '} - Untuk Melihat Daftar Quotation Anda - </p> - </div> - )} - {isLoading && - itemLoading.map((item) => ( - <div key={item} role='status' className='max-w-sm animate-pulse'> - <div className='flex items-center space-x-4 mb- 2'> - <div className='flex-shrink-0'> - <PhotoIcon className='h-16 w-16 text-gray-500' /> - </div> - <div className='flex-1 min-w-0'> - <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div> - <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div> - <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div> - </div> - </div> - </div> - ))} - {auth && qotation.length === 0 && !isLoading && ( - <div className='justify-center p-4'> - <p className='text-gray-500 text-center '> - Tidak Ada Quotation - </p> - </div> - )} - {auth && qotation.length > 0 && !isLoading && ( - <> - <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'> - {qotation && - qotation?.map((product, index) => ( - <> - <li className='py-1 sm:py-2'> - <div className='flex justify-between border p-2 flex-col gap-y-2 hover:border-red-500'> - <Link - href={`/my/quotations/${product?.id}`} - className='hover:border-red-500' - > - <div className='flex justify-between mb-2'> - <div className='flex flex-row items-center'> - <p className='tanggal text-xs opacity-80 mr-[2px]'>Sales : </p> - <p className='tanggal text-xs text-red-500 font-semibold'>{product.sales}</p> - </div> - <div className='flex flex-row items-center'> - <p className='text-xs opacity-80 mr-[2px]'>Status :</p> - <p className='badge-red h-fit text-xs whitespace-nowrap'>Pending Quotation</p> - </div> - </div> - <div className='flex justify-between mb-2'> - <div className='flex flex-col items-start'> - <p className=' text-xs opacity-80 mr-[2px]'>No. Transaksi</p> - <p className=' text-sm text-red-500 font-semibold'> {product.name}</p> - </div> - <div className='flex flex-col items-end'> - <p className='text-xs opacity-80 mr-[2px]'>No. Purchase Order</p> - <p className='font-semibold text-sm text-red-500'> {product.purchaseOrderName ? product.purchaseOrderName : '-'}</p> - </div> - </div> - {/* <div className='my-0.5 h-0.5 bg-gray-200'></div> */} - <hr className='mt-3 mb-3 border border-gray-100' /> - <div className='bagian bawah flex justify-between mt-2'> - <p className='font-semibold text-sm'>Total</p> - <p className='font-semibold text-sm'>{currencyFormat(product.amountUntaxed)}</p> - </div> - </Link> - </div> - </li> - </> - ))} - </ul> - <hr /> - </> - )} - </div> - {auth && qotation.length > 0 && !isLoading && ( - <> - <div className='mt-3 ml-1'> - <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span> - <span className='font-semibold text-red-600'>{currencyFormat(subTotal)}</span> - </div> - <div className='mt-5 mb-2'> - <button - type='button' - className='btn-solid-red rounded-lg w-full' - onClick={handleCheckout} - disabled={buttonLoading} - > - {buttonLoading ? 'Loading...' : 'Lihat Semua'} - </button> - </div> - </> - )} - </motion.div> - </motion.div> - </> - )} - </AnimatePresence> - </div> - ); -}; - -export default Quotationheader; |