Merge pull request #41 from TickLabVN/feature/order-success

Feature/order success

package.json

@@ -23,8 +23,10 @@
     "@react-oauth/google": "^0.12.1",
     "@tanstack/react-query": "^5.8.4",
     "@tanstack/react-table": "^8.10.7",
+    "buffer": "^6.0.3",
     "moment": "^2.29.4",
     "openapi-fetch": "^0.8.1",
+    "pdf-lib": "^1.17.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",

src/App.tsx

@@ -37,59 +37,57 @@ export default function App() {
 
   if (isSuccess) {
     return (
-      <>
-        <AppLayout
-          menu={[
-            {
-              type: 'skeleton',
-              path: '/',
-              name: 'Skeleton',
-              element: <AppSkeleton />
-            },
-            {
-              type: 'main-item',
-              path: '/home',
-              name: MAIN_MENU.home,
-              element: <HomePage />
-            },
-            {
-              type: 'main-item',
-              path: '/order',
-              name: MAIN_MENU.order,
-              element: <></>
-            },
-            {
-              type: 'main-item',
-              path: '/payment',
-              name: MAIN_MENU.payment,
-              element: <></>
-            },
-            {
-              type: 'main-item',
-              path: '/location',
-              name: MAIN_MENU.location,
-              element: <></>
-            },
-            {
-              type: 'sub-item',
-              path: '/help',
-              name: SUB_MENU.help,
-              element: <></>
-            },
-            {
-              type: 'sub-item',
-              path: '/settings',
-              name: SUB_MENU.settings,
-              element: <></>
-            },
-            {
-              type: 'logout-btn',
-              name: SUB_MENU.logout,
-              onClick: () => emitEvent('logout')
-            }
-          ]}
-        />
-      </>
+      <AppLayout
+        menu={[
+          {
+            type: 'skeleton',
+            path: '/',
+            name: 'Skeleton',
+            element: <AppSkeleton />
+          },
+          {
+            type: 'main-item',
+            path: '/home',
+            name: MAIN_MENU.home,
+            element: <HomePage />
+          },
+          {
+            type: 'main-item',
+            path: '/order',
+            name: MAIN_MENU.order,
+            element: <></>
+          },
+          {
+            type: 'main-item',
+            path: '/payment',
+            name: MAIN_MENU.payment,
+            element: <></>
+          },
+          {
+            type: 'main-item',
+            path: '/location',
+            name: MAIN_MENU.location,
+            element: <></>
+          },
+          {
+            type: 'sub-item',
+            path: '/help',
+            name: SUB_MENU.help,
+            element: <></>
+          },
+          {
+            type: 'sub-item',
+            path: '/settings',
+            name: SUB_MENU.settings,
+            element: <></>
+          },
+          {
+            type: 'logout-btn',
+            name: SUB_MENU.logout,
+            onClick: () => emitEvent('logout')
+          }
+        ]}
+      />
     );
   }
 }

src/components/common/AppNavigation.tsx

@@ -5,7 +5,7 @@ import { AppDrawer, DesktopNavbar, ToggleSidebarBtn, useSidebarMenu } from '@com
 import { useCloseForm } from '@components/order/common';
 import { ScreenSize } from '@constants';
 import { useScreenSize, useUserQuery, usePrintingRequestQuery, emitEvent } from '@hooks';
-import { useMenuBarStore, useOrderWorkflowStore } from '@states';
+import { useMenuBarStore, useOrderPrintStore, useOrderWorkflowStore } from '@states';
 import { formatFileSize } from '@utils';
 
 export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu }> = ({
@@ -15,7 +15,8 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
   const { screenSize } = useScreenSize();
   const { openSidebar, handleOpenSidebar, SidebarMenu } = useSidebarMenu();
   const { selectedMenu } = useMenuBarStore();
-  const { desktopOrderStep } = useOrderWorkflowStore();
+  const { setIsOrderUpdate } = useOrderPrintStore();
+  const { desktopOrderStep, setDesktopOrderStep, setMobileOrderStep } = useOrderWorkflowStore();
 
   const { openCloseForm, CloseForm } = useCloseForm();
 
@@ -70,7 +71,7 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
               <div className='flex items-center justify-between px-6'>
                 <div className='flex items-center gap-2'>
                   <ChevronLeftIcon
-                    className='w-5 h-5 hover:bg-gray-100 cursor-pointer p-2 rounded-full'
+                    className='w-5 h-5 hover:bg-gray-100 cursor-pointer rounded-full'
                     onClick={openCloseForm}
                   />
                   <p className='text-gray/4 font-semibold text-xl'>Order list</p>
@@ -98,10 +99,35 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu
           )}
           {desktopOrderStep === 2 && (
             <div className='flex items-center gap-2 px-9'>
-              <ChevronLeftIcon className='w-5 h-5' />
+              <ChevronLeftIcon
+                className='w-5 h-5 hover:bg-gray-100 cursor-pointer rounded-full'
+                onClick={() => {
+                  setIsOrderUpdate(true);
+                  setDesktopOrderStep(1);
+                  setMobileOrderStep({
+                    current: 2,
+                    prev: 3
+                  });
+                }}
+              />
               <p className='text-gray/4 font-semibold text-lg'>Confirm order</p>
             </div>
           )}
+          {desktopOrderStep === 3 && (
+            <div className='flex items-center gap-2 px-9'>
+              <ChevronLeftIcon
+                className='w-5 h-5 hover:bg-gray-100 cursor-pointer rounded-full'
+                onClick={() => {
+                  setDesktopOrderStep(2);
+                  setMobileOrderStep({
+                    current: 3,
+                    prev: 4
+                  });
+                }}
+              />
+              <p className='text-gray/4 font-semibold text-lg'>Top up wallet</p>
+            </div>
+          )}
         </>
       )}
     </div>

src/components/home/ChooseFileBox.tsx

@@ -4,17 +4,20 @@ import { Dialog, DialogBody } from '@material-tailwind/react';
 import { ArrowUpTrayIcon } from '@heroicons/react/24/outline';
 import { useOrderWorkflow } from '@components/order/common';
 import { ScreenSize } from '@constants';
-import { useScreenSize, usePrintingRequestMutation } from '@hooks';
+import { useScreenSize, usePrintingRequestMutation, usePrintingRequestQuery } from '@hooks';
 import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
+import { formatFileSize } from '@utils';
 
 export function useChooseFileBox() {
   const queryClient = useQueryClient();
   const [openBox, setOpenBox] = useState<boolean>(false);
   const { openOrderWorkflow, closeOrderWorkflow, OrderWorkflow } = useOrderWorkflow();
 
-  const ChooseFileBox: Component<{ initialTotalCost: MutableRefObject<number> }> = ({
-    initialTotalCost
-  }) => {
+  const ChooseFileBox: Component<{
+    initialTotalCost: MutableRefObject<number>;
+    handleOpenOrderSuccessDesktop: () => void;
+    handleCloseOrderSuccessDesktop: () => void;
+  }> = ({ initialTotalCost, handleOpenOrderSuccessDesktop, handleCloseOrderSuccessDesktop }) => {
     const printingRequestId = queryClient.getQueryData<PrintingRequestId>(['printingRequestId']);
     const fileIdCurrent = queryClient.getQueryData<string>(['fileIdCurrent']) || null;
     const { data: fileMetadata } = useQuery({
@@ -23,7 +26,12 @@ export function useChooseFileBox() {
     });
     const { screenSize } = useScreenSize();
     const { desktopOrderStep, mobileOrderStep, setMobileOrderStep } = useOrderWorkflowStore();
-    const { isFileUploadSuccess, setIsFileUploadSuccess, setTotalCost } = useOrderPrintStore();
+    const { isFileUploadSuccess, isOrderSuccess, setIsFileUploadSuccess, setTotalCost } =
+      useOrderPrintStore();
+
+    const {
+      fileUploadRequirement: [acceptedFileExtension, maxFileSize]
+    } = usePrintingRequestQuery();
     const { uploadFile, cancelPrintingRequest } = usePrintingRequestMutation();
 
     useEffect(() => {
@@ -36,17 +44,30 @@ export function useChooseFileBox() {
       if (isFileUploadSuccess) {
         if (screenSize <= ScreenSize.MD) {
           openOrderWorkflow();
+          if (isOrderSuccess) {
+            handleCloseOrderSuccessDesktop();
+          }
         } else {
           if (desktopOrderStep === 0) {
             openOrderWorkflow();
           } else {
             closeOrderWorkflow();
           }
+          if (isOrderSuccess) {
+            handleOpenOrderSuccessDesktop();
+          }
         }
       } else {
         closeOrderWorkflow();
       }
-    }, [screenSize, desktopOrderStep, isFileUploadSuccess]);
+    }, [
+      screenSize,
+      desktopOrderStep,
+      isFileUploadSuccess,
+      isOrderSuccess,
+      handleOpenOrderSuccessDesktop,
+      handleCloseOrderSuccessDesktop
+    ]);
 
     const handleUploadDocument = useCallback(
       async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -97,10 +118,11 @@ export function useChooseFileBox() {
               </div>
 
               <div className='text-sm lg:text-md w-54 h-13 gap-1'>
-                <span className='font-semibold h-8'>Allowed formats:</span> .doc, .docx, .xls,
-                .xlsx, .ppt, .jpg, .png, .pdf
+                <span className='font-semibold h-8'>Allowed formats:</span>{' '}
+                {acceptedFileExtension.data?.map((fileType) => `.${fileType}`).join(', ')}
                 <div className='text-sm lg:text-md h-4'>
-                  <span className='font-semibold'>Maximum size:</span> 100MB
+                  <span className='font-semibold'>Maximum size:</span>{' '}
+                  {maxFileSize.data !== undefined && formatFileSize(maxFileSize.data)}
                 </div>
               </div>
 

src/components/order/common/FileBox.tsx

@@ -1,13 +1,18 @@
 import { useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { ArrowUpTrayIcon } from '@heroicons/react/24/solid';
-import { usePrintingRequestMutation } from '@hooks';
+import { usePrintingRequestMutation, usePrintingRequestQuery } from '@hooks';
 import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
+import { formatFileSize } from '@utils';
 
 export function FileBox() {
   const queryClient = useQueryClient();
   const { setIsFileUploadSuccess } = useOrderPrintStore();
   const { mobileOrderStep, setMobileOrderStep, setDesktopOrderStep } = useOrderWorkflowStore();
+
+  const {
+    fileUploadRequirement: [acceptedFileExtension, maxFileSize]
+  } = usePrintingRequestQuery();
   const { uploadFile } = usePrintingRequestMutation();
 
   const handleUploadDocument = useCallback(
@@ -55,10 +60,11 @@ export function FileBox() {
       </div>
 
       <div className='text-sm lg:text-md w-54 h-13 gap-1'>
-        <span className='font-semibold h-8'>Allowed formats:</span> .doc, .docx, .xls, .xlsx, .ppt,
-        .jpg, .png, .pdf
+        <span className='font-semibold h-8'>Allowed formats:</span>{' '}
+        {acceptedFileExtension.data?.map((fileType) => `.${fileType}`).join(', ')}
         <div className='text-sm lg:text-md h-4'>
-          <span className='font-semibold'>Maximum size:</span> 100MB
+          <span className='font-semibold'>Maximum size:</span>{' '}
+          {maxFileSize.data !== undefined && formatFileSize(maxFileSize.data)}
         </div>
       </div>
 

src/components/order/common/FileInfo.tsx

@@ -26,6 +26,7 @@ export const FileInfo: Component<{
 
   const {
     totalCost,
+    fileCoins,
     setFileConfig,
     setTotalCost,
     clearFileConfig,
@@ -39,7 +40,7 @@ export const FileInfo: Component<{
     if (fileExtraMetadata.numOfCopies > 1) {
       if (isConfigStep) {
         setFileConfig(FILE_CONFIG.numOfCopies, fileExtraMetadata.numOfCopies - 1);
-        setTotalCost(totalCost - fileExtraMetadata.fileCoin);
+        setTotalCost(totalCost - fileCoins);
       } else {
         await updateAmountFile.mutateAsync({
           fileId: fileExtraMetadata.fileId,
@@ -56,14 +57,15 @@ export const FileInfo: Component<{
   const handleIncreaseCopies = async () => {
     if (isConfigStep) {
       setFileConfig(FILE_CONFIG.numOfCopies, fileExtraMetadata.numOfCopies + 1);
+      setTotalCost(totalCost + fileCoins);
     } else {
       await updateAmountFile.mutateAsync({
         fileId: fileExtraMetadata.fileId,
         numOfCopies: fileExtraMetadata.numOfCopies + 1
       });
       emitEvent('listFiles:refetch');
+      setTotalCost(totalCost + fileExtraMetadata.fileCoin);
     }
-    setTotalCost(totalCost + fileExtraMetadata.fileCoin);
     if (initialTotalCost) {
       initialTotalCost.current += fileExtraMetadata.fileCoin;
     }
@@ -77,7 +79,7 @@ export const FileInfo: Component<{
       emitEvent('listFiles:refetch');
     } else {
       await deleteFile.mutateAsync(fileExtraMetadata.fileId);
-      setTotalCost(totalCost - fileExtraMetadata.fileCoin * fileExtraMetadata.numOfCopies);
+      setTotalCost(totalCost - fileCoins * fileExtraMetadata.numOfCopies);
       clearFileConfig();
       clearSpecificPageAndPageBothSide();
     }
@@ -111,11 +113,15 @@ export const FileInfo: Component<{
             <p className='flex items-center gap-1 text-sm mb-5'>
               <img src={coinImage} alt='coinImage' className='grayscale w-6 h-6' />
               <span className='text-gray/4 font-normal'>
-                {fileExtraMetadata.fileCoin + ' x ' + fileExtraMetadata.numOfCopies + ' copies = '}
+                {(isConfigStep ? fileCoins : fileExtraMetadata.fileCoin) +
+                  ' x ' +
+                  fileExtraMetadata.numOfCopies +
+                  ' copies = '}
               </span>
               <img src={coinImage} alt='coinImage' className='w-6 h-6' />
               <span className='text-yellow/1 font-bold'>
-                {fileExtraMetadata.fileCoin * fileExtraMetadata.numOfCopies}
+                {(isConfigStep ? fileCoins : fileExtraMetadata.fileCoin) *
+                  fileExtraMetadata.numOfCopies}
               </span>
             </p>
           </div>

src/components/order/common/OrderWorkflow.tsx

@@ -5,14 +5,14 @@ import {
   UploadDocumentForm,
   OrderListForm,
   ConfirmOrderForm,
-  TopupWalletForm,
   OrderSuccessForm,
   PreviewDocument
 } from '@components/order/mobile';
 import { UploadAndPreviewDesktop } from '@components/order/desktop';
 import { ScreenSize } from '@constants';
 import { usePrintingRequestMutation, useScreenSize } from '@hooks';
 import { useOrderWorkflowStore } from '@states';
+import { TopupWallet } from './TopupWallet';
 
 export function useOrderWorkflow() {
   const [openDialog, setOpenDialog] = useState<boolean>(false);
@@ -54,7 +54,7 @@ export function useOrderWorkflow() {
       } else if (mobileOrderStep.current === 3) {
         return <ConfirmOrderForm initialTotalCost={initialTotalCost} />;
       } else if (mobileOrderStep.current === 4) {
-        return <TopupWalletForm />;
+        return <TopupWallet />;
       } else if (mobileOrderStep.current === 5) {
         return (
           <OrderSuccessForm