CR - Keranjang Mobile : informasi harga

2 files changed, 62 insertions, 50 deletions

diff --git a/src-migrate/modules/cart/components/Summary.tsx b/src-migrate/modules/cart/components/Summary.tsx
index 2e55c8df..1e76d4fa 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,49 +27,61 @@ const CartSummary = ({
 }: Props) => {
   return (
     <>
-      <div className='text-h-sm font-medium'>Ringkasan Pesanan</div>
-
-      <div className="h-6" />
+      <div className='text-h-sm font-medium hidden md:block'>
+        Ringkasan Pesanan
+      </div>
 
-      <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='h-6' />
 
-        <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='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={style.divider} />
+          <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}>Subtotal</span>
-          <span className={style.value}>Rp {formatCurrency(total || 0)}</span>
-        </Skeleton>
+          <div className={style.divider} />
 
-        <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}>Subtotal</span>
+            <span className={style.value}>Rp {formatCurrency(total || 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}>Tax 11%</span>
+            <span className={style.value}>Rp {formatCurrency(tax || 0)}</span>
+          </Skeleton>
 
-        <div className={style.divider} />
+          <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={clsxm(style.label, style.grandTotal)}>
-            Grand Total
-          </span>
-          <span className={style.value}>Rp {formatCurrency(grandTotal || 0)}</span>
-        </Skeleton>
+          <div className={style.divider} />
+        </div>
       </div>
+
+      <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>
     </>
-  )
-}
+  );
+};
 
-export default CartSummary
\ No newline at end of file
+export default CartSummary;
diff --git a/src-migrate/pages/shop/cart/cart.module.css b/src-migrate/pages/shop/cart/cart.module.css
index d523a55a..353b131a 100644
--- a/src-migrate/pages/shop/cart/cart.module.css
+++ b/src-migrate/pages/shop/cart/cart.module.css
@@ -19,7 +19,7 @@
 }
 
 .summary-wrapper {
-    @apply w-full md:w-1/4 md:pl-6 mt-6 md:mt-0;
+    @apply w-full md:w-1/4 md:pl-6 mt-6 md:mt-0 bottom-0 md:sticky sticky bg-white;
 }
 
 .summary {