├── icon.ico
├── icon.icns
├── src
    ├── images
    │   ├── favicon.png
    │   ├── loading.gif
    │   ├── logo-dark.png
    │   ├── logo-light.png
    │   ├── logo-light-sm.png
    │   ├── placeholderItemImage.png
    │   ├── computerIconBlueLines.png
    │   └── computerIconWhiteLines.png
    ├── components
    │   ├── Card.jsx
    │   ├── Loading.jsx
    │   ├── Dropdown.jsx
    │   ├── Error.jsx
    │   └── Layout.jsx
    ├── index.jsx
    ├── index.css
    ├── App.jsx
    └── pages
    │   ├── sign_in.jsx
    │   ├── scan_a_tote.jsx
    │   └── order.jsx
├── tailwind.config.js
├── .gitignore
├── README.md
├── public
    └── index.html
├── app.js
└── package.json


/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/icon.ico


--------------------------------------------------------------------------------
/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/icon.icns


--------------------------------------------------------------------------------
/src/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/src/images/favicon.png


--------------------------------------------------------------------------------
/src/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/src/images/loading.gif


--------------------------------------------------------------------------------
/src/images/logo-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/src/images/logo-dark.png


--------------------------------------------------------------------------------
/src/images/logo-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/src/images/logo-light.png


--------------------------------------------------------------------------------
/src/images/logo-light-sm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/src/images/logo-light-sm.png


--------------------------------------------------------------------------------
/src/images/placeholderItemImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/src/images/placeholderItemImage.png


--------------------------------------------------------------------------------
/src/images/computerIconBlueLines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/src/images/computerIconBlueLines.png


--------------------------------------------------------------------------------
/src/images/computerIconWhiteLines.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Blue-BigTech/Shipping-Electron-React/HEAD/src/images/computerIconWhiteLines.png


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./src/**/*.{js,jsx,ts,tsx}",
 5 |   ],
 6 |   theme: {
 7 |     extend: {},
 8 |   },
 9 |   plugins: [],
10 | }


--------------------------------------------------------------------------------
/src/components/Card.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | const Card = (props, ref) => {
4 |   return (
5 |     <div ref={ref} className={`${props.className} rounded-lg bg-white p-4 overflow-scroll basis-0 grow`}>{props.children}</div>
6 |   )
7 | }
8 | 
9 | export default React.forwardRef(Card)


--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App';
 4 | import "./index.css"
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 


--------------------------------------------------------------------------------
/src/components/Loading.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import loader from '../images/loading.gif'
 4 | 
 5 | const Loading = () => {
 6 |   return (
 7 |     <div className='w-full h-full flex items-center justify-center'>
 8 |         <img src={loader} alt="" />
 9 |     </div>
10 |   )
11 | }
12 | 
13 | export default Loading


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | /dist
14 | /release-builds
15 | 
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | .env
23 | 
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html,body, #root { height: 100vh; margin: 0; }
 6 | 
 7 | label span:before,
 8 | label span:after {
 9 |   content: '';
10 | }
11 | 
12 | 
13 | /*
14 |  * We are using the :before peudo elemnt as the actual button,
15 |  * then we'll position the :after over it. You could also use a background-image,
16 |  * font-icon, or really anything if you want different styles.
17 |  * For the specific style we're going for, this approach is simply the easiest, but
18 |  * once you understand the concept you can really do it however you like.
19 |  */
20 | 
21 | label span:before {
22 |   border: 1px solid #222021;
23 |   width: 20px;
24 |   height: 20px;
25 |   display: inline-block;
26 |   vertical-align: top;
27 | }
28 | 
29 | label span:after {
30 | background-color: rgb(59 130 246);
31 |   width: 14px;
32 |   height: 14px;
33 |   position: absolute;
34 |   top: -1px;
35 |   left: 3px;
36 |   transition: 300ms;
37 |   opacity: 0;
38 | }
39 | 
40 | label input:checked+span:after {
41 |     opacity: 1;
42 |   }
43 | 
44 |   


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Build Instructions
 2 | 
 3 | **Make sure all dependices are installed**
 4 | `npm i --save`
 5 | 
 6 | **Mac**
 7 | 
 8 | 1. change isDev to false in app.js
 9 | 2. change .env variables to correct ones
10 | 3. build react
11 |    `npm run build`
12 | 4. delete release-builds and dist in root
13 | 5. run package for darwin command
14 |    `electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds`
15 | 6. packed application into dist folder
16 |    `./node_modules/.bin/electron-builder --prepackaged ./release-builds/HoopSwagg\ Shipping-darwin-x64`
17 | 7. final packaged dmg executable will be in dist folder
18 | 
19 | **Windows**
20 | 
21 | 1. change isDev to false in app.js
22 | 2. change .env variables to correct ones
23 | 3. build react
24 |    `npm run build`
25 | 4. delete release-builds and dist in root
26 | 5. run package for win32 command
27 |    `electron-packager . --overwrite --platform=win32 --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds`
28 | 6. folder is large, and will take a while to move, but move the folder ./release-builds/shipping-win32-x64 to the PC
29 | 


--------------------------------------------------------------------------------
/src/components/Dropdown.jsx:
--------------------------------------------------------------------------------
 1 | // React Imports
 2 | import React from 'react'
 3 | import { useState } from 'react'
 4 | 
 5 | const Dropdown = ({children, icon, text, textColorClass = "text-white", arrowColorClass = "text-blue-500",  className}) => {
 6 | 
 7 |     // Menu Open State
 8 |     const [dropdownOpen, setDropdownOpen] = useState(false);
 9 | 
10 |     // Opens and closes dropdown
11 |     const toggleDropdown = function () {
12 |         setDropdownOpen(!dropdownOpen)
13 |     }
14 | 
15 |     return (
16 |         <div className={`relative select-none flex items-center gap-2 cursor-pointer ${className}`} onClick={toggleDropdown}>
17 |             {icon}
18 |             <span className={textColorClass}>{text}</span>
19 |             <i className={`bi ${ dropdownOpen ? "bi-caret-up-fill" : "bi-caret-down-fill"} ${arrowColorClass}`}></i>
20 |             <div className={`absolute left-0 top-8 w-full shadow-lg rounded py-2 bg-white ${!dropdownOpen && "hidden"}`}>
21 |                 <ul className='w-full' onClick={toggleDropdown}>
22 |                     {children}
23 |                 </ul>
24 |             </div>
25 |         </div>
26 |     )
27 | }
28 | 
29 | export default Dropdown


--------------------------------------------------------------------------------
/src/components/Error.jsx:
--------------------------------------------------------------------------------
 1 | // React Imports
 2 | import React from 'react'
 3 | 
 4 | // Component Imports
 5 | import Card from './Card'
 6 | import Popup from 'reactjs-popup'
 7 | 
 8 | const Error = ({message, buttonText, onClick}) => {
 9 | 
10 |   const convertErrorMessage = (errorMessage) => {
11 |     
12 |     return errorMessage
13 | 
14 |   }
15 | 
16 |   return (
17 |     <div className="mx-auto flex items-center">
18 |         <Card className="px-10">
19 |             <div className="text-4xl font-semibold text-center p-8">OOPS, There's been an error!</div>
20 |             <p className="text-center text-xl text-red-600">{convertErrorMessage(message)}</p>
21 | 
22 |             {/* more details popup */}
23 |             <Popup trigger={<button className="text-center text-xl text-blue-600 w-full my-4">More Details</button>} modal>
24 |               <p className='w-full text-center'>{message}</p>
25 |             </Popup>
26 | 
27 |             <div className='text-lg flex justify-center my-4'>
28 |               <div onClick={onClick} className='bg-blue-500 p-3 text-white rounded font-light px-6 hover:bg-blue-400 transition cursor-pointer'>
29 |                 {buttonText}
30 |               </div>
31 |             </div>
32 |         </Card>
33 |     </div>
34 |   )
35 | }
36 | 
37 | export default Error


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | // Bootstrap imports
 2 | import "bootstrap-icons/font/bootstrap-icons.css";
 3 | 
 4 | // React + React Dom Imports
 5 | import { useState } from "react";
 6 | import {
 7 |   HashRouter as Router,
 8 |   Routes,
 9 |   Route
10 | } from "react-router-dom";
11 | 
12 | 
13 | 
14 | // Page Imports
15 | import ScanATotePage from './pages/scan_a_tote';
16 | import OrderPage from "./pages/order"
17 | import SignInPage from "./pages/sign_in";
18 | 
19 | // Component Imports
20 | import Layout from "./components/Layout";
21 | 
22 | function App() {
23 | 
24 |   const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));
25 | 
26 |   if (!user) {
27 |     return <Router><SignInPage setUser={setUser} /></Router>
28 |   }
29 | 
30 |   return (
31 |     <Router>
32 |         <Routes>
33 |         <Route path="/sign-in" element={<SignInPage setUser={setUser} />}>
34 |         </Route>
35 |         <Route path="/scan" element={<Layout user={user} setUser={setUser} ><ScanATotePage user={user} /></Layout>}>
36 |         </Route>
37 |         <Route path="/order" element={<Layout user={user} setUser={setUser}><OrderPage user={user} /></Layout>}>
38 |         </Route>
39 |         <Route path="/" element={<Layout user={user} setUser={setUser} ><ScanATotePage user={user} /></Layout>}></Route>
40 |         </Routes>
41 |     </Router>
42 |   );
43 | }
44 | 
45 | export default App;
46 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |   <meta name="theme-color" content="#000000">
 8 |   <!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 |   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 |   <!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 |   <title>HoopSwagg Shipping</title>
