<Miqdad> move price in cart

1 files changed, 83 insertions, 56 deletions

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
index 86d1dc43..a3aa2ac2 100644
--- a/src-migrate/modules/cart/components/Item.tsx
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -1,28 +1,28 @@
-import style from '../styles/item.module.css'
+import style from '../styles/item.module.css';
 import odooApi from '~/libs/odooApi';
 import { useEffect, useState } from 'react';
-import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react'
-import { InfoIcon } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
+import { Skeleton, SkeletonProps, Tooltip } from '@chakra-ui/react';
+import { InfoIcon } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
 
-import { PROMO_CATEGORY } from '~/constants/promotion'
-import formatCurrency from '~/libs/formatCurrency'
-import { createSlug } from '~/libs/slug'
-import { CartItem as CartItemProps } from '~/types/cart'
+import { PROMO_CATEGORY } from '~/constants/promotion';
+import formatCurrency from '~/libs/formatCurrency';
+import { createSlug } from '~/libs/slug';
+import { CartItem as CartItemProps } from '~/types/cart';
 
-import CartItemAction from './ItemAction'
-import CartItemPromo from './ItemPromo'
-import CartItemSelect from './ItemSelect'
+import CartItemAction from './ItemAction';
+import CartItemPromo from './ItemPromo';
+import CartItemSelect from './ItemSelect';
 
 type Props = {
-  item: CartItemProps
-  editable?: boolean
-  selfPicking?: boolean
-  pilihSemuaCart?: boolean 
-}
+  item: CartItemProps;
+  editable?: boolean;
+  selfPicking?: boolean;
+  pilihSemuaCart?: boolean;
+};
 
-const CartItem = ({ item, editable = true, selfPicking}: Props) => {
+const CartItem = ({ item, editable = true, selfPicking }: Props) => {
   const [qtyPickUp, setQtyPickUp] = useState(0);
   useEffect(() => {
     const fetchData = async () => {
@@ -36,10 +36,16 @@ const CartItem = ({ item, editable = true, selfPicking}: Props) => {
   }, [item]);
   return (
     <div className={style.wrapper}>
-      {item.cart_type === 'promotion' && (  
+      {item.cart_type === 'promotion' && (
         <div className={style.header}>
           {item.promotion_type?.value && (
-            <Tooltip label={PROMO_CATEGORY[item.promotion_type?.value].description} placement="top" bgColor='red.600' p={2} rounded={6}>
+            <Tooltip
+              label={PROMO_CATEGORY[item.promotion_type?.value].description}
+              placement='top'
+              bgColor='red.600'
+              p={2}
+              rounded={6}
+            >
               <div className={style.badgeType}>
                 Paket {PROMO_CATEGORY[item.promotion_type?.value].alias}
                 <InfoIcon size={14} />
@@ -79,27 +85,28 @@ const CartItem = ({ item, editable = true, selfPicking}: Props) => {
             <div className='flex flex-col gap-y-1'>
               {item.cart_type === 'promotion' && (
                 <div className={style.discPriceSection}>
-                  <span className={style.priceBefore}>
-                    Rp {formatCurrency((item.package_price || 0))}
-                  </span>
                   <span className={style.price}>
                     Rp {formatCurrency(item.price.price)}
                   </span>
+                  <span className={style.priceBefore}>
+                    Rp {formatCurrency(item.package_price || 0)}
+                  </span>
                 </div>
               )}
 
               {item.cart_type === 'product' && (
                 <div className={style.discPriceSection}>
+                  <div className={style.price}>
+                    {item.price.price_discount > 0 &&
+                      `Rp ${formatCurrency(item.price.price_discount)}`}
+                    {item.price.price_discount === 0 && '-'}
+                  </div>
+
                   {item.price.discount_percentage > 0 && (
                     <span className={style.priceBefore}>
-                      Rp {formatCurrency((item.price.price || 0))}
+                      Rp {formatCurrency(item.price.price || 0)}
                     </span>
                   )}
-
-                  <div className={style.price}>
-                    {item.price.price_discount > 0 && `Rp ${formatCurrency(item.price.price_discount)}`}
-                    {item.price.price_discount === 0 && '-'}
-                  </div>
                 </div>
               )}
 
@@ -113,39 +120,58 @@ const CartItem = ({ item, editable = true, selfPicking}: Props) => {
         </div>
       </div>
 
-      <div className="flex flex-col">
-        {item.products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
-        {item.free_products?.map((product) => <CartItemPromo key={product.id} product={product} />)}
+      <div className='flex flex-col'>
+        {item.products?.map((product) => (
+          <CartItemPromo key={product.id} product={product} />
+        ))}
+        {item.free_products?.map((product) => (
+          <CartItemPromo key={product.id} product={product} />
+        ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
 CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) {
-  const image = item?.image || item?.parent?.image
-  const imageProgram = item?.image_program ? item.image_program[0] : item?.parent?.image;
+  const image = item?.image || item?.parent?.image;
+  const imageProgram = item?.image_program
+    ? item.image_program[0]
+    : item?.parent?.image;
 
-  return (  
+  return (
     <>
       {item.cart_type === 'promotion' && (
         <div className={style.image}>
-          {imageProgram && <Image src={imageProgram} alt={item.name} width={128} height={128} />}
+          {imageProgram && (
+            <Image
+              src={imageProgram}
+              alt={item.name}
+              width={128}
+              height={128}
+            />
+          )}
           {!imageProgram && <div className={style.noImage}>No Image</div>}
         </div>
       )}
 
       {item.cart_type === 'product' && (
         <Link
-          href={createSlug('/shop/product/', item.parent.name, item.parent.id.toString())}
+          href={createSlug(
+            '/shop/product/',
+            item.parent.name,
+            item.parent.id.toString()
+          )}
           className={style.image}
         >
-          {image && <Image src={image} alt={item.name} width={128} height={128} />}
+          {image && (
+            <Image src={image} alt={item.name} width={128} height={128} />
+          )}
           {!image && <div className={style.noImage}>No Image</div>}
         </Link>
       )}
     </>
-  )
-}
+  );
+};
 
 CartItem.Name = function CartItemName({ item }: { item: CartItemProps }) {
   return (
@@ -156,25 +182,26 @@ CartItem.Name = function CartItemName({ item }: { item: CartItemProps }) {
 
       {item.cart_type === 'product' && (
         <Link
-          href={createSlug('/shop/product/', item.parent.name, item.parent.id.toString())}
+          href={createSlug(
+            '/shop/product/',
+            item.parent.name,
+            item.parent.id.toString()
+          )}
           className={style.name}
         >
           {item.name}
         </Link>
       )}
     </>
-  )
-}
+  );
+};
 
-CartItem.Skeleton = function CartItemSkeleton(props: SkeletonProps & { count: number }) {
+CartItem.Skeleton = function CartItemSkeleton(
+  props: SkeletonProps & { count: number }
+) {
   return Array.from({ length: props.count }).map((_, index) => (
-    <Skeleton key={index}
-      height='100px'
-      width='100%'
-      rounded='md'
-      {...props}
-    />
-  ))
-}
-
-export default CartItem
+    <Skeleton key={index} height='100px' width='100%' rounded='md' {...props} />
+  ));
+};
+
+export default CartItem;