Update promotion program feature

2 files changed, 77 insertions, 62 deletions

diff --git a/src/pages/shop/cart.jsx b/src/pages/shop/cart.jsx
index 2da58c96..34cae86a 100644
--- a/src/pages/shop/cart.jsx
+++ b/src/pages/shop/cart.jsx
@@ -1,14 +1,14 @@
-import Seo from '@/core/components/Seo'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import DesktopView from '@/core/components/views/DesktopView'
-import MobileView from '@/core/components/views/MobileView'
-import IsAuth from '@/lib/auth/components/IsAuth'
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
+import Seo from '@/core/components/Seo';
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import IsAuth from '@/lib/auth/components/IsAuth';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
-const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout'))
-const CartComponent = dynamic(() => import('@/lib/cart/components/Cart'))
+const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout'));
+const CartDetail = dynamic(() => import('~/modules/cart/components/Detail'));
 
 export default function Cart() {
   return (
@@ -18,7 +18,9 @@ export default function Cart() {
       <IsAuth>
         <MobileView>
           <AppLayout title='Keranjang' withFooter={false}>
-            <CartComponent />
+            <div className='p-4'>
+              <CartDetail />
+            </div>
           </AppLayout>
         </MobileView>
 
@@ -27,20 +29,29 @@ export default function Cart() {
             <div className='container mx-auto py-4 md:py-6 pb-0'>
               <Breadcrumb>
                 <BreadcrumbItem>
-                  <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
+                  <BreadcrumbLink
+                    as={Link}
+                    href='/'
+                    className='!text-danger-500 whitespace-nowrap'
+                  >
                     Home
                   </BreadcrumbLink>
                 </BreadcrumbItem>
 
                 <BreadcrumbItem isCurrentPage>
-                  <BreadcrumbLink className='whitespace-nowrap'>Keranjang</BreadcrumbLink>
+                  <BreadcrumbLink className='whitespace-nowrap'>
+                    Keranjang
+                  </BreadcrumbLink>
                 </BreadcrumbItem>
               </Breadcrumb>
+
+              <div className='h-10' />
+
+              <CartDetail />
             </div>
-            <CartComponent />
           </BasicLayout>
         </DesktopView>
       </IsAuth>
     </>
-  )
+  );
 }
diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx
index d8366d3c..667373b4 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -1,79 +1,83 @@
-import Seo from '@/core/components/Seo'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
-import { getIdFromSlug } from '@/core/utils/slug'
-import productApi from '@/lib/product/api/productApi'
-import PageNotFound from '@/pages/404'
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
-import cookie from 'cookie'
-import axios from 'axios'
-import { useProductContext } from '@/contexts/ProductContext'
-import { useEffect } from 'react'
-import { updateItemCart } from '@/core/utils/cart'
+import Seo from '@/core/components/Seo';
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner';
+import { getIdFromSlug } from '@/core/utils/slug';
+import productApi from '@/lib/product/api/productApi';
+import PageNotFound from '@/pages/404';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import cookie from 'cookie';
+import axios from 'axios';
+import { useProductContext } from '@/contexts/ProductContext';
+import { useEffect } from 'react';
+import { updateItemCart } from '@/core/utils/cart';
 
-const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
-const Product = dynamic(() => import('@/lib/product/components/Product/Product'))
+const BasicLayout = dynamic(() =>
+  import('@/core/components/layouts/BasicLayout')
+);
+const Product = dynamic(() =>
+  import('@/lib/product/components/Product/Product')
+);
 
 export async function getServerSideProps(context) {
-  const { slug } = context.query
-  const cookies = context.req.headers.cookie
-  const cookieObj = cookies ? cookie.parse(cookies) : {}
-  const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {}
-  const tier = auth.pricelist ? auth.pricelist : false
-  const authToken = auth?.token || ''
+  const { slug } = context.query;
+  const cookies = context.req.headers.cookie;
+  const cookieObj = cookies ? cookie.parse(cookies) : {};
+  const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {};
+  const tier = auth.pricelist ? auth.pricelist : false;
 
   let response = await axios(
     `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` +
       getIdFromSlug(slug) +
       '&auth=' +
       tier
-  )
-  let product = response.data
+  );
+  let product = response.data;
   // let productSolr = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
   // let productSolr = null
   if (product?.length == 1) {
-    product = product[0]
+    product = product[0];
   } else {
-    product = null
+    product = null;
   }
 
   return {
-    props: { product }
-  }
+    props: { product },
+  };
 }
 
 export default function ProductDetail({ product }) {
-  const router = useRouter()
-  const { setProduct } = useProductContext()
+  const router = useRouter();
+  const { setProduct } = useProductContext();
 
   useEffect(() => {
     if (product) {
-      setProduct(product)
+      setProduct(product);
     }
-  }, [product, setProduct])
+  }, [product, setProduct]);
 
   useEffect(() => {
-    const { action, variantId, qty } = router.query
+    const { action, variantId, qty } = router.query;
     const addToCart = async () => {
       const data = {
         productId: variantId,
         quantity: qty,
         selected: true,
         programLineId: null,
-        source: action
-      }
-      console.log('data dr test', data)
-      await updateItemCart(data)
-      const redirectURL = action === 'buy' ? '/shop/checkout?source=buy' : '/shop/cart'
-      router.push(redirectURL)
-    }
+        source: action,
+      };
+
+      await updateItemCart(data);
+      const redirectURL =
+        action === 'buy' ? '/shop/checkout?source=buy' : '/shop/cart';
+      router.push(redirectURL);
+    };
 
     if (action && variantId && qty) {
-      addToCart()
+      addToCart();
     }
-  }, [router])
+  }, [router]);
 
-  if (!product) return <PageNotFound />
+  if (!product) return <PageNotFound />;
 
   return (
     <BasicLayout>
@@ -87,16 +91,16 @@ export default function ProductDetail({ product }) {
               url: product?.image,
               width: 800,
               height: 800,
-              alt: product?.name
-            }
+              alt: product?.name,
+            },
           ],
-          type: 'product'
+          type: 'product',
         }}
         additionalMetaTags={[
           {
             name: 'keywords',
-            content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`
-          }
+            content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`,
+          },
         ]}
       />
       {!product && (
@@ -106,5 +110,5 @@ export default function ProductDetail({ product }) {
       )}
       {product && <Product product={product} />}
     </BasicLayout>
-  )
+  );
 }