24 | </head>
25 | 
26 | <body>
27 |   <noscript>
28 |     You need to enable JavaScript to run this app.
29 |   </noscript>
30 |   <div id="root"></div>
31 |   <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/src/components/Layout.jsx:
--------------------------------------------------------------------------------
  1 | // React Imports
  2 | import React from 'react'
  3 | import { useState } from 'react'
  4 | import { useNavigate, useSearchParams } from 'react-router-dom'
  5 | 
  6 | // Component Imports
  7 | import Dropdown from "./Dropdown"
  8 | import Error from './Error'
  9 | import Loading from './Loading'
 10 | 
 11 | // Img Imports
 12 | import logoLight from "../images/logo-light.png"
 13 | 
 14 | const Layout = ({children, user, setUser}) => {
 15 | 
 16 |   // Layout States
 17 |   const [loading, setLoading] = useState(false);
 18 |   const [error, setError] = useState("");
 19 | 
 20 |   // Use search Params
 21 |   const [searchParams] = useSearchParams();
 22 | 
 23 |   // Init Navigate
 24 |   const navigate = useNavigate();
 25 | 
 26 |   // Logs user out
 27 |   const logout = async () => {
 28 |     setLoading(true)
 29 | 
 30 |     const orderID = searchParams.get("order_id")
 31 |     if (orderID) {
 32 |       const ok = await unlockOrder(parseInt(orderID))
 33 |       if (!ok) {
 34 |         setLoading(false)
 35 |         return
 36 |       }
 37 |     }
 38 | 
 39 |     localStorage.removeItem("user")
 40 |     setUser();
 41 |     setLoading(false)
 42 | 
 43 |   }
 44 | 
 45 | 
 46 |   // Unlocks order when user goes back to tote page
 47 |   const unlockOrder = async (orderID) => {
 48 | 
 49 |     // Unlock Order
 50 |     const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/unlock-order`, {
 51 |         method: "POST",
 52 |         headers: {
 53 |             "Content-Type": "application/json",
 54 |             "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 55 |             "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 56 |         },
 57 |         body: JSON.stringify({
 58 |             order_id: orderID,
 59 |             user_id: user.ID
 60 |         })
 61 |     })
 62 | 
 63 |     // Error Handling
 64 |     if (!res.ok) {
 65 |         const errorRes = await res.json();
 66 |         const errorMessage = errorRes.error;
 67 |         setError(errorMessage)
 68 |         return false
 69 |     }
 70 | 
 71 |     // Navigate to sign in
 72 |     navigate("/sign-in")
 73 | 
 74 |   }
 75 | 
 76 |   return (
 77 |     <div className='flex flex-col h-screen'>
 78 |         <div className="bg-blue-500 py-4 px-12 flex justify-between">
 79 |             <img src={logoLight} alt="" width={150} height={75} />
 80 |             <Dropdown arrowColorClass='text-white' icon={<i className="bi bi-person-fill text-white"></i>} text={user.Username}>
 81 |                 <li onClick={logout} className='cursor-pointer hover:bg-gray-200 transition duration-300 pl-4 p-1 select-none'>
 82 |                   Sign Out
 83 |                 </li>
 84 |           </Dropdown>
 85 |         </div>
 86 |         <div className="p-6 px-20 flex flex-1" style={{backgroundColor: "#F3F5F5"}}>
 87 | 
 88 |           {/* Render error message */}
 89 |           { error && <Error message={error} onClick={logout} buttonText="Back to sign in"></Error> }
 90 | 
 91 |           {/* Render Loading */}
 92 |           {loading && !error && <Loading></Loading>}
 93 | 
 94 |           {/* Render Children */}
 95 |           {!loading && !error && children}
 96 | 
 97 | 
 98 |         </div>
 99 |     </div>
100 |   )
101 | }
102 | 
103 | export default Layout


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | // Node Imports
  2 | const path = require('path');
  3 | const fs = require("fs")
  4 | const url = require('url');
  5 | 
  6 | // PDF Printing Imports
  7 | const { download } = require('electron-dl');
  8 | const unixPrint = require("unix-print");
  9 | const windowsPrint = require("pdf-to-printer");
 10 | 
 11 | // Electron Imports
 12 | const { app, BrowserWindow, ipcMain } = require('electron');
 13 | const isDev = false;
 14 | 
 15 | // Create window once Electron has been initialized
 16 | app.whenReady().then(createWindow);
 17 | 
 18 | // Quit app on all windows closed
 19 | app.on('window-all-closed', () => {
 20 |   if (process.platform !== 'darwin') {
 21 |     app.quit();
 22 |   }
 23 | });
 24 | 
 25 | // On activation, open a window if one doesn't exist
 26 | app.on('activate', () => {
 27 |   if (BrowserWindow.getAllWindows().length === 0) {
 28 |     createWindow();
 29 |   }
 30 | });
 31 | 
 32 | // Creates Browser Window
 33 | function createWindow() {
 34 | 
 35 |   // Create the browser window.
 36 |   const win = new BrowserWindow({
 37 |     webPreferences: {
 38 |       nodeIntegration: true,
 39 |       contextIsolation: false
 40 |     },
 41 |   });
 42 | 
 43 |   // Make Browser Window Full Screen
 44 |   win.maximize();
 45 | 
 46 |   // Load in correct page
 47 | 
 48 |   if (process.platform === 'darwin') {
 49 |   win.loadURL(
 50 |     isDev
 51 |       ? 'http://localhost:3000/scan'
 52 |       : `file://${path.join(__dirname, 'build/index.html#/scan')}`
 53 |   );
 54 |   } else if (process.platform === 'win32') {
 55 |     win.loadURL(
 56 |       isDev
 57 |         ? 'http://localhost:3000/scan'
 58 |         : url.format({
 59 |           pathname: path.join(__dirname,`build/index.html`),
 60 |           protocol:'file',
 61 |           slashes:true,
 62 |           hash:`#/scan`
 63 |         })
 64 |  
 65 |     );
 66 |   }
 67 | 
 68 | 
 69 |   // EVENT LISTENERS
 70 | 
 71 |   
 72 |   // Wait for a request to print a label from the front end
 73 |   ipcMain.on("print-label", (event, data) => {
 74 | 
 75 |     // Parse the print data
 76 |     const printData = JSON.parse(data)
 77 | 
 78 |     
 79 | 
 80 |     // Start download
 81 |     download(BrowserWindow.getFocusedWindow(), printData.URL, { filename: "temporary-label.pdf" }).then(async (dl) => {
 82 | 
 83 |       // Print label if it's a mac
 84 |       if (process.platform === "darwin") {
 85 |         await unixPrint.print(dl.getSavePath(), printData.printerName);
 86 |       }
 87 | 
 88 |       // Print label if it's a windows
 89 |       if (process.platform === "win32") {
 90 | 
 91 |         // Set Printing Options
 92 |         const printingOptions = {
 93 |           silent: true
 94 |         }
 95 |         if (printData.printerName) {
 96 |           printingOptions.printer = printData.printerName; 
 97 |         }
 98 | 
 99 | 
100 |         await windowsPrint.print(dl.getSavePath(), printingOptions);
101 |       }
102 | 
103 | 
104 |       // Delete temporary label file
105 |       fs.unlinkSync(dl.getSavePath());
106 | 
107 |     })
108 | 
109 |   })
110 | 
111 | 
112 |   // Listen to request to get list of printers
113 |   ipcMain.on("get-printer-list", async (event, data) => {
114 | 
115 |     // Create window
116 |     const printWindow = new BrowserWindow({ 'auto-hide-menu-bar': true, show: false });
117 | 
118 |     // Load random URL
119 |     await printWindow.loadURL("https://www.google.com");
120 | 
121 |     // Get Printer List
122 |     const list = await printWindow.webContents.getPrintersAsync();
123 | 
124 |     // Return Printer List to Front End
125 |     event.reply("get-printer-list-reply", list)
126 |   })
127 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "shipping",
  3 |   "productName": "HoopSwagg Shipping",
  4 |   "version": "0.1.0",
  5 |   "private": true,
  6 |   "despcription": "",
  7 |   "author": "Brady Agranoff",
  8 |   "dependencies": {
  9 |     "@testing-library/jest-dom": "^5.16.4",
 10 |     "@testing-library/react": "^13.3.0",
 11 |     "@testing-library/user-event": "^13.5.0",
 12 |     "ajv": "^8.11.0",
 13 |     "bootstrap-icons": "^1.8.3",
 14 |     "electron-dl": "^3.3.1",
 15 |     "electron-squirrel-startup": "^1.0.0",
 16 |     "fs": "^0.0.1-security",
 17 |     "jsonfile": "^6.1.0",
 18 |     "node-downloader-helper": "^2.1.1",
 19 |     "path": "^0.12.7",
 20 |     "pdf-page-counter": "^1.0.3",
 21 |     "pdf-to-printer": "^5.3.0",
 22 |     "pdf2pic": "^2.1.4",
 23 |     "react": "^18.2.0",
 24 |     "react-dom": "^18.2.0",
 25 |     "react-router-dom": "6.3.0",
 26 |     "react-scripts": "^5.0.1",
 27 |     "reactjs-popup": "^2.0.5",
 28 |     "request-promise-native": "^1.0.9",
 29 |     "serve": "^14.0.1",
 30 |     "unix-print": "^1.1.0",
 31 |     "web-vitals": "^2.1.4"
 32 |   },
 33 |   "resolutions": {
 34 |     "react-error-overlay": "6.0.9"
 35 |   },
 36 |   "main": "app.js",
 37 |   "homepage": "./",
 38 |   "scripts": {
 39 |     "start": "react-scripts start",
 40 |     "build": "react-scripts build",
 41 |     "test": "react-scripts test",
 42 |     "eject": "react-scripts eject",
 43 |     "dev": "concurrently -k \"BROWSER=none npm start\" \"npm:electron\"",
 44 |     "electron": "while ! bash -c \"echo > /dev/tcp/localhost/3000\"; do sleep 1; done; electron .",
 45 |     "preinstall": "npx npm-force-resolutions",
 46 |     "postinstall": "electron-builder install-app-deps",
 47 |     "package": "electron-forge package",
 48 |     "make": "electron-forge make",
 49 |     "pack": "electron-builder --dir",
 50 |     "dist": "electron-builder"
 51 |   },
 52 |   "postinstall": "electron-builder install-app-deps",
 53 |   "eslintConfig": {
 54 |     "extends": [
 55 |       "react-app",
 56 |       "react-app/jest"
 57 |     ]
 58 |   },
 59 |   "browserslist": {
 60 |     "production": [
 61 |       ">0.2%",
 62 |       "not dead",
 63 |       "not op_mini all"
 64 |     ],
 65 |     "development": [
 66 |       "last 1 chrome version",
 67 |       "last 1 firefox version",
 68 |       "last 1 safari version"
 69 |     ]
 70 |   },
 71 |   "devDependencies": {
 72 |     "@electron-forge/cli": "^6.0.0-beta.65",
 73 |     "@electron-forge/maker-deb": "^6.0.0-beta.65",
 74 |     "@electron-forge/maker-dmg": "^6.0.0-beta.65",
 75 |     "@electron-forge/maker-rpm": "^6.0.0-beta.65",
 76 |     "@electron-forge/maker-squirrel": "^6.0.0-beta.65",
 77 |     "@electron-forge/maker-zip": "^6.0.0-beta.65",
 78 |     "autoprefixer": "^10.4.7",
 79 |     "concurrently": "^7.2.2",
 80 |     "electron": "^19.0.13",
 81 |     "electron-builder": "^23.3.3",
 82 |     "electron-is-dev": "^2.0.0",
 83 |     "electron-packager": "^15.5.2",
 84 |     "electron-rebuild": "^3.2.8",
 85 |     "postcss": "^8.4.14",
 86 |     "tailwindcss": "^3.1.4",
 87 |     "wait-on": "^6.0.1"
 88 |   },
 89 |   "build": {
 90 |     "extends": null,
 91 |     "appId": "your.id",
 92 |     "mac": {
 93 |       "category": "your.app.category.type"
 94 |     }
 95 |   },
 96 |   "config": {
 97 |     "forge": {
 98 |       "packagerConfig": {},
 99 |       "makers": [
100 |         {
101 |           "name": "@electron-forge/maker-squirrel",
102 |           "config": {
103 |             "name": "shipping",
104 |             "authors": "Brady Agranoff",
105 |             "exe": "shipping.exe"
106 |           }
107 |         },
108 |         {
109 |           "name": "@electron-forge/maker-zip",
110 |           "platforms": [
111 |             "darwin"
112 |           ]
113 |         },
114 |         {
115 |           "name": "@electron-forge/maker-deb",
116 |           "config": {}
117 |         },
118 |         {
119 |           "name": "@electron-forge/maker-rpm",
120 |           "config": {}
121 |         }
122 |       ]
123 |     }
124 |   }
125 | }
126 | 


