Merge pull request #12 from TickLabVN/sub-feature/top-up-wallet

Sub feature/top up wallet

src/components/order/ConfirmOrderForm.tsx

@@ -8,8 +8,9 @@ export function ConfirmOrderForm() {
   return (
     <>
       <div>ConfirmOrderForm</div>
-      <Button onClick={() => setOrderStep(4)}>Confirm</Button>
+      <Button onClick={() => setOrderStep(5)}>Confirm</Button>
       <Button onClick={() => setOrderStep(2)}>Back</Button>
+      <Button onClick={() => setOrderStep(4)}>Print wallet</Button>
     </>
   );
 }

src/components/order/OrderSuccessForm.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@material-tailwind/react';
+import { useOrderWorkflowStore } from '@states/order';
+
+// Tue's second-task in here.
+export function OrderSuccessForm() {
+  const { setOrderStep } = useOrderWorkflowStore();
+
+  return (
+    <>
+      <div>OrderSuccessForm</div>
+      <Button onClick={() => setOrderStep(5)}>Track this order</Button>
+      <Button onClick={() => setOrderStep(3)}>Back</Button>
+    </>
+  );
+}

src/components/order/OrderWorkflowBox.tsx

@@ -1,6 +1,12 @@
 import { useState } from 'react';
 import { Dialog, DialogBody } from '@material-tailwind/react';
-import { UploadDocumentForm, OrderListForm, ConfirmOrderForm } from '@components/order';
+import {
+  UploadDocumentForm,
+  OrderListForm,
+  ConfirmOrderForm,
+  TopupWalletForm,
+  OrderSuccessForm
+} from '@components/order';
 import { useOrderWorkflowStore } from '@states/order';
 
 export function useOrderWorkflowBox() {
@@ -14,6 +20,10 @@ export function useOrderWorkflowBox() {
       return <OrderListForm />;
     } else if (orderStep === 3) {
       return <ConfirmOrderForm />;
+    } else if (orderStep === 4) {
+      return <TopupWalletForm />;
+    } else if (orderStep === 5) {
+      return <OrderSuccessForm />;
     }
   };
 

src/components/order/TopupWalletForm.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@material-tailwind/react';
+import { useOrderWorkflowStore } from '@states/order';
+
+// Tue's first-task in here.
+export function TopupWalletForm() {
+  const { setOrderStep } = useOrderWorkflowStore();
+
+  return (
+    <>
+      <div>TopupWalletForm</div>
+      <Button onClick={() => setOrderStep(3)}>Top up wallet</Button>
+    </>
+  );
+}

src/components/order/index.ts

@@ -4,5 +4,7 @@
 
 export * from './ConfirmOrderForm';
 export * from './OrderListForm';
+export * from './OrderSuccessForm';
 export * from './OrderWorkflowBox';
+export * from './TopupWalletForm';
 export * from './UploadDocumentForm';