From 1d606fe88f97f87e32a58b1b187a71f40c70169c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 29 Mar 2023 14:29:29 +0700
Subject: blog detail

---
 src/lib/auth/components/IsAuth.jsx                 |  4 +-
 src/lib/auth/hooks/useLogin.js                     |  2 +-
 src/lib/blog/api/blogApi.js                        |  8 ++++
 src/lib/blog/api/blogsApi.js                       |  8 ++++
 src/lib/blog/hooks/useBlog.js                      | 11 +++++
 src/lib/blog/hooks/useBlogs.js                     | 13 ++++++
 src/lib/brand/components/Brand.jsx                 |  2 +-
 src/lib/checkout/email/FinishCheckoutEmail.jsx     | 15 +++---
 src/lib/home/components/HeroBanner.jsx             | 54 +++++++++++++---------
 .../product/components/Product/ProductDesktop.jsx  | 22 +++++----
 10 files changed, 95 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/blog/api/blogApi.js
 create mode 100644 src/lib/blog/api/blogsApi.js
 create mode 100644 src/lib/blog/hooks/useBlog.js
 create mode 100644 src/lib/blog/hooks/useBlogs.js

(limited to 'src/lib')

diff --git a/src/lib/auth/components/IsAuth.jsx b/src/lib/auth/components/IsAuth.jsx
index 1cfd3172..a32e648c 100644
--- a/src/lib/auth/components/IsAuth.jsx
+++ b/src/lib/auth/components/IsAuth.jsx
@@ -7,8 +7,8 @@ const IsAuth = ({ children }) => {
   const [response, setResponse] = useState(<></>)
 
   useEffect(() => {
-    if (!getAuth()) {
-      router.replace('/login')
+    if (!getAuth() && router.pathname != '/login') {
+      router.replace(`/login?next=${router.asPath}`)
     } else {
       setResponse(children)
     }
diff --git a/src/lib/auth/hooks/useLogin.js b/src/lib/auth/hooks/useLogin.js
index bef36053..1d5ff43d 100644
--- a/src/lib/auth/hooks/useLogin.js
+++ b/src/lib/auth/hooks/useLogin.js
@@ -34,7 +34,7 @@ const useLogin = () => {
 
     if (login.isAuth) {
       setAuth(login.user)
-      router.push('/')
+      router.push(router.query?.next || '/')
       return
     }
     switch (login.reason) {
diff --git a/src/lib/blog/api/blogApi.js b/src/lib/blog/api/blogApi.js
new file mode 100644
index 00000000..e38c9cd5
--- /dev/null
+++ b/src/lib/blog/api/blogApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const blogApi = async ({ id }) => {
+  const dataBlog = await odooApi('GET', `/api/v1/blog/${id}`)
+  return dataBlog
+}
+
+export default blogApi
diff --git a/src/lib/blog/api/blogsApi.js b/src/lib/blog/api/blogsApi.js
new file mode 100644
index 00000000..8943c61e
--- /dev/null
+++ b/src/lib/blog/api/blogsApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const blogsApi = async ({ limit, offset }) => {
+  const dataBlogs = await odooApi('GET', `/api/v1/blog?limit=${limit}&offset=${offset}`)
+  return dataBlogs
+}
+
+export default blogsApi
diff --git a/src/lib/blog/hooks/useBlog.js b/src/lib/blog/hooks/useBlog.js
new file mode 100644
index 00000000..bc01be7f
--- /dev/null
+++ b/src/lib/blog/hooks/useBlog.js
@@ -0,0 +1,11 @@
+import { useQuery } from 'react-query'
+import blogApi from '../api/blogApi'
+
+const useBlog = ({ id }) => {
+  const fetchBlog = async () => await blogApi({ id })
+  const blog = useQuery(`blog-${id}`, fetchBlog)
+
+  return { blog }
+}
+
+export default useBlog
diff --git a/src/lib/blog/hooks/useBlogs.js b/src/lib/blog/hooks/useBlogs.js
new file mode 100644
index 00000000..edcea020
--- /dev/null
+++ b/src/lib/blog/hooks/useBlogs.js
@@ -0,0 +1,13 @@
+import { useQuery } from 'react-query'
+import blogsApi from '../api/blogsApi'
+
+const useBlogs = ({ limit, offset }) => {
+  const fetchBlogs = async () => await blogsApi({ limit, offset })
+  const blogs = useQuery(`blogs-${limit}-${offset}`, fetchBlogs, {
+    refetchOnWindowFocus: false
+  })
+
+  return { blogs }
+}
+
+export default useBlogs
diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index db4e81da..6e156b8e 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -27,7 +27,7 @@ const Brand = ({ id }) => {
     <>
       <MobileView>
         <>
-          <div className='min-h-[150px]'>
+          <div>
             {brand.isLoading && <ImageSkeleton />}
             {brand.data && (
               <>
diff --git a/src/lib/checkout/email/FinishCheckoutEmail.jsx b/src/lib/checkout/email/FinishCheckoutEmail.jsx
index 2c31b815..e8f63afa 100644
--- a/src/lib/checkout/email/FinishCheckoutEmail.jsx
+++ b/src/lib/checkout/email/FinishCheckoutEmail.jsx
@@ -160,15 +160,9 @@ const FinishCheckoutEmail = ({ transaction, payment, statusPayment }) => {
               <Hr style={style.hr} />
 
               {transaction.products.map((product) => (
-                <Row
-                  style={style.productRow}
-                  key={product.id}
-                >
+                <Row style={style.productRow} key={product.id}>
                   <Column style={style.productLCol}>
-                    <Img
-                      src={product.parent.image}
-                      width='100%'
-                    />
+                    <Img src={product.parent.image} width='100%' />
                   </Column>
                   <Column style={style.productRCol}>
                     <Text style={style.productName}>{product.name}</Text>
@@ -261,7 +255,10 @@ const FinishCheckoutEmail = ({ transaction, payment, statusPayment }) => {
                 Jika ada pertanyaan seputar teknis pembayaran {transaction.address.customer.name}{' '}
                 dapat hubungi kami melalui Email{' '}
                 <a href='mailto:sales@indoteknik.com'>(sales@indoteknik.com)</a> atau Whatsapp{' '}
-                <a href='https://wa.me/628128080622'>(+62 812-8080-622)</a>.
+                <a href='https://wa.me/628128080622' target='_blank' rel='noreferrer'>
+                  (+62 812-8080-622)
+                </a>
+                .
               </Text>
               <Text style={style.text}>
                 Terima kasih atas perhatiannya, selamat kembali beraktifitas
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
index 95f590fc..e6136e03 100644
--- a/src/lib/home/components/HeroBanner.jsx
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -8,14 +8,23 @@ import { Pagination, Autoplay } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/autoplay'
-import useDevice from '@/core/hooks/useDevice'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
 
 const HeroBanner = () => {
-  const { isMobile } = useDevice()
   const { heroBanners } = useHeroBanner()
 
-  const swiperBanner = {
-    pagination: { dynamicBullets: isMobile ? true : false, clickable: true },
+  const swiperBannerMobile = {
+    pagination: { dynamicBullets: true, clickable: true },
+    autoplay: {
+      delay: 6000,
+      disableOnInteraction: false
+    },
+    modules: [Pagination, Autoplay]
+  }
+
+  const swiperBannerDesktop = {
+    pagination: { dynamicBullets: false, clickable: true },
     autoplay: {
       delay: 6000,
       disableOnInteraction: false
@@ -27,23 +36,26 @@ const HeroBanner = () => {
     <div className='min-h-[200px]'>
       {heroBanners.isLoading && <ImageSkeleton />}
       {!heroBanners.isLoading && (
-        <Swiper
-          slidesPerView={1}
-          pagination={swiperBanner.pagination}
-          modules={swiperBanner.modules}
-          autoplay={swiperBanner.autoplay}
-          className='border border-gray_r-6'
-        >
-          {heroBanners.data?.map((banner, index) => (
-            <SwiperSlide key={index}>
-              <Image
-                src={banner.image}
-                alt={banner.name}
-                className='w-full h-auto'
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
+        <>
+          <MobileView>
+            <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerMobile}>
+              {heroBanners.data?.map((banner, index) => (
+                <SwiperSlide key={index}>
+                  <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </MobileView>
+          <DesktopView>
+            <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerDesktop}>
+              {heroBanners.data?.map((banner, index) => (
+                <SwiperSlide key={index}>
+                  <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </DesktopView>
+        </>
       )}
     </div>
   )
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 2f0ac488..0866bffa 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -276,20 +276,22 @@ const VariantPrice = ({ id }) => {
 
   return (
     <>
-      {variantPrice?.data?.discount > 0 && (
+      {variantPrice?.data?.discount > 0 && variantPrice?.data?.priceExcludeAfterDiscount > 0 && (
         <>
-          <span className='line-through text-caption-1 text-gray_r-11'>
+          <div className='line-through text-caption-1 text-gray_r-11 mb-1'>
             {currencyFormat(variantPrice?.data?.priceExclude)}
-          </span>{' '}
+          </div>{' '}
         </>
       )}
-      {variantPrice?.data?.priceExcludeAfterDiscount > 0 ? (
-        currencyFormat(variantPrice?.data?.priceExcludeAfterDiscount)
-      ) : (
-        <a href='https://wa.me/' className='text-red_r-11'>
-          Call for price
-        </a>
-      )}
+      <div>
+        {variantPrice?.data?.priceExcludeAfterDiscount > 0 ? (
+          currencyFormat(variantPrice?.data?.priceExcludeAfterDiscount)
+        ) : (
+          <a href='https://wa.me/' className='text-red_r-11'>
+            Call for price
+          </a>
+        )}
+      </div>
     </>
   )
 }
-- 
cgit v1.2.3