--------------------------------------------------------------------------------
/src/pages/sign_in.jsx:
--------------------------------------------------------------------------------
  1 | // React imports
  2 | import React from 'react'
  3 | import { useState } from 'react';
  4 | import { useNavigate } from 'react-router-dom';
  5 | 
  6 | // Img imports
  7 | import computerIconWhiteLines from "../images/computerIconWhiteLines.png"
  8 | import logoDark from "../images/logo-dark.png"
  9 | 
 10 | const SignInPage = ({ setUser }) => {
 11 | 
 12 |     // Component States
 13 |     const [loginFormError, setLoginFormError] = useState("");
 14 |     const [buttonLoading, setButtonLoading] = useState(false);
 15 |     const [passwordShowing, setPasswordShowing] = useState(false);
 16 | 
 17 |     // Init Navigate
 18 |     const navigate = useNavigate();
 19 | 
 20 |     // Function to login
 21 |     const login = async (e) => {
 22 | 
 23 |         // Prevent Default Form Submission
 24 |         e.preventDefault();
 25 | 
 26 |         // Set button loading
 27 |         setButtonLoading(true)
 28 | 
 29 |         // Call to electron backend to get user from HQ
 30 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/user`, {
 31 |             headers: {
 32 |                 "Content-Type": "application/x-www-form-urlencoded",
 33 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 34 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 35 |             },
 36 |             method: "POST",
 37 |             body: `username=${encodeURIComponent(e.target[0].value)}&password=${encodeURIComponent(e.target[1].value)}`
 38 |         })
 39 | 
 40 | 
 41 | 
 42 |         // Error Handle
 43 |         if (!res.ok) {
 44 |             const errorRes = await res.json();
 45 |             const errorMessage = errorRes.error;
 46 |             if (await errorMessage && (errorMessage === "pg: no rows in result set" || errorMessage === "username or password is incorrect.")) {
 47 |                 setLoginFormError("Incorrect Username or Password.")
 48 |             } else {
 49 |                 setLoginFormError("Uh oh. An error has occured. Please try again later.")
 50 |             }
 51 | 
 52 |             setButtonLoading(false)
 53 |             return
 54 |         }
 55 | 
 56 | 
 57 |         // Set User
 58 |         const userData = await res.json();
 59 |         setUser(userData)
 60 | 
 61 |         // Set user to localstorage so that if the page gets refreshed, user is still logged in
 62 |         localStorage.setItem("user", JSON.stringify(userData))
 63 | 
 64 |         // Navigate to scan page if it isn't already there
 65 |         navigate("/scan")
 66 | 
 67 |     }
 68 | 
 69 |     // Handles toggle password showing
 70 |     const togglePasswordShowing = () => {
 71 |         setPasswordShowing(!passwordShowing)
 72 |     }
 73 | 
 74 |     return (
 75 |     <div className='relative w-screen h-screen'>
 76 |         <div className="w-full h-full">
 77 |             <img src={logoDark} alt="" className="absolute left-8 top-8 h-10" />
 78 |             <form className='left-40 absolute top-60' onSubmit={login}>
 79 |                 <h3 className="text-3xl w-full font-semibold">Sign In</h3>
 80 |                 <ul className={`list-none bg-red-400 text-white p-3 rounded w-full my-2 ${!loginFormError && "hidden" }`}>{loginFormError}</ul>
 81 |                 <input type="text" className="w-96 my-8 border-b border-black h-8 p-1 py-4 focus:outline-none block" placeholder='Username' name='username' />
 82 |                 
 83 |                 <div className='w-full flex items-center justify-between w-96 my-8 border-b border-black h-8 p-1 py-4'>
 84 |                     <input type={passwordShowing ? "text" : "password"} className="block flex-1 focus:outline-none h-8" placeholder='Password' name='password' />
 85 |                     {/* eyeball toggle */}
 86 |                     <i onClick={togglePasswordShowing} className={`cursor-pointer bi ${ passwordShowing ? "bi-eye" : "bi-eye-slash" }`}></i>
 87 |                 </div>
 88 | 
 89 |                 <button type="submit" className="bg-blue-500 hover:bg-blue-400 cursor-pointer rounded py-2 w-96 flex items-center justify-center my-4 text-white font-light transition duration-300" disabled={buttonLoading}>
 90 |                     {buttonLoading ? (<img src="https://www.ekathimerini.com/wp-content/themes/nxtheme/images/loading.gif" className='h-6' alt="loading" />) : "Sign In"}
 91 |                 </button>
 92 |             </form>
 93 |         </div>
 94 |         <div className="bg-blue-500 flex justify-end absolute top-0 right-0 z-1 w-full h-full" style={{clipPath: "polygon(40% 0%, 100% 0, 100% 100%, 60% 100%)"}}>
 95 |             <h3 className="top-40 right-40 absolute text-white text-4xl max-w-md text-center tracking-wider">
 96 |                 All orders in one place for you and your team
 97 |             </h3>
 98 |             <img src={computerIconWhiteLines} className='w-80 h-80 absolute right-56 top-80' alt="" />
 99 |         </div>
100 |     </div>
101 |     )
102 | }
103 | 
104 | export default SignInPage


--------------------------------------------------------------------------------
/src/pages/scan_a_tote.jsx:
--------------------------------------------------------------------------------
  1 | // React Imports
  2 | import React from 'react'
  3 | import Popup from 'reactjs-popup';
  4 | import 'reactjs-popup/dist/index.css';
  5 | import { useState, useEffect, useRef } from 'react'
  6 | import { useNavigate } from 'react-router-dom';
  7 | 
  8 | // Img Imports
  9 | import computerIconBlueLines from "../images/computerIconBlueLines.png"
 10 | import loader from '../images/loading.gif'
 11 | 
 12 | const ScanATotePage = ({ user }) => {
 13 | 
 14 |     // Init Navigate
 15 |     let navigate = useNavigate();
 16 |     
 17 |     // Component states
 18 |     const [formError, setFormError] = useState("");
 19 |     const [formLoading, setFormLoading] = useState(true);
 20 | 
 21 |     // Input Ref
 22 |     const inputRef = useRef();
 23 | 
 24 |     // Set Barcode scan
 25 |     let barcodeScan = "";
 26 | 
 27 |     // Check if the user already has an order locked
 28 |     useEffect(() => {
 29 |         getPreviouslyLockedOrder()
 30 |     });
 31 | 
 32 |     // Listens for and handles barcode scan
 33 |     useEffect(() => {
 34 | 
 35 |         // Handles Keydown
 36 |         function handleKeyDown (e) {
 37 |             
 38 |             // If keyCode is 13 (enter) then check if there are barcode scan keys and if there are handle barcode scan
 39 |             if (e.keyCode === 13 && barcodeScan.length > 3) {
 40 |                 lockOrder(barcodeScan);
 41 |                 return
 42 |             }
 43 | 
 44 |             // Skip if pressed key is shift key
 45 |             if (e.keyCode === 16) {
 46 |                 return
 47 |             }
 48 | 
 49 |             // Push Keycode to barcode scan variable
 50 |             barcodeScan += e.key;
 51 | 
 52 |             // Set Timeout to clear state
 53 |             setTimeout(() => {
 54 |                 barcodeScan = ""
 55 |             }, 110)
 56 | 
 57 |         }
 58 |         
 59 |         // Adds event listener to page for keydown
 60 |         document.addEventListener('keydown', handleKeyDown)
 61 | 
 62 |         // Don't forget to clean up
 63 |         return function cleanup() {
 64 |             document.removeEventListener('keydown', handleKeyDown);
 65 |         }
 66 |     }, [])
 67 | 
 68 |     // Gets previously locked order and redirects to that page
 69 |     async function getPreviouslyLockedOrder () {
 70 | 
 71 |          // Check for previously locked order
 72 |          const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/user-get-locked-order`, {
 73 |             method: "POST",
 74 |             headers: {
 75 |                 "Content-Type": "application/json",
 76 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 77 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 78 |             },
 79 |             body: JSON.stringify({
 80 |                 user_id: user.ID
 81 |             })
 82 |         })
 83 | 
 84 |         
 85 |         if (!res.ok) {
 86 |             const errorRes = await res.json();
 87 |             const errorMessage = errorRes.error;
 88 |             setFormError(errorMessage)
 89 |             setFormLoading(false);
 90 |             return
 91 |         }
 92 | 
 93 |         // Parse Data
 94 |         let lockedOrder = await res.json();
 95 | 
 96 |         // If order is already locked, navigate there
 97 |         if (lockedOrder && lockedOrder.ID) {
 98 |             navigate(`/order?order_id=${lockedOrder.ID}`);
 99 |         }
100 | 
101 |         // Turn loading off
102 |         setFormLoading(false); 
103 |     }
104 | 
105 |     // Lock order and then go to order page
106 |     async function lockOrder(orderID){
107 | 
108 |         // clear form error
109 |         setFormError("")
110 | 
111 |         // set form loading
112 |         setFormLoading(true);
113 |         
114 |         // Data validation
115 |         if (!orderID) {
116 |             setFormError("Order Number is a required field and must be a whole number.")
117 |             setFormLoading(false);
118 |             return
119 |         }
120 | 
121 |         // Lock Order
122 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/lock-order`, {
123 |             method: "POST",
124 |             headers: {
125 |                 "Content-Type": "application/json",
126 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
127 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
128 |             },
129 |             body: JSON.stringify({
130 |                 order_search_value: orderID.toString(),
131 |                 user_id: user.ID
132 |             })
133 |         })
134 | 
135 |         if (!res.ok) {
136 |             const errorRes = await res.json();
137 |             const errorMessage = errorRes.error;
138 |             setFormError(errorMessage)
139 |             setFormLoading(false);
140 |             return
141 |         }
142 | 
143 |         navigate(`/order?order_id=${orderID}`)
144 | 
145 |     }
146 | 
147 |     return (
148 |         <div className='max-w-2xl mx-auto flex items-center justify-center flex-col text-centered'>
149 |             <h2 className="text-3xl my-4 tracking-wider">Scan a tote</h2>
150 |             <p className="my-4 font-light tracking-wide">or</p>
151 |             <Popup modal onOpen={() => { inputRef.current.focus() }} trigger={<button className="bg-blue-500 hover:bg-blue-400 rounded text-white py-3 font-extralight transition duration-300 px-16 text-xl cursor-pointer my-4">Enter an order</button>} position="center">
152 |             {close => (
153 |                 <div className="relative">
154 |                     <div className={`absolute left-0 top-0 w-full h-full bg-white flex items-center justify-center ${!formLoading && "hidden"}`}>
155 |                         <img src={loader} alt="" />
156 |                     </div>
157 |                     <div className='px-8'>
158 |                         <div className="w-full flex items-center justify-between my-4">
159 |                             <h3 className="text-2xl">Enter an order</h3>
160 |                             <button className="close text-3xl" onClick={close}>
161 |                                 &times;
162 |                             </button>
163 |                         </div>
164 |                         <form action="/order" onSubmit={(event) => { 
165 |                             event.preventDefault();
166 |                             lockOrder(event.target.order_id.value);
167 |                         }}>
168 |                             <div className={`w-full bg-red-400 text-white rounded p-2 flex items-center px-4 ${!formError && "hidden"}`}>{formError}</div>
169 |                             <div className='mt-8 mb-4 w-full'>
170 |                                 <label htmlFor="order_id" className='w-full flex items-center justify-start font-light text-sm'>Order Number</label>
171 |                                 <input ref={inputRef} type="text" name='order_id' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' />
172 |                             </div>
173 |                             <div className="my-4 w-full flex items-center justify-end">
174 |                                 <div className="bg-white text-black font-extralight p-2 px-6 rounded hover:bg-gray-200 cursor-pointer transition duration-300 mx-2" onClick={close}>
175 |                                     Cancel
176 |                                 </div>
177 |                                 <button type='submit' className="bg-blue-500 hover:bg-blue-400 rounded text-white p-2 font-extralight transition duration-300 px-6 cursor-pointer">Submit</button>
178 |                             </div>
179 |                         </form>
180 |                     </div>
181 |                 </div>
182 |             )}
183 |             </Popup>
184 |             <img src={computerIconBlueLines} alt="" className='w-80 mt-20' />
185 |             <div className="absolute bg-blue-500 w-96 h-96 left-0 top-56" style={{clipPath: "ellipse(35% 50% at left)", width: "600px", height: "500px"}}></div>
186 |         </div>
187 |     )
188 | }
189 | 
190 | export default ScanATotePage


--------------------------------------------------------------------------------
/src/pages/order.jsx:
--------------------------------------------------------------------------------
   1 | // React imports
   2 | import React from 'react'
   3 | import { useSearchParams, useNavigate } from "react-router-dom";
   4 | import { useEffect, useState, useRef } from 'react';
   5 | 
   6 | // Component Import
   7 | import Dropdown from "../components/Dropdown"
   8 | import Card from "../components/Card"
   9 | import Error from '../components/Error';
  10 | import Loading from '../components/Loading';
  11 | import Popup from 'reactjs-popup';
  12 | 
  13 | // Img imports
  14 | import placeholderImage from "../images/placeholderItemImage.png"
  15 | import loader from "../images/loading.gif"
  16 | 
  17 | // Electron imports
  18 | const { ipcRenderer, shell } = window.require("electron");
  19 | 
  20 | 
  21 | const OrderPage = ({user}) => {
  22 | 
  23 |     // Init Navigate Function
  24 |     const navigate = useNavigate();
  25 | 
  26 |     // Component States
  27 |     const [order, setOrder] = useState(null);
  28 |     const [orderError, setOrderError] = useState("");
  29 |     const [loading, setLoading] = useState(true);
  30 |     const [orderWeight, setOrderWeight] = useState(0);
  31 |     const [orderBoxID, setOrderBoxID] = useState(null);
  32 |     const [orderItemsPackedStatus, setOrderItemsPackedStatus] = useState([]);
  33 |     const [printers, setPrinters] = useState([]);
  34 |     const [selectedPrinter, setSelectedPrinter] = useState("");
  35 |     let barcodeScan = "";
  36 | 
  37 |     // Shipping To Form States
  38 |     const [shipToFormLoading, setShipToFormLoading] = useState(false);
  39 |     const [shippingFormError, setShippingFormError] = useState("");
  40 |     
  41 |     //  Shipping Rates Popup States
  42 |     const [shippingRates, setShippingRates] = useState(null);
  43 |     const [shippingRatesError, setShippingRatesError] = useState("");
  44 |     const [selectedRate, setSelectedRate] = useState("");
  45 |     const [shippingRatesPopupLoading, setShippingRatesPopupLoading] = useState(false);
  46 |     const [shippingRatesPopupOpen, setShippingRatesPopupOpen] = useState(false);
  47 | 
  48 |     // Shipments States
  49 |     const [shipmentsLoading, setShipmentsLoading] = useState(false);
  50 |     const [shipments, setShipments] = useState(null);
  51 | 
  52 |     // Flag for error state
  53 |     const [flaggedError, setFlaggedError] = useState("");
  54 | 
  55 |     // Use Search Params
  56 |     const [searchParams] = useSearchParams();
  57 | 
  58 |     // Refs
  59 |     const weightInputRef = useRef();
  60 |     const boxContainerRef = useRef();
  61 | 
  62 |     // useEffect Hooks for page
  63 | 
  64 |     // Get Initial Data On Page Load Function
  65 |     useEffect(() => {
  66 | 
  67 |         
  68 | 
  69 |         // Get Initial Data On Page Load Function
  70 |         async function getInitialPageData () {
  71 | 
  72 |             // Set Page To Loading
  73 |             setLoading(true);
  74 | 
  75 |             // Request all available printers
  76 |             fetchPrinters();
  77 | 
  78 |             // FETCH DATA
  79 | 
  80 |             /*
  81 |                 I'm fetching first, then setting the data here 
  82 |                 as a way to make multiple requests at once and speed up the requests
  83 |             */
  84 | 
  85 |             // Get Order ID
  86 |             const orderID = searchParams.get("order_id")
  87 | 
  88 |             // Fetch Order
  89 |             const fetchedOrder = await fetchOrder(orderID)
  90 |             // Fetch Shipments
  91 |             const fetchedShipments = await fetchShipments(fetchedOrder.ID);
  92 | 
  93 |             
  94 |             // Set Order into state
  95 |             if (!fetchedOrder && !orderError) {
  96 |                 setOrderError("An error has occured while fetching the order. Try again later.")
  97 |                 return;
  98 |             }
  99 |             setOrder(fetchedOrder);
 100 | 
 101 | 
 102 |             // Set shipments into state
 103 |             setShipments(fetchedShipments);
 104 | 
 105 |             // Weight Validation
 106 |             if (!fetchedOrder.EstimatedWeight || fetchedOrder.EstimatedWeight === "0") {
 107 |                 setOrderError("This order doesn't have a weight. Please set in the error bin, and notify Brian.")
 108 |                 return
 109 |             }
 110 | 
 111 |             // SET DATA INTO STATES AFTER FETCHING
 112 | 
 113 | 
 114 |             // Set Order Weight
 115 |             setOrderWeight(fetchedOrder.EstimatedWeight);
 116 |             
 117 | 
 118 |             // Set Order items Packed Status
 119 |             if (orderItemsPackedStatus.length < 1) {
 120 |                 const initialOrderItemsPackedStatus = [];
 121 |                 let orderItemScanned = false;
 122 |                 for (let i = 0; i < fetchedOrder.Items.length; i++) {
 123 | 
 124 |                     // set packed true if order Item ID was scanned
 125 |                     if (fetchedOrder.Items[i].ID.toString() === orderID && !orderItemScanned) {
 126 | 
 127 |                         
 128 |                         initialOrderItemsPackedStatus.push({
 129 |                             index: `${i}`,
 130 |                             id: fetchedOrder.Items[i].ID,
 131 |                             packed: true
 132 |                         })
 133 | 
 134 |                         for (let j = 0; j < parseInt(fetchedOrder.Items[i].Quantity) - 1; j++) {
 135 |                             initialOrderItemsPackedStatus.push({
 136 |                                 index: `${i}-${j}`,
 137 |                                 id: fetchedOrder.Items[i].ID,
 138 |                                 packed: false
 139 |                             })
 140 |                         }
 141 | 
 142 |                         orderItemScanned = true;
 143 | 
 144 |                         continue;
 145 |                     }
 146 | 
 147 |                     for (let j = 0; j < parseInt(fetchedOrder.Items[i].Quantity); j++) {
 148 |                         initialOrderItemsPackedStatus.push({
 149 |                             index: `${i}-${j}`,
 150 |                             id: fetchedOrder.Items[i].ID,
 151 |                             packed: false
 152 |                         })
 153 |                     }
 154 |                 }
 155 | 
 156 |                 setOrderItemsPackedStatus(initialOrderItemsPackedStatus)
 157 |             }
 158 | 
 159 |             // Set Order Box ID
 160 |             if (!orderBoxID) {
 161 |                 for (let i = 0; i < fetchedOrder.Boxes.length; i++) {
 162 |                     if (fetchedOrder.Boxes[i].SuggestedBox) {
 163 |                         setOrderBoxID(fetchedOrder.Boxes[i].ID);
 164 |                         break;
 165 |                     }
 166 |                 }
 167 |             }
 168 | 
 169 |             // Turn off loading screen
 170 |             setLoading(false);
 171 | 
 172 |         }
 173 | 
 174 |         // Run Function
 175 |         getInitialPageData();
 176 | 
 177 |     }, []);
 178 | 
 179 |      // Listens for and handles barcode scan
 180 |      useEffect(() => {
 181 | 
 182 |         // Handles Keydown
 183 |         function handleKeyDown (e) {
 184 |             
 185 |             // If keyCode is 13 (enter) then check if there are barcode scan keys and if there are handle barcode scan
 186 |             if (e.keyCode === 13 && barcodeScan.length > 3) {
 187 |                 handleBarcodeScan(barcodeScan, orderItemsPackedStatus)
 188 |                 return
 189 |             }
 190 | 
 191 |             // Skip if pressed key is shift key
 192 |             if (e.keyCode === 16) {
 193 |                 return
 194 |             }
 195 | 
 196 |             // Push Keycode to barcode scan variable
 197 |             barcodeScan += e.key;
 198 | 
 199 |             // Set Timeout to clear state
 200 |             setTimeout(() => {
 201 |                 barcodeScan = ""
 202 |             }, 110)
 203 | 
 204 |         }
 205 |         
 206 |         // Adds event listener to page for keydown
 207 |         document.addEventListener('keydown', handleKeyDown)
 208 | 
 209 |         // Don't forget to clean up
 210 |         return function cleanup() {
 211 |             document.removeEventListener('keydown', handleKeyDown);
 212 |         }
 213 |     }, [orderWeight, orderItemsPackedStatus, orderBoxID, selectedPrinter, shipments])
 214 | 
 215 | 
 216 |     // API CALL FUNCTIONS
 217 | 
 218 |     // Fetches an order by Order ID
 219 |     const fetchOrder = async (orderID) => {
 220 | 
 221 |         // Error Handle validation
 222 |         if (!orderID) {
 223 |             setOrderError("You cannot fetch an order without the parameter orderID.")
 224 |             return;
 225 |         }
 226 | 
 227 |         // Fetch Order
 228 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/order/${orderID}`, {
 229 |             headers: {
 230 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 231 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 232 |             }
 233 |         })
 234 | 
 235 |         // Error handle response
 236 |         if (!res.ok) {
 237 |             const errorRes = await res.json();
 238 |             const errorMessage = errorRes.error;
 239 |             setOrderError(errorMessage)
 240 | 
 241 |             // unlock order
 242 |             postUnlockOrder(orderID)
 243 | 
 244 |             return
 245 |         }
 246 | 
 247 | 
 248 |         // Parse data
 249 |         const orderData = await res.json();
 250 | 
 251 |         // Return Data
 252 |         return orderData;
 253 |         
 254 |     }
 255 | 
 256 |     // Fetches Shipments By Order ID
 257 |     const fetchShipments = async (orderID) => {
 258 |         
 259 |         // Validate orderID parameter
 260 |         if (!orderID) {
 261 |             setOrderError("Unable to fetch shipments without an orderID parameter");
 262 |             return;
 263 |         }
 264 | 
 265 |         // Fetch Shipments from HQ
 266 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/order/${orderID}/shipments`, {
 267 |             headers: {
 268 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 269 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 270 |             }
 271 |         })
 272 | 
 273 |         // Handle Errors in response
 274 |         if (!res.ok) {
 275 |             const errorRes = await res.json();
 276 |             const errorMessage = errorRes.error;
 277 |             setOrderError(errorMessage)
 278 |             return
 279 |         }
 280 | 
 281 |         // return Shipments
 282 |         const fetchedShipments = await res.json()
 283 |         return fetchedShipments;
 284 | 
 285 |     }
 286 | 
 287 |     // Fetches Printers from electron
 288 |     const fetchPrinters = () => {
 289 | 
 290 |         // Send Request for printers
 291 |         ipcRenderer.send("get-printer-list");
 292 | 
 293 |         // Set listener for receiving printer list
 294 |         ipcRenderer.on("get-printer-list-reply", (event, printerList) => {
 295 | 
 296 |             // Set the printer list
 297 |             setPrinters(printerList)
 298 | 
 299 |             // Set default printer as selected for first time fetching printers
 300 |             if (!selectedPrinter) {
 301 |                 for (let i = 0; i < printerList.length; i++) {
 302 |                     if (printerList[i].isDefault) {
 303 |                         setSelectedPrinter(printerList[i])
 304 |                     }
 305 |                 }
 306 |             }
 307 | 
 308 |         })
 309 | 
 310 |         return;
 311 | 
 312 |     }
 313 | 
 314 |     // Fetches Shipping Rates Based on Current Info
 315 |     const fetchShippingRates = async (orderID, orderWeightToFetch, orderBoxIDToFetch) => {
 316 | 
 317 |         // Validate Params
 318 | 
 319 |         // orderID
 320 |         if (!orderID) {
 321 |             alert("Unable to fetch shipping rates without orderID parameter.");
 322 |             return;
 323 |         }
 324 | 
 325 |         // orderWeightToFetch
 326 |         if (!orderWeightToFetch) {
 327 |             alert("Unable to fetch shipping rates without orderWeightToFetch parameter.");
 328 |             return;
 329 |         }
 330 | 
 331 |         // orderBoxIDToFetch
 332 |         if (!orderBoxIDToFetch) {
 333 |             alert("Unable to fetch shipping rates without orderBoxIDToFetch parameter.");
 334 |             return;
 335 |         }
 336 | 
 337 |         // Fetch Shipping Rates
 338 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/get-rates`, {
 339 |             method: "POST",
 340 |             headers: {
 341 |                 "Content-Type": "application/json",
 342 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 343 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 344 |             },
 345 |             body: JSON.stringify({
 346 |                 order_id: orderID,
 347 |                 weight: parseFloat(orderWeightToFetch),
 348 |                 box_id: parseInt(orderBoxIDToFetch) 
 349 |             })
 350 |         })
 351 | 
 352 |         // Handle Response Error
 353 |         if (!res.ok) {
 354 |             const errorRes = await res.json();
 355 |             const errorMessage = errorRes.error;
 356 |             setShippingRatesError(errorMessage)
 357 |             return
 358 |         }
 359 | 
 360 |         // Parse and Return Shipping Rates
 361 |         const fetchedShippingRatesRes = await res.json()
 362 |         return fetchedShippingRatesRes.Rates;
 363 |     }
 364 | 
 365 |     // Makes request to HQ to unlock order
 366 |     const postUnlockOrder = async (orderID) => {
 367 | 
 368 |         // Order ID parameter validation
 369 |         if (!orderID) {
 370 |             setOrderError("Unable to unlock order without orderID parameter.");
 371 |             return;
 372 |         }
 373 | 
 374 |         // Unlock Order Request to HQ
 375 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/unlock-order`, {
 376 |             method: "POST",
 377 |             headers: {
 378 |                 "Content-Type": "application/json",
 379 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 380 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 381 |             },
 382 |             body: JSON.stringify({
 383 |                 order_id: parseInt(orderID),
 384 |                 user_id: user.ID
 385 |             })
 386 |         })
 387 | 
 388 |         // Error Handle in response
 389 |         if (!res.ok) {
 390 |             const errorRes = await res.json();
 391 |             const errorMessage = errorRes.error;
 392 |             setOrderError(errorMessage)
 393 |             return
 394 |         }
 395 | 
 396 |     }
 397 | 
 398 |     // Fetches an existing label based on a shipment ID
 399 |     const fetchExistingLabel = async (shipmentID) => {
 400 | 
 401 |         // Parameter Validation
 402 |         if (!shipmentID) {
 403 |             setOrderError("Unable to view fetch an existing label without a shipmentID");
 404 |             return;
 405 |         }
 406 | 
 407 |         // Fetch Label
 408 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/view-label/${shipmentID}`, {
 409 |             headers: {
 410 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 411 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 412 |             }
 413 |         })
 414 | 
 415 |         // Handle response error
 416 |         if (!res.ok) {
 417 |             const errorRes = await res.json();
 418 |             const errorMessage = errorRes.error;
 419 |             setOrderError(errorMessage)
 420 |             return
 421 |         }
 422 | 
 423 |         const labelRes = await res.json()
 424 |         return labelRes.URL;
 425 | 
 426 |     }
 427 | 
 428 |     // Makes Request to HQ to update shipping address
 429 |     const postUpdateShippingAddress = async (newAddressData) => {
 430 | 
 431 |         // Make Request to change address
 432 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/edit-address`, {
 433 |             method: "POST",
 434 |             headers: {
 435 |                 "Content-Type": "application/json",
 436 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 437 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 438 |             },
 439 |             body: JSON.stringify(newAddressData)
 440 |         });
 441 | 
 442 |         // Error Handle
 443 |         if (!res.ok) {
 444 |             const errorRes = await res.json();
 445 |             const errorMessage = errorRes.error;
 446 |             setShippingFormError(errorMessage)
 447 |             return
 448 |         }
 449 | 
 450 |     }
 451 | 
 452 |     // Makes Request to update Carrier Method
 453 |     const postUpdateCarrierMethod = async (orderID, selectedCarrier, selectedMethod) => {
 454 | 
 455 |         // Validate Parameters
 456 |         
 457 |         // orderID
 458 |         if (!orderID) {
 459 |             setShippingRatesError("Unable to update carrier method without orderID parameter.");
 460 |             return;
 461 |         }
 462 | 
 463 |         // selectedCarrier
 464 |         if (!selectedCarrier) {
 465 |             setShippingRatesError("Unable to update carrier method without selectedCarrier parameter.");
 466 |             return;
 467 |         }
 468 | 
 469 |         // selectedMethod
 470 |         if (!selectedMethod) {
 471 |             setShippingRatesError("Unable to update carrier method without selectedMethod parameter.");
 472 |             return;
 473 |         }
 474 | 
 475 |         // Make Request to Update Carrier Method
 476 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/update-carrier-method`, {
 477 |             method: 'POST',
 478 |             headers: {
 479 |                 "Content-Type": "application/json",
 480 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 481 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 482 |             },
 483 |             body: JSON.stringify({
 484 |                 order_id: orderID,
 485 |                 carrier: selectedCarrier,
 486 |                 method: selectedMethod
 487 |             })
 488 |         })
 489 | 
 490 |         // Error Handle Response
 491 |         if (!res.ok) {
 492 |             const errorRes = await res.json();
 493 |             const errorMessage = errorRes.error;
 494 |             setShippingRatesError(errorMessage)
 495 |             return
 496 |         }
 497 | 
 498 | 
 499 |     }
 500 | 
 501 |     // Makes Request To Void Label by ShipmentID
 502 |     const postVoidLabel = async (shipmentID) => {
 503 | 
 504 |         // Parameter Validation
 505 |         if (!shipmentID) {
 506 |             alert("Unable to void label without parameter shipmentID");
 507 |             return;
 508 |         }
 509 | 
 510 |         // Make request to void label
 511 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/get-refund`, {
 512 |             method: "POST",
 513 |             headers: {
 514 |                 "Content-Type": "application/json",
 515 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 516 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 517 |             },
 518 |             body: JSON.stringify({
 519 |                 shipment_id: shipmentID
 520 |             })
 521 |         })
 522 | 
 523 |         // Handle Errors in response
 524 |         if (!res.ok) {
 525 |             const errorRes = await res.json();
 526 |             const errorMessage = errorRes.error;
 527 |             setOrderError(errorMessage)
 528 |         }
 529 | 
 530 |     }
 531 | 
 532 |     // Makes Request to purchase new label
 533 |     const postPurchaseLabel = async (orderID, weight, boxID, userID) => {
 534 | 
 535 |         // Parameter Validation
 536 | 
 537 |         // orderID
 538 |         if (!orderID) {
 539 |             alert("Unable to purchase label without orderID parameter.");
 540 |             return;
 541 |         }
 542 | 
 543 |         // weight
 544 |         if (!weight) {
 545 |             alert("Unable to purchase label without weight parameter.");
 546 |             return;
 547 |         }
 548 | 
 549 |         // boxID
 550 |         if (!boxID) {
 551 |             alert("Unable to purchase label without boxID parameter.");
 552 |             return;
 553 |         }
 554 | 
 555 |         // userID
 556 |         if (!userID) {
 557 |             alert("Unable to purchase label without userID parameter.");
 558 |             return;
 559 |         }
 560 | 
 561 |         // Make Request to purchase label
 562 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/get-label`, {
 563 |             method: 'POST',
 564 |             headers: {
 565 |                 "Content-Type": "application/json",
 566 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 567 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 568 |             },
 569 |             body: JSON.stringify({
 570 |                 order_id: parseInt(orderID),
 571 |                 weight: parseFloat(weight),
 572 |                 box_id: parseInt(boxID),
 573 |                 user_id: parseInt(userID)
 574 |             })
 575 |         })
 576 | 
 577 |         // Error Handle Response
 578 |         if (!res.ok) {
 579 |             const errorRes = await res.json();
 580 |             const errorMessage = errorRes.error;
 581 |             setOrderError(errorMessage)
 582 |             return
 583 |         }
 584 | 
 585 | 
 586 |         // Parse and return Label Response
 587 |         const labelRes = await res.json()
 588 |         return labelRes.label_url;
 589 | 
 590 |     }
 591 | 
 592 |     // Make Request to flag for error
 593 |     const postFlagError = async (orderID, errorMessage) => {
 594 |         
 595 |         // Parameter Validation
 596 |         if (!orderID) {
 597 |             alert("Unable to flag error without orderID parameter.");
 598 |             return;
 599 |         }
 600 | 
 601 |         if (!errorMessage) {
 602 |             alert("Unable to flag error without errorMessage parameter.");
 603 |             return;
 604 |         }
 605 | 
 606 |         // Make Request to flag error
 607 |         const res = await fetch(`${process.env.REACT_APP_HQ_SHIPPING_ADDRESS}/report-error`, {
 608 |             method: 'POST',
 609 |             headers: {
 610 |                 "Content-Type": "application/json",
 611 |                 "X-API": process.env.REACT_APP_HQ_SHIPPING_X_API_KEY,
 612 |                 "X-Real-IP": process.env.REACT_APP_HQ_SHIPPING_X_REAL_IP
 613 |             },
 614 |             body: JSON.stringify({
 615 |                 order_id: parseInt(orderID),
 616 |                 user_id: parseInt(user.ID),
 617 |                 error_note: errorMessage
 618 |             })
 619 | 
 620 |         })
 621 | 
 622 |         // Error Handle Response
 623 |         if (!res.ok) {
 624 |             const errorRes = await res.json();
 625 |             const errorMessage = errorRes.error;
 626 |             setOrderError(errorMessage)
 627 |             return
 628 |         }
 629 | 
 630 |     }
 631 | 
 632 |     // ACTION HANDLE FUNCTIONS
 633 | 
 634 | 
 635 |     // Selects Box
 636 |     const handleBoxSelect = (event) => {
 637 | 
 638 |         // Set new Box
 639 |         setOrderBoxID(event.target.value);
 640 | 
 641 |         // Scroll to top of box container
 642 |         boxContainerRef.current.scrollTop = 0;
 643 | 
 644 |     }
 645 | 
 646 |     // Print Label
 647 |     const handlePrintLabel = async () => {
 648 | 
 649 |         // Loop through shipments -- if one is not voided, ship that
 650 |         if (shipments) {
 651 |             for (let i = 0; i < shipments.length; i++) {
 652 |                 if (!shipments[i].Voided) {
 653 | 
 654 |                     // If Shipment isn't voided fetch label and print
 655 |                     const existingLabelURL = await fetchExistingLabel(shipments[i].ID);    
 656 | 
 657 |                     // print label if it exists
 658 |                     if (existingLabelURL) {
 659 |                         ipcRenderer.send("print-label", JSON.stringify({URL: existingLabelURL, printerName: selectedPrinter.name}))
 660 |                     }
 661 | 
 662 |                     // return so other label doesn't get printed
 663 |                     return;
 664 | 
 665 |                 }
 666 |             }
 667 |         }
 668 | 
 669 |         // If all existing shipments are voided, purchase label (which creates shipment), print label, and update shipments
 670 | 
 671 |         // Set shipments loading
 672 |         setLoading(true);
 673 | 
 674 |         // Purchase Label
 675 |         const newLabelURL = await postPurchaseLabel(order.ID, orderWeight, orderBoxID, user.ID);
 676 | 
 677 |         // print label if it exists
 678 |         if (newLabelURL) {
 679 |             ipcRenderer.send("print-label", JSON.stringify({URL: newLabelURL, printerName: selectedPrinter.name}))
 680 |         }
 681 | 
 682 |         // Update Shipments
 683 |         const fetchedShipments = await fetchShipments(order.ID);
 684 |         setShipments(fetchedShipments)
 685 | 
 686 |         // Set shipments to not loading
 687 |         setLoading(false);
 688 |     }
 689 | 
 690 |     // Unlocks order when user goes back to tote page
 691 |     const handleBackToTotePageClick = async () => {
 692 | 
 693 |         // Set Screen Loading
 694 |         setLoading(true);
 695 | 
 696 |         // Unlock Order
 697 |         if (order && order.ID) {
 698 |             await postUnlockOrder(order.ID);
 699 |         }
 700 | 
 701 |         // Navigate back to tote page
 702 |         navigate("/scan")
 703 | 
 704 |         // Turn of loading in case
 705 |         setLoading(false);
 706 | 
 707 |     }
 708 | 
 709 |     // Updates Shipping Info
 710 |     const handleSaveShipToSubmit = async (event, closePopup) => {
 711 | 
 712 |         // Prevent Default Submit action
 713 |         event.preventDefault();
 714 | 
 715 |         // Clear shipping form error
 716 |         setShippingFormError("")
 717 | 
 718 |         // Set Shipping Form Loading
 719 |         setShipToFormLoading(true)
 720 | 
 721 |         // Get Data and create post data
 722 |         const newAddressData = {
 723 |             order_id: order.ID,
 724 |             name: event.target.name.value,
 725 |             company: event.target.company.value,
 726 |             street1: event.target.street1.value,
 727 |             street2: event.target.street2.value,
 728 |             city: event.target.city.value,
 729 |             state: event.target.state.value,
 730 |             postal_code: event.target.zip.value,
 731 |             country: event.target.country.value,
 732 |             phone: event.target.phone.value
 733 |         }
 734 | 
 735 |         // Make call to update ship to in HQ
 736 |         await postUpdateShippingAddress(newAddressData);
 737 |         
 738 |         // Set ShipTo Address and order
 739 |         const newOrder = order;
 740 |         newOrder.ShipTo = {
 741 |             Name: newAddressData.name,
 742 |             Company: newAddressData.company,
 743 |             Street1: newAddressData.street1,
 744 |             Street2: newAddressData.street2,
 745 |             City: newAddressData.city,
 746 |             State: newAddressData.state,
 747 |             PostalCode: newAddressData.postal_code,
 748 |             Country: newAddressData.country,
 749 |             Phone: newAddressData.phone
 750 |         };
 751 |         setOrder(newOrder);
 752 | 
 753 |         // Turn off loading
 754 |         setShipToFormLoading(false)
 755 | 
 756 |         // Close popup
 757 |         closePopup();
 758 |         
 759 |     }
 760 | 
 761 |     // Edits Weight
 762 |     const handleEditWeightSubmit = (event, closePopup) => {
 763 | 
 764 |         // Prevent Default Action
 765 |         event.preventDefault();
 766 | 
 767 |         // Set new order weight
 768 |         setOrderWeight(parseFloat(event.target.weight.value))
 769 | 
 770 |         // Closes Popup
 771 |         closePopup();
 772 | 
 773 |     }
 774 | 
 775 |     // Pack Item
 776 |     const handlePackItem = (orderItemID) => {
 777 | 
 778 |         //set new array to work with
 779 |         let updatedOrderItemPackedStatus = (orderItemsPackedStatus)
 780 | 
 781 |         // Find index of item in array to update
 782 |         let indexToUpdate = updatedOrderItemPackedStatus.findIndex((item) => (item.id === orderItemID && item.packed === false))
 783 |         updatedOrderItemPackedStatus[indexToUpdate].packed = true;
 784 |         
 785 |         // Set array
 786 |         setOrderItemsPackedStatus([...updatedOrderItemPackedStatus]);
 787 | 
 788 |     }
 789 | 
 790 |     // Unpack Item
 791 |     const handleUnpackItem = (orderItemID) => {
 792 | 
 793 |                 //set new array to work with
 794 |                 let updatedOrderItemPackedStatus = (orderItemsPackedStatus)
 795 | 
 796 |                 // Find index of item in array to update
 797 |                 let indexToUpdate = updatedOrderItemPackedStatus.findIndex((item) => (item.id === orderItemID && item.packed === true))
 798 |                 updatedOrderItemPackedStatus[indexToUpdate].packed = false;
 799 |                 
 800 |                 // Set array
 801 |                 setOrderItemsPackedStatus([...updatedOrderItemPackedStatus]);
 802 | 
 803 |     }
 804 | 
 805 |     // Populates Shipping Rates Popup
 806 |     const handlePopulateShippingRates = async () => {
 807 | 
 808 |         // Validation
 809 |         if (!orderWeight) {
 810 |             alert("Order Weight is required to get shipping rates")
 811 |             setShippingRatesPopupOpen(false)
 812 |             return
 813 |         }
 814 | 
 815 |         if (!orderBoxID) {
 816 |             alert("Box is required to get shipping rates")
 817 |             setShippingRatesPopupOpen(false)
 818 |             return
 819 |         }
 820 | 
 821 | 
 822 |         setShippingRatesPopupOpen(true)
 823 | 
 824 |         // set loading to true
 825 |         setShippingRatesPopupLoading(true)
 826 | 
 827 |         // Fetch Shipping Rates
 828 |         const fetchedShippingRates = await fetchShippingRates(order.ID, orderWeight, orderBoxID);
 829 |         
 830 | 
 831 |         // Parse Shipping Rates into object
 832 |         const shippingRatesParsed = {}
 833 | 
 834 |         // Sort Rates into provider
 835 |         for (let i = 0; i < fetchedShippingRates.length; i++) {
 836 | 
 837 |             // Create Provider if it doesn't exist
 838 |             if (!shippingRatesParsed[fetchedShippingRates[i].provider]) {
 839 |                 shippingRatesParsed[fetchedShippingRates[i].provider] = [];
 840 |             }
 841 | 
 842 |             // Push Rate to provider
 843 |             shippingRatesParsed[fetchedShippingRates[i].provider].push(fetchedShippingRates[i]);
 844 |         }
 845 | 
 846 |         // Set Shipping Rates State
 847 |         setShippingRates(shippingRatesParsed);
 848 | 
 849 |         // Turn off loading screen
 850 |         setShippingRatesPopupLoading(false);
 851 |     }
 852 | 
 853 |     // Handles a barcode scan
 854 |     const handleBarcodeScan = async (scannedCode, currentOrderItemsPackedStatus) => {
 855 | 
 856 |         // handle if barcode scan is bx_
 857 |         if (scannedCode.startsWith("bx_")) {
 858 |             
 859 |             // Get Box ID
 860 |             const boxID = scannedCode.split("_")[1];
 861 |             
 862 |             setOrderBoxID(boxID);
 863 | 
 864 |             // Scroll to top of box container
 865 |             boxContainerRef.current.scrollTop = 0;
 866 | 
 867 |             return;
 868 |         }
 869 | 
 870 |         // handle if barcode scan is hs_
 871 |         if (scannedCode.startsWith("hs_")) {
 872 | 
 873 |             // get scan code
 874 |             const scanCode = scannedCode.split("_")[1];
 875 | 
 876 |             if (scanCode === "000001") {
 877 | 
 878 |                 // validate order weight
 879 |                 if (!orderWeight || orderWeight === "0") {
 880 |                     // alert order weight is required to print label
 881 |                     alert("Order Weight is required to print label");
 882 |                     return;
 883 |                 }
 884 | 
 885 |                 // validate selected printer
 886 |                 if (!selectedPrinter.name) {
 887 |                     // alert printer is required to print label
 888 |                     alert("Selected Printer is required to print label");
 889 |                     return;
 890 |                 }
 891 | 
 892 |                 // validate order items packed status
 893 |                 if ((orderItemsPackedStatus.filter(item => !item.packed)).length) {
 894 |                     // alert order items are required to be packed to print label
 895 |                     alert("Order Items are required to be packed to print label");
 896 |                     return;
 897 |                 }
 898 | 
 899 |                 // print label
 900 |                 handlePrintLabel();
 901 | 
 902 |             }
 903 | 
 904 |             if (scanCode === "000002") {
 905 |                
 906 |                 // validate order item packed status
 907 |                 if ((orderItemsPackedStatus.filter(item => !item.packed)).length) {
 908 |                     // alert order items are required to be packed to complete order
 909 |                     alert("Order Items are required to be packed to complete order");
 910 |                     return;
 911 |                 }
 912 | 
 913 |                 // validate shipments
 914 |                 if (!shipments || (!shipments.filter(shipment => !shipment.Voided).length)) {
 915 |                     // alert shipments are required to complete order
 916 |                     alert("at least 1 non-Voided shipment is required to complete order");
 917 |                     return;
 918 |                 }
 919 | 
 920 |                 handleCompleteOrder();
 921 | 
 922 |             }
 923 | 
 924 |         }
 925 | 
 926 |         // handle if barcode scan is order item
 927 |         for (let i = 0; i < currentOrderItemsPackedStatus.length; i++) {
 928 | 
 929 |             if (currentOrderItemsPackedStatus[i].id.toString() !== scannedCode) {
 930 |                 continue;
 931 |             }
 932 | 
 933 |             if(currentOrderItemsPackedStatus[i].packed) {
 934 |                 // handleUnpackItem(currentOrderItemsPackedStatus[i].id)
 935 |             } else {
 936 |                 handlePackItem(currentOrderItemsPackedStatus[i].id)
 937 |             }
 938 |         }
 939 | 
 940 |     }
 941 | 
 942 |     // Handles click on rate selection
 943 |     const handleRateClick = (rateSelected) => {
 944 |         setSelectedRate(rateSelected);
 945 |     }
 946 | 
 947 |     // Updates Carrier Method On Save inside Shipping Method popup
 948 |     const handleUpdateCarrierMethodSubmit = async (closePopup) => {
 949 |         
 950 |         // Clear Error Message
 951 |         setShippingRatesError("");
 952 | 
 953 |         // Set to loading
 954 |         setShippingRatesPopupLoading(true)
 955 | 
 956 |         // Make call to update carrier method
 957 |         await postUpdateCarrierMethod(order.ID, selectedRate.carrier, selectedRate.method);
 958 | 
 959 |         // Re-Fetch updated order and set it in state so that shipping method aligns
 960 |         const updatedOrder = await fetchOrder(order.ID);
 961 |         setOrder(updatedOrder);
 962 |         
 963 |         // Turn off loading
 964 |         setShippingRatesPopupLoading(false);
 965 | 
 966 |         // Close popup
 967 |         closePopup();
 968 | 
 969 |     }
 970 | 
 971 |     // Handles Voids a label click on shipment
 972 |     const handleVoidLabel = async (shipmentID) => {
 973 | 
 974 |         // set loading to true
 975 |         setShipmentsLoading(true)
 976 | 
 977 |         // Void Label
 978 |         await postVoidLabel(shipmentID);
 979 | 
 980 |         // Re-Fetch shipments and set to state to update shipments
 981 |         const updatedShipments = await fetchShipments(order.ID);
 982 |         setShipments(updatedShipments)
 983 | 
 984 |         // Turn off loading screen
 985 |         setShipmentsLoading(false)
 986 | 
 987 |     }
 988 | 
 989 |     // Handles View Label Button Click
 990 |     const handleViewLabelClick = async (shipmentID) => {
 991 | 
 992 |         // set loading to true
 993 |         setShipmentsLoading(true)
 994 | 
 995 |         // Fetch label
 996 |         const existingLabelURL = await fetchExistingLabel(shipmentID);    
 997 | 
 998 |         // Open window with label if it exists
 999 |         if (existingLabelURL) {
1000 |             window.open(existingLabelURL)
1001 |         }
1002 | 
1003 |         // Turn off loading screen
1004 |         setShipmentsLoading(false)
1005 | 
1006 |     }
1007 | 
1008 |     // Handles Complete Order (Just unlocks order)
1009 |     const handleCompleteOrder = async () => {
1010 | 
1011 |         // Set Screen Loading
1012 |         setLoading(true);
1013 | 
1014 |         // Unlock Order
1015 |         await postUnlockOrder(order.ID);
1016 | 
1017 |         // Navigate back to tote page
1018 |         navigate("/scan")
1019 | 
1020 |         // Turn of loading in case
1021 |         setLoading(false);
1022 | 
1023 |     }
1024 | 
1025 |     // Handles Flag Order for error
1026 |     const handleFlagForError = async (orderID, flaggedError) => {
1027 |         
1028 |         // Set Screen Loading
1029 |         setLoading(true);
1030 | 
1031 |         // Flag Order
1032 |         await postFlagError(orderID, flaggedError);
1033 | 
1034 |         // unlock order
1035 |         await postUnlockOrder(order.ID);
1036 | 
1037 |         // Navigate back to tote page
1038 |         navigate("/scan")
1039 | 
1040 |         // Turn of loading in case
1041 |         setLoading(false);
1042 | 
1043 | 
1044 |     }
1045 | 
1046 | 
1047 | 
1048 | 
1049 |     // RENDER PROPER PAGE
1050 | 
1051 |     // Show order error screen
1052 |     if (orderError) {
1053 |         return (
1054 |             <Error message={orderError} onClick={handleBackToTotePageClick} buttonText="Go back to Tote page"></Error>
1055 |         )
1056 |     }
1057 | 
1058 |      // Show Loading Screen
1059 |      if (loading) {
1060 |         return (
1061 |             <Loading></Loading>
1062 |         )
1063 |     }
1064 | 
1065 |    
1066 |     // Show Order Page
1067 |     return (
1068 |         <div className="flex flex-col gap-4 flex-1">
1069 |             <div className="w-full">
1070 |                 <p onClick={handleBackToTotePageClick} className='hover:text-blue-500 transition duration-300 text-sm cursor-pointer inline'> <i className="bi bi-arrow-left"></i> Go back to Tote page</p>
1071 |                 <div className="w-full flex items-center justify-between my-1">
1072 |                     <h2 className="text-2xl font-semibold">Order #{order.Number}</h2>
1073 |                     <div className="flex items-center justify-end gap-6">
1074 |                         <div target="_blank" onClick={() => {shell.openExternal( `https://whsrv.hoopswagg.com/hq/orders/view/${order.ID}` )}} className="text-white rounded font-light bg-blue-500 hover:bg-blue-400 py-2 px-3 flex items-center justify-center transition cursor-pointer">View in Dashboard</div>
1075 |                         <Dropdown text={`${selectedPrinter ? selectedPrinter.displayName : "Select Label Printer" }`} textColorClass='text-black' className="mx-2" >
1076 |                             {
1077 |                                 printers.map(printer => (
1078 |                                     <li className="w-full">
1079 |                                         <button className="w-full text-black text-left cursor-pointer hover:bg-gray-200 transition duration-300 pl-4 p-2 text-sm select-none" onClick={() =>  setSelectedPrinter(printer)}>{printer.displayName}</button>
1080 |                                     </li> 
1081 |                                 ))
1082 |                             }
1083 |                         </Dropdown>
1084 |                     </div>
1085 |                 </div>
1086 |             </div>
1087 |             <div className='w-full flex flex-1 gap-4'>
1088 |                 
1089 |                 <div className="flex flex-col w-1/3 gap-4">
1090 | 
1091 |                     {/* Non-Packed Order Items Card */}
1092 |                     <Card className="flex-1">
1093 |                         <div className="w-full flex items-center justify-between border-b border-blue-500 pb-2 h-1/6">
1094 |                             <h4 className="text-lg font-semibold">Order Items</h4>
1095 |                             <h4 className="text-blue-500 text-lg font-semibold">{(orderItemsPackedStatus.filter(item => !item.packed)).length} Items</h4>
1096 |                         </div>
1097 |                         <div className="py-3 flex items-center justify-between border-b border-gray-300 h-1/6">
1098 |                             <p className="text-xs text-gray-500">Product</p>
1099 |                         </div>
1100 |                         <div className="h-2/3 pb-2 overflow-scroll">
1101 |                             {
1102 |                                     orderItemsPackedStatus.map(function(orderItemStatus){
1103 |                                     
1104 |                                     // don't render if item is packed
1105 |                                     if (orderItemStatus.packed) {
1106 |                                         return <></>
1107 |                                     }
1108 | 
1109 |                                     // Get Item
1110 |                                     const itemArray = order.Items.filter(orderItem => orderItem.ID === orderItemStatus.id);
1111 |                                     const item = itemArray[0]
1112 |                                         return (
1113 |                                             <div className="w-full flex items-center justify-between py-2 border-b border-gray-300 gap-2 cursor-pointer hover:bg-gray-200 transition duration-300" onClick={() => {handlePackItem(item.ID)}}>
1114 |                                                 <img src={item.ImageURL ? item.ImageURL : placeholderImage} alt="" className="w-16" />
1115 |                                                 <p className="w-3/4 truncate text-xs px-2 text-blue-500"><strong>{item.RenderID}</strong>: {item.ProductName}</p>
1116 |                                             </div>
1117 |                                         )
1118 | 
1119 |                                 })
1120 |                             }
1121 |                         </div>
1122 |                     </Card>
1123 | 
1124 |                     {/* Packed Order Items Card */}
1125 |                     <Card className="flex-1">
1126 |                         <div className="w-full flex items-center justify-between border-b border-blue-500 pb-2 h-1/6">
1127 |                             <h4 className="text-lg font-semibold">Packed Items</h4>
1128 |                             <h4 className="text-blue-500 text-lg font-semibold">{(orderItemsPackedStatus.filter(item => item.packed)).length} Items</h4>
1129 |                         </div>
1130 |                         <div className="py-3 flex items-center justify-between border-b border-gray-300 h-1/6">
1131 |                             <p className="text-xs text-gray-500">Product</p>
1132 |                         </div>
1133 |                         <div className="pb-2 h-2/3 overflow-scroll">
1134 |                         {
1135 |                                 orderItemsPackedStatus.map(function(orderItemStatus){
1136 |                                     
1137 |                                     // Don't render if the item isn't packed
1138 |                                     if (!orderItemStatus.packed) {
1139 |                                         return <></>
1140 |                                     }
1141 | 
1142 |                                     // Get Item
1143 |                                     const itemArray = order.Items.filter(orderItem => orderItem.ID === orderItemStatus.id);
1144 |                                     const item = itemArray[0]
1145 | 
1146 |                                     return (
1147 |                                         <div className="w-full flex items-center justify-between py-2 border-b border-gray-300 gap-2">
1148 |                                             <img src={item.ImageURL ? item.ImageURL : placeholderImage} alt="" className="w-16" />
1149 |                                             <p className="w-5/8 truncate text-xs px-2 text-blue-500"><strong>{item.RenderID}</strong>: {item.ProductName}</p>
1150 |                                             <button className="w-1/8 text-xs rounded-full bg-blue-200 p-1 px-2 cursor-pointer hover:bg-blue-100 transition" onClick={() => {handleUnpackItem(item.ID)}}>unpack</button>
1151 |                                         </div>
1152 |                                     )
1153 |                                     
1154 | 
1155 |                                 })
1156 |                             }
1157 |                         </div>
1158 |                     </Card>
1159 |                 </div>
1160 | 
1161 |                 <div className="flex-1 flex flex-col w-2/3 gap-4">
1162 |                     <div className="flex-1 flex gap-4">
1163 | 
1164 |                         {/* Ship To Card */}
1165 |                         <Card className="flex-1">
1166 |                             <div className="w-full flex items-center justify-between pb-3">
1167 |                                 <h4 className="text-lg font-semibold">Ship to</h4>
1168 |                                 <Popup modal trigger={<p className='text-blue-500 cursor-pointer text-sm'>Edit</p>} position="center">
1169 |                                 {close => (
1170 |                                     <div className="relative" style={{ maxHeight: "90vh" }}>
1171 |                                         <div className={`absolute left-0 top-0 w-full h-full bg-white flex items-center justify-center ${!shipToFormLoading && "hidden"}`}>
1172 |                                             <img src={loader} alt="" />
1173 |                                         </div>
1174 |                                         <div className="px-8">
1175 |                                             <div className="w-full flex items-center justify-between my-4 border-b border-black py-2">
1176 |                                                 <h3 className="text-2xl">Shipping Information</h3>
1177 |                                                 <button className="close text-3xl" onClick={close}>
1178 |                                                     &times;
1179 |                                                 </button>
1180 |                                             </div>
1181 |                                             <form onSubmit={(event) => handleSaveShipToSubmit(event, close)}>
1182 |                                             <div className={`w-full bg-red-400 text-white rounded p-2 flex items-center px-4 ${!shippingFormError && "hidden"}`}>{shippingFormError}</div>
1183 |                                                 <div className='mt-8 mb-4 w-full flex items-center justify-between gap-6'>
1184 |                                                     <div className="w-full">
1185 |                                                         <label htmlFor="name" className='w-full flex items-center justify-start font-light text-sm mb-2'>Name</label>
1186 |                                                         <input type="text" name='name' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.Name} />
1187 |                                                     </div>
1188 |                                                 </div>
1189 |                                                 <div className='mt-4 mb-4 w-full flex items-center justify-between gap-6'>
1190 |                                                     <div className="w-1/2">
1191 |                                                         <label htmlFor="company" className='w-full flex items-center justify-start font-light text-sm mb-2'>Company</label>
1192 |                                                         <input type="text" name='company' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.Company} />
1193 |                                                     </div>
1194 |                                                     <div className="w-1/2">
1195 |                                                         <label htmlFor="phone" className='w-full flex items-center justify-start font-light text-sm mb-2'>Phone Number</label>
1196 |                                                         <input type="text" name='phone' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.Phone} />
1197 |                                                     </div>
1198 |                                                 </div>
1199 |                                                 <div className='mt-8 mb-4 w-full flex items-center justify-between gap-6'>
1200 |                                                     <div className="w-full">
1201 |                                                         <label htmlFor="street1" className='w-full flex items-center justify-start font-light text-sm mb-2'>Address Line 1</label>
1202 |                                                         <input type="text" name='street1' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.Street1} />
1203 |                                                     </div>
1204 |                                                 </div>
1205 |                                                 <div className='mt-8 mb-4 w-full flex items-center justify-between gap-6'>
1206 |                                                     <div className="w-full">
1207 |                                                         <label htmlFor="street2" className='w-full flex items-center justify-start font-light text-sm mb-2'>Address Line 2</label>
1208 |                                                         <input type="text" name='street2' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.Street2} />
1209 |                                                     </div>
1210 |                                                 </div>
1211 |                                                 <div className='mt-4 mb-4 w-full flex items-center justify-between gap-6'>
1212 |                                                     <div className="w-1/2">
1213 |                                                         <label htmlFor="city" className='w-full flex items-center justify-start font-light text-sm mb-2'>City</label>
1214 |                                                         <input type="text" name='city' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.City} />
1215 |                                                     </div>
1216 |                                                     <div className="w-1/2">
1217 |                                                         <label htmlFor="state" className='w-full flex items-center justify-start font-light text-sm mb-2'>State</label>
1218 |                                                         <input type="text" name='state' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.State} />
1219 |                                                     </div>
1220 |                                                 </div>
1221 |                                                 <div className='mt-4 mb-4 w-full flex items-center justify-between gap-6'>
1222 |                                                     <div className="w-1/2">
1223 |                                                         <label htmlFor="country" className='w-full flex items-center justify-start font-light text-sm mb-2'>Country</label>
1224 |                                                         <input type="text" name='country' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.Country} />
1225 |                                                     </div>
1226 |                                                     <div className="w-1/2">
1227 |                                                         <label htmlFor="zip" className='w-full flex items-center justify-start font-light text-sm mb-2'>Zip Code</label>
1228 |                                                         <input type="text" name='zip' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' defaultValue={order.ShipTo.PostalCode} />
1229 |                                                     </div>
1230 |                                                 </div>
1231 |                                                 <div className="my-4 w-full flex items-center justify-end">
1232 |                                                     <button className="bg-white text-black font-extralight p-2 px-6 rounded hover:bg-gray-200 cursor-pointer transition duration-300 mx-2" onClick={close}>
1233 |                                                         Cancel
1234 |                                                     </button>
1235 |                                                     <input type='submit' className="bg-blue-500 hover:bg-blue-400 rounded text-white p-2 font-extralight transition duration-300 px-10 cursor-pointer" value="Save" />
1236 |                                                 </div>
1237 |                                             </form>
1238 |                                         </div>
1239 |                                     </div>
1240 |                                 )}
1241 |                                 </Popup>
1242 |                             </div>
1243 |                             <p className="font-semibold text-sm">{order.ShipTo.Name}</p>
1244 |                             <p className="text-sm">{order.ShipTo.Street1}</p>
1245 |                             {order.ShipTo.Street2 && (<p className="text-sm">{order.ShipTo.Street2}</p>)}
1246 |                             {order.ShipTo.Street3 && (<p className="text-sm">{order.ShipTo.Street3}</p>)}
1247 |                             <p className="text-sm">{order.ShipTo.City}, {order.ShipTo.State}, {order.ShipTo.PostalCode}</p>
1248 |                         </Card>
1249 | 
1250 |                         {/* Shipping Method Card */}
1251 |                         <Card className="flex-1">
1252 |                             <div className="w-full flex items-center justify-between pb-3">
1253 |                                 <h4 className="text-lg font-semibold">Shipping Method</h4>
1254 |                                 <p className='text-blue-500 cursor-pointer text-sm' onClick={handlePopulateShippingRates}>View Rates</p>
1255 |                                 <Popup modal open={shippingRatesPopupOpen} onClose={() => {setShippingRatesPopupOpen(false)}} position="center">
1256 |                                 {close => (
1257 |                                     <div className="relative p-4 flex flex-col" style={{ maxHeight: "90vh" }}>
1258 |                                             <div className={`absolute left-0 top-0 w-full h-full bg-white flex items-center justify-center ${!shippingRatesPopupLoading && "hidden"}`}>
1259 |                                                 <img src={loader} alt="" />
1260 |                                             </div>
1261 |                                         
1262 |                                             <div className="w-full flex items-center justify-between py-3 border-b border-black">
1263 |                                                 <h3 className="text-2xl font-semibold">Shipping Rates</h3>
1264 |                                                 <button className="close text-3xl" onClick={close}>
1265 |                                                     &times;
1266 |                                                 </button>
1267 |                                             </div>
1268 |                                             <div className={`w-full bg-red-400 text-white rounded p-2 flex items-center px-4 ${!shippingRatesError && "hidden"}`}>{shippingRatesError}</div>
1269 |                                             {shippingRates && (
1270 |                                             <div className="overflow-scroll">
1271 |                                                 {
1272 |                                                     Object.entries(shippingRates).map((rates, key) => {
1273 |                                                         return (
1274 |                                                         <>
1275 |                                                             <div className="w-full py-4 border-b border-gray-300">
1276 |                                                             <h3 className="text-lg font-semibold">{rates[0]}</h3>
1277 |                                                             </div>
1278 |                                                             {
1279 |                                                                 rates[1].map(rate => {
1280 |                                                                     return (
1281 |                                                                     <div onClick={() => handleRateClick({object_id: rate.object_id, carrier: rate.provider, method: rate.servicelevel.token})} className={`w-full py-4 border-b border-gray-300 flex items-center justify-between hover:bg-blue-100 transition duration-300 px-2 ${selectedRate.object_id === rate.object_id ? "bg-blue-100" : "cursor-pointer"}`}>
1282 |                                                                         <div>
1283 |                                                                             <h5 className='text-gray-600'>{rate.servicelevel.name}</h5>
1284 |                                                                         </div>
1285 |                                                                         <p>${rate.amount}</p>
1286 |                                                                     </div>
1287 |                                                                     )
1288 |                                                                 })
1289 |                                                             }
1290 |                                                             
1291 |                                                         </>
1292 |                                                     )
1293 |                                                     })
1294 |                                                 }
1295 |                                             </div>
1296 |                                             )}
1297 |                                             <div className="w-full flex items-center justify-end px-4 my-4 gap-2">
1298 |                                                 <div className="bg-white cursor-pointer text-black font-light px-10 py-3 hover:bg-gray-300 transition duration-300 rounded" onClick={close}>Cancel</div>
1299 |                                                 <div className="bg-blue-500 cursor-pointer text-white font-light px-10 py-3 hover:bg-blue-400 transition duration-300 rounded" onClick={() => handleUpdateCarrierMethodSubmit(close)}>Save</div>
1300 |                                             </div>
1301 |                                         
1302 |                                     </div>
1303 |                                 )}
1304 |                                 </Popup>
1305 |                             </div>
1306 |                             <div className="w-full">
1307 |                                 <p className='my-2'><span className="font-semibold">Carrier Method</span>: {order.CarrierToken.toUpperCase()} / {order.MethodToken}</p>
1308 |                                 <p className='my-2'><span className="font-semibold">Shipping Service</span>: {order.RequestedShippingService}</p>
1309 |                             </div>
1310 |                         </Card>
1311 | 
1312 |                         {/* Internal Notes Card */}
1313 |                         { order.InternalNotes && (
1314 |                             <Card className="flex-1 border-2 border-red-500">
1315 |                                 <h4 className="text-lg font-semibold">Internal Notes</h4>
1316 |                                 <p className="my-2">
1317 |                                     {order.InternalNotes}
1318 |                                 </p>
1319 |                             </Card>
1320 |                         )}
1321 | 
1322 |                         {/* Edit Weight Card */}
1323 |                         <Card className="flex-1">
1324 |                             <div className="w-full flex items-center justify-between pb-3">
1325 |                                 <h4 className="text-lg font-semibold">Weight</h4>
1326 |                                 <Popup modal onOpen={() => {weightInputRef.current.focus()}} trigger={<p className='text-blue-500 cursor-pointer text-sm'>Edit</p>} position="center">
1327 |                                 {close => (
1328 |                                     <div className="relative" style={{ maxHeight: "90vh" }}>
1329 |                                         <div className="px-8">
1330 |                                             <div className="w-full flex items-center justify-between my-4">
1331 |                                                 <h3 className="text-2xl">Edit Weight</h3>
1332 |                                                 <button className="close text-3xl" onClick={close}>
1333 |                                                     &times;
1334 |                                                 </button>
1335 |                                             </div>
1336 |                                             <form onSubmit={(event) => { handleEditWeightSubmit(event, close); }}>
1337 |                                                 <div className="my-4 w-full">
1338 |                                                         <label htmlFor="weight" className='w-full flex items-center justify-start font-light text-sm mb-2'>Weight</label>
1339 |                                                         <input type="number" name='weight' className='p-2 border border-lightgray rounded-lg w-full focus:outline-none' ref={weightInputRef} defaultValue={orderWeight} step="0.01" />
1340 |                                                 </div>
1341 |                                                 <div className="my-4 w-full flex items-center justify-end">
1342 |                                                     <button type='button' className="bg-white text-black font-extralight p-2 px-6 rounded hover:bg-gray-200 cursor-pointer transition duration-300 mx-2" onClick={close}>
1343 |                                                         Cancel
1344 |                                                     </button>
1345 |                                                     <input type='submit' className="bg-blue-500 hover:bg-blue-400 rounded text-white p-2 font-extralight transition duration-300 px-10 cursor-pointer" value="Save" />
1346 |                                                 </div>
1347 |                                             </form>
1348 |                                         </div>
1349 |                                     </div>
1350 |                                 )}
1351 |                                 </Popup>
1352 |                             </div>
1353 |                             <div className="w-full mt-10 text-3xl font-semibold text-blue-500 text-center">{orderWeight}oz</div>
1354 |                         </Card>
1355 |                     </div>
1356 | 
1357 |                     {/* Box Card */}
1358 |                     <Card className="flex-1" ref={boxContainerRef}>
1359 |                         <div className="w-full flex border-b border-blue-500 pb-2">
1360 |                             <h4 className="text-lg font-semibold">Suggested Box</h4>
1361 |                         </div>
1362 |                         <div>
1363 |                             {
1364 |                                 order.Boxes.map(function(box){
1365 | 
1366 |                                     if (orderBoxID) {
1367 | 
1368 |                                         if (box.ID !== parseInt(orderBoxID)) {
1369 |                                             return <></>;
1370 |                                         }
1371 | 
1372 |                                         return (
1373 |                                             <label htmlFor={"box_" + box.ID} className="w-full flex items-center justify-start py-2 border-b border-gray-300 gap-6 cursor-pointer">
1374 |                                                 <input onChange={handleBoxSelect} type="checkbox" name={"box_" + box.ID} id={"box_" + box.ID} value={box.ID} checked={box.ID === parseInt(orderBoxID)} className="w-5 h-5" />
1375 |                                                 <label htmlFor={"box_" + box.ID} className="text-sm tracking-widest cursor-pointer">{box.Name}</label>
1376 |                                             </label>
1377 |                                         )
1378 | 
1379 |                                     }
1380 | 
1381 |                                     if (!box.SuggestedBox) {
1382 |                                         return <></>
1383 |                                     }
1384 | 
1385 |                                     return (
1386 |                                         <label htmlFor={"box_" + box.ID} className="w-full flex items-center justify-start py-2 border-b border-gray-300 gap-6 cursor-pointer">
1387 |                                             <input onChange={handleBoxSelect} type="checkbox" name={"box_" + box.ID} id={"box_" + box.ID} value={box.ID} checked={box.ID === parseInt(orderBoxID)} className="w-5 h-5" />
1388 |                                             <label htmlFor={"box_" + box.ID} className="text-sm tracking-widest cursor-pointer">{box.Name}</label>
1389 |                                         </label>
1390 |                                     )
1391 |                                 })
1392 |                             }
1393 |                             {
1394 |                                 order.Boxes.map(function(box, i){
1395 | 
1396 |                                     if (box.ID === parseInt(orderBoxID)) {
1397 |                                         return <></>
1398 |                                     }
1399 | 
1400 | 
1401 |                                     if (box.SuggestedBox && !orderBoxID) {
1402 |                                         return <></>
1403 |                                     }
1404 | 
1405 |                                     return (
1406 |                                         <label htmlFor={"box_" + box.ID} className="w-full flex items-center justify-start py-2 border-b border-gray-300 gap-6 cursor-pointer">
1407 |                                             <input onChange={handleBoxSelect} type="checkbox" name={"box_" + box.ID} id={"box_" + box.ID} value={box.ID} checked={box.ID === parseInt(orderBoxID)} className="w-5 h-5" />
1408 |                                             <label htmlFor={"box_" + box.ID} className="text-sm tracking-widest cursor-pointer">{box.Name}</label>
1409 |                                         </label>
1410 |                                     )
1411 |                                 })
1412 |                             }
1413 |                         </div>
1414 |                     </Card>
1415 | 
1416 |                     {/* Shipments Card */}
1417 |                     <Card className="flex-1">
1418 |                         <div className="w-full flex items-center justify-between border-b border-blue-500 pb-2">
1419 |                             <h4 className="text-lg font-semibold">Shipments</h4>
1420 |                         </div>
1421 |                         <div className="relative">
1422 |                             <div className={`absolute left-0 top-28 w-full h-full bg-white flex items-center justify-center ${!shipmentsLoading && "hidden"}`}>
1423 |                                 <img src={loader} alt="" />
1424 |                             </div>
1425 |                             <table className={`w-full overflow-scroll ${shipmentsLoading && "hidden"}`}>
1426 |                                 <tr className="border-b border-gray-200">
1427 |                                     <th className="text-gray-500 text-xs py-2 px-1 text-left">Carrier</th>
1428 |                                     <th className="text-gray-500 text-xs py-2 px-1 text-left">Cost</th>
1429 |                                     <th className="text-gray-500 text-xs py-2 px-1 text-left">Tracking Number</th>
1430 |                                     <th className="text-gray-500 text-xs py-2 px-1 text-left">Service</th>
1431 |                                     <th className="text-gray-500 text-xs py-2 px-1 text-center">Status</th>
1432 |                                     <th className="text-gray-500 text-xs py-2 px-1 text-right">Actions</th>
1433 |                                 </tr>
1434 |                                 {
1435 |                                     shipments && shipments.map(shipment => {
1436 |                                         return (
1437 |                                             <tr className="border-b border-gray-200">
1438 |                                                 <td className="py-2 text-left text-sm px-1">{shipment.CarrierCode}</td>
1439 |                                                 <td className="py-2 text-left text-sm px-1">{shipment.ShipmentCost}</td>
1440 |                                                 <td className="py-2 text-left text-sm px-1 text-blue-500">{shipment.TrackingNumber}</td>
1441 |                                                 <td className="py-2 text-left text-sm px-1">{shipment.ServiceCode}</td>
1442 |                                                 <td className="py-1 text-center text-sm"> <div className={`rounded-3xl p-1 text-xs ${shipment.Voided ? "bg-red-200 text-red-600" : "bg-green-200 text-green-600"}`}>{shipment.Voided ? "Voided" : "Shipped"}</div> </td>
1443 |                                                 <td className="text-sm text-right"> 
1444 |                                                     {!shipment.Voided && ( 
1445 |                                                         <Dropdown text="Actions" textColorClass='text-blue-500' className={"justify-end"} >
1446 |                                                                 <li className="w-full">
1447 |                                                                     <button className="w-full text-black text-left cursor-pointer hover:bg-gray-200 transition duration-300 p-1 px-2 text-xs select-none" onClick={() => handleVoidLabel(shipment.ID)}>Void</button>
1448 |                                                                 </li>
1449 |                                                                 <li className="w-full">
1450 |                                                                     <button className="w-full text-black text-left cursor-pointer hover:bg-gray-200 transition duration-300 p-1 px-2 text-xs select-none" onClick={() => handleViewLabelClick(shipment.ID)}>View Label</button>
1451 |                                                                 </li>
1452 |                                                         </Dropdown> 
1453 |                                                     )}
1454 |                                                 </td>
1455 |                                             </tr>
1456 |                                         )
1457 |                                     })
1458 |                                 }
1459 |                             </table>
1460 |                         </div>
1461 |                     </Card>
1462 |                 </div>
1463 |             </div>
1464 | 
1465 |         {/* Complete Order, Print Label, and Report Error Buttons */}
1466 |         <div className="flex w-full items-center justify-end gap-2">
1467 |                 <Popup onClose={() => {setFlaggedError("")}} trigger={<button className="bg-red-500 hover:bg-red-400 transition text-white font-light py-3 px-6 rounded">Flag for Error</button>} modal position="center" >
1468 |                     {close => (
1469 |                         <div className="bg-white rounded-lg p-4" style={{ maxHeight: "90vh" }}>
1470 |                             <h3 className="text-xl font-semibold w-full text-center">Once order is flagged for error, please set it aside</h3>
1471 |                             
1472 |                             <div className='my-4'>
1473 |                                 <label htmlFor="reason" className="text-lg">Reason flagged for error</label>
1474 |                                 <input onInput={(event) => { setFlaggedError(event.target.value) }} type="text" id="reason" className="w-full p-2 border-2 border-gray-300 rounded-lg" />
1475 |                             </div>
1476 |     
1477 |                             
1478 |                             <div className="flex justify-end gap-4">
1479 |                                 <button onClick={close} className="bg-white hover:bg-gray-200 duration-300 transition text-black font-light py-3 px-6 rounded">Cancel</button>
1480 |                                 <button onClick={() => { handleFlagForError(order.ID, flaggedError) }} className={`${ flaggedError ? "bg-red-500 hover:bg-red-400" : "bg-red-400 cursor-not-allowed" } transition text-white font-light py-3 px-6 rounded`} disabled={!flaggedError}>Flag For Error</button>
1481 |                             </div>
1482 |                             
1483 |                         </div>
1484 |                     )}
1485 |                 </Popup>
1486 |                 <button className={`bg-blue-500 px-6 py-3 font-light rounded ${orderWeight > 0 && selectedPrinter.name && !(orderItemsPackedStatus.filter(item => !item.packed)).length ? "cursor-pointer hover:bg-blue-400" : "cursor-not-allowed opacity-70" } text-white transition duration-200`} disabled={`${orderWeight > 0 && selectedPrinter.name && !(orderItemsPackedStatus.filter(item => !item.packed)).length ? "" : true}`} onClick={handlePrintLabel}>Print Label</button>
1487 |                 <button className={`bg-blue-500 px-6 py-3 font-light rounded text-white transition duration-200 ${(orderItemsPackedStatus.filter(item => !item.packed)).length || !shipments || (!shipments.filter(shipment => !shipment.Voided).length) ? "cursor-not-allowed opacity-70" : "cursor-pointer hover:bg-blue-400" }`} disabled={`${(orderItemsPackedStatus.filter(item => !item.packed)).length || !shipments || !shipments.filter(shipment => !shipment.Voided).length ? true : ""}`} onClick={handleCompleteOrder} >Complete Order</button>
1488 |             </div>
1489 |         </div>
1490 |         )
1491 | }
1492 | 
1493 | export default OrderPage


--------------------------------------------------------------------------------