From 9a52d9f835e2f30480142c6197fdf14b3fee5ead Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 12 Mar 2024 09:17:01 +0700
Subject: feedback kerajang di mobile

---
 .../modules/cart/components/CartSummaryMobile.tsx  | 111 +++++++++++++++++++++
 src-migrate/modules/cart/components/Summary.tsx    | 110 +++++++++-----------
 src-migrate/pages/shop/cart/index.tsx              |   7 +-
 3 files changed, 166 insertions(+), 62 deletions(-)
 create mode 100644 src-migrate/modules/cart/components/CartSummaryMobile.tsx

(limited to 'src-migrate')

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/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx
index 1e76d4fa..2e55c8df 100644
--- a/src-migrate/modules/cart/components/Summary.tsx
+++ b/src-migrate/modules/cart/components/Summary.tsx
@@ -1,20 +1,20 @@
-import style from '../styles/summary.module.css';
+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';
+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;
-};
+  total?: number
+  discount?: number
+  subtotal?: number
+  tax?: number
+  shipping?: number
+  grandTotal?: number
+  isLoaded: boolean
+}
 
 const CartSummary = ({
   total,
@@ -27,61 +27,49 @@ const CartSummary = ({
 }: Props) => {
   return (
     <>
-      <div className='text-h-sm font-medium hidden md:block'>
-        Ringkasan Pesanan
-      </div>
+      <div className='text-h-sm font-medium'>Ringkasan Pesanan</div>
 
-      <div className='h-6' />
+      <div className="h-6" />
 
-      <div className='hidden md:block'>
-        <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>
+      <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>
+        <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} />
+        <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}>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}>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>
+        <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} />
-        </div>
-      </div>
+        <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>
+        <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;
+export default CartSummary
\ No newline at end of file
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index 9ec58a48..6c37b434 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -10,11 +10,15 @@ 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'
 
 const CartPage = () => {
   const auth = getAuth()
 
   const { loadCart, cart, summary } = useCartStore()
+  
+  const useDivvice = useDevice();
 
   useEffect(() => {
     if (typeof auth === 'object' && !cart) loadCart(auth.id)
@@ -65,7 +69,8 @@ const CartPage = () => {
 
         <div className={style['summary-wrapper']}>
           <div className={style['summary']}>
-            <CartSummary {...summary} isLoaded={!!cart} />
+            {useDivvice.isMobile && <CartSummaryMobile {...summary} isLoaded={!!cart} />}
+            {!useDivvice.isMobile && <CartSummary {...summary} isLoaded={!!cart} />}
 
             <div className={style['summary-buttons']}>
               <Tooltip label={hasSelectedPromo && 'Barang promo tidak dapat dibuat quotation'}>
-- 
cgit v1.2.3