From 59103ee5f7c88f5ea5e5ea7b2f021c2b4c6a8316 Mon Sep 17 00:00:00 2001 From: ngyngcphu Date: Thu, 23 Nov 2023 01:10:16 +0700 Subject: [PATCH] fix(order-step): add prev step and current step in order printing --- src/components/home/ChooseFileBox.tsx | 5 +- src/components/order/common/FileBox.tsx | 5 +- .../order/desktop/UploadAndPreviewDocBox.tsx | 19 ++---- .../order/mobile/ConfirmOrderForm.tsx | 6 +- src/components/order/mobile/FileInfo.tsx | 60 ++++++++++++++----- src/components/order/mobile/OrderListForm.tsx | 10 +++- .../order/mobile/OrderSuccessForm.tsx | 9 +-- .../order/mobile/OrderWorkflowBox.tsx | 47 +++++++++++---- .../order/mobile/TopupWalletForm.tsx | 7 +-- .../order/mobile/UploadDocumentForm.tsx | 56 +++++++++-------- src/states/orderWorkflow.state.ts | 5 +- src/states/printingRequest.state.ts | 3 - src/types/orderWorkflow.d.ts | 9 ++- src/types/printingRequest.d.ts | 1 - 14 files changed, 152 insertions(+), 90 deletions(-) diff --git a/src/components/home/ChooseFileBox.tsx b/src/components/home/ChooseFileBox.tsx index 88a4678..63cc75c 100644 --- 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 index f2020c9..b8cc807 100644 --- 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 index f070131..a18fc62 100644 --- 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({ - numOfCopies: fileConfig.numOfCopies, - layout: fileConfig.layout, - pages: fileConfig.pages, - pagesPerSheet: fileConfig.pagesPerSheet, - pageSide: fileConfig.pageSide - }); const initialTotalCost = useRef(totalCost); - const [specificPage, setSpecificPage] = useState(''); const [pageBothSide, setPageBothSide] = useState( 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 index de79684..318e930 100644 --- 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() {
setMobileOrderStep(2)} + // onClick={() => setMobileOrderStep(2)} className='cursor-pointer' /> Confirm order diff --git a/src/components/order/mobile/FileInfo.tsx b/src/components/order/mobile/FileInfo.tsx index d8a0374..0df9b23 100644 --- 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; +}> = ({ fileExtraMetadata, isConfigStep, fileIndex, initialTotalCost }) => { + const { + totalCost, + listFileAmount, + setFileConfig, + setTotalCost, + setListFileAmount, + clearFileConfig + } = useOrderPrintStore(); + //const { setMobileOrderStep } = useOrderWorkflowStore(); const { deleteFile } = usePrintingRequestMutation(); const [openDialog, setOpenDialog] = useState(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<{
setMobileOrderStep(1)} + //onClick={() => setMobileOrderStep(1)} > Preview diff --git a/src/components/order/mobile/OrderListForm.tsx b/src/components/order/mobile/OrderListForm.tsx index ebc7df9..c86ad78 100644 --- 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; +}> = ({ initialTotalCost }) => { const queryClient = useQueryClient(); const printingRequestId = queryClient.getQueryData(['printingRequestId']); const { data: listFiles } = useQuery({ @@ -55,9 +58,10 @@ export const OrderListForm: Component<{ handleExistOrderForm: () => void }> = ({ {listFiles.map((file, index) => (
))} diff --git a/src/components/order/mobile/OrderSuccessForm.tsx b/src/components/order/mobile/OrderSuccessForm.tsx index add307a..ed84316 100644 --- 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 ( <>
OrderSuccessForm
- - + {/* + */} ); } diff --git a/src/components/order/mobile/OrderWorkflowBox.tsx b/src/components/order/mobile/OrderWorkflowBox.tsx index e1fd803..f69c7d8 100644 --- 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(false); const DialogBodyWorkflow = () => { + const queryClient = useQueryClient(); + const fileIdCurrent = queryClient.getQueryData(['fileIdCurrent']); + const { data: fileMetadata } = useQuery({ + queryKey: ['fileMetadata', fileIdCurrent], + queryFn: () => queryClient.getQueryData(['fileMetadata', fileIdCurrent]) + }); + + const { totalCost, setTotalCost } = useOrderPrintStore(); const { mobileOrderStep } = useOrderWorkflowStore(); + const initialTotalCost = useRef(totalCost); + const handleExistOrderForm = useCallback(() => { setOpenDialog(false); }, []); - if (mobileOrderStep === 0) { - return ; - } else if (mobileOrderStep === 1) { + useEffect(() => { + if (fileMetadata?.fileCoin) { + setTotalCost(initialTotalCost.current + fileMetadata?.fileCoin); + } + }, [fileMetadata?.fileCoin, setTotalCost]); + + if (mobileOrderStep.current === 0) { + return ( + + ); + } else if (mobileOrderStep.current === 1) { return ; - } else if (mobileOrderStep === 2) { - return ; - } else if (mobileOrderStep === 3) { + } else if (mobileOrderStep.current === 2) { + return ( + + ); + } else if (mobileOrderStep.current === 3) { return ; - } else if (mobileOrderStep === 4) { + } else if (mobileOrderStep.current === 4) { return ; - } else if (mobileOrderStep === 5) { + } else if (mobileOrderStep.current === 5) { return ; } }; diff --git a/src/components/order/mobile/TopupWalletForm.tsx b/src/components/order/mobile/TopupWalletForm.tsx index c208c5e..c47ecab 100644 --- 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 ( <>
TopupWalletForm
- + {/* */} ); } diff --git a/src/components/order/mobile/UploadDocumentForm.tsx b/src/components/order/mobile/UploadDocumentForm.tsx index e535e1a..62447c0 100644 --- a/src/components/order/mobile/UploadDocumentForm.tsx +++ b/src/components/order/mobile/UploadDocumentForm.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'; +import { ChangeEvent, MutableRefObject, useCallback, useState } from 'react'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { Button, @@ -16,9 +16,10 @@ import { usePrintingRequestMutation } from '@hooks'; import { useOrderWorkflowStore, useOrderPrintStore } from '@states'; import { FileInfo } from './FileInfo'; -export const UploadDocumentForm: Component<{ handleExistOrderForm: () => void }> = ({ - handleExistOrderForm -}) => { +export const UploadDocumentForm: Component<{ + handleExistOrderForm: () => void; + initialTotalCost: MutableRefObject; +}> = ({ handleExistOrderForm, initialTotalCost }) => { const queryClient = useQueryClient(); const fileIdCurrent = queryClient.getQueryData(['fileIdCurrent']); const { data: fileMetadata } = useQuery({ @@ -31,22 +32,13 @@ export const UploadDocumentForm: Component<{ handleExistOrderForm: () => void }> totalCost, fileConfig, setFileConfig, - resetFileConfig, setTotalCost, - setIsFileUploadSuccess + setIsFileUploadSuccess, + clearFileConfig } = useOrderPrintStore(); const { openLayoutSide, LayoutSide } = useLayoutSide(); const { openCloseForm, CloseForm } = useCloseForm(); - const initialFileConfig = useRef({ - numOfCopies: fileConfig.numOfCopies, - layout: fileConfig.layout, - pages: fileConfig.pages, - pagesPerSheet: fileConfig.pagesPerSheet, - pageSide: fileConfig.pageSide - }); - const initialTotalCost = useRef(totalCost); - const [specificPage, setSpecificPage] = useState(''); const [pageBothSide, setPageBothSide] = useState( fileConfig.layout === LAYOUT_SIDE.portrait @@ -54,12 +46,6 @@ export const UploadDocumentForm: Component<{ handleExistOrderForm: () => void }> : PAGE_SIDE.both.landscape[0]! ); - useEffect(() => { - if (fileMetadata?.fileCoin) { - setTotalCost(initialTotalCost.current + fileMetadata?.fileCoin); - } - }, [fileMetadata?.fileCoin, setTotalCost]); - const handlePageBothSide = useCallback( (event: string) => { setPageBothSide(event); @@ -74,16 +60,36 @@ export const UploadDocumentForm: Component<{ handleExistOrderForm: () => void }> fileId: fileMetadata.fileId, fileConfig: fileConfig }); - setMobileOrderStep(2); + initialTotalCost.current = totalCost; + clearFileConfig(); + setMobileOrderStep({ + current: 2, + prev: 1 + }); } - }, [fileMetadata?.fileId, fileConfig, setMobileOrderStep, uploadFileConfig]); + }, [ + fileMetadata?.fileId, + fileConfig, + totalCost, + initialTotalCost, + setMobileOrderStep, + uploadFileConfig, + clearFileConfig + ]); const handleExistCloseForm = useCallback(() => { - resetFileConfig(initialFileConfig.current); + initialTotalCost.current = 0; + clearFileConfig(); setTotalCost(0); setIsFileUploadSuccess(false); handleExistOrderForm(); - }, [handleExistOrderForm, resetFileConfig, setTotalCost, setIsFileUploadSuccess]); + }, [ + initialTotalCost, + handleExistOrderForm, + clearFileConfig, + setTotalCost, + setIsFileUploadSuccess + ]); const handleLayoutChange = (e: ChangeEvent) => { setPageBothSide( diff --git a/src/states/orderWorkflow.state.ts b/src/states/orderWorkflow.state.ts index 46c47e7..e009906 100644 --- a/src/states/orderWorkflow.state.ts +++ b/src/states/orderWorkflow.state.ts @@ -3,7 +3,10 @@ import { devtools } from 'zustand/middleware'; export const useOrderWorkflowStore = create()( devtools((set) => ({ - mobileOrderStep: 0, + mobileOrderStep: { + current: 0, + prev: -1 + }, desktopOrderStep: 0, setMobileOrderStep: (mobileOrderStep) => { set({ mobileOrderStep: mobileOrderStep }); diff --git a/src/states/printingRequest.state.ts b/src/states/printingRequest.state.ts index e6ad37b..8af70c8 100644 --- a/src/states/printingRequest.state.ts +++ b/src/states/printingRequest.state.ts @@ -20,9 +20,6 @@ export const useOrderPrintStore = create()( setFileConfig: (key, value) => { set((state) => ({ fileConfig: { ...state.fileConfig, [key]: value } })); }, - resetFileConfig: (fileConfig) => { - set({ fileConfig: fileConfig }); - }, clearFileConfig: () => { set({ fileConfig: { diff --git a/src/types/orderWorkflow.d.ts b/src/types/orderWorkflow.d.ts index 24b8485..1ad40fb 100644 --- a/src/types/orderWorkflow.d.ts +++ b/src/types/orderWorkflow.d.ts @@ -1,6 +1,11 @@ +type OrderStep = { + current: number; + prev: number; +}; + type OrderWorkflowStore = { - mobileOrderStep: number; + mobileOrderStep: OrderStep; desktopOrderStep: number; - setMobileOrderStep: (mobileOrderStep: number) => void; + setMobileOrderStep: (mobileOrderStep: OrderStep) => void; setDesktopOrderStep: (desktopOrderStep: number) => void; }; diff --git a/src/types/printingRequest.d.ts b/src/types/printingRequest.d.ts index 7d48c34..75c9cdd 100644 --- a/src/types/printingRequest.d.ts +++ b/src/types/printingRequest.d.ts @@ -31,7 +31,6 @@ type PrintingRequestStore = { listFileAmount: FileAmount[]; setIsFileUploadSuccess: (data: boolean) => void; setFileConfig: (key: string, value: string | number) => void; - resetFileConfig: (fileConfig: FileConfig) => void; clearFileConfig: () => void; setTotalCost: (totalCost: number) => void; setListFileAmount: (payload: FileAmount) => void;