fix(order-workflow): refactor logic code at 2 components: OrderWorkfl…

…owBox & UploadAndPreviewDocBox

src/components/home/ChooseFileBox.tsx

@@ -1,21 +1,20 @@
 import { useMemo, useState } from 'react';
 import { Dialog, DialogBody } from '@material-tailwind/react';
 import { ArrowUpTrayIcon } from '@heroicons/react/24/outline';
-import { useUploadAndPreviewDocBox } from '@components/order/desktop';
-import { useOrderWorkflowBox } from '@components/order/mobile';
+import { UploadAndPreviewDocBox } from '@components/order/desktop';
+import { OrderWorkflowBox } from '@components/order/mobile';
 import { ScreenSize } from '@constants';
 import { useScreenSize } from '@hooks';
 import { useFileStore } from '@states/home';
 import { useOrderWorkflowStore } from '@states/order';
 
 export function useChooseFileBox() {
-  const { openUploadAndPreviewDocBox, UploadAndPreviewDocBox } = useUploadAndPreviewDocBox();
-  const { openOrderWorkflowBox, OrderWorkflowBox } = useOrderWorkflowBox();
   const [openBox, setOpenBox] = useState<boolean>(false);
 
   const ChooseFileBox = () => {
     const { screenSize } = useScreenSize();
-    const { setMobileOrderStep } = useOrderWorkflowStore();
+    const { setOpenMobileOrderWorkflow, setOpenDesktopOrderWorkflow, setMobileOrderStep } =
+      useOrderWorkflowStore();
     const { uploadFile } = useFileStore();
 
     const handleOpenBox = () => setOpenBox(!openBox);
@@ -25,14 +24,20 @@ export function useChooseFileBox() {
           await uploadFile(event.target.files[0]);
           setOpenBox(false);
           if (screenSize <= ScreenSize.MD) {
-            openOrderWorkflowBox();
+            setOpenMobileOrderWorkflow(true);
           } else {
-            openUploadAndPreviewDocBox();
+            setOpenDesktopOrderWorkflow(true);
           }
           setMobileOrderStep(1);
         }
       },
-      [screenSize, setMobileOrderStep, uploadFile]
+      [
+        screenSize,
+        setOpenMobileOrderWorkflow,
+        setOpenDesktopOrderWorkflow,
+        setMobileOrderStep,
+        uploadFile
+      ]
     );
 
     return (

src/components/order/common/CloseForm.tsx

@@ -0,0 +1,59 @@
+import { useMemo, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  IconButton,
+  Typography
+} from '@material-tailwind/react';
+
+export function useCloseForm() {
+  const [openDialog, setOpenDialog] = useState<boolean>(false);
+
+  const CloseForm: Component<{ handleSave: () => void; handleExist: () => void }> = ({
+    handleSave,
+    handleExist
+  }) =>
+    useMemo(() => {
+      const handleOpenDialog = () => {
+        setOpenDialog(!openDialog);
+      };
+
+      return (
+        <Dialog open={openDialog} handler={handleOpenDialog}>
+          <DialogHeader className='justify-end py-2'>
+            <IconButton color='blue-gray' size='sm' variant='text' onClick={handleOpenDialog}>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                fill='none'
+                viewBox='0 0 24 24'
+                stroke='currentColor'
+                strokeWidth={2}
+                className='h-5 w-5'
+              >
+                <path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' />
+              </svg>
+            </IconButton>
+          </DialogHeader>
+          <DialogBody className='px-[50px] py-2'>
+            <Typography variant='h4' color='black'>
+              Do you want to save your changes?
+            </Typography>
+            <Typography variant='h6'>Your changes will be lost if you don't save them</Typography>
+            <div className='flex gap-5 mt-4'>
+              <Button className='bg-green-200' onClick={handleSave}>
+                Save changes
+              </Button>
+              <Button onClick={handleExist}>Don't save</Button>
+            </div>
+          </DialogBody>
+        </Dialog>
+      );
+    }, [handleSave, handleExist]);
+
+  return {
+    openCloseForm: () => setOpenDialog(true),
+    CloseForm: CloseForm
+  };
+}

src/components/order/common/index.ts

@@ -2,5 +2,6 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './CloseForm';
 export * from './FormFooter';
 export * from './LayoutSide';