\r\n
\r\n \r\n \r\n {\r\n this.handleSummaryTileClick('1', 1)\r\n }}\r\n />\r\n \r\n \r\n {\r\n this.handleSummaryTileClick('2', 2)\r\n }}\r\n />\r\n \r\n \r\n {\r\n this.handleSummaryTileClick('3', 3)\r\n }}\r\n />\r\n \r\n \r\n {\r\n this.handleSummaryTileClick('4', 4)\r\n }}\r\n />\r\n \r\n \r\n {\r\n this.handleSummaryTileClick('5', 5)\r\n }}\r\n />\r\n \r\n \r\n {\r\n this.handleSummaryTileClick('6', 6)\r\n }}\r\n />\r\n \r\n \r\n {\r\n this.setState({\r\n invoiceList: this.state.items,\r\n currentSummaryTile: 7\r\n })\r\n }}\r\n />\r\n \r\n \r\n {\r\n this.handleSummaryTileClick(\r\n '_TOTALOUTSTANDING',\r\n 8\r\n )\r\n }}\r\n />\r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n isDueDateView = () => {\r\n const { dateView } = this.state\r\n return dateView === 'Due Date'\r\n }\r\n\r\n dateFromLabel = () => {\r\n return this.isDueDateView() ? 'Due Date From' : 'Post Date From'\r\n }\r\n\r\n dateToLabel = () => {\r\n return this.isDueDateView() ? 'Due Date To' : 'Post Date To'\r\n }\r\n\r\n render() {\r\n const { classes } = this.props\r\n const {\r\n clients,\r\n clientId,\r\n fromDate,\r\n toDate,\r\n postDateTo,\r\n paymentStatus,\r\n transactionType,\r\n dateView,\r\n labeledInvoice,\r\n selectedDate,\r\n selectedDateHelperText,\r\n downloadCSVDisabled,\r\n organization,\r\n itemReferenceError,\r\n itemReferenceErrorMessage,\r\n dateFiltering\r\n } = this.state\r\n const backgroundColor =\r\n organization !== null && organization.colorThemeRGB !== null\r\n ? `${organization.colorThemeRGB}`\r\n : '#ffffff'\r\n const textColor =\r\n organization !== null && organization.colorThemeTextRGB !== null\r\n ? `${organization.colorThemeTextRGB}`\r\n : '#000000'\r\n const primarycolor =\r\n organization !== null && organization.colorThemePrimaryRGB !== null\r\n ? `${organization.colorThemePrimaryRGB}`\r\n : '#ffffff'\r\n const secodarycolor =\r\n organization !== null &&\r\n organization.colorThemeSecondaryRGB !== null\r\n ? `${organization.colorThemeSecondaryRGB}`\r\n : '#000000'\r\n const teritorycolor =\r\n organization !== null && organization.colorThemeTertiaryRGB !== null\r\n ? `${organization.colorThemeTertiaryRGB}`\r\n : '#000000'\r\n let contents = this.state.loading ? (\r\n
\r\n ) : (\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Client\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Labeled Invoice #\r\n \r\n \r\n this.handleChangeValue(\r\n e,\r\n 'labeledInvoice'\r\n )\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n Date View\r\n \r\n \r\n this.handleChangeValue(\r\n e,\r\n 'dateView'\r\n )\r\n }\r\n >\r\n \r\n Due Date\r\n \r\n \r\n Post Date\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Date\r\n \r\n \r\n this.handleChangeValue(\r\n e,\r\n 'selectedDate'\r\n )\r\n }\r\n >\r\n {dateFiltering.map(\r\n function (date, i) {\r\n return (\r\n \r\n {\r\n date.label\r\n }\r\n \r\n )\r\n }\r\n )}\r\n \r\n \r\n {selectedDateHelperText}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.dateFromLabel()}\r\n \r\n \r\n \r\n this.handleChangeValue(\r\n e,\r\n 'fromDate'\r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.dateToLabel()}\r\n \r\n \r\n \r\n this.handleChangeValue(\r\n e,\r\n 'toDate'\r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Paid Status\r\n \r\n \r\n this.handleChangeValue(\r\n e,\r\n 'paymentStatus'\r\n )\r\n }\r\n >\r\n \r\n \r\n Paid\r\n \r\n \r\n Unpaid\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Transaction Type\r\n \r\n \r\n this.handleChangeValue(\r\n e,\r\n 'transactionType'\r\n )\r\n }\r\n >\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n this.handleSubmit(true)\r\n }\r\n >\r\n {this.state.searching\r\n ? 'Loading...'\r\n : 'QUICK SEARCH'}\r\n \r\n \r\n \r\n <>\r\n \r\n \r\n {this.state.error && (\r\n \r\n {\r\n this.setState({\r\n error: false\r\n })\r\n }}\r\n severity=\"error\"\r\n >\r\n {' '}\r\n Sorry, there was an\r\n error while retrieving\r\n items.\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.renderSummary()}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n {this.renderAccountingTable(\r\n this.state.invoiceList,\r\n this.state.page,\r\n this.state.rowsPerPage,\r\n this.handleChangePage,\r\n this.handleChangeRowsPerPage\r\n )}\r\n
\r\n
\r\n )\r\n\r\n return
{contents}
\r\n }\r\n\r\n async populateClientsData() {\r\n const token = await authService.getAccessToken()\r\n const { key } = this.state\r\n const headers = {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n }\r\n\r\n const response = await fetch(\r\n 'api/clients/getclientslist?module=accounting',\r\n headers\r\n )\r\n\r\n if (response.ok) {\r\n const data = await response.json()\r\n this.setState({ clients: data }, () => {\r\n const { clients } = this.state\r\n const cachedClientId = localStorage.getItem(key + '.clientId')\r\n if (cachedClientId) {\r\n // see if cached client id is in clients array\r\n const client = clients.find(\r\n client => client.id === cachedClientId\r\n )\r\n if (client) {\r\n this.setState({ clientId: cachedClientId }, () => {\r\n this.runClientDependentFunctions()\r\n })\r\n } else {\r\n // set client id to first client in clients array\r\n this.setState({ clientId: clients[0].id }, () => {\r\n localStorage.setItem(\r\n key + '.clientId',\r\n clients[0].id\r\n )\r\n this.runClientDependentFunctions()\r\n })\r\n }\r\n } else {\r\n // set client id to first client in clients array\r\n this.setState({ clientId: clients[0].id }, () => {\r\n localStorage.setItem(key + '.clientId', clients[0].id)\r\n this.runClientDependentFunctions()\r\n })\r\n }\r\n })\r\n } else {\r\n this.setState({ loading: false, error: true })\r\n }\r\n }\r\n\r\n async populateConfig() {\r\n const response = await fetch('api' + ApplicationPaths.AppInfo)\r\n const data = await response.json()\r\n this.setState({\r\n organization: data,\r\n dateFiltering: data.dateFilterTypeArray\r\n })\r\n }\r\n\r\n getQueryString = (initialLoad = false) => {\r\n const {\r\n clientId,\r\n paymentStatus,\r\n transactionType,\r\n fromDate,\r\n toDate,\r\n labeledInvoice,\r\n selectedDate\r\n } = this.state\r\n\r\n const queryString = require('query-string')\r\n\r\n var qs = {}\r\n\r\n qs['TransactionType'] = transactionType\r\n qs['PaymentStatus'] = paymentStatus\r\n\r\n if (labeledInvoice.length > 0) {\r\n qs['AH_DescSearch'] = labeledInvoice\r\n }\r\n\r\n if (fromDate && selectedDate !== 10){\r\n const dateFromKey = this.isDueDateView()\r\n ? 'DueFromDate'\r\n : 'PostFromDate'\r\n qs[dateFromKey] = fromDate.toISOString(false)\r\n }\r\n\r\n if (toDate && selectedDate !== 10){\r\n const dateToKey = this.isDueDateView() ? 'DueToDate' : 'PostToDate'\r\n qs[dateToKey] = toDate.toISOString(false)\r\n }\r\n\r\n if (clientId !== null) {\r\n qs['ClientId'] = clientId\r\n }\r\n\r\n if (initialLoad) {\r\n qs['InitialLoad'] = true\r\n }\r\n\r\n qs['SelectedDate'] = selectedDate\r\n\r\n return queryString.stringify(qs)\r\n }\r\n\r\n async populateTableData(initialLoad = false) {\r\n // set summary tiles back to default\r\n this.setState({ currentSummaryTile: 1 })\r\n\r\n const { clientId, orderClients } = this.state\r\n const orderClient = orderClients?.find(c => c.id === clientId)\r\n\r\n this.setState({ showOrders: orderClient ? true : false })\r\n this.setState({ searching: true })\r\n\r\n const token = await authService.getAccessToken()\r\n\r\n if (clientId !== null) {\r\n this.setState({ error: false })\r\n\r\n const headers = {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n }\r\n\r\n const response = await fetch(\r\n `api/Accounting/GetInvoices?` +\r\n this.getQueryString(initialLoad),\r\n headers\r\n )\r\n\r\n if (response.ok) {\r\n const data = await response.json()\r\n this.setState({\r\n items: data.invoices,\r\n invoiceList: data.invoices,\r\n loading: false,\r\n resultsBox1Value: data.resultsBox1Value,\r\n resultsBox1Title: data.resultsBox1Title,\r\n resultsBox2Value: data.resultsBox2Value,\r\n resultsBox2Title: data.resultsBox2Title,\r\n resultsBox3Value: data.resultsBox3Value,\r\n resultsBox3Title: data.resultsBox3Title,\r\n resultsBox4Value: data.resultsBox4Value,\r\n resultsBox4Title: data.resultsBox4Title,\r\n resultsBox5Value: data.resultsBox5Value,\r\n resultsBox5Title: data.resultsBox5Title,\r\n resultsBox6Value: data.resultsBox6Value,\r\n resultsBox6Title: data.resultsBox6Title,\r\n resultsBox7Value: data.resultsBox7Value,\r\n resultsBox7Title: data.resultsBox7Title,\r\n resultsBox8Value: data.resultsBox8Value,\r\n resultsBox8Title: data.resultsBox8Title\r\n })\r\n } else {\r\n this.setState({ loading: false, error: true })\r\n }\r\n } else {\r\n this.setState({ loading: false })\r\n }\r\n\r\n this.setState({ searching: false })\r\n }\r\n}\r\nexport default withStyles(styles)(AccountingTable)\r\n","import React, { useState, useEffect } from 'react'\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport AccountingTable from './AccountingTable'\r\nimport { canSeeAccounting } from '../utils/permissions'\r\nimport { LinearProgress } from '@material-ui/core'\r\nimport UnauthorizedMessage from './shared/UnauthorizedMessage'\r\n\r\nexport default function Accounting() {\r\n const [loading, setIsLoading] = useState(true)\r\n const [loadingShow, setLoadingShow] = useState(true)\r\n const [show, setShow] = useState(false)\r\n\r\n useEffect(() => {\r\n getAppInfo()\r\n }, [])\r\n\r\n const getAppInfo = async () => {\r\n const token = await authService.getAccessToken()\r\n\r\n const response = await fetch('api/app/info', {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n })\r\n\r\n setIsLoading(false)\r\n\r\n if (response.ok) {\r\n setLoadingShow(true)\r\n const data = await response.json()\r\n setShow(await canSeeAccounting(data))\r\n setLoadingShow(false)\r\n }\r\n }\r\n\r\n return (\r\n
\r\n {loading || loadingShow ? (\r\n
\r\n ) : show ? (\r\n
\r\n ) : (\r\n UnauthorizedMessage({ moduleName: 'Accounting' })\r\n )}\r\n
\r\n )\r\n}\r\n","import React, { useState, useEffect } from 'react'\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport ShipmentsTable from './ShipmentsTable'\r\nimport { canSeeBooking } from '../utils/permissions'\r\nimport { LinearProgress } from '@material-ui/core'\r\nimport UnauthorizedMessage from './shared/UnauthorizedMessage'\r\n\r\nexport default function Booking() {\r\n const [loading, setIsLoading] = useState(true)\r\n const [show, setShow] = useState(false)\r\n\r\n useEffect(() => {\r\n getAppInfo()\r\n }, [])\r\n\r\n const getAppInfo = async () => {\r\n const token = await authService.getAccessToken()\r\n\r\n const response = await fetch('api/app/info', {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n })\r\n\r\n setIsLoading(false)\r\n\r\n if (response.ok) {\r\n const data = await response.json()\r\n setShow(await canSeeBooking(data))\r\n }\r\n }\r\n\r\n return (\r\n
\r\n {loading ? (\r\n \r\n ) : show ? (\r\n \r\n ) : (\r\n UnauthorizedMessage({ moduleName: 'Bookings' })\r\n )}\r\n
\r\n )\r\n}\r\n","import React, { useEffect, useState } from 'react'\r\nimport { Grid } from '@material-ui/core'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport CardTitle from './CardTitle'\r\nimport { Tooltip, Typography } from '@material-ui/core'\r\nimport { useTheme } from '@material-ui/core/styles'\r\nimport MoreHorizIcon from '@material-ui/icons/MoreHoriz'\r\n\r\nconst classes = makeStyles(theme => ({}))\r\n\r\nexport default function ShipmentInfoCard({\r\n item,\r\n itemextra,\r\n showFirstRow,\r\n etd,\r\n eta,\r\n atd,\r\n ata,\r\n shipper,\r\n consignee,\r\n origin,\r\n destination,\r\n requestedDelivery = null,\r\n requiredPickup = null,\r\n showRequestedDelivery = false,\r\n showRequiredPickup = false,\r\n showRequiredETD = false,\r\n showRequiredETA = false,\r\n cargoReadyDate = null,\r\n transactiontype\r\n}) {\r\n const theme = useTheme()\r\n\r\n useEffect(() => {}, [])\r\n\r\n return (\r\n
\r\n
\r\n {transactiontype} Info\r\n
\r\n
\r\n \r\n {showFirstRow && (\r\n \r\n \r\n \r\n {transactiontype} #\r\n \r\n \r\n {(item !== null && item.shipmentNumber) ||\r\n '-'}\r\n
\r\n \r\n \r\n \r\n Inco Term\r\n \r\n \r\n {(itemextra !== null &&\r\n itemextra.shipmentIncoTerm) ||\r\n '-'}\r\n
\r\n \r\n \r\n \r\n Service Level\r\n \r\n \r\n {(itemextra !== null &&\r\n item.serviceLevel) ||\r\n '-'}\r\n
\r\n \r\n \r\n \r\n Transport Mode\r\n \r\n \r\n {(item !== null && item.transportMode) ||\r\n '-'}\r\n
\r\n \r\n \r\n \r\n Masterbill #\r\n \r\n \r\n {(itemextra !== null &&\r\n itemextra.masterBillNumber) ||\r\n '-'}\r\n
\r\n \r\n \r\n \r\n Housebill #\r\n \r\n \r\n {(item !== null && item.houseBillNumber) ||\r\n '-'}\r\n
\r\n \r\n \r\n \r\n Packing Mode\r\n \r\n \r\n {(itemextra !== null && item.packingMode) ||\r\n '-'}\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n Consignee\r\n \r\n \r\n {(item !== null && consignee) ||\r\n '-'}\r\n
\r\n \r\n
\r\n
\r\n Shipper\r\n \r\n \r\n {(item !== null && shipper) || '-'}\r\n
\r\n \r\n
\r\n
\r\n ETD\r\n \r\n \r\n {(item !== null && etd) || '-'}\r\n
\r\n \r\n
\r\n
\r\n ATD\r\n \r\n \r\n {(item !== null && atd) || '-'}\r\n
\r\n \r\n
\r\n
\r\n ETA\r\n \r\n \r\n {(item !== null && eta) || '-'}\r\n
\r\n \r\n
\r\n
\r\n
\r\n ATA\r\n \r\n \r\n {(item !== null && ata) || '-'}\r\n
\r\n \r\n
\r\n
\r\n Origin\r\n \r\n \r\n {(item !== null && origin) || '-'}\r\n
\r\n \r\n
\r\n Destination\r\n \r\n \r\n {(item !== null && destination) || '-'}\r\n
\r\n \r\n {showRequiredPickup && (\r\n
\r\n \r\n
\r\n Required Pickup\r\n \r\n \r\n {(item !== null &&\r\n requiredPickup\r\n ? requiredPickup\r\n : null) || '-'}\r\n
\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n {showRequiredETA && (\r\n
\r\n \r\n
\r\n
\r\n Required ETA\r\n \r\n \r\n {(item !== null && eta\r\n ? eta\r\n : null) || '-'}\r\n
\r\n \r\n
\r\n )}\r\n {cargoReadyDate && (\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n Cargo Ready Date\r\n \r\n \r\n {cargoReadyDate || '-'}\r\n
\r\n \r\n {showRequiredETD && (\r\n
\r\n \r\n
\r\n Required ETD\r\n \r\n \r\n {(item !== null && etd\r\n ? etd\r\n : null) || '-'}\r\n
\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n {showRequestedDelivery && (\r\n
\r\n \r\n
\r\n
\r\n Required Delivery\r\n \r\n \r\n {(item !== null &&\r\n requestedDelivery\r\n ? requestedDelivery\r\n : null) || '-'}\r\n
\r\n \r\n
\r\n )}\r\n
\r\n )\r\n}\r\n","import * as React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {\r\n Dialog,\r\n DialogTitle,\r\n DialogContent,\r\n DialogActions,\r\n DialogContentText,\r\n Button,\r\n Divider\r\n} from '@material-ui/core'\r\n\r\nexport default class DialogOk extends React.Component {\r\n render() {\r\n if (!this.props.show) {\r\n return null\r\n }\r\n return (\r\n
\r\n \r\n {' '}\r\n {this.props.title}\r\n \r\n {this.props.children}\r\n \r\n this.props.callback()}\r\n >\r\n Ok\r\n \r\n \r\n \r\n )\r\n }\r\n}\r\nDialogOk.propTypes = {\r\n callback: PropTypes.func.isRequired,\r\n show: PropTypes.bool.isRequired,\r\n title: PropTypes.string.isRequired\r\n}\r\n","import React, { useEffect, useState } from 'react'\r\nimport { Button, Grid, TextField, FormControl } from '@material-ui/core'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport { Tooltip, Typography } from '@material-ui/core'\r\nimport { useTheme } from '@material-ui/core/styles'\r\nimport { NavLink } from 'react-router-dom'\r\nimport MoreHorizIcon from '@material-ui/icons/MoreHoriz'\r\nimport { retrievePageFields } from '../shared/Views'\r\nimport { updateShipment } from '../../api/api'\r\nimport { IconButton } from '@material-ui/core'\r\nimport SaveIcon from '@material-ui/icons/Save'\r\nimport { LinearProgress } from '@material-ui/core'\r\nimport CancelIcon from '@material-ui/icons/Cancel'\r\nimport DialogOk from '../shared/DialogOk'\r\n\r\nconst classes = makeStyles(theme => ({}))\r\n\r\nexport default function ShipmentDetailCard({\r\n item,\r\n itemextra,\r\n shippersRefLabel,\r\n shippersRef,\r\n ownerRef,\r\n orderRef,\r\n quantity,\r\n volumeLabel,\r\n volume,\r\n weight,\r\n organization,\r\n clientId,\r\n showOrders,\r\n showShippersRef = true,\r\n showOwnersRef = true,\r\n transactiontype\r\n}) {\r\n const [pageFields, setPageFields] = useState(null)\r\n const [hasChanges, setHasChanges] = useState(false)\r\n const [updatedShipment, setUpdatedShipment] = useState({\r\n ownersReference: ownerRef,\r\n shipmentNumber: null,\r\n customsNumber: item.shipmentNumber\r\n })\r\n const [updateAlert, setUpdateAlert] = useState({\r\n open: false,\r\n message: '',\r\n severity: 'success'\r\n })\r\n const [updatingShipment, setUpdatingShipment] = useState(false)\r\n const [originalOwnerRef, setOriginalOwnerRef] = useState(ownerRef)\r\n\r\n useEffect(() => {\r\n retrievePageFields('shipmentdetail', clientId).then(response => {\r\n setPageFields(response)\r\n })\r\n }, [])\r\n\r\n const theme = useTheme()\r\n\r\n const renderNavLinkOrderRef = (clientId, shipmentData) => {\r\n var orderRefs = shipmentData.orderReferenceNumber\r\n if (orderRefs) {\r\n return (\r\n <>\r\n {orderRefs.split(',').map((refnum, index) => {\r\n if (shipmentData.orders) {\r\n var order = shipmentData.orders.find(\r\n order => order.orderNumber === refnum.trim()\r\n )\r\n if (order) {\r\n return showOrders ? (\r\n \r\n {refnum}\r\n \r\n ) : (\r\n {refnum}\r\n )\r\n } else {\r\n return {refnum}\r\n }\r\n } else {\r\n return {refnum}\r\n }\r\n })}\r\n \r\n )\r\n } else {\r\n return <>-\r\n }\r\n }\r\n\r\n const handleUpdateShipmentSuccess = () => {\r\n setUpdateAlert({\r\n open: true,\r\n message: 'Shipment updated successfully',\r\n severity: 'success'\r\n })\r\n setHasChanges(false)\r\n setUpdatingShipment(false)\r\n }\r\n\r\n const handleUpdateShipmentError = (error) => {\r\n setUpdateAlert({\r\n open: true,\r\n message: error,\r\n severity: 'error'\r\n })\r\n setUpdatingShipment(false)\r\n }\r\n\r\n const editField = field => {\r\n if (pageFields) {\r\n const requiredField = pageFields.find(\r\n pageField => pageField.field === field\r\n )\r\n if (requiredField) {\r\n return requiredField.editable\r\n }\r\n }\r\n return false\r\n }\r\n\r\n const handleChange = e => {\r\n setUpdatedShipment({\r\n ...updatedShipment,\r\n ownersReference: e.target.value\r\n })\r\n if (e.target.value !== originalOwnerRef) {\r\n setHasChanges(true)\r\n } else {\r\n setHasChanges(false)\r\n }\r\n }\r\n\r\n const renderOwnersRef = () => {\r\n\r\n // check if field exists in pageFields\r\n if (editField('details.ownerref')) {\r\n return (\r\n {\r\n handleChange(e)\r\n }}\r\n />\r\n )\r\n } else {\r\n return (\r\n \r\n {(item !== null && ownerRef) || '-'}\r\n
\r\n )\r\n } \r\n }\r\n\r\n const handleShipmentSave = () => {\r\n setUpdatingShipment(true)\r\n updateShipment(updatedShipment, handleUpdateShipmentSuccess, handleUpdateShipmentError)\r\n }\r\n \r\n const handleCancel = () => {\r\n setUpdatedShipment({\r\n ownersReference: originalOwnerRef,\r\n shipmentNumber: null,\r\n customsNumber: item.shipmentNumber\r\n })\r\n setHasChanges(false)\r\n }\r\n\r\n const renderToolTipOrderRef = orderRef => {\r\n var orderRefs = ''\r\n var array = []\r\n if (item !== null && orderRef != null) {\r\n array = orderRef.split(',')\r\n if (array.length <= 2) {\r\n orderRefs = array.join()\r\n } else {\r\n orderRefs = array[0]\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n {orderRefs}\r\n {array.length > 2 ? (\r\n \r\n {array.join()}
\r\n \r\n }\r\n placement=\"right\"\r\n >\r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n {transactiontype} Details\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n Weight\r\n \r\n \r\n {' '}\r\n {(item !== null && weight) || '-'}\r\n
\r\n \r\n
\r\n {volumeLabel}\r\n \r\n \r\n {' '}\r\n {(item !== null && volume) || '-'}\r\n
\r\n \r\n
\r\n Quantity\r\n \r\n \r\n {' '}\r\n {(itemextra !== null &&\r\n itemextra.quantity) ||\r\n '-'}\r\n
\r\n \r\n
\r\n {shippersRefLabel}\r\n \r\n \r\n {' '}\r\n {(item !== null && shippersRef) || '-'}\r\n
\r\n \r\n
\r\n Linked Order #\r\n \r\n \r\n {renderNavLinkOrderRef(clientId, item)}\r\n
\r\n \r\n \r\n Owner's Ref #\r\n \r\n {renderOwnersRef()}\r\n
\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n
\r\n Order's Ref#\r\n \r\n \r\n {' '}\r\n {orderRef\r\n ? renderToolTipOrderRef(orderRef)\r\n : '-'}\r\n
\r\n \r\n
\r\n {' '}\r\n Description{' '}\r\n \r\n \r\n {' '}\r\n {(item !== null && item.goodsDescription) ||\r\n '-'}\r\n
\r\n \r\n {\r\n setCurrentContainer(i)\r\n handleContainerDialogState()\r\n }}\r\n >\r\n {' '}\r\n {i[arrayKey.key] || '-'}\r\n \r\n\r\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n return (\r\n \r\n {containersList ? (\r\n renderTable(\r\n containersList,\r\n isReview\r\n ? containersReview\r\n : getContainers(\r\n organization.shipmentServiceSelected == 'NORMANHK'\r\n ),\r\n 'container',\r\n classes,\r\n renderContainerLink,\r\n {\r\n maxHeight: '200px'\r\n }\r\n )\r\n ) : (\r\n \r\n No records found.\r\n \r\n )}\r\n \r\n )\r\n}\r\n","import React from 'react'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport { renderTable } from '../shared/TableHelper'\r\nimport CardTitle from '../shared/CardTitle'\r\nimport Alert from '@material-ui/lab/Alert'\r\nimport Button from '@material-ui/core/Button'\r\nimport Dialog from '@material-ui/core/Dialog'\r\nimport DialogActions from '@material-ui/core/DialogActions'\r\nimport DialogContent from '@material-ui/core/DialogContent'\r\nimport DialogContentText from '@material-ui/core/DialogContentText'\r\nimport DialogTitle from '@material-ui/core/DialogTitle'\r\n\r\nconst classes = makeStyles(theme => ({}))\r\n\r\nconst containers = [\r\n { key: 'referenceNumber', label: 'Reference #' },\r\n { key: 'containerNumber', label: 'Container #' },\r\n { key: 'productCode', label: 'Product Code', link: true },\r\n { key: 'quantity', label: 'Pce Count' },\r\n { key: 'quantityUOM', label: 'Pce Count UOM' },\r\n { key: 'weight', label: 'Weight' },\r\n { key: 'weightUOM', label: 'Weight UOM' },\r\n { key: 'volume', label: 'Volume' },\r\n { key: 'volumeUOM', label: 'Volume UOM' },\r\n { key: 'dimensionLength', label: 'Length' },\r\n { key: 'dimensionWidth', label: 'Width' },\r\n { key: 'dimensionHeight', label: 'Height' },\r\n { key: 'dimensionUOM', label: 'Length UOM' },\r\n { key: 'commodityCode', label: 'Commodity' },\r\n { key: 'goodsDescription', label: 'Goods Description' }\r\n]\r\n\r\nconst normanHKContainers = [\r\n { key: 'weight', label: 'Weight' },\r\n { key: 'weightUOM', label: 'Weight UOM' },\r\n { key: 'quantity', label: 'Pce Count' },\r\n { key: 'quantityUOM', label: 'Pce Count UOM' },\r\n { key: 'commodityCode', label: 'Description' }\r\n]\r\n\r\nfunction getContainers(isNormanHK) {\r\n if (isNormanHK) {\r\n return normanHKContainers\r\n } else {\r\n return containers\r\n }\r\n}\r\n\r\nexport default function ShipmentPacklinesTable({ item, organization }) {\r\n const [productDialogOpen, setProductDialogOpen] = React.useState(false)\r\n\r\n const handleClose = () => {\r\n setProductDialogOpen(false)\r\n }\r\n\r\n const handleProductDialogClickOpen = () => {\r\n setProductDialogOpen(true)\r\n }\r\n\r\n const renderAllProductsDialog = productCodesArray => {\r\n return (\r\n <>\r\n {\r\n handleProductDialogClickOpen()\r\n }}\r\n >\r\n View Multiple Products\r\n \r\n \r\n \r\n {'Pack Line Products'}\r\n \r\n \r\n \r\n {productCodesArray.map((i, index) => {\r\n return {i}
\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n\r\n const renderSpecialColumns = (i, index, arrayKey) => {\r\n if (arrayKey.key === 'productCode') {\r\n var orderRef = i[arrayKey.key]\r\n var array = []\r\n if (orderRef != null) {\r\n array = orderRef.split(',')\r\n }\r\n\r\n return array.length > 1\r\n ? renderAllProductsDialog(array)\r\n : i[arrayKey.key]\r\n }\r\n }\r\n\r\n return (\r\n \r\n {item !== null &&\r\n item !== undefined &&\r\n item.packLines !== null &&\r\n item.packLines !== undefined ? (\r\n renderTable(\r\n item.packLines,\r\n getContainers(\r\n organization?.shipmentServiceSelected == 'NORMANHK'\r\n ),\r\n 'container',\r\n classes,\r\n renderSpecialColumns,\r\n {\r\n maxHeight: '200px'\r\n }\r\n )\r\n ) : (\r\n \r\n No records found.\r\n \r\n )}\r\n \r\n )\r\n}\r\n","import React, { useEffect } from 'react'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport Button from '@material-ui/core/Button'\r\nimport Dialog from '@material-ui/core/Dialog'\r\nimport DialogActions from '@material-ui/core/DialogActions'\r\nimport DialogContent from '@material-ui/core/DialogContent'\r\nimport DialogTitle from '@material-ui/core/DialogTitle'\r\nimport InputLabel from '@material-ui/core/InputLabel'\r\nimport Input from '@material-ui/core/Input'\r\nimport FormControl from '@material-ui/core/FormControl'\r\nimport Select from '@material-ui/core/Select'\r\nimport IconButton from '@material-ui/core/IconButton'\r\nimport AddCircleIcon from '@material-ui/icons/AddCircle'\r\nimport authService from '../api-authorization/AuthorizeService'\r\nimport { LinearProgress, MenuItem } from '@material-ui/core'\r\nimport Alert from '@material-ui/lab/Alert'\r\nimport CloseIcon from '@material-ui/icons/Close'\r\nimport { downloadDocumentPDFForShipment } from '../../api/api'\r\nimport GetAppIcon from '@material-ui/icons/GetApp'\r\nimport { clientUserHasPermission } from '../../utils/permissions'\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap'\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n minWidth: 120\r\n },\r\n docTypeSelect: {}\r\n}))\r\n\r\nexport default function DocumentUploadSelectDialog(props) {\r\n const classes = useStyles()\r\n const [open, setOpen] = React.useState(false)\r\n const [doctype, setDocType] = React.useState('')\r\n const [isLoading, setIsLoading] = React.useState(false)\r\n const [isSuccess, setIsSuccess] = React.useState(false)\r\n const [isError, setIsError] = React.useState(false)\r\n const [errorMessage, setErrorMessage] = React.useState('')\r\n const [selectedFile, setSelectedFile] = React.useState(null)\r\n const [isSelected, setIsSelected] = React.useState(false)\r\n const [docTypes, setDocTypes] = React.useState(null)\r\n const [isAdmin, setIsAdmin] = React.useState(false)\r\n const [canUpload, setCanUpload] = React.useState(false)\r\n\r\n useEffect(() => {\r\n const getIsAdmin = async () => {\r\n const admin = await authService.isAdmin()\r\n const superAdmin = await authService.isSuperAdmin()\r\n setIsAdmin(admin || superAdmin)\r\n }\r\n getIsAdmin()\r\n }, [])\r\n\r\n useEffect(() => {\r\n const getUploadPermission = async () => {\r\n const canUpload = await clientUserHasPermission(\r\n props.clientId,\r\n 'uploaddocuments'\r\n )\r\n setCanUpload(canUpload)\r\n }\r\n getUploadPermission()\r\n }, [])\r\n\r\n const transactionNumber =\r\n props.transactiontype === 'shipment' ||\r\n props.transactiontype === 'booking' ||\r\n props.transactiontype === 'customs'\r\n ? props.transactionnumber\r\n : atob(\r\n props.transactionnumber.substring(\r\n 0,\r\n props.transactionnumber.indexOf('~')\r\n )\r\n ) +\r\n '/' +\r\n props.transactionnumber.substring(\r\n props.transactionnumber.indexOf('~') + 1,\r\n props.transactionnumber.length\r\n )\r\n\r\n const getTransactionNumber = () => {\r\n if (props.transactiontype === 'order') {\r\n return (\r\n atob(\r\n props.transactionnumber.substring(\r\n 0,\r\n props.transactionnumber.indexOf('~')\r\n )\r\n ) +\r\n '~' +\r\n props.transactionnumber.substring(\r\n props.transactionnumber.indexOf('~') + 1,\r\n props.transactionnumber.length\r\n ) +\r\n '~' +\r\n props.buyercode\r\n )\r\n } else {\r\n return props.transactionnumber\r\n }\r\n }\r\n\r\n const fetchDocTypes = React.useCallback(async () => {\r\n const token = await authService.getAccessToken()\r\n const response = await fetch(\r\n 'api/DataManagement/GetCargowiseDocTypes?clientId=' +\r\n props.clientId,\r\n {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n }\r\n )\r\n if (response.ok) {\r\n const data = await response.json()\r\n setDocTypes(data)\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n fetchDocTypes()\r\n }, [fetchDocTypes])\r\n\r\n const getTransactionTypeByName = name => {\r\n switch (name) {\r\n case 'shipment':\r\n return 1\r\n case 'booking':\r\n return 2\r\n case 'customs':\r\n return 0\r\n case 'order':\r\n return 3\r\n }\r\n }\r\n\r\n const downloadAllDocuments = () => {\r\n var docData = {\r\n TransactionNumber: getTransactionNumber(),\r\n TransactionType: getTransactionTypeByName(props.transactiontype),\r\n DownloadAll: true,\r\n ClientId: props.clientId\r\n }\r\n downloadDocumentPDFForShipment(\r\n docData,\r\n (blob, headers) => {\r\n var sanitize = require('sanitize-filename')\r\n const filename = sanitize(\r\n headers\r\n .get('Content-Disposition')\r\n .split('filename=')[1]\r\n .split(';')[0]\r\n )\r\n\r\n const url = window.URL.createObjectURL(new Blob([blob]))\r\n const link = document.createElement('a')\r\n link.href = url\r\n link.setAttribute('download', filename)\r\n document.body.appendChild(link)\r\n link.click()\r\n link.parentNode.removeChild(link)\r\n },\r\n () => {}\r\n )\r\n }\r\n\r\n const handleChange = event => {\r\n setDocType(event.target.value || '')\r\n }\r\n\r\n const handleClickOpen = () => {\r\n setOpen(true)\r\n }\r\n\r\n const handleClose = () => {\r\n setIsSelected(false)\r\n setSelectedFile(null)\r\n setDocType('')\r\n setOpen(false)\r\n }\r\n\r\n const handleSuccess = () => {\r\n setIsSuccess(true)\r\n // reload page\r\n setInterval(function () {\r\n setIsSuccess(false)\r\n setOpen(false)\r\n }, 4000)\r\n window.location.reload()\r\n }\r\n\r\n const handleError = errorMessage => {\r\n setErrorMessage(errorMessage)\r\n setIsError(true)\r\n }\r\n\r\n const changeHandler = event => {\r\n const selectedFile = event.target.files[0]\r\n const fileSizeLimit = props.organization.cargowiseEDocSizeLimit\r\n if (selectedFile.size / (1024 * 1024) <= fileSizeLimit) {\r\n setIsSelected(true)\r\n setSelectedFile(selectedFile)\r\n setIsError(false)\r\n } else {\r\n setIsSelected(false)\r\n setIsError(true)\r\n setErrorMessage(\r\n `File size is too large. Please select a file smaller than ${fileSizeLimit} MB.`\r\n )\r\n setSelectedFile(null)\r\n event.target.value = ''\r\n }\r\n }\r\n\r\n const handleSubmission = async () => {\r\n if (selectedFile === null) {\r\n setIsError(true)\r\n setErrorMessage('No file selected!')\r\n } else if (doctype === '') {\r\n setIsError(true)\r\n setErrorMessage('No document type selected!')\r\n } else {\r\n setIsError(false)\r\n setIsSuccess(false)\r\n setErrorMessage('')\r\n setIsLoading(true)\r\n\r\n const formData = new FormData()\r\n formData.append('File', selectedFile)\r\n\r\n const token = await authService.getAccessToken()\r\n const header = {\r\n Authorization: `Bearer ${token}`,\r\n Accept: 'application/json, text/plain, */*'\r\n }\r\n\r\n fetch(\r\n 'api/DataManagement/UploadCargowiseDocument?' +\r\n 'doctype=' +\r\n doctype +\r\n '&filename=' +\r\n btoa(encodeURIComponent(selectedFile.name)).replace(\r\n '/',\r\n '_'\r\n ) +\r\n '&transactiontype=' +\r\n props.transactiontype +\r\n '&transactionnumber=' +\r\n props.transactionnumber +\r\n '&buyercode=' +\r\n props.buyercode +\r\n '&clientId=' +\r\n props.clientId +\r\n '&transportmode=' +\r\n props.transportmode,\r\n {\r\n headers: header,\r\n method: 'POST',\r\n body: formData\r\n }\r\n )\r\n .then(response => {\r\n if (response.ok) {\r\n setIsLoading(false)\r\n handleSuccess()\r\n } else {\r\n if (response.status === 401) {\r\n setIsLoading(false)\r\n handleError('Not authorized to upload documents.')\r\n } else {\r\n setIsLoading(false)\r\n handleError('Document upload failed, please retry.')\r\n }\r\n }\r\n })\r\n .catch(error => {\r\n setIsLoading(false)\r\n console.log(error)\r\n handleError('Document upload failed, please retry.')\r\n })\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n {canUpload || isAdmin ? (\r\n \r\n \r\n Add\r\n \r\n ) : null}\r\n \r\n \r\n Download All\r\n \r\n \r\n \r\n )\r\n}\r\n","import DateFnsUtils from '@date-io/moment'\r\n\r\nexport const dateUTCToLocalString = (date) => {\r\n const dateFns = new DateFnsUtils()\r\n if (!date) return '-'\r\n return dateFns.moment.utc(date).local().format('YYYY-MM-DD HH:mm:ss')\r\n}\r\n","import React from 'react'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport List from '@material-ui/core/List'\r\nimport ListItem from '@material-ui/core/ListItem'\r\nimport Divider from '@material-ui/core/Divider'\r\nimport ListItemText from '@material-ui/core/ListItemText'\r\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar'\r\nimport Avatar from '@material-ui/core/Avatar'\r\nimport Typography from '@material-ui/core/Typography'\r\nimport Alert from '@material-ui/lab/Alert'\r\nimport CardTitle from '../shared/CardTitle'\r\nimport { dateUTCToLocalString } from '../../utils/dates'\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap'\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n minWidth: 120\r\n },\r\n docTypeSelect: {},\r\n root: {\r\n width: '100%',\r\n backgroundColor: theme.palette.background.paper\r\n },\r\n inline: {\r\n display: 'inline'\r\n }\r\n}))\r\n\r\nexport default function TransactionCommentsCard(props) {\r\n const classes = useStyles()\r\n const [transactionComments, setTransactionComments] = React.useState(\r\n props.transactionComments\r\n )\r\n\r\n return (\r\n <>\r\n \r\n {transactionComments?.length === 0 && (\r\n \r\n No records found.\r\n \r\n )}\r\n \r\n {transactionComments?.map((comm, index) => {\r\n const avatarText =\r\n comm.userFirstName.charAt(0) +\r\n comm.userLastName.charAt(0)\r\n return (\r\n <>\r\n \r\n \r\n {avatarText}\r\n \r\n \r\n }\r\n secondary={\r\n \r\n \r\n {comm.userFirstName +\r\n ' ' +\r\n comm.userLastName}\r\n \r\n \r\n {comm.date\r\n ? ' (' +\r\n dateUTCToLocalString(comm.date) +\r\n ')'\r\n : ''}\r\n \r\n \r\n }\r\n />\r\n \r\n \r\n \r\n )\r\n })}\r\n
\r\n \r\n \r\n )\r\n}\r\n","import React from 'react'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport Button from '@material-ui/core/Button'\r\nimport Dialog from '@material-ui/core/Dialog'\r\nimport DialogActions from '@material-ui/core/DialogActions'\r\nimport DialogContent from '@material-ui/core/DialogContent'\r\nimport DialogTitle from '@material-ui/core/DialogTitle'\r\nimport Input from '@material-ui/core/Input'\r\nimport FormControl from '@material-ui/core/FormControl'\r\nimport Select from '@material-ui/core/Select'\r\nimport IconButton from '@material-ui/core/IconButton'\r\nimport AddCircleIcon from '@material-ui/icons/AddCircle'\r\nimport authService from '../api-authorization/AuthorizeService'\r\nimport { LinearProgress, MenuItem } from '@material-ui/core'\r\nimport Alert from '@material-ui/lab/Alert'\r\nimport CloseIcon from '@material-ui/icons/Close'\r\nimport { downloadDocumentPDFForShipment } from '../../api/api'\r\nimport GetAppIcon from '@material-ui/icons/GetApp'\r\nimport { TextField } from '@material-ui/core'\r\nimport List from '@material-ui/core/List'\r\nimport ListItem from '@material-ui/core/ListItem'\r\nimport Divider from '@material-ui/core/Divider'\r\nimport ListItemText from '@material-ui/core/ListItemText'\r\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar'\r\nimport Avatar from '@material-ui/core/Avatar'\r\nimport Typography from '@material-ui/core/Typography'\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n container: {\r\n display: 'flex',\r\n flexWrap: 'wrap'\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n minWidth: 120\r\n },\r\n docTypeSelect: {},\r\n root: {\r\n width: '100%',\r\n backgroundColor: theme.palette.background.paper\r\n },\r\n inline: {\r\n display: 'inline'\r\n }\r\n}))\r\n\r\nexport default function TransactionCommentsHeaderCard(props) {\r\n const classes = useStyles()\r\n const [open, setOpen] = React.useState(false)\r\n const [doctype, setDocType] = React.useState('')\r\n const [isLoading, setIsLoading] = React.useState(false)\r\n const [isSuccess, setIsSuccess] = React.useState(false)\r\n const [isError, setIsError] = React.useState(false)\r\n const [errorMessage, setErrorMessage] = React.useState('')\r\n const [newComment, setNewComment] = React.useState('')\r\n\r\n // need to expand this to work for orders as well\r\n const transactionNumber =\r\n props.transactiontype === 'shipment' ||\r\n props.transactiontype === 'booking' ||\r\n props.transactiontype === 'customs'\r\n ? props.transactionnumber\r\n : null\r\n\r\n const getTransactionTypeByName = name => {\r\n switch (name) {\r\n case 'shipment':\r\n return 1\r\n case 'booking':\r\n return 2\r\n case 'customs':\r\n return 0\r\n case 'order':\r\n return 3\r\n }\r\n }\r\n\r\n const handleClickOpen = () => {\r\n setOpen(true)\r\n }\r\n\r\n const handleClose = () => {\r\n setOpen(false)\r\n }\r\n\r\n const handleSuccess = () => {\r\n setIsSuccess(true)\r\n // reload page\r\n setInterval(function () {\r\n setIsSuccess(false)\r\n setOpen(false)\r\n }, 3000)\r\n window.location.reload()\r\n }\r\n\r\n const handleError = errorMessage => {\r\n setErrorMessage(errorMessage)\r\n setIsError(true)\r\n }\r\n\r\n const handleSubmission = async () => {\r\n if (newComment === '') {\r\n setIsError(true)\r\n setErrorMessage('No comment entered!')\r\n } else {\r\n setIsError(false)\r\n setIsSuccess(false)\r\n setErrorMessage('')\r\n setIsLoading(true)\r\n\r\n const requestBody = {\r\n transactionNumber: transactionNumber,\r\n transactionType: getTransactionTypeByName(\r\n props.transactiontype\r\n ),\r\n comment: newComment,\r\n clientId: props.clientId,\r\n transportMode: props.transportMode\r\n }\r\n\r\n const token = await authService.getAccessToken()\r\n const header = {\r\n Authorization: `Bearer ${token}`,\r\n 'Content-Type': 'application/json'\r\n }\r\n\r\n const response = await fetch('api/Comments/AddComment', {\r\n method: 'POST',\r\n headers: header,\r\n body: JSON.stringify(requestBody)\r\n })\r\n\r\n if (response.status === 200) {\r\n handleSuccess()\r\n } else if (response.status === 401) {\r\n handleError('You do not have permission to add a comment!')\r\n } else {\r\n handleError(\r\n 'An error occurred while adding a comment - please contact support.'\r\n )\r\n }\r\n\r\n setIsLoading(false)\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n \r\n \r\n Add\r\n \r\n \r\n \r\n )\r\n}\r\n","import React, { Suspense, PureComponent } from 'react'\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport Alert from '@material-ui/lab/Alert'\r\nimport { Grid } from '@material-ui/core'\r\nimport { Card } from '@material-ui/core'\r\nimport { LinearProgress, Typography } from '@material-ui/core'\r\nimport { renderDetailMap } from '../components/shared/MapHelper'\r\nimport { renderTable } from '../components/shared/TableHelper'\r\nimport { withStyles } from '@material-ui/core/styles'\r\nimport CardTitle from './shared/CardTitle'\r\nimport { Paper } from '@material-ui/core'\r\nimport { Link } from '@material-ui/core'\r\nimport { CardContent } from '@material-ui/core'\r\nimport ShipmentInfoCard from './shared/ShipmentInfoCard'\r\nimport ShipmentDetailCard from './shared/ShipmentDetailCard'\r\nimport ShipmentContainersTable from './shared/ShipmentContainersTable'\r\nimport ShipmentPacklinesTable from './shared/ShipmentPacklinesTable'\r\nimport { downloadInvoicePDFForShipment } from '../api/api'\r\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel'\r\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'\r\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore'\r\nimport ArrowBackIcon from '@material-ui/icons/ArrowBack'\r\nimport { ApplicationPaths } from './api-authorization/ApiAuthorizationConstants'\r\nimport DocumentUploadSelectDialog from './shared/DocumentUploadSelectDialog'\r\nimport TransactionCommentsCard from './shared/TransactionCommentsCard'\r\nimport TransactionCommentsHeaderCard from './shared/TransactionCommentsHeaderCard'\r\nimport { getOrgViewCodeFromOrganization } from '../utils/organizations'\r\nimport { canSeeAccounting, canSeeOrders } from '../utils/permissions'\r\nimport ShipmentRoutingCard from './shared/ShipmentRoutingCard'\r\nimport BookingApprovalButton from './BookingApprovalButton'\r\nimport BookingRejectButton from './BookingRejectButton'\r\n\r\nconst styles = theme => ({\r\n title: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n },\r\n textFieldForm: {\r\n width: theme.textFieldForm.width\r\n },\r\n bgColorSection: {\r\n backgroundColor: theme.bgColorSection\r\n }\r\n})\r\n\r\n// we need to lazy load due to speed of downloading docs\r\nconst ShipmentDocumentsCard = React.lazy(() =>\r\n import('./shared/ShipmentDocumentsCard')\r\n)\r\n\r\nconst bgColorSection = 'bg-white text-dark'\r\n\r\nconst milestones = [\r\n {\r\n key: 'description',\r\n label: 'Description',\r\n icon: true\r\n },\r\n {\r\n key: 'estimatedDate',\r\n label: 'Estimate',\r\n icon: false\r\n },\r\n {\r\n key: 'actualDate',\r\n label: 'Actual',\r\n icon: false\r\n }\r\n]\r\n\r\nconst referenceNumbers = [\r\n { key: 'numberType', label: 'Number Type', icon: false },\r\n { key: 'numberRef', label: 'Number', icon: false },\r\n { key: 'typeDescription', label: 'Type Description', icon: false }\r\n]\r\n\r\nconst notes = [\r\n { key: 'title', label: 'Note Type', icon: false },\r\n { key: 'date', label: 'Date', icon: false },\r\n { key: 'note', label: 'Detail', icon: false }\r\n]\r\n\r\nconst invoices = [\r\n { key: 'invoiceNumber', label: 'Invoice Number', icon: false, link: true },\r\n { key: 'description', label: 'Description', icon: false }\r\n]\r\n\r\nclass ShipmentDetailPage extends PureComponent {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n clientId: props.match.params.clientId,\r\n shipmentId: props.match.params.shipmentId,\r\n containerId: props.match.params.containerId,\r\n item: null,\r\n itemextra: null,\r\n loading: true,\r\n error: false,\r\n errorMessage: '',\r\n dialogOpen: false,\r\n selectedContainer: {},\r\n organization: null,\r\n expanded: 'panel1',\r\n uri: props.uri || 'GetShipment',\r\n client: null,\r\n showInvoices: false,\r\n showOrders: false,\r\n transactiontype: props.uri.replace('Get', ''),\r\n orgViewCode: null,\r\n }\r\n\r\n this.showDialog = this.showDialog.bind(this)\r\n this.populateShipmentData = this.populateShipmentData.bind(this)\r\n this.fetchAllShipmentData = this.fetchAllShipmentData.bind(this)\r\n this.fetchExtraShipmentData = this.fetchExtraShipmentData.bind(this)\r\n this.handleACCChange = this.handleACCChange.bind(this)\r\n }\r\n\r\n async componentDidMount() {\r\n await this.getOrgViewCode()\r\n await this.populateShipmentData()\r\n }\r\n\r\n getTransactionTypeByURI(uri) {\r\n switch (uri) {\r\n case 'GetShipment':\r\n return 'shipment'\r\n case 'GetCustoms':\r\n return 'customs'\r\n case 'GetBooking':\r\n return 'booking'\r\n }\r\n return 'shipment'\r\n }\r\n\r\n showDialog(container) {\r\n const { item, itemextra } = this.state\r\n\r\n this.setState({\r\n dialogOpen: true,\r\n selectedContainer: container\r\n })\r\n\r\n this.setState(prevState => {\r\n let selectedContainer = Object.assign(\r\n {},\r\n prevState.selectedContainer\r\n )\r\n selectedContainer['geoLocationOrigin'] = item.geoLocationOrigin\r\n selectedContainer['geoLocationDestination'] =\r\n item.geoLocationDestination\r\n selectedContainer['geoLocationPortOfLoading'] =\r\n item.geoLocationPortOfLoading\r\n selectedContainer['geoLocationPortOfDischarge'] =\r\n item.geoLocationPortOfDischarge\r\n selectedContainer['geoLocationCurrentLocation'] =\r\n itemextra.geoLocationCurrentLocation\r\n\r\n return { selectedContainer }\r\n })\r\n\r\n this.setState(prevState => {\r\n let selectedContainer = Object.assign(\r\n {},\r\n prevState.selectedContainer\r\n )\r\n selectedContainer['mode'] = item.mode || item.transportMode\r\n\r\n return { selectedContainer }\r\n })\r\n }\r\n\r\n handleActionsDialog = action => {\r\n this.setState({\r\n dialogOpen: !this.state.dialogOpen\r\n })\r\n }\r\n\r\n handleACCChange = panel => (event, expanded) => {\r\n this.setState({ expanded: expanded ? panel : false })\r\n }\r\n\r\n goBack = () => {\r\n localStorage.setItem('referredFromDetailPage', JSON.stringify(true))\r\n this.props.history.goBack()\r\n }\r\n\r\n renderInvoiceLink = (i, index, arrayKey) => {\r\n const { item, clientId, showInvoices } = this.state\r\n\r\n const handleDownloadInvoicePDF = async (invoiceNumber, clientId) => {\r\n downloadInvoicePDFForShipment(\r\n invoiceNumber,\r\n clientId,\r\n (blob, headers) => {\r\n const filename = headers\r\n .get('Content-Disposition')\r\n .split('filename=')[1]\r\n .split(';')[0]\r\n\r\n const newFilename = filename.slice(1, filename.length - 1)\r\n\r\n const url = window.URL.createObjectURL(new Blob([blob]))\r\n const link = document.createElement('a')\r\n link.href = url\r\n link.setAttribute('download', newFilename)\r\n document.body.appendChild(link)\r\n link.click()\r\n link.parentNode.removeChild(link)\r\n },\r\n () => {}\r\n )\r\n }\r\n\r\n return (\r\n \r\n {showInvoices && i[arrayKey.key] ? (\r\n {\r\n handleDownloadInvoicePDF(i[arrayKey.key], clientId)\r\n }}\r\n >\r\n {' '}\r\n {i[arrayKey.key] || '-'}\r\n \r\n ) : (\r\n i[arrayKey.key] || '-'\r\n )}\r\n
\r\n )\r\n }\r\n\r\n renderMilestones = () => {\r\n const { itemextra } = this.state\r\n const { classes } = this.props\r\n\r\n var shipmentMilestones = itemextra.milestones ?? []\r\n var consolMilestones = itemextra.consolMilestones ?? []\r\n var sortedMilestones = shipmentMilestones.concat(consolMilestones)\r\n sortedMilestones.sort((a, b) => {\r\n // sort by sequence property\r\n return a.sequence - b.sequence\r\n })\r\n\r\n return (\r\n \r\n {itemextra?.milestones ? (\r\n renderTable(\r\n sortedMilestones,\r\n milestones,\r\n 'milestones',\r\n classes,\r\n null,\r\n {\r\n maxHeight: '200px'\r\n }\r\n )\r\n ) : (\r\n \r\n No records found.\r\n \r\n )}\r\n \r\n )\r\n }\r\n\r\n renderReferenceNumbers = () => {\r\n const { itemextra } = this.state\r\n const { classes } = this.props\r\n\r\n return (\r\n \r\n {renderTable(\r\n itemextra?.referenceNumbers ?? [],\r\n referenceNumbers,\r\n 'referenceNumbers',\r\n classes,\r\n null,\r\n {\r\n maxHeight: '200px'\r\n }\r\n )}\r\n \r\n )\r\n }\r\n\r\n renderNotes = () => {\r\n const { itemextra } = this.state\r\n const { classes } = this.props\r\n\r\n return (\r\n \r\n {renderTable(\r\n itemextra?.notes ?? [],\r\n notes,\r\n 'notes',\r\n classes,\r\n null,\r\n {\r\n maxHeight: '200px'\r\n }\r\n )}\r\n \r\n )\r\n }\r\n\r\n renderInvoices = () => {\r\n const { item } = this.state\r\n const { classes } = this.props\r\n\r\n if (item === null) {\r\n return null\r\n }\r\n\r\n return (\r\n \r\n {renderTable(\r\n item?.invoices ?? [],\r\n invoices,\r\n 'invoices',\r\n classes,\r\n this.renderInvoiceLink,\r\n {\r\n maxHeight: '200px'\r\n }\r\n )}\r\n \r\n )\r\n }\r\n\r\n renderPickupInfo = () => {\r\n const { itemextra, organization } = this.state\r\n return (\r\n \r\n
Pickup Info
\r\n\r\n
\r\n \r\n \r\n \r\n Addresss\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.pickupInfo?.name) ||\r\n ''}\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.pickupInfo?.addresLine1) ||\r\n ''}\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.pickupInfo?.city) ||\r\n ''}\r\n ,{' '}\r\n {(itemextra !== null &&\r\n itemextra.pickupInfo?.state) ||\r\n ''}\r\n ,{' '}\r\n {(itemextra !== null &&\r\n itemextra.pickupInfo?.postalCode) ||\r\n ''}\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.pickupInfo?.country) ||\r\n ''}\r\n \r\n
\r\n \r\n \r\n \r\n {itemextra?.pickupInfo?.hidePickupRequiredBy ===\r\n false && (\r\n \r\n \r\n \r\n Pickup Required By\r\n \r\n
\r\n \r\n {itemextra.pickupInfo\r\n ?.pickupRequiredBy || '-'}\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n Estimated Pickup\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.pickupInfo\r\n ?.estimatedPickup) ||\r\n '-'}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n Actual Pickup\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.pickupInfo\r\n ?.actualPickup) ||\r\n '-'}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
Delivery Info
\r\n
\r\n \r\n \r\n \r\n Address\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.deliveryInfo?.name) ||\r\n ''}\r\n \r\n
\r\n {itemextra?.deliveryInfo?.shortCode && (\r\n <>\r\n \r\n {itemextra.deliveryInfo.shortCode}\r\n \r\n
\r\n \r\n )}\r\n \r\n {(itemextra !== null &&\r\n itemextra.deliveryInfo?.addresLine1) ||\r\n ''}\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.deliveryInfo?.city) ||\r\n ''}\r\n ,{' '}\r\n {(itemextra !== null &&\r\n itemextra.deliveryInfo?.state) ||\r\n ''}\r\n ,{' '}\r\n {(itemextra !== null &&\r\n itemextra.deliveryInfo?.postalCode) ||\r\n ''}\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.deliveryInfo?.country) ||\r\n ''}\r\n \r\n
\r\n \r\n \r\n \r\n {itemextra?.deliveryInfo?.hideDeliveryRequiredBy ===\r\n false && (\r\n \r\n \r\n \r\n Delivery Required By\r\n \r\n
\r\n \r\n {itemextra.deliveryInfo\r\n ?.deliveryRequiredBy || '-'}\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n Estimated Delivery\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.deliveryInfo\r\n ?.estimatedDelivery) ||\r\n '-'}\r\n \r\n
\r\n
\r\n
\r\n \r\n Actual Delivery\r\n \r\n
\r\n \r\n {(itemextra !== null &&\r\n itemextra.deliveryInfo\r\n ?.actualDelivery) ||\r\n '-'}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {' '}\r\n \r\n Go Back...\r\n \r\n \r\n \r\n {this.renderActionButtons()}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {item != null && (\r\n \r\n )}\r\n
\r\n \r\n {item != null && (\r\n \r\n c.key ===\r\n 'CustomerPO'\r\n )?.value\r\n : item.shippersReferenceNumber\r\n }\r\n ownerRef={item.ownerRef}\r\n orderRef={\r\n organization?.shipmentServiceSelected ==\r\n 'NORMANHK'\r\n ? item.orderReferenceNumber\r\n : item.orderRef\r\n }\r\n showOrders={showOrders}\r\n quantity={item.quantity}\r\n volumeLabel=\"Volume\"\r\n volume={item.volume}\r\n weight={item.weight}\r\n shippersRefLabel={\r\n organization?.shipmentServiceSelected ==\r\n 'NORMANHK'\r\n ? 'Booking Ref'\r\n : orgViewCode ===\r\n 916\r\n ? 'Customer PO #'\r\n : \"Shipper's Ref\"\r\n }\r\n organization={\r\n organization\r\n }\r\n clientId={\r\n this.state.clientId\r\n }\r\n transactiontype={\r\n this.state\r\n .transactiontype\r\n }\r\n />\r\n )}\r\n
\r\n \r\n\r\n \r\n \r\n {renderDetailMap(\r\n item.shipmentNumber,\r\n item,\r\n itemextra,\r\n organization,\r\n '550px'\r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {this.renderPickupInfo()}\r\n \r\n \r\n {this.renderDeliveryInfo()}\r\n \r\n \r\n \r\n {itemextra &&\r\n itemextra.hideRoutingInfo === false && (\r\n <>\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n }\r\n className=\"p-0\"\r\n >\r\n \r\n \r\n Routing\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n }\r\n >\r\n \r\n \r\n Milestones, Notes &\r\n Comments\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Milestones\r\n
\r\n \r\n {this.renderMilestones()}\r\n
\r\n \r\n \r\n \r\n Notes\r\n
\r\n \r\n {this.renderNotes()}\r\n
\r\n \r\n \r\n \r\n Comments\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n >\r\n \r\n \r\n Documents, Reference\r\n Numbers & Invoices\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Documents\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n Reference\r\n Numbers\r\n
\r\n \r\n {this.renderReferenceNumbers()}\r\n
\r\n \r\n \r\n \r\n Invoices\r\n
\r\n \r\n {this.renderInvoices()}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n >\r\n \r\n \r\n Pack Lines{' '}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n }\r\n >\r\n \r\n \r\n Containers\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
{contents}
\r\n }\r\n\r\n renderActionButtons() {\r\n const { uri } = this.props\r\n const { item, clientId } = this.state\r\n const transactionType = this.getTransactionTypeByURI(uri)\r\n \r\n if (transactionType === 'booking') {\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n return null\r\n }\r\n\r\n async getOrgViewCode() {\r\n const viewCode = await getOrgViewCodeFromOrganization()\r\n this.setState({ orgViewCode: viewCode })\r\n }\r\n\r\n async populateShipmentData() {\r\n this.fetchAllShipmentData()\r\n .then(([shipment, orgConfig, clientData]) => {\r\n canSeeAccounting(orgConfig).then(showInvoices => {\r\n this.setState({ showInvoices: showInvoices })\r\n })\r\n canSeeOrders(orgConfig).then(showOrders => {\r\n this.setState({ showOrders: showOrders })\r\n })\r\n this.setState(\r\n {\r\n item: shipment,\r\n organization: orgConfig,\r\n client: clientData\r\n },\r\n () => {\r\n this.fetchExtraShipmentData()\r\n .then(([shipmentExtra]) => {\r\n shipmentExtra.geoLocationDestination =\r\n shipmentExtra.geoLocationDestination ??\r\n shipment.geoLocationDestination\r\n shipmentExtra.geoLocationOrigin =\r\n shipmentExtra.geoLocationOrigin ??\r\n shipment.geoLocationOrigin\r\n this.setState({\r\n itemextra: shipmentExtra,\r\n loading: false\r\n })\r\n })\r\n .catch(error => {\r\n this.setState({\r\n loading: false,\r\n error: true,\r\n errorMessage:\r\n 'Unable to fetch shipment details from Cargowise One. Please try again later.'\r\n })\r\n })\r\n }\r\n )\r\n })\r\n .catch(error => {\r\n this.setState({\r\n loading: false,\r\n error: true,\r\n errorMessage:\r\n 'Unable to fetch shipment details. Please try again later.'\r\n })\r\n })\r\n }\r\n\r\n async fetchAllShipmentData() {\r\n const { shipmentId, clientId, uri } = this.state\r\n const queryString = require('query-string')\r\n\r\n const qs = {\r\n ClientId: clientId,\r\n ShipmentSearchNumber: shipmentId\r\n }\r\n\r\n const token = await authService.getAccessToken()\r\n\r\n const [shipmentResponse, orgConfigResponse, clientDataResponse] =\r\n await Promise.all([\r\n fetch(`api/shipments/${uri}?` + queryString.stringify(qs), {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n }),\r\n fetch(\r\n 'api' + ApplicationPaths.AppInfo + '?clientId=' + clientId\r\n ),\r\n fetch(`api/clients/` + clientId, {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n })\r\n ])\r\n\r\n const shipment = await shipmentResponse.json()\r\n const orgConfig = await orgConfigResponse.json()\r\n const clientData = await clientDataResponse.json()\r\n\r\n return [shipment, orgConfig, clientData]\r\n }\r\n\r\n async fetchExtraShipmentData() {\r\n const { shipmentId, clientId, uri } = this.state\r\n const queryString = require('query-string')\r\n\r\n const qs = {\r\n ClientId: clientId,\r\n ShipmentSearchNumber: shipmentId\r\n }\r\n\r\n const token = await authService.getAccessToken()\r\n\r\n const [shipmentExtraResponse] = await Promise.all([\r\n fetch(`api/shipments/${uri}extra?` + queryString.stringify(qs), {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n })\r\n ])\r\n\r\n const shipmentExtra = await shipmentExtraResponse.json()\r\n\r\n return [shipmentExtra]\r\n }\r\n}\r\n\r\nexport default withStyles(styles, { withTheme: true })(ShipmentDetailPage)\r\n","import React, { PureComponent } from 'react'\r\nimport ShipmentDetailPage from './ShipmentDetailPage'\r\n\r\nclass BookingDetails extends PureComponent {\r\n render() {\r\n let contents = \r\n return {contents}
\r\n }\r\n}\r\nexport default BookingDetails","import React, { PureComponent } from 'react'\r\nimport ShipmentDetailPage from './ShipmentDetailPage'\r\n\r\nclass ShipmentDetails extends PureComponent {\r\n render() {\r\n let contents = \r\n\r\n return {contents}
\r\n }\r\n}\r\nexport default ShipmentDetails\r\n","import React, { useState, useEffect } from 'react'\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport ShipmentsTable from './ShipmentsTable'\r\nimport { canSeeCustoms } from '../utils/permissions'\r\nimport { LinearProgress } from '@material-ui/core'\r\nimport UnauthorizedMessage from './shared/UnauthorizedMessage'\r\n\r\nexport default function Customs() {\r\n const [loading, setIsLoading] = useState(true)\r\n const [show, setShow] = useState(false)\r\n\r\n useEffect(() => {\r\n getAppInfo()\r\n }, [])\r\n\r\n const getAppInfo = async () => {\r\n const token = await authService.getAccessToken()\r\n\r\n const response = await fetch('api/app/info', {\r\n headers: !token ? {} : { Authorization: `Bearer ${token}` }\r\n })\r\n\r\n setIsLoading(false)\r\n\r\n if (response.ok) {\r\n const data = await response.json()\r\n setShow(await canSeeCustoms(data))\r\n }\r\n }\r\n\r\n return (\r\n \r\n {loading ? (\r\n \r\n ) : show ? (\r\n \r\n ) : (\r\n UnauthorizedMessage({ moduleName: 'Customs' })\r\n )}\r\n
\r\n )\r\n}\r\n","import React, { PureComponent } from 'react'\r\nimport ShipmentDetailPage from './ShipmentDetailPage'\r\n\r\nclass CustomDetails extends PureComponent {\r\n render() {\r\n let contents = \r\n\r\n return {contents}
\r\n }\r\n}\r\nexport default CustomDetails\r\n","import React, { PureComponent } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport Alert from '@material-ui/lab/Alert'\r\n\r\nexport default class AlertMessage extends PureComponent {\r\n render() {\r\n if (!this.props.open) {\r\n return null\r\n }\r\n return (\r\n this.props.onClose(false)}\r\n severity={this.props.success ? 'success' : 'error'}\r\n >\r\n {this.props.message}\r\n \r\n )\r\n }\r\n}\r\nAlertMessage.propTypes = {\r\n onClose: PropTypes.func.isRequired,\r\n open: PropTypes.bool.isRequired,\r\n success: PropTypes.bool.isRequired,\r\n message: PropTypes.string.isRequired\r\n}\r\n","import React from 'react'\r\nimport {\r\n Button,\r\n Dialog,\r\n DialogActions,\r\n DialogContent,\r\n DialogContentText,\r\n DialogTitle\r\n} from '@material-ui/core'\r\nimport PropTypes from 'prop-types'\r\n\r\nexport const CustomDialog = ({\r\n isOpen,\r\n handleClose,\r\n title,\r\n subtitle,\r\n children\r\n}) => {\r\n return (\r\n <>\r\n \r\n {title}\r\n \r\n {subtitle}\r\n {children}\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nCustomDialog.propTypes = {\r\n isOpen: PropTypes.bool.isRequired,\r\n handleClose: PropTypes.func.isRequired,\r\n title: PropTypes.string.isRequired,\r\n subtitle: PropTypes.string,\r\n children: PropTypes.element.isRequired\r\n}\r\n","import React from 'react'\r\nimport { Grid } from '@material-ui/core'\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle'\r\nimport RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'\r\nimport RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked'\r\nimport IconButton from '@material-ui/core/IconButton'\r\n\r\nexport default function ShipmentCreationProgress({\r\n client,\r\n index,\r\n hideContainers = false\r\n}) {\r\n const clientBookingSteps = client?.bookingSteps ? JSON.parse(client.bookingSteps) : []\r\n\r\n const renderStepButton = (step, checked, current) => {\r\n return (\r\n (window.location.href = step.href)}\r\n >\r\n {current ? (\r\n \r\n ) : checked ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n )\r\n }\r\n\r\n const renderStep = (step, i) => {\r\n if (hideContainers && step.index === 3) {\r\n return null\r\n }\r\n\r\n if (step.enabled === true) {\r\n return (\r\n \r\n \r\n {step.index < index &&\r\n renderStepButton(step, true, false)}\r\n {step.index > index &&\r\n renderStepButton(step, false, false)}\r\n {step.index === index &&\r\n renderStepButton(step, false, true)}\r\n \r\n \r\n {step.name}\r\n \r\n \r\n )\r\n } else {\r\n return null\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n {clientBookingSteps.map((step, i) => {\r\n return renderStep(step, i)\r\n })}\r\n \r\n
\r\n )\r\n}\r\n","const dataTypesKey = 'shipment.create.dataTypes'\r\n\r\nexport const getDataMapping = () => {\r\n return JSON.parse(sessionStorage.getItem(dataTypesKey))\r\n}\r\n\r\nexport const setDataMapping = data => {\r\n sessionStorage.setItem(dataTypesKey, data)\r\n}\r\n\r\nexport const deleteDataMapping = data => {\r\n sessionStorage.removeItem(dataTypesKey)\r\n}\r\n\r\nexport const getModuleNameByKey = key => {\r\n switch (key) {\r\n case 'ShipmentCreate':\r\n return 'Create Booking'\r\n case 'CreateOrder':\r\n return 'Create Order'\r\n case 'ShipmentSearch':\r\n return 'Shipments'\r\n case 'Customs':\r\n return 'Customs'\r\n case 'Accounting':\r\n return 'Accounting'\r\n case 'Booking':\r\n return 'Bookings'\r\n case 'Order':\r\n return 'Orders'\r\n case 'Container':\r\n return 'Containers'\r\n default:\r\n return ''\r\n }\r\n}\r\n","const shipmentIdKey = 'shipment.create.shipmentId'\r\n\r\nexport const isNotFclOrFtl = containerType => {\r\n return containerType !== 'FCL' && containerType !== 'FTL'\r\n}\r\n\r\nexport const getShipmentKey = () => {\r\n return sessionStorage.getItem(shipmentIdKey)\r\n}\r\n\r\nexport const removeShipmentKey = () => {\r\n return sessionStorage.removeItem(shipmentIdKey)\r\n}\r\n","import { isNotFclOrFtl } from '../../utils/shipment'\r\n\r\nexport const getNextEnabledBookingStep = (\r\n currentStep,\r\n bookingSteps,\r\n containerType\r\n) => {\r\n bookingSteps = JSON.parse(bookingSteps)\r\n let nextStep = currentStep + 1\r\n while (nextStep < bookingSteps.length) {\r\n if (bookingSteps[nextStep].enabled) {\r\n if (nextStep === 3 && isNotFclOrFtl(containerType)) {\r\n return bookingSteps[4]\r\n } else {\r\n return bookingSteps[nextStep]\r\n }\r\n }\r\n nextStep++\r\n }\r\n return bookingSteps[nextStep]\r\n}\r\n\r\nexport const getPreviousEnabledBookingStep = (\r\n currentStep,\r\n bookingSteps,\r\n containerType\r\n) => {\r\n bookingSteps = JSON.parse(bookingSteps)\r\n let previousStep = currentStep - 1\r\n while (previousStep >= 0) {\r\n if (bookingSteps[previousStep].enabled) {\r\n if (previousStep === 3 && isNotFclOrFtl(containerType)) {\r\n // continue\r\n } else {\r\n return bookingSteps[previousStep]\r\n }\r\n }\r\n previousStep--\r\n }\r\n return bookingSteps[previousStep]\r\n}\r\n\r\nexport const hasAccessToStep = (step, bookingSteps, containerType) => {\r\n bookingSteps = JSON.parse(bookingSteps)\r\n if (step === 3 && isNotFclOrFtl(containerType)) {\r\n return false\r\n }\r\n return bookingSteps[step].enabled\r\n}\r\n","/**\r\n * Attempts to parse a string as an integer, returning the parsed value if the string represents a valid number,\r\n * or the defaultValue if the string is empty or not a valid number.\r\n * @param input The string to parse.\r\n * @param defaultValue The value to return if the string is empty or not a valid number.\r\n * @return A parsed integer, or the defaultValue if the string could not be parsed.\r\n */\r\nexport const tryParseInt = (input, defaultValue) => {\r\n var retValue = defaultValue\r\n\r\n // If the input is a string, try to parse it as an integer.\r\n if (typeof input === 'string') {\r\n if (input.length > 0) {\r\n if (!isNaN(input)) {\r\n retValue = parseInt(input)\r\n }\r\n }\r\n }\r\n\r\n // If the input is a number, return it as an integer.\r\n else if (typeof input === 'number') {\r\n retValue = parseInt(input)\r\n }\r\n\r\n return retValue\r\n}\r\n\r\n/**\r\n * Attempts to parse a string as a floating point number, returning the parsed value if the string represents a valid number,\r\n * or the defaultValue if the string is empty or not a valid number.\r\n * @param input The string to parse.\r\n * @param defaultValue The value to return if the string is empty or not a valid number.\r\n * @return A parsed floating point number, or the defaultValue if the string could not be parsed.\r\n */\r\nexport const tryParseFloat = (input, defaultValue) => {\r\n var retValue = defaultValue\r\n\r\n // If the input is a string, try to parse it as a floating point number.\r\n if (typeof input === 'string') {\r\n if (input.length > 0) {\r\n if (!isNaN(input)) {\r\n retValue = parseFloat(input)\r\n }\r\n }\r\n }\r\n\r\n // If the input is a number, return it as a floating point number.\r\n else if (typeof input === 'number') {\r\n retValue = parseFloat(input)\r\n }\r\n\r\n return retValue\r\n}\r\n","import React, { useState, useEffect } from 'react'\r\nimport authService from './api-authorization/AuthorizeService'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport { CardContent, Grid } from '@material-ui/core'\r\nimport {\r\n FormControl,\r\n TextField,\r\n Button,\r\n List,\r\n ListItem\r\n} from '@material-ui/core'\r\nimport Autocomplete from '@material-ui/lab/Autocomplete'\r\nimport { Input, InputLabel } from '@material-ui/core'\r\nimport { MenuItem, Select, Typography } from '@material-ui/core'\r\nimport AlertMessage from './shared/Alert'\r\nimport voca from 'voca'\r\nimport { useForm, Controller } from 'react-hook-form'\r\nimport _ from 'lodash'\r\nimport { CustomDialog } from './shared/CustomDialog'\r\nimport IconButton from '@material-ui/core/IconButton'\r\nimport AddCircleIcon from '@material-ui/icons/AddCircle'\r\nimport Paper from '@material-ui/core/Paper'\r\nimport ShipmentCreationProgress from './CreateShipment/ShipmentCreationProgress'\r\nimport DateFnsUtils from '@date-io/moment'\r\nimport {\r\n MuiPickersUtilsProvider,\r\n KeyboardDatePicker\r\n} from '@material-ui/pickers'\r\nimport { setDataMapping } from '../utils/data-mapping'\r\nimport { getCreatedShipment, getUNLOCO, getLocationByUNLOCO } from '../api/api'\r\nimport Accordion from '@material-ui/core/Accordion'\r\nimport AccordionSummary from '@material-ui/core/AccordionSummary'\r\nimport AccordionDetails from '@material-ui/core/AccordionDetails'\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore'\r\nimport ToggleButton from '@material-ui/lab/ToggleButton'\r\nimport ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'\r\nimport Alert from '@material-ui/lab/Alert'\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel'\r\nimport { getOrgViewCodeFromOrganization } from '../utils/organizations'\r\nimport { renderTable } from '../components/shared/TableHelper'\r\nimport { retrieveView } from './shared/Views'\r\nimport { getNextEnabledBookingStep } from './CreateShipment/CreateBookingFunctions'\r\nimport { tryParseFloat, tryParseInt } from '../utils/numbers'\r\nimport { clientUserHasPermission } from '../utils/permissions'\r\n\r\nconst classes = makeStyles(theme => ({\r\n paper: {\r\n padding: theme.spacing(2)\r\n },\r\n heading: {\r\n backgroundColor: theme.palette.primary.main,\r\n color: theme.palette.primary.contrastText\r\n }\r\n}))\r\n\r\nconst dateFns = new DateFnsUtils()\r\n\r\nexport default function CreateShipmentForm(props) {\r\n const {\r\n register,\r\n handleSubmit,\r\n errors,\r\n formState,\r\n setValue,\r\n getValues,\r\n control,\r\n watch\r\n } = useForm()\r\n const { isDirty } = formState\r\n\r\n const [organization, setOrganization] = useState([])\r\n const [clients, setClients] = useState([])\r\n const [currentClient, setCurrentClient] = useState(null)\r\n const [transportModes, setTransportModes] = useState([])\r\n const [incoTerms, setIncoTerms] = useState([])\r\n const [commodities, setCommodities] = useState([])\r\n const [containerModes, setContainerModes] = useState([])\r\n const [serviceLevels, setServiceLevels] = useState([])\r\n const [pieceUnits, setPieceUnits] = useState([])\r\n const [weightUnits, setWeightUnits] = useState([])\r\n const [volumeUnits, setVolumeUnits] = useState([])\r\n const [addresses, setAddresses] = useState([])\r\n const [filteredAddresses, setFilteredAddresses] = useState([])\r\n const [orgConsigneeAddresses, setOrgConsigneeAddresses] = useState([])\r\n const [filteredOrgConsigneeAddresses, setFilteredOrgConsigneeAddresses] =\r\n useState([])\r\n const [orgConsignorAddresses, setOrgConsignorAddresses] = useState([])\r\n const [filteredOrgConsignorAddresses, setFilteredOrgConsignorAddresses] =\r\n useState([])\r\n const [isConsignor, setIsConsignor] = useState(true)\r\n const [originUnlocoCodes, setOriginUnlocoCodes] = useState([])\r\n const [destinationUnlocoCodes, setDestinationUnlocoCodes] = useState([])\r\n const [filteredContainerModes, setFilteredContainerModes] = useState([])\r\n const [didSetOriginUnlocoCode, setDidSetOriginUnlocoCode] = useState(false)\r\n const [didSetDestinationUnlocoCode, setDidSetDestinationUnlocoCode] =\r\n useState(false)\r\n const [originUNLOCOCodeObject, setOriginUNLOCOCodeObject] = useState(null)\r\n const [destinationUNLOCOCodeObject, setDestinationUNLOCOCodeObject] =\r\n useState(null)\r\n const [modalOpen, setModalOpen] = useState(false)\r\n const [consignorAddressesModalOpen, setConsignorAddressesModalOpen] =\r\n useState(false)\r\n const [consigneeAddressesModalOpen, setConsigneeAddressesModalOpen] =\r\n useState(false)\r\n const [key, setKey] = useState(['shipment.create'])\r\n const [organizationId, setOrganizationId] = useState(null)\r\n const [bookingAlert, setBookingAlert] = useState({\r\n open: false,\r\n success: false,\r\n message: ''\r\n })\r\n const [orderAlert, setOrderAlert] = useState({\r\n open: false,\r\n success: false,\r\n message: ''\r\n })\r\n const [referredOrderAlert, setReferredOrderAlert] = useState({\r\n open: false,\r\n success: false,\r\n message: ''\r\n })\r\n const [colorThemePrimaryRGB, setcolorThemePrimaryRGB] = useState('')\r\n const [colorThemeSecondaryRGB, setcolorThemeSecondaryRGB] = useState('')\r\n const [colorThemeTertiaryRGB, setcolorThemeTertiaryRGB] = useState('')\r\n const [colorThemeRGB, setcolorThemeRGB] = useState('')\r\n const [colorThemeTextRGB, setcolorThemeTextRGB] = useState('')\r\n const [retrievingOrder, setRetrievingOrder] = useState(false)\r\n const [retrievingDataReferred, setretrievingDataReferred] = useState(false)\r\n const [expandedPanels, setExpandedPanels] = useState(['panel1'])\r\n const [bookingOrders, setBookingOrders] = useState([])\r\n const [linkedOrderHeaderColumns, setLinkedOrderHeaderColumns] = useState([])\r\n const [pageTitle, setPageTitle] = useState('Create Booking')\r\n const [shipmentNumber, setShipmentNumber] = useState(null)\r\n const [editCopyBookingNumber, setEditCopyBookingNumber] = useState(null)\r\n const [retrievingCW1Booking, setRetrievingCW1Booking] = useState(false)\r\n const [consolidatedOrderList, setConsolidatedOrderList] = useState([])\r\n const [controllingCustomerCode, setControllingCustomerCode] = useState(null)\r\n const [selectedAddressForeignKey, setselectedAddressForeignKey] =\r\n useState(null)\r\n const watchTransportMode = watch('transportModeCode')\r\n const [orgViewCode, setOrgViewCode] = useState(null)\r\n const [isReadOnly, setIsReadOnly] = useState(false)\r\n const [isSubmitting, setIsSubmitting] = useState(false);\r\n\r\n useEffect(() => {\r\n getClients()\r\n setLinkedOrderColumnDefinitions()\r\n getOrgViewCode()\r\n }, [])\r\n\r\n useEffect(() => {\r\n let shipmentNumber = sessionStorage.getItem(shipmentIdKey())\r\n const editCopyBookingNumber = localStorage.getItem(\r\n 'editCopyBookingNumber'\r\n )\r\n const editCopyBookingClientId = localStorage.getItem(\r\n 'editCopyBookingClientId'\r\n )\r\n\r\n if (editCopyBookingNumber) {\r\n setRetrievingCW1Booking(true)\r\n }\r\n\r\n if (shipmentNumber || editCopyBookingNumber) {\r\n const client = clients.find(c => c.id === editCopyBookingClientId)\r\n // need to clear shipmentnumber if there is an edit copy booking number\r\n if (editCopyBookingNumber) {\r\n shipmentNumber = null\r\n }\r\n\r\n if (client || shipmentNumber) {\r\n getCreatedShipment(\r\n shipmentNumber,\r\n editCopyBookingClientId,\r\n editCopyBookingNumber,\r\n async data => {\r\n if (editCopyBookingNumber || data.cW1BookingNumber) {\r\n var bookingNumber = editCopyBookingNumber\r\n ? editCopyBookingNumber\r\n : data.cW1BookingNumber\r\n setPageTitle('Edit Booking # ' + bookingNumber)\r\n }\r\n\r\n if (data.originUNLOCOCode !== null) {\r\n getLocationByUNLOCO(\r\n data.originUNLOCOCode,\r\n async data => {\r\n if (data) {\r\n const codeArray = [data]\r\n setOriginUnlocoCodes(codeArray)\r\n if (codeArray.length > 0) {\r\n setOriginUNLOCOCodeObject(\r\n codeArray[0]\r\n )\r\n setValue(\r\n 'originUNLOCOCode',\r\n codeArray[0]\r\n )\r\n }\r\n }\r\n }\r\n )\r\n }\r\n\r\n if (data.destinationUNLOCOCode !== null) {\r\n getLocationByUNLOCO(\r\n data.destinationUNLOCOCode,\r\n async data => {\r\n if (data) {\r\n const codeArray = [data]\r\n setDestinationUnlocoCodes(codeArray)\r\n if (codeArray.length > 0) {\r\n setDestinationUNLOCOCodeObject(\r\n codeArray[0]\r\n )\r\n setValue(\r\n 'destinationUNLOCOCode',\r\n codeArray[0]\r\n )\r\n }\r\n }\r\n }\r\n )\r\n }\r\n\r\n setOrganizationId(data.organizationId)\r\n setValue('clientId', data.clientId)\r\n setCurrentClient(\r\n clients.find(c => c.id === data.clientId)\r\n )\r\n setValue(\r\n 'orderReferenceNumber',\r\n data.orderReferenceNumber\r\n )\r\n setValue(\r\n 'clientReferenceNumber',\r\n data.clientReferenceNumber\r\n )\r\n setValue('transportModeCode', data.transportModeCode)\r\n setValue('incoTermsCode', data.incoTermsCode)\r\n setValue('commodityCode', data.commodityCode)\r\n setValue('containerTypeCode', data.containerTypeCode)\r\n setValue('serviceLevelCode', data.serviceLevelCode)\r\n setValue('goodsDescription', data.goodsDescription)\r\n setValue('piecesCount', data.piecesCount)\r\n setValue('piecesUOM', data.piecesUOM)\r\n setValue('weight', data.weight)\r\n setValue('weightUOM', data.weightUOM)\r\n setValue('volume', data.volume)\r\n setValue('volumeUOM', data.volumeUOM)\r\n setValue(\r\n 'requiredETD',\r\n data.requiredETD === '0001-01-01T00:00:00'\r\n ? null\r\n : data.requiredETD\r\n )\r\n setValue(\r\n 'requiredETA',\r\n data.requiredETA === '0001-01-01T00:00:00'\r\n ? null\r\n : data.requiredETA\r\n )\r\n setValue(\r\n 'requestedDelivery',\r\n data.requestedDelivery === '0001-01-01T00:00:00'\r\n ? null\r\n : data.requestedDelivery\r\n )\r\n setValue(\r\n 'requiredPickup',\r\n data.requiredPickup === '0001-01-01T00:00:00'\r\n ? null\r\n : data.requiredPickup\r\n )\r\n setValue(\r\n 'cargoReadyDate',\r\n data.cargoReadyDate === '0001-01-01T00:00:00'\r\n ? null\r\n : data.cargoReadyDate\r\n )\r\n setConsolidatedOrderList(data.linkedOrders)\r\n setBookingOrders(data.linkedOrderHeaders)\r\n\r\n if (data.shipmentNumber !== null) {\r\n setShipmentNumber(data.shipmentNumber)\r\n }\r\n\r\n if (data.cW1BookingNumber !== null) {\r\n setEditCopyBookingNumber(data.cW1BookingNumber)\r\n }\r\n\r\n const consignors = data.contacts.filter(\r\n c => c.addressType === 'PIC'\r\n )\r\n if (consignors.length > 0) {\r\n setValue('consignor', consignors[0])\r\n }\r\n\r\n const consignees = data.contacts.filter(\r\n c => c.addressType === 'DLV'\r\n )\r\n if (consignees.length > 0) {\r\n setValue('consignee', consignees[0])\r\n }\r\n }\r\n )\r\n .then(() => {\r\n setRetrievingCW1Booking(false)\r\n setReferredOrderAlert({\r\n open: true,\r\n success: true,\r\n message:\r\n (editCopyBookingNumber\r\n ? 'Booking details'\r\n : 'Booking draft') + ' successfully loaded!'\r\n })\r\n })\r\n .catch(error => {\r\n setRetrievingCW1Booking(false)\r\n setReferredOrderAlert({\r\n open: true,\r\n success: false,\r\n message: 'Failed to load booking details.'\r\n })\r\n })\r\n\r\n if (editCopyBookingNumber) {\r\n localStorage.removeItem('editCopyBookingNumber')\r\n localStorage.removeItem('editCopyBookingClientId')\r\n }\r\n }\r\n } else {\r\n setDidSetDestinationUnlocoCode(true)\r\n setDidSetOriginUnlocoCode(true)\r\n }\r\n\r\n getTypesData()\r\n\r\n if (!getValues('orderNumberSplit')) {\r\n setValue('orderNumberSplit', '0')\r\n }\r\n }, [clients])\r\n\r\n useEffect(() => {\r\n setValue('containerTypeMode', null)\r\n if (getValues('transportModeCode') === 'AIR') {\r\n setFilteredContainerModes(\r\n containerModes.filter(mode => mode.propertyKey === 'LSE')\r\n )\r\n } else if (getValues('transportModeCode') === 'SEA') {\r\n setFilteredContainerModes(\r\n containerModes.filter(\r\n mode =>\r\n mode.propertyKey === 'FCL' || mode.propertyKey === 'LCL'\r\n )\r\n )\r\n } else if (getValues('transportModeCode') === 'RAI') {\r\n setFilteredContainerModes(\r\n containerModes.filter(mode => mode.propertyKey === 'FCL')\r\n )\r\n } else if (getValues('transportModeCode') === 'ROA') {\r\n setFilteredContainerModes(\r\n containerModes.filter(\r\n mode =>\r\n mode.propertyKey === 'FCL' ||\r\n mode.propertyKey === 'LCL' ||\r\n mode.propertyKey === 'LTL' ||\r\n mode.propertyKey === 'FTL'\r\n )\r\n )\r\n } else {\r\n setFilteredContainerModes(containerModes)\r\n }\r\n }, [watchTransportMode, transportModes])\r\n\r\n useEffect(() => {\r\n if (originUnlocoCodes.length > 0 && !didSetOriginUnlocoCode) {\r\n setOriginUNLOCOCodeObject(originUnlocoCodes[0])\r\n setDidSetOriginUnlocoCode(true)\r\n }\r\n }, [originUnlocoCodes])\r\n\r\n useEffect(() => {\r\n if (destinationUnlocoCodes.length > 0 && !didSetDestinationUnlocoCode) {\r\n setDestinationUNLOCOCodeObject(destinationUnlocoCodes[0])\r\n setDidSetDestinationUnlocoCode(true)\r\n }\r\n }, [destinationUnlocoCodes])\r\n\r\n useEffect(() => {\r\n setretrievingDataReferred(true)\r\n // get order number from local storage\r\n const orderNumber = localStorage.getItem('newBookingOrderNumber')\r\n const orderNumberSplit = localStorage.getItem(\r\n 'newBookingOrderNumberSplit'\r\n )\r\n const buyerCode = localStorage.getItem('newBookingBuyerCode')\r\n const clientCompanyCode = localStorage.getItem('newBookingClientCode')\r\n const consolidatedOrderData = JSON.parse(\r\n localStorage.getItem('consolidatedOrderData')\r\n )\r\n const bookingOrders = JSON.parse(\r\n localStorage.getItem('bookingOrdersData')\r\n )\r\n\r\n if (!orderNumber || !orderNumberSplit || !clientCompanyCode) {\r\n clearReferredOrderValues()\r\n setretrievingDataReferred(false)\r\n return\r\n }\r\n\r\n const client = clients.find(\r\n c => c.integrationCompanyCode === clientCompanyCode\r\n )\r\n\r\n if (client) {\r\n setretrievingDataReferred(true)\r\n\r\n fetchAllOrderData(orderNumber, orderNumberSplit, client.id)\r\n .then(fetchedOrderData => {\r\n if (!fetchedOrderData.orderNumber) {\r\n // handle this\r\n clearReferredOrderValues()\r\n setretrievingDataReferred(false)\r\n return\r\n }\r\n\r\n let orderClientIsConsignor = false\r\n if (\r\n fetchedOrderData.buyerCode ===\r\n client.integrationCompanyCode\r\n ) {\r\n setIsConsignor(false)\r\n } else if (\r\n fetchedOrderData.supplierCode ===\r\n client.integrationCompanyCode\r\n ) {\r\n orderClientIsConsignor = true\r\n setIsConsignor(true)\r\n } else {\r\n // handle this\r\n alert('Order client is not consignor or consignee.')\r\n clearReferredOrderValues()\r\n setretrievingDataReferred(false)\r\n return\r\n }\r\n\r\n setretrievingDataReferred(false)\r\n setClientAddresses(client, orderClientIsConsignor)\r\n // clear consignee address\r\n setAddresses([])\r\n setFilteredAddresses([])\r\n searchAddresses('', orderClientIsConsignor, true).then(\r\n searchedAddresses => {\r\n if (searchedAddresses.length > 0) {\r\n if (orderClientIsConsignor) {\r\n // set the consignee address\r\n const consigneeAddress =\r\n searchedAddresses.find(\r\n a =>\r\n a.orgCode ===\r\n fetchedOrderData.buyerCode\r\n )\r\n if (consigneeAddress) {\r\n setValue('consignee', consigneeAddress)\r\n setValue(\r\n 'consignee.clientBuyerSupplierCode',\r\n consigneeAddress.orgCode\r\n )\r\n setselectedAddressForeignKey(\r\n consigneeAddress.psaClientBuyerSupplierFK\r\n )\r\n }\r\n } else {\r\n const consignorAddress =\r\n searchedAddresses.find(\r\n a =>\r\n a.orgCode ===\r\n fetchedOrderData.supplierCode\r\n )\r\n // set the consignor address\r\n if (consignorAddress) {\r\n setValue('consignor', consignorAddress)\r\n setValue(\r\n 'consignor.clientBuyerSupplierCode',\r\n consignorAddress.orgCode\r\n )\r\n setselectedAddressForeignKey(\r\n consignorAddress.psaClientBuyerSupplierFK\r\n )\r\n }\r\n }\r\n }\r\n }\r\n )\r\n\r\n // set extra values\r\n setValue('clientId', client.id)\r\n setCurrentClient(clients.find(c => c.id === client.id))\r\n\r\n if (consolidatedOrderData) {\r\n setValue(\r\n 'orderReferenceNumber',\r\n consolidatedOrderData.orderNumber\r\n )\r\n fetchedOrderData.orderNumber =\r\n consolidatedOrderData.orderNumber\r\n fetchedOrderData.orderTransportMode =\r\n consolidatedOrderData.orderTransportMode\r\n fetchedOrderData.containerMode =\r\n consolidatedOrderData.containerMode\r\n fetchedOrderData.incoTerms =\r\n consolidatedOrderData.incoTerms\r\n fetchedOrderData.serviceLevel =\r\n consolidatedOrderData.serviceLevel\r\n fetchedOrderData.goodsDescription =\r\n consolidatedOrderData.goodsDescription\r\n fetchedOrderData.packs = consolidatedOrderData.packs\r\n fetchedOrderData.packType =\r\n consolidatedOrderData.packType\r\n fetchedOrderData.weight = consolidatedOrderData.weight\r\n fetchedOrderData.weightUOM =\r\n consolidatedOrderData.weightUOM\r\n fetchedOrderData.volume = consolidatedOrderData.volume\r\n fetchedOrderData.volumeUOM =\r\n consolidatedOrderData.volumeUOM\r\n fetchedOrderData.origin = consolidatedOrderData.origin\r\n fetchedOrderData.destination =\r\n consolidatedOrderData.destination\r\n fetchedOrderData.dateDepartEst =\r\n consolidatedOrderData.dateDepartEst\r\n fetchedOrderData.dateArriveEst =\r\n consolidatedOrderData.dateArriveEst\r\n fetchedOrderData.dateDeliveredEst =\r\n consolidatedOrderData.dateDeliveredEst\r\n setConsolidatedOrderList(\r\n consolidatedOrderData.orderNumbersArray\r\n )\r\n setBookingOrders(bookingOrders)\r\n } else {\r\n setValue('orderReferenceNumber', orderNumber)\r\n setConsolidatedOrderList([\r\n {\r\n orderNumber: orderNumber,\r\n orderNumberSplit: parseInt(orderNumberSplit),\r\n buyerCode: buyerCode\r\n }\r\n ])\r\n }\r\n\r\n setBookingDetailsFromOrder(fetchedOrderData)\r\n clearReferredOrderValues()\r\n setReferredOrderAlert({\r\n open: true,\r\n success: true,\r\n message: 'Order details successfully loaded!'\r\n })\r\n })\r\n .catch(error => {\r\n clearReferredOrderValues()\r\n setretrievingDataReferred(false)\r\n setReferredOrderAlert({\r\n open: true,\r\n success: false,\r\n message: 'Failed to load order details.'\r\n })\r\n })\r\n }\r\n }, [clients])\r\n\r\n useEffect(() => {\r\n const checkLockOrderPermission = async () => {\r\n if (currentClient) {\r\n try {\r\n const hasLockOrdertoBookingFieldsPermission = await clientUserHasPermission(\r\n currentClient.id, \r\n 'lockordertobookingfields'\r\n ) \r\n // Check if the form was opened via an order \r\n const wasOpenedViaOrder = consolidatedOrderList.length > 0\r\n setIsReadOnly(hasLockOrdertoBookingFieldsPermission && wasOpenedViaOrder) // Set isReadOnly when both permission is true and form was opened via an order\r\n } catch {\r\n setIsReadOnly(false)\r\n }\r\n } else {\r\n setIsReadOnly(false)\r\n }\r\n }\r\n\r\n checkLockOrderPermission()\r\n }, [currentClient, consolidatedOrderList])\r\n\r\n useEffect((fetchedOrderData) => {\r\n const handleBeforeUnload = (e) => {\r\n if ((isDirty || fetchedOrderData !== null) && !isSubmitting) {\r\n e.preventDefault();\r\n e.returnValue = 'Are you sure you want to leave the page? Changes won\\'t be saved.';\r\n return e.returnValue;\r\n }\r\n };\r\n\r\n window.addEventListener('beforeunload', handleBeforeUnload);\r\n\r\n return () => {\r\n window.removeEventListener('beforeunload', handleBeforeUnload);\r\n };\r\n }, [isDirty, isSubmitting]);\r\n\r\n const getOrgViewCode = async () => {\r\n const viewCode = await getOrgViewCodeFromOrganization()\r\n setOrgViewCode(viewCode)\r\n }\r\n\r\n const clearReferredOrderValues = () => {\r\n localStorage.removeItem('newBookingOrderNumber')\r\n localStorage.removeItem('newBookingOrderNumberSplit')\r\n localStorage.removeItem('newBookingBuyerCode')\r\n localStorage.removeItem('newBookingClientCode')\r\n localStorage.removeItem('consolidatedOrderData')\r\n localStorage.removeItem('bookingOrdersData')\r\n }\r\n\r\n const fieldPanelMapping = [\r\n {\r\n field: 'clientId',\r\n panel: 'panel1'\r\n },\r\n {\r\n field: 'clientReferenceNumber',\r\n panel: 'panel3'\r\n },\r\n {\r\n field: 'transportModeCode',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'incoTermsCode',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'commodityCode',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'containerTypeCode',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'serviceLevelCode',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'goodsDescription',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'piecesCount',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'piecesUOM',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'weight',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'weightUOM',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'volume',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'volumeUOM',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'consignor',\r\n panel: 'panel4'\r\n },\r\n {\r\n field: 'consignee',\r\n panel: 'panel5'\r\n },\r\n {\r\n field: 'cargoReadyDate',\r\n panel: 'panel7'\r\n },\r\n {\r\n field: 'originUNLOCOCode',\r\n panel: 'panel6'\r\n },\r\n {\r\n field: 'destinationUNLOCOCode',\r\n panel: 'panel6'\r\n }\r\n ]\r\n\r\n const contactsAreEqual = () => {\r\n const consignor = getValues('consignor')\r\n const consignee = getValues('consignee')\r\n if (consignor !== undefined && consignee !== undefined) {\r\n if (\r\n consignor.addressLine1 === consignee.addressLine1 &&\r\n consignor.city === consignee.city &&\r\n consignor.zipCode === consignee.zipCode &&\r\n consignor.state === consignee.state &&\r\n consignor.countryCode === consignee.countryCode\r\n ) {\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n\r\n const shipmentIdKey = () => {\r\n return key + '.shipmentId'\r\n }\r\n\r\n const handleSetIsConsignor = (event, newValue) => {\r\n const clientId = getValues('clientId')\r\n if (clientId) {\r\n const client = clients.find(c => c.id === clientId)\r\n if (client) {\r\n setClientAddresses(client, newValue)\r\n }\r\n }\r\n setIsConsignor(newValue)\r\n searchAddresses('', newValue, true).then(searchedAddresses => {\r\n // something\r\n })\r\n }\r\n\r\n const setDataTypes = data => {\r\n const values1 = data.filter(\r\n item => item.propertyType === 'TRANSPORT_MODE'\r\n )\r\n if (values1.length > 0) {\r\n setTransportModes(values1.filter(item => item.isAvailable === true))\r\n const defaultTransportMode = values1.filter(\r\n item => item.isDefault === true\r\n )\r\n if (defaultTransportMode.length > 0) {\r\n setValue(\r\n 'transportModeCode',\r\n defaultTransportMode[0].propertyKey\r\n )\r\n }\r\n }\r\n\r\n const values2 = data.filter(item => item.propertyType === 'INCO_TERMS')\r\n if (values2.length > 0) {\r\n setIncoTerms(values2.filter(item => item.isAvailable === true))\r\n const defaultIncoTerms = values2.filter(\r\n item => item.isDefault === true\r\n )\r\n if (defaultIncoTerms.length > 0) {\r\n setValue('incoTermsCode', defaultIncoTerms[0].propertyKey)\r\n }\r\n }\r\n\r\n const values3 = data.filter(item => item.propertyType === 'COMMODITY')\r\n if (values3.length > 0) {\r\n setCommodities(values3.filter(item => item.isAvailable === true))\r\n const defaultCommodity = values3.filter(\r\n item => item.isDefault === true\r\n )\r\n if (defaultCommodity.length > 0) {\r\n setValue('commodityCode', defaultCommodity[0].propertyKey)\r\n }\r\n }\r\n\r\n const values4 = data.filter(\r\n item => item.propertyType === 'CONTAINER_TYPE_MODE'\r\n )\r\n if (values4.length > 0) {\r\n setContainerModes(values4.filter(item => item.isAvailable === true))\r\n const defaultContainerMode = values4.filter(\r\n item => item.isDefault === true\r\n )\r\n if (defaultContainerMode.length > 0) {\r\n setValue(\r\n 'containerTypeCode',\r\n defaultContainerMode[0].propertyKey\r\n )\r\n }\r\n }\r\n\r\n const values5 = data.filter(\r\n item => item.propertyType === 'SERVICE_LEVEL'\r\n )\r\n if (values5.length > 0) {\r\n setServiceLevels(values5.filter(item => item.isAvailable === true))\r\n const defaultServiceLevel = values5.filter(\r\n item => item.isDefault === true\r\n )\r\n if (defaultServiceLevel.length > 0) {\r\n setValue('serviceLevelCode', defaultServiceLevel[0].propertyKey)\r\n }\r\n }\r\n\r\n const values6 = data.filter(item => item.propertyType === 'PIECES_UOM')\r\n if (values6.length > 0) {\r\n setPieceUnits(values6.filter(item => item.isAvailable === true))\r\n const defaultPiecesUOM = values6.filter(\r\n item => item.isDefault === true\r\n )\r\n if (defaultPiecesUOM.length > 0) {\r\n setValue('piecesUOM', defaultPiecesUOM[0].propertyKey)\r\n }\r\n }\r\n\r\n const values7 = data.filter(item => item.propertyType === 'WEIGHT_UOM')\r\n if (values7.length > 0) {\r\n setWeightUnits(values7.filter(item => item.isAvailable === true))\r\n const defaultWeightUOM = values7.filter(\r\n item => item.isDefault === true\r\n )\r\n if (defaultWeightUOM.length > 0) {\r\n setValue('weightUOM', defaultWeightUOM[0].propertyKey)\r\n }\r\n }\r\n\r\n const values8 = data.filter(item => item.propertyType === 'VOLUME_UOM')\r\n if (values8.length > 0) {\r\n setVolumeUnits(values8.filter(item => item.isAvailable === true))\r\n const defaultVolumeUOM = values8.filter(\r\n item => item.isDefault === true\r\n )\r\n if (defaultVolumeUOM.length > 0) {\r\n setValue('volumeUOM', defaultVolumeUOM[0].propertyKey)\r\n }\r\n }\r\n }\r\n\r\n const prepareData = data => {\r\n const newData = _.clone(_.omitBy(data, _.isNil))\r\n newData['originUNLOCOCode'] = originUNLOCOCodeObject?.unloco\r\n newData['destinationUNLOCOCode'] = destinationUNLOCOCodeObject?.unloco\r\n newData['piecesCount'] = parseInt(data.piecesCount)\r\n newData['weight'] = parseFloat(data.weight)\r\n newData['volume'] = parseFloat(data.volume)\r\n newData['organizationId'] = organizationId\r\n newData['controllingCustomerCode'] = controllingCustomerCode\r\n\r\n const newConsignor = _.clone(data.consignor)\r\n newConsignor['addressType'] = 'PIC'\r\n\r\n const newConsignee = _.clone(data.consignee)\r\n newConsignee['addressType'] = 'DLV'\r\n\r\n newData['contacts'] = [newConsignor, newConsignee]\r\n newData['linkedOrders'] = consolidatedOrderList\r\n return newData\r\n }\r\n\r\n const handleFormSubmit = data => {\r\n setIsSubmitting(true);\r\n if (contactsAreEqual()) {\r\n setBookingAlert({\r\n open: true,\r\n success: false,\r\n message: 'Consignor and consignee addresses are the same.'\r\n });\r\n setIsSubmitting(false);\r\n } else {\r\n const preparedData = prepareData(data)\r\n saveShipmentData(preparedData)\r\n }\r\n }\r\n\r\n const handleInvalidFormSubmit = errors => {\r\n let panels = []\r\n for (const error in errors) {\r\n // get the panel name for the field\r\n const panel = fieldPanelMapping.find(f => f.field === error)?.panel\r\n if (panel && !panels.includes(panel)) {\r\n panels.push(panel)\r\n }\r\n }\r\n setExpandedPanels(panels)\r\n }\r\n\r\n const handleCloseAlert = () => {\r\n setBookingAlert({\r\n open: false,\r\n success: false,\r\n message: ''\r\n })\r\n }\r\n\r\n const handleCloseOrderAlert = () => {\r\n setOrderAlert({\r\n open: false,\r\n success: false,\r\n message: ''\r\n })\r\n }\r\n\r\n const handleCloseReferredOrderAlert = () => {\r\n setReferredOrderAlert({\r\n open: false,\r\n success: false,\r\n message: ''\r\n })\r\n }\r\n\r\n const updateAddressInfo = data => {\r\n if (data === null) {\r\n return\r\n }\r\n\r\n const key = !isConsignor ? 'consignor' : 'consignee'\r\n\r\n setValue(`${key}.name`, data.name)\r\n setValue(`${key}.portCode`, data.portCode)\r\n setValue(`${key}.addressLine1`, data.addressLine1)\r\n setValue(`${key}.city`, data.city)\r\n setValue(`${key}.state`, data.state)\r\n setValue(`${key}.countryCode`, data.countryCode)\r\n setValue(`${key}.zipCode`, data.zipCode)\r\n setValue(`${key}.clientBuyerSupplierCode`, data.orgCode)\r\n setselectedAddressForeignKey(data.psaClientBuyerSupplierFK)\r\n setControllingCustomerCode(data.controllingCustomerCode)\r\n }\r\n\r\n const updateAddressInfoFromSelection = (data, sourceParty) => {\r\n if (data === null) {\r\n return\r\n }\r\n\r\n setValue(`${sourceParty}.name`, data.name)\r\n setValue(`${sourceParty}.portCode`, data.portCode)\r\n setValue(`${sourceParty}.addressLine1`, data.addressLine1)\r\n setValue(`${sourceParty}.city`, data.city)\r\n setValue(`${sourceParty}.state`, data.state)\r\n setValue(`${sourceParty}.countryCode`, data.countryCode)\r\n setValue(`${sourceParty}.zipCode`, data.zipCode)\r\n setValue(`${sourceParty}.clientBuyerSupplierCode`, data.orgCode)\r\n }\r\n\r\n const renderBookingAlert = () => {\r\n return bookingAlert.open ? (\r\n \r\n
handleCloseAlert()}\r\n />\r\n \r\n {errors[name].message}\r\n
\r\n )}\r\n {customKey !== undefined &&\r\n customSubKey !== undefined &&\r\n customKey !== null &&\r\n customSubKey !== null &&\r\n errors[customKey] &&\r\n errors[customKey][customSubKey] && (\r\n \r\n {errors[customKey][customSubKey].message}\r\n
\r\n )}\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n const getCargoReadyDate = currentorg => {\r\n if (orgViewCode === 901) {\r\n return (\r\n \r\n {renderDatePicker(\r\n 'cargoReadyDate',\r\n 'Cargo Ready Date',\r\n currentorg,\r\n true\r\n )}\r\n \r\n )\r\n }\r\n return null\r\n }\r\n\r\n const renderDateSelectors = currentorg => {\r\n switch (orgViewCode) {\r\n case 931:\r\n return renderDateSelectors931(currentorg)\r\n default:\r\n return renderDateSelectorsDefault(currentorg)\r\n }\r\n }\r\n\r\n const renderDateSelectorsDefault = currentorg => {\r\n return (\r\n \r\n \r\n {renderDatePicker(\r\n 'requiredPickup',\r\n 'Required Pickup',\r\n currentorg\r\n )}\r\n \r\n \r\n {renderDatePicker(\r\n 'requiredETD',\r\n 'Required ETD',\r\n currentorg\r\n )}\r\n \r\n \r\n {renderDatePicker(\r\n 'requiredETA',\r\n 'Required ETA',\r\n currentorg\r\n )}\r\n \r\n \r\n {renderDatePicker(\r\n 'requestedDelivery',\r\n 'Requested Delivery',\r\n currentorg\r\n )}\r\n \r\n {getCargoReadyDate(currentorg)}\r\n \r\n )\r\n }\r\n\r\n const renderDateSelectors931 = currentorg => {\r\n return (\r\n \r\n \r\n {renderDatePicker(\r\n 'requiredPickup',\r\n 'Cargo Ready Date',\r\n currentorg\r\n )}\r\n \r\n \r\n )\r\n }\r\n\r\n const setClientAddresses = (client, isConsignor) => {\r\n const setKey = isConsignor ? 'consignor' : 'consignee'\r\n const clearKey = isConsignor ? 'consignee' : 'consignor'\r\n\r\n setValue(`${setKey}.name`, client.name)\r\n setValue(`${setKey}.addressLine1`, client.contactAddressLine1)\r\n setValue(`${setKey}.city`, client.contactAddressCity)\r\n setValue(`${setKey}.state`, client.contactAddressRegion)\r\n setValue(`${setKey}.countryCode`, client.contactAddressCountryCode)\r\n setValue(`${setKey}.zipCode`, client.contactAddressZipCode)\r\n setValue(\r\n `${setKey}.clientBuyerSupplierCode`,\r\n client.integrationCompanyCode\r\n )\r\n\r\n setValue(`${clearKey}.name`, '')\r\n setValue(`${clearKey}.addressLine1`, '')\r\n setValue(`${clearKey}.city`, '')\r\n setValue(`${clearKey}.state`, '')\r\n setValue(`${clearKey}.countryCode`, '')\r\n setValue(`${clearKey}.zipCode`, '')\r\n setValue(`${clearKey}.clientBuyerSupplierCode`, '')\r\n }\r\n\r\n const setBookingDetailsFromOrder = async order => {\r\n if (order === null) {\r\n return\r\n }\r\n\r\n setValue('orderReferenceNumber', order.orderNumber)\r\n setValue('transportModeCode', order.orderTransportMode)\r\n setValue('containerTypeCode', order.containerMode)\r\n setValue('incoTermsCode', order.incoTerms)\r\n setValue('serviceLevelCode', order.serviceLevel)\r\n setValue('commodityCode', '') // not available in order\r\n setValue('goodsDescription', order.goodsDescription)\r\n\r\n setValue('piecesCount', order.packs)\r\n setValue('piecesUOM', order.packType)\r\n setValue('weight', order.weight)\r\n setValue('weightUOM', order.weightUOM)\r\n setValue('volume', order.volume)\r\n setValue('volumeUOM', order.volumeUOM)\r\n\r\n if (order.origin !== null) {\r\n getLocationByUNLOCO(order.origin, async data => {\r\n const codeArray = [data]\r\n setOriginUnlocoCodes(codeArray)\r\n if (codeArray.length > 0) {\r\n setOriginUNLOCOCodeObject(codeArray[0])\r\n setValue('originUNLOCOCode', codeArray[0])\r\n }\r\n })\r\n }\r\n\r\n if (order.destination !== null) {\r\n getLocationByUNLOCO(order.destination, async data => {\r\n const codeArray = [data]\r\n setDestinationUnlocoCodes(codeArray)\r\n if (codeArray.length > 0) {\r\n setDestinationUNLOCOCodeObject(codeArray[0])\r\n setValue('destinationUNLOCOCode', codeArray[0])\r\n }\r\n })\r\n }\r\n\r\n setValue(\r\n 'requiredETD',\r\n order.dateDepartEst ? order.dateDepartEst : null\r\n )\r\n setValue(\r\n 'requiredETA',\r\n order.dateArriveEst ? order.dateArriveEst : null\r\n )\r\n setValue(\r\n 'requestedDelivery',\r\n order.dateDeliveredEst ? order.dateDeliveredEst : null\r\n )\r\n setValue('requiredPickup', null)\r\n }\r\n\r\n const handleSelectChange = (e, name) => {\r\n if (name === 'clientId') {\r\n const client = clients.find(c => c.id === e.target.value)\r\n setClientAddresses(client, isConsignor)\r\n // clear consignee address\r\n setAddresses([])\r\n setFilteredAddresses([])\r\n setOrgConsigneeAddresses([])\r\n setFilteredOrgConsigneeAddresses([])\r\n setOrgConsignorAddresses([])\r\n setFilteredOrgConsignorAddresses([])\r\n searchAddresses('', isConsignor, true).then(searchedAddresses => {\r\n // something\r\n })\r\n setCurrentClient(client)\r\n }\r\n }\r\n\r\n const renderSelect = (\r\n label,\r\n name,\r\n data,\r\n keyValue = 'key',\r\n valueKey = 'value',\r\n showKeyInValue = false\r\n ) => {\r\n return (\r\n \r\n {label}\r\n (\r\n {\r\n onChange(e)\r\n handleSelectChange(e, name)\r\n }}\r\n value={value ? value : ''}\r\n name={name}\r\n input={}\r\n readOnly={isReadOnly && ['transportModeCode', 'incoTermsCode', 'serviceLevelCode'].includes(name)}\r\n >\r\n {data.map(option => (\r\n \r\n {showKeyInValue\r\n ? `${option[keyValue]} - ${option[valueKey]}`\r\n : option[valueKey]}\r\n \r\n ))}\r\n \r\n )}\r\n />\r\n {errors[name] && (\r\n \r\n {errors[name].message}\r\n
\r\n )}\r\n \r\n )\r\n }\r\n\r\n const renderAutocomplete = (\r\n data,\r\n passedValue,\r\n label,\r\n name,\r\n selectChangeCallback = () => {},\r\n textChangeCallback = () => {}\r\n ) => {\r\n return (\r\n \r\n {label}\r\n (\r\n {\r\n return option.unLoco === value.unLoco\r\n }}\r\n onChange={(e, value) => {\r\n onChange(value)\r\n selectChangeCallback(e, value)\r\n }}\r\n getOptionLabel={option =>\r\n option\r\n ? option.unloco + ' - ' + option.portName\r\n : ''\r\n }\r\n options={data}\r\n loading={false}\r\n renderInput={params => (\r\n \r\n )}\r\n />\r\n )}\r\n />\r\n {errors[name] && (\r\n \r\n {errors[name].message}\r\n
\r\n )}\r\n \r\n )\r\n }\r\n\r\n const renderTitle = (title, width = 12) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {title}\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n\r\n const renderUnitSection = (key, selectKey, data) => {\r\n const cKey = voca.capitalize(key)\r\n return (\r\n \r\n
\r\n \r\n {renderInput(cKey, key)}
\r\n \r\n \r\n \r\n {renderSelect(\r\n `${cKey} Unit`,\r\n selectKey,\r\n data,\r\n 'propertyKey',\r\n 'value',\r\n true\r\n )}\r\n
\r\n \r\n \r\n
\r\n
\r\n (\r\n {\r\n onChange(e)\r\n setValue(\r\n name,\r\n dateFns.format(e, 'YYYY-MM-DD')\r\n )\r\n }}\r\n />\r\n )}\r\n />\r\n \r\n\r\n {errors[name] && (\r\n
\r\n {errors[name].message}\r\n
\r\n )}\r\n
\r\n
\r\n {renderReferredOrderAlert()}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n }\r\n >\r\n \r\n {' '}\r\n \r\n {renderTitle(\r\n 'Client'\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {renderSelect(\r\n 'Client',\r\n 'clientId',\r\n clients,\r\n 'id',\r\n 'name'\r\n )}\r\n \r\n \r\n {!isReadOnly && (\r\n \r\n \r\n Consignor\r\n \r\n \r\n Consignee\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n