fix(naming): rename Form, Box in component/order

src/components/home/ChooseFileBox.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import { Dialog, DialogBody } from '@material-tailwind/react';
-import { useOrderWorkflow } from '@components/order';
+import { useOrderWorkflowBox } from '@components/order';
 import { useOrderWorkflowStore } from '@states/order';
 
 // Loc's task in here.
 // This hook is used in ./src/pages/HomePage.tsx.
 
 export function useChooseFileBox() {
-  const { handleOrderWorkflow, OrderWorkflow } = useOrderWorkflow();
+  const { openOrderWorkflowBox, OrderWorkflowBox } = useOrderWorkflowBox();
   const [openBox, setOpenBox] = useState<boolean>(false);
 
   const ChooseFileBox = () => {
@@ -20,14 +20,14 @@ export function useChooseFileBox() {
           <DialogBody
             onClick={() => {
               setOpenBox(false);
-              handleOrderWorkflow();
+              openOrderWorkflowBox();
               setOrderStep(1);
             }}
           >
             A
           </DialogBody>
         </Dialog>
-        {<OrderWorkflow />}
+        {<OrderWorkflowBox />}
       </>
     );
   };

src/components/order/ConfirmOrderForm.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@material-tailwind/react';
+import { useOrderWorkflowStore } from '@states/order';
+
+// Tan's third-task in here.
+export function ConfirmOrderForm() {
+  const { setOrderStep } = useOrderWorkflowStore();
+
+  return (
+    <>
+      <div>ConfirmOrderForm</div>
+      <Button onClick={() => setOrderStep(4)}>Confirm</Button>
+      <Button onClick={() => setOrderStep(2)}>Back</Button>
+    </>
+  );
+}

src/components/order/OrderListBox.tsx → src/components/order/OrderListForm.tsx

@@ -2,12 +2,12 @@ import { Button } from '@material-tailwind/react';
 import { useOrderWorkflowStore } from '@states/order';
 
 // Tan's second-task in here.
-export function OrderListBox() {
+export function OrderListForm() {
   const { setOrderStep } = useOrderWorkflowStore();
 
   return (
     <>
-      <div>OrderListBox</div>
+      <div>OrderListForm</div>
       <Button onClick={() => setOrderStep(3)}>Order</Button>
       <Button onClick={() => setOrderStep(1)}>Back</Button>
     </>

src/components/order/OrderWorkflow.tsx → src/components/order/OrderWorkflowBox.tsx

@@ -1,17 +1,19 @@
 import { useState } from 'react';
 import { Dialog, DialogBody } from '@material-tailwind/react';
-import { UploadDocumentBox, OrderListBox } from '@components/order';
+import { UploadDocumentForm, OrderListForm, ConfirmOrderForm } from '@components/order';
 import { useOrderWorkflowStore } from '@states/order';
 
-export function useOrderWorkflow() {
+export function useOrderWorkflowBox() {
   const [openDialog, setOpenDialog] = useState<boolean>(false);
 
   const DialogBodyWorkflow = () => {
     const { orderStep } = useOrderWorkflowStore();
     if (orderStep === 1) {
-      return <UploadDocumentBox />;
+      return <UploadDocumentForm />;
     } else if (orderStep === 2) {
-      return <OrderListBox />;
+      return <OrderListForm />;
+    } else if (orderStep === 3) {
+      return <ConfirmOrderForm />;
     }
   };
 
@@ -27,7 +29,7 @@ export function useOrderWorkflow() {
   };
 
   return {
-    handleOrderWorkflow: () => setOpenDialog(true),
-    OrderWorkflow: OrderWorkflow
+    openOrderWorkflowBox: () => setOpenDialog(true),
+    OrderWorkflowBox: OrderWorkflow
   };
 }

src/components/order/UploadDocumentBox.tsx → src/components/order/UploadDocumentForm.tsx

@@ -2,12 +2,12 @@ import { Button } from '@material-tailwind/react';
 import { useOrderWorkflowStore } from '@states/order';
 
 // Tan's first-task in here.
-export function UploadDocumentBox() {
+export function UploadDocumentForm() {
   const { setOrderStep } = useOrderWorkflowStore();
 
   return (
     <>
-      <div>UploadDocumentBox</div>
+      <div>UploadDocumentForm</div>
       <Button onClick={() => setOrderStep(2)}>Save</Button>
     </>
   );

src/components/order/index.ts

@@ -2,6 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from './OrderListBox';
-export * from './OrderWorkflow';
-export * from './UploadDocumentBox';
+export * from './ConfirmOrderForm';
+export * from './OrderListForm';
+export * from './OrderWorkflowBox';
+export * from './UploadDocumentForm';