diff --git a/src/App.tsx b/src/App.tsx
index ab78a1b..c9129c1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import { MAIN_MENU, SUB_MENU } from '@constants';
import { useUserQuery } from '@hooks';
import { AppLayout, AuthLayout } from '@layouts';
import { AuthPage, HomePage } from '@pages';
+import { ConfirmOrder } from './pages/ConfirmOrder';
export default function App() {
const navigate: NavigateFunction = useNavigate();
@@ -69,6 +70,12 @@ export default function App() {
name: MAIN_MENU.location,
element: <>>
},
+ {
+ type: 'sub-item',
+ path: '/confirmOrder',
+ name: SUB_MENU.confirmOrder,
+ element:
+ },
{
type: 'sub-item',
path: '/help',
diff --git a/src/constants/menuBar.ts b/src/constants/menuBar.ts
index 6d2e90e..a804f1e 100644
--- a/src/constants/menuBar.ts
+++ b/src/constants/menuBar.ts
@@ -7,5 +7,6 @@ export const MAIN_MENU = {
export const SUB_MENU = {
help: 'Help Center',
settings: 'Settings',
- logout: 'Log out'
+ logout: 'Log out',
+ confirmOrder: 'Confirm oder'
};
diff --git a/src/pages/ConfirmOrder.tsx b/src/pages/ConfirmOrder.tsx
new file mode 100644
index 0000000..a6508c8
--- /dev/null
+++ b/src/pages/ConfirmOrder.tsx
@@ -0,0 +1,215 @@
+import CoinIcon from '@assets/coin.png';
+import {
+ ClipboardDocumentListIcon,
+ MapPinIcon,
+ PrinterIcon,
+ WalletIcon
+} from '@heroicons/react/24/outline';
+import {
+ ChevronRightIcon,
+ ExclamationCircleIcon,
+ QuestionMarkCircleIcon
+} from '@heroicons/react/24/solid';
+import { Button } from '@material-tailwind/react';
+import previewImage from '@assets/preview.png';
+export function ConfirmOrder() {
+ const PICK_UP_LOCATION = 'Tiệm in thư viện H3, tầng 1';
+ const User_Balance = 200;
+ const Orders = [
+ {
+ preview: { previewImage },
+ name: 'filename.csv',
+ size: '20 MB',
+ amount: 2,
+ fileCost: 200
+ },
+ {
+ preview: { previewImage },
+ name: 'filename.csv',
+ size: '20 MB',
+ amount: 2,
+ fileCost: 200
+ },
+ {
+ preview: { previewImage },
+ name: 'filename.csv',
+ size: '20 MB',
+ amount: 2,
+ fileCost: 200
+ },
+ {
+ preview: { previewImage },
+ name: 'filename.csv',
+ size: '20 MB',
+ amount: 2,
+ fileCost: 200
+ },
+ {
+ preview: { previewImage },
+ name: 'filename.csv',
+ size: '20 MB',
+ amount: 2,
+ fileCost: 200
+ },
+ {
+ preview: { previewImage },
+ name: 'filename.csv',
+ size: '20 MB',
+ amount: 2,
+ fileCost: 200
+ },
+ {
+ preview: { previewImage },
+ name: 'filename.csv',
+ size: '20 MB',
+ amount: 2,
+ fileCost: 200
+ }
+ ];
+ const PRINT_FEE = Orders.reduce((total, order) => total + order.fileCost * order.amount, 0);
+ const FEE = [
+ { name: 'Print fee', price: PRINT_FEE },
+ { name: 'Service fee', price: 2 }
+ ];
+ const BUTTON_CLASSNAME =
+ 'h-[64px] px-8 py-2 text-xl font-bold text-white rounded-none hover:shadow-none shadow-none rounded-b-lg';
+ return (
+
+
+
+
+
+
TÀI LIỆU ĐẶT IN
+
SỐ LƯỢNG
+
THÀNH TIỀN
+
+ {Orders.map((order) => (
+
+
+
+
+
+ {order.name}
+ ({order.size})
+
+
+
+
{order.fileCost}
+
+
+
+
+
+ x{order.amount}
+
+
+
+
+
+
+ {order.fileCost * order.amount}
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+ Pick-up location
+
+
+ {PICK_UP_LOCATION}
+
+
+
+
+
+
+ Payment method
+
+
+
+
+ Print wallet
+
+
+
+
Current balance:
+
+
{User_Balance}
+
+
= FEE.reduce((total, item) => total + item.price, 0)
+ ? 'hidden'
+ : 'flex flex-col mt-3 bg-red-100 rounded-sm p-3'
+ }
+ >
+
+
+ Amount exceed balance!
+
+
+ Top up your account to proceed.
+
+
+
+
+
+
+
+
+ Charge Details
+
+
+ {FEE.map((item) => (
+
+
{item.name}
+
+
+
{item.price}
+
+
+ ))}
+
+
Total cost
+
+
+
+ {FEE.reduce((total, item) => total + item.price, 0)}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 1f1920f..a0a1310 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -3,4 +3,5 @@
*/
export * from './AuthPage';
+export * from './ConfirmOrder';
export * from './HomePage';