fix(order-step): add prev step and current step in order printing

TickLabVN · Nov 22, 2023 · 59103ee · 59103ee
1 parent a3da2e5
commit 59103ee
Show file tree

Hide file tree

Showing 14 changed files with 152 additions and 90 deletions.
diff --git a/src/components/home/ChooseFileBox.tsx b/src/components/home/ChooseFileBox.tsx
@@ -55,7 +55,10 @@ export function useChooseFileBox() {
           } else {
             openUploadAndPreviewDocBox();
           }
-          setMobileOrderStep(0);
+          setMobileOrderStep({
+            current: 0,
+            prev: -1
+          });
         }
       },
       [screenSize, uploadFile, setMobileOrderStep, setIsFileUploadSuccess]

diff --git a/src/components/order/common/FileBox.tsx b/src/components/order/common/FileBox.tsx
@@ -25,7 +25,10 @@ export function FileBox() {
         });
         setIsFileUploadSuccess(true);
         if (screenSize <= ScreenSize.MD) {
-          setMobileOrderStep(0);
+          setMobileOrderStep({
+            current: 0,
+            prev: -1
+          });
         } else {
           setDesktopOrderStep(0);
         }

diff --git a/src/components/order/desktop/UploadAndPreviewDocBox.tsx b/src/components/order/desktop/UploadAndPreviewDocBox.tsx
@@ -53,22 +53,14 @@ export function useUploadAndPreviewDocBox() {
       fileConfig,
       totalCost,
       setFileConfig,
-      resetFileConfig,
       setTotalCost,
-      setIsFileUploadSuccess
+      setIsFileUploadSuccess,
+      clearFileConfig
     } = useOrderPrintStore();
     const { openLayoutSide, LayoutSide } = useLayoutSide();
     const { openCloseForm, CloseForm } = useCloseForm();
 
-    const initialFileConfig = useRef<FileConfig>({
-      numOfCopies: fileConfig.numOfCopies,
-      layout: fileConfig.layout,
-      pages: fileConfig.pages,
-      pagesPerSheet: fileConfig.pagesPerSheet,
-      pageSide: fileConfig.pageSide
-    });
     const initialTotalCost = useRef<number>(totalCost);
-
     const [specificPage, setSpecificPage] = useState<string>('');
     const [pageBothSide, setPageBothSide] = useState<string>(
       fileConfig.layout === LAYOUT_SIDE.portrait
@@ -98,15 +90,16 @@ export function useUploadAndPreviewDocBox() {
           fileId: fileMetadata.fileId,
           fileConfig: fileConfig
         });
+        clearFileConfig();
       }
-    }, [fileConfig, uploadFileConfig]);
+    }, [fileConfig, uploadFileConfig, clearFileConfig]);
 
     const handleExistCloseForm = useCallback(() => {
-      resetFileConfig(initialFileConfig.current);
+      clearFileConfig();
       setTotalCost(0);
       setIsFileUploadSuccess(false);
       handleOpenDialog();
-    }, [handleOpenDialog, resetFileConfig, setTotalCost, setIsFileUploadSuccess]);
+    }, [handleOpenDialog, clearFileConfig, setTotalCost, setIsFileUploadSuccess]);
 
     const handleDecreaseCopies = () => {
       if (fileMetadata && fileConfig.numOfCopies > 1) {

diff --git a/src/components/order/mobile/ConfirmOrderForm.tsx b/src/components/order/mobile/ConfirmOrderForm.tsx
@@ -1,4 +1,4 @@
-import { useOrderWorkflowStore, useOrderPrintStore } from '@states';
+import { useOrderPrintStore } from '@states';
 import {
   PrinterIcon,
   ChevronLeftIcon,
@@ -17,7 +17,7 @@ import coin from '@assets/coin.png';
 // Tan's third-task in here.
 export function ConfirmOrderForm() {
   const { totalCost } = useOrderPrintStore();
-  const { setMobileOrderStep } = useOrderWorkflowStore();
+  //const { setMobileOrderStep } = useOrderWorkflowStore();
   //const { userRemainCoins } = useHomeStore();
   //const { extraFeeData } = useOrderExtraStore();
   // function IconSolid() {
@@ -42,7 +42,7 @@ export function ConfirmOrderForm() {
         <div className='flex items-center'>
           <ChevronLeftIcon
             width={28}
-            onClick={() => setMobileOrderStep(2)}
+            // onClick={() => setMobileOrderStep(2)}
             className='cursor-pointer'
           />
           <Typography className='ml-4 font-bold text-gray/4'>Confirm order</Typography>

diff --git a/src/components/order/mobile/FileInfo.tsx b/src/components/order/mobile/FileInfo.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useState } from 'react';
 import {
   Button,
   Dialog,
@@ -12,39 +12,60 @@ import { EyeIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
 import coinImage from '@assets/coin.png';
 import { FILE_CONFIG } from '@constants';
 import { usePrintingRequestMutation } from '@hooks';
-import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
+import { useOrderPrintStore /*useOrderWorkflowStore*/ } from '@states';
 import { formatFileSize } from '@utils';
 
 export const FileInfo: Component<{
   fileExtraMetadata: FileMetadata & { numOfCopies: number };
   isConfigStep: boolean;
   fileIndex?: number;
-}> = ({ fileExtraMetadata, isConfigStep, fileIndex }) => {
-  const { totalCost, listFileAmount, setFileConfig, setTotalCost, setListFileAmount } =
-    useOrderPrintStore();
-  const { setMobileOrderStep } = useOrderWorkflowStore();
+  initialTotalCost?: MutableRefObject<number>;
+}> = ({ fileExtraMetadata, isConfigStep, fileIndex, initialTotalCost }) => {
+  const {
+    totalCost,
+    listFileAmount,
+    setFileConfig,
+    setTotalCost,
+    setListFileAmount,
+    clearFileConfig
+  } = useOrderPrintStore();
+  //const { setMobileOrderStep } = useOrderWorkflowStore();
   const { deleteFile } = usePrintingRequestMutation();
   const [openDialog, setOpenDialog] = useState<boolean>(false);
 
   useEffect(() => {
-    setListFileAmount({
-      fileId: fileExtraMetadata.fileId,
-      numOfCopies: fileExtraMetadata.numOfCopies
-    });
-  }, [fileExtraMetadata.fileId, fileExtraMetadata.numOfCopies, setListFileAmount]);
+    if (fileIndex !== undefined && listFileAmount[fileIndex] === undefined) {
+      setListFileAmount({
+        fileId: fileExtraMetadata.fileId,
+        numOfCopies: fileExtraMetadata.numOfCopies
+      });
+    }
+  }, [
+    fileExtraMetadata.fileId,
+    fileExtraMetadata.numOfCopies,
+    fileIndex,
+    listFileAmount,
+    setListFileAmount
+  ]);
 
   const handleOpenDialog = () => setOpenDialog(!openDialog);
   const handleDecreaseCopies = () => {
-    if (fileExtraMetadata.numOfCopies > 1) {
-      if (isConfigStep) {
+    if (isConfigStep) {
+      if (fileExtraMetadata.numOfCopies > 1) {
         setFileConfig(FILE_CONFIG.numOfCopies, fileExtraMetadata.numOfCopies - 1);
-      } else if (fileIndex !== undefined) {
+        setTotalCost(totalCost - fileExtraMetadata.fileCoin);
+      }
+    } else if (fileIndex !== undefined) {
+      if ((listFileAmount[fileIndex]?.numOfCopies ?? 0) > 1) {
         setListFileAmount({
           fileId: fileExtraMetadata.fileId,
           numOfCopies: (listFileAmount[fileIndex]?.numOfCopies ?? 0) - 1
         });
+        setTotalCost(totalCost - fileExtraMetadata.fileCoin);
+        if (initialTotalCost) {
+          initialTotalCost.current -= fileExtraMetadata.fileCoin;
+        }
       }
-      setTotalCost(totalCost - fileExtraMetadata.fileCoin);
     }
   };
   const handleIncreaseCopies = () => {
@@ -57,11 +78,18 @@ export const FileInfo: Component<{
       });
     }
     setTotalCost(totalCost + fileExtraMetadata.fileCoin);
+    if (initialTotalCost) {
+      initialTotalCost.current += fileExtraMetadata.fileCoin;
+    }
   };
 
   const handleDeleteFile = async () => {
     await deleteFile.mutateAsync(fileExtraMetadata.fileId);
     setTotalCost(totalCost - fileExtraMetadata.fileCoin * fileExtraMetadata.numOfCopies);
+    if (initialTotalCost) {
+      initialTotalCost.current -= fileExtraMetadata.fileCoin * fileExtraMetadata.numOfCopies;
+    }
+    clearFileConfig();
     handleOpenDialog();
   };
 
@@ -70,7 +98,7 @@ export const FileInfo: Component<{
       <div className='flex gap-4 px-4 py-2 bg-white '>
         <div
           className='text-white rounded-lg border-2 border-transparent shadow-lg bg-gray/3 flex flex-col items-center justify-center cursor-pointer'
-          onClick={() => setMobileOrderStep(1)}
+          //onClick={() => setMobileOrderStep(1)}
         >
           <EyeIcon width={20} />
           <span className='text-xs'>Preview</span>

diff --git a/src/components/order/mobile/OrderListForm.tsx b/src/components/order/mobile/OrderListForm.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { MutableRefObject, useMemo } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@material-tailwind/react';
 import { ChevronLeftIcon } from '@heroicons/react/24/solid';
@@ -8,7 +8,10 @@ import { useOrderPrintStore } from '@states';
 import { formatFileSize, retryQueryFn } from '@utils';
 import { FileInfo } from './FileInfo';
 
-export const OrderListForm: Component<{ handleExistOrderForm: () => void }> = ({}) => {
+export const OrderListForm: Component<{
+  handleExistOrderForm: () => void;
+  initialTotalCost: MutableRefObject<number>;
+}> = ({ initialTotalCost }) => {
   const queryClient = useQueryClient();
   const printingRequestId = queryClient.getQueryData<PrintingRequestId>(['printingRequestId']);
   const { data: listFiles } = useQuery({
@@ -55,9 +58,10 @@ export const OrderListForm: Component<{ handleExistOrderForm: () => void }> = ({
             {listFiles.map((file, index) => (
               <div key={index} className='p-4 flex gap-4 border-b-4'>
                 <FileInfo
-                  fileExtraMetadata={{ ...file, numOfCopies: file.numOfCopies }}
+                  fileExtraMetadata={file}
                   isConfigStep={false}
                   fileIndex={index}
+                  initialTotalCost={initialTotalCost}
                 />
               </div>
             ))}

diff --git a/src/components/order/mobile/OrderSuccessForm.tsx b/src/components/order/mobile/OrderSuccessForm.tsx
@@ -1,15 +1,12 @@
-import { Button } from '@material-tailwind/react';
-import { useOrderWorkflowStore } from '@states';
-
 // Tue's second-task in here.
 export function OrderSuccessForm() {
-  const { setMobileOrderStep } = useOrderWorkflowStore();
+  //const { setMobileOrderStep } = useOrderWorkflowStore();
 
   return (
     <>
       <div>OrderSuccessForm</div>
-      <Button onClick={() => setMobileOrderStep(5)}>Track this order</Button>
-      <Button onClick={() => setMobileOrderStep(3)}>Back</Button>
+      {/* <Button onClick={() => setMobileOrderStep(5)}>Track this order</Button>
+      <Button onClick={() => setMobileOrderStep(3)}>Back</Button> */}
     </>
   );
 }
diff --git a/src/components/order/mobile/OrderWorkflowBox.tsx b/src/components/order/mobile/OrderWorkflowBox.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Dialog, DialogBody } from '@material-tailwind/react';
 import {
   UploadDocumentForm,
@@ -8,28 +9,54 @@ import {
   OrderSuccessForm,
   PreviewDocument
 } from '@components/order/mobile';
-import { useOrderWorkflowStore } from '@states';
+import { useOrderWorkflowStore, useOrderPrintStore } from '@states';
 
 export function useOrderWorkflowBox() {
   const [openDialog, setOpenDialog] = useState<boolean>(false);
 
   const DialogBodyWorkflow = () => {
+    const queryClient = useQueryClient();
+    const fileIdCurrent = queryClient.getQueryData<string>(['fileIdCurrent']);
+    const { data: fileMetadata } = useQuery({
+      queryKey: ['fileMetadata', fileIdCurrent],
+      queryFn: () => queryClient.getQueryData<FileMetadata>(['fileMetadata', fileIdCurrent])
+    });
+
+    const { totalCost, setTotalCost } = useOrderPrintStore();
     const { mobileOrderStep } = useOrderWorkflowStore();
+    const initialTotalCost = useRef<number>(totalCost);
+
     const handleExistOrderForm = useCallback(() => {
       setOpenDialog(false);
     }, []);
 
-    if (mobileOrderStep === 0) {
-      return <UploadDocumentForm handleExistOrderForm={handleExistOrderForm} />;
-    } else if (mobileOrderStep === 1) {
+    useEffect(() => {
+      if (fileMetadata?.fileCoin) {
+        setTotalCost(initialTotalCost.current + fileMetadata?.fileCoin);
+      }
+    }, [fileMetadata?.fileCoin, setTotalCost]);
+
+    if (mobileOrderStep.current === 0) {
+      return (
+        <UploadDocumentForm
+          handleExistOrderForm={handleExistOrderForm}
+          initialTotalCost={initialTotalCost}
+        />
+      );
+    } else if (mobileOrderStep.current === 1) {
       return <PreviewDocument />;
-    } else if (mobileOrderStep === 2) {
-      return <OrderListForm handleExistOrderForm={handleExistOrderForm} />;
-    } else if (mobileOrderStep === 3) {
+    } else if (mobileOrderStep.current === 2) {
+      return (
+        <OrderListForm
+          handleExistOrderForm={handleExistOrderForm}
+          initialTotalCost={initialTotalCost}
+        />
+      );
+    } else if (mobileOrderStep.current === 3) {
       return <ConfirmOrderForm />;
-    } else if (mobileOrderStep === 4) {
+    } else if (mobileOrderStep.current === 4) {
       return <TopupWalletForm />;
-    } else if (mobileOrderStep === 5) {
+    } else if (mobileOrderStep.current === 5) {
       return <OrderSuccessForm />;
     }
   };

diff --git a/src/components/order/mobile/TopupWalletForm.tsx b/src/components/order/mobile/TopupWalletForm.tsx
@@ -1,14 +1,11 @@
-import { Button } from '@material-tailwind/react';
-import { useOrderWorkflowStore } from '@states';
-
 // Tue's first-task in here.
 export function TopupWalletForm() {
-  const { setMobileOrderStep } = useOrderWorkflowStore();
+  //const { setMobileOrderStep } = useOrderWorkflowStore();
 
   return (
     <>
       <div>TopupWalletForm</div>
-      <Button onClick={() => setMobileOrderStep(3)}>Top up wallet</Button>
+      {/* <Button onClick={() => setMobileOrderStep(3)}>Top up wallet</Button> */}
     </>
   );
 }