Merge branch 'release' into development

# Conflicts:
#	src/pages/shop/product/variant/[slug].jsx

1 files changed, 156 insertions, 0 deletions

diff --git a/src-migrate/modules/cart/components/Item.tsx b/src-migrate/modules/cart/components/Item.tsx
new file mode 100644
index 00000000..6ded6373
--- /dev/null
+++ b/src-migrate/modules/cart/components/Item.tsx
@@ -0,0 +1,156 @@
+import style from '../styles/item.module.css'
+
+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 CartItemAction from './ItemAction'
+import CartItemPromo from './ItemPromo'
+import CartItemSelect from './ItemSelect'
+
+type Props = {
+  item: CartItemProps
+  editable?: boolean
+}
+
+const CartItem = ({ item, editable = true }: Props) => {
+  return (
+    <div className={style.wrapper}>
+      {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}>
+              <div className={style.badgeType}>
+                Paket {PROMO_CATEGORY[item.promotion_type?.value].alias}
+                <InfoIcon size={14} />
+              </div>
+            </Tooltip>
+          )}
+          <div className='w-2' />
+          <div>
+            Selamat! Pembelian anda lebih hemat {' '}
+            <span className={style.savingAmt}>
+              Rp{formatCurrency((item.package_price || 0) * item.quantity - item.subtotal)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className={style.mainProdWrapper}>
+        {editable && <CartItemSelect item={item} />}
+        <div className='w-4' />
+
+        <CartItem.Image item={item} />
+
+        <div className={style.details}>
+          <CartItem.Name item={item} />
+
+          <div className='mt-2 flex justify-between w-full'>
+            <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>
+                </div>
+              )}
+
+              {item.cart_type === 'product' && (
+                <div className={style.discPriceSection}>
+                  {item.price.discount_percentage > 0 && (
+                    <span className={style.priceBefore}>
+                      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>
+              )}
+
+              <div>{item.cart_type === 'product' && item.code}</div>
+              <div>{Math.round(item.weight * 10) / 10} Kg</div>
+            </div>
+
+            {editable && <CartItemAction item={item} />}
+            {!editable && <div className={style.quantity}>{item.quantity}</div>}
+          </div>
+        </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>
+    </div>
+  )
+}
+
+CartItem.Image = function CartItemImage({ item }: { item: CartItemProps }) {
+  const image = item?.image || item?.parent?.image
+
+  return (
+    <>
+      {item.cart_type === 'promotion' && (
+        <div className={style.image}>
+          {image && <Image src={image} alt={item.name} width={128} height={128} />}
+          {!image && <div className={style.noImage}>No Image</div>}
+        </div>
+      )}
+
+      {item.cart_type === 'product' && (
+        <Link
+          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 && <div className={style.noImage}>No Image</div>}
+        </Link>
+      )}
+    </>
+  )
+}
+
+CartItem.Name = function CartItemName({ item }: { item: CartItemProps }) {
+  return (
+    <>
+      {item.cart_type === 'promotion' && (
+        <div className={style.name}>{item.name}</div>
+      )}
+
+      {item.cart_type === 'product' && (
+        <Link
+          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 }) {
+  return Array.from({ length: props.count }).map((_, index) => (
+    <Skeleton key={index}
+      height='100px'
+      width='100%'
+      rounded='md'
+      {...props}
+    />
+  ))
+}
+
+export default CartItem
\ No newline at end of file