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 ( +
+
+
+ + Document +
+
+
+
TÀI LIỆU ĐẶT IN
+
SỐ LƯỢNG
+
THÀNH TIỀN
+
+ {Orders.map((order) => ( +
+
+ Preview +
+
+ {order.name} + ({order.size}) +
+
+ Coin Icon + {order.fileCost} +
+
+
+
+ + x{order.amount} + +
+
+
+ Coin Icon + + {order.fileCost * order.amount} + +
+
+
+ ))} +
+
+
+
+
+
+ + Pick-up location +
+
+ {PICK_UP_LOCATION} + +
+
+
+
+ + Payment method +
+
+
+
+ Print wallet + +
+
+ Current balance: + Coin Icon + {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} +
+ Coin Icon + {item.price} +
+
+ ))} +
+ Total cost +
+ Coin Icon + + {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';