fix(responsive): add api execute and responsive Order Success Form

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,13 +99,32 @@ 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' />
+              <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>
           )}

src/components/home/ChooseFileBox.tsx

@@ -13,9 +13,10 @@ export function useChooseFileBox() {
   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;
+  }> = ({ initialTotalCost, handleOpenOrderSuccessDesktop }) => {
     const printingRequestId = queryClient.getQueryData<PrintingRequestId>(['printingRequestId']);
     const fileIdCurrent = queryClient.getQueryData<string>(['fileIdCurrent']) || null;
     const { data: fileMetadata } = useQuery({
@@ -24,7 +25,8 @@ 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]
@@ -47,11 +49,20 @@ export function useChooseFileBox() {
           } else {
             closeOrderWorkflow();
           }
+          if (isOrderSuccess) {
+            handleOpenOrderSuccessDesktop();
+          }
         }
       } else {
         closeOrderWorkflow();
       }
-    }, [screenSize, desktopOrderStep, isFileUploadSuccess]);
+    }, [
+      screenSize,
+      desktopOrderStep,
+      isFileUploadSuccess,
+      isOrderSuccess,
+      handleOpenOrderSuccessDesktop
+    ]);
 
     const handleUploadDocument = useCallback(
       async (event: React.ChangeEvent<HTMLInputElement>) => {

src/components/order/common/TopupWallet.tsx

@@ -27,6 +27,7 @@ export function TopupWallet() {
   const { createPayPalOrder, approvePayPalOrder } = usePrintingRequestMutation();
 
   const { setMobileOrderStep, setDesktopOrderStep } = useOrderWorkflowStore();
+
   const { screenSize } = useScreenSize();
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -268,12 +269,13 @@ export function TopupWallet() {
             <div className='flex items-center'>
               <ChevronLeftIcon
                 className='w-7 h-7 mr-4 opacity-40 hover:opacity-100 focus:opacity-100 active:opacity-100 cursor-pointer'
-                onClick={() =>
+                onClick={() => {
                   setMobileOrderStep({
                     current: 3,
                     prev: 4
-                  })
-                }
+                  });
+                  setDesktopOrderStep(2);
+                }}
               />
               <Typography className='text-gray/4 text-base font-semibold '>
                 Top up wallet

src/components/order/desktop/ConfirmOrderDesktop.tsx

@@ -21,32 +21,45 @@ import {
   QuestionMarkCircleIcon
 } from '@heroicons/react/24/solid';
 import coinImage from '@assets/coin.png';
-import { usePrintingRequestQuery } from '@hooks';
+import { usePrintingRequestQuery, usePrintingRequestMutation } from '@hooks';
 import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
 import { formatFileSize } from '@utils';
 import { usePreviewDocumentDesktop } from './PreviewDocumentDesktop';
-import { useOrderSuccessDesktop } from './OrderSuccessDesktop';
 
-export const ConfirmOrderDektop: Component<{ initialTotalCost: MutableRefObject<number> }> = ({
-  initialTotalCost
-}) => {
+export const ConfirmOrderDektop: Component<{
+  initialTotalCost: MutableRefObject<number>;
+  handleOpenOrderSuccessDesktop: () => void;
+}> = ({ initialTotalCost, handleOpenOrderSuccessDesktop }) => {
   const queryClient = useQueryClient();
   const remainCoins = queryClient.getQueryData<number>(['/api/user/remain-coins']);
+  const printingRequestId = queryClient.getQueryData<PrintingRequestId>(['printingRequestId']);
+
   const {
     listFiles: { data: listFiles },
     serviceFee: { data: serviceFee }
   } = usePrintingRequestQuery();
+  const { executePrintingRequest } = usePrintingRequestMutation();
 
   const { openPreviewDocumentDesktop, PreviewDocumentDesktop } = usePreviewDocumentDesktop();
-  const { openOrderSuccessDesktop, OrderSuccessDesktop } = useOrderSuccessDesktop();
 
-  const { totalCost, setTotalCost } = useOrderPrintStore();
-  const { setDesktopOrderStep } = useOrderWorkflowStore();
+  const { totalCost, setTotalCost, setIsOrderSuccess } = useOrderPrintStore();
+  const { setDesktopOrderStep, setMobileOrderStep } = useOrderWorkflowStore();
 
   useEffect(() => {
     setTotalCost(initialTotalCost.current);
   }, [initialTotalCost, setTotalCost]);
 
+  const handleExecutePrintingRequest = async () => {
+    if (!printingRequestId) return;
+    await executePrintingRequest.mutateAsync(printingRequestId.id);
+    setIsOrderSuccess(true);
+    setMobileOrderStep({
+      current: 5,
+      prev: 3
+    });
+    handleOpenOrderSuccessDesktop();
+  };
+
   const columnHelper = createColumnHelper<FileExtraMetadata>();
 
   const columnDefs = useMemo(
@@ -144,7 +157,7 @@ export const ConfirmOrderDektop: Component<{ initialTotalCost: MutableRefObject<
             </thead>
             <tbody className='bg-white'>
               {fileTable.getRowModel().rows.map((row) => (
-                <tr key={row.id}>
+                <tr key={row.id} className='border-b-2'>
                   {row.getAllCells().map((cell) => (
                     <td key={cell.id}>
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -175,7 +188,13 @@ export const ConfirmOrderDektop: Component<{ initialTotalCost: MutableRefObject<
               <div className='flex flex-col'>
                 <div
                   className='flex justify-between items-center cursor-pointer hover:bg-gray-100 p-2 rounded-full'
-                  onClick={() => setDesktopOrderStep(3)}
+                  onClick={() => {
+                    setDesktopOrderStep(3);
+                    setMobileOrderStep({
+                      current: 4,
+                      prev: 3
+                    });
+                  }}
                 >
                   <p className='text-base font-medium text-gray/4'>Print wallet</p>
                   <ChevronRightIcon className='w-7 h-7 opacity-40 focus:opacity-100 active:opacity-100 cursor-pointer' />
@@ -242,7 +261,7 @@ export const ConfirmOrderDektop: Component<{ initialTotalCost: MutableRefObject<
                   ? 'blue'
                   : 'gray'
               }
-              onClick={openOrderSuccessDesktop}
+              onClick={handleExecutePrintingRequest}
               disabled={!remainCoins || remainCoins < totalCost + (serviceFee ?? 0)}
             >
               Confirm Order
@@ -251,7 +270,6 @@ export const ConfirmOrderDektop: Component<{ initialTotalCost: MutableRefObject<
         </div>
       </div>
       {<PreviewDocumentDesktop />}
-      {<OrderSuccessDesktop initialTotalCost={initialTotalCost} serviceFee={serviceFee} />}
     </>
   );
 };

src/components/order/desktop/OrderListDesktop.tsx

@@ -268,7 +268,7 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject<nu
               {listFiles && listFiles.length > 0 ? (
                 isFetching ? (
                   fileTable.getRowModel().rows.map((row) => (
-                    <tr key={row.id}>
+                    <tr key={row.id} className='border-b-2'>
                       {row.getAllCells().map((cell) => (
                         <td key={cell.id}>
                           {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -288,7 +288,7 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject<nu
                   </tr>
                 ) : (
                   fileTable.getRowModel().rows.map((row) => (
-                    <tr key={row.id}>
+                    <tr key={row.id} className='border-b-2'>
                       {row.getAllCells().map((cell) => (
                         <td key={cell.id}>
                           {flexRender(cell.column.columnDef.cell, cell.getContext())}

src/components/order/desktop/OrderSuccessDesktop.tsx

@@ -1,15 +1,6 @@
 import { MutableRefObject, useState } from 'react';
-import {
-  Button,
-  Card,
-  CardBody,
-  Dialog,
-  DialogBody,
-  DialogHeader,
-  IconButton,
-  Typography
-} from '@material-tailwind/react';
-import { CheckIcon, DocumentChartBarIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { Button, Card, CardBody, Dialog, DialogBody, Typography } from '@material-tailwind/react';
+import { CheckIcon, DocumentChartBarIcon } from '@heroicons/react/24/outline';
 import coinImage from '@assets/coin.png';
 import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
 
@@ -28,15 +19,19 @@ export function useOrderSuccessDesktop() {
       setTotalCost(0);
       initialTotalCost.current = 0;
       setDesktopOrderStep(0);
+      setOpenDialog(false);
     };
 
     return (
-      <Dialog size='xs' open={openDialog} handler={() => setOpenDialog(false)}>
-        <DialogHeader className='p-0'>
-          <IconButton variant='text' onClick={() => setOpenDialog(false)}>
-            <XMarkIcon className='w-6 h-6' />
-          </IconButton>
-        </DialogHeader>
+      <Dialog
+        size='xs'
+        open={openDialog}
+        handler={() => setOpenDialog(false)}
+        dismiss={{
+          escapeKey: false,
+          outsidePress: false
+        }}
+      >
         <DialogBody>
           <div className='w-full flex flex-col justify-center items-center h-32 overscroll-y-auto'>
             <div className='p-5 rounded-full bg-[#DBEAFE]'>

src/components/order/mobile/ConfirmOrderForm.tsx

@@ -34,7 +34,7 @@ export const ConfirmOrderForm: Component<{ initialTotalCost: MutableRefObject<nu
   const { executePrintingRequest } = usePrintingRequestMutation();
 
   const { mobileOrderStep, setMobileOrderStep, setDesktopOrderStep } = useOrderWorkflowStore();
-  const { totalCost, setIsOrderUpdate, setTotalCost } = useOrderPrintStore();
+  const { totalCost, setIsOrderUpdate, setIsOrderSuccess, setTotalCost } = useOrderPrintStore();
 
   useEffect(() => {
     setTotalCost(initialTotalCost.current);
@@ -52,6 +52,7 @@ export const ConfirmOrderForm: Component<{ initialTotalCost: MutableRefObject<nu
   const handleExecutePrintingRequest = async () => {
     if (!printingRequestId) return;
     await executePrintingRequest.mutateAsync(printingRequestId.id);
+    setIsOrderSuccess(true);
     setMobileOrderStep({
       current: 5,
       prev: 3
@@ -161,6 +162,7 @@ export const ConfirmOrderForm: Component<{ initialTotalCost: MutableRefObject<nu
                 current: 4,
                 prev: 3
               });
+              setDesktopOrderStep(3);
             }}
           >
             <Typography variant='h6'>Print wallet</Typography>

src/components/order/mobile/OrderSuccessForm.tsx

@@ -4,7 +4,7 @@ import { CheckIcon, DocumentChartBarIcon } from '@heroicons/react/24/outline';
 import { XMarkIcon } from '@heroicons/react/24/solid';
 import coinImage from '@assets/coin.png';
 import { usePrintingRequestQuery } from '@hooks';
-import { useOrderPrintStore } from '@states';
+import { useOrderPrintStore, useOrderWorkflowStore } from '@states';
 
 export const OrderSuccessForm: Component<{
   handleCloseOrderForm: () => void;
@@ -14,11 +14,17 @@ export const OrderSuccessForm: Component<{
     serviceFee: { data: serviceFee }
   } = usePrintingRequestQuery();
   const { totalCost, setIsFileUploadSuccess, setTotalCost } = useOrderPrintStore();
+  const { setMobileOrderStep, setDesktopOrderStep } = useOrderWorkflowStore();
 
   const handleExistOrderSuccessForm = () => {
     setIsFileUploadSuccess(false);
     setTotalCost(0);
     initialTotalCost.current = 0;
+    setMobileOrderStep({
+      current: 0,
+      prev: 5
+    });
+    setDesktopOrderStep(0);
     handleCloseOrderForm();
   };
 

src/hooks/usePrintingRequestMutation.hook.ts

@@ -81,7 +81,14 @@ export function usePrintingRequestMutation() {
   const executePrintingRequest = useMutation({
     mutationKey: ['executePrintingRequest'],
     mutationFn: (printingRequestId: string) =>
-      printingRequestService.executePrintingRequest(printingRequestId)
+      printingRequestService.executePrintingRequest(printingRequestId),
+    onSuccess: () => {
+      queryClient.prefetchQuery({
+        queryKey: ['/api/user/remain-coins'],
+        queryFn: () => userService.getRemainCoins(),
+        retry: retryQueryFn
+      });
+    }
   });
 
   return {