diff options
6 files changed, 55 insertions, 31 deletions
diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx index 5e1ea186..d1f1e852 100644 --- a/src-migrate/modules/product-detail/components/Information.tsx +++ b/src-migrate/modules/product-detail/components/Information.tsx @@ -11,7 +11,7 @@ import Link from 'next/link'; import { useEffect, useRef, useState } from 'react'; import currencyFormat from '@/core/utils/currencyFormat'; -import { InputGroup, InputRightElement } from '@chakra-ui/react'; +import { InputGroup, InputRightElement, Spinner } from '@chakra-ui/react'; import { ChevronDownIcon } from '@heroicons/react/24/outline'; import Image from 'next/image'; import { formatToShortText } from '~/libs/formatNumber'; @@ -19,6 +19,7 @@ import { createSlug } from '~/libs/slug'; import { getVariantSLA } from '~/services/productVariant'; import { IProductDetail } from '~/types/product'; import { useProductDetail } from '../stores/useProductDetail'; +import useVariant from '../hook/useVariant'; const Skeleton = dynamic(() => import('@chakra-ui/react').then((mod) => mod.Skeleton) @@ -41,6 +42,9 @@ const Information = ({ product }: Props) => { const [variantOptions, setVariantOptions] = useState<any[]>( product?.variants ); + const variantId = selectedVariant?.id; + const { slaVariant, isLoading } = useVariant({ variantId }); + // let variantOptions = product?.variants; // const querySLA = useQuery<IProductVariantSLA>({ @@ -50,14 +54,8 @@ const Information = ({ product }: Props) => { // }); // const sla = querySLA?.data; - const getsla = async () => { - const querySLA = await getVariantSLA(selectedVariant?.id); - setSla(querySLA); - }; - useEffect(() => { if (selectedVariant) { - getsla(); setInputValue( selectedVariant?.code + (selectedVariant?.attributes[0] @@ -67,6 +65,12 @@ const Information = ({ product }: Props) => { } }, [selectedVariant]); + useEffect(() => { + if (slaVariant) { + setSla(slaVariant); + } + }, [slaVariant]); + const handleOnChange = (vals: any) => { setDisableFilter(true); let code = vals.replace(/\s-\s.*$/, '').trim(); @@ -223,7 +227,12 @@ const Information = ({ product }: Props) => { </div> <div className={style['row']}> <div className={style['label']}>Persiapan Barang</div> - <div className={style['value']}>{sla?.sla_date}</div> + {isLoading && ( + <div className={style['value']}> + <Skeleton height={5} width={100} /> + </div> + )} + {!isLoading && <div className={style['value']}>{sla?.sla_date}</div>} </div> </div> ); diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 4667e086..1581f33d 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -42,6 +42,7 @@ const ProductDetail = ({ product }: Props) => { setIsApproval, isApproval, setSelectedVariant, + setSla, } = useProductDetail(); useEffect(() => { diff --git a/src-migrate/modules/product-detail/hook/useVariant.ts b/src-migrate/modules/product-detail/hook/useVariant.ts new file mode 100644 index 00000000..18451f7e --- /dev/null +++ b/src-migrate/modules/product-detail/hook/useVariant.ts @@ -0,0 +1,18 @@ +import { useQuery } from "react-query" +import { number } from "zod" +import { getVariantById, getVariantSLA } from "~/services/productVariant" + +interface Props { + variantId : number +} +const useVariant = ({variantId}:Props) => { + const fetchVariant = async () => await getVariantSLA(variantId ) + const {data, isLoading, refetch} = useQuery(variantId ? `variant-${variantId}` : '', fetchVariant, + { + enabled: !!variantId, + }) + + return {slaVariant: data, isLoading, refetch} +} + +export default useVariant
\ No newline at end of file diff --git a/src/lib/checkout/components/SectionExpedition.jsx b/src/lib/checkout/components/SectionExpedition.jsx index 22d8df32..b017c82e 100644 --- a/src/lib/checkout/components/SectionExpedition.jsx +++ b/src/lib/checkout/components/SectionExpedition.jsx @@ -29,7 +29,7 @@ function reverseMappingCourier(couriersOdoo, couriers, includeInstant = false) { // Buat peta courier berdasarkan nama courier dari couriers const courierMap = couriers.reduce((acc, item) => { const { courier_name, courier_code, courier_service_code } = item; - const key = courier_name.toLowerCase(); + const key = courier_code.toLowerCase(); if ( !includeInstant && @@ -165,14 +165,11 @@ function mappingCourier(couriersOdoo, couriers, notIncludeInstant = false) { export default function SectionExpedition({ products }) { const { addressMaps, coordinate, postalCode } = useAddress(); - const { control, handleSubmit } = useForm(); const [serviceOptions, setServiceOptions] = useState([]); const [isOpen, setIsOpen] = useState(false); - const [selectedE, setIsOpenCourier] = useState(false); const [onFocusSelectedCourier, setOnFocuseSelectedCourier] = useState(false); const [couriers, setCouriers] = useState(null); const [slaProducts, setSlaProducts] = useState(null); - const [addHolidays, setAddHolidays] = useState(0); const [savedServiceOptions, setSavedServiceOptions] = useState([]); const { @@ -270,8 +267,8 @@ export default function SectionExpedition({ products }) { ); useEffect(() => { + const instant = slaProducts?.includeInstant || false; if (data) { - const instant = slaProducts?.includeInstant || false; const couriers = reverseMappingCourier( listExpedisi, data?.data?.pricing, @@ -279,7 +276,7 @@ export default function SectionExpedition({ products }) { ); setCouriers(couriers); } - }, [data]); + }, [data, slaProducts]); const onCourierChange = (code) => { setIsOpen(false); @@ -315,11 +312,6 @@ export default function SectionExpedition({ products }) { } }; - const onSubmit = (data) => { - 1; - console.log(data); - }; - const handleOnFocuse = (value) => { setOnFocuseSelectedCourier(!value); setIsOpen(false); @@ -340,7 +332,7 @@ export default function SectionExpedition({ products }) { }, [serviceOptions]); return ( - <form onSubmit={handleSubmit(onSubmit)}> + <form > <div className='px-4 py-2'> <div className='flex justify-between items-center'> <div className='font-medium'>Pilih Ekspedisi: </div> diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index 3853ea79..867de577 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -283,8 +283,6 @@ const Transaction = ({ id }) => { } }; - console.log('ini transaction', transaction.data); - return ( transaction.data?.name && ( <> @@ -764,13 +762,19 @@ const Transaction = ({ id }) => { key={airway?.id} className='border border-gray_r-6 rounded p-3' > - <InformationSection - manifests={airway} - source='transaction' - /> + <InformationSection manifests={airway} /> <div className='p-4'> - <button className='bg-transparent text-red-600 hover:underline p-0 font-semibold' onClick={() => setIdAWB(airway?.id)}> - Lacak Pegiriman + <button + className='bg-transparent text-red-600 hover:underline p-0 font-semibold' + onClick={() => { + if (airway?.waybillNumber == '-') { + toast.error('Nomor Resi belum tersedia'); + return; + } + setIdAWB(airway.id); + }} + > + Lacak Pengiriman </button> </div> </div> diff --git a/src/lib/treckingAwb/component/InformationSection.jsx b/src/lib/treckingAwb/component/InformationSection.jsx index 87fb05f4..bb37d4ae 100644 --- a/src/lib/treckingAwb/component/InformationSection.jsx +++ b/src/lib/treckingAwb/component/InformationSection.jsx @@ -1,7 +1,7 @@ import { useState } from "react"; import toast from "react-hot-toast"; -const InformationSection = ({ manifests, source = "tracking" }) => { +const InformationSection = ({ manifests}) => { const [copied, setCopied] = useState(false); const handleCopyClick = () => { @@ -44,14 +44,14 @@ const InformationSection = ({ manifests, source = "tracking" }) => { <span>Kurir</span> <span className='font-semibold'> {' '} - : {manifests?.deliveryOrder.carrier} + : {manifests?.deliveryOrder?.carrier} </span> </div> <div className='grid grid-cols-[150px_auto]'> <span>Jenis Service</span> <span className='font-semibold'> {' '} - : {manifests?.deliveryOrder.service} + : {manifests?.deliveryOrder?.service} </span> </div> <div className='grid grid-cols-[150px_auto]'> |