<iman> update voucher default & coucher by id

1 files changed, 50 insertions, 17 deletions

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 64b6b935..729d957e 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -1,32 +1,65 @@
-import { useMemo } from 'react'
-import { useQuery } from 'react-query'
-import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'
-import { getVoucher } from '~/services/voucher'
-import style from '../styles/voucher.module.css'
-import Image from 'next/image'
-import { useToast } from '@chakra-ui/react'
+import { useMemo, useState, useEffect } from 'react';
+import { useQuery } from 'react-query';
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+import { getVoucherAll } from '~/services/voucher';
+import style from '../styles/voucher.module.css';
+import Image from 'next/image';
+import { useToast } from '@chakra-ui/react';
 import useDevice from '@/core/hooks/useDevice';
+import useAuth from '@/core/hooks/useAuth';
+import { getVoucher } from '../../../../src/lib/checkout/api/getVoucher';
 
-const Voucher = () => {
+interface Auth {
+  id: string;
+}
+interface Voucher {
+  id: string;
+  image: string;
+  name: string;
+  description: string;
+  code: string;
+}
+
+const VoucherComponent = () => {
+  const [listVouchers, setListVouchers] = useState<Voucher[] | null>(null);
+  const [loadingVoucher, setLoadingVoucher] = useState(true);
   const { isMobile } = useDevice();
+  const auth = useAuth() as unknown as Auth;
   const toast = useToast();
+
+  useEffect(() => {
+    if (!listVouchers && auth?.id) {
+      (async () => {
+        try {
+          const dataVoucher = await getVoucher(auth.id);
+          setListVouchers(dataVoucher);
+        } finally {
+          setLoadingVoucher(false);
+        }
+      })();
+    }
+  }, [auth?.id, listVouchers]);
+
   const voucherQuery = useQuery({
     queryKey: ['voucher.all-voucher'],
-    queryFn: getVoucher
-  })
-  
+    queryFn: getVoucherAll,
+  });
+
   const swiperVoucher: SwiperProps = {
     autoplay: {
       delay: 6000,
-      disableOnInteraction: false
+      disableOnInteraction: false,
     },
     loop: false,
     className: 'h-[160px] w-full',
     slidesPerView: isMobile ? 1.2 : 3,
-    spaceBetween: 16
-  }
+    spaceBetween: 16,
+  };
   
-  const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
+  const dataVouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
+
+  const vouchers = auth?.id? listVouchers : dataVouchers;
+
 
   const copyText = (text: string) => {
     if (navigator.clipboard && navigator.clipboard.writeText) {
@@ -98,7 +131,7 @@ const Voucher = () => {
       {!voucherQuery.isLoading && (
         <div className={style['voucher-section']}>
           <Swiper {...swiperVoucher}>
-            {vouchers.map((voucher) => (
+            {vouchers?.map((voucher) => (
               <SwiperSlide key={voucher.id} className='pb-2'>
                 <div className={style['voucher-card']}>
                   <Image src={voucher.image} alt={voucher.name} width={128} height={128} className={style['voucher-image']} />
@@ -124,4 +157,4 @@ const Voucher = () => {
   )
 }
 
-export default Voucher
+export default VoucherComponent