Update promotion program feature

3 files changed, 187 insertions, 0 deletions

diff --git a/src-migrate/modules/cart/ui/CartItem.tsx b/src-migrate/modules/cart/ui/CartItem.tsx
new file mode 100644
index 00000000..70d50bff
--- /dev/null
+++ b/src-migrate/modules/cart/ui/CartItem.tsx
@@ -0,0 +1,80 @@
+import Image from 'next/image'
+import React from 'react'
+import formatCurrency from '~/common/libs/formatCurrency'
+import { CartItem as CartItemProps } from '~/common/types/cart'
+import ProductPromo from './ProductPromo'
+import { Skeleton, SkeletonProps } from '@chakra-ui/react'
+import style from '../styles/CartItem.module.css'
+import CartItemAction from '../components/CartItemAction'
+import CartItemSelect from '../components/CartItemSelect'
+
+type Props = {
+  item: CartItemProps
+}
+
+const CartItem = ({ item }: Props) => {
+  const image = item?.image || item?.parent?.image
+
+  return (
+    <div className={style.wrapper}>
+      <div className={style.mainProdWrapper}>
+        <CartItemSelect item={item} />
+        <div className='w-4' />
+        <div className={style.image}>
+          {image && <Image src={image} alt={item.name} width={128} height={128} />}
+          {!image && <div className={style.noImage}>No Image</div>}
+        </div>
+
+        <div className={style.details}>
+          <div className={style.name}>{item.name}</div>
+          <div className={style.spacing2} />
+          {item.cart_type === 'promotion' && (
+            <div className={style.discPriceSection}>
+              <span className={style.priceBefore}>
+                Rp {formatCurrency((item.package_price || 0))}
+              </span>
+              <span className={style.savingAmt}>
+                Hemat Rp {formatCurrency((item.package_price || 0) - item.subtotal)}
+              </span>
+              <span className={style.price}>
+                Rp {formatCurrency(item.subtotal)}
+              </span>
+            </div>
+          )}
+          {item.cart_type === 'product' && (
+            <>
+              <div className={style.price}>
+                Rp {formatCurrency(item.price.price)}
+              </div>
+              <div>{item.code}</div>
+            </>
+          )}
+          <div>
+            <span className={style.weightLabel}>Berat barang: </span>
+            {item.weight} Kg
+          </div>
+        </div>
+
+        <CartItemAction item={item} />
+      </div>
+
+      <div className="flex flex-col">
+        {item.products?.map((product) => <ProductPromo key={product.id} product={product} />)}
+        {item.free_products?.map((product) => <ProductPromo key={product.id} product={product} />)}
+      </div>
+    </div>
+  )
+}
+
+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
diff --git a/src-migrate/modules/cart/ui/CartSummary.tsx b/src-migrate/modules/cart/ui/CartSummary.tsx
new file mode 100644
index 00000000..390c1c77
--- /dev/null
+++ b/src-migrate/modules/cart/ui/CartSummary.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import style from '../styles/CartSummary.module.css'
+import formatCurrency from '~/common/libs/formatCurrency'
+import clsxm from '~/common/libs/clsxm'
+import { Skeleton } from '@chakra-ui/react'
+import _ from 'lodash'
+
+type Props = {
+  total?: number
+  discount?: number
+  subtotal?: number
+  tax?: number
+  shipping?: number
+  grandTotal?: number
+  isLoaded: boolean
+}
+
+const CartSummary = ({
+  total,
+  discount,
+  subtotal,
+  tax,
+  shipping,
+  grandTotal,
+  isLoaded = false,
+}: Props) => {
+  return (
+    <>
+      <div className='text-h-sm font-medium'>Ringkasan Pesanan</div>
+
+      <div className="h-6" />
+
+      <div className='flex flex-col gap-y-3'>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Total Belanja</span>
+          <span className={style.value}>Rp {formatCurrency(subtotal || 0)}</span>
+        </Skeleton>
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Total Diskon</span>
+          <span className={clsxm(style.value, style.discount)}>- Rp {formatCurrency(discount || 0)}</span>
+        </Skeleton>
+
+        <div className={style.divider} />
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Subtotal</span>
+          <span className={style.value}>Rp {formatCurrency(total || 0)}</span>
+        </Skeleton>
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Tax 11%</span>
+          <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
+        </Skeleton>
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.label}>Biaya Kirim</span>
+          <span className={style.value}>Rp {formatCurrency(shipping || 0)}</span>
+        </Skeleton>
+
+        <div className={style.divider} />
+
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={clsxm(style.label, style.grandTotal)}>
+            Grand Total
+          </span>
+          <span className={style.value}>Rp {formatCurrency(grandTotal || 0)}</span>
+        </Skeleton>
+      </div>
+    </>
+  )
+}
+
+export default CartSummary
\ No newline at end of file
diff --git a/src-migrate/modules/cart/ui/ProductPromo.tsx b/src-migrate/modules/cart/ui/ProductPromo.tsx
new file mode 100644
index 00000000..a41afc97
--- /dev/null
+++ b/src-migrate/modules/cart/ui/ProductPromo.tsx
@@ -0,0 +1,33 @@
+import Image from 'next/image'
+import React from 'react'
+import { CartProduct } from '~/common/types/cart'
+import style from '../styles/ProductPromo.module.css'
+
+type Props = {
+  product: CartProduct
+}
+
+const ProductPromo = ({ product }: Props) => {
+  return (
+    <div key={product.id} className={style.wrapper}>
+      <div className={style.imageWrapper}>
+        {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} />}
+      </div>
+
+      <div className={style.details}>
+        <div className={style.name}>{product.display_name}</div>
+        <div className={style.code}>{product.code}</div>
+        <div>
+          <span className={style.weightLabel}>Berat Barang: </span>
+          <span>{product.package_weight} Kg</span>
+        </div>
+      </div>
+
+      <div className={style.quantity}>
+        {product.qty}
+      </div>
+    </div>
+  )
+}
+
+export default ProductPromo
\ No newline at end of file