Merge branch 'release' into development

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

6 files changed, 551 insertions, 0 deletions

diff --git a/src-migrate/modules/cart/components/CartSummaryMobile.tsx b/src-migrate/modules/cart/components/CartSummaryMobile.tsx
new file mode 100644
index 00000000..d9f72e0e
--- /dev/null
+++ b/src-migrate/modules/cart/components/CartSummaryMobile.tsx
@@ -0,0 +1,111 @@
+import style from '../styles/summary.module.css';
+
+import React, { useState } from 'react';
+import formatCurrency from '~/libs/formatCurrency';
+import clsxm from '~/libs/clsxm';
+import { Button, Skeleton } from '@chakra-ui/react';
+import _ from 'lodash';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import useDevice from '@/core/hooks/useDevice';
+
+type Props = {
+  total?: number;
+  discount?: number;
+  subtotal?: number;
+  tax?: number;
+  shipping?: number;
+  grandTotal?: number;
+  isLoaded: boolean;
+};
+
+const CartSummaryMobile = ({
+  total,
+  discount,
+  subtotal,
+  tax,
+  shipping,
+  grandTotal,
+  isLoaded = false,
+}: Props) => {
+  const [showPopup, setShowPopup] = useState(false);
+  return (
+    <>
+      <BottomPopup
+        className=' !h-[35%]'
+        title='Ringkasan Pensanan'
+        active={showPopup}
+        close={() => setShowPopup(false)}
+      >
+        <div className='mt-4'>
+          <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>
+        </div>
+      </BottomPopup>
+      <div className='flex flex-col gap-y-3'>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={clsxm(style.label, style.grandTotal)}>
+            Grand Total
+          </span>
+          <button
+            onClick={() => setShowPopup(true)}
+            className='bg-gray-300 w-6 h-6 items-center justify-center cursor-pointer hover:bg-red-400 md:hidden '
+          >
+            <ChevronDownIcon className='h-6 w-6 text-white' />
+          </button>
+        </Skeleton>
+        <Skeleton isLoaded={isLoaded} className={style.line}>
+          <span className={style.value}>
+            Rp {formatCurrency(grandTotal || 0)}
+          </span>
+        </Skeleton>
+      </div>
+    </>
+  );
+};
+
+export default CartSummaryMobile;
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
diff --git a/src-migrate/modules/cart/components/ItemAction.tsx b/src-migrate/modules/cart/components/ItemAction.tsx
new file mode 100644
index 00000000..e73d507b
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemAction.tsx
@@ -0,0 +1,111 @@
+import style from '../styles/item-action.module.css'
+
+import React, { useEffect, useState } from 'react'
+
+import { Spinner, Tooltip } from '@chakra-ui/react'
+import { MinusIcon, PlusIcon, Trash2Icon } from 'lucide-react'
+
+import { CartItem } from '~/types/cart'
+import { getAuth } from '~/libs/auth'
+import { deleteUserCart, upsertUserCart } from '~/services/cart'
+
+import { useDebounce } from 'usehooks-ts'
+import { useCartStore } from '../stores/useCartStore'
+
+
+type Props = {
+  item: CartItem
+}
+
+const CartItemAction = ({ item }: Props) => {
+  const auth = getAuth()
+
+  const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false)
+  const [isLoadQuantity, setIsLoadQuantity] = useState<boolean>(false)
+
+  const [quantity, setQuantity] = useState<number>(item.quantity)
+
+  const { loadCart } = useCartStore()
+
+  const limitQty = item.limit_qty?.transaction || 0
+
+  const handleDelete = async () => {
+    if (typeof auth !== 'object') return
+
+    setIsLoadDelete(true)
+    await deleteUserCart(auth.id, [item.cart_id])
+    await loadCart(auth.id)
+    setIsLoadDelete(false)
+  }
+
+  const decreaseQty = () => { setQuantity((quantity) => quantity -= 1) }
+  const increaseQty = () => { setQuantity((quantity) => quantity += 1) }
+  const debounceQty = useDebounce(quantity, 1000)
+  useEffect(() => {
+    if (isNaN(debounceQty)) setQuantity(1)
+    if (limitQty > 0 && debounceQty > limitQty) setQuantity(limitQty)
+  }, [debounceQty, limitQty])
+
+  useEffect(() => {
+    const updateCart = async () => {
+      if (typeof auth !== 'object' || isNaN(debounceQty)) return
+
+      setIsLoadQuantity(true)
+      await upsertUserCart({
+        userId: auth.id,
+        type: item.cart_type,
+        id: item.id,
+        qty: debounceQty,
+        selected: item.selected,
+      })
+      await loadCart(auth.id)
+      setIsLoadQuantity(false)
+    }
+    updateCart()
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debounceQty])
+
+  return (
+    <div className={style.actionSection}>
+      <button className={style.deleteButton} onClick={handleDelete} disabled={isLoadDelete}>
+        {isLoadDelete && <Spinner size='xs' />}
+        {!isLoadDelete && <Trash2Icon size={16} />}
+      </button>
+
+      <div className={style.quantitySection}>
+        {isLoadQuantity && (
+          <div className={style.quantityLoading}>
+            <Spinner size='sm' />
+          </div>
+        )}
+
+        <button
+          className={style.quantityControl}
+          onClick={decreaseQty}
+          disabled={quantity <= 1}
+        >
+          <MinusIcon size={16} />
+        </button>
+
+        <input
+          type='number'
+          className={style.quantity.toString()}
+          onChange={(e) => setQuantity(parseInt(e.target.value))}
+          value={quantity}
+        />
+
+        <Tooltip label={limitQty > 0 ? `Max. ${limitQty}` : ''}>
+          <button
+            className={style.quantityControl}
+            onClick={increaseQty}
+            disabled={limitQty > 0 && quantity >= limitQty}
+          >
+            <PlusIcon size={16} />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default CartItemAction
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/ItemPromo.tsx b/src-migrate/modules/cart/components/ItemPromo.tsx
new file mode 100644
index 00000000..878e17ac
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemPromo.tsx
@@ -0,0 +1,44 @@
+import style from '../styles/item-promo.module.css'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { createSlug } from '~/libs/slug'
+
+import { CartProduct } from '~/types/cart'
+
+type Props = {
+  product: CartProduct
+}
+
+const CartItemPromo = ({ product }: Props) => {
+  return (
+    <div key={product.id} className={style.wrapper}>
+      <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className={style.imageWrapper}>
+        {product?.image && <Image src={product.image} alt={product.name} width={128} height={128} className={style.image} />}
+      </Link>
+
+      <div className={style.details}>
+        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id.toString())} className={style.name}>
+          {product.display_name}
+        </Link>
+
+        <div className='flex w-full'>
+          <div className="flex flex-col">
+            <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>
+      </div>
+
+    </div>
+  )
+}
+
+export default CartItemPromo
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
new file mode 100644
index 00000000..b904a1de
--- /dev/null
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -0,0 +1,54 @@
+import { Checkbox, Spinner } from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+import { getAuth } from '~/libs/auth'
+import { CartItem } from '~/types/cart'
+import { upsertUserCart } from '~/services/cart'
+
+import { useCartStore } from '../stores/useCartStore'
+
+type Props = {
+  item: CartItem
+}
+
+const CartItemSelect = ({ item }: Props) => {
+  const auth = getAuth()
+  const { loadCart } = useCartStore()
+
+  const [isLoad, setIsLoad] = useState<boolean>(false)
+
+  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (typeof auth !== 'object') return
+
+    setIsLoad(true)
+    await upsertUserCart({
+      userId: auth.id,
+      type: item.cart_type,
+      id: item.id,
+      qty: item.quantity,
+      selected: e.target.checked
+    })
+    await loadCart(auth.id)
+    setIsLoad(false)
+  }
+
+  return (
+    <div className='w-6 my-auto'>
+      {isLoad && (
+        <Spinner className='my-auto' size='sm' />
+      )}
+
+      {!isLoad && (
+        <Checkbox
+          borderColor='gray.600'
+          colorScheme='red'
+          size='lg'
+          isChecked={item.selected}
+          onChange={handleChange}
+        />
+      )}
+    </div>
+  )
+}
+
+export default CartItemSelect
\ No newline at end of file
diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx
new file mode 100644
index 00000000..2e55c8df
--- /dev/null
+++ b/src-migrate/modules/cart/components/Summary.tsx
@@ -0,0 +1,75 @@
+import style from '../styles/summary.module.css'
+
+import React from 'react'
+import formatCurrency from '~/libs/formatCurrency'
+import clsxm from '~/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