fix(order-list): handle total cost and CloseForm

src/components/common/AppNavigation.tsx

@@ -2,8 +2,9 @@ import { useMemo } from 'react';
 import { ChevronLeftIcon, UserCircleIcon } from '@heroicons/react/24/solid';
 import coin from '@assets/coin.png';
 import { AppDrawer, DesktopNavbar, ToggleSidebarBtn, useSidebarMenu } from '@components/common';
+import { useCloseForm } from '@components/order/common';
 import { ScreenSize } from '@constants';
-import { useScreenSize, useUserQuery, usePrintingRequestQuery } from '@hooks';
+import { useScreenSize, useUserQuery, usePrintingRequestQuery, emitEvent } from '@hooks';
 import { useMenuBarStore, useOrderWorkflowStore } from '@states';
 import { formatFileSize } from '@utils';
 
@@ -16,6 +17,8 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
   const { selectedMenu } = useMenuBarStore();
   const { desktopOrderStep } = useOrderWorkflowStore();
 
+  const { openCloseForm, CloseForm } = useCloseForm();
+
   const {
     remainCoins: { data }
   } = useUserQuery();
@@ -61,21 +64,34 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
         <>
           <hr className='my-1' />
           {desktopOrderStep === 1 && (
-            <div className='flex items-center justify-between px-9'>
-              <div className='flex items-center gap-2'>
-                <ChevronLeftIcon className='w-5 h-5' />
-                <p className='text-gray/4 font-semibold text-xl'>Order list</p>
-              </div>
-              <div className='text-right text-sm'>
-                <p className='font-medium text-gray/4'>Size limit:</p>
-                <p>
-                  <span className='font-semibold'>{`${
-                    totalSize && formatFileSize(totalSize)
-                  } / `}</span>
-                  <span className='text-gray/3 font-medium'>1GB</span>
-                </p>
+            <>
+              <div className='flex items-center justify-between px-6'>
+                <div
+                  className='flex items-center gap-2 cursor-pointer p-2 rounded-full hover:bg-gray-100'
+                  onClick={openCloseForm}
+                >
+                  <ChevronLeftIcon className='w-5 h-5' />
+                  <p className='text-gray/4 font-semibold text-xl'>Order list</p>
+                </div>
+                <div className='text-right text-sm'>
+                  <p className='font-medium text-gray/4'>Size limit:</p>
+                  <p>
+                    <span className='font-semibold'>{`${
+                      totalSize && formatFileSize(totalSize)
+                    } / `}</span>
+                    <span className='text-gray/3 font-medium'>1GB</span>
+                  </p>
+                </div>
               </div>
-            </div>
+              <CloseForm
+                handleSave={() => {
+                  emitEvent('appNavigation:save');
+                }}
+                handleExist={() => {
+                  emitEvent('appNavigation:exist');
+                }}
+              />
+            </>
           )}
           {desktopOrderStep === 2 && (
             <div className='flex items-center gap-2 px-9'>

src/components/order/common/CloseForm.tsx

@@ -16,14 +16,15 @@ export function useCloseForm() {
     handleExist: () => Promise<void> | void;
   }> = ({ handleSave, handleExist }) =>
     useMemo(() => {
-      const handleOpenDialog = () => {
-        setOpenDialog(!openDialog);
-      };
-
       return (
-        <Dialog open={openDialog} handler={handleOpenDialog} size='xs'>
+        <Dialog open={openDialog} handler={() => setOpenDialog(false)} size='xs'>
           <DialogHeader className='justify-end py-2'>
-            <IconButton color='blue-gray' size='sm' variant='text' onClick={handleOpenDialog}>
+            <IconButton
+              color='blue-gray'
+              size='sm'
+              variant='text'
+              onClick={() => setOpenDialog(false)}
+            >
               <svg
                 xmlns='http://www.w3.org/2000/svg'
                 fill='none'
@@ -36,16 +37,28 @@ export function useCloseForm() {
               </svg>
             </IconButton>
           </DialogHeader>
-          <DialogBody className='px-[50px] py-2 text-center'>
-            <Typography variant='h4' color='black'>
-              Do you want to save your changes?
+          <DialogBody className='px-[25px] py-2 text-center'>
+            <Typography variant='h5' color='black'>
+              Bạn có muốn tiếp tục đặt hàng?
             </Typography>
-            <Typography variant='h6'>Your changes will be lost if you don't save them</Typography>
             <div className='flex items-center justify-center gap-5 mt-4'>
-              <Button className='bg-green-500' onClick={handleSave}>
-                Save changes
+              <Button
+                className='bg-green-500'
+                onClick={() => {
+                  setOpenDialog(false);
+                  handleSave();
+                }}
+              >
+                Tiếp tục
+              </Button>
+              <Button
+                onClick={() => {
+                  setOpenDialog(false);
+                  handleExist();
+                }}
+              >
+                Không
               </Button>
-              <Button onClick={handleExist}>Don't save</Button>
             </div>
           </DialogBody>
         </Dialog>

src/components/order/common/FileBox.tsx

@@ -1,13 +1,11 @@
 import { useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { ArrowUpTrayIcon } from '@heroicons/react/24/solid';
-import { ScreenSize } from '@constants';
-import { useScreenSize, usePrintingRequestMutation } from '@hooks';
+import { usePrintingRequestMutation } from '@hooks';
 import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
 
 export function FileBox() {
   const queryClient = useQueryClient();
-  const { screenSize } = useScreenSize();
   const { setIsFileUploadSuccess } = useOrderPrintStore();
   const { mobileOrderStep, setMobileOrderStep, setDesktopOrderStep } = useOrderWorkflowStore();
   const { uploadFile } = usePrintingRequestMutation();
@@ -24,18 +22,14 @@ export function FileBox() {
           file: event.target.files[0]
         });
         setIsFileUploadSuccess(true);
-        if (screenSize <= ScreenSize.MD) {
-          setMobileOrderStep({
-            current: 0,
-            prev: mobileOrderStep.current
-          });
-        } else {
-          setDesktopOrderStep(0);
-        }
+        setMobileOrderStep({
+          current: 0,
+          prev: mobileOrderStep.current
+        });
+        setDesktopOrderStep(0);
       }
     },
     [
-      screenSize,
       mobileOrderStep,
       uploadFile,
       queryClient,

src/components/order/desktop/ConfirmOrderDesktop.tsx

@@ -20,9 +20,12 @@ import {
   QuestionMarkCircleIcon
 } from '@heroicons/react/24/solid';
 import coinImage from '@assets/coin.png';
+import { useOrderPrintStore } from '@states';
 import { formatFileSize } from '@utils';
 
 export function ConfirmOrderDektop() {
+  const { totalCost } = useOrderPrintStore();
+
   const User_Balance = 200;
   const FEE = [
     { name: 'Print fee', price: 2400 },
@@ -248,9 +251,7 @@ export function ConfirmOrderDektop() {
               <span className='text-base font-medium text-gray/4'>Total cost</span>
               <div className='flex'>
                 <img src={coinImage} alt='Coin Icon' className='w-6 h-6 mr-1' />
-                <span className='text-base font-bold text-[#D97706]'>
-                  {FEE.reduce((total, item) => total + item.price, 0)}
-                </span>
+                <span className='text-base font-bold text-[#D97706]'>{totalCost}</span>
               </div>
             </div>
           </div>

src/components/order/desktop/OrderListDesktop.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, useCallback, useMemo, useState } from 'react';
+import { MutableRefObject, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   createColumnHelper,
@@ -13,14 +13,13 @@ import {
   DialogBody,
   DialogHeader,
   IconButton,
-  Spinner,
   Typography
 } from '@material-tailwind/react';
 import { TrashIcon, ClipboardDocumentListIcon } from '@heroicons/react/24/outline';
 import { EyeIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
 import coinImage from '@assets/coin.png';
 import { FileBox } from '@components/order/common';
-import { usePrintingRequestMutation, usePrintingRequestQuery } from '@hooks';
+import { usePrintingRequestMutation, usePrintingRequestQuery, useListenEvent } from '@hooks';
 import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
 import { formatFileSize } from '@utils';
 import { usePreviewDocumentDesktop } from './PreviewDocumentDesktop';
@@ -29,15 +28,17 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject<nu
   initialTotalCost
 }) => {
   const queryClient = useQueryClient();
-  const { updateAmountFile, deleteFile } = usePrintingRequestMutation();
+  const printingRequestId = queryClient.getQueryData<PrintingRequestId>(['printingRequestId']);
+  const { updateAmountFile, deleteFile, cancelPrintingRequest } = usePrintingRequestMutation();
   const {
     listFiles: { data: listFiles, isFetching, isError, refetch: refetchListFiles }
   } = usePrintingRequestQuery();
 
   const { openPreviewDocumentDesktop, PreviewDocumentDesktop } = usePreviewDocumentDesktop();
 
-  const { totalCost, setIsOrderUpdate, setTotalCost } = useOrderPrintStore();
-  const { setDesktopOrderStep } = useOrderWorkflowStore();
+  const { totalCost, setIsOrderUpdate, setIsFileUploadSuccess, setTotalCost } =
+    useOrderPrintStore();
+  const { setDesktopOrderStep, setMobileOrderStep } = useOrderWorkflowStore();
   const [openDialog, setOpenDialog] = useState<boolean>(false);
   const [fileDeletedParams, setFileDeletedParams] = useState<{
     fileId: string;
@@ -49,10 +50,29 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject<nu
     numOfCopies: -1
   });
 
+  useEffect(() => {
+    setTotalCost(initialTotalCost.current);
+  }, [initialTotalCost, setTotalCost]);
+
   const handleSaveOrderUpdate = () => {
     initialTotalCost.current = totalCost;
     setIsOrderUpdate(false);
     setDesktopOrderStep(2);
+    setMobileOrderStep({
+      current: 3,
+      prev: 2
+    });
+  };
+
+  const handleExistOrderUpdate = async () => {
+    initialTotalCost.current = 0;
+    setTotalCost(0);
+    setIsFileUploadSuccess(false);
+    setIsOrderUpdate(false);
+    setDesktopOrderStep(0);
+    if (printingRequestId?.id) {
+      await cancelPrintingRequest.mutateAsync(printingRequestId?.id);
+    }
   };
 
   const handleDeleteFile = async (fileId: string, fileCoin: number, numOfCopies: number) => {
@@ -95,6 +115,9 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject<nu
     [initialTotalCost, totalCost, updateAmountFile, setTotalCost, refetchListFiles]
   );
 
+  useListenEvent('appNavigation:save', handleSaveOrderUpdate);
+  useListenEvent('appNavigation:exist', handleExistOrderUpdate);
+
   const columnHelper = createColumnHelper<FileExtraMetadata>();
   const columnDefs = useMemo(
     () => [
@@ -244,14 +267,15 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject<nu
             <tbody className='bg-white'>
               {listFiles && listFiles.length > 0 ? (
                 isFetching ? (
-                  <tr>
-                    <td colSpan={fileTable.getLeafHeaders().length}>
-                      <div className='grid justify-items-center items-center'>
-                        <Spinner color='green' className='h-12 w-12' />
-                        <span>Đang tải dữ liệu...</span>
-                      </div>
-                    </td>
-                  </tr>
+                  fileTable.getRowModel().rows.map((row) => (
+                    <tr key={row.id}>
+                      {row.getAllCells().map((cell) => (
+                        <td key={cell.id}>
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
                 ) : isError ? (
                   <tr>
                     <td colSpan={fileTable.getLeafHeaders().length}>
@@ -318,7 +342,9 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject<nu
           </div>
           <Button
             className='uppercase font-bold text-white text-xl bg-blue/1 w-full rounded-t-none'
+            color={listFiles && listFiles.length > 0 ? 'blue' : 'gray'}
             onClick={handleSaveOrderUpdate}
+            disabled={!listFiles || listFiles.length === 0}
           >
             order
           </Button>

src/components/order/desktop/UploadAndPreviewDesktop.tsx

@@ -97,6 +97,10 @@ export const UploadAndPreviewDesktop: Component<{
         emitEvent('listFiles:refetch');
       }
       setDesktopOrderStep(1);
+      setMobileOrderStep({
+        current: 2,
+        prev: 0
+      });
     } else {
       initialTotalCost.current = 0;
       setTotalCost(0);
@@ -122,9 +126,31 @@ export const UploadAndPreviewDesktop: Component<{
     setTotalCost,
     setIsFileUploadSuccess,
     setDesktopOrderStep,
+    setMobileOrderStep,
     handleCloseUploadForm
   ]);
 
+  const handleOpenCloseForm = async () => {
+    if (fileMetadata?.fileId) {
+      openCloseForm();
+    } else {
+      if (isOrderUpdate) {
+        if (fileMetadata?.fileId) {
+          openCloseForm();
+        } else {
+          setDesktopOrderStep(1);
+          setMobileOrderStep({
+            current: 2,
+            prev: 0
+          });
+        }
+      } else {
+        setIsFileUploadSuccess(false);
+        handleCloseUploadForm();
+      }
+    }
+  };
+
   const handleLayoutChange = (e: ChangeEvent<HTMLInputElement>) => {
     setPageBothSide(
       e.target.value === LAYOUT_SIDE.portrait
@@ -171,7 +197,7 @@ export const UploadAndPreviewDesktop: Component<{
   return (
     <>
       <div className='flex justify-end'>
-        <IconButton variant='text' onClick={openCloseForm}>
+        <IconButton variant='text' onClick={handleOpenCloseForm}>
           <XMarkIcon className='w-6 h-6' />
         </IconButton>
         <CloseForm handleSave={handleSaveFileConfig} handleExist={handleExistCloseForm} />

src/components/order/mobile/OrderListForm.tsx

@@ -16,7 +16,7 @@ export const OrderListForm: Component<{
 
   const { totalCost, setTotalCost, setIsFileUploadSuccess, setIsOrderUpdate } =
     useOrderPrintStore();
-  const { setMobileOrderStep } = useOrderWorkflowStore();
+  const { setMobileOrderStep, setDesktopOrderStep } = useOrderWorkflowStore();
   const { openCloseForm, CloseForm } = useCloseForm();
 
   const totalSize = useMemo(
@@ -47,7 +47,8 @@ export const OrderListForm: Component<{
       current: 3,
       prev: 2
     });
-  }, [initialTotalCost, totalCost, setIsOrderUpdate, setMobileOrderStep]);
+    setDesktopOrderStep(2);
+  }, [initialTotalCost, totalCost, setIsOrderUpdate, setMobileOrderStep, setDesktopOrderStep]);
 
   return (
     <div>