1 files changed, 111 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;