Merge branch 'release' into development

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

2 files changed, 191 insertions, 0 deletions

diff --git a/src-migrate/pages/shop/cart/cart.module.css b/src-migrate/pages/shop/cart/cart.module.css
new file mode 100644
index 00000000..806104be
--- /dev/null
+++ b/src-migrate/pages/shop/cart/cart.module.css
@@ -0,0 +1,35 @@
+.title {
+    @apply text-h-lg font-semibold;
+}
+
+.content {
+    @apply flex flex-wrap ;
+}
+
+.item-wrapper {
+    @apply w-full md:w-3/4 min-h-screen;
+}
+
+.item-skeleton {
+    @apply grid grid-cols-1 gap-y-4;
+}
+
+.items {
+    @apply flex flex-col gap-y-6 border-t border-gray-300 pt-6;
+}
+
+.summary-wrapper {
+    @apply w-full md:w-1/4 md:pl-6 mt-6 md:mt-0 bottom-0 md:sticky sticky bg-white;
+}
+
+.summary {
+    @apply border border-gray-300 p-4 rounded-md sticky top-[180px];
+}
+
+.summary-buttons {
+    @apply grid grid-cols-2 gap-x-3 mt-6;
+}
+
+.summary-buttons-step-approval {
+    @apply grid grid-cols-1 gap-y-3 mt-6;
+}
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
new file mode 100644
index 00000000..d89707d2
--- /dev/null
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -0,0 +1,156 @@
+import style from './cart.module.css';
+
+import React, { useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import { Button, Tooltip } from '@chakra-ui/react';
+
+import { getAuth } from '~/libs/auth';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
+
+import CartItem from '~/modules/cart/components/Item';
+import CartSummary from '~/modules/cart/components/Summary';
+import clsxm from '~/libs/clsxm';
+import useDevice from '@/core/hooks/useDevice';
+import CartSummaryMobile from '~/modules/cart/components/CartSummaryMobile';
+import Image from '~/components/ui/image';
+
+const CartPage = () => {
+  const auth = getAuth();
+  const [isStepApproval, setIsStepApproval] = React.useState(false);
+
+  const { loadCart, cart, summary } = useCartStore();
+
+  const useDivvice = useDevice();
+
+  useEffect(() => {
+    if (typeof auth === 'object' && !cart) {
+      loadCart(auth.id);
+      setIsStepApproval(auth?.feature?.soApproval);
+    }
+  }, [auth, loadCart, cart]);
+
+  const hasSelectedPromo = useMemo(() => {
+    if (!cart) return false;
+    for (const item of cart.products) {
+      if (item.cart_type === 'promotion' && item.selected) return true;
+    }
+    return false;
+  }, [cart]);
+
+  const hasSelected = useMemo(() => {
+    if (!cart) return false;
+    for (const item of cart.products) {
+      if (item.selected) return true;
+    }
+    return false;
+  }, [cart]);
+
+  const hasSelectNoPrice = useMemo(() => {
+    if (!cart) return false;
+    for (const item of cart.products) {
+      if (item.selected && item.price.price_discount == 0) return true;
+    }
+    return false;
+  }, [cart]);
+
+  return (
+    <>
+      <div className={style['title']}>Keranjang Belanja</div>
+
+      <div className='h-6' />
+
+      <div className={style['content']}>
+        <div className={style['item-wrapper']}>
+          <div className={style['item-skeleton']}>
+            {!cart && <CartItem.Skeleton count={5} height='120px' />}
+          </div>
+
+          <div className={style['items']}>
+            {cart?.products.map((item) => (
+              <CartItem key={item.id} item={item} />
+            ))}
+
+            {cart?.products?.length === 0 && (
+              <div className='flex flex-col items-center'>
+                <Image
+                  src='/images/empty_cart.svg'
+                  alt='Empty Cart'
+                  width={450}
+                  height={450}
+                />
+                <div className='text-title-sm md:text-title-lg text-center font-semibold'>
+                  Keranjangnya masih kosong nih
+                </div>
+                <div className='text-body-2 md:text-body-1 text-center mt-3'>
+                  Yuk, tambahin barang-barang yang kamu mau ke keranjang
+                  sekarang!
+                  <br />
+                  Ada banyak potongan belanjanya pakai kode voucher
+                </div>
+                <Link
+                  href='/'
+                  className='btn-solid-red rounded-full text-body-1 mt-6'
+                >
+                  Mulai Belanja
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+        <div
+          className={`${style['summary-wrapper']} ${
+            useDivvice.isMobile && cart?.product_total === 0 ? 'hidden' : ''
+          }`}
+        >
+          <div className={style['summary']}>
+            {useDivvice.isMobile && (
+              <CartSummaryMobile {...summary} isLoaded={!!cart} />
+            )}
+            {!useDivvice.isMobile && (
+              <CartSummary {...summary} isLoaded={!!cart} />
+            )}
+
+            <div className={isStepApproval ? style['summary-buttons-step-approval'] : style['summary-buttons']  }>
+              <Tooltip
+                label={
+                  hasSelectedPromo &&
+                  'Barang promo tidak dapat dibuat quotation'
+                }
+              >
+                <Button
+                  colorScheme='yellow'
+                  w='full'
+                  isDisabled={hasSelectedPromo || !hasSelected}
+                  as={Link}
+                  href='/shop/quotation'
+                >
+                  Quotation
+                </Button>
+              </Tooltip>
+              {!isStepApproval && (
+                <Tooltip
+                  label={clsxm({
+                    'Tidak ada item yang dipilih': !hasSelected,
+                    'Terdapat item yang tidak ada harga': hasSelectNoPrice,
+                  })}
+                >
+                  <Button
+                    colorScheme='red'
+                    w='full'
+                    isDisabled={!hasSelected || hasSelectNoPrice}
+                    as={Link}
+                    href='/shop/checkout'
+                  >
+                    Checkout
+                  </Button>
+                </Tooltip>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CartPage;