feat(preview-docs): add preview document form in order workflow

src/App.tsx

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 import { NavigateFunction, useNavigate, useLocation } from 'react-router-dom';
 import { AppSkeleton } from '@components/common';
 import { MAIN_MENU, SUB_MENU } from '@constants';
-import { AppLayout, AuthLayout } from '@layouts';
-import { AuthPage, HomePage } from '@pages';
+import { AppLayout /*AuthLayout*/ } from '@layouts';
+import { /*AuthPage,*/ HomePage } from '@pages';
 import { useUserStore } from '@states/common';
 
 export default function App() {
@@ -26,13 +26,13 @@ export default function App() {
     return <AppSkeleton />;
   }
 
-  if (userStatus === 'REJECT') {
-    return (
-      <AuthLayout>
-        <AuthPage />
-      </AuthLayout>
-    );
-  }
+  // if (userStatus === 'REJECT') {
+  //   return (
+  //     <AuthLayout>
+  //       <AuthPage />
+  //     </AuthLayout>
+  //   );
+  // }
 
   return (
     <AppLayout

src/components/home/ChooseFileBox.tsx

@@ -4,7 +4,6 @@ import { ArrowUpTrayIcon } from '@heroicons/react/24/outline';
 import { useOrderWorkflowBox } from '@components/order';
 import { useFileStore } from '@states/home';
 import { useOrderWorkflowStore } from '@states/order';
-import { FileBox } from '../order/FileBox';
 
 export function useChooseFileBox() {
   const { openOrderWorkflowBox, OrderWorkflowBox } = useOrderWorkflowBox();
@@ -61,7 +60,6 @@ export function useChooseFileBox() {
                 onChange={handleUploadDocument}
               />
             </label>
-            {<FileBox />}
           </DialogBody>
         </Dialog>
         {<OrderWorkflowBox />}

src/components/order/OrderWorkflowBox.tsx

@@ -5,7 +5,8 @@ import {
   OrderListForm,
   ConfirmOrderForm,
   TopupWalletForm,
-  OrderSuccessForm
+  OrderSuccessForm,
+  PreviewDocument
 } from '@components/order';
 import { HomePage } from '@pages';
 import { useOrderWorkflowStore } from '@states/order';
@@ -27,6 +28,8 @@ export function useOrderWorkflowBox() {
       return <TopupWalletForm />;
     } else if (orderStep === 5) {
       return <OrderSuccessForm />;
+    } else if (orderStep === 6) {
+      return <PreviewDocument />;
     }
   };
 

src/components/order/PreviewDocument.tsx

@@ -0,0 +1,42 @@
+import DocViewer, { DocViewerRenderers, IHeaderOverride } from '@cyntler/react-doc-viewer';
+import { XMarkIcon } from '@heroicons/react/24/solid';
+import { useFileStore } from '@states/home';
+
+export function PreviewDocument() {
+  const { fileTarget } = useFileStore();
+
+  const MyHeader: IHeaderOverride = (state) => {
+    console.log(state.currentDocument?.fileType);
+    return (
+      <div
+        className={
+          'flex justify-between px-6 py-3 bg-white mb-6 ' +
+          (state.currentDocument?.fileType !== 'application/pdf' ? 'shadow-md' : '')
+        }
+      >
+        <span className='text-gray/4 font-bold'>Preview document</span>
+        <XMarkIcon width={28} />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className='h-screen overscroll-y-auto'>
+        {fileTarget && (
+          <DocViewer
+            config={{
+              header: {
+                overrideComponent: MyHeader,
+                disableFileName: true
+              },
+              pdfVerticalScrollByDefault: true
+            }}
+            pluginRenderers={DocViewerRenderers}
+            documents={[{ uri: fileTarget.url }]}
+          />
+        )}
+      </div>
+    </>
+  );
+}

src/components/order/UploadDocumentForm.tsx

@@ -1,5 +1,4 @@
-// import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer';
-// import { useFileStore } from '@states/home';
+import React, { useState } from 'react';
 import {
   Button,
   Radio,
@@ -12,17 +11,16 @@ import {
   DialogBody,
   IconButton
 } from '@material-tailwind/react';
-import { useOrderWorkflowStore, useOrderPrintStore } from '@states/order';
 import { XMarkIcon, ExclamationCircleIcon } from '@heroicons/react/24/solid';
-import React, { useState } from 'react';
 import { UploadDocumentItem, FormFooter, DialogForm } from '@components/order';
 import { useOrderStore } from '@states/home';
+import { useOrderWorkflowStore, useOrderPrintStore } from '@states/order';
 
 // Tan's first-task in here.
 export function UploadDocumentForm() {
   const [open, setOpen] = useState<boolean>(false);
   const [openXDialog, setOpenXDialog] = useState<boolean>(false);
-  const { setOrderList, orderPrintList } = useOrderPrintStore();
+  //const { orderPrintList, setOrderPrintList } = useOrderPrintStore();
   const handleOpen = () => {
     setOpen(!open);
   };
@@ -31,39 +29,30 @@ export function UploadDocumentForm() {
   };
   const { orderData } = useOrderStore();
   const { setOrderStep } = useOrderWorkflowStore();
-  //const { fileTarget } = useFileStore();
 
-  // return (
-  //   <>
-  //     <div>UploadDocumentForm</div>
-  //     {fileTarget && (
-  //       <DocViewer pluginRenderers={DocViewerRenderers} documents={[{ uri: fileTarget.url }]} />
-  //     )}
-  //     <Button onClick={() => setOrderStep(2)}>Save</Button>
-  //   </>
   const { totalCost } = useOrderPrintStore();
   const [selectedLayout, setSelectedLayout] = useState<string>('Portrait');
   const handleLayoutChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedLayout(e.target.value);
   };
   const handleSave = () => {
-    const newOrderPrintItem = {
-      id: '1278-cfdb',
-      status: 'ready',
-      location: 'aaa',
-      fileName: 'showMaker.txt',
-      coins: 50,
-      size: 50,
-      number: 50,
-      pageNumber: 20,
-      paid: 'Not paid'
-    };
-    const newOrderPrintList = [...orderPrintList, newOrderPrintItem];
-    setOrderList(newOrderPrintList);
+    // const newOrderPrintItem = {
+    //   id: '1278-cfdb',
+    //   status: 'ready',
+    //   location: 'aaa',
+    //   fileName: 'showMaker.txt',
+    //   coins: 50,
+    //   size: 50,
+    //   number: 50,
+    //   pageNumber: 20,
+    //   paid: 'Not paid'
+    // };
+    //const newOrderPrintList = [...orderPrintList, newOrderPrintItem];
+    //setOrderPrintList(newOrderPrintList);
     setOrderStep(2);
   };
   return (
-    <div>
+    <>
       <div className='flex justify-between shadow-md px-6 py-3 bg-white mb-6'>
         <span className='text-gray/4 font-bold'>Upload document</span>
         <XMarkIcon width={28} onClick={handleOpenX} />
@@ -97,13 +86,7 @@ export function UploadDocumentForm() {
         </Dialog>
       </div>
       {/* {<FileBox />} */}
-      <UploadDocumentItem
-        id='1264-erfc'
-        fileName='showMaker.txt'
-        coins={50}
-        size={50}
-        number={50}
-      />
+      <UploadDocumentItem fileName='showMaker.txt' coins={50} size={50} numberItem={50} />
       <div className='p-6 text-gray/4 bg-white mt-4'>
         <div className='mb-8'>
           <Typography className='font-bold'>Layout</Typography>
@@ -202,6 +185,6 @@ export function UploadDocumentForm() {
           Save
         </Button>
       </FormFooter>
-    </div>
+    </>
   );
 }

src/components/order/UploadDocumentItem.tsx

@@ -1,31 +1,34 @@
-import { EyeIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
-import coin from '../../assets/coin.png';
 import { useState } from 'react';
+import { EyeIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
+import coin from '@assets/coin.png';
+import { useOrderWorkflowStore } from '@states/order';
 
 export const UploadDocumentItem: Component<{
-  id: string;
   fileName: string;
   size: number;
   coins: number;
-  number: number;
-}> = ({ id, fileName, size, coins, number }) => {
-  const [currentNumber, setCurrentNumber] = useState<number>(number);
+  numberItem: number;
+}> = ({ fileName, size, coins, numberItem }) => {
+  const { setOrderStep } = useOrderWorkflowStore();
+  const [currentNumber, setCurrentNumber] = useState<number>(numberItem);
+
   const handleDecrease = () => {
     if (currentNumber > 1) {
-      id = id;
       setCurrentNumber(currentNumber - 1);
-      //   updateCurrentNumber(currentNumber - 1);
     }
   };
   const handleIncrease = () => {
     setCurrentNumber(currentNumber + 1);
-    // updateCurrentNumber(currentNumber + 1);
   };
+
   return (
     <div className='flex gap-4 px-4 py-2 bg-white '>
-      <div className="bg-[url('./src/assets/logobk.png')] bg-no-repeat bg-contain bg-center text-white rounded-lg border-2 border-transparent shadow-lg bg-gray/3 flex flex-col items-center justify-center cursor-pointer">
-        <EyeIcon width={12} />
-        <div className='text-xs'>Preview</div>
+      <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={() => setOrderStep(6)}
+      >
+        <EyeIcon width={20} />
+        <span className='text-xs'>Preview</span>
       </div>
       <div className='w-full'>
         <div className='flex flex-col text-gray/4'>

src/components/order/index.ts

@@ -12,6 +12,7 @@ export * from './OrderListForm';
 export * from './OrderListItem';
 export * from './OrderSuccessForm';
 export * from './OrderWorkflowBox';
+export * from './PreviewDocument';
 export * from './TopupWalletForm';
 export * from './UploadDocumentForm';
 export * from './UploadDocumentItem';

src/index.css

@@ -29,3 +29,7 @@
 }
 
 .grayscale { filter: grayscale(100%); }
+
+#react-doc-viewer #pdf-controls {
+  z-index: 5;
+}

src/pages/HomePage.tsx

@@ -7,7 +7,7 @@ import { useOrderExtraStore, useOrderPrintStore } from '@states/order';
 export function HomePage() {
   const { orderData, getOrderData } = useOrderStore();
   const { slideData, getSlideData } = useSlideStore();
-  const { setOrderList } = useOrderPrintStore();
+  const { setOrderPrintList } = useOrderPrintStore();
   const { getUserInfoData } = useUserInfoStore();
   const { getOrderExtraData } = useOrderExtraStore();
 
@@ -21,8 +21,8 @@ export function HomePage() {
   }, [getOrderData, getSlideData, getUserInfoData, getOrderExtraData]);
 
   useEffect(() => {
-    setOrderList(orderData);
-  }, []);
+    setOrderPrintList(orderData);
+  }, [orderData, setOrderPrintList]);
 
   return (
     <>

src/states/order/orderPrint.ts

@@ -1,13 +1,12 @@
 import { create } from 'zustand';
-// import { useOrderStore } from "@states/home";
 
 export const useOrderPrintStore = create<OrderPrintStore>()((set) => ({
   totalCost: 0,
   orderPrintList: [],
-  setOrderList: (orderPrintList) => {
+  setOrderPrintList: (orderPrintList) => {
     set({ orderPrintList: orderPrintList });
   },
-  setCost: (totalCost) => {
+  setTotalCost: (totalCost) => {
     set({ totalCost: totalCost });
   }
 }));

src/types/order/orderPrint.d.ts

@@ -1,18 +1,6 @@
-type OrderPrintData = {
-  id: string;
-  status: string;
-  location: string;
-  number: number;
-  fileName: string;
-  pageNumber: number;
-  coins: number;
-  paid: string;
-  size: number;
-};
-
 type OrderPrintStore = {
   totalCost: number;
-  orderPrintList: OrderPrintData[];
-  setOrderList: (orderPrintList: OrderPrintData[]) => void;
-  setCost: (totalCost: number) => void;
+  orderPrintList: OrderData[];
+  setOrderPrintList: (orderPrintList: OrderData[]) => void;
+  setTotalCost: (totalCost: number) => void;
 };