\r\n {icon}\r\n\r\n {/* Wrap string and fragments in CardHeaderTitle */\r\n typeof title === \"string\" || isFragment(title) ? (\r\n {title} \r\n ) : (\r\n title\r\n )}\r\n
\r\n )}\r\n\r\n {toolbar}\r\n {children}\r\n \r\n );\r\n }\r\n);\r\n\r\nexport const CardBody = forwardRef(\r\n ({ fit, fluid, className, ...props }, ref) => (\r\n \r\n \r\n {languages[0].code}\r\n \r\n
\r\n \r\n )}\r\n {languages.length > 1 && (\r\n <>\r\n \r\n {languages.map((lang, index) => (\r\n \r\n \r\n \r\n {lang.code}\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","/* eslint-disable no-script-url,jsx-a11y/anchor-is-valid */\r\nimport React, {useState, useEffect} from \"react\";\r\nimport {KTCodeBlock} from \"./KTCodeBlock\";\r\nimport {Card, CardBody, CardHeader} from \"../Card\";\r\nimport {CodeBlockToolbar} from \"../code-examples/CodeBlockToolbar\";\r\n\r\nexport function KTCodeExample({\r\n jsCode,\r\n children,\r\n beforeCodeTitle,\r\n languages,\r\n codeBlockHeight\r\n}) {\r\n const defaultLanguages = !languages\r\n ? [\r\n {\r\n code: jsCode,\r\n language: \"javascript\",\r\n shortCode: \"JS\"\r\n }\r\n ]\r\n : languages;\r\n const [isCodeBlockShown, setIsCodeBlockShown] = useState(false);\r\n const [tabId, setTabId] = useState(0);\r\n const [customStyle, setCustomStyle] = useState({});\r\n useEffect(() => {\r\n const styles = {};\r\n\r\n if (codeBlockHeight) {\r\n styles.height = codeBlockHeight;\r\n styles.overflowX = \"auto\";\r\n }\r\n\r\n if (defaultLanguages.length > 1) {\r\n styles.background = `none transparent !important`;\r\n }\r\n\r\n setCustomStyle(styles);\r\n }, [codeBlockHeight, defaultLanguages.length]);\r\n\r\n const toolbar = (\r\n \r\n
\r\n );\r\n\r\n return (\r\n \r\n
\r\n \r\n {errors[field.name].toString()}\r\n
\r\n ) : (\r\n \r\n Please enter {props.label} in 'mm/dd/yyyy' format\r\n
\r\n )}\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\n\r\nconst inputLabel = ({ label, touched, error, customFeedbackLabel }) => {\r\n if (touched && error) {\r\n return {error}
;\r\n }\r\n\r\n if (touched && !error && label) {\r\n return {label} was entered correct
;\r\n }\r\n\r\n return (\r\n \r\n {customFeedbackLabel && <>{customFeedbackLabel}}\r\n {!customFeedbackLabel && (\r\n <>\r\n Please enter {label}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nconst selectLabel = ({ label, touched, error, customFeedbackLabel }) => {\r\n if (touched && error) {\r\n return {error}
;\r\n }\r\n\r\n return (\r\n \r\n {customFeedbackLabel && <>{customFeedbackLabel}}\r\n {!customFeedbackLabel && label && (\r\n <>\r\n Please select {label}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport function FieldFeedbackLabel({\r\n label,\r\n touched,\r\n error,\r\n type,\r\n customFeedbackLabel\r\n}) {\r\n switch (type) {\r\n case \"text\":\r\n return inputLabel({ label, touched, error, customFeedbackLabel });\r\n case \"email\":\r\n return inputLabel({ label, touched, error, customFeedbackLabel });\r\n case \"password\":\r\n return inputLabel({ label, touched, error, customFeedbackLabel });\r\n default:\r\n return selectLabel({ label, touched, error, customFeedbackLabel });\r\n }\r\n}\r\n","import React from \"react\";\r\nimport {FieldFeedbackLabel} from \"./FieldFeedbackLabel\";\r\n\r\nconst getFieldCSSClasses = (touched, errors) => {\r\n const classes = [\"form-control\"];\r\n if (touched && errors) {\r\n classes.push(\"is-invalid\");\r\n }\r\n\r\n if (touched && !errors) {\r\n classes.push(\"is-valid\");\r\n }\r\n\r\n return classes.join(\" \");\r\n};\r\n\r\nexport function Input({\r\n field, // { name, value, onChange, onBlur }\r\n form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.\r\n label,\r\n withFeedbackLabel = true,\r\n customFeedbackLabel,\r\n type = \"text\",\r\n ...props\r\n}) {\r\n return (\r\n <>\r\n {label && }\r\n \r\n handleFirstPage(paginationProps)}\r\n className=\"btn btn-icon btn-sm btn-light btn-hover-primary mr-2 my-1\"\r\n >\r\n \r\n \r\n handlePrevPage(paginationProps)}\r\n className=\"btn btn-icon btn-sm btn-light btn-hover-primary mr-2 my-1\"\r\n >\r\n \r\n \r\n\r\n {page > 1 && (\r\n \r\n ...\r\n \r\n )}\r\n {pages.map((p) => (\r\n handleSelectedPage(paginationProps, p)}\r\n className={`btn btn-icon btn-sm border-0 btn-light ${\r\n page === p ? \" btn-hover-primary active\" : \"\"\r\n } mr-2 my-1`}\r\n >\r\n {p}\r\n \r\n ))}\r\n {page < pagesCount && (\r\n \r\n ...\r\n \r\n )}\r\n handleNextPage(paginationProps)}\r\n className=\"btn btn-icon btn-sm btn-light btn-hover-primary mr-2 my-1\"\r\n >\r\n \r\n \r\n handleLastPage(paginationProps)}\r\n className=\"btn btn-icon btn-sm btn-light btn-hover-primary mr-2 my-1\"\r\n >\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React from \"react\";\r\nimport {PaginationTotalStandalone} from \"react-bootstrap-table2-paginator\";\r\n\r\nexport function PaginationToolbar(props) {\r\n const { isLoading, paginationProps } = props;\r\n const {\r\n sizePerPageList,\r\n sizePerPage,\r\n totalSize,\r\n onSizePerPageChange = [\r\n { text: \"3\", value: 3 },\r\n { text: \"5\", value: 5 },\r\n { text: \"10\", value: 10 }\r\n ]\r\n } = paginationProps;\r\n const style = {\r\n width: \"75px\"\r\n };\r\n\r\n const onSizeChange = event => {\r\n const newSize = +event.target.value;\r\n onSizePerPageChange(newSize);\r\n };\r\n\r\n return (\r\n \r\n {isLoading && (\r\n \r\n {sizePerPageList.map(option => {\r\n const isSelect = sizePerPage === `${option.page}`;\r\n return (\r\n \r\n {option.text}\r\n \r\n );\r\n })}\r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport {PaginationLinks} from \"./PaginationLinks\";\r\nimport {PaginationToolbar} from \"./PaginationToolbar\";\r\n\r\nexport function Pagination(props) {\r\n const { children, isLoading, paginationProps } = props;\r\n return (\r\n <>\r\n {children}\r\n \r\n
\r\n )}\r\n Loading...
\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport {withRouter} from \"react-router-dom\";\r\nimport {ProgressBar} from \"react-bootstrap\";\r\n\r\n// TODO: Should be rewrited to pure function\r\nclass AnimateLoading extends React.Component {\r\n animateTimeout;\r\n stopAnimateTimeout;\r\n state = {\r\n width: 0,\r\n routeChanged: false\r\n };\r\n\r\n componentDidUpdate(nextProps) {\r\n if (this.props.location.pathname !== nextProps.location.pathname) {\r\n this.animate();\r\n this.scrollToTop();\r\n }\r\n }\r\n\r\n scrollToTop() {\r\n const scrollToTopBtn = document.getElementById(\"kt_scrolltop\");\r\n if (scrollToTopBtn) {\r\n scrollToTopBtn.click();\r\n }\r\n }\r\n\r\n animate() {\r\n this.animateTimeout = setTimeout(() => {\r\n if (this.state.width <= 100) {\r\n this.setState({ width: this.state.width + 10 });\r\n this.animate();\r\n } else {\r\n this.stopAnimate();\r\n }\r\n }, 30);\r\n }\r\n stopAnimate() {\r\n clearTimeout(this.animateInterval);\r\n this.stopAnimateTimeout = setTimeout(() => {\r\n this.setState({ width: 0 });\r\n }, 300);\r\n }\r\n componentWillUnmount() {\r\n if (this.stopAnimateTimeout) {\r\n clearTimeout(this.stopAnimateTimeout);\r\n }\r\n if (this.animateTimeout) {\r\n clearTimeout(this.animateTimeout);\r\n }\r\n }\r\n render() {\r\n return (\r\n {text}
\r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n {children}\r\n
\r\n \r\n );\r\n }\r\n);\r\n\r\n// Set display name for debugging.\r\nif (process.env.NODE_ENV !== \"production\") {\r\n Notice.displayName = \"Notice\";\r\n}\r\n","import React from \"react\";\r\nimport { ProgressBar } from \"react-bootstrap\";\r\n\r\nexport function ModalProgressBar({variant = \"success\"}) {\r\n return (\r\n \r\n The layout builder is to assist your set and configure your preferred project layout specifications\r\n and preview it in real time.\r\n The configured layout options will be saved until you change or reset them.\r\n To use the layout builder, choose the layout options and click the Preview button to\r\n preview the changes and click the Export button to download the HTML template with its\r\n includable partials of this demo.\r\n In the downloaded folder the partials(header, footer, aside, topbar, etc) will be placed seperated\r\n from the base layout to allow you to integrate base layout into your application\r\n
\r\n NOTE:\r\n The downloaded version does not include the assets folder since the layout builder's main purpose is\r\n to\r\n help to generate the final HTML code without hassle.\r\n
\r\n\r\n {/*Header*/}\r\n
\r\n\r\n {/*Config*/}\r\n \r\n \r\n \r\n {\r\n setKey(0);\r\n saveCurrentTab(0);\r\n }}\r\n >\r\n Header\r\n \r\n \r\n \r\n {\r\n setKey(1);\r\n saveCurrentTab(1);\r\n }}\r\n >\r\n Subheader\r\n \r\n \r\n \r\n {\r\n setKey(2);\r\n saveCurrentTab(2);\r\n }}\r\n >\r\n Content\r\n \r\n \r\n \r\n {\r\n setKey(3);\r\n saveCurrentTab(3);\r\n }}\r\n >\r\n Aside\r\n \r\n \r\n \r\n {\r\n setKey(4);\r\n saveCurrentTab(4);\r\n }}\r\n >\r\n Footer\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 Enable fixed header for mobile mode\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n Enable fixed header for mobile mode\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 Select header width type\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n Display header menu \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Select header menu layout style\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Enable header menu root link arrows\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n Display subheader\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n Enable fixed(sticky) subheader. Requires{\" \"}\r\n \r\n
\r\n Solid subheader style.\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Select layout width type\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 Select subheader style\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 Select layout width type\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n Display aside \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n Set fixed aside layout\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n Allow aside minimizing\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n Expand Minimized Aside on hover\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n Set aside minimized by default\r\n \r\n
\r\n \r\n \r\n Submenu Toggle:\r\n \r\n
\r\n\r\n \r\n \r\n Select submenu toggle mode (works only when{\" \"}\r\n \r\n
\r\n Fixed Mode is disabled)\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n Set fixed desktop footer \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Select layout width type\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Preview\r\n \r\n {\" \"}\r\n \r\n Reset\r\n \r\n {\" \"}\r\n
\r\n /src/_metronic/layout/LayoutConfig.js\r\n \r\n \r\n }\r\n />\r\n\r\n \r\n {cf.format('ShipmentStatus', shipment.status, intl.locale)}\r\n
\r\n
\r\n {shipment.freightType &&
\r\n Freight Type
{cf.format('FreightType', shipment.freightType, intl.locale)}
}\r\n {shipment.serviceType && {cf.format('FreightType', shipment.freightType, intl.locale)}
Service Type
{cf.format('ServiceType', shipment.serviceType, intl.locale)}
}\r\n\r\n {shipment.cargoReadyOn && {cf.format('ServiceType', shipment.serviceType, intl.locale)}
Cargo Ready
{moment(shipment.cargoReadyOn).format('ll')}
}\r\n {shipment.originPickupOn && {moment(shipment.cargoReadyOn).format('ll')}
Picked Up
{moment(shipment.originPickupOn).format('ll')}
}\r\n\r\n {shipment.deliveredOn && {moment(shipment.originPickupOn).format('ll')}
Delivered
{moment(shipment.deliveredOn).format('ll')}
}\r\n {(!shipment.originPickupOn && shipment.estimatedOriginPickupOn) && {moment(shipment.deliveredOn).format('ll')}
Est.Pickup
{moment(shipment.estimatedOriginPickupOn).format('ll')}
}\r\n {(!shipment.deliveredOn && shipment.estimatedDeliveredOn) && {moment(shipment.estimatedOriginPickupOn).format('ll')}
Est.Delivery
{moment(shipment.estimatedDeliveredOn).format('ll')}
}\r\n {shipment.plannedTotalWeight && {moment(shipment.estimatedDeliveredOn).format('ll')}
Plan.Weight
{shipment.plannedTotalWeight}
}\r\n {shipment.plannedTotalVolume && {shipment.plannedTotalWeight}
Plan.Volume
{shipment.plannedTotalVolume}
}\r\n\r\n\r\n {shipment.plannedTotalVolume}
\r\n {shipmentList && shipmentList.length != 0 && \r\n\r\n \r\n\r\n {stableSort(shipmentList, getSorting(order, orderBy))\r\n .slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n \r\n history.push('/shipment/' + row.id)} component=\"th\" id={labelId} scope=\"row\" padding=\"none\">\r\n {row.description ? row.description : <>{intl.formatMessage({ id: \"NO_NAME\" })} }\r\n \r\n history.push('/shipment/' + row.id)} align=\"center\">{cf.format('ShipmentStatus', row.status, intl.locale)} \r\n history.push('/shipment/' + row.id)} align=\"center\">{cf.format('FreightMode', row.mode, intl.locale)} \r\n history.push('/shipment/' + row.id)} align=\"center\">{row.originPickupOn ? '' : <>{intl.formatMessage({ id: \"ESTIMATED\" })}
}{row.originPickupOn ? row.originPickupOn : row.estimatedOriginPickupOn} \r\n {/* history.push('/shipment/' + row.id)} align=\"center\">{row.deliveredOn ? '' : <>{intl.formatMessage({ id: \"ESTIMATED\" })}
}{row.deliveredOn ? row.deliveredOn : row.estimatedDeliveredOn} */}\r\n\r\n \r\n );\r\n })}\r\n\r\n \r\n }\r\n {shipmentList == 0 && !isLoading &&
\r\n \r\n}\r\n\r\nexport default SimpleShipmentList;","import React, { useState, useEffect } from \"react\";\r\nimport cf from '../../../services/codeformatter';\r\nimport { useIntl } from 'react-intl';\r\nimport { FlitServiceContext } from \"../../../services/flitService\";\r\nimport FullCalendar, { formatDate } from '@fullcalendar/react';\r\nimport dayGridPlugin from '@fullcalendar/daygrid';\r\nimport { useHistory } from 'react-router-dom';\r\nimport moment from 'moment-timezone';\r\n\r\nfunction ShipmentCalendar(props) {\r\n const history = useHistory();\r\n const intl = useIntl();\r\n const { activeShipments, deliveredShipments } = props;\r\n const [eventList,setEventList] = React.useState([]);\r\n\r\n useEffect(() => {\r\n var list = [];\r\n if (activeShipments) list = list.concat(activeShipments);\r\n if (deliveredShipments) list = list.concat(deliveredShipments);\r\n\r\n var events = [];\r\n\r\n list.map(item=> {\r\n events.push({\r\n id: item.id,\r\n title:intl.formatMessage({ id: \"PICKUP\" }),\r\n start:moment().format(item.originPickupOn ? item.originPickupOn : item.estimatedOriginPickupOn,'YYYY-MM-DD'),\r\n backgroundColor: \"#FFA800\",\r\n borderColor:\"#FFA800\",\r\n allDay:true,\r\n url:'/shipment/'+item.id\r\n });\r\n events.push({\r\n id: item.id,\r\n title:intl.formatMessage({ id: \"DELIVERY\" }),\r\n start:moment().format(item.deliveredOn ? item.deliveredOn : item.estimatedDeliveredOn,'YYYY-MM-DD'),\r\n allDay:true,\r\n url:'/shipment/'+item.id\r\n });\r\n });\r\n \r\n setEventList(events);\r\n}, [activeShipments, deliveredShipments]);\r\n\r\n return (\r\n }
}
\r\n
\r\n\r\n
}\r\n {!isLoading && {intl.formatMessage({ id: \"NO_SHIPMENTS_TO_DISPLAY\" })}
\r\n\r\n
{intl.formatMessage({ id: \"NO_ACTIVE_REQUEST\" })}
\r\n \r\n\r\n {isLoading && \r\n \r\n \r\n \r\n {\r\n quoteRequestList.map((row, index) => {\r\n const isItemSelected = isSelected(row.id);\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n \r\n history.push('/quote/'+row.id)} component=\"th\" id={labelId} scope=\"row\" padding=\"none\" style={{maxWidth:\"100px\"}}>\r\n {row.description ? row.description : <>{intl.formatMessage({ id: \"QUOTE_REQUEST_ON\" })} {row.createdOn} }\r\n \r\n {\r\n if(row.status != QUOTE_REQUEST_STATUS.INSTANT_QUOTED) history.push('/quote/' + row.id);\r\n }} align=\"center\" style={{minWidth:\"140px\"}}>{row.status == QUOTE_REQUEST_STATUS.INSTANT_QUOTED && row.email == user.email ? : {row.totalWeightFormatted}
{row.totalVolumeFormatted}} \r\n history.push('/quote/'+row.id)} align=\"center\" style={{width:\"140px\"}}>{cf.format('QuoteRequestStatus',row.status,intl.locale)} \r\n history.push('/quote/'+row.id)} align=\"center\" style={{width:\"100px\"}}> {cf.format('FreightMode',row.mode,intl.locale)} \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n {!isLoading && {row.totalVolumeFormatted}}
\r\n {exceptionList && exceptionList.length != 0 && \r\n\r\n \r\n\r\n {stableSort(exceptionList, getSorting(order, orderBy))\r\n .slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n \r\n history.push('/exception/' + row.id)} align=\"center\">{row.type} \r\n history.push('/exception/' + row.id)} align=\"center\">{row.memo} \r\n history.push('/exception/' + row.id)} align=\"center\">{row.referenceNo} \r\n\r\n \r\n );\r\n })}\r\n\r\n \r\n }\r\n {exceptionList == 0 && !isLoading &&
\r\n \r\n}\r\n\r\nexport default SimpleExceptionList;","import React, { useContext, useState, useEffect } from \"react\";\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { useSelector } from \"react-redux\";\r\nimport { Row, Col, Button } from \"react-bootstrap\";\r\nimport Moment from 'react-moment';\r\nimport { Link, useParams } from \"react-router-dom\";\r\nimport cf from '../../services/codeformatter';\r\nimport { useIntl } from 'react-intl';\r\nimport { FlitServiceContext } from \"../../services/flitService\";\r\nimport { useSubheader } from './../../../_metronic/layout/_core/MetronicSubheader';\r\nimport { Card, CardHeader, CardBody } from \"../../../_metronic/_partials/controls\";\r\nimport { CardHeaderToolbar } from './../../../_metronic/_partials/controls/Card';\r\nimport { KTUtil } from '../../../_metronic/_assets/js/components/util';\r\nimport DashboardMap from './dashboard-map/DashboardMap';\r\nimport { Tabs, Tab, Chip } from \"@material-ui/core\";\r\nimport SimpleShipmentList from './simple-shipment-list/SimpleShipmentList';\r\nimport ShipmentCalendar from \"./shipment-calendar/ShipmentCalendar\";\r\nimport SimpleQuoteList from './simple-quote-list/SimpleQuoteList';\r\nimport HomeWorkIcon from '@material-ui/icons/HomeWork';\r\nimport HomeIcon from '@material-ui/icons/Home';\r\nimport FlightIcon from '@material-ui/icons/Flight';\r\nimport BusinessIcon from '@material-ui/icons/Business';\r\nimport LocalShippingIcon from '@material-ui/icons/LocalShipping';\r\nimport { ReactComponent as ShipIcon } from '../../assets/icons/ship_icon.svg';\r\nimport ViewColumnOutlinedIcon from '@material-ui/icons/ViewColumnOutlined';\r\nimport ErrorIcon from '@material-ui/icons/Error';\r\nimport DoneIcon from '@material-ui/icons/Done';\r\nimport AssignmentIcon from '@material-ui/icons/Assignment';\r\nimport { LinearProgress } from \"@material-ui/core\";\r\nimport moment from 'moment-timezone';\r\nimport { from, Observable, forkJoin } from 'rxjs';\r\nimport { LOCATION_TYPE, ROUTE_TYPE, SHIPMENT_STATUS } from '../../services/flitEnum';\r\nimport SimpleExceptionList from \"./simple-exception-list/SimpleExceptionList\";\r\nimport { QUOTE_REQUEST_STATUS } from './../../services/flitEnum';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: 'flex',\r\n justifyContent: 'end',\r\n flexWrap: 'wrap',\r\n '& > *': {\r\n margin: theme.spacing(0.5),\r\n },\r\n },\r\n}));\r\nfunction Dashboard(props) {\r\n const { user } = useSelector(state => state.auth);\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [tab1Value, setTab1Value] = React.useState(0);\r\n const [tab2Value, setTab2Value] = React.useState(0);\r\n const [showDelivered, setShowDelivered] = useState(true);\r\n const [showActiveShipments, setShowActiveShipments] = useState(true);\r\n const [showWithException, setShowWithException] = useState(true);\r\n const [activeShipmentList, setActiveShipmentList] = useState([]);\r\n const [deliveredShipmentList, setDeliveredShipmentList] = useState([]);\r\n const [withExceptionList, setWithExceptionList] = useState([]);\r\n const [activeQuoteCount, setActiveQuoteCount] = useState(0);\r\n const [activeInstantQuote,setActiveInstantQuote] = useState([]);\r\n const history = useHistory();\r\n\r\n const intl = useIntl();\r\n const subheader = useSubheader();\r\n const classes = useStyles();\r\n\r\n function handleTab1Change(event, newValue) {\r\n setTab1Value(newValue);\r\n }\r\n function handleTab2Change(event, newValue) {\r\n setTab2Value(newValue);\r\n }\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n var filterActiveShipment = [{ field: \"status\", operator: \"ne\", value: 'DELIVERED_IN_FULL' }, { field: \"status\", operator: \"ne\", value: 'DRAFT' }];\r\n var filterDeliveredShipment = [{ field: \"status\", operator: \"eq\", value: 'DELIVERED_IN_FULL' },\r\n { field: 'deliveredOn', operator: \"ge\", value: new Date(moment().subtract(30,'days').format('MM/DD/YYYY')) },\r\n { field: 'deliveredOn', operator: \"lt\", value: new Date(moment().add(1, 'days').format('MM/DD/YYYY')) }];\r\n var filterWithException = [{ raw: \"activity/exceptionalEvent/any(e:e/isResolved ne true)\" }];\r\n // 서버에서 권한체크를 하지만 operator의 경우 자기것이 아닌 instant quote가 끌려올 수 있기 때문에 수정\r\n var filterInstantQuote = [{raw: \"(status eq 'INSTANT_QUOTED' and (submittedById eq \" +user.id+ \" or email eq '\" + user.email +\"'))\"}];\r\n var filterActiveQuote = [{raw: \"(status eq 'INSTANT_QUOTED' or status eq 'SUBMITTED' or status eq 'IN_REVIEW' or status eq 'QUOTED')\"}];\r\n\r\n var reqActiveShipment = from(flitSvc.searchShipments(flitSvc.makeFilterString(filterActiveShipment), \"createdOn\"));\r\n var reqDeliveredShipment = from(flitSvc.searchShipments(flitSvc.makeFilterString(filterDeliveredShipment), \"createdOn\"));\r\n var reqWithException = from(flitSvc.searchShipments(flitSvc.makeFilterString(filterWithException), \"createdOn\"));\r\n var reqActiveQuoteCount = from(flitSvc.searchQuoteRequest(1,0,'submittedOn','desc',flitSvc.makeFilterString(filterActiveQuote)));\r\n var reqActiveInstantQuote = from(flitSvc.searchQuoteRequest(1,0,'submittedOn','desc',flitSvc.makeFilterString(filterInstantQuote)));\r\n\r\n forkJoin([reqActiveShipment,reqDeliveredShipment,reqWithException,reqActiveQuoteCount,reqActiveInstantQuote]).subscribe(res=> {\r\n setActiveShipmentList(res[0].data.filter(el => el.route && el.route.length > 0));\r\n refreshActiveShipment(res[0].data.filter(el => el.route && el.route.length > 0));\r\n setDeliveredShipmentList(res[1].data.filter(el => el.route && el.route.length > 0));\r\n setWithExceptionList(res[2].data.filter(el => el.route && el.route.length > 0));\r\n setActiveQuoteCount(res[3].data['@odata.count']);\r\n setActiveInstantQuote(res[4].data.value);\r\n setIsLoading(false);\r\n });\r\n\r\n }, []);\r\n\r\n const refreshActiveShipment = (shipments) => {\r\n var refreshRequests = [];\r\n shipments.map( el => {\r\n var currentRoute = el.route.find(r=> r.id == getCurrentRouteId(el.route));\r\n\r\n if (currentRoute.type == ROUTE_TYPE.FCL || currentRoute.type == ROUTE_TYPE.LCL || currentRoute.type == ROUTE_TYPE.AIR) {\r\n if (currentRoute.originDepartureOn && !currentRoute.destinationArrivalOn) {\r\n refreshRequests.push(from(flitSvc.refreshTracking(currentRoute.id)));\r\n }\r\n }\r\n });\r\n if (refreshRequests.length > 0) {\r\n forkJoin(refreshRequests).subscribe(res=> {\r\n var filterActiveShipment = [{ field: \"status\", operator: \"ne\", value: 'DELIVERED_IN_FULL' },{ field: \"status\", operator: \"ne\", value: 'DRAFT' }];\r\n flitSvc.searchShipments(flitSvc.makeFilterString(filterActiveShipment), \"createdOn\").then(({ data }) => {\r\n\r\n setActiveShipmentList(data.filter(el => el.route && el.route.length > 0));\r\n });\r\n });\r\n }\r\n\r\n }\r\n\r\n return <>\r\n \r\n
\r\n\r\n
}\r\n {!isLoading && No Exceptions
\r\n\r\n
\r\n {activeInstantQuote.length > 0 && \r\n {\r\n history.push('/quote/request/' + activeInstantQuote[0].id);\r\n }} icon={ {\r\n history.push('/quote/request');\r\n }} icon={ setShowWithException(!showWithException)} icon={ setShowDelivered(!showDelivered)} icon={ setShowActiveShipments(!showActiveShipments)} icon={
\r\n \r\n
\r\n }\r\n {tab2Value === 1 &&\r\n \r\n {option.id == \"noentity\"\r\n ? option.legalName\r\n : option.legalName}\r\n
\r\n )}\r\n paginationText={intl.formatMessage({\r\n id: \"SHOW_MORE_RESULTS\",\r\n })}\r\n useCache={false}\r\n ref = {businessEntityRef}\r\n />\r\n {intl.formatMessage({ id: \"NO_USERS_TO_DISPLAY\" })}
\r\n \r\n\r\n {isLoading && \r\n \r\n \r\n {userList.map((row) => {\r\n return (\r\n {\r\n openUserDialog(row.id)}}>\r\n \r\n {row.firstName}\r\n \r\n \r\n {row.lastName}\r\n \r\n \r\n {row.email}\r\n \r\n \r\n \r\n {row.isActive\r\n ? intl.formatMessage({ id: \"ACTIVE\" })\r\n : intl.formatMessage({ id: \"INACTIVE\" })}\r\n \r\n \r\n \r\n {row.userRole?.map((r) => (\r\n \r\n {cf.format(\"Roles\", r.role, intl.locale)}\r\n \r\n ))}\r\n \r\n \r\n {row.businessEntity\r\n ? row.businessEntity.legalName\r\n : \"-\"}\r\n \r\n \r\n {row.registrationChannel}\r\n \r\n \r\n {row.createdOn} \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n {!isLoading && (\r\n {fee?.feeTemplate?.[0]?.description}\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n {param.name}
\r\n ${param.value}
\r\n \r\n {numSelected > 0 ? (\r\n \r\n {numSelected} selected\r\n \r\n ) : (\r\n \r\n Quote Requests\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n \r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.IN_REVIEW, intl.locale)} }\r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.SUBMITTED, intl.locale)} }\r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.REJECTED, intl.locale)} }\r\n {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.CANCELLED, intl.locale)} \r\n {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.ARCHIVED, intl.locale)} \r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.DELETED, intl.locale)} }\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nQuoteRequestTableToolbar.propTypes = {\r\n numSelected: PropTypes.number.isRequired,\r\n changeStatus: PropTypes.func.isRequired,\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n root: {\r\n width: '100%',\r\n marginTop: theme.spacing(3),\r\n }, \r\n paper: {\r\n width: '100%',\r\n marginBottom: theme.spacing(2),\r\n },\r\n table: {\r\n minWidth: 500,\r\n },\r\n tableWrapper: {\r\n overflowX: 'auto',\r\n },\r\n}));\r\n\r\nfunction QuoteList(props) {\r\n //LayoutSubheader({ title: \"QuoteLists\" });\r\n const subheader = useSubheader();\r\n\r\n\r\n const { intl , history} = props;\r\n\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n\r\n const [quoteRequestList, setQuoteRequestList] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const {user} = useSelector(state => state.auth);\r\n\r\n const useQuery = () => new URLSearchParams(useLocation().search);\r\n var qPage = useQuery().get('page');\r\n var qRowsPerPage = useQuery().get('rowsPerPage');\r\n const [filter,setFilter] = useState({page: qPage ? +qPage : 0\r\n ,rowsPerPage:qRowsPerPage ? +qRowsPerPage : 5\r\n ,orderBy:useQuery().get('orderBy') ?? 'submittedOn'\r\n ,order:useQuery().get('order') ?? 'desc'\r\n ,status:useQuery().get('status') ?? ''\r\n ,freightMode:useQuery().get('freightMode') ?? ''\r\n ,nameOrEmail : useQuery().get('nameOrEmail') ?? ''})\r\n\r\n const classes = useStyles();\r\n const [selected, setSelected] = React.useState([]);\r\n const [dense, setDense] = React.useState(false);\r\n const [totalRows,setTotalRows] = React.useState(0);\r\n subheader.setTitle(intl.formatMessage({id:\"MENU.FORWARDING_QUOTE\"}));\r\n\r\n useEffect(() => {\r\n \r\n flitSvc.insertUrlParam(filter);\r\n refreshList();\r\n \r\n },[filter]); //set state calls are asynchronous (cannot call refreshList after setState)\r\n\r\n function refreshList() {\r\n setIsLoading(true);\r\n flitSvc.searchQuoteRequest(filter.rowsPerPage,filter.page * filter.rowsPerPage,filter.orderBy,filter.order, (filter.freightMode ? \"mode eq '\" + filter.freightMode + \"'\" : \"\" ) + (filter.freightMode ? \" and \" : \"\") \r\n + (filter.nameOrEmail ? \"(contains(email,'\" + filter.nameOrEmail + \"')) or (contains(submittedBy/firstName,'\"+ filter.nameOrEmail +\"') or contains(submittedBy/lastName,'\" + filter.nameOrEmail +\"'))\" : \"\")+ (filter.nameOrEmail ? \" and \" : \"\") \r\n + ( filter.status == QUOTE_REQUEST_STATUS.ALL ? '' : filter.status == '' ? \"(status eq '\" + QUOTE_REQUEST_STATUS.SUBMITTED + \"' or status eq '\" + QUOTE_REQUEST_STATUS.IN_REVIEW \r\n + \"' or status eq '\" + QUOTE_REQUEST_STATUS.QUOTED + \"')\" : filter.status ? \r\n \"status eq '\"+filter.status+\"'\" : \"\"\r\n )).then(({ data }) => {\r\n setQuoteRequestList(data.value?.map(item => {\r\n item.totalWeightFormatted = item.measurementSystem == MEASUREMENT_SYSTEM_TYPE.METRIC ? item.totalWeight + \" kg\" : item.totalWeight + \" lb\";\r\n item.totalVolumeFormatted = item.measurementSystem == MEASUREMENT_SYSTEM_TYPE.METRIC ? item.totalVolume + \" cbm\" : item.totalVolume + \" cbf\";\r\n item.from = item.originLocation ? item.originLocation.name : item.originLocationType == LOCATION_TYPE.PORT ? item.originPort : item.originAddress;\r\n item.to = item.destinationLocation ? item.destinationLocation.name : item.destinationLocationType == LOCATION_TYPE.PORT ? item.destinationPort : item.destinationAddress;\r\n return item;\r\n }));\r\n setTotalRows(data['@odata.count']);\r\n }).finally(()=> {\r\n setIsLoading(false);\r\n });\r\n }\r\n\r\n function handleRequestSort(event, property) {\r\n const isDesc = filter.orderBy === property && filter.order === 'desc';\r\n filter.order = isDesc ? 'asc' : 'desc';\r\n filter.orderBy = property;\r\n setFilter({...filter});\r\n }\r\n\r\n function handleSelectAllClick(event) {\r\n if (event.target.checked) {\r\n const newSelecteds = quoteRequestList.map(n => n.id);\r\n \r\n setSelected(newSelecteds);\r\n return;\r\n }\r\n setSelected([]);\r\n }\r\n\r\n function handleClick(event, name) {\r\n const selectedIndex = selected.indexOf(name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n selected.slice(0, selectedIndex),\r\n selected.slice(selectedIndex + 1),\r\n );\r\n }\r\n\r\n setSelected(newSelected);\r\n }\r\n\r\n function handleChangePage(event, newPage) {\r\n filter.page = newPage;\r\n setFilter({...filter});\r\n }\r\n\r\n function handleChangeRowsPerPage(event) {\r\n filter.rowsPerPage = +event.target.value;\r\n filter.page = 0;\r\n setFilter({...filter});\r\n }\r\n\r\n function handleChangeDense(event) {\r\n setDense(event.target.checked);\r\n }\r\n\r\n function changeStatus(status) {\r\n\r\n var responses = [];\r\n\r\n selected.map(id => responses.push(from(flitSvc.updateQuoteRequestStatus(id, status))));\r\n\r\n forkJoin(responses).subscribe(res => {\r\n setSelected([]);\r\n refreshList();\r\n });\r\n };\r\n\r\n const isSelected = name => selected.indexOf(name) !== -1;\r\n\r\n const emptyRows = filter.rowsPerPage - quoteRequestList.length;\r\n\r\n return (<>\r\n {intl.formatMessage({ id: \"NO_ACTIVE_REQUEST\" })}
\r\n \r\n\r\n {isLoading && \r\n \r\n \r\n \r\n {\r\n quoteRequestList.map((row, index) => {\r\n const isItemSelected = isSelected(row.id);\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n \r\n handleClick(event, row.id)}\r\n >\r\n \r\n {/* history.push('/quote/'+row.id)} component=\"th\" id={labelId} scope=\"row\" padding=\"none\" style={{maxWidth:\"100px\"}}>\r\n {row.description ? row.description : <>{intl.formatMessage({ id: \"QUOTE_REQUEST_ON\" })} {row.createdOn} }\r\n */}\r\n history.push('/quote/'+row.id)} component=\"th\" id={labelId} scope=\"row\" padding=\"none\" style={{maxWidth:\"100px\"}}>\r\n {row.submittedBy.businessEntity?.legalName}\r\n \r\n history.push('/quote/'+row.id)} align=\"center\">{row.submittedOn && {row.submittedOn} } \r\n history.push('/quote/'+row.id)} align=\"center\" style={{maxWidth:\"100px\"}}>{row.from} \r\n history.push('/quote/'+row.id)} align=\"center\" style={{maxWidth:\"100px\"}}>{row.to} \r\n {\r\n if(row.status != QUOTE_REQUEST_STATUS.INSTANT_QUOTED) history.push('/quote/' + row.id);\r\n }} align=\"center\" style={{minWidth:\"140px\"}}>{row.status == QUOTE_REQUEST_STATUS.INSTANT_QUOTED && row.email == user.email ? : {row.totalWeightFormatted}
{row.totalVolumeFormatted}} \r\n history.push('/quote/'+row.id)} align=\"center\">{row.cargoReadyOn && {row.cargoReadyOn} } \r\n history.push('/quote/'+row.id)} align=\"center\" style={{maxWidth:\"150px\"}}>{row.submittedBy ? ((row.submittedBy.firstName??\"\") + \" \" + (row.submittedBy.lastName??\"\")) : row.email} \r\n history.push('/quote/'+row.id)} align=\"center\" style={{width:\"140px\"}}>{cf.format('QuoteRequestStatus',row.status,intl.locale)} \r\n history.push('/quote/'+row.id)} align=\"center\" style={{width:\"100px\"}}> {cf.format('FreightMode',row.mode,intl.locale)} \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n {!isLoading && {row.totalVolumeFormatted}}
\r\n \r\n
\r\n \r\n {intl.formatMessage({ id: \"DROPZONE_DESC\" }) }\r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nfunction readFileAsObservable(file) {\r\n return from(new Promise(function (resolve, reject) {\r\n let fr = new FileReader();\r\n\r\n fr.onload = function () {\r\n resolve(fr.result);\r\n };\r\n\r\n fr.onerror = function () {\r\n reject(fr);\r\n };\r\n\r\n fr.readAsDataURL(file);\r\n }));\r\n}\r\nexport default injectIntl(FileUploadDialog);","/* eslint-disable no-restricted-imports */\r\nimport React, { useContext, useState, useEffect } from \"react\";\r\nimport { Form } from \"react-bootstrap\";\r\nimport cf from '../../services/codeformatter';\r\nimport { injectIntl, useIntl } from \"react-intl\";\r\nimport { FlitServiceContext } from \"../../services/flitService\";\r\nimport AttachFileIcon from '@material-ui/icons/AttachFile';\r\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\r\nimport { useDropzone } from 'react-dropzone';\r\nimport { CircularProgress } from '@material-ui/core'\r\nimport { DOCUMENT_TYPE } from \"../../services/flitEnum\";\r\n\r\nconst DocumentUploadByType = (props) => {\r\n const intl = useIntl();\r\n const { doc, activityId, businessEntity, documentType, isRequired, refreshHandler, hideOptional, isOperatorOnly, isReadOnly, templateUrl } = props;\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [file, setFile] = useState();\r\n const [isLoading, setIsLoading] = useState(false)\r\n\r\n useEffect(() => {\r\n if (doc) {\r\n setFile({ id: doc.id, name: doc.fileName });\r\n }\r\n }, [doc]);\r\n\r\n function downloadFile(documentId, fileName) {\r\n setIsLoading(true);\r\n flitSvc.getDownloadLink(documentId).then(res => {\r\n setIsLoading(false);\r\n // on the fly download trick\r\n const link = document.createElement('a');\r\n link.href = res.data.url;\r\n link.download = fileName;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n })\r\n }\r\n\r\n return (\r\n {fileRejections.length>0? intl.formatMessage({ id: \"DOCUMENT_NOT_SUPPORTED\" }) : \"\"}
\r\n \r\n \r\n } \r\n {'File: ' + file.name}\r\n downloadFile(file.id, file.name)}> \r\n }\r\n {!file &&\r\n {intl.formatMessage({ id: \"DOCUMENT_NOT_UPLOADED\" })} \r\n }\r\n {!isReadOnly && }\r\n \r\n
\r\n );\r\n}\r\n\r\nconst FlitDropZone = (props) => {\r\n const intl = useIntl();\r\n const { flitSvc, setFile, activityId, businessEntity, documentType,refreshHandler,setIsLoading, isOperatorOnly } = props;\r\n const { getRootProps, getInputProps,fileRejections } = useDropzone({\r\n accept: {'image/*' : [] ,\r\n 'text/*' : [],\r\n 'application/msword' : [],\r\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' : [],\r\n 'application/vnd.ms-excel' : [],\r\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' : [],\r\n 'application/pdf' : [],\r\n 'application/x-hwp' : ['.hwp']\r\n },\r\n maxSize : 10485760,\r\n multiple: false,\r\n onDropAccepted: acceptedFiles => {\r\n\r\n acceptedFiles.forEach(file => {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n \r\n reader.onload = () => {\r\n setIsLoading(true);\r\n if (activityId) {\r\n flitSvc.uploadDocument(activityId, \"\", \"\", documentType, \"\", file.name, \"\", reader.result, isOperatorOnly).then((data) => {\r\n file.id = data.data.id;\r\n setFile(file);\r\n setIsLoading(false);\r\n if (refreshHandler) refreshHandler();\r\n })\r\n } else if (businessEntity) {\r\n flitSvc.uploadDocument(activityId, \"\", \"\", documentType, \"\", file.name, \"\", reader.result, isOperatorOnly).then((data) => {\r\n file.id = data.data.id;\r\n if(documentType == DOCUMENT_TYPE.POWER_OF_ATTORNEY) {\r\n businessEntity.powerOfAttorneyDocumentId = file.id;\r\n } else if (documentType == DOCUMENT_TYPE.CEO_PASSPORT) {\r\n businessEntity.ceoPassportDocumentId = file.id;\r\n } \r\n flitSvc.updateBusinessEntity(businessEntity).then((data) => {\r\n setFile(file);\r\n setIsLoading(false);\r\n if (refreshHandler) refreshHandler();\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
\r\n \r\n {intl.formatMessage({ id: \"DROPZONE_DESC\" }) }\r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default injectIntl(DocumentUploadByType);","/* eslint-disable no-restricted-imports */\r\nimport React, { useContext, useState, useEffect } from \"react\";\r\nimport { Row, Col } from \"react-bootstrap\";\r\nimport { injectIntl, useIntl } from \"react-intl\";\r\nimport { FlitServiceContext } from \"../../services/flitService\";\r\nimport { LinearProgress } from \"@material-ui/core\";\r\nimport DocumentUploadByType from \"./DocumentUploadByType\";\r\nimport { ROLES, STAKEHOLDER_TYPE } from \"../../services/flitEnum\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nfunction DocumentGrid(props) {\r\n const intl = useIntl();\r\n const { activityId, documentTypeInfos, refreshHandler, businessEntityDocumentTypeInfos, width} = props;\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [documents, setDocuments] = useState([]);\r\n const [readOnlyDocuments, setReadOnlyDocuments] = useState([]);\r\n const [businessEntityDocuments, setBusinessEntityDocuments] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const { user } = useSelector(state => state.auth);\r\n const [businessEntity, setBusinessEntity] = useState(); \r\n\r\n useEffect(() => {\r\n if (activityId) {\r\n setIsLoading(true);\r\n flitSvc.searchDocuments(\"activityId eq \" + activityId).then(({ data }) => {\r\n setDocuments(data);\r\n setReadOnlyDocuments(data.filter(d=> documentTypeInfos.filter( i=> i.isReadOnly && i.type == d.type)));\r\n if (businessEntityDocumentTypeInfos) {\r\n flitSvc.getStakeholders(activityId).then(({ data }) => {\r\n\r\n const owner = data.find(el => el.type === STAKEHOLDER_TYPE.OWNER);\r\n var businessEntityId = '';\r\n if (owner) {\r\n if (owner.businessEntityId) {\r\n businessEntityId= owner.businessEntityId;\r\n } else if (owner.user) {\r\n businessEntityId= owner.user.businessEntityId; \r\n }\r\n }\r\n \r\n if (businessEntityId) {\r\n \r\n \r\n flitSvc.getBusinessEntity(businessEntityId).then(({ data }) => {\r\n setBusinessEntity(data);\r\n var businessEntityDocs = [];\r\n if (data.powerOfAttorneyDocument) businessEntityDocs.push(data.powerOfAttorneyDocument);\r\n if (data.ceoPassportDocument) businessEntityDocs.push(data.ceoPassportDocument);\r\n setBusinessEntityDocuments(businessEntityDocs);\r\n setIsLoading(false);\r\n })\r\n } else {\r\n setIsLoading(false);\r\n }\r\n \r\n });\r\n } else {\r\n setIsLoading(false);\r\n }\r\n \r\n } \r\n );\r\n }\r\n }, [activityId,documentTypeInfos]);\r\n\r\n return (\r\n <>\r\n {isLoading && {fileRejections.length>0? intl.formatMessage({ id: \"DOCUMENT_NOT_SUPPORTED\" }) : \"\"}
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
');\r\n return newStr;\r\n }\r\n\r\n function deleteActivityLog(id) {\r\n flitSvc.deleteActivityLog(id).then(({ data }) => {\r\n refreshHandler();\r\n }).finally(() => {\r\n //setSubmitting(false); 필요없음 리프레시 되면서 component ummount\r\n\r\n });\r\n }\r\n\r\n useEffect(() => {\r\n setImageThumbnailLinks([]);\r\n if (aLog) {\r\n var readObservabls = [];\r\n aLog.document.forEach((aDoc) => {\r\n if(aDoc.fileName.toLowerCase().includes('.jpg') || aDoc.fileName.toLowerCase().includes('.png')) {\r\n readObservabls.push(getDownloadLinkAsObjservable(aDoc.id));\r\n }\r\n });\r\n forkJoin(readObservabls).subscribe(res=> {\r\n var imgs = [];\r\n res.forEach(({data}) => { \r\n imgs.push({url:data.url,thumbnailUrl:data.thumbnailUrl ? data.thumbnailUrl : data.url, alt:data.fileName});\r\n });\r\n setImageThumbnailLinks(imgs);\r\n });\r\n\r\n\r\n }\r\n },[aLog]);\r\n \r\n\r\n\r\n return (<>\r\n {isNewDate ?
\r\n
\r\n
{imageThumbnailLinks.map((aImg) =>
downloadFile(aDoc.id,aDoc.fileName)}>
\r\n \r\n
\r\n {numSelected > 0 ? (\r\n \r\n {numSelected} selected\r\n \r\n ) : (\r\n \r\n Documents\r\n \r\n )}\r\n
\r\n \r\n \r\n {numSelected > 0 ? (\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\nDocumentsTableToolbar.propTypes = {\r\n numSelected: PropTypes.number.isRequired,\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n root: {\r\n width: '100%',\r\n marginTop: theme.spacing(3),\r\n },\r\n paper: {\r\n width: '100%',\r\n marginBottom: theme.spacing(2),\r\n },\r\n table: {\r\n minWidth: 100\r\n },\r\n tableWrapper: {\r\n overflowX: 'auto',\r\n },\r\n}));\r\n\r\nfunction DocumentList(props) {\r\n\r\n const { intl, history, activityId, simple, onlyInvoiceAttach, forceUpdate, onUpdated } = props;\r\n const { user } = useSelector(state => state.auth);\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [documentType, setDocumentType] = useState(onlyInvoiceAttach ? DOCUMENT_TYPE.INVOICE_ATTACHMENT : null);\r\n const [documentList, setDocumentList] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [open, setOpen] = useState(false);\r\n\r\n useEffect(() => {\r\n if (activityId) {\r\n refreshList();\r\n }\r\n }, [documentType, activityId,forceUpdate]);\r\n\r\n const classes = useStyles();\r\n const [order, setOrder] = React.useState('desc');\r\n const [orderBy, setOrderBy] = React.useState('createdOn');\r\n const [selected, setSelected] = React.useState([]);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(simple ? 5 : 10);\r\n\r\n function refreshList() {\r\n setIsLoading(true);\r\n flitSvc.searchDocuments(\"activityId eq \" + activityId + (documentType ? \" and type eq '\" + documentType + \"'\" : \"\")).then(({ data }) => {\r\n setDocumentList(data);\r\n }).finally(() => {\r\n setIsLoading(false);\r\n });\r\n }\r\n\r\n function handleClickOpen() {\r\n setOpen(true);\r\n }\r\n\r\n function handleClose() {\r\n setOpen(false);\r\n refreshList();\r\n if (onUpdated) onUpdated();\r\n\r\n }\r\n\r\n function handleRequestSort(event, property) {\r\n const isDesc = orderBy === property && order === 'desc';\r\n setOrder(isDesc ? 'asc' : 'desc');\r\n setOrderBy(property);\r\n }\r\n\r\n function handleSelectAllClick(event) {\r\n if (event.target.checked) {\r\n const newSelecteds = documentList.map(n => n.id);\r\n setSelected(newSelecteds);\r\n return;\r\n }\r\n setSelected([]);\r\n }\r\n\r\n function handleClick(event, name) {\r\n const selectedIndex = selected.indexOf(name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n selected.slice(0, selectedIndex),\r\n selected.slice(selectedIndex + 1),\r\n );\r\n }\r\n\r\n setSelected(newSelected);\r\n }\r\n\r\n function handleChangePage(event, newPage) {\r\n setPage(newPage);\r\n }\r\n\r\n function handleChangeRowsPerPage(event) {\r\n setRowsPerPage(+event.target.value);\r\n }\r\n function downloadFile(documentId, fileName) {\r\n flitSvc.getDownloadLink(documentId).then(res => {\r\n // on the fly download trick\r\n const link = document.createElement('a');\r\n link.href = res.data.url;\r\n link.download = fileName;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n })\r\n }\r\n\r\n function deleteFile(documentId) {\r\n flitSvc.deleteDocuments(documentId).then(res => {\r\n const data = documentList.filter(x => x.id !== documentId);\r\n setDocumentList(data);\r\n });\r\n }\r\n\r\n function downloadSelected() {\r\n selected.map(id => {\r\n downloadFile(id, documentList.find(d => d.id == id).fileName);\r\n });\r\n }\r\n\r\n const isSelected = name => selected.indexOf(name) !== -1;\r\n\r\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, documentList.length - page * rowsPerPage);\r\n\r\n return (<>\r\n {(!simple || onlyInvoiceAttach) &&\r\n \r\n {!onlyInvoiceAttach &&\r\n {\r\n setDocumentType(e.target.value);\r\n }}>\r\n \r\n\r\n {Object.values(DOCUMENT_TYPE).map(value => {\r\n if (value !== DOCUMENT_TYPE.INVOICE_ATTACHMENT) {\r\n return ()\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 {(!onlyInvoiceAttach || user.userRole?.find(r => r.role === ROLES.OPERATOR)) &&\r\n <>\r\n \r\n < Button size=\"sm\" style={{ float: \"right\" }} onClick={handleClickOpen}>{intl.formatMessage({ id: \"UPLOAD_DOCUMENT_BUTTON\" })}\r\n \r\n }\r\n
\r\n }\r\n \r\n \r\n\r\n {selected.length !== 0 && ( \r\n
\r\n \r\n {onlyInvoiceAttach ? \r\n {isLoading && \r\n\r\n \r\n\r\n {stableSort(documentList, getSorting(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const isItemSelected = isSelected(row.id);\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n return (\r\n \r\n handleClick(event, row.id)}\r\n >\r\n \r\n \r\n {cf.format('DocumentType', row.type, intl.locale)}\r\n
\r\n {!simple && <>{row.uploadedBy.firstName + \" \" + row.uploadedBy.lastName} \r\n {row.createdOn} \r\n {simple ? downloadFile(row.id, row.fileName)}> : \r\n downloadFile(row.id, row.fileName)}>Download \r\n {user.id == row.uploadedBy.id && deleteFile(row.id)}>Delete }\r\n }\r\n \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n {!isLoading && downloadFile(row.id, row.fileName)}>
\r\n \r\n {numSelected > 0 ? (\r\n \r\n {numSelected} selected\r\n \r\n ) : (\r\n \r\n Stakeholders\r\n \r\n )}\r\n
\r\n \r\n \r\n {numSelected > 0 ? (\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\nStakeholdersTableToolbar.propTypes = {\r\n numSelected: PropTypes.number.isRequired,\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n root: {\r\n width: '100%',\r\n marginTop: theme.spacing(3),\r\n },\r\n paper: {\r\n width: '100%',\r\n marginBottom: theme.spacing(2),\r\n },\r\n table: {\r\n minWidth: 500\r\n },\r\n tableWrapper: {\r\n overflowX: 'auto',\r\n },\r\n}));\r\n\r\nfunction StakeholderList(props) {\r\n\r\n const { intl, history, activityId } = props;\r\n const { user } = useSelector(state => state.auth);\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [stakeholderList, setStakeholderList] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [open, setOpen] = useState(false);\r\n const [currentStakeholderId, setCurrentStakeholderId] = useState();\r\n\r\n useEffect(() => {\r\n if (activityId) {\r\n refreshList();\r\n }\r\n }, [activityId]);\r\n\r\n const classes = useStyles();\r\n const [order, setOrder] = React.useState('desc');\r\n const [orderBy, setOrderBy] = React.useState('cargoReadyOn');\r\n const [selected, setSelected] = React.useState([]);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\r\n\r\n function refreshList() {\r\n setIsLoading(true);\r\n flitSvc.getStakeholders(activityId).then(({ data }) => {\r\n setStakeholderList(data);\r\n }).finally(() => {\r\n setIsLoading(false);\r\n });\r\n }\r\n\r\n function handleClickOpen() {\r\n setOpen(true);\r\n }\r\n\r\n function handleClose(isUpdated) {\r\n if (isUpdated) refreshList();\r\n setOpen(false);\r\n \r\n }\r\n\r\n function handleRequestSort(event, property) {\r\n const isDesc = orderBy === property && order === 'desc';\r\n setOrder(isDesc ? 'asc' : 'desc');\r\n setOrderBy(property);\r\n }\r\n\r\n function handleSelectAllClick(event) {\r\n if (event.target.checked) {\r\n const newSelecteds = stakeholderList.map(n => n.id);\r\n setSelected(newSelecteds);\r\n return;\r\n }\r\n setSelected([]);\r\n }\r\n\r\n function handleClick(event, name) {\r\n const selectedIndex = selected.indexOf(name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n selected.slice(0, selectedIndex),\r\n selected.slice(selectedIndex + 1),\r\n );\r\n }\r\n\r\n setSelected(newSelected);\r\n }\r\n\r\n function handleChangePage(event, newPage) {\r\n setPage(newPage);\r\n }\r\n\r\n function handleChangeRowsPerPage(event) {\r\n setRowsPerPage(+event.target.value);\r\n }\r\n\r\n function deleteStakeholder(stakeholderId) {\r\n flitSvc.deleteStakeholder(stakeholderId).then(res =>{\r\n const data = stakeholderList.filter(x => x.id !== stakeholderId);\r\n setStakeholderList(data);\r\n });\r\n }\r\n\r\n function deleteSelected() {\r\n var deleteRequests = [];\r\n selected.map( id => {\r\n var stakeholder = stakeholderList.find(x => x.id == id);\r\n if (stakeholder && stakeholder.type != STAKEHOLDER_TYPE.OWNER) {\r\n deleteRequests.push(from(flitSvc.deleteStakeholder(id)));\r\n }\r\n });\r\n\r\n if (deleteRequests.length > 0) {\r\n forkJoin(deleteRequests).subscribe(res=> {\r\n refreshList();\r\n });\r\n }\r\n setSelected([]);\r\n }\r\n\r\n function handleClickOpen() {\r\n setOpen(true);\r\n }\r\n\r\n const isSelected = name => selected.indexOf(name) !== -1;\r\n\r\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, stakeholderList.length - page * rowsPerPage);\r\n\r\n return (<>\r\n \r\n\r\n \r\n
\r\n \r\n \r\n\r\n {selected.length !== 0 && ( \r\n\r\n
\r\n \r\n {isLoading && \r\n\r\n \r\n \r\n {stableSort(stakeholderList, getSorting(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const isItemSelected = isSelected(row.id);\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n return (\r\n \r\n handleClick(event, row.id)}\r\n >\r\n \r\n\r\n {row.businessEntityId &&\r\n \r\n \r\n }{row.name} \r\n \r\n {cf.format('StakeholderType', row.type, intl.locale)}\r\n \r\n \r\n \r\n {\r\n { row.type == STAKEHOLDER_TYPE.OWNER ? {\r\n setCurrentStakeholderId(row.id);\r\n handleClickOpen();\r\n }}>{intl.formatMessage({ id: \"EDIT\" })} :\r\n deleteStakeholder(row.id)}>{intl.formatMessage({ id: \"DELETE\" })} }\r\n }\r\n \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n {!isLoading && \r\n
{intl.formatMessage({ id: \"RATE_INFORMATION\" })}
\r\n {isLoading && \r\n\r\n \r\n\r\n {stableSort(quoteList, getSorting(order, orderBy))\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n {\r\n if (simple) {\r\n if (currentQuote && currentQuote.id == row.id) {\r\n setCurrentQuote();\r\n } else {\r\n setCurrentQuote(row);\r\n }\r\n }\r\n }}\r\n >\r\n \r\n {row.description ? row.description : row.type == QUOTE_TYPE.INSTANT\r\n ? <>Instant quote on {row.createdOn} : <>Quoted on {row.createdOn} } {row.status == QUOTE_STATUS.DRAFT && {cf.format('QuoteStatus', row.status, intl.locale)}}\r\n \r\n {cf.format('QuoteStatus', row.status, intl.locale)} \r\n {!simple && $ {row.freightCharge} }\r\n $ {row.totalAmount} \r\n {!simple && {row.carrier ? row.carrier : intl.formatMessage({ id: \"UNKNOWN_CARRIER\" })} }\r\n {!simple && {row.expiration} \r\n {simple ? <>\r\n \r\n : <>\r\n {(user.userRole?.find(r => r.role == ROLES.OPERATOR) && row.status == QUOTE_STATUS.DRAFT) ? \r\n :\r\n }\r\n {(user.id == submittedById && row.status == QUOTE_STATUS.CONFIRMED) && }}\r\n \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && quoteList.length == 0 && (\r\n \r\n \r\n )}\r\n \r\n }\r\n\r\n\r\n
\r\n {currentQuote && ');\r\n return newStr;\r\n}\r\n return (<>\r\n\r\n {!isLoading &&\r\n\r\n
\r\n
}\r\n {intl.formatMessage({ id: \"QUOTE_REQUEST_RECEIVED\" })}
\r\n {intl.formatMessage({ id: \"QUOTE_REQUEST_RECEIVED_NOTIFICATION\" })}\r\n\r\n
{intl.formatMessage({ id: \"ACTIVITY_LOGS\" })}
\r\n\r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && \r\n {quoteRequest.status !== QUOTE_REQUEST_STATUS.INSTANT_QUOTED && <> {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.IN_REVIEW, intl.locale)} \r\n {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.SUBMITTED, intl.locale)} }\r\n {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.REJECTED, intl.locale)} \r\n {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.CANCELLED, intl.locale)} \r\n {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.ARCHIVED, intl.locale)} \r\n {cf.format('QuoteRequestStatus', QUOTE_REQUEST_STATUS.DELETED, intl.locale)} \r\n }\r\n {(user.userRole?.find(r => r.role == ROLES.OPERATOR) || quoteRequest.submittedById == user.id) && \r\n {intl.formatMessage({ id: \"CANCEL_REQUEST\" })} \r\n {intl.formatMessage({ id: \"ARCHIVE_REQUEST\" })} \r\n {intl.formatMessage({ id: \"REPLICATE_REQUEST\" })} \r\n }\r\n
\r\n {intl.formatMessage({ id: \"ROUTE\" })}
\r\n \r\n{intl.formatMessage({ id: \"BASIC\" })}
\r\n \r\n{intl.formatMessage({ id: \"CARGO_INFORMATION\" })}
\r\n \r\n: \" \"}\r\n {quoteRequest.measurementSystem == MEASUREMENT_SYSTEM_TYPE.METRIC ? \r\n pk.weight + \" kg\": pk.weight + \" lb\"} x {pk.numberOfPackages} {pk.packageType} \r\n \r\n
{intl.formatMessage({ id: \"ADDITIONAL_SERVICES\" })}
\r\n \r\n{intl.formatMessage({ id: \"NOTES\" })}
\r\n \r\n{JSON.stringify(quoteRequest)}
\r\n \r\n \r\n {errorMsg}\r\n
}\r\n \r\n {isLoading && \r\n\r\n \r\n\r\n {stableSort(feeEntries, getSorting(order, orderBy))\r\n .slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n {\r\n openFeeDialog(row);\r\n }}\r\n >\r\n \r\n {\r\n e.stopPropagation();\r\n setFeeEntries(feeEntries.filter(el=>el.feeCode != row.feeCode));\r\n }} color=\"primary\">\r\n {row.feeCode}\r\n \r\n {cf.format('FeeCategory', row.category, intl.locale)} \r\n {row.name} \r\n {row.remarks} \r\n {\"$\" + Number(row.rate).toFixed(2)} \r\n {row.quantity} \r\n {\"$\" + Number(row.price).toFixed(2)} \r\n \r\n );\r\n })}\r\n\r\n \r\n }\r\n {feeEntries == 0 && !isLoading &&
\r\n }\r\n {tabValue === 1 &&\r\n \r\n
\r\n\r\n
}\r\n {!isLoading && {intl.formatMessage({ id: \"NO_FEE_ENTRIES_TO_DISPLAY\" })}
\r\n\r\n
');\r\n return newStr;\r\n }\r\n\r\n // minimize aside menu\r\n // var body = KTUtil.getBody();\r\n // KTUtil.removeClass\r\n // KTUtil.addClass(body, \"aside-minimize\");\r\n\r\n\r\n const getInputClasses = (fieldname) => {\r\n if (formik.touched[fieldname] && formik.errors[fieldname]) {\r\n return \"is-invalid\";\r\n }\r\n\r\n if (formik.touched[fieldname] && !formik.errors[fieldname]) {\r\n return \"is-valid\";\r\n }\r\n\r\n return \"\";\r\n };\r\n\r\n const QuoteScheme = Yup.object().shape({\r\n mode: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n expiration: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n\r\n\r\n });\r\n\r\n\r\n useEffect(() => {\r\n subheader.setTitle(`${intl.formatMessage({ id: \"QUOTE\" })}`);\r\n subheader.setBreadcrumbs([{ title: intl.formatMessage({ id: \"QUOTES\" }), pathname: \"/quote\" }, { title: \"PNP-\" + reqId }])\r\n refresh();\r\n // return function cleanup() {\r\n // var body = KTUtil.getBody();\r\n // KTUtil.removeClass(body, \"aside-minimize\");\r\n // }\r\n }, []);\r\n\r\n function refresh() {\r\n setShowConfirmModal(false);\r\n setShowErrorModal(false);\r\n setShowPreviewModal(false);\r\n setIsSubmitting(false);\r\n setIsLoading(true);\r\n\r\n var getQuoteRequest = from(flitSvc.getQuoteRequest(reqId));\r\n var getQuotes = from(flitSvc.getQuotesByRequestId(reqId));\r\n\r\n forkJoin([getQuoteRequest, getQuotes]).subscribe(res => {\r\n setQuoteRequest(res[0].data);\r\n var quotes = res[1].data;\r\n\r\n if (quoteId) {\r\n var editingQuote = quotes.find(el => el.id == quoteId);\r\n if (editingQuote) {\r\n editingQuote.expiration = new Date(editingQuote.expiration); // for date picker\r\n setInitialValues(editingQuote);\r\n setInitialFeeEntries(editingQuote.feeEntry);\r\n \r\n } else {\r\n history.push(\"/error/error404\");\r\n }\r\n\r\n } else {\r\n var initQuote = {\r\n id: \"\",\r\n mode: res[0].data.mode,\r\n carrier: \"\",\r\n expiration: new Date(moment().add(14, 'days').format('MM/DD/YYYY')),\r\n quoteRequestId: res[0].data.id,\r\n type: QUOTE_TYPE.FULL,\r\n status: QUOTE_STATUS.NEW,\r\n description: \"\"\r\n };\r\n setInitialValues(initQuote);\r\n\r\n }\r\n\r\n var instantQuote = quotes.filter(el => el.type == QUOTE_TYPE.INSTANT);\r\n if (!quoteId && instantQuote && instantQuote.length > 0) {\r\n setInstantQuote(instantQuote[0]);\r\n }\r\n setIsLoading(false);\r\n });\r\n\r\n }\r\n\r\n function handleFeeEntriesChange(entries) {\r\n setFeeEntries(entries);\r\n }\r\n\r\n\r\n function importFromInstantQuote() {\r\n var entries = instantQuote.feeEntry.map(el => el.id = '');\r\n setInitialFeeEntries(instantQuote.feeEntry);\r\n setInstantQuote({});\r\n }\r\n\r\n function onHideErrorModal() {\r\n setShowErrorModal(false);\r\n }\r\n function onHidePreviewModal() {\r\n setShowPreviewModal(false);\r\n }\r\n return (<>\r\n\r\n {!isLoading &&\r\n\r\n
\r\n \r\n
\r\n {intl.formatMessage({ id: \"ROUTE\" })}
\r\n \r\n{intl.formatMessage({ id: \"BASIC\" })}
\r\n \r\n{intl.formatMessage({ id: \"CARGO_INFORMATION\" })}
\r\n \r\n{intl.formatMessage({ id: \"ADDITIONAL_SERVICES\" })}
\r\n \r\n{intl.formatMessage({ id: \"NOTES\" })}
\r\n \r\n{JSON.stringify(quoteRequest)}
\r\n \r\n \r\n {isLoading && \r\n\r\n \r\n\r\n {stableSort(consolScheduleList, getSorting(order, orderBy))\r\n .slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n \r\n {cf.format('FreightMode',row.mode,intl.locale)} \r\n {row.originLocation.name} \r\n {row.destinationLocation.name} \r\n {row.estimatedDepartureOn} {row.estimatedArrivalOn} {row.documentCutOffOn} {row.freightCutOffOn} \r\n );\r\n })}\r\n {!isLoading && consolScheduleList.length == 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n\r\n
\r\n {!isLoading && {intl.formatMessage({ id: \"NO_SCHEDULE_AVAILABLE\" })}
FBA 콘솔
\r\n미국 FBA 입고를 간편하게!
\r\n미국 PNPLINE 물류센터까지 원스탑 배송
\r\nCBM(부피) 입력만으로 요율 확인 가능!
\r\n올인(All-in) 요율로 숨겨진 비용없이 명확하게
\r\n \r\nFBA 콘솔 배송 전 준비사항(필독)
\r\n 1. 라벨(Label) 부착 가이드 - 링크
\r\n 2. IOR / BOND 구매 - 링크\r\n \r\n
일반 포워딩
\r\nLCL (팔렛/박스)
\r\nFCL (컨테이너)
\r\n항공 특송
\r\n항공 포워딩
\r\n \r\n{intl.formatMessage({ id: \"NO_ROUTE_CONFIGURED\" })}
\r\n {intl.formatMessage({ id: \"IN_PROGRESS\" })}\r\n \r\n {shipmentSummary.inProgress}\r\n \r\n
\r\n \r\n \r\n {intl.formatMessage({ id: \"AT_ARRIVAL_PORT\" })}\r\n \r\n {shipmentSummary.atArrivalPort}\r\n \r\n
\r\n \r\n \r\n {intl.formatMessage({ id: \"WITH_EXCEPTION\" })}\r\n \r\n {shipmentSummary.withException}\r\n \r\n
\r\n \r\n \r\n {intl.formatMessage({ id: \"DELIVERED_WITHIN_30DAYS\" })}\r\n \r\n {shipmentSummary.deliveredInFull30Days}\r\n \r\n
\r\n \r\n \r\n {intl.formatMessage({ id: \"NO_SHIPMENTS_TO_DISPLAY\" })}\r\n \r\n
\r\n
\r\n
\r\n 🚢 {row.container?.length}{\" \"}\r\n {intl.formatMessage({ id: \"CONTAINERS\" })}{\" \"}\r\n \r\n {cf.format(\"ShipmentStatus\", row.status, intl.locale)}\r\n \r\n \r\n
\r\n {option.id == \"noentity\"\r\n ? option.legalName\r\n : option.legalName}\r\n
\r\n )}\r\n paginationText={intl.formatMessage({\r\n id: \"SHOW_MORE_RESULTS\",\r\n })}\r\n useCache={false}\r\n ref = {businessEntityRef}\r\n />\r\n \r\n {intl.formatMessage({ id: \"NO_SHIPMENTS_TO_DISPLAY\" })}\r\n \r\n
{row.description ? row.description : (\"Createed on \"+ moment(row.createdOn).format('ll'))}
{row.container[0]?.containerNo} {row[\"container@odata.count\"] > 1 ? (\"+ \" + (row[\"container@odata.count\"] -1)) : \"\"}
{row.houseBillNo}
{el.number}
)}\r\n {row.route[0]?.originDepartureOn ? moment(row.route[0]?.originDepartureOn).format('ll') : row.route[0]?.estimatedDepartureOn ? {moment(row.route[0]?.estimatedDepartureOn).format('ll')}:\"-\"}
\r\n {row.route.slice(-1)?.destinationArrivalOn ? moment(row.route.slice(-1)?.destinationArrivalOn).format('ll') : row.route.slice(-1)?.estimatedArrivalOn ? {moment(row.route.slice(-1)?.estimatedArrivalOn).format('ll')}:\"-\"}
{row.destinationLocation.name}
{location.address2} {location.address1}, {location.city} {location.province}, {location.country}\r\n
\r\n {location.unlocode && \r\n UNLO:{location.unlocode}\r\n }\r\n {location.isLoadingDock && \r\n Loading Dock\r\n }\r\n {location.isNeedAppointment && \r\n Need Appointment\r\n }\r\n\r\n
\r\n
}\r\n \r\n {route.originDepartureOn &&
\r\n\r\n Departed
{moment(route.originDepartureOn).format('ll')}
}\r\n {route.destinationArrivalOn && {moment(route.originDepartureOn).format('ll')}
Arrived
{moment(route.destinationArrivalOn).format('ll')}
}\r\n {(!route.originDepartureOn && route.estimatedDepartureOn) && {moment(route.destinationArrivalOn).format('ll')}
Est.Departure
{moment(route.estimatedDepartureOn).format('ll')}
}\r\n {(!route.destinationArrivalOn && route.estimatedArrivalOn) && {moment(route.estimatedDepartureOn).format('ll')}
Est.Arrival
{moment(route.estimatedArrivalOn).format('ll')}
}\r\n {route.trackingNo && {moment(route.estimatedArrivalOn).format('ll')}
Tracking #
{route.trackingNo}
}\r\n {route.carrier && {route.trackingNo}
Carrier
{route.carrier}
}\r\n {route.vessel && {route.carrier}
Vessel
{route.vessel}
}\r\n\r\n {route.vessel}
\r\n \r\n \r\n {getLocationIcon(row.originLocation.type)}\r\n \r\n \r\n
\r\n {row.originLocation.name}\r\n \r\n \r\n
\r\n {row.originLocation.address2} {row.originLocation.address1}, {row.originLocation.city} {row.originLocation.province}, {row.originLocation.country}\r\n \r\n \r\n
\r\n\r\n {formatDays(calculateRouteDays(row))} • \r\n {moment(row.destinationArrivalOn ? row.originDepartureOn : row.estimatedDepartureOn).format('ll')}\r\n {calculateRouteDays(row) != 0 && '~' + moment(row.destinationArrivalOn ? row.originDepartureOn : row.estimatedDepartureOn).add(calculateRouteDays(row), 'day').format('ll')}
\r\n
}\r\n \r\n {row.cargoReadyOn &&
\r\n {intl.formatMessage({ id: \"CARGO_READY\" })}
{moment(row.cargoReadyOn).format('ll')}
}\r\n {row.originDepartureOn && {moment(row.cargoReadyOn).format('ll')}
{intl.formatMessage({ id: \"DEPARTED\" })}
{moment(row.originDepartureOn).format('ll')}
}\r\n {row.destinationArrivalOn && {moment(row.originDepartureOn).format('ll')}
{intl.formatMessage({ id: \"ARRIVED\" })}
{moment(row.destinationArrivalOn).format('ll')}
}\r\n {(!row.originDepartureOn && row.estimatedDepartureOn) && {moment(row.destinationArrivalOn).format('ll')}
{intl.formatMessage({ id: \"EST.DEPARTURE\" })}
{moment(row.estimatedDepartureOn).format('ll')}
}\r\n {(!row.destinationArrivalOn && row.estimatedArrivalOn) && {moment(row.estimatedDepartureOn).format('ll')}
{intl.formatMessage({ id: \"EST.ARRIVAL\" })}
{moment(row.estimatedArrivalOn).format('ll')}
}\r\n {row.cycutoffOn && {moment(row.estimatedArrivalOn).format('ll')}
{intl.formatMessage({ id: \"CY_CUTOFF\" })}
{moment(row.cycutoffOn).format('ll')}
}\r\n {row.lastFreeOn && {moment(row.cycutoffOn).format('ll')}
{intl.formatMessage({ id: \"LAST_FREE\" })}
{moment(row.lastFreeOn).format('ll')}
}\r\n {row.emptyReturnedOn && {moment(row.lastFreeOn).format('ll')}
{intl.formatMessage({ id: \"EMPTY_RETURNED\" })}
{moment(row.emptyReturnedOn).format('ll')}
}\r\n {row.trackingNo && {moment(row.emptyReturnedOn).format('ll')}
{intl.formatMessage({ id: \"TRACKING_#\" })}
{row.trackingNo}
}\r\n {row.carrier && {row.trackingNo}
{intl.formatMessage({ id: \"CARRIER\" })}
{row.carrier}
}\r\n {row.vessel && {row.carrier}
{intl.formatMessage({ id: \"VESSEL\" })}
{row.vessel}
}\r\n\r\n {row.vessel}
\r\n \r\n \r\n {getLocationIcon(row.destinationLocation.type)}\r\n \r\n \r\n
\r\n {row.destinationLocation.name}\r\n \r\n {row.destinationLocation.address2} {row.destinationLocation.address1}, {row.destinationLocation.city} {row.destinationLocation.province}, {row.destinationLocation.country}
\r\n \r\n {intl.formatMessage({ id: \"SERVICE\" })}
\r\n{cf.format(\"ShipmentMode\", shipment.mode, intl.locale)}\r\n
{cf.format(\"ServiceType\", shipment.serviceType, intl.locale)}\r\n
{shipment.incoterms}\r\n {shipment.freightType &&
{cf.format(\"FreightType\", shipment.freightType, intl.locale)}}\r\n
{intl.formatMessage({ id: \"CONTAINER\" })}
\r\n\r\n {shipment.container?.map((row, index) => (\r\n
\r\n \r\n
\r\n
\r\n
\r\n ))}\r\n\r\n \r\n }\r\n\r\n \r\n
{intl.formatMessage({ id: \"CARGO_TOTALS\" })}
\r\n\r\n
\r\n
\r\n
{intl.formatMessage({ id: \"CARRIER_REFERENCES\" })}
\r\n\r\n
\r\n \r\n }\r\n ;\r\n\r\n}\r\n\r\nexport default ShipmentDetailDetail;\r\n","\r\nimport { INVOICE_STATUS,INVOICE_ENTRY_TYPE,PAYMENT_STATUS,PAYMENT_METHOD_TYPE, INVOICE_INPUT_TYPE} from './../../services/flitEnum';\r\n export function getStatusCssClasses(status) {\r\n var type;\r\n switch(status) {\r\n case INVOICE_STATUS.DRAFT:\r\n type=\"info\"\r\n break;\r\n case INVOICE_STATUS.OUTSTANDING:\r\n type=\"warning\"\r\n break;\r\n case INVOICE_STATUS.PAID:\r\n type=\"success\"\r\n break;\r\n case INVOICE_STATUS.PAST_DUE:\r\n type=\"danger\"\r\n break;\r\n case INVOICE_STATUS.VOID:\r\n case INVOICE_STATUS.DELETED:\r\n type=\"dark\"\r\n break;\r\n \r\n default:\r\n type=\"\"\r\n }\r\n\r\n return `label label-lg label-light-${\r\n type\r\n } label-inline`;\r\n }\r\n \r\n export function getEntryTypeCssClasses(entryType) {\r\n var type;\r\n switch(entryType) {\r\n case INVOICE_ENTRY_TYPE.DISCOUNT:\r\n type=\"info\"\r\n break;\r\n case INVOICE_ENTRY_TYPE.ATTACHMENT:\r\n type=\"info\"\r\n break;\r\n case INVOICE_ENTRY_TYPE.OTHER:\r\n type=\"danger\"\r\n break;\r\n case INVOICE_ENTRY_TYPE.CREDIT:\r\n type=\"success\"\r\n break;\r\n case INVOICE_ENTRY_TYPE.ADJUSTMENT:\r\n type=\"warning\"\r\n break;\r\n default:\r\n type=\"\"\r\n }\r\n\r\n return `label label-lg label-light-${\r\n type\r\n } label-inline`;\r\n }\r\n export function getInputTypeCssClasses(inputType) {\r\n var type;\r\n switch(inputType) {\r\n case INVOICE_INPUT_TYPE.FEE_ENTRY:\r\n type=\"info\"\r\n break;\r\n case INVOICE_INPUT_TYPE.ATTACHMENT:\r\n type=\"warning\"\r\n break;\r\n default:\r\n type=\"\"\r\n }\r\n\r\n return `label label-lg label-light-${\r\n type\r\n } label-inline`;\r\n }\r\n\r\n export function getPaymentStatusCssClasses(status) {\r\n var type;\r\n switch(status) {\r\n case PAYMENT_STATUS.DRAFT:\r\n type=\"dark\"\r\n break;\r\n case PAYMENT_STATUS.UNPAID:\r\n type=\"warning\"\r\n break;\r\n case PAYMENT_STATUS.PAID:\r\n type=\"success\"\r\n break;\r\n case PAYMENT_STATUS.FAILED:\r\n type=\"danger\"\r\n break;\r\n case PAYMENT_STATUS.CANCELLED:\r\n type=\"dark\"\r\n break;\r\n \r\n default:\r\n type=\"\"\r\n }\r\n\r\n return `label label-lg label-light-${\r\n type\r\n } label-inline`;\r\n }\r\n \r\n export function getPaymentMethodTypeCssClasses(methodType) {\r\n var type;\r\n switch(methodType) {\r\n case PAYMENT_METHOD_TYPE.CARD:\r\n type=\"info\"\r\n break;\r\n case PAYMENT_METHOD_TYPE.ACH:\r\n type=\"warning\"\r\n break;\r\n case PAYMENT_METHOD_TYPE.MANUAL:\r\n type=\"danger\"\r\n break;\r\n case PAYMENT_METHOD_TYPE.UNKNOWN:\r\n type=\"dark\"\r\n break;\r\n default:\r\n type=\"\"\r\n }\r\n\r\n return `label label-lg label-light-${\r\n type\r\n } label-inline`;\r\n }\r\n","import React, { useEffect, useState, useContext } from \"react\";\r\nimport { Button, Dropdown, DropdownButton, InputGroup, Modal } from \"react-bootstrap\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useLocation,useHistory } from \"react-router-dom\";\r\nimport { useDropzone } from 'react-dropzone';\r\nimport * as Yup from \"yup\";\r\nimport { Formik } from \"formik\";\r\nimport cf from '../../../services/codeformatter';\r\nimport { Form, Row, Col } from \"react-bootstrap\";\r\nimport { useIntl } from \"react-intl\";\r\nimport { FlitServiceContext } from \"../../../services/flitService\";\r\nimport { Typography } from '@material-ui/core';\r\nimport AttachFileIcon from '@material-ui/icons/AttachFile';\r\nimport { INVOICE_STATUS, INVOICE_INPUT_TYPE, CURRENCY_CODE, INVOICE_ENTRY_TYPE, DOCUMENT_TYPE, FLIT_ID_TYPE } from \"../../../services/flitEnum\";\r\nimport { getStatusCssClasses } from \"../InvoiceUIHelper\";\r\nimport { useLang } from \"../../../../_metronic/i18n/Metronici18n\";\r\nimport Moment from \"react-moment\";\r\nimport DatePicker from \"react-datepicker\";\r\n\r\n\r\nconst thumbsContainer = {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n marginTop: 16\r\n};\r\n\r\nconst thumb = {\r\n display: 'inline-flex',\r\n borderRadius: 2,\r\n border: '1px solid #eaeaea',\r\n marginBottom: 8,\r\n marginRight: 8,\r\n maxHeight: 100,\r\n maxWidth: 500,\r\n width: 'auto',\r\n height: 'auto',\r\n padding: 4,\r\n boxSizing: 'border-box'\r\n};\r\n\r\nconst thumbInner = {\r\n minWidth: 0,\r\n overflow: 'hidden'\r\n};\r\n\r\nconst img = {\r\n display: 'block',\r\n maxHeight: 100,\r\n maxWidth: 500,\r\n width: 'auto',\r\n height: 'auto'\r\n};\r\n\r\nconst fileName = {\r\n display: 'inline-flex',\r\n verticalAlign: 'top'\r\n};\r\n\r\nexport function FileInvoiceDialog({ show, onHide, invoiceId, shipmentId, consolId}) {\r\n const intl = useIntl();\r\n const lang = useLang();\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const { user } = useSelector(state => state.auth);\r\n var location = useLocation();\r\n const [file, setFile] = useState(null);\r\n const [freightOwner, setFreightOwner] = useState(null);\r\n const history = useHistory();\r\n\r\n\r\n useEffect(() => {\r\n if (show) {\r\n setFile(null);\r\n setInitialValues(initialEntry);\r\n\r\n\r\n\r\n\r\n if (invoiceId) {\r\n setIsLoading(true);\r\n flitSvc\r\n .getInvoice(invoiceId)\r\n .then(({ data }) => {\r\n\r\n if (data.invoiceEntry?.filter(el => el.type == INVOICE_ENTRY_TYPE.ATTACHMENT).length > 0) {\r\n data.amount = data.invoiceEntry.map( entry => entry.amount).reduce((a,b)=>a+b);\r\n } \r\n data.dueOn = data.dueOn ? new Date(data.dueOn) : '';\r\n data.issuedOn = data.issuedOn ? new Date(data.issuedOn) : '';\r\n data.paidOn = data.paidOn ? new Date(data.paidOn) : '';\r\n setInitialValues(data);\r\n\r\n setFreightOwner({name : data.billedTo.legalName, businessEntityId : data.billedTo?.id});\r\n if (data.invoiceDocumentId) {\r\n let docId = data.invoiceDocumentId;\r\n flitSvc.getDownloadLink(docId).then((data) => {\r\n setFile({ id: docId, name: data.data.fileName, url: data.data.url, preview: data.data.thumbnailUrl });\r\n })\r\n }\r\n }).finally(() => {\r\n setIsLoading(false);\r\n });\r\n } else {\r\n setIsLoading(true);\r\n setInitialValues(initialEntry);\r\n \r\n flitSvc.getFreightOwner(shipmentId ? shipmentId : consolId, shipmentId? FLIT_ID_TYPE.SHIPMENT : FLIT_ID_TYPE.CONSOL).then(({ data }) => {\r\n setFreightOwner(data);\r\n }).finally(() => {\r\n setIsLoading(false);\r\n });\r\n }\r\n }\r\n \r\n }, [show]);\r\n\r\n function downloadFile(documentId, fileName) {\r\n flitSvc.getDownloadLink(documentId).then(res => {\r\n // on the fly download trick\r\n const link = document.createElement('a');\r\n link.href = res.data.url;\r\n link.download = fileName;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n })\r\n }\r\n\r\n const invoiceDocument = {\r\n id: 0,\r\n type: DOCUMENT_TYPE.INVOICE_ATTACHMENT,\r\n fileName: \"\",\r\n dataURL: \"\"\r\n }\r\n\r\n const initialEntry = {\r\n id: \"\",\r\n inputType : INVOICE_INPUT_TYPE.ATTACHMENT,\r\n status: INVOICE_STATUS.NEW,\r\n invoiceNumber: \"\",\r\n billedToId: \"\",\r\n shipmentId: \"\",\r\n consolId: \"\",\r\n notes: \"\",\r\n issuedOn:new Date(),\r\n dueOn:\"\",\r\n paidOn:\"\",\r\n amount:'',\r\n currency: lang == 'ko' ? CURRENCY_CODE.KRW : lang == 'zh' ? CURRENCY_CODE.CNY : CURRENCY_CODE.USD\r\n };\r\n\r\n const [initialValues, setInitialValues] = React.useState(initialEntry);\r\n const [isLoading, setIsLoading] = React.useState(false);\r\n const InvoiceScheme = Yup.object().shape({\r\n invoiceNumber: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n dueOn: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n issuedOn: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n amount: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n });\r\n return (\r\n
\r\n \r\n
\r\n \r\n {intl.formatMessage({ id: \"DROPZONE_DESC\" }) }\r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n","/* eslint-disable no-restricted-imports */\r\nimport React, { useContext, useState, useEffect } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { Form, ToggleButton, ToggleButtonGroup, Row, Col, DropdownButton, Dropdown } from \"react-bootstrap\";\r\nimport Moment from 'react-moment';\r\nimport { Button } from \"react-bootstrap\";\r\nimport { useIntl } from 'react-intl';\r\nimport { Link, useHistory } from \"react-router-dom\";\r\nimport cf from '../../../services/codeformatter';\r\nimport { FormattedMessage, injectIntl } from \"react-intl\";\r\nimport { FlitServiceContext } from \"../../../services/flitService\";\r\nimport PropTypes from 'prop-types';\r\nimport clsx from 'clsx';\r\nimport AttachFileIcon from '@material-ui/icons/AttachFile';\r\nimport { makeStyles, lighten, withStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport {\r\n Paper, Table, TableHead, TableRow, TableCell, TableBody, Checkbox, Toolbar, Typography, Tooltip, LinearProgress,\r\n IconButton, TableSortLabel, TablePagination, CircularProgress\r\n} from \"@material-ui/core\";\r\nimport DownloadIcon from \"@material-ui/icons/GetApp\";\r\nimport { ROLES } from '../../../services/flitEnum';\r\nimport { INVOICE_INPUT_TYPE, INVOICE_STATUS } from \"../../../services/flitEnum\";\r\nimport { getStatusCssClasses } from \"../InvoiceUIHelper\";\r\nimport { FileInvoiceDialog } from \"../invoice-create/FileInvoiceDialog\";\r\n\r\nfunction desc(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n}\r\n\r\nfunction stableSort(array, cmp) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = cmp(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map(el => el[0]);\r\n}\r\n\r\nfunction getSorting(order, orderBy) {\r\n return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);\r\n}\r\nconst headRows = [\r\n { id: 'invoiceNumber', align: 'left', disablePadding: false, label: 'INVOICE_NUMBER' ,sortable:true},\r\n { id: 'status', align: 'center', disablePadding: true, label: 'STATUS',sortable:true },\r\n { id: 'issuedOn', align: 'center', disablePadding: true, label: 'ISSUED_ON',sortable:true},\r\n { id: 'dueOn', align: 'center', disablePadding: true, label: 'DUE_ON',sortable:true},\r\n { id: 'amount', align: 'right', disablePadding: false, label: 'AMOUNT' ,sortable:false},\r\n { id: 'action', align: 'center', disablePadding: false, label: 'ACTION', sortable:false},\r\n];\r\n\r\nconst StyledTableCell = withStyles(theme => ({\r\n body: {\r\n fontSize: 12,\r\n },\r\n}))(TableCell);\r\n\r\nfunction OrderInvoiceTableHead(props) {\r\n const intl = useIntl();\r\n const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort, simple } = props;\r\n const { user } = useSelector(state => state.auth);\r\n const createSortHandler = property => event => {\r\n onRequestSort(event, property);\r\n };\r\n\r\n return (\r\n {fileRejections.length>0? intl.formatMessage({ id: \"DOCUMENT_NOT_SUPPORTED\" }) : \"\"}
\r\n \r\n \r\n {(user.userRole?.find(r => r.role === ROLES.OPERATOR)) &&\r\n <>\r\n \r\n < Button size=\"sm\" style={{ float: \"right\" }} onClick={createInvoice}>{intl.formatMessage({ id: \"CREATE_INVOICE\" })}\r\n \r\n }\r\n
\r\n }\r\n \r\n \r\n \r\n
\r\n \r\n {isLoading && \r\n\r\n \r\n\r\n {stableSort(invoiceList, getSorting(order, orderBy))\r\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n return (\r\n \r\n openInvoice(row)}>{row.invoiceNumber} \r\n \r\n openInvoice(row)}>\r\n \r\n {cf.format('InvoiceStatus', row.status, intl.locale)}\r\n \r\n \r\n openInvoice(row)}>{row.issuedOn} \r\n openInvoice(row)}>{row.dueOn} \r\n openInvoice(row)}>{cf.format('CurrencyCode',row.currency,intl.locale)} {(row.feeEntry?.reduce(function (a, b) {\r\n return a + b[\"price\"];\r\n }, 0) + \r\n row.invoiceEntry?.reduce(function (a, b) {\r\n return a + b[\"amount\"];\r\n }, 0) || 0).toFixed(2) }\r\n \r\n \r\n \r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && (row.status == INVOICE_STATUS.DRAFT ) ?\r\n :\r\n {\r\n e.stopPropagation();\r\n downloadInvoice(row);\r\n }}>{downloadingRow == row.id ? : }\r\n \r\n \r\n \r\n );\r\n })}\r\n {emptyRows > 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n
\r\n {!isLoading && {intl.formatMessage({ id: \"NO_QUOTE\" })}
{JSON.stringify(quoteRequest)}
\r\n \r\n \r\n \r\n
\r\n \r\n {intl.formatMessage({ id: \"DROPZONE_DESC\" }) }\r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n","import React, { useEffect, useState, useContext } from \"react\";\r\nimport { Modal } from \"react-bootstrap\";\r\nimport * as Yup from 'yup';\r\nimport { Formik, useFormikContext } from \"formik\";\r\nimport { Form, ToggleButton, ToggleButtonGroup, Row, Col, Badge, InputGroup, OverlayTrigger, Tooltip } from \"react-bootstrap\";\r\nimport { useIntl } from \"react-intl\";\r\nimport cf from '../../services/codeformatter';\r\nimport { LOCATION_TYPE, AVAILABLE_MODE } from '../../services/flitEnum';\r\nimport { AsyncTypeahead } from 'react-bootstrap-typeahead';\r\nimport { FlitServiceContext } from \"../../services/flitService\";\r\nimport GooglePlacesAutocomplete, { geocodeByPlaceId, getLatLng } from 'react-google-places-autocomplete';\r\nimport ScriptTag from 'react-script-tag';\r\n\r\nconst fixFormRow = { marginRight: \"0px\", marginLeft: \"0px\" };\r\n\r\nexport function LocationDialog({ show, onHide, locationId, businessEntityId, userLocationType, userLocationAddress }) {\r\n const intl = useIntl();\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const { setFieldValue } = useFormikContext() || {}; // nullsafe deconstructing, setFieldValue from enclosing component\r\n useEffect(() => {\r\n if (show && locationId) {\r\n setIsLoading(true);\r\n flitSvc.getLocation(locationId).then(({ data }) => {\r\n if (!data.businessEntityId) {\r\n data.isCommonLocation = true;\r\n } else {\r\n _handleSearch(data.businessEntity.legalName);\r\n }\r\n setInitialValues(data);\r\n }).finally(() => {\r\n setIsLoading(false);\r\n });\r\n\r\n } else {\r\n if (businessEntityId) {\r\n initialEntry.businessEntityId = businessEntityId;\r\n flitSvc.getBusinessEntity(businessEntityId).then(({ data }) => {\r\n _handleSearch(data.legalName);\r\n });\r\n }\r\n if (userLocationType) {\r\n initialEntry.type = userLocationType;\r\n }\r\n setInitialValues(initialEntry);\r\n }\r\n\r\n }, [show]);\r\n useEffect(() => {\r\n flitSvc.getCountryCodes().then(({ data }) => {\r\n setCountryCodes(data);\r\n });\r\n _handleSearch('');\r\n\r\n }, []);\r\n\r\n const initialEntry = {\r\n id: \"\",\r\n name: \"\",\r\n type: \"\",\r\n businessEntityId: \"\",\r\n availableMode: \"\",\r\n isCommonLocation: false,\r\n address1: \"\",\r\n address2: \"\",\r\n city: \"\",\r\n province: \"\",\r\n country: \"\",\r\n postalCode: \"\",\r\n unlocode: \"\",\r\n latitude: \"\",\r\n longitude: \"\",\r\n additionalNotes: \"\"\r\n\r\n };\r\n const [initialValues, setInitialValues] = React.useState(initialEntry);\r\n const [isLoading, setIsLoading] = React.useState(false);\r\n const [businessEntityOptions, setBusinessEntityOptions] = React.useState([]);\r\n const [businessEntitySearchCount, setBusinessEntitySearchCount] = React.useState(0);\r\n const [businessEntitySearchString, setBusinessEntitySearchString] = React.useState(\"\");\r\n const [countryCodes, setCountryCodes] = React.useState([]);\r\n const PER_PAGE = 10;\r\n const LocationScheme = Yup.object().shape({\r\n name: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n businessEntityId: Yup.string().when(\"isCommonLocation\", {\r\n is: false,\r\n then: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n }\r\n ),\r\n type: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n availableMode: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n address1: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n country: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n latitude: Yup.number().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n longitude: Yup.number().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n\r\n });\r\n\r\n function _handleSearch(name) {\r\n setIsLoading(true);\r\n setBusinessEntitySearchString(name);\r\n flitSvc.searchBusinessEntityIdByName(name, PER_PAGE, 0)\r\n .then(({ data }) => {\r\n setBusinessEntityOptions(data.value);\r\n setBusinessEntitySearchCount(data['@odata.count']);\r\n setIsLoading(false);\r\n\r\n });\r\n }\r\n\r\n function _filterCallback(option, props) {\r\n return true;\r\n }\r\n\r\n function _handlePagination(e, shownResults) {\r\n\r\n if (\r\n businessEntityOptions.length > shownResults ||\r\n businessEntityOptions.length === businessEntitySearchCount\r\n ) {\r\n return;\r\n }\r\n\r\n flitSvc.searchBusinessEntityIdByName(businessEntitySearchString, shownResults - businessEntityOptions.length + 1, businessEntityOptions.length)\r\n .then(({ data }) => {\r\n setBusinessEntityOptions(businessEntityOptions.concat(data.value));\r\n setBusinessEntitySearchCount(data['@odata.count']);\r\n setIsLoading(false);\r\n\r\n });\r\n };\r\n function getCountry(addrComponents) {\r\n for (var i = 0; i < addrComponents.length; i++) {\r\n if (addrComponents[i].types[0] == \"country\") {\r\n return addrComponents[i].short_name;\r\n }\r\n if (addrComponents[i].types.length == 2) {\r\n if (addrComponents[i].types[0] == \"political\") {\r\n return addrComponents[i].short_name;\r\n }\r\n }\r\n }\r\n return '';\r\n }\r\n function getAdressInfoByType(addrComponents, type) {\r\n for (var i = 0; i < addrComponents.length; i++) {\r\n\r\n for (var j = 0; j < addrComponents[i].types.length; j++) {\r\n if (addrComponents[i].types[j] == type) return addrComponents[i].short_name;\r\n }\r\n }\r\n return '';\r\n }\r\n\r\n return (\r\n <>\r\n {fileRejections.length>0? intl.formatMessage({ id: \"DOCUMENT_NOT_SUPPORTED\" }) : \"\"}
\r\n \r\n {isLoading && \r\n\r\n \r\n\r\n {stableSort(vesselList, getSorting(order, orderBy))\r\n .slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n \r\n {row.vesselName} \r\n {row.country} \r\n {row.type} \r\n {row.mmsi} \r\n {intl.formatMessage({ id: \"OPEN\" })} \r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n {!isLoading && vesselList.length == 0 && (\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n\r\n
\r\n {!isLoading && {intl.formatMessage({ id: \"NO_VESSELS\" })}
{intl.formatMessage({ id: \"SEARCH_VESSEL_DESC\" })}
\r\n }\r\n \r\n\r\n \r\n {statusList.find(el => el.value == status)?.errorMessage.map( er => \r\n
\r\n {er}
\r\n )}\r\n \r\n \r\n {shipment.status == SHIPMENT_STATUS.DRAFT && }\r\n \r\n
\r\n \r\n {getRouteLocationIcon(shipment.originLocation?.type)}
\r\n \r\n {shipment.originLocation?.name}\r\n
\r\n \r\n {shipment.cargoReadyOn &&
\r\n {intl.formatMessage({ id: \"CARGO_READY\" })}
{moment(shipment.cargoReadyOn).tz(timezone).format('ll')}
}\r\n \r\n {moment(shipment.cargoReadyOn).tz(timezone).format('ll')}
\r\n {shipment.estimatedOriginPickupOn &&
\r\n {(shipment.route && shipment.route.length > 0) && {intl.formatMessage({ id: \"EST_ORIGIN_PICKUP\" })}
{moment(shipment.estimatedOriginPickupOn).tz(timezone).format('ll')}
}\r\n {shipment.originPickupOn && {moment(shipment.estimatedOriginPickupOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"ACTUAL_ORIGIN_PICKUP\" })}
{moment(shipment.originPickupOn).tz(timezone).format('ll')}
}\r\n {moment(shipment.originPickupOn).tz(timezone).format('ll')}
\r\n {shipment.route[0].estimatedDepartureOn &&
}\r\n {intl.formatMessage({ id: \"EST_DEPARTURE\" })}
{moment(shipment.route[0].estimatedDepartureOn).tz(timezone).format('ll')}
}\r\n {shipment.route[0].originDepartureOn && {moment(shipment.route[0].estimatedDepartureOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"ACTUAL_DEPARTURE\" })}
{moment(shipment.route[0].originDepartureOn).tz(timezone).format('ll')}
}\r\n {moment(shipment.route[0].originDepartureOn).tz(timezone).format('ll')}
\r\n \r\n \r\n
\r\n \r\n \r\n {shipment.route[0].type == ROUTE_TYPE.TRUCKING && {\r\n setRouteIndex(0);\r\n setIsLocationEdit(false);\r\n openRouteDialog();\r\n }}> \r\n */}\r\n \r\n
\r\n \r\n {shipment.route[0].containers && shipment.route[0].containers.length > 0 &&
\r\n \r\n
}\r\n {shipment.route[0].carrier && {intl.formatMessage({ id: \"CONTAINERS\" })}
\r\n {shipment.route[0].containers.map(item => \r\n {item.number + (shipment.route[0].containers.length > 1 ? ', ': '')}\r\n )}\r\n
\r\n \r\n {shipment.route[0].containers.map(item => \r\n {item.number + (shipment.route[0].containers.length > 1 ? ', ': '')}\r\n )}\r\n
{intl.formatMessage({ id: \"CARRIER\" })}
{shipment.route[0].carrier}
}\r\n {shipment.route[0].vessel && {shipment.route[0].carrier}
{intl.formatMessage({ id: \"VESSEL\" })}
{shipment.route[0].vessel}
}\r\n {shipment.route[0].cycutoffOn && {shipment.route[0].vessel}
{intl.formatMessage({ id: \"CY_CUTOFF\" })}
{moment(shipment.route[0].cycutoffOn).tz(timezone).format('ll')}
}\r\n {shipment.route[0].lastFreeOn && {moment(shipment.route[0].cycutoffOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"LAST_FREE\" })}
{moment(shipment.route[0].lastFreeOn).tz(timezone).format('ll')}
}\r\n {shipment.route[0].emptyReturnedOn && {moment(shipment.route[0].lastFreeOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"EMPTY_RETURNED\" })}
{moment(shipment.route[0].emptyReturnedOn).tz(timezone).format('ll')}
}\r\n {shipment.route[0].trackingNo && {moment(shipment.route[0].emptyReturnedOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"TRACKING_#\" })}
{shipment.route[0].trackingNo}
}\r\n {shipment.route[0].trackingNo}
\r\n \r\n
}\r\n \r\n \r\n
\r\n \r\n \r\n {getRouteLocationIcon(route.originLocation?.type)}
\r\n \r\n
\r\n \r\n {route.originLocation?.name}\r\n {\r\n setRouteIndex(index);\r\n setIsLocationEdit(true);\r\n openRouteDialog();\r\n }}> \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {shipment.route[index-1].estimatedArrivalOn &&
\r\n {intl.formatMessage({ id: \"EST_ARRIVAL\" })}
{moment(shipment.route[index-1].estimatedArrivalOn).tz(timezone).format('ll')}
}\r\n {shipment.route[index-1].destinationArrivalOn && {moment(shipment.route[index-1].estimatedArrivalOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"ACTUAL_ARRIVAL\" })}
{moment(shipment.route[index-1].destinationArrivalOn).tz(timezone).format('ll')}
}\r\n {moment(shipment.route[index-1].destinationArrivalOn).tz(timezone).format('ll')}
\r\n {route.estimatedDepartureOn &&
\r\n {intl.formatMessage({ id: \"EST_DEPARTURE\" })}
{moment(route.estimatedDepartureOn).tz(timezone).format('ll')}
}\r\n {route.originDepartureOn && {moment(route.estimatedDepartureOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"ACTUAL_DEPARTURE\" })}
{moment(route.originDepartureOn).tz(timezone).format('ll')}
}\r\n {moment(route.originDepartureOn).tz(timezone).format('ll')}
\r\n {\r\n deleteRoute(index);\r\n }}> \r\n \r\n \r\n
}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {route.type == ROUTE_TYPE.TRUCKING && {\r\n setRouteIndex(index);\r\n setIsLocationEdit(false);\r\n openRouteDialog();\r\n }}>\r\n */}\r\n
\r\n \r\n {route.containers && route.containers.length > 0 &&
\r\n \r\n
}\r\n {route.carrier && {intl.formatMessage({ id: \"CONTAINERS\" })}
\r\n {route.containers.map(item => \r\n {item.number + (route.containers.length > 1 ? ', ': '')}\r\n )}\r\n
\r\n \r\n {route.containers.map(item => \r\n {item.number + (route.containers.length > 1 ? ', ': '')}\r\n )}\r\n
{intl.formatMessage({ id: \"CARRIER\" })}
{route.carrier}
}\r\n {route.vessel && {route.carrier}
{intl.formatMessage({ id: \"VESSEL\" })}
{route.vessel}
}\r\n {route.cycutoffOn && {route.vessel}
{intl.formatMessage({ id: \"CY_CUTOFF\" })}
{moment(route.cycutoffOn).tz(timezone).format('ll')}
}\r\n {route.lastFreeOn && {moment(route.cycutoffOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"LAST_FREE\" })}
{moment(route.lastFreeOn).tz(timezone).format('ll')}
}\r\n {route.emptyReturnedOn && {moment(route.lastFreeOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"EMPTY_RETURNED\" })}
{moment(route.emptyReturnedOn).tz(timezone).format('ll')}
}\r\n {route.trackingNo && {moment(route.emptyReturnedOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"TRACKING_#\" })}
{route.trackingNo}
}\r\n {route.trackingNo}
{getRouteLocationIcon(shipment.destinationLocation?.type)}
\r\n \r\n {shipment.destinationLocation?.name}\r\n
\r\n \r\n {shipment.route.length > 0 &&
\r\n \r\n {shipment.route[shipment.route.length - 1].estimatedArrivalOn &&
}\r\n {shipment.estimatedDeliveredOn && {intl.formatMessage({ id: \"EST_ARRIVAL\" })}
{moment(shipment.route[shipment.route.length - 1].estimatedArrivalOn).tz(timezone).format('ll')}
}\r\n {shipment.route[shipment.route.length - 1].destinationArrivalOn && {moment(shipment.route[shipment.route.length - 1].estimatedArrivalOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"ACTUAL_ARRIVAL\" })}
{moment(shipment.route[shipment.route.length - 1].destinationArrivalOn).tz(timezone).format('ll')}
}\r\n {moment(shipment.route[shipment.route.length - 1].destinationArrivalOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"EST_DELIVERED\" })}
{moment(shipment.estimatedDeliveredOn).tz(timezone).format('ll')}
}\r\n {shipment.deliveredOn && {moment(shipment.estimatedDeliveredOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"ACTUAL_DELIVERED\" })}
{moment(shipment.deliveredOn).tz(timezone).format('ll')}
}\r\n {moment(shipment.deliveredOn).tz(timezone).format('ll')}
{intl.formatMessage({ id: \"CUSTOMER_INFO\" })}
\r\n \r\n{intl.formatMessage({ id: \"BASIC\" })}
\r\n \r\n{intl.formatMessage({ id: \"CARGO_INFORMATION\" })}
\r\n \r\n{intl.formatMessage({ id: \"CONTAINER\" })}
\r\n\r\n {shipment.container?.map((row, index) => (\r\n
\r\n \r\n
\r\n
\r\n
\r\n ))}\r\n \r\n }\r\n \r\n
{option.id == 'common' ? {option.legalName} : option.legalName }
\r\n\r\n )}\r\n paginationText={intl.formatMessage({ id: \"SHOW_MORE_RESULTS\" })}\r\n useCache={false}\r\n ref = {businessEntityRef}\r\n />\r\n {intl.formatMessage({ id: \"NO_LOCATIONS_TO_DISPLAY\" })}
\r\n \r\n\r\n {isLoading && \r\n \r\n \r\n \r\n {locationList.map((row) => {\r\n return (\r\n {\r\n openLocationDialog(row.id)\r\n }}>\r\n {row.name} \r\n {cf.format('LocationType', row.type, intl.locale)} \r\n {cf.format('AvailableMode', row.availableMode, intl.locale)} \r\n {(row.address1 ? row.address1 + \", \" : \"\") + (row.address2 ? row.address2 + \", \" : \"\") + (row.city != null ? row.city + \", \" : \"\") + (row.province != null ? row.province + \" \" : \"\") + (row.postalCode != null ? row.postalCode + \", \" : \"\") + (row.country != null ? row.country : \"\")} \r\n {row.businessEntity ? row.businessEntity.legalName : {intl.formatMessage({ id: \"COMMON_LOCATION\" })}} \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n {!isLoading && {intl.formatMessage({ id: \"NO_BUSINESS_ENTITY_TO_DISPLAY\" })}
\r\n \r\n\r\n {isLoading && \r\n \r\n \r\n \r\n {businessEntityList.map((row) => {\r\n return (\r\n {\r\n openBusinessEntityDialog(row.id)\r\n }}>\r\n {row.legalName} \r\n {row.localizedLegalName} \r\n {row.createdOn} {(row.address != null ? row.address : \"\")} \r\n \r\n \r\n {row.type == BUSINESS_ENTITY_TYPE.INDIVIDUAL ? intl.formatMessage({ id: \"INDIVIDUAL\" }) : row.type == BUSINESS_ENTITY_TYPE.CORPORATION ? intl.formatMessage({ id: \"CORPORATION\" }) : intl.formatMessage({ id: \"UNDETERMINED\" })}\r\n \r\n \r\n \r\n \r\n {cf.format('BusinessType', row.businessType, intl.locale)}\r\n \r\n \r\n {row.registeredCountry} \r\n \r\n \r\n {cf.format('VerificationStatus', row.verificationStatus, intl.locale)}\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n {!isLoading && \r\n {errors.name && touched.name ? (\r\n
\r\n {errors.name}
\r\n ) : null}\r\n \r\n {errors.code && touched.code ? (\r\n
\r\n {errors.code}
\r\n ) : null}\r\n \r\n {errors.validFrom && touched.validFrom ? (\r\n
\r\n {errors.validFrom}
\r\n ) : null}\r\n \r\n {errors.validTo && touched.validTo ? (\r\n
\r\n {errors.validTo}
\r\n ) : null}\r\n \r\n\r\n \r\n \r\n {values.feeParams.map((param, index) =>\r\n \r\n \r\n {param.name}\r\n \r\n \r\n \r\n )}\r\n
\r\n }\r\n {tabValue === 1 &&\r\n \r\n
\r\n{ return { value: param.name, readOnly: true, className: \"pl-2 pr-2\" }}),\r\n values.feeParams.map(param=>{ return { value: param.value, className: \"pl-2 pr-2 text-left\" }})]}\r\n overflow=\"wrap\"\r\n valueRenderer={cell => Number(cell.value.replace(/[^0-9.-]+/g,\"\"))}\r\n attributesRenderer={(cell) => {\r\n const obj = Object.create({});\r\n if (cell.hint) obj['data-hint'] = cell.hint;\r\n return obj;\r\n }}\r\n onCellsChanged={changes => {\r\n changes.forEach(({ cell, row, col, value }) => {\r\n setFieldValue(`feeParams.${col}.value`,value.replace(/[^0-9.-]+/g,\"\"));\r\n });\r\n }}\r\n />\r\n
\r\n \r\n
\r\n\r\n }\r\n \r\n
\r\n\r\n {(user.userRole?.find(r => r.role == ROLES.DEVELOPER) || (!isLoading && values.feeTemplate && values.feeTemplate?.length == 0)) && <>\r\n \r\n {errors.feeParams && errors.feeParams[index]?.value && touched.feeParams && touched.feeParams[index]?.value ? (\r\n
\r\n {errors.feeParams[index]?.value}
\r\n ) : null}\r\n {param.hint}\r\n {intl.formatMessage({ id: \"ADVANCED_HINT\" })}
\r\n
\r\n \r\n
\r\n \r\n {intl.formatMessage({ id: \"DEVELOPER\" })}\r\n
\r\n \r\n
\r\n
\r\n ) : null}\r\n {values.feeTemplate?.length > 0 ? <> \r\n {intl.formatMessage({ id: \"FORM_ERROR\" })}\r\n
\r\n \r\n {/* {JSON.stringify(errors)} */}\r\n
\r\n {intl.formatMessage({ id: \"NO_FEE_TO_DISPLAY\" })}
\r\n \r\n\r\n {isLoading && \r\n \r\n \r\n \r\n {feeList.map((row) => {\r\n return (\r\n \r\n {row.code} \r\n {row.name} \r\n \r\n \r\n {cf.format('FeeCategory', row.category, intl.locale)}\r\n \r\n \r\n {row.validFrom} {row.validTo} {row.isActive ? {intl.formatMessage({ id: \"FEE_ACTIVE\" })} : {intl.formatMessage({ id: \"FEE_INACTIVE\" })}} \r\n {row['feeTemplate@odata.count'] > 0 ? :\r\n } \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n {!isLoading && {option.legalName}
\r\n\r\n )}\r\n paginationText={intl.formatMessage({ id: \"SHOW_MORE_RESULTS\" })}\r\n useCache={false}\r\n />\r\n {intl.formatMessage({ id: \"NO_INVOICE_TO_DISPLAY\" })}
\r\n \r\n\r\n {isLoading && \r\n \r\n \r\n \r\n {invoiceList.map((row) => { \r\n return (\r\n {\r\n //openInvoice(row);\r\n // if (user.userRole?.find(r => r.role == ROLES.OPERATOR) && (row.status == INVOICE_STATUS.DRAFT || row.status == INVOICE_STATUS.OUTSTANDING)) \r\n // { \r\n // history.push(\"/invoice/\" + row.shipmentId + \"/edit/\" + row.id);\r\n // } else {\r\n // openInvoice(row);\r\n // }\r\n //}}\r\n >\r\n openInvoice(row)}>\r\n \r\n {cf.format('InvoiceInputType', row.inputType, intl.locale)}\r\n \r\n \r\n openInvoice(row)}>{row.invoiceNumber} \r\n \r\n openInvoice(row)}>\r\n \r\n {cf.format('InvoiceStatus', row.status, intl.locale)}\r\n \r\n \r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && openInvoice(row)}>{row.billedTo.legalName} }\r\n openInvoice(row)}>{row.issuedOn} \r\n openInvoice(row)}>{row.dueOn} \r\n openInvoice(row)}>{row.paidOn ? {row.paidOn} : '-'} \r\n openInvoice(row)}>{cf.format('CurrencyCode',row.currency,intl.locale)} {(row.feeEntry?.reduce(function (a, b) {\r\n return a + b[\"price\"];\r\n }, 0) + \r\n row.invoiceEntry?.reduce(function (a, b) {\r\n return a + b[\"amount\"];\r\n }, 0) || 0).toFixed(2) }\r\n \r\n \r\n {row.shipmentId ? {\"FLIT-\"+row.shipmentId} :\r\n row.consolId ? {\"FLIT-C-\"+row.consolId} : \"\"}\r\n \r\n {/*openInvoice(row)}>{(row.feeEntry?.reduce(function (a, b) {\r\n return a + b[\"price\"];\r\n }, 0) + \r\n row.invoiceEntry?.reduce(function (a, b) {\r\n return a + b[\"amount\"];\r\n }, 0) - \r\n row.payments?.filter(p=>p.status == PAYMENT_STATUS.PAID).reduce(function (a, b) { // TODO: payment status filter\r\n return a + b[\"amount\"];\r\n }, 0) || 0) == 0 ? \"-\" : cf.format('CurrencyCode',row.currency,intl.locale) + \" \" + (row.feeEntry?.reduce(function (a, b) {\r\n return a + b[\"price\"];\r\n }, 0) + \r\n row.invoiceEntry?.reduce(function (a, b) {\r\n return a + b[\"amount\"];\r\n }, 0) - \r\n row.payments?.filter(p=>p.status == PAYMENT_STATUS.PAID).reduce(function (a, b) { // TODO: payment status filter\r\n return a + b[\"amount\"];\r\n }, 0) || 0).toFixed(2) }\r\n */}\r\n \r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && (row.status == INVOICE_STATUS.DRAFT ) ?\r\n :\r\n {\r\n e.stopPropagation();\r\n downloadInvoice(row);\r\n }}>{downloadingRow == row.id ? : }\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n {!isLoading && \r\n \r\n {relatedInvoices?.filter(invoice => invoice.id != invoiceId).map((row, index) => (\r\n
\r\n {\r\n history.push('/invoice/' + row.id);\r\n }} style={{cursor:\"pointer\"}}>\r\n
{row.issuedOn} \r\n
$ {(row.feeEntry?.reduce(function (a, b) {\r\n return a + b[\"price\"];\r\n }, 0) + \r\n row.invoiceEntry?.reduce(function (a, b) {\r\n return a + b[\"amount\"];\r\n }, 0)).toFixed(2) }\r\n
\r\n\r\n
\r\n
\r\n ))}\r\n\r\n :\r\n $ {(row.feeEntry?.reduce(function (a, b) {\r\n return a + b[\"price\"];\r\n }, 0) + \r\n row.invoiceEntry?.reduce(function (a, b) {\r\n return a + b[\"amount\"];\r\n }, 0)).toFixed(2) }\r\n
\r\n
{intl.formatMessage({ id: \"NO_RELATED_INVOICE\" })}
\r\n }\r\n \r\n {invoice.shipmentId ? {\"FLIT-\"+invoice.shipmentId} :\r\n invoice.consolId ? {\"FLIT-C-\"+invoice.consolId} : \"\"}\r\n
{invoice.issuedOn ?
{invoice.dueOn ?
$ {(invoice.feeEntry?.reduce(function (a, b) {\r\n return a + b[\"price\"];\r\n }, 0) + \r\n invoice.invoiceEntry?.reduce(function (a, b) {\r\n return a + b[\"amount\"];\r\n }, 0) || 0).toFixed(2) }\r\n
{invoice.paidOn ?
$ {(invoice.feeEntry?.reduce(function (a, b) {\r\n return a + b[\"price\"];\r\n }, 0) + \r\n invoice.invoiceEntry?.reduce(function (a, b) {\r\n return a + b[\"amount\"];\r\n }, 0) - \r\n invoice.payments?.filter(p=>p.status == PAYMENT_STATUS.PAID).reduce(function (a, b) { // TODO: payment status filter\r\n return a + b[\"amount\"];\r\n }, 0) || 0).toFixed(2) }\r\n
\r\n
{intl.formatMessage({ id: \"BILL_TO\" })}
\r\n \r\n\r\n {invoice.billedTo?.address}\r\n \r\n
\r\n
{intl.formatMessage({ id: \"RATE_INFORMATION\" })}
\r\n {message ? (
\r\n \r\n {message}
) : null}\r\n \r\n \r\n {payments?.filter(el => user.userRole?.find(r => r.role == ROLES.OPERATOR) ||el.status != PAYMENT_STATUS.DRAFT).map((row, index) => (\r\n
\r\n \r\n {row.createdOn}
\r\n{row.createdOn} \r\n \r\n
\r\n
\r\n
\r\n ))}\r\n\r\n \r\n }\r\n \r\n \r\n
\r\n
{intl.formatMessage({ id: \"CONTAINER\" })}
\r\n\r\n {shipment.container?.map((row, index) => (\r\n
\r\n \r\n
\r\n
\r\n
\r\n ))}\r\n\r\n \r\n }\r\n {consol && <>\r\n \r\n
{intl.formatMessage({ id: \"CONSOL_DETAILS\" })}
\r\n{intl.formatMessage({ id: \"NOTES\" })}
\r\n{intl.formatMessage({ id: \"DOCUMENTS\" })}
\r\n\r\n {JSON.stringify(activityId)}\r\n
*/}\r\n\r\n\r\n \r\n {invoiceEntries && invoiceEntries.length != 0 && \r\n\r\n \r\n\r\n {stableSort(invoiceEntries, getSorting(order, orderBy))\r\n .slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage)\r\n .map((row, index) => {\r\n const labelId = `enhanced-table-checkbox-${index}`;\r\n\r\n return (\r\n {\r\n openInvoiceEntryDialog(row);\r\n }}\r\n >\r\n \r\n {\r\n e.stopPropagation();\r\n setInvoiceEntries(invoiceEntries.filter(el=>el != row));\r\n }} color=\"primary\">\r\n {cf.format('InventoryEntryType', row.type, intl.locale)}\r\n \r\n {row.name} \r\n {row.reason} \r\n {\"$\" + row.amount?.toFixed(2)} \r\n \r\n );\r\n })}\r\n\r\n \r\n }\r\n {invoiceEntries == 0 &&
\r\n \r\n \r\n
\r\n\r\n
}\r\n {intl.formatMessage({ id: \"NO_ADDITIONAL_ENTRIES_TO_DISPLAY\" })}
\r\n\r\n
');\r\n return newStr;\r\n }\r\n\r\n function downloadFile(documentId, fileName) {\r\n flitSvc.getDownloadLink(documentId).then(res => {\r\n // on the fly download trick\r\n const link = document.createElement('a');\r\n link.href = res.data.url;\r\n link.download = fileName;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n })\r\n }\r\n\r\n return (<>\r\n \r\n\r\n
{intl.formatMessage({ id: \"SCHEDULE_INFORMATION\" })}
\r\n \r\n{intl.formatMessage({ id: \"CARGO_INFORMATION\" })}
\r\n \r\n: \" \"}\r\n {quoteRequest.measurementSystem == MEASUREMENT_SYSTEM_TYPE.METRIC ? \r\n pk.weight + \" kg\": pk.weight + \" lb\"} x {pk.numberOfPackages} {pk.packageType} \r\n \r\n
{intl.formatMessage({ id: \"ADDITIONAL_SERVICES\" })}
\r\n \r\n{intl.formatMessage({ id: \"NOTES\" })}
\r\n \r\n');\r\n return newStr;\r\n }\r\n\r\n // minimize aside menu\r\n // var body = KTUtil.getBody();\r\n // KTUtil.removeClass\r\n // KTUtil.addClass(body, \"aside-minimize\");\r\n\r\n\r\n const getInputClasses = (fieldname) => {\r\n if (formik.touched[fieldname] && formik.errors[fieldname]) {\r\n return \"is-invalid\";\r\n }\r\n\r\n if (formik.touched[fieldname] && !formik.errors[fieldname]) {\r\n return \"is-valid\";\r\n }\r\n\r\n return \"\";\r\n };\r\n\r\n const InvoiceScheme = Yup.object().shape({\r\n invoiceNumber: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n dueOn: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n issuedOn: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n\r\n\r\n });\r\n\r\n\r\n useEffect(() => {\r\n subheader.setTitle(`${intl.formatMessage({ id: \"INVOICE\" })}`);\r\n subheader.setBreadcrumbs([{ title: intl.formatMessage({ id: \"INVOICE\" }), pathname: \"/invoice\" }, { title: initialValues.id ? initialValues.invoiceNumber : intl.formatMessage({ id: \"NEW_INVOICE\" })}])\r\n // return function cleanup() {\r\n // var body = KTUtil.getBody();\r\n // KTUtil.removeClass(body, \"aside-minimize\");\r\n // }\r\n }, []);\r\n\r\n useEffect(() => {\r\n refresh();\r\n\r\n }, [invoiceId]);\r\n\r\n function refresh() {\r\n setShowConfirmModal(false);\r\n setShowVoidModal(false);\r\n setShowErrorModal(false);\r\n setShowPreviewModal(false);\r\n setIsSubmitting(false);\r\n setIsLoading(true);\r\n if (shipmentId) {\r\n flitSvc.getShipment(shipmentId).then(({ data }) => {\r\n data.cargoReadyOn = data.cargoReadyOn ? new Date(data.cargoReadyOn) : '';\r\n data.estimatedOriginPickupOn = data.estimatedOriginPickupOn ? new Date(data.estimatedOriginPickupOn) : '';\r\n data.estimatedDeliveredOn = data.estimatedDeliveredOn ? new Date(data.estimatedDeliveredOn) : '';\r\n data.originPickupOn = data.originPickupOn ? new Date(data.originPickupOn) : '';\r\n data.deliveredOn = data.deliveredOn ? new Date(data.deliveredOn) : '';\r\n setShipment(data);\r\n var activityId = data.activity?.id;\r\n if (invoiceId) { //edit\r\n flitSvc.getInvoice(invoiceId).then(({data})=> {\r\n data.issuedOn = data.issuedOn ? new Date(data.issuedOn) : '';\r\n data.dueOn = data.dueOn ? new Date(data.dueOn) : '';\r\n data.paidOn = data.paidOn ? new Date(data.paidOn) : '';\r\n setInitialValues(data);\r\n setInvoiceEntries(data.invoiceEntry);\r\n setInitialFeeEntries(data.feeEntry);\r\n setIsLoading(false);\r\n });\r\n } else { //new\r\n flitSvc.getShipmentInvoiceNames(shipmentId).then(({data}) => {\r\n initialValues.invoiceNumber = \"INV-\" + shipmentId + \"-\" + (data.length+1);\r\n initialValues.shipmentId = shipmentId;\r\n flitSvc.getStakeholders(activityId).then(({ data }) => {\r\n const owner = data.find(el => el.type === STAKEHOLDER_TYPE.OWNER);\r\n if (owner) {\r\n initialValues.billedToId = owner.userId ? owner.user.businessEntityId : owner.businessEntityId;\r\n }\r\n\r\n setInitialValues(initialValues);\r\n \r\n });\r\n setIsLoading(false);\r\n });\r\n }\r\n \r\n });\r\n } else if (consolId) {\r\n flitSvc.getConsol(consolId).then(({ data }) => {\r\n setConsol(data);\r\n if (data.consolSchedule.shipmentId) {\r\n setShipment(data.consolSchedule.shipment);\r\n }\r\n var activityId = data.activityId;\r\n if (invoiceId) { //edit\r\n flitSvc.getInvoice(invoiceId).then(({data})=> {\r\n data.issuedOn = data.issuedOn ? new Date(data.issuedOn) : '';\r\n data.dueOn = data.dueOn ? new Date(data.dueOn) : '';\r\n data.paidOn = data.paidOn ? new Date(data.paidOn) : '';\r\n setInitialValues(data);\r\n setInvoiceEntries(data.invoiceEntry);\r\n setInitialFeeEntries(data.feeEntry);\r\n setIsLoading(false);\r\n });\r\n } else { //new\r\n flitSvc.getConsolInvoiceNames(consolId).then(({data}) => {\r\n initialValues.invoiceNumber = \"INV-C-\" + consolId + \"-\" + (data.length+1);\r\n initialValues.consolId = consolId;\r\n flitSvc.getStakeholders(activityId).then(({ data }) => {\r\n const owner = data.find(el => el.type === STAKEHOLDER_TYPE.OWNER);\r\n if (owner) {\r\n initialValues.billedToId = owner.userId ? owner.user.businessEntityId : owner.businessEntityId;\r\n }\r\n\r\n setInitialValues(initialValues);\r\n \r\n });\r\n setIsLoading(false);\r\n });\r\n }\r\n \r\n });\r\n }\r\n\r\n }\r\n\r\n function handleFeeEntriesChange(entries) {\r\n setFeeEntries(entries);\r\n }\r\n function handleInvoiceEntriesChange(entries) {\r\n setInvoiceEntries(entries);\r\n }\r\n function importFeeEntry(entries) {\r\n setInitialFeeEntries(entries);\r\n }\r\n\r\n function onHideErrorModal() {\r\n setShowErrorModal(false);\r\n }\r\n\r\n function onHidePreviewModal() {\r\n setShowPreviewModal(false);\r\n }\r\n\r\n/* function downloadInvoice(id) {\r\n setIsDownloading(true);\r\n\r\n flitSvc.downloadInvoice(id).then(({ data }) => {\r\n\r\n const blob = new Blob([data], {\r\n type: 'application/pdf'\r\n })\r\n \r\n var link=document.createElement('a');\r\n link.href=window.URL.createObjectURL(blob);\r\n link.download=\"Invoice \" + invoice.invoiceNumber + \".pdf\";\r\n link.click();\r\n }).finally(() => {\r\n setIsDownloading(false);\r\n });\r\n}*/\r\n\r\n return (<>\r\n {!isLoading &&\r\n
\r\n { consol && }\r\n
\r\n \r\n \r\n
\r\n {intl.formatMessage({ id: \"ROUTE\" })}
\r\n \r\n{JSON.stringify(quoteRequest)}
\r\n \r\n \r\n {option.id == \"noentity\"\r\n ? option.legalName\r\n : option.legalName}\r\n
\r\n )}\r\n paginationText={intl.formatMessage({\r\n id: \"SHOW_MORE_RESULTS\",\r\n })}\r\n useCache={false}\r\n ref = {businessEntityRef}\r\n />\r\n \r\n {intl.formatMessage({ id: \"NO_SCHEDULE_TO_DISPLAY\" })}\r\n \r\n
\r\n {intl.formatMessage({ id: \"NO_CONSOL_ORDER\" })}\r\n \r\n
\r\n {isLoading && \r\n \r\n \r\n \r\n \r\n {consolList.map((row) => {\r\n return (\r\n history.push('/consol/'+row.id)}\r\n key={row.id} >\r\n {cf.format('FreightMode',row.activity.quoteRequest[0].mode,intl.locale)} \r\n \r\n {cf.format('ConsolStatus',row.status,intl.locale)} \r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) && {row.activity.quoteRequest[0].submittedBy.businessEntity?.legalName} }\r\n {row.activity.quoteRequest[0].submittedOn} {row.consolSchedule.estimatedDepartureOn} {row.consolSchedule.originLocation.name} \r\n {row.consolSchedule.destinationLocation.name} \r\n {row.totalWeight == 0 ? row.activity.quoteRequest[0].totalWeight + (row.activity.quoteRequest[0].measurementSystem == MEASUREMENT_SYSTEM_TYPE.METRIC ? ' kg' : ' lb') : row.totalWeight + (row.measurementSystem == MEASUREMENT_SYSTEM_TYPE.METRIC ? ' kg' : ' lb')} \r\n {row.totalVolume == 0 ? row.activity.quoteRequest[0].totalVolume + (row.activity.quoteRequest[0].measurementSystem == MEASUREMENT_SYSTEM_TYPE.METRIC ? ' cbm' : ' cbf') : row.totalVolume + (row.measurementSystem == MEASUREMENT_SYSTEM_TYPE.METRIC ? ' cbm' : ' cbf')} \r\n \r\n );\r\n })}\r\n \r\n \r\n
}\r\n {!isLoading && ');\r\n return newStr;\r\n }\r\n\r\n const handleDocumentGridRefresh = () => {\r\n setForceUpdate(forceUpdate + 1);\r\n }\r\n const handleDocumentListUpdate = () => {\r\n setDocumentTypeInfos([...DOCUMENT_TYPE_INFOS]);\r\n setForceUpdate(forceUpdate + 1);\r\n }\r\n return (<>\r\n\r\n {!isLoading &&\r\n
\r\n
}\r\n {intl.formatMessage({ id: \"QUOTE_REQUEST_RECEIVED\" })}
\r\n {intl.formatMessage({ id: \"QUOTE_REQUEST_RECEIVED_NOTIFICATION\" })}\r\n\r\n {(user.userRole?.find(r => r.role == ROLES.OPERATOR) || consol.submittedById == user.id) && \r\n {(consol.status == CONSOL_STATUS.SUBMITTED || consol.status == CONSOL_STATUS.CONFIRMED) && {intl.formatMessage({ id: \"CANCEL_CONSOL_ORDER\" })} }\r\n }\r\n
*/}\r\n \r\n {tab2Value === 0 &&\r\n
{JSON.stringify(consol)}
\r\n \r\n \r\n \r\n
\r\n \r\n {intl.formatMessage({ id: \"DROPZONE_DESC\" }) }\r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default ConsolSchedule;\r\n","import React, { useContext, useState, useEffect } from \"react\";\r\nimport { useIntl, FormattedMessage, injectIntl } from \"react-intl\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { Link, useHistory, useLocation, useParams } from \"react-router-dom\";\r\nimport PropTypes from \"prop-types\";\r\nimport { FlitServiceContext } from \"../../../services/flitService\";\r\nimport Moment from 'react-moment';\r\nimport moment from \"moment-timezone\";\r\nimport { makeStyles, lighten, withStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport { Card, CardHeaderToolbar, CardBody, CardHeader } from \"../../../../_metronic/_partials/controls/Card\";\r\nimport { useSubheader } from \"../../../../_metronic/layout/_core/MetronicSubheader\";\r\nimport {\r\n Paper, Table, TableHead, TableRow, TableCell, TableBody, Checkbox, Toolbar, Typography,\r\n Tooltip, IconButton, TableSortLabel, TablePagination, Switch, FormControlLabel, LinearProgress, TableFooter, Tabs, Tab,\r\n} from \"@material-ui/core\";\r\nimport { Form, ToggleButton, ToggleButtonGroup, Row, Col, DropdownButton, Dropdown, Button,ButtonGroup, Modal } from \"react-bootstrap\";\r\n//import { ConsolScheduleDialog } from \"./ConsolScheduleDialog\";\r\nimport { AsyncTypeahead } from 'react-bootstrap-typeahead';\r\nimport cf from '../../../services/codeformatter';\r\nimport { ROLES, FREIGHT_MODE, CONSOL_STATUS, MEASUREMENT_SYSTEM_TYPE, INVOICE_STATUS } from \"../../../services/flitEnum\";\r\nimport { getModeCssClasses, getScheduleStatusCssClasses,getConsolStatusCssClasses } from '../ConsolUIHelper';\r\nimport FilterListIcon from \"@material-ui/icons/FilterList\";\r\nimport clsx from 'clsx';\r\nimport { getStatusCssClasses } from \"../../Invoice/InvoiceUIHelper\";\r\nimport { forkJoin } from \"rxjs\";\r\n\r\nfunction desc(a, b, orderBy) {\r\n if (b[orderBy] < a[orderBy]) {\r\n return -1;\r\n }\r\n if (b[orderBy] > a[orderBy]) {\r\n return 1;\r\n }\r\n return 0;\r\n}\r\n\r\nfunction stableSort(array, cmp) {\r\n const stabilizedThis = array.map((el, index) => [el, index]);\r\n stabilizedThis.sort((a, b) => {\r\n const order = cmp(a[0], b[0]);\r\n if (order !== 0) return order;\r\n return a[1] - b[1];\r\n });\r\n return stabilizedThis.map(el => el[0]);\r\n}\r\n\r\nfunction getSorting(order, orderBy) {\r\n return order === 'desc' ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);\r\n}\r\nconst headRows = [\r\n { id: 'status', align: 'center', disablePadding: false, label: \"STATUS\", sortable: true },\r\n { id: 'invoiceNumber', align: 'center', disablePadding: false, label: \"INVOICE_NUMBER\", sortable: false },\r\n { id: 'dueOn', align: 'center', disablePadding: true, label: 'DUE_ON', sortable:false },\r\n { id: 'amount', align: 'right', disablePadding: false, label: 'AMOUNT' },\r\n { id: 'houseBillNo', align: 'center', disablePadding: false, label: \"HBL\", sortable: false },\r\n { id: 'billedTo', align: 'center', disablePadding: false, label: \"BILLED_TO\", sortable: false },\r\n { id: 'action', align: 'center', disablePadding: false, label: 'ACTION' },\r\n \r\n];\r\n\r\nconst StyledTableCell = withStyles(theme => ({\r\n body: {\r\n fontSize: 12,\r\n },\r\n}))(TableCell);\r\n\r\nconst ACTION_KEYS = {\r\n CONFIRM: \"CONFIRM\",\r\n EDIT: \"EDIT\",\r\n VOID : \"VOID_INVOICE\",\r\n DELETE : \"DELETE\"\r\n}\r\nconst ACTION2_KEYS = {\r\n CONFIRMED_SELECTED: \"CONFIRMED_SELECTED\",\r\n VOID_SELECTED: \"VOID_SELECTED\",\r\n DELETE_SELECTED: \"DELETE_SELECTED\",\r\n}\r\n\r\nfunction InvoiceTableHead(props) {\r\n const intl = useIntl();\r\n const { user } = useSelector(state => state.auth);\r\n const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;\r\n const createSortHandler = (property) => (event) => {\r\n onRequestSort(event, property);\r\n };\r\n\r\n return (\r\n {fileRejections.length>0? intl.formatMessage({ id: \"DOCUMENT_NOT_SUPPORTED\" }) : \"\"}
\r\n \r\n {numSelected > 0 ? (\r\n \r\n {numSelected} selected\r\n \r\n ) : (\r\n \r\n Orders\r\n \r\n )}\r\n
\r\n \r\n \r\n {numSelected > 0 ? ( <>\r\n \r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) &&\r\n customAction2(e)}>\r\n invoiceList.find(o=> o.id == id).status != INVOICE_STATUS.DRAFT)}>{intl.formatMessage({ id: \"CONFIRMED_SELECTED\"})} \r\n invoiceList.find(o=> o.id == id).status != INVOICE_STATUS.OUTSTANDING)}>{intl.formatMessage({ id: \"VOID_SELECTED\"})} \r\n invoiceList.find(o=> o.id == id).status != INVOICE_STATUS.DRAFT)}>{intl.formatMessage({ id: \"DELETE_SELECTED\"})} \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\nInvoiceTableToolbar.propTypes = {\r\n numSelected: PropTypes.number.isRequired,\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n root: {\r\n width: '100%',\r\n marginTop: theme.spacing(3),\r\n },\r\n paper: {\r\n width: '100%',\r\n marginBottom: theme.spacing(2),\r\n },\r\n table: {\r\n minWidth: 100\r\n },\r\n tableWrapper: {\r\n overflowX: 'auto',\r\n },\r\n}));\r\n\r\n\r\n\r\nfunction ConsolScheduleInvoices(props) {\r\n const subheader = useSubheader();\r\n const { intl, invoiceList, history, refreshCallback } = props;\r\n const { user } = useSelector(state => state.auth);\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [dense, setDense] = useState(true);\r\n const [totalRows, setTotalRows] = useState(0);\r\n let { id } = useParams();\r\n\r\n const [order, setOrder] = React.useState('desc');\r\n const [orderBy, setOrderBy] = React.useState('status');\r\n const [selected, setSelected] = React.useState([]);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\r\n const [statusFilter, setStatusFilter] = React.useState();\r\n const [showConfirmDialog,setShowConfirmDialog] = React.useState(false);\r\n \r\n const classes = useStyles();\r\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, invoiceList.length - page * rowsPerPage);\r\n \r\n useEffect(() => {\r\n\r\n }, [invoiceList]);\r\n \r\n\r\n function _filterCallback(option, props) {\r\n return true;\r\n }\r\n const isSelected = name => selected.indexOf(name) !== -1;\r\n function handleRequestSort(event, property) {\r\n const isDesc = orderBy === property && order === 'desc';\r\n setOrder(isDesc ? 'asc' : 'desc');\r\n setOrderBy(property);\r\n}\r\n\r\nfunction handleSelectAllClick(event) {\r\n if (event.target.checked) {\r\n const newSelecteds = invoiceList.map(n => n.id);\r\n setSelected(newSelecteds);\r\n return;\r\n }\r\n setSelected([]);\r\n}\r\n\r\nfunction handleClick(event, name) {\r\n const selectedIndex = selected.indexOf(name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n selected.slice(0, selectedIndex),\r\n selected.slice(selectedIndex + 1),\r\n );\r\n }\r\n\r\n setSelected(newSelected);\r\n}\r\n\r\nfunction handleChangePage(event, newPage) {\r\n setPage(newPage);\r\n}\r\n\r\nfunction handleChangeRowsPerPage(event) {\r\n setRowsPerPage(+event.target.value);\r\n}\r\n function onHideConfirmDialog(){\r\n setShowConfirmDialog(false);\r\n }\r\n\r\n function customAction(actionKey, id, consolId) {\r\n switch (actionKey) {\r\n case ACTION_KEYS.CONFIRM:\r\n setShowConfirmDialog({action:actionKey,id:id});\r\n break;\r\n case ACTION_KEYS.VOID:\r\n setShowConfirmDialog({action:actionKey,id:id});\r\n break;\r\n case ACTION_KEYS.EDIT:\r\n history.push('/invoice/edit/' + id + '?consolId=' + consolId );\r\n break;\r\n case ACTION_KEYS.DELETE:\r\n //delete here\r\n flitSvc.updateInvoiceStatus(id,INVOICE_STATUS.DELETED).then(({data}) =>{\r\n refreshCallback();\r\n }\r\n ).finally(() => {\r\n setIsLoading(false);\r\n });\r\n break;\r\n default:\r\n break;\r\n }\r\n};\r\nfunction customAction2(actionKey) {\r\n switch (actionKey) {\r\n case ACTION2_KEYS.CONFIRMED_SELECTED:\r\n setShowConfirmDialog({action:actionKey});\r\n break;\r\n case ACTION2_KEYS.VOID_SELECTED:\r\n setShowConfirmDialog({action:actionKey});\r\n break;\r\n case ACTION2_KEYS.DELETE_SELECTED:\r\n //delete here\r\n var updateObservable = [];\r\n selected.forEach((id) => {\r\n updateObservable.push(flitSvc.updateInvoiceStatus(id,INVOICE_STATUS.DELETED));\r\n });\r\n forkJoin(updateObservable).subscribe(res=> {\r\n setIsLoading(false);\r\n setSelected([]);\r\n refreshCallback();\r\n }, err => {\r\n //\r\n });\r\n break;\r\n default:\r\n break;\r\n }\r\n};\r\n\r\n\r\n\r\n return (<>\r\n \r\n {numSelected > 0 ? (\r\n \r\n {numSelected} selected\r\n \r\n ) : (\r\n \r\n Orders\r\n \r\n )}\r\n
\r\n \r\n \r\n {numSelected > 0 ? ( <>\r\n \r\n {user.userRole?.find(r => r.role == ROLES.OPERATOR) &&\r\n customAction2(e)}>\r\n { const item = consolList.find(o => o.id === id);\r\n return (\r\n item.status === CONSOL_STATUS.SUBMITTED ||\r\n item.status === CONSOL_STATUS.CONFIRMED ||\r\n item.status === CONSOL_STATUS.RECEIVED\r\n );\r\n })}>{intl.formatMessage({ id: \"SUBMITTED_SELECTED\"})} \r\n { const item = consolList.find(o => o.id === id);\r\n return (\r\n item.status === CONSOL_STATUS.SUBMITTED ||\r\n item.status === CONSOL_STATUS.CONFIRMED ||\r\n item.status === CONSOL_STATUS.RECEIVED\r\n );\r\n })}>{intl.formatMessage({ id: \"CONFIRMED_SELECTED\"})} \r\n { const item = consolList.find(o => o.id === id);\r\n return (\r\n item.status === CONSOL_STATUS.SUBMITTED ||\r\n item.status === CONSOL_STATUS.CONFIRMED ||\r\n item.status === CONSOL_STATUS.RECEIVED\r\n );\r\n })}>{intl.formatMessage({ id: \"RECEIVED_SELECTED\"})} \r\n consolList.find(o=> o.id == id).status != CONSOL_STATUS.RECEIVED)}>{intl.formatMessage({ id: \"AWAITING_SHIPMENT_SELECTED\"})} \r\n {/* consolList.find(o=> o.id == id).status != CONSOL_STATUS.DELIVERED || (!consolList.find(o=> o.id == id).totalVolume || !consolList.find(o=> o.id == id).totalWeight))}>{intl.formatMessage({ id: \"INVOICE_DRAFT_SELECTED\"})} */}\r\n {intl.formatMessage({ id: \"CHANGE_SCHEDULE_SELECTED\"})} \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\nConsolTableToolbar.propTypes = {\r\n numSelected: PropTypes.number.isRequired,\r\n};\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n\r\n root: {\r\n width: '100%',\r\n marginTop: theme.spacing(3),\r\n },\r\n paper: {\r\n width: '100%',\r\n marginBottom: theme.spacing(2),\r\n },\r\n table: {\r\n minWidth: 100\r\n },\r\n tableWrapper: {\r\n overflowX: 'auto',\r\n },\r\n}));\r\n\r\n\r\n\r\nfunction ConsolScheduleOrders(props) {\r\n const subheader = useSubheader();\r\n const { intl, history } = props;\r\n const { user } = useSelector(state => state.auth);\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [showErrorDialog, setShowErrorDialog] = useState(false);\r\n const [consolList, setConsolList] = useState([]);\r\n const [invoiceList,setInvoiceList] = useState([]);\r\n const [dense, setDense] = useState(true);\r\n const [totalRows, setTotalRows] = useState(0);\r\n const [shipment, setShipment] = useState();\r\n const [consolSchedule,setConsolSchedule] = useState();\r\n const [sortedRoutes,setSortedRoutes] = useState([]);\r\n let { id } = useParams();\r\n\r\n const [order, setOrder] = React.useState('desc');\r\n const [orderBy, setOrderBy] = React.useState('submittedOn');\r\n const [selected, setSelected] = React.useState([]);\r\n const [page, setPage] = React.useState(0);\r\n const [rowsPerPage, setRowsPerPage] = React.useState(5);\r\n const [statusFilter, setStatusFilter] = React.useState();\r\n const [showActualMeasurementDialog,setShowActualMeasurementDialog] = React.useState(false);\r\n const [showShipmentReadyDialog,setShowShipmentReadyDialog] = React.useState(false);\r\n const [showAvailableScheduleDialog, setShowAvailableScheduleDialog] = useState(false);\r\n const [showDueInputDialog,setShowDueInputDialog] = React.useState(false);\r\n const [tabValue, setTabValue] = React.useState(0);\r\n const [dueOn, setDueOn] = React.useState(new Date(moment().add(30,'d')));\r\n const [showInvoiceDialog,setShowInvoiceDialog] = React.useState(false);\r\n const [invoiceBilledToId, setInvoiceBilledToId] = React.useState();\r\n const [invoiceConsolId, setInvoiceConsolId] = React.useState();\r\n const initialEntry = {\r\n id : id,\r\n orders: []\r\n };\r\n const UpdateRouteScheme = Yup.object().shape({\r\n orders: Yup.array()\r\n .of(\r\n Yup.object().shape({\r\n totalWeight: Yup.number(\r\n intl.formatMessage({\r\n id: \"VALIDATION_NUMBER\",\r\n })\r\n \r\n ),\r\n totalVolume: Yup.number(\r\n intl.formatMessage({\r\n id: \"VALIDATION_NUMBER\",\r\n }))\r\n })\r\n )\r\n });\r\n\r\n const [initialValues, setInitialValues] = useState(initialEntry);\r\n\r\n subheader.setTitle(intl.formatMessage({ id: \"MENU.FBA_CONSOLIDATION\" }));\r\n const classes = useStyles();\r\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, (totalRows) - page * rowsPerPage);\r\n function refresh() {\r\n setIsLoading(true);\r\n setSelected([]);\r\n flitSvc.getConsolSchedule(id).then(({ data }) => {\r\n setConsolSchedule(data);\r\n if (data.shipmentId) {\r\n flitSvc.getShipment(data.shipmentId).then(({data}) => {\r\n setShipment(data);\r\n setSortedRoutes(sortRoutes(data.route));\r\n }).finally(() => {\r\n setIsLoading(false);\r\n });\r\n } else {\r\n setIsLoading(false)\r\n }\r\n setIsLoading(true)\r\n flitSvc.getConsolsForSchedule(id).then(({data}) =>{\r\n var list = data.value?.map(item => {\r\n return item;\r\n });\r\n setConsolList(list);\r\n setInitialValues({id:id,orders:list});\r\n setTotalRows(list.filter(row=> !statusFilter ? row.status != CONSOL_STATUS.CANCELLED : row.status == statusFilter)?.length);\r\n \r\n }\r\n ).finally(() => {\r\n setIsLoading(false);\r\n });\r\n setIsLoading(true)\r\n flitSvc.getInvoicesForSchedule(id).then(({data}) =>{\r\n setInvoiceList(data);\r\n \r\n }\r\n ).finally(() => {\r\n setIsLoading(false);\r\n });\r\n \r\n })\r\n }\r\n\r\n useEffect(() => {\r\n if(id) refresh();\r\n }, [id]);\r\n\r\n useEffect(() => {\r\n setTotalRows(consolList.filter(row=> !statusFilter ? row.status != CONSOL_STATUS.CANCELLED : row.status == statusFilter)?.length);\r\n setPage(0);\r\n }, [statusFilter]);\r\n\r\n function _filterCallback(option, props) {\r\n return true;\r\n }\r\n const isSelected = name => selected.indexOf(name) !== -1;\r\n function handleRequestSort(event, property) {\r\n const isDesc = orderBy === property && order === 'desc';\r\n setOrder(isDesc ? 'asc' : 'desc');\r\n setOrderBy(property);\r\n}\r\n\r\nfunction handleSelectAllClick(event) {\r\n if (event.target.checked) {\r\n const newSelecteds = consolList.map(n => n.id);\r\n setSelected(newSelecteds);\r\n return;\r\n }\r\n setSelected([]);\r\n}\r\n\r\nfunction handleClick(event, name) {\r\n const selectedIndex = selected.indexOf(name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n selected.slice(0, selectedIndex),\r\n selected.slice(selectedIndex + 1),\r\n );\r\n }\r\n\r\n setSelected(newSelected);\r\n}\r\n\r\nfunction handleChangePage(event, newPage) {\r\n setPage(newPage);\r\n}\r\n\r\nfunction handleChangeRowsPerPage(event) {\r\n setRowsPerPage(+event.target.value);\r\n}\r\n function closeErrorDialog(){\r\n setShowErrorDialog(false);\r\n }\r\n\r\n function customAction(actionKey, id, shipmentId) {\r\n switch (actionKey) {\r\n case ACTION_KEYS.EDIT:\r\n history.push(\"/consol/schedule/\" + id);\r\n break;\r\n case ACTION_KEYS.REPLICATE:\r\n history.push(\"/consol/schedule?replicate=\" + id);\r\n break;\r\n case ACTION_KEYS.EDIT_SHIPMENT:\r\n history.push(\"/shipment/\" + shipmentId + \"/edit\");\r\n break;\r\n case ACTION_KEYS.CREATE_SHIPMENT:\r\n setIsLoading(true);\r\n flitSvc.createShipmentFromConsolSchedule(id).then(({ data }) => {\r\n history.push(\"/shipment/\" + data.shipmentId + \"/edit\");\r\n }).finally(() => {\r\n setIsLoading(false);\r\n });\r\n \r\n break;\r\n default:\r\n break;\r\n }\r\n};\r\nfunction customAction2(actionKey, id, billedToId) {\r\n switch (actionKey) {\r\n case ACTION2_KEYS.SUBMITTED:\r\n setIsLoading(true);\r\n flitSvc.updateConsolStatus(id,CONSOL_STATUS.SUBMITTED).then(({ data }) => {\r\n refresh();\r\n });\r\n break;\r\n case ACTION2_KEYS.CONFIRMED:\r\n setIsLoading(true);\r\n flitSvc.updateConsolStatus(id,CONSOL_STATUS.CONFIRMED).then(({ data }) => {\r\n refresh();\r\n });\r\n break;\r\n case ACTION2_KEYS.RECEIVED:\r\n setIsLoading(true);\r\n flitSvc.updateConsolStatus(id,CONSOL_STATUS.RECEIVED).then(({ data }) => {\r\n refresh();\r\n });\r\n break;\r\n case ACTION2_KEYS.INPUT_ACTUAL_MEASUREMENT:\r\n setShowActualMeasurementDialog(true);\r\n break;\r\n case ACTION2_KEYS.AWAITING_SHIPMENT:\r\n setShowShipmentReadyDialog(id);\r\n break;\r\n case ACTION2_KEYS.INVOICE_DRAFT:\r\n //setIsLoading(true);\r\n //flitSvc.consolDraftInvoice(id).then(({ data }) => {\r\n // refresh();\r\n //});\r\n setShowDueInputDialog(id);\r\n break;\r\n case ACTION2_KEYS.CREATE_FILE_INVOICE:\r\n openInvoiceDialog(id,billedToId)\r\n break;\r\n case ACTION2_KEYS.CANCEL:\r\n setIsLoading(true);\r\n flitSvc.updateConsolStatus(id,CONSOL_STATUS.CANCELLED).then(({ data }) => {\r\n refresh();\r\n });\r\n break;\r\n case ACTION2_KEYS.SUBMITTED_SELECTED:\r\n // use error dialog\r\n if (!selected || selected.length ==0 ) break;\r\n setIsLoading(true);\r\n var updateObservable = [];\r\n selected.forEach((id) => {\r\n updateObservable.push(flitSvc.updateConsolStatus(id,CONSOL_STATUS.SUBMITTED));\r\n });\r\n forkJoin(updateObservable).subscribe(res=> {\r\n refresh();\r\n\r\n }, err => {\r\n //\r\n });\r\n break;\r\n case ACTION2_KEYS.CONFIRMED_SELECTED:\r\n // use error dialog\r\n if (!selected || selected.length ==0 ) break;\r\n setIsLoading(true);\r\n var updateObservable = [];\r\n selected.forEach((id) => {\r\n updateObservable.push(flitSvc.updateConsolStatus(id,CONSOL_STATUS.CONFIRMED));\r\n });\r\n forkJoin(updateObservable).subscribe(res=> {\r\n refresh();\r\n\r\n }, err => {\r\n //\r\n });\r\n break;\r\n case ACTION2_KEYS.RECEIVED_SELECTED:\r\n // use error dialog\r\n if (!selected || selected.length ==0 ) break;\r\n setIsLoading(true);\r\n var updateObservable2 = [];\r\n selected.forEach((id) => {\r\n updateObservable2.push(flitSvc.updateConsolStatus(id,CONSOL_STATUS.RECEIVED));\r\n });\r\n forkJoin(updateObservable2).subscribe(res=> {\r\n refresh();\r\n }, err => {\r\n //\r\n });\r\n break;\r\n case ACTION2_KEYS.AWAITING_SHIPMENT_SELECTED:\r\n if (!selected || selected.length ==0 ) break;\r\n setShowShipmentReadyDialog('selected');\r\n break;\r\n case ACTION2_KEYS.INVOICE_DRAFT_SELECTED:\r\n // use selected\r\n if (!selected || selected.length ==0 ) break;\r\n //setIsLoading(true);\r\n setShowDueInputDialog('selected');\r\n // var updateObservable3 = [];\r\n // selected.forEach((id) => {\r\n // updateObservable3.push(flitSvc.consolDraftInvoice(id));\r\n // });\r\n // forkJoin(updateObservable2).subscribe(res=> {\r\n // refresh();\r\n // }, err => {\r\n // //\r\n // });\r\n break;\r\n\r\n case ACTION2_KEYS.CHANGE_SCHEDULE:\r\n // use selected\r\n setShowAvailableScheduleDialog([id]);\r\n break;\r\n case ACTION2_KEYS.CHANGE_SCHEDULE_SELECTED:\r\n // use selected\r\n if (!selected || selected.length ==0 ) break;\r\n setShowAvailableScheduleDialog(selected);\r\n break;\r\n default:\r\n break;\r\n }\r\n};\r\n\r\nfunction handleTabChange(event, newValue) {\r\n if (!isLoading) {\r\n if (newValue == 1) {\r\n setInitialValues({id:id,orders:consolList});\r\n }\r\n setTabValue(newValue);\r\n } \r\n\r\n}\r\n\r\n\r\nfunction onHideDueInputDialog() {\r\n setShowDueInputDialog(false);\r\n}\r\n\r\nfunction onHideShipmentReadyDialog() {\r\n setShowShipmentReadyDialog(false);\r\n}\r\n\r\n\r\nfunction handleTabChange(event, newValue) {\r\n if (!isLoading) {\r\n if (newValue == 1) {\r\n setInitialValues({id:id,orders:consolList});\r\n }\r\n setTabValue(newValue);\r\n } \r\n\r\n}\r\n\r\nfunction closeAvailableScheduleDialog(isUpdated){\r\n setShowAvailableScheduleDialog(false);\r\n if (isUpdated) { \r\n refresh();\r\n }\r\n \r\n}\r\n\r\nfunction openInvoiceDialog(consolId,billedToId) {\r\n setInvoiceBilledToId(billedToId);\r\n setInvoiceConsolId(consolId);\r\n setShowInvoiceDialog(true);\r\n}\r\n\r\nfunction handleCloseInvoiceDialog(isUpdated) {\r\n setShowInvoiceDialog(false);\r\n if (isUpdated) {\r\n refresh();\r\n }\r\n}\r\n\r\nfunction downloadFile(documentId, fileName) {\r\n flitSvc.getDownloadLink(documentId).then(res => {\r\n // on the fly download trick\r\n const link = document.createElement('a');\r\n link.href = res.data.url;\r\n link.download = fileName;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n })\r\n}\r\n return (<>\r\n \r\n {intl.formatMessage({ id: \"NO_CONSOL_ORDER\" })}\r\n \r\n
{intl.formatMessage({ id: \"ADVANCED_HINT\" })}
\r\n
\r\n \r\n
\r\n
\r\n {/* begin::Head */}\r\n \r\n {formik.status && (\r\n
\r\n );\r\n}\r\n\r\nexport default injectIntl(connect(null, auth.actions)(Login));\r\n","import React, { useState, useContext, useEffect } from \"react\";\r\nimport { useFormik } from \"formik\";\r\nimport { connect } from \"react-redux\";\r\nimport * as Yup from \"yup\";\r\nimport { Link, useHistory } from \"react-router-dom\";\r\nimport { FormattedMessage, injectIntl } from \"react-intl\";\r\nimport * as auth from \"../_redux/authRedux\";\r\nimport { register } from \"../_redux/authCrud\";\r\nimport { login } from \"../_redux/authCrud\";\r\nimport { authClient } from \"../../../../index\";\r\nimport { FlitServiceContext } from '../../../services/flitService';\r\nimport { useLang } from \"./../../../../_metronic/i18n/Metronici18n\";\r\nimport { useLocation } from \"react-router-dom\";\r\nimport { REGISTRATION_REFERRAL_TYPE } from \"../../../services/flitEnum\";\r\n\r\n// changed to invitation only\r\nfunction Registration(props) {\r\n var lang = useLang();\r\n const { intl } = props;\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const history = useHistory();\r\n const [loading, setLoading] = useState(false);\r\n const [message, setMessage] = useState('');\r\n const [isAlreadyRegistered, setAlreadyRegistered] = useState(false);\r\n const [initialValues, setInitialValues] = React.useState({\r\n email: \"\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n phoneNo: \"\",\r\n password: \"\",\r\n changepassword: \"\",\r\n acceptTerms: false,\r\n });\r\n\r\n const RegistrationSchema = Yup.object().shape({\r\n email: Yup.string()\r\n .email(intl.formatMessage({id:\"AUTH.VALIDATION.INVALID_EMAIL\"}))\r\n .min(3, intl.formatMessage({id:\"AUTH.VALIDATION.MIN_LENGTH_FIELD\"},{min:'3'}))\r\n .max(50, intl.formatMessage({id:\"AUTH.VALIDATION.MAX_LENGTH_FIELD\"},{max:'50'}))\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n firstName: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n lastName: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n\r\n phoneNo: Yup.string()\r\n .min(3, intl.formatMessage({id:\"AUTH.VALIDATION.MIN_LENGTH_FIELD\"},{min:'3'}))\r\n .max(50, intl.formatMessage({id:\"AUTH.VALIDATION.MAX_LENGTH_FIELD\"},{max:'50'}))\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n password: Yup.string()\r\n .min(3, intl.formatMessage({id:\"AUTH.VALIDATION.MIN_LENGTH_FIELD\"},{min:'3'}))\r\n .max(50, intl.formatMessage({id:\"AUTH.VALIDATION.MAX_LENGTH_FIELD\"},{max:'50'}))\r\n .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).{8,15}$/,intl.formatMessage({\r\n id: \"AUTH.VALIDATION.PASSWORD_REQIOREMENT\",\r\n }))\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n changepassword: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n .when(\"password\", {\r\n is: (val) => (val && val.length > 0 ? true : false),\r\n then: Yup.string().oneOf(\r\n [Yup.ref(\"password\")],\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.PASSWORD_MATCH\",\r\n })\r\n ),\r\n }),\r\n acceptTerms: Yup.bool().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.TERMS_CONDITION\",\r\n })\r\n \r\n ),\r\n });\r\n\r\n\r\n const useQuery = () => new URLSearchParams(useLocation().search);\r\n\r\n let invitation = useQuery().get(\"invitation\");\r\n\r\n \r\n useEffect(() => {\r\n setLoading(true);\r\n flitSvc.validateInvitation(invitation).then(({ data }) => {\r\n \r\n // if response 200 with empty data already registered redirect to login\r\n if (data.isAlreadyRegistered) {\r\n setMessage(intl.formatMessage({ id: \"AUTH.ALREADY_REGISTERED\" }));\r\n setAlreadyRegistered(true);\r\n } \r\n \r\n // set email and setLoading false if valid\r\n\r\n setInitialValues({\r\n email: data.email,\r\n firstName: \"\",\r\n lastName: \"\",\r\n phoneNo: \"\",\r\n password: \"\",\r\n changepassword: \"\",\r\n acceptTerms: false,\r\n registrationReferralType :REGISTRATION_REFERRAL_TYPE.ACQUAINTANCE\r\n })\r\n setLoading(false);\r\n }).catch((err) => {\r\n // message display\r\n setMessage(err.response.data.message);\r\n })\r\n }, []);\r\n\r\n const enableLoading = () => {\r\n setLoading(true);\r\n };\r\n\r\n const disableLoading = () => {\r\n setLoading(false);\r\n };\r\n\r\n const getInputClasses = (fieldname) => {\r\n if (formik.touched[fieldname] && formik.errors[fieldname]) {\r\n return \"is-invalid\";\r\n }\r\n\r\n if (formik.touched[fieldname] && !formik.errors[fieldname]) {\r\n return \"is-valid\";\r\n }\r\n\r\n return \"\";\r\n };\r\n\r\n const formik = useFormik({\r\n enableReinitialize: true,\r\n initialValues,\r\n validationSchema: RegistrationSchema,\r\n onSubmit : (values, { setStatus, setSubmitting }) => {\r\n flitSvc.registerUser({\r\n email: values.email, firstName: values.firstName, lastName: values.lastName, phoneNo: values.phoneNo, password: values.password, invitationUUID: invitation, userConfig: { lang: lang }})\r\n .then(() => {\r\n disableLoading();\r\n setSubmitting(false);\r\n setStatus(intl.formatMessage({ id: \"AUTH.VERIFICATION_EMAIL_SENT\" })\r\n \r\n );\r\n /*\r\n // 확인이메일 없는경우\r\n enableLoading();\r\n setTimeout(() => {\r\n login(values.email, values.password)\r\n .then((res) => {\r\n disableLoading();\r\n if (res.status === 'SUCCESS') {\r\n authClient.token.getWithoutPrompt({\r\n responseType: 'token', // or array of types\r\n sessionToken: res.sessionToken // optional if the user has an existing Okta session\r\n })\r\n .then(function(tokenOrTokens) {\r\n authClient.tokenManager.add('access_token', tokenOrTokens);\r\n props.login(); // do not use redux storage for token\r\n })\r\n .catch(function(err) {\r\n throw 'Token retrieval failed';\r\n });\r\n \r\n } else {\r\n throw 'We cannot handle the ' + res.status + ' status';\r\n } \r\n })\r\n .catch(() => {\r\n disableLoading();\r\n setSubmitting(false);\r\n setStatus(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.INVALID_LOGIN\"\r\n })\r\n );\r\n });\r\n }, 1000);\r\n */\r\n })\r\n .catch(({response: {data}}) => {\r\n disableLoading();\r\n setSubmitting(false);\r\n setStatus(\r\n data.message\r\n );\r\n });\r\n },\r\n /*onSubmit: (values, { setStatus, setSubmitting }) => {\r\n enableLoading();\r\n register(values.email, values.fullname, values.username, values.password)\r\n .then(({ data: { accessToken } }) => {\r\n props.register(accessToken);\r\n disableLoading();\r\n })\r\n .catch(() => {\r\n setSubmitting(false);\r\n setStatus(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.INVALID_LOGIN\",\r\n })\r\n );\r\n disableLoading();\r\n });\r\n },*/\r\n });\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n {/* end::Head */}\r\n\r\n {/*begin::Form*/}\r\n \r\n
\r\n \r\n {intl.formatMessage({id:\"ENTER_YOUR_USERNAME_AND_PASSWORD\"})}\r\n
\r\n\r\n
\r\n ) /*: (\r\n {formik.status}
\r\n \r\n
\r\n )*/}\r\n\r\n \r\n Use account admin@demo.com and password{\" \"}\r\n demo to continue.\r\n
\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n {formik.errors.email}
\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n {formik.errors.password}
\r\n \r\n \r\n \r\n {intl.formatMessage({id:\"SIGN_IN\"})}\r\n {loading && }\r\n \r\n
\r\n \r\n {/*end::Form*/}\r\n \r\n
\r\n\r\n \r\n \r\n {intl.formatMessage({id:\"AUTH.GENERAL.OR\"})}\r\n \r\n
\r\n \r\n \r\n \r\n Facebook\r\n \r\n \r\n \r\n Google\r\n \r\n \r\n \r\n WeChat\r\n \r\n
\r\n \r\n \r\n {/* begin: Alert */}\r\n {(formik.status || message) && (\r\n
\r\n );\r\n}\r\n\r\nexport default injectIntl(connect(null, auth.actions)(Registration));\r\n","import React, { useState, useContext, useEffect } from \"react\";\r\nimport { useFormik, Formik } from \"formik\";\r\nimport { connect, useSelector } from \"react-redux\";\r\nimport * as Yup from \"yup\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { useDropzone } from 'react-dropzone';\r\nimport { Typography } from '@material-ui/core';\r\nimport { FormattedMessage, injectIntl, useIntl } from \"react-intl\";\r\nimport { Form, ToggleButton, ToggleButtonGroup, Row, Col, Badge, InputGroup, OverlayTrigger, Tooltip } from \"react-bootstrap\";\r\nimport * as auth from \"../Auth/_redux/authRedux\"\r\nimport { FlitServiceContext } from '../../services/flitService';\r\nimport { useLang } from \"../../../_metronic/i18n/Metronici18n\";\r\nimport { BUSINESS_ENTITY_TYPE, BUSINESS_TYPE, VERIFICATION_STATUS, REGISTRATION_REFERRAL_TYPE, DOCUMENT_TYPE } from \"../../services/flitEnum\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport AttachFileIcon from '@material-ui/icons/AttachFile';\r\n\r\nconst registrationContentStyle = {\r\n display: \"block\"\r\n , width: \"80%\"\r\n , maxWidth: \"1000px\"\r\n , backgroundColor: \"white\"\r\n , padding: \"50px\"\r\n , margin: \"50px 0px 50px 0px\"\r\n};\r\n\r\nconst errorMessage = {\r\n color: \"#F64E60\",\r\n fontSize: \"0.9rem\",\r\n fontWeight: 400\r\n}\r\n\r\nconst thumbsContainer = {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n marginTop: 16\r\n};\r\n\r\nconst thumb = {\r\n display: 'inline-flex',\r\n borderRadius: 2,\r\n border: '1px solid #eaeaea',\r\n marginBottom: 8,\r\n marginRight: 8,\r\n maxHeight: 100,\r\n maxWidth: 500,\r\n width: 'auto',\r\n height: 'auto',\r\n padding: 4,\r\n boxSizing: 'border-box'\r\n};\r\n\r\nconst thumbInner = {\r\n minWidth: 0,\r\n overflow: 'hidden'\r\n};\r\n\r\nconst img = {\r\n display: 'block',\r\n maxHeight: 100,\r\n maxWidth: 500,\r\n width: 'auto',\r\n height: 'auto'\r\n};\r\n\r\nconst fileName = {\r\n display: 'inline-flex',\r\n verticalAlign: 'top'\r\n};\r\n\r\n\r\nconst registrationDocument = {\r\n id: 0,\r\n type: DOCUMENT_TYPE.OTHER,\r\n fileName: \"\",\r\n dataURL: \"\"\r\n}\r\n\r\nconst businessEntityEntries = {\r\n registeredCountry: \"\",\r\n idNumber: \"\",\r\n legalName: \"\",\r\n type: \"\",\r\n businessType: \"\",\r\n address: \"\",\r\n localizedLegalName: \"\",\r\n localizedAddress: \"\",\r\n registrationDocumentId: 0,\r\n registrationDocument: registrationDocument,\r\n verificationStatus: VERIFICATION_STATUS.NEED_VERIFICATION\r\n}\r\n\r\nconst userConfig = {\r\n lang: \"\"\r\n}\r\n\r\nlet initialEntries = {\r\n id: 0,\r\n email: \"\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n phoneNo: \"\",\r\n password: \"\",\r\n confirmPassword: \"\",\r\n registrationChannel: \"FLIT\",\r\n registrationReferralType: \"\",\r\n localizedFirstName: \"\",\r\n localizedLastName: \"\",\r\n businessEntityId: \"\",\r\n businessEntity: businessEntityEntries,\r\n userConfig: userConfig,\r\n acceptTerms: false,\r\n};\r\n\r\nconst mapStateToProps = ({ auth: { user } }) => ({\r\n user\r\n});\r\n\r\nfunction BusinessRegistration(props) {\r\n var lang = useLang();\r\n const history = useHistory();\r\n const { intl } = props;\r\n const [initialValues, setInitialValues] = useState(initialEntries);\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [loading, setLoading] = useState(false);\r\n const [submitted, setSubmitted] = useState(false);\r\n //const { user } = useSelector(state => state.auth);\r\n const { user } = props;\r\n const [file, setFile] = useState([]);\r\n const [isUS, setIsUS] = useState();\r\n\r\n function downloadFile(documentId, fileName) {\r\n flitSvc.getDownloadLink(documentId).then(res => {\r\n // on the fly download trick\r\n const link = document.createElement('a');\r\n link.href = res.data.url;\r\n link.download = fileName;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n \r\n if (user) {\r\n if (!user.businessEntity?.idNumber && !props?.location?.state?.idNumber) { // TODO: add verification status\r\n history.push(\"/registration/business-number\");\r\n } else if (user?.businessEntity?.verificationStatus === VERIFICATION_STATUS.NEED_VERIFICATION) {\r\n history.push('/dashboard');\r\n } else {\r\n Object.keys(user).filter(key => key in initialEntries).forEach(key => initialEntries[key] = user[key]);\r\n if (user.businessEntity?.registrationDocumentId) {\r\n flitSvc.getDownloadLink(user.businessEntity?.registrationDocumentId).then((data) => {\r\n setFile({ id: user.businessEntity?.registrationDocumentId, name: data.data.fileName, preview: data.data.thumbnailUrl });\r\n initialEntries.businessEntity.registrationDocument = { id: user.businessEntity.registrationDocumentId, fileName: data.data.fileName, type: DOCUMENT_TYPE.OTHER };\r\n })\r\n }\r\n }\r\n }\r\n\r\n if (!props.location.state) {\r\n history.push(\"/registration/business-number\");\r\n } else {\r\n initialEntries.businessEntity.registeredCountry = props.location.state.registeredCountry;\r\n initialEntries.businessEntity.idNumber = props.location.state.idNumber;\r\n }\r\n\r\n setIsUS(initialEntries.businessEntity.registeredCountry === 'US');\r\n\r\n setInitialValues({ ...initialEntries })\r\n }, [user])\r\n\r\n const RegistrationDocumentSchema = Yup.object().shape({\r\n fileName: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n });\r\n\r\n const BusinessEntitySchema = Yup.object().shape({\r\n registeredCountry: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n idNumber: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n legalName: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n type: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n businessType: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n address: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n localizedLegalName: Yup.string()\r\n .when(\"registeredCountry\", {\r\n is: (val) => (val !== 'US'),\r\n then: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n }),\r\n localizedAddress: Yup.string()\r\n .when(\"registeredCountry\", {\r\n is: (val) => (val !== 'US'),\r\n then: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n }),\r\n registrationDocument: RegistrationDocumentSchema\r\n });\r\n\r\n const RegistrationSchema = Yup.object().shape({\r\n id: Yup.number(),\r\n email: Yup.string()\r\n .email(intl.formatMessage({ id: \"AUTH.VALIDATION.INVALID_EMAIL\" }))\r\n .min(3, intl.formatMessage({ id: \"AUTH.VALIDATION.MIN_LENGTH_FIELD\" }, { min: '3' }))\r\n .max(50, intl.formatMessage({ id: \"AUTH.VALIDATION.MAX_LENGTH_FIELD\" }, { max: '50' }))\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n firstName: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n lastName: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n phoneNo: Yup.string()\r\n .min(3, intl.formatMessage({ id: \"AUTH.VALIDATION.MIN_LENGTH_FIELD\" }, { min: '3' }))\r\n .max(50, intl.formatMessage({ id: \"AUTH.VALIDATION.MAX_LENGTH_FIELD\" }, { max: '50' }))\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n registrationReferralType: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n password: Yup.string()\r\n .when(\"id\", {\r\n is: (val) => (val === 0),\r\n then: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n .min(3, intl.formatMessage({ id: \"AUTH.VALIDATION.MIN_LENGTH_FIELD\" }, { min: '3' }))\r\n .max(50, intl.formatMessage({ id: \"AUTH.VALIDATION.MAX_LENGTH_FIELD\" }, { max: '50' }))\r\n .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).{8,15}$/, intl.formatMessage({\r\n id: \"AUTH.VALIDATION.PASSWORD_REQIOREMENT\",\r\n }))\r\n }),\r\n confirmPassword: Yup.string()\r\n .when(\"password\", {\r\n is: (val) => (val && val.length > 0 ? true : false),\r\n then: Yup.string().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ).oneOf(\r\n [Yup.ref(\"password\")],\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.PASSWORD_MATCH\",\r\n })\r\n ),\r\n }),\r\n localizedFirstName: Yup.string()\r\n .when(\"businessEntity.registeredCountry\", {\r\n is: (val) => (val !== 'US'),\r\n then: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n }),\r\n localizedLastName: Yup.string()\r\n .when(\"businessEntity.registeredCountry\", {\r\n is: (val) => (val !== 'US'),\r\n then: Yup.string()\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n )\r\n }),\r\n acceptTerms: Yup.bool().required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.TERMS_CONDITION\",\r\n })\r\n\r\n ),\r\n businessEntity: BusinessEntitySchema\r\n });\r\n\r\n const enableLoading = () => {\r\n setLoading(true);\r\n };\r\n\r\n const disableLoading = () => {\r\n setLoading(false);\r\n };\r\n\r\n return (<>\r\n \r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n {intl.formatMessage({id:\"AUTH.REGISTER.DESC\"})}\r\n
\r\n\r\n
\r\n )}\r\n {/* end: Alert */}\r\n {/* begin: Email */}\r\n {formik.status}{message} {isAlreadyRegistered && {intl.formatMessage({ id: \"SIGN_IN\" })}}
\r\n \r\n
\r\n {/* end: Email */}\r\n\r\n {/* begin: FirstName */}\r\n \r\n
\r\n ) : null}\r\n {formik.errors.email}
\r\n \r\n
\r\n {/* end: firstName */}\r\n \r\n {/* begin: lastName */}\r\n \r\n
\r\n ) : null}\r\n {formik.errors.firstName}
\r\n \r\n
\r\n {/* end: Fullname */}\r\n\r\n {/* begin: phoneNo */}\r\n \r\n
\r\n ) : null}\r\n {formik.errors.lastName}
\r\n \r\n
\r\n {/* end: Username */}\r\n\r\n {/* begin: Password */}\r\n \r\n
\r\n ) : null}\r\n {formik.errors.phoneNo}
\r\n \r\n
\r\n {/* end: Password */}\r\n\r\n {/* begin: Confirm Password */}\r\n \r\n
\r\n ) : null}\r\n {formik.errors.password}
\r\n \r\n
\r\n {/* end: Confirm Password */}\r\n\r\n {/* begin: Terms and Conditions */}\r\n \r\n
\r\n ) : null}\r\n \r\n {formik.errors.changepassword}\r\n
\r\n \r\n \r\n {formik.touched.acceptTerms && formik.errors.acceptTerms ? (\r\n
\r\n {/* end: Terms and Conditions */}\r\n {!(message || formik.status) && \r\n
\r\n ) : null}\r\n {formik.errors.acceptTerms}
\r\n \r\n \r\n {intl.formatMessage({id:\"AUTH.GENERAL.SUBMIT_BUTTON\"})}\r\n {loading && }\r\n \r\n\r\n \r\n \r\n {intl.formatMessage({id:\"AUTH.GENERAL.CANCEL_BUTTON\"})}\r\n \r\n \r\n
}\r\n {!(loading|| message ||formik.status) && <>\r\n
\r\n \r\n \r\n {intl.formatMessage({id:\"AUTH.GENERAL.OR\"})}\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n {intl.formatMessage({id:\"AUTH.MUST_LOGIN_WITH_INVITED_EMAIL\"})}\r\n
\r\n \r\n \r\n \r\n Facebook\r\n \r\n \r\n \r\n Google\r\n \r\n \r\n \r\n WeChat\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\nconst FlitDropZone = (props) => {\r\n const intl = useIntl();\r\n const { setFieldValue, setFile } = props;\r\n const { getRootProps, getInputProps,fileRejections } = useDropzone({\r\n accept: {'image/*' : [] ,\r\n 'text/*' : [],\r\n 'application/msword' : [],\r\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' : [],\r\n 'application/vnd.ms-excel' : [],\r\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' : [],\r\n 'application/pdf' : [],\r\n 'application/x-hwp' : ['.hwp']\r\n },\r\n maxSize : 10485760,\r\n multiple: false,\r\n onDrop: acceptedFiles => {\r\n\r\n acceptedFiles.forEach(file => {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n \r\n reader.onload = () => {\r\n file.dataURL = reader.result;\r\n let fileNames = file.name.split(\".\");\r\n if (['jpg', 'jpeg', 'png'].includes(fileNames[fileNames.length - 1].toLowerCase())) {\r\n file.preview = URL.createObjectURL(file);\r\n }\r\n setFile(file);\r\n setFieldValue(\"businessEntity.registrationDocument.fileName\", file.name);\r\n \r\n };\r\n })\r\n }\r\n });\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {intl.formatMessage({ id: \"DROPZONE_DESC\" }) }\r\n
\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default injectIntl(connect(mapStateToProps, auth.actions)(BusinessRegistration));\r\n","import React, { useState, useContext } from \"react\";\r\nimport { useFormik } from \"formik\";\r\nimport { connect } from \"react-redux\";\r\nimport { Link, Redirect } from \"react-router-dom\";\r\nimport * as Yup from \"yup\";\r\nimport { injectIntl } from \"react-intl\";\r\nimport * as auth from \"../_redux/authRedux\";\r\nimport { requestPassword } from \"../_redux/authCrud\";\r\nimport { FlitServiceContext } from '../../../services/flitService';\r\nimport { useLang } from \"./../../../../_metronic/i18n/Metronici18n\";\r\n\r\nconst initialValues = {\r\n email: \"\",\r\n};\r\n\r\nfunction ForgotPassword(props) {\r\n var lang = useLang();\r\n const { intl } = props;\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const [isRequested, setIsRequested] = useState(false);\r\n const ForgotPasswordSchema = Yup.object().shape({\r\n email: Yup.string()\r\n .email(intl.formatMessage({id:\"AUTH.VALIDATION.INVALID_EMAIL\"}))\r\n .min(3, intl.formatMessage({id:\"AUTH.VALIDATION.MIN_LENGTH_FIELD\"},{min:'3'}))\r\n .max(50, intl.formatMessage({id:\"AUTH.VALIDATION.MAX_LENGTH_FIELD\"},{max:'50'}))\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n });\r\n\r\n const getInputClasses = (fieldname) => {\r\n if (formik.touched[fieldname] && formik.errors[fieldname]) {\r\n return \"is-invalid\";\r\n }\r\n\r\n if (formik.touched[fieldname] && !formik.errors[fieldname]) {\r\n return \"is-valid\";\r\n }\r\n\r\n return \"\";\r\n };\r\n\r\n const formik = useFormik({\r\n initialValues,\r\n validationSchema: ForgotPasswordSchema,\r\n onSubmit: (values, { setStatus, setSubmitting }) => {\r\n flitSvc.recoverUser(\r\n values.email,\r\n lang)\r\n .then(() => {\r\n setTimeout(() => {\r\n setStatus(\r\n intl.formatMessage({id:\"AUTH.FORGOT.SUCCESS\"})\r\n );\r\n }, 1000);\r\n })\r\n .catch(({response: {data}}) => { \r\n setSubmitting(false);\r\n setStatus(\r\n data.message\r\n );\r\n });\r\n },\r\n });\r\n\r\n return (\r\n <>\r\n {isRequested && {fileRejections.length>0? intl.formatMessage({ id: \"DOCUMENT_NOT_SUPPORTED\" }) : \"\"}
\r\n \r\n \r\n {formik.status && (\r\n
\r\n )}\r\n \r\n );\r\n}\r\n\r\nexport default injectIntl(connect(null, auth.actions)(ForgotPassword));\r\n","import React, { useState } from \"react\";\r\nimport { Link,useLocation, Redirect } from \"react-router-dom\";\r\nimport { connect,useSelector } from \"react-redux\";\r\nimport { CircularProgress} from '@material-ui/core';\r\nimport * as auth from \"../_redux/authRedux\";\r\nimport { authClient } from './../../../../index';\r\n\r\nfunction SocialAuth(props) {\r\n\r\n let hash = props.location.hash;\r\n let token = hash.split('id_token=');\r\n \r\n if (!token || token.length == 0 || token[0] == \"\") return (\r\n \r\n
\r\n {intl.formatMessage({id:\"AUTH.FORGOT.TITLE\"})}
\r\n\r\n {intl.formatMessage({id:\"AUTH.FORGOT.DESC\"})}\r\n
\r\n \r\n
\r\n )}\r\n \r\n {formik.status}\r\n
\r\n \r\n
\r\n \r\n
\r\n ) : null}\r\n {formik.errors.email}
\r\n \r\n \r\n {intl.formatMessage({id:\"AUTH.GENERAL.SUBMIT_BUTTON\"})}\r\n \r\n \r\n \r\n {intl.formatMessage({id:\"AUTH.GENERAL.CANCEL_BUTTON\"})}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\n \r\nexport default connect(\r\n null,\r\n auth.actions,\r\n )(SocialAuth);\r\n\r\n ","import React, { useState, useContext, useEffect } from \"react\";\r\nimport { Link, useLocation, Redirect } from \"react-router-dom\";\r\nimport { connect, useSelector } from \"react-redux\";\r\nimport { CircularProgress } from '@material-ui/core';\r\nimport * as auth from \"../_redux/authRedux\";\r\nimport { authClient } from './../../../../index';\r\nimport { FlitServiceContext } from '../../../services/flitService';\r\nimport { Formik, FieldArray } from \"formik\";\r\nimport { FormattedMessage, injectIntl } from \"react-intl\";\r\nimport * as Yup from 'yup';\r\nimport { Row, Col, Button, Form } from \"react-bootstrap\";\r\nfunction WeChatAuth(props) {\r\n const { intl } = props;\r\n const { flitSvc } = useContext(FlitServiceContext);\r\n const useQuery = () => new URLSearchParams(useLocation().search);\r\n var code = useQuery().get('code');\r\n const [weChatToken, setWeChatToken] = React.useState();\r\n const [weChatOpenId, setWeChatOpenId] = React.useState();\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [resultMessage, setResultMessage] = useState(true);\r\n const [initialValues, setInitialValues] = React.useState({ email: \"\" });\r\n const EmailScheme = Yup.object().shape({\r\n email: Yup.string()\r\n .email(intl.formatMessage({ id: \"AUTH.VALIDATION.INVALID_EMAIL\" }))\r\n .min(3, intl.formatMessage({ id: \"AUTH.VALIDATION.MIN_LENGTH_FIELD\" }, { min: '3' }))\r\n .max(50, intl.formatMessage({ id: \"AUTH.VALIDATION.MAX_LENGTH_FIELD\" }, { max: '50' }))\r\n .required(\r\n intl.formatMessage({\r\n id: \"AUTH.VALIDATION.REQUIRED_FIELD\",\r\n })\r\n ),\r\n });\r\n\r\n useEffect(() => {\r\n if (!code) return (\r\n logging you in...
\r\n\r\n
\r\n \r\n );\r\n}\r\n\r\n\r\nexport default injectIntl(connect(\r\n null,\r\n auth.actions,\r\n)(WeChatAuth));\r\n\r\n","/* eslint-disable jsx-a11y/anchor-is-valid */\r\nimport React, { useEffect } from \"react\";\r\nimport { Link, Switch, Redirect } from \"react-router-dom\";\r\nimport { toAbsoluteUrl } from \"../../../../_metronic/_helpers\";\r\nimport { ContentRoute } from \"../../../../_metronic/layout\"\r\nimport Login from \"./Login\";\r\nimport Registration from \"./Registration\";\r\nimport BusinessRegistration from \"../../Registration/BusinessRegistration\";\r\nimport ForgotPassword from \"./ForgotPassword\";\r\nimport \"../../../../_metronic/_assets/sass/pages/login/login-3.scss\";\r\nimport SocialAuth from \"./SocialAuth\";\r\nimport WeChatAuth from \"./WeChatAuth\";\r\nimport { Route } from 'react-router-dom';\r\nimport { useLang, setLanguage } from \"./../../../../_metronic/i18n/Metronici18n\";\r\nimport { FormattedMessage, injectIntl, useIntl } from \"react-intl\";\r\n\r\nexport function AuthPage() {\r\n var lang = useLang();\r\n var intl = useIntl();\r\n useEffect(() => {\r\n if (!lang || lang === 'en') {\r\n var browserLang = window.navigator.userLanguage || window.navigator.language;\r\n\r\n if (browserLang && browserLang.substring(0, 2) !== lang) {\r\n //let matchLang = languages.find(l => l.lang === browserLang.substring(0,2));\r\n //if (matchLang) setLanguage(browserLang.substring(0,2));\r\n setLanguage(browserLang.substring(0, 2));\r\n }\r\n }\r\n }, []);\r\n return (\r\n <>\r\n \r\n {isLoading ? <> {\r\n setIsLoading(true);\r\n\r\n flitSvc.createWeChatUser(weChatToken, values.email, weChatOpenId).then(({ data }) => {\r\n localStorage.setItem(\"jwt\", data.accessToken);\r\n\r\n props.login();\r\n props.updateToken();\r\n\r\n }).catch((error) => {\r\n var message = error.response.data.message;\r\n if (!message) {\r\n props.history.push('/auth/login');\r\n } else {\r\n\r\n setIsLoading(false);\r\n setResultMessage(message);\r\n }\r\n });\r\n\r\n }}\r\n >\r\n {({\r\n values,\r\n status,\r\n errors,\r\n touched,\r\n handleChange,\r\n handleBlur,\r\n handleSubmit,\r\n validateField,\r\n setFieldValue,\r\n setFieldTouched,\r\n isSubmitting,\r\n\r\n }) => (\r\n <>\r\n \r\n
\r\n )}\r\n \r\n }\r\n
\r\n logging you in...
\r\n\r\n {/*begin::Login*/}\r\n \r\n {/*begin::Aside*/}\r\n \r\n {/*begin: Aside Container*/}\r\n
\r\n\r\n {/*begin::Aside*/}\r\n\r\n {/*begin::Content*/}\r\n \r\n {/* start:: Aside header */}\r\n \r\n
\r\n {/*end: Aside Container*/}\r\n \r\n
\r\n {/* end:: Aside content */}\r\n\r\n {/* start:: Aside footer for desktop */}\r\n \r\n {intl.formatMessage({ id: \"PNPLINE_FORWARDING\" })}\r\n
\r\n\r\n {intl.formatMessage({ id: \"PNPLINE_FORWARDING_DESCRIPTION\" })}\r\n
\r\n\r\n
\r\n {/* end:: Aside footer for desktop */}\r\n \r\n © 2021 Pnpline Inc.\r\n
\r\n {/*\r\n \r\n Privacy\r\n \r\n \r\n Legal\r\n \r\n \r\n Contact\r\n \r\n
*/}\r\n \r\n {/*begin::Content header*/}\r\n \r\n {\r\n return {\r\n return \r\n
\r\n {/* end::Mobile footer */}\r\n \r\n {/*end::Content*/}\r\n \r\n {/*end::Login*/}\r\n \r\n \r\n );\r\n}\r\n","import React, {Component} from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {Redirect} from \"react-router-dom\";\r\nimport {LayoutSplashScreen} from \"../../../../_metronic/layout\";\r\nimport * as auth from \"../_redux/authRedux\";\r\n\r\nclass Logout extends Component {\r\n componentDidMount() {\r\n this.props.logout();\r\n }\r\n\r\n render() {\r\n const { hasAuthToken } = this.props;\r\n return hasAuthToken ? \r\n {intl.formatMessage({ id: \"AUTH.HAVE_ACCOUNT\" })}\r\n \r\n {intl.formatMessage({ id: \"SIGN_IN\" })}\r\n
\r\n }} />\r\n \r\n {intl.formatMessage({ id: \"AUTH.GENERAL.NO_ACCOUNT\" })}\r\n \r\n {intl.formatMessage({ id: \"AUTH.GENERAL.SIGNUP_BUTTON\" })}\r\n
\r\n }} />\r\n\r\n {/*end::Content header*/}\r\n\r\n {/* begin::Content body */}\r\n \r\n \r\n {\r\n var url = process.env.REACT_APP_OKTA_DOMAIN + \"/oauth2/default/v1/authorize\"\r\n + \"?idp=\" + process.env.REACT_APP_OKTA_GOOGLE_IDP + \"&client_id=\" + process.env.REACT_APP_OKTA_CLIENT_ID\r\n + \"&prompt=login&response_type=id_token&response_mode=fragment&scope=openid\" +\r\n \"&redirect_uri=\" + process.env.REACT_APP_OKTA_REDIRECT_URL +\r\n \"&state=WM6D&nonce=YsG76jo\";\r\n window.location.href = url;\r\n return null;\r\n }} />\r\n {\r\n var url = process.env.REACT_APP_OKTA_DOMAIN + \"/oauth2/default/v1/authorize\"\r\n + \"?idp=\" + process.env.REACT_APP_OKTA_FACEBOOK_IDP + \"&client_id=\" + process.env.REACT_APP_OKTA_CLIENT_ID\r\n + \"&prompt=login&response_type=id_token&response_mode=fragment&scope=openid\" +\r\n \"&redirect_uri=\" + process.env.REACT_APP_OKTA_REDIRECT_URL +\r\n \"&state=WM6D&nonce=YsG76jo\";\r\n window.location.href = url;\r\n return null;\r\n }} />\r\n {\r\n return \r\n }} />\r\n \r\n
\r\n {/*end::Content body*/}\r\n\r\n {/* begin::Mobile footer */}\r\n \r\n © 2021 Pnpline Inc.\r\n
\r\n {/*\r\n \r\n Privacy\r\n \r\n \r\n Legal\r\n \r\n \r\n Contact\r\n \r\n
*/}\r\n \r\n \r\n \r\n 404\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport {toAbsoluteUrl} from \"../../../_metronic/_helpers\";\r\n\r\nexport function ErrorPage2() {\r\n return (\r\n \r\n OOPS! Something went wrong here\r\n
\r\n\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport {toAbsoluteUrl} from \"../../../_metronic/_helpers\";\r\nimport \"../../../_metronic/_assets/sass/pages/error/error-3.scss\";\r\n\r\nexport function ErrorPage3() {\r\n return (\r\n \r\n
\r\n OOPS!
\r\n \r\n Something went wrong here\r\n \r\n\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport { toAbsoluteUrl } from \"../../../_metronic/_helpers\";\r\nimport \"../../../_metronic/_assets/sass/pages/error/error-4.scss\";\r\n\r\nexport function ErrorPage4() {\r\n return (\r\n \r\n
\r\n 404
\r\n\r\n How did you get here\r\n
\r\n\r\n Sorry we can't seem to find the page you're looking for.\r\n
\r\n\r\n There may be a misspelling in the URL entered,\r\n
\r\n or the page you are looking for may no longer exist.\r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport { toAbsoluteUrl } from \"../../../_metronic/_helpers\";\r\nimport \"../../../_metronic/_assets/sass/pages/error/error-5.scss\";\r\n\r\nexport function ErrorPage5() {\r\n return (\r\n \r\n
\r\n \r\n 404\r\n
\r\n\r\n ERROR\r\n
\r\n\r\n Nothing left to do here.\r\n
\r\n\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport { toAbsoluteUrl } from \"../../../_metronic/_helpers\";\r\nimport \"../../../_metronic/_assets/sass/pages/error/error-6.scss\";\r\n\r\nexport function ErrorPage6() {\r\n return (\r\n \r\n
\r\n \r\n Oops!\r\n
\r\n\r\n Something went wrong here.\r\n
\r\n\r\n We're working on it and we'll get it fixed\r\n
\r\n as soon possible.\r\n
\r\n You can back or use our Help Center.\r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport {toAbsoluteUrl} from \"../../../_metronic/_helpers\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { Button } from \"react-bootstrap\";\r\n\r\nexport function ErrorPage404() {\r\n var history=useHistory();\r\n return (\r\n \r\n \r\n Oops...\r\n \r\n
\r\n \r\n Looks like something went wrong.\r\n
\r\n We're working on it\r\n
\r\n \r\n \r\n 404\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport { toAbsoluteUrl } from \"../../../_metronic/_helpers\";\r\nimport \"../../../_metronic/_assets/sass/pages/error/error-5.scss\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { Button } from \"react-bootstrap\";\r\n\r\nexport function ErrorPage500() {\r\n var history = useHistory();\r\n return (\r\n \r\n Sorry we can't seem to find the page you're looking for.\r\n You might have no permission for the requested URL.\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport { toAbsoluteUrl } from \"../../../_metronic/_helpers\";\r\nimport \"../../../_metronic/_assets/sass/pages/error/error-6.scss\";\r\nimport { useParams,useLocation } from 'react-router-dom';\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { Button } from \"react-bootstrap\";\r\n\r\nexport function ErrorPageDev() {\r\n const useQuery = () => new URLSearchParams(useLocation().search);\r\n let stack = useQuery().get('stack');\r\n let err = useQuery().get('err');\r\n var history=useHistory();\r\n return (\r\n \r\n
\r\n \r\n Oops!\r\n
\r\n\r\n Something went wrong here.\r\n
\r\n\r\n Please contact PNPLINE if error persists.
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport { Redirect, Route, Switch } from \"react-router-dom\";\r\nimport { ErrorPage1 } from \"./ErrorPage1\";\r\nimport { ErrorPage2 } from \"./ErrorPage2\";\r\nimport { ErrorPage3 } from \"./ErrorPage3\";\r\nimport { ErrorPage4 } from \"./ErrorPage4\";\r\nimport { ErrorPage5 } from \"./ErrorPage5\";\r\nimport { ErrorPage6 } from \"./ErrorPage6\";\r\nimport { ErrorPage404 } from \"./ErrorPage404\";\r\nimport { ErrorPage500 } from \"./ErrorPage500\";\r\nimport { ErrorPageDev } from \"./ErrorPageDev\";\r\n\r\nexport default function ErrorsPage() {\r\n return (\r\n \r\n \r\n Oops...\r\n \r\n
\r\n
\r\n \r\n {err}\r\n
\r\n \r\n{stack}
\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\nexport default injectIntl(connect(null, auth.actions)(BusinessNumberCheck));\r\n","import React from \"react\";\r\nimport { toAbsoluteUrl } from \"../../../_metronic/_helpers\";\r\nimport \"../../../_metronic/_assets/sass/pages/error/error-6.scss\";\r\nimport { useLocation } from \"react-router\";\r\nimport { useIntl } from \"react-intl\";\r\nimport {useSelector} from \"react-redux\";\r\n\r\nexport function RegTest() {\r\n// 테스트해볼것 - 로그인이 안되었을때 - 아무 상관 없음\r\n// 로그인이 되었을때 - auth 정보 접근 가능한지\r\n\r\nconst location = useLocation();\r\nconst intl = useIntl();\r\nconst {user} = useSelector(state => state.auth);\r\n\r\n\r\n return (\r\n \r\n {user ? JSON.stringify(user) : \"Not logged in\"}\r\n
*/}\r\n \r\n \r\n {/* begin: Alert */}\r\n {formik.status && (\r\n
\r\n \r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n {intl.formatMessage({ id: \"AUTH.REGISTER.BUSINESS_NUMBER.DESC\" })}\r\n {user && !user.businessEntity?.idNumber &&\r\n
\r\n {intl.formatMessage({ id: \"AUTH.VALIDATION.BUSINESS.NEED_TO_UPDATE\" })}\r\n
\r\n }\r\n {user && user.businessEntity?.verificationStatus === VERIFICATION_STATUS.VERIFICATION_FAILED &&\r\n \r\n {intl.formatMessage({ id: \"AUTH.VALIDATION.BUSINESS.VERIFICATION_FAILED\" })}\r\n
\r\n }\r\n \r\n \r\n
\r\n )}\r\n {/* end: Alert */}\r\n {/* begin: Country */}\r\n {formik.status}
\r\n \r\n changeLanguage(e.target.value)}\r\n //onChange={e => console.log(e.target.value)}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n {formik.touched.registeredCountry && formik.errors.registeredCountry ? (\r\n
\r\n {/* end: Country */}\r\n\r\n {/* begin: BusinessNumber */}\r\n \r\n
\r\n ) : null}\r\n {formik.errors.registeredCountry}
\r\n \r\n
\r\n {/* end: BusinessNumber */}\r\n\r\n \r\n
\r\n ) : null}\r\n {formik.errors.idNumber}
\r\n \r\n \r\n {intl.formatMessage({ id: \"AUTH.GENERAL.NEXT_BUTTON\" })}\r\n {loading && }\r\n \r\n\r\n \r\n \r\n {intl.formatMessage({ id: \"BACK_TO_LOGIN\" })}\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 { Redirect, Route, Switch } from \"react-router-dom\";\r\nimport BusinessNumberCheck from \"./BusinessNumberCheck\";\r\nimport BusinessRegistration from \"./BusinessRegistration\";\r\nimport { RegTest } from \"./RegTest\";\r\n\r\nconst wrapStyle = {display: \"flex\", justifyContent: \"center\", width: \"100%\" }\r\n\r\nexport default function RegistrationPage() {\r\n return (\r\n \r\n
\r\n Registration Test
\r\n {user ? user.email : \"Not logged in\"} \r\n\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","/**\r\n * High level router.\r\n *\r\n * Note: It's recommended to compose related routes in internal router\r\n * components (e.g: `src/app/modules/Auth/pages/AuthPage`, `src/app/BasePage`).\r\n */\r\n\r\nimport React from \"react\";\r\nimport { Redirect, Switch, Route, useLocation,useParams } from \"react-router-dom\";\r\nimport { shallowEqual, useSelector } from \"react-redux\";\r\nimport { Layout } from \"../_metronic/layout\";\r\nimport BasePage from \"./BasePage\";\r\nimport { Logout, AuthPage } from \"./modules/Auth\";\r\nimport ErrorsPage from \"./modules/ErrorsExamples/ErrorsPage\";\r\nimport { saveLastLocation, getLastLocation } from \"../_metronic/_helpers/RouterHelpers\";\r\nimport RegistrationPage from \"./modules/Registration/RegistrationPage\";\r\nimport { VERIFICATION_STATUS, ROLES } from \"./services/flitEnum\";\r\n\r\nexport function Routes(props) {\r\n const { isAuthorized, businessEntity, isOperator } = useSelector(\r\n ({ auth }) => ({\r\n isAuthorized: auth.user != null && auth.authToken != null,\r\n businessEntity: auth.user?.businessEntity,\r\n isOperator: auth.user?.userRole?.some(r => [ROLES.OPERATOR, ROLES.MANAGER, ROLES.OPERATOR].includes(r.role)),\r\n }),\r\n shallowEqual\r\n );\r\n const location = useLocation();\r\n saveLastLocation(location);\r\n const lastLocation = getLastLocation();\r\n return (\r\n \r\n \r\n {/* {layoutProps.offcanvas && (\r\n \r\n
\r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n {(values.firstName\r\n ? values.firstName[0]\r\n : \"\") +\r\n (values.lastName\r\n ? values.lastName[0]\r\n : \"\")}\r\n \r\n \r\n
\r\n )}\r\n {/**/}\r\n \r\n \r\n {errors.firstName && touched.firstName ? (\r\n
\r\n \r\n {errors.firstName}\r\n
\r\n ) : null}\r\n \r\n {errors.lastName && touched.lastName ? (\r\n
\r\n \r\n {errors.lastName}\r\n
\r\n ) : null}\r\n \r\n {errors.email && touched.email ? (\r\n
\r\n \r\n {errors.email}\r\n
\r\n ) : null}\r\n \r\n {errors.businessEntityId ? (\r\n
\r\n \r\n {errors.businessEntityId}\r\n
\r\n ) : null}\r\n \r\n {option.legalName}\r\n
\r\n )}\r\n paginationText={intl.formatMessage({\r\n id: \"SHOW_MORE_RESULTS\",\r\n })}\r\n useCache={false}\r\n />\r\n \r\n \r\n {errors.businessEntityId &&\r\n touched.businessEntityId ? (\r\n
\r\n \r\n {errors.businessEntityId}\r\n
\r\n ) : null}\r\n \r\n {errors.phoneNo && touched.phoneNo ? (\r\n
\r\n \r\n {errors.phoneNo}\r\n
\r\n ) : null}\r\n \r\n {errors.userRoles_select &&\r\n touched.userRoles_select ? (\r\n
\r\n \r\n {errors.userRoles_select}\r\n
\r\n ) : null}\r\n \r\n
\r\n ) : null}\r\n \r\n {intl.formatMessage({ id: \"FORM_ERROR\" })}\r\n
\r\n \r\n value = parseInt(KTUtil.css(el, 'z-index'));\r\n\r\n if (!isNaN(value) && value !== 0) {\r\n return value;\r\n }\r\n }\r\n\r\n el = el.parentNode;\r\n }\r\n\r\n return null;\r\n },\r\n\r\n /**\r\n * Checks whether the element has any parent with fixed positionfreg\r\n * @param {object} el jQuery element object\r\n * @returns {boolean}\r\n */\r\n hasFixedPositionedParent: function(el) {\r\n var position;\r\n\r\n while (el && el !== document) {\r\n position = KTUtil.css(el, 'position');\r\n\r\n if (position === \"fixed\") {\r\n return true;\r\n }\r\n\r\n el = el.parentNode;\r\n }\r\n\r\n return false;\r\n },\r\n\r\n /**\r\n * Simulates delay\r\n */\r\n sleep: function(milliseconds) {\r\n var start = new Date().getTime();\r\n for (var i = 0; i < 1e7; i++) {\r\n if ((new Date().getTime() - start) > milliseconds) {\r\n break;\r\n }\r\n }\r\n },\r\n\r\n /**\r\n * Gets randomly generated integer value within given min and max range\r\n * @param {number} min Range start value\r\n * @param {number} max Range end value\r\n * @returns {number}\r\n */\r\n getRandomInt: function(min, max) {\r\n return Math.floor(Math.random() * (max - min + 1)) + min;\r\n },\r\n\r\n /**\r\n * Checks whether Angular library is included\r\n * @returns {boolean}\r\n */\r\n isAngularVersion: function() {\r\n return window.Zone !== undefined ? true : false;\r\n },\r\n\r\n // jQuery Workarounds\r\n\r\n // Deep extend: $.extend(true, {}, objA, objB);\r\n deepExtend: function(out) {\r\n out = out || {};\r\n\r\n for (var i = 1; i < arguments.length; i++) {\r\n var obj = arguments[i];\r\n\r\n if (!obj)\r\n continue;\r\n\r\n for (var key in obj) {\r\n if (obj.hasOwnProperty(key)) {\r\n if (typeof obj[key] === 'object')\r\n out[key] = KTUtil.deepExtend(out[key], obj[key]);\r\n else\r\n out[key] = obj[key];\r\n }\r\n }\r\n }\r\n\r\n return out;\r\n },\r\n\r\n // extend: $.extend({}, objA, objB);\r\n extend: function(out) {\r\n out = out || {};\r\n\r\n for (var i = 1; i < arguments.length; i++) {\r\n if (!arguments[i])\r\n continue;\r\n\r\n for (var key in arguments[i]) {\r\n if (arguments[i].hasOwnProperty(key))\r\n out[key] = arguments[i][key];\r\n }\r\n }\r\n\r\n return out;\r\n },\r\n\r\n getById: function(el) {\r\n if (typeof el === 'string') {\r\n return document.getElementById(el);\r\n } else {\r\n return el;\r\n }\r\n },\r\n\r\n getByTag: function(query) {\r\n return document.getElementsByTagName(query);\r\n },\r\n\r\n getByTagName: function(query) {\r\n return document.getElementsByTagName(query);\r\n },\r\n\r\n getByClass: function(query) {\r\n return document.getElementsByClassName(query);\r\n },\r\n\r\n getBody: function() {\r\n return document.getElementsByTagName('body')[0];\r\n },\r\n\r\n /**\r\n * Checks whether the element has given classes\r\n * @param {object} el jQuery element object\r\n * @param {string} Classes string\r\n * @returns {boolean}\r\n */\r\n hasClasses: function(el, classes) {\r\n if (!el) {\r\n return;\r\n }\r\n\r\n var classesArr = classes.split(\" \");\r\n\r\n for (var i = 0; i < classesArr.length; i++) {\r\n if (KTUtil.hasClass(el, KTUtil.trim(classesArr[i])) == false) {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n },\r\n\r\n hasClass: function(el, className) {\r\n if (!el) {\r\n return;\r\n }\r\n\r\n return el.classList ? el.classList.contains(className) : new RegExp('\\\\b' + className + '\\\\b').test(el.className);\r\n },\r\n\r\n addClass: function(el, className) {\r\n if (!el || typeof className === 'undefined') {\r\n return;\r\n }\r\n\r\n var classNames = className.split(' ');\r\n\r\n if (el.classList) {\r\n for (var i = 0; i < classNames.length; i++) {\r\n if (classNames[i] && classNames[i].length > 0) {\r\n el.classList.add(KTUtil.trim(classNames[i]));\r\n }\r\n }\r\n } else if (!KTUtil.hasClass(el, className)) {\r\n for (var x = 0; x < classNames.length; x++) {\r\n el.className += ' ' + KTUtil.trim(classNames[x]);\r\n }\r\n }\r\n },\r\n\r\n removeClass: function(el, className) {\r\n if (!el || typeof className === 'undefined') {\r\n return;\r\n }\r\n\r\n var classNames = className.split(' ');\r\n\r\n if (el.classList) {\r\n for (var i = 0; i < classNames.length; i++) {\r\n el.classList.remove(KTUtil.trim(classNames[i]));\r\n }\r\n } else if (KTUtil.hasClass(el, className)) {\r\n for (var x = 0; x < classNames.length; x++) {\r\n el.className = el.className.replace(new RegExp('\\\\b' + KTUtil.trim(classNames[x]) + '\\\\b', 'g'), '');\r\n }\r\n }\r\n },\r\n\r\n triggerCustomEvent: function(el, eventName, data) {\r\n var event;\r\n if (window.CustomEvent) {\r\n event = new CustomEvent(eventName, {\r\n detail: data\r\n });\r\n } else {\r\n event = document.createEvent('CustomEvent');\r\n event.initCustomEvent(eventName, true, true, data);\r\n }\r\n\r\n el.dispatchEvent(event);\r\n },\r\n\r\n triggerEvent: function(node, eventName) {\r\n // Make sure we use the ownerDocument from the provided node to avoid cross-window problems\r\n var doc;\r\n if (node.ownerDocument) {\r\n doc = node.ownerDocument;\r\n } else if (node.nodeType == 9) {\r\n // the node may be the document itself, nodeType 9 = DOCUMENT_NODE\r\n doc = node;\r\n } else {\r\n throw new Error(\"Invalid node passed to fireEvent: \" + node.id);\r\n }\r\n\r\n if (node.dispatchEvent) {\r\n // Gecko-style approach (now the standard) takes more work\r\n var eventClass = \"\";\r\n\r\n // Different events have different event classes.\r\n // If this switch statement can't map an eventName to an eventClass,\r\n // the event firing is going to fail.\r\n switch (eventName) {\r\n case \"click\": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.\r\n case \"mouseenter\":\r\n case \"mouseleave\":\r\n case \"mousedown\":\r\n case \"mouseup\":\r\n eventClass = \"MouseEvents\";\r\n break;\r\n\r\n case \"focus\":\r\n case \"change\":\r\n case \"blur\":\r\n case \"select\":\r\n eventClass = \"HTMLEvents\";\r\n break;\r\n\r\n default:\r\n throw \"fireEvent: Couldn't find an event class for event '\" + eventName + \"'.\";\r\n break;\r\n }\r\n var event = doc.createEvent(eventClass);\r\n\r\n var bubbles = eventName == \"change\" ? false : true;\r\n event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.\r\n\r\n event.synthetic = true; // allow detection of synthetic events\r\n // The second parameter says go ahead with the default action\r\n node.dispatchEvent(event, true);\r\n } else if (node.fireEvent) {\r\n // IE-old school style\r\n var event = doc.createEventObject();\r\n event.synthetic = true; // allow detection of synthetic events\r\n node.fireEvent(\"on\" + eventName, event);\r\n }\r\n },\r\n\r\n index: function( el ){\r\n var c = el.parentNode.children, i = 0;\r\n for(; i < c.length; i++ )\r\n if( c[i] == el ) return i;\r\n },\r\n\r\n trim: function(string) {\r\n return string.trim();\r\n },\r\n\r\n eventTriggered: function(e) {\r\n if (e.currentTarget.dataset.triggered) {\r\n return true;\r\n } else {\r\n e.currentTarget.dataset.triggered = true;\r\n\r\n return false;\r\n }\r\n },\r\n\r\n remove: function(el) {\r\n if (el && el.parentNode) {\r\n el.parentNode.removeChild(el);\r\n }\r\n },\r\n\r\n find: function(parent, query) {\r\n parent = KTUtil.getById(parent);\r\n if (parent) {\r\n return parent.querySelector(query);\r\n }\r\n },\r\n\r\n findAll: function(parent, query) {\r\n parent = KTUtil.getById(parent);\r\n if (parent) {\r\n return parent.querySelectorAll(query);\r\n }\r\n },\r\n\r\n insertAfter: function(el, referenceNode) {\r\n return referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);\r\n },\r\n\r\n parents: function(elem, selector) {\r\n // Element.matches() polyfill\r\n if (!Element.prototype.matches) {\r\n Element.prototype.matches =\r\n Element.prototype.matchesSelector ||\r\n Element.prototype.mozMatchesSelector ||\r\n Element.prototype.msMatchesSelector ||\r\n Element.prototype.oMatchesSelector ||\r\n Element.prototype.webkitMatchesSelector ||\r\n function(s) {\r\n var matches = (this.document || this.ownerDocument).querySelectorAll(s),\r\n i = matches.length;\r\n while (--i >= 0 && matches.item(i) !== this) {}\r\n return i > -1;\r\n };\r\n }\r\n\r\n // Set up a parent array\r\n var parents = [];\r\n\r\n // Push each parent element to the array\r\n for ( ; elem && elem !== document; elem = elem.parentNode ) {\r\n if (selector) {\r\n if (elem.matches(selector)) {\r\n parents.push(elem);\r\n }\r\n continue;\r\n }\r\n parents.push(elem);\r\n }\r\n\r\n // Return our parent array\r\n return parents;\r\n },\r\n\r\n children: function(el, selector, log) {\r\n if (!el || !el.childNodes) {\r\n return;\r\n }\r\n\r\n var result = [],\r\n i = 0,\r\n l = el.childNodes.length;\r\n\r\n for (var i; i < l; ++i) {\r\n if (el.childNodes[i].nodeType == 1 && KTUtil.matches(el.childNodes[i], selector, log)) {\r\n result.push(el.childNodes[i]);\r\n }\r\n }\r\n\r\n return result;\r\n },\r\n\r\n child: function(el, selector, log) {\r\n var children = KTUtil.children(el, selector, log);\r\n\r\n return children ? children[0] : null;\r\n },\r\n\r\n matches: function(el, selector, log) {\r\n var p = Element.prototype;\r\n var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {\r\n return [].indexOf.call(document.querySelectorAll(s), this) !== -1;\r\n };\r\n\r\n if (el && el.tagName) {\r\n return f.call(el, selector);\r\n } else {\r\n return false;\r\n }\r\n },\r\n\r\n data: function(el) {\r\n return {\r\n set: function(name, data) {\r\n if (!el) {\r\n return;\r\n }\r\n\r\n if (el.customDataTag === undefined) {\r\n window.KTUtilElementDataStoreID++;\r\n el.customDataTag = window.KTUtilElementDataStoreID;\r\n }\r\n\r\n if (window.KTUtilElementDataStore[el.customDataTag] === undefined) {\r\n window.KTUtilElementDataStore[el.customDataTag] = {};\r\n }\r\n\r\n window.KTUtilElementDataStore[el.customDataTag][name] = data;\r\n },\r\n\r\n get: function(name) {\r\n if (!el) {\r\n return;\r\n }\r\n\r\n if (el.customDataTag === undefined) {\r\n return null;\r\n }\r\n\r\n return this.has(name) ? window.KTUtilElementDataStore[el.customDataTag][name] : null;\r\n },\r\n\r\n has: function(name) {\r\n if (!el) {\r\n return false;\r\n }\r\n\r\n if (el.customDataTag === undefined) {\r\n return false;\r\n }\r\n\r\n return (window.KTUtilElementDataStore[el.customDataTag] && window.KTUtilElementDataStore[el.customDataTag][name]) ? true : false;\r\n },\r\n\r\n remove: function(name) {\r\n if (el && this.has(name)) {\r\n delete window.KTUtilElementDataStore[el.customDataTag][name];\r\n }\r\n }\r\n };\r\n },\r\n\r\n outerWidth: function(el, margin) {\r\n var width;\r\n\r\n if (margin === true) {\r\n width = parseFloat(el.offsetWidth);\r\n width += parseFloat(KTUtil.css(el, 'margin-left')) + parseFloat(KTUtil.css(el, 'margin-right'));\r\n\r\n return parseFloat(width);\r\n } else {\r\n width = parseFloat(el.offsetWidth);\r\n\r\n return width;\r\n }\r\n },\r\n\r\n offset: function(el) {\r\n var rect, win;\r\n\r\n if ( !el ) {\r\n return;\r\n }\r\n\r\n // Return zeros for disconnected and hidden (display: none) elements (gh-2310)\r\n // Support: IE <=11 only\r\n // Running getBoundingClientRect on a\r\n // disconnected node in IE throws an error\r\n\r\n if ( !el.getClientRects().length ) {\r\n return { top: 0, left: 0 };\r\n }\r\n\r\n // Get document-relative position by adding viewport scroll to viewport-relative gBCR\r\n rect = el.getBoundingClientRect();\r\n win = el.ownerDocument.defaultView;\r\n\r\n return {\r\n top: rect.top + win.pageYOffset,\r\n left: rect.left + win.pageXOffset\r\n };\r\n },\r\n\r\n height: function(el) {\r\n return KTUtil.css(el, 'height');\r\n },\r\n\r\n outerHeight: function(el, withMargic = false) {\r\n var height = el.offsetHeight;\r\n var style;\r\n\r\n if (withMargic) {\r\n style = getComputedStyle(el);\r\n height += parseInt(style.marginTop) + parseInt(style.marginBottom);\r\n\r\n return height;\r\n } else {\r\n return height;\r\n }\r\n },\r\n\r\n visible: function(el) {\r\n return !(el.offsetWidth === 0 && el.offsetHeight === 0);\r\n },\r\n\r\n attr: function(el, name, value) {\r\n if (el == undefined) {\r\n return;\r\n }\r\n\r\n if (value !== undefined) {\r\n el.setAttribute(name, value);\r\n } else {\r\n return el.getAttribute(name);\r\n }\r\n },\r\n\r\n hasAttr: function(el, name) {\r\n if (el == undefined) {\r\n return;\r\n }\r\n\r\n return el.getAttribute(name) ? true : false;\r\n },\r\n\r\n removeAttr: function(el, name) {\r\n if (el == undefined) {\r\n return;\r\n }\r\n\r\n el.removeAttribute(name);\r\n },\r\n\r\n animate: function(from, to, duration, update, easing, done) {\r\n /**\r\n * TinyAnimate.easings\r\n * Adapted from jQuery Easing\r\n */\r\n var easings = {};\r\n var easing;\r\n\r\n easings.linear = function(t, b, c, d) {\r\n return c * t / d + b;\r\n };\r\n\r\n easing = easings.linear;\r\n\r\n // Early bail out if called incorrectly\r\n if (typeof from !== 'number' ||\r\n typeof to !== 'number' ||\r\n typeof duration !== 'number' ||\r\n typeof update !== 'function') {\r\n return;\r\n }\r\n\r\n // Create mock done() function if necessary\r\n if (typeof done !== 'function') {\r\n done = function() {};\r\n }\r\n\r\n // Pick implementation (requestAnimationFrame | setTimeout)\r\n var rAF = window.requestAnimationFrame || function(callback) {\r\n window.setTimeout(callback, 1000 / 50);\r\n };\r\n\r\n // Animation loop\r\n var canceled = false;\r\n var change = to - from;\r\n\r\n function loop(timestamp) {\r\n var time = (timestamp || +new Date()) - start;\r\n\r\n if (time >= 0) {\r\n update(easing(time, from, change, duration));\r\n }\r\n if (time >= 0 && time >= duration) {\r\n update(to);\r\n done();\r\n } else {\r\n rAF(loop);\r\n }\r\n }\r\n\r\n update(from);\r\n\r\n // Start animation loop\r\n var start = window.performance && window.performance.now ? window.performance.now() : +new Date();\r\n\r\n rAF(loop);\r\n },\r\n\r\n actualCss: function(el, prop, cache) {\r\n var css = '';\r\n\r\n if (el instanceof HTMLElement === false) {\r\n return;\r\n }\r\n\r\n if (!el.getAttribute('kt-hidden-' + prop) || cache === false) {\r\n var value;\r\n\r\n // the element is hidden so:\r\n // making the el block so we can meassure its height but still be hidden\r\n css = el.style.cssText;\r\n el.style.cssText = 'position: absolute; visibility: hidden; display: block;';\r\n\r\n if (prop == 'width') {\r\n value = el.offsetWidth;\r\n } else if (prop == 'height') {\r\n value = el.offsetHeight;\r\n }\r\n\r\n el.style.cssText = css;\r\n\r\n // store it in cache\r\n el.setAttribute('kt-hidden-' + prop, value);\r\n\r\n return parseFloat(value);\r\n } else {\r\n // store it in cache\r\n return parseFloat(el.getAttribute('kt-hidden-' + prop));\r\n }\r\n },\r\n\r\n actualHeight: function(el, cache) {\r\n return KTUtil.actualCss(el, 'height', cache);\r\n },\r\n\r\n actualWidth: function(el, cache) {\r\n return KTUtil.actualCss(el, 'width', cache);\r\n },\r\n\r\n getScroll: function(element, method) {\r\n // The passed in `method` value should be 'Top' or 'Left'\r\n method = 'scroll' + method;\r\n return (element == window || element == document) ? (\r\n self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] ||\r\n (browserSupportsBoxModel && document.documentElement[method]) ||\r\n document.body[method]\r\n ) : element[method];\r\n },\r\n\r\n css: function(el, styleProp, value) {\r\n if (!el) {\r\n return;\r\n }\r\n\r\n if (value !== undefined) {\r\n el.style[styleProp] = value;\r\n } else {\r\n var defaultView = (el.ownerDocument || document).defaultView;\r\n // W3C standard way:\r\n if (defaultView && defaultView.getComputedStyle) {\r\n // sanitize property name to css notation\r\n // (hyphen separated words eg. font-Size)\r\n styleProp = styleProp.replace(/([A-Z])/g, \"-$1\").toLowerCase();\r\n return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);\r\n } else if (el.currentStyle) { // IE\r\n // sanitize property name to camelCase\r\n styleProp = styleProp.replace(/\\-(\\w)/g, function(str, letter) {\r\n return letter.toUpperCase();\r\n });\r\n value = el.currentStyle[styleProp];\r\n // convert other units to pixels on IE\r\n if (/^\\d+(em|pt|%|ex)?$/i.test(value)) {\r\n return (function(value) {\r\n var oldLeft = el.style.left,\r\n oldRsLeft = el.runtimeStyle.left;\r\n el.runtimeStyle.left = el.currentStyle.left;\r\n el.style.left = value || 0;\r\n value = el.style.pixelLeft + \"px\";\r\n el.style.left = oldLeft;\r\n el.runtimeStyle.left = oldRsLeft;\r\n return value;\r\n })(value);\r\n }\r\n return value;\r\n }\r\n }\r\n },\r\n\r\n slide: function(el, dir, speed, callback, recalcMaxHeight) {\r\n if (!el || (dir == 'up' && KTUtil.visible(el) === false) || (dir == 'down' && KTUtil.visible(el) === true)) {\r\n return;\r\n }\r\n\r\n speed = (speed ? speed : 600);\r\n var calcHeight = KTUtil.actualHeight(el);\r\n var calcPaddingTop = false;\r\n var calcPaddingBottom = false;\r\n\r\n if (KTUtil.css(el, 'padding-top') && KTUtil.data(el).has('slide-padding-top') !== true) {\r\n KTUtil.data(el).set('slide-padding-top', KTUtil.css(el, 'padding-top'));\r\n }\r\n\r\n if (KTUtil.css(el, 'padding-bottom') && KTUtil.data(el).has('slide-padding-bottom') !== true) {\r\n KTUtil.data(el).set('slide-padding-bottom', KTUtil.css(el, 'padding-bottom'));\r\n }\r\n\r\n if (KTUtil.data(el).has('slide-padding-top')) {\r\n calcPaddingTop = parseInt(KTUtil.data(el).get('slide-padding-top'));\r\n }\r\n\r\n if (KTUtil.data(el).has('slide-padding-bottom')) {\r\n calcPaddingBottom = parseInt(KTUtil.data(el).get('slide-padding-bottom'));\r\n }\r\n\r\n if (dir == 'up') { // up\r\n el.style.cssText = 'display: block; overflow: hidden;';\r\n\r\n if (calcPaddingTop) {\r\n KTUtil.animate(0, calcPaddingTop, speed, function(value) {\r\n el.style.paddingTop = (calcPaddingTop - value) + 'px';\r\n }, 'linear');\r\n }\r\n\r\n if (calcPaddingBottom) {\r\n KTUtil.animate(0, calcPaddingBottom, speed, function(value) {\r\n el.style.paddingBottom = (calcPaddingBottom - value) + 'px';\r\n }, 'linear');\r\n }\r\n\r\n KTUtil.animate(0, calcHeight, speed, function(value) {\r\n el.style.height = (calcHeight - value) + 'px';\r\n }, 'linear', function() {\r\n el.style.height = '';\r\n el.style.display = 'none';\r\n\r\n if (typeof callback === 'function') {\r\n callback();\r\n }\r\n });\r\n\r\n\r\n } else if (dir == 'down') { // down\r\n el.style.cssText = 'display: block; overflow: hidden;';\r\n\r\n if (calcPaddingTop) {\r\n KTUtil.animate(0, calcPaddingTop, speed, function(value) {//\r\n el.style.paddingTop = value + 'px';\r\n }, 'linear', function() {\r\n el.style.paddingTop = '';\r\n });\r\n }\r\n\r\n if (calcPaddingBottom) {\r\n KTUtil.animate(0, calcPaddingBottom, speed, function(value) {\r\n el.style.paddingBottom = value + 'px';\r\n }, 'linear', function() {\r\n el.style.paddingBottom = '';\r\n });\r\n }\r\n\r\n KTUtil.animate(0, calcHeight, speed, function(value) {\r\n el.style.height = value + 'px';\r\n }, 'linear', function() {\r\n el.style.height = '';\r\n el.style.display = '';\r\n el.style.overflow = '';\r\n\r\n if (typeof callback === 'function') {\r\n callback();\r\n }\r\n });\r\n }\r\n },\r\n\r\n slideUp: function(el, speed, callback) {\r\n KTUtil.slide(el, 'up', speed, callback);\r\n },\r\n\r\n slideDown: function(el, speed, callback) {\r\n KTUtil.slide(el, 'down', speed, callback);\r\n },\r\n\r\n show: function(el, display) {\r\n if (typeof el !== 'undefined') {\r\n el.style.display = (display ? display : 'block');\r\n }\r\n },\r\n\r\n hide: function(el) {\r\n if (typeof el !== 'undefined') {\r\n el.style.display = 'none';\r\n }\r\n },\r\n\r\n addEvent: function(el, type, handler, one) {\r\n if (typeof el !== 'undefined' && el !== null) {\r\n el.addEventListener(type, handler);\r\n }\r\n },\r\n\r\n removeEvent: function(el, type, handler) {\r\n if (el !== null) {\r\n el.removeEventListener(type, handler);\r\n }\r\n },\r\n\r\n on: function(element, selector, event, handler) {\r\n if (!selector) {\r\n return;\r\n }\r\n\r\n var eventId = KTUtil.getUniqueID('event');\r\n\r\n window.KTUtilDelegatedEventHandlers[eventId] = function(e) {\r\n var targets = element.querySelectorAll(selector);\r\n var target = e.target;\r\n\r\n while (target && target !== element) {\r\n for (var i = 0, j = targets.length; i < j; i++) {\r\n if (target === targets[i]) {\r\n handler.call(target, e);\r\n }\r\n }\r\n\r\n target = target.parentNode;\r\n }\r\n }\r\n\r\n KTUtil.addEvent(element, event, window.KTUtilDelegatedEventHandlers[eventId]);\r\n\r\n return eventId;\r\n },\r\n\r\n off: function(element, event, eventId) {\r\n if (!element || !window.KTUtilDelegatedEventHandlers[eventId]) {\r\n return;\r\n }\r\n\r\n KTUtil.removeEvent(element, event, window.KTUtilDelegatedEventHandlers[eventId]);\r\n\r\n delete window.KTUtilDelegatedEventHandlers[eventId];\r\n },\r\n\r\n one: function onetime(el, type, callback) {\r\n el.addEventListener(type, function callee(e) {\r\n // remove event\r\n if (e.target && e.target.removeEventListener) {\r\n e.target.removeEventListener(e.type, callee);\r\n }\r\n\r\n // need to verify from https://themeforest.net/author_dashboard#comment_23615588\r\n if (el && el.removeEventListener) {\r\n\t\t\t\t e.currentTarget.removeEventListener(e.type, callee);\r\n\t\t\t }\r\n\r\n // call handler\r\n return callback(e);\r\n });\r\n },\r\n\r\n hash: function(str) {\r\n var hash = 0,\r\n i, chr;\r\n\r\n if (str.length === 0) return hash;\r\n for (i = 0; i < str.length; i++) {\r\n chr = str.charCodeAt(i);\r\n hash = ((hash << 5) - hash) + chr;\r\n hash |= 0; // Convert to 32bit integer\r\n }\r\n\r\n return hash;\r\n },\r\n\r\n animateClass: function(el, animationName, callback) {\r\n var animation;\r\n var animations = {\r\n animation: 'animationend',\r\n OAnimation: 'oAnimationEnd',\r\n MozAnimation: 'mozAnimationEnd',\r\n WebkitAnimation: 'webkitAnimationEnd',\r\n msAnimation: 'msAnimationEnd',\r\n };\r\n\r\n for (var t in animations) {\r\n if (el.style[t] !== undefined) {\r\n animation = animations[t];\r\n }\r\n }\r\n\r\n KTUtil.addClass(el, 'animated ' + animationName);\r\n\r\n KTUtil.one(el, animation, function() {\r\n KTUtil.removeClass(el, 'animated ' + animationName);\r\n });\r\n\r\n if (callback) {\r\n KTUtil.one(el, animation, callback);\r\n }\r\n },\r\n\r\n transitionEnd: function(el, callback) {\r\n var transition;\r\n var transitions = {\r\n transition: 'transitionend',\r\n OTransition: 'oTransitionEnd',\r\n MozTransition: 'mozTransitionEnd',\r\n WebkitTransition: 'webkitTransitionEnd',\r\n msTransition: 'msTransitionEnd'\r\n };\r\n\r\n for (var t in transitions) {\r\n if (el.style[t] !== undefined) {\r\n transition = transitions[t];\r\n }\r\n }\r\n\r\n KTUtil.one(el, transition, callback);\r\n },\r\n\r\n animationEnd: function(el, callback) {\r\n var animation;\r\n var animations = {\r\n animation: 'animationend',\r\n OAnimation: 'oAnimationEnd',\r\n MozAnimation: 'mozAnimationEnd',\r\n WebkitAnimation: 'webkitAnimationEnd',\r\n msAnimation: 'msAnimationEnd'\r\n };\r\n\r\n for (var t in animations) {\r\n if (el.style[t] !== undefined) {\r\n animation = animations[t];\r\n }\r\n }\r\n\r\n KTUtil.one(el, animation, callback);\r\n },\r\n\r\n animateDelay: function(el, value) {\r\n var vendors = ['webkit-', 'moz-', 'ms-', 'o-', ''];\r\n for (var i = 0; i < vendors.length; i++) {\r\n KTUtil.css(el, vendors[i] + 'animation-delay', value);\r\n }\r\n },\r\n\r\n animateDuration: function(el, value) {\r\n var vendors = ['webkit-', 'moz-', 'ms-', 'o-', ''];\r\n for (var i = 0; i < vendors.length; i++) {\r\n KTUtil.css(el, vendors[i] + 'animation-duration', value);\r\n }\r\n },\r\n\r\n scrollTo: function(target, offset, duration) {\r\n var duration = duration ? duration : 500;\r\n var targetPos = target ? KTUtil.offset(target).top : 0;\r\n var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;\r\n var from, to;\r\n\r\n if (offset) {\r\n scrollPos += offset;\r\n }\r\n\r\n from = scrollPos;\r\n to = targetPos;\r\n\r\n KTUtil.animate(from, to, duration, function(value) {\r\n document.documentElement.scrollTop = value;\r\n document.body.parentNode.scrollTop = value;\r\n document.body.scrollTop = value;\r\n }); //, easing, done\r\n },\r\n\r\n scrollTop: function(offset, duration) {\r\n KTUtil.scrollTo(null, offset, duration);\r\n },\r\n\r\n isArray: function(obj) {\r\n return obj && Array.isArray(obj);\r\n },\r\n\r\n ready: function(callback) {\r\n if (document.attachEvent ? document.readyState === \"complete\" : document.readyState !== \"loading\") {\r\n callback();\r\n } else {\r\n document.addEventListener('DOMContentLoaded', callback);\r\n }\r\n },\r\n\r\n isEmpty: function(obj) {\r\n for (var prop in obj) {\r\n if (obj.hasOwnProperty(prop)) {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n },\r\n\r\n numberString: function(nStr) {\r\n nStr += '';\r\n var x = nStr.split('.');\r\n var x1 = x[0];\r\n var x2 = x.length > 1 ? '.' + x[1] : '';\r\n var rgx = /(\\d+)(\\d{3})/;\r\n while (rgx.test(x1)) {\r\n x1 = x1.replace(rgx, '$1' + ',' + '$2');\r\n }\r\n return x1 + x2;\r\n },\r\n\r\n detectIE: function() {\r\n var ua = window.navigator.userAgent;\r\n\r\n // Test values; Uncomment to check result …\r\n\r\n // IE 10\r\n // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';\r\n\r\n // IE 11\r\n // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';\r\n\r\n // Edge 12 (Spartan)\r\n // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';\r\n\r\n // Edge 13\r\n // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';\r\n\r\n var msie = ua.indexOf('MSIE ');\r\n if (msie > 0) {\r\n // IE 10 or older => return version number\r\n return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);\r\n }\r\n\r\n var trident = ua.indexOf('Trident/');\r\n if (trident > 0) {\r\n // IE 11 => return version number\r\n var rv = ua.indexOf('rv:');\r\n return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);\r\n }\r\n\r\n var edge = ua.indexOf('Edge/');\r\n if (edge > 0) {\r\n // Edge (IE 12+) => return version number\r\n return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);\r\n }\r\n\r\n // other browser\r\n return false;\r\n },\r\n\r\n isRTL: function() {\r\n var html = KTUtil.getByTagName('html')[0];\r\n\r\n if (html) {\r\n return (KTUtil.attr(html, 'direction') == 'rtl');\r\n }\r\n },\r\n\r\n // Scroller\r\n scrollInit: function(element, options) {\r\n if (!element) {\r\n return;\r\n }\r\n\r\n // Learn more: https://github.com/mdbootstrap/perfect-scrollbar#options\r\n var pluginDefOptions = {\r\n wheelSpeed: 0.5,\r\n swipeEasing: true,\r\n wheelPropagation: false,\r\n minScrollbarLength: 40,\r\n maxScrollbarLength: 300,\r\n suppressScrollX: true\r\n };\r\n\r\n options = KTUtil.deepExtend({}, pluginDefOptions, options);\r\n\r\n // Define init function\r\n function init() {\r\n var ps;\r\n var height;\r\n\r\n // Get extra options via data attributes\r\n var attrs = element.getAttributeNames();\r\n if (attrs.length > 0) {\r\n attrs.forEach(function(attrName) {\r\n \t\t\t// more options; https://github.com/ganlanyuan/tiny-slider#options\r\n \t\t\tif ((/^data-.*/g).test(attrName)) {\r\n if (['scroll', 'height', 'mobile-height'].includes(optionName) == false) {\r\n var optionName = attrName.replace('data-', '').toLowerCase().replace(/(?:[\\s-])\\w/g, function(match) {\r\n \t\t\t\t\treturn match.replace('-', '').toUpperCase();\r\n \t\t\t\t});\r\n\r\n options[optionName] = KTUtil.filterBoolean(element.getAttribute(attrName));\r\n }\r\n \t\t\t}\r\n \t\t});\r\n }\r\n\r\n if (options.height instanceof Function) {\r\n height = options.height.call();\r\n } else {\r\n height = options.height;\r\n }\r\n\r\n if (height === false) {\r\n KTUtil.scrollDestroy(element, true);\r\n\r\n return;\r\n }\r\n\r\n height = parseInt(height);\r\n\r\n // Destroy scroll on table and mobile modes\r\n if ((options.mobileNativeScroll || options.disableForMobile) && KTUtil.isBreakpointDown('lg')) {\r\n ps = KTUtil.data(element).get('ps');\r\n if (ps) {\r\n if (options.resetHeightOnDestroy) {\r\n KTUtil.css(element, 'height', 'auto');\r\n } else {\r\n KTUtil.css(element, 'overflow', 'auto');\r\n if (height > 0) {\r\n KTUtil.css(element, 'height', height + 'px');\r\n }\r\n }\r\n\r\n ps.destroy();\r\n ps = KTUtil.data(element).remove('ps');\r\n } else if (height > 0){\r\n KTUtil.css(element, 'overflow', 'auto');\r\n KTUtil.css(element, 'height', height + 'px');\r\n }\r\n\r\n return;\r\n }\r\n\r\n if (height > 0) {\r\n KTUtil.css(element, 'height', height + 'px');\r\n }\r\n\r\n if (options.desktopNativeScroll) {\r\n KTUtil.css(element, 'overflow', 'auto');\r\n return;\r\n }\r\n\r\n // Pass options via HTML Attributes\r\n if (KTUtil.attr(element, 'data-window-scroll') == 'true') {\r\n options.windowScroll = true;\r\n }\r\n\r\n // Init scroll\r\n ps = KTUtil.data(element).get('ps');\r\n\r\n if (ps) {\r\n ps.update();\r\n } else {\r\n KTUtil.css(element, 'overflow', 'hidden');\r\n KTUtil.addClass(element, 'scroll');\r\n\r\n ps = new PerfectScrollbar(element, options);\r\n\r\n KTUtil.data(element).set('ps', ps);\r\n }\r\n\r\n // Remember scroll position in cookie\r\n var uid = KTUtil.attr(element, 'id');\r\n try {\r\n if (uid) {\r\n var cookie = KTCookie.getCookie(uid);\r\n if (options.rememberPosition === true && cookie) {\r\n var pos = parseInt(cookie);\r\n if (pos > 0) {\r\n element.scrollTop = pos;\r\n }\r\n element.addEventListener('ps-scroll-y', function() {\r\n KTCookie.setCookie(uid, element.scrollTop, {});\r\n });\r\n }\r\n }\r\n }\r\n catch (e) {\r\n console.error(e);\r\n }\r\n // Consider using Localstorage\r\n //if (options.rememberPosition === true && Cookies && uid) {\r\n // if (KTCookie.getCookie(uid)) {\r\n // var pos = parseInt(KTCookie.getCookie(uid));\r\n //\r\n // if (pos > 0) {\r\n // element.scrollTop = pos;\r\n // }\r\n // }\r\n //\r\n // element.addEventListener('ps-scroll-y', function() {\r\n // KTCookie.setCookie(uid, element.scrollTop);\r\n // });\r\n //}\r\n }\r\n\r\n // Init\r\n init();\r\n\r\n // Handle window resize\r\n if (options.handleWindowResize) {\r\n KTUtil.addResizeHandler(function() {\r\n init();\r\n });\r\n }\r\n },\r\n\r\n scrollUpdate: function(element) {\r\n var ps = KTUtil.data(element).get('ps');\r\n if (ps) {\r\n ps.update();\r\n }\r\n },\r\n\r\n scrollUpdateAll: function(parent) {\r\n var scrollers = KTUtil.findAll(parent, '.ps');\r\n for (var i = 0, len = scrollers.length; i < len; i++) {\r\n KTUtil.scrollUpdate(scrollers[i]);\r\n }\r\n },\r\n\r\n scrollDestroy: function(element, resetAll) {\r\n var ps = KTUtil.data(element).get('ps');\r\n\r\n if (ps) {\r\n ps.destroy();\r\n ps = KTUtil.data(element).remove('ps');\r\n }\r\n\r\n if (element && resetAll) {\r\n element.style.setProperty('overflow', '');\r\n element.style.setProperty('height', '');\r\n }\r\n },\r\n\r\n filterBoolean: function(val) {\r\n // Convert string boolean\r\n\t\t\tif (val === true || val === 'true') {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\r\n\t\t\tif (val === false || val === 'false') {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n return val;\r\n },\r\n\r\n setHTML: function(el, html) {\r\n el.innerHTML = html;\r\n },\r\n\r\n getHTML: function(el) {\r\n if (el) {\r\n return el.innerHTML;\r\n }\r\n },\r\n\r\n getDocumentHeight: function() {\r\n var body = document.body;\r\n var html = document.documentElement;\r\n\r\n return Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );\r\n },\r\n\r\n getScrollTop: function() {\r\n return (document.scrollingElement || document.documentElement).scrollTop;\r\n },\r\n\r\n colorDarken: function(color, amount) {\r\n var subtractLight = function(color, amount){\r\n var cc = parseInt(color,16) - amount;\r\n var c = (cc < 0) ? 0 : (cc);\r\n c = (c.toString(16).length > 1 ) ? c.toString(16) : `0${c.toString(16)}`;\r\n\r\n return c;\r\n }\r\n\r\n color = (color.indexOf(\"#\")>=0) ? color.substring(1,color.length) : color;\r\n amount = parseInt((255*amount)/100);\r\n\r\n return color = `#${subtractLight(color.substring(0,2), amount)}${subtractLight(color.substring(2,4), amount)}${subtractLight(color.substring(4,6), amount)}`;\r\n },\r\n\r\n colorLighten: function(color, amount) {\r\n var addLight = function(color, amount){\r\n var cc = parseInt(color,16) + amount;\r\n var c = (cc > 255) ? 255 : (cc);\r\n c = (c.toString(16).length > 1 ) ? c.toString(16) : `0${c.toString(16)}`;\r\n\r\n return c;\r\n }\r\n\r\n color = (color.indexOf(\"#\")>=0) ? color.substring(1,color.length) : color;\r\n amount = parseInt((255*amount)/100);\r\n\r\n return color = `#${addLight(color.substring(0,2), amount)}${addLight(color.substring(2,4), amount)}${addLight(color.substring(4,6), amount)}`;\r\n },\r\n\r\n // Throttle function: Input as function which needs to be throttled and delay is the time interval in milliseconds\r\n throttle: function (timer, func, delay) {\r\n \t// If setTimeout is already scheduled, no need to do anything\r\n \tif (timer) {\r\n \t\treturn;\r\n \t}\r\n\r\n \t// Schedule a setTimeout after delay seconds\r\n \ttimer = setTimeout(function () {\r\n \t\tfunc();\r\n\r\n \t\t// Once setTimeout function execution is finished, timerId = undefined so that in
\r\n \t\t// the next scroll event function execution can be scheduled by the setTimeout\r\n \t\ttimer = undefined;\r\n \t}, delay);\r\n },\r\n\r\n // Debounce function: Input as function which needs to be debounced and delay is the debounced time in milliseconds\r\n debounce: function (timer, func, delay) {\r\n \t// Cancels the setTimeout method execution\r\n \tclearTimeout(timer)\r\n\r\n \t// Executes the func after delay time.\r\n \ttimer = setTimeout(func, delay);\r\n },\r\n\r\n btnWait: function(el, cls, message, disable = true) {\r\n if (!el) {\r\n return;\r\n }\r\n\r\n if (disable) {\r\n KTUtil.attr(el, \"disabled\", true);\r\n }\r\n\r\n if (cls) {\r\n KTUtil.addClass(el, cls);\r\n KTUtil.attr(el, \"wait-class\", cls);\r\n }\r\n\r\n if (message) {\r\n var caption = KTUtil.find(el, '.btn-caption');\r\n\r\n if (caption) {\r\n KTUtil.data(caption).set('caption', KTUtil.getHTML(caption));\r\n KTUtil.setHTML(caption, message);\r\n } else {\r\n KTUtil.data(el).set('caption', KTUtil.getHTML(el));\r\n KTUtil.setHTML(el, message);\r\n }\r\n }\r\n },\r\n\r\n btnRelease: function(el) {\r\n if (!el) {\r\n return;\r\n }\r\n\r\n /// Show loading state on button\r\n KTUtil.removeAttr(el, \"disabled\");\r\n\r\n if (KTUtil.hasAttr(el, \"wait-class\")) {\r\n KTUtil.removeClass(el, KTUtil.attr(el, \"wait-class\"));\r\n }\r\n\r\n var caption = KTUtil.find(el, '.btn-caption');\r\n\r\n if (caption && KTUtil.data(caption).has('caption')) {\r\n KTUtil.setHTML(caption, KTUtil.data(caption).get('caption'));\r\n } else if (KTUtil.data(el).has('caption')) {\r\n KTUtil.setHTML(el, KTUtil.data(el).get('caption'));\r\n }\r\n },\r\n\r\n isOffscreen: function(el, direction, offset = 0) {\r\n var windowWidth = KTUtil.getViewPort().width;\r\n var windowHeight = KTUtil.getViewPort().height;\r\n\r\n var top = KTUtil.offset(el).top;\r\n var height = KTUtil.outerHeight(el) + offset;\r\n var left = KTUtil.offset(el).left;\r\n var width = KTUtil.outerWidth(el) + offset;\r\n\r\n if (direction == 'bottom') {\r\n if (windowHeight < top + height) {\r\n return true;\r\n } else if (windowHeight > top + height * 1.5) {\r\n return true;\r\n }\r\n }\r\n\r\n if (direction == 'top') {\r\n if (top < 0) {\r\n return true;\r\n } else if (top > height) {\r\n return true;\r\n }\r\n }\r\n\r\n if (direction == 'left') {\r\n if (left < 0) {\r\n return true;\r\n } else if (left * 2 > width) {\r\n //console.log('left 2');\r\n //return true;\r\n }\r\n }\r\n\r\n if (direction == 'right') {\r\n if (windowWidth < left + width) {\r\n return true;\r\n } else {\r\n //console.log('right 2');\r\n //return true;\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n }\r\n}();\r\n\r\n// webpack support\r\nif (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {\r\n // module.exports = KTUtil;\r\n}\r\n\r\n// Initialize KTUtil class on document ready\r\nKTUtil.ready(function() {\r\n\tif (typeof KTAppSettings !== 'undefined') {\r\n\t\tKTUtil.init(KTAppSettings);\r\n\t} else {\r\n\t\tKTUtil.init();\r\n\t}\r\n});\r\n\r\n// CSS3 Transitions only after page load(.page-loading class added to body tag and remove with JS on page load)\r\nwindow.onload = function() {\r\n var result = KTUtil.getByTagName('body');\r\n if (result && result[0]) {\r\n KTUtil.removeClass(result[0], 'page-loading');\r\n }\r\n}\r\n","import {toAbsoluteUrl} from \"../../_helpers\";\r\nexport function getInitLayoutConfig() {\r\n return {\r\n demo: \"demo1\",\r\n js: {\r\n breakpoints : {\r\n sm: \"576\",\r\n md: \"768\",\r\n lg: \"992\",\r\n xl: \"1200\",\r\n xxl: \"1200\"\r\n },\r\n colors: {\r\n theme: {\r\n base: {\r\n \"white\": \"#ffffff\",\r\n \"primary\": \"#6993FF\",\r\n \"secondary\": \"#E5EAEE\",\r\n \"success\": \"#1BC5BD\",\r\n \"info\": \"#8950FC\",\r\n \"warning\": \"#FFA800\",\r\n \"danger\": \"#F64E60\",\r\n \"light\": \"#F3F6F9\",\r\n \"dark\": \"#212121\"\r\n },\r\n light: {\r\n \"white\": \"#ffffff\",\r\n \"primary\": \"#E1E9FF\",\r\n \"secondary\": \"#ECF0F3\",\r\n \"success\": \"#C9F7F5\",\r\n \"info\": \"#EEE5FF\",\r\n \"warning\": \"#FFF4DE\",\r\n \"danger\": \"#FFE2E5\",\r\n \"light\": \"#F3F6F9\",\r\n \"dark\": \"#D6D6E0\"\r\n },\r\n inverse: {\r\n \"white\": \"#ffffff\",\r\n \"primary\": \"#ffffff\",\r\n \"secondary\": \"#212121\",\r\n \"success\": \"#ffffff\",\r\n \"info\": \"#ffffff\",\r\n \"warning\": \"#ffffff\",\r\n \"danger\": \"#ffffff\",\r\n \"light\": \"#464E5F\",\r\n \"dark\": \"#ffffff\"\r\n }\r\n },\r\n gray: {\r\n \"gray100\": \"#F3F6F9\",\r\n \"gray200\": \"#ECF0F3\",\r\n \"gray300\": \"#E5EAEE\",\r\n \"gray400\": \"#D6D6E0\",\r\n \"gray500\": \"#B5B5C3\",\r\n \"gray600\": \"#80808F\",\r\n \"gray700\": \"#464E5F\",\r\n \"gray800\": \"#1B283F\",\r\n \"gray900\": \"#212121\"\r\n }\r\n },\r\n fontFamily: \"Poppins\"\r\n },\r\n // == Page Splash Screen loading\r\n loader: {\r\n enabled: true,\r\n type: \"\", // default|spinner-message|spinner-logo\r\n logo: toAbsoluteUrl(\"/media/logos/logo-dark-sm.png\"),\r\n message: \"Please wait...\"\r\n },\r\n // page toolbar\r\n toolbar: {\r\n display: true\r\n },\r\n header: {\r\n self: {\r\n width: \"fluid\", // fixed|fluid\r\n theme: \"light\", // light|dark\r\n fixed: {\r\n desktop: true,\r\n mobile: true\r\n }\r\n },\r\n menu: {\r\n self: {\r\n display: true,\r\n layout: \"default\", // tab/default\r\n \"root-arrow\": false,\r\n \"icon-style\": \"duotone\" // duotone, line, bold, solid\r\n },\r\n desktop: {\r\n arrow: true,\r\n toggle: \"click\",\r\n submenu: {\r\n theme: \"light\", // light|dark\r\n arrow: true\r\n }\r\n },\r\n mobile: {\r\n submenu: {\r\n theme: \"dark\",\r\n accordion: true\r\n }\r\n }\r\n }\r\n },\r\n subheader: {\r\n display: true,\r\n displayDesc: false,\r\n displayDaterangepicker: true,\r\n layout: \"subheader-v1\",\r\n fixed: true,\r\n width: \"fluid\", // fixed/fluid,\r\n clear: false,\r\n style: \"solid\" // solid/transparent\r\n },\r\n content: {\r\n width: \"fixed\" // fluid|fixed\r\n },\r\n brand: {\r\n self: {\r\n theme: \"dark\" // light/dark\r\n }\r\n },\r\n aside: {\r\n self: {\r\n theme: \"dark\", // light/dark\r\n display: true,\r\n fixed: true,\r\n minimize: {\r\n toggle: true, // allow toggle\r\n default: false, // default state\r\n hoverable: true // allow hover\r\n }\r\n },\r\n footer: {\r\n self: {\r\n display: true\r\n }\r\n },\r\n menu: {\r\n dropdown: false, // ok\r\n scroll: true, // ok\r\n \"icon-style\": \"duotone\", // duotone, line, bold, solid\r\n submenu: {\r\n accordion: true,\r\n dropdown: {\r\n arrow: true,\r\n \"hover-timeout\": 500 // in milliseconds\r\n }\r\n }\r\n }\r\n },\r\n footer: {\r\n self: {\r\n fixed: true,\r\n width: \"fluid\"\r\n }\r\n },\r\n extras: {\r\n search: {\r\n display: true,\r\n layout: \"dropdown\", // offcanvas, dropdown\r\n offcanvas: {\r\n direction: \"right\"\r\n }\r\n },\r\n notifications: {\r\n display: true,\r\n layout: \"dropdown\", // offcanvas, dropdown\r\n dropdown: {\r\n style: \"dark\" // light, dark\r\n },\r\n offcanvas: {\r\n directions: \"right\"\r\n }\r\n },\r\n \"quick-actions\": {\r\n display: true,\r\n layout: \"dropdown\", // offcanvas, dropdown,\r\n dropdown: {\r\n style: \"dark\", // light, dark\r\n },\r\n offcanvas: {\r\n directions: \"right\"\r\n }\r\n },\r\n user: {\r\n display: true,\r\n layout: \"offcanvas\", // offcanvas, dropdown\r\n dropdown: {\r\n style: \"dark\"\r\n },\r\n offcanvas: {\r\n directions: \"right\"\r\n }\r\n },\r\n languages: {\r\n display: true\r\n },\r\n cart: {\r\n display: false,\r\n dropdown: {\r\n style: \"dark\", // ligth, dark\r\n }\r\n },\r\n \"quick-panel\": {\r\n display: true,\r\n offcanvas: {\r\n directions: \"right\"\r\n }\r\n },\r\n chat: {\r\n display: true\r\n },\r\n toolbar: {\r\n display: true\r\n },\r\n scrolltop: {\r\n display: true\r\n }\r\n }\r\n };\r\n}\r\n","import objectPath from \"object-path\";\r\nimport {toAbsoluteUrl} from \"../../_helpers\";\r\n\r\nexport class HtmlClassService {\r\n // Public properties\r\n config;\r\n classes;\r\n attributes;\r\n\r\n /**\r\n * Build html element classes from layout config\r\n * @param layoutConfig\r\n */\r\n setConfig(layoutConfig) {\r\n this.config = this.preInit(layoutConfig);\r\n\r\n // scope list of classes\r\n this.classes = {\r\n header: [],\r\n header_container: [],\r\n header_mobile: [],\r\n header_menu: [],\r\n aside: [],\r\n aside_menu: [],\r\n subheader: [],\r\n subheader_container: [],\r\n content: [],\r\n content_container: [],\r\n footer_container: []\r\n };\r\n\r\n this.attributes = {\r\n aside_menu: {},\r\n header_mobile: {},\r\n header_menu: {}\r\n };\r\n\r\n // init base layout\r\n this.initLayout();\r\n this.initLoader();\r\n\r\n // init header and subheader menu\r\n this.initHeader();\r\n this.initSubheader();\r\n\r\n this.initContent();\r\n // init aside and aside menu\r\n this.initAside();\r\n\r\n // init footer\r\n this.initFooter();\r\n\r\n // init theme\r\n this.initTheme();\r\n }\r\n\r\n preInit(layoutConfig) {\r\n const updatedConfig = Object.assign({}, layoutConfig);\r\n const headerSelfFixedDesktop = objectPath.get(updatedConfig, \"header.self.fixed.desktop\");\r\n const subheaderFixed = objectPath.get(updatedConfig, \"subheader.fixed\");\r\n if (subheaderFixed && headerSelfFixedDesktop) {\r\n // Page::setOption('layout', 'subheader/style', 'solid');\r\n updatedConfig.subheader.style = \"solid\"; \r\n } else {\r\n // Page::setOption('layout', 'subheader/fixed', false);\r\n updatedConfig.subheader.fixed = false;\r\n }\r\n return updatedConfig;\r\n }\r\n\r\n /**\r\n * Returns Classes\r\n *\r\n * @param path: string\r\n * @param toString boolean\r\n */\r\n getClasses(path, toString) {\r\n if (path) {\r\n const classes = objectPath.get(this.classes, path) || \"\";\r\n if (toString && Array.isArray(classes)) {\r\n return classes.join(\" \");\r\n }\r\n return classes.toString();\r\n }\r\n return this.classes;\r\n }\r\n\r\n getAttributes(path) {\r\n if (path) {\r\n const attributes = objectPath.get(this.attributes, path) || [];\r\n return attributes;\r\n }\r\n return [];\r\n }\r\n\r\n getLogo() {\r\n const brandSkin = objectPath.get(this.config, \"brand.self.theme\");\r\n if (brandSkin === \"light\") {\r\n return toAbsoluteUrl(\"/media/logos/logo_pnp_mini.png\");\r\n } else {\r\n return toAbsoluteUrl(\"/media/logos/logo_pnp_mini.png\");\r\n }\r\n }\r\n\r\n getStickyLogo() {\r\n let logo = objectPath.get(this.config, \"self.logo.sticky\");\r\n if (typeof logo === \"undefined\") {\r\n logo = this.getLogo();\r\n }\r\n return logo + \"\";\r\n }\r\n\r\n /**\r\n * Init Layout\r\n */\r\n initLayout() {\r\n const selfBodyBackgroundImage = objectPath.get(this.config, \"self.body.background-image\");\r\n if (selfBodyBackgroundImage) {\r\n document.body.style.backgroundImage = `url(\"${selfBodyBackgroundImage}'\")`;\r\n }\r\n\r\n const _selfBodyClass = objectPath.get(this.config, \"self.body.class\");\r\n if (_selfBodyClass) {\r\n const bodyClasses = _selfBodyClass.toString().split(\" \");\r\n bodyClasses.forEach(cssClass => document.body.classList.add(cssClass));\r\n }\r\n\r\n // Offcanvas directions\r\n document.body.classList.add(\"quick-panel-right\");\r\n document.body.classList.add(\"demo-panel-right\");\r\n document.body.classList.add(\"offcanvas-right\");\r\n }\r\n\r\n /**\r\n * Init Loader\r\n */\r\n initLoader() {}\r\n\r\n /**\r\n * Init Header\r\n */\r\n initHeader() {\r\n // Fixed header\r\n const headerSelfFixedDesktop = objectPath.get(this.config, \"header.self.fixed.desktop\");\r\n if (headerSelfFixedDesktop) {\r\n document.body.classList.add(\"header-fixed\");\r\n objectPath.push(this.classes, \"header\", \"header-fixed\");\r\n } else {\r\n document.body.classList.add(\"header-static\");\r\n }\r\n\r\n const headerSelfFixedMobile = objectPath.get(this.config, \"header.self.fixed.mobile\");\r\n if (headerSelfFixedMobile) {\r\n document.body.classList.add(\"header-mobile-fixed\");\r\n objectPath.push(this.classes, \"header_mobile\", \"header-mobile-fixed\");\r\n }\r\n\r\n // Menu\r\n const headerMenuSelfDisplay = objectPath.get(this.config, \"header.menu.self.display\");\r\n if (headerMenuSelfDisplay) {\r\n const headerMenuSelfLayout = objectPath.get(this.config, \"header.menu.self.layout\");\r\n const headerMenuLayoutCssClass = `header-menu-layout-${headerMenuSelfLayout}`;\r\n objectPath.push(this.classes, \"header_menu\", headerMenuLayoutCssClass);\r\n\r\n if (objectPath.get(this.config, \"header.menu.self.root-arrow\")) {\r\n objectPath.push(this.classes, \"header_menu\", \"header-menu-root-arrow\");\r\n }\r\n }\r\n\r\n const headerSelfWidth = objectPath.get(this.config, \"header.self.width\");\r\n if (headerSelfWidth === \"fluid\") {\r\n objectPath.push(this.classes, \"header_container\", \"container-fluid\");\r\n } else {\r\n objectPath.push(this.classes, \"header_container\", \"container\");\r\n }\r\n }\r\n\r\n /**\r\n * Init Subheader\r\n */\r\n initSubheader() {\r\n const subheaderDisplay = objectPath.get(this.config, \"subheader.display\");\r\n if (subheaderDisplay) {\r\n document.body.classList.add(\"subheader-enabled\");\r\n } else {\r\n return;\r\n }\r\n\r\n // Fixed content head\r\n const subheaderFixed = objectPath.get(this.config, \"subheader.fixed\");\r\n const headerSelfFixedDesktop = objectPath.get(this.config, \"header.self.fixed.desktop\");\r\n if (subheaderFixed && headerSelfFixedDesktop) {\r\n document.body.classList.add(\"subheader-fixed\");\r\n // Page::setOption('layout', 'subheader/style', 'solid'); => See preInit()\r\n } else {\r\n // Page::setOption('layout', 'subheader/fixed', false); => See preInit()\r\n }\r\n\r\n const subheaderStyle = objectPath.get(this.config, \"subheader.style\");\r\n if (subheaderStyle) {\r\n const subheaderClass = `subheader-${subheaderStyle}`;\r\n objectPath.push(this.classes, \"subheader\", subheaderClass);\r\n }\r\n\r\n const subheaderWidth = objectPath.get(this.config, \"subheader.width\");\r\n if (subheaderWidth === \"fluid\") {\r\n objectPath.push(this.classes, \"subheader_container\", \"container-fluid\");\r\n } else {\r\n objectPath.push(this.classes, \"subheader_container\", \"container\");\r\n }\r\n\r\n if (objectPath.get(this.config, \"subheader.clear\")) {\r\n objectPath.push(this.classes, \"subheader\", \"mb-0\");\r\n }\r\n }\r\n\r\n /**\r\n * Init Content\r\n */\r\n initContent() {\r\n if (objectPath.get(this.config, \"content.fit-top\")) {\r\n objectPath.push(this.classes, \"content\", \"pt-0\");\r\n }\r\n\r\n if (objectPath.get(this.config, \"content.fit-bottom\")) {\r\n objectPath.push(this.classes, \"content\", \"pb-0\");\r\n }\r\n\r\n if (objectPath.get(this.config, \"content.width\") === \"fluid\") {\r\n objectPath.push(this.classes, \"content_container\", \"container-fluid\");\r\n } else {\r\n objectPath.push(this.classes, \"content_container\", \"container\");\r\n }\r\n }\r\n\r\n /**\r\n * Init Aside\r\n */\r\n initAside() {\r\n // Check Aside\r\n const asideSelfDisplay = objectPath.get(this.config, \"aside.self.display\");\r\n if (!asideSelfDisplay) {\r\n return;\r\n }\r\n\r\n // Enable Aside\r\n document.body.classList.add(\"aside-enabled\");\r\n\r\n // Fixed Aside\r\n const asideSelfFixed = objectPath.get(this.config, \"aside.self.fixed\");\r\n if (asideSelfFixed) {\r\n document.body.classList.add(\"aside-fixed\");\r\n objectPath.push(this.classes, \"aside\", \"aside-fixed\");\r\n } else {\r\n document.body.classList.add(\"aside-static\");\r\n }\r\n\r\n // Check Aside\r\n if (!asideSelfDisplay) {\r\n return;\r\n }\r\n\r\n // Default fixed\r\n if (objectPath.get(this.config, \"aside.self.minimize.default\")) {\r\n document.body.classList.add(\"aside-minimize\");\r\n }\r\n\r\n if (objectPath.get(this.config, \"aside.self.minimize.hoverable\")) {\r\n document.body.classList.add(\"aside-minimize-hoverable\");\r\n }\r\n\r\n // Menu\r\n // Dropdown Submenu\r\n const asideMenuDropdown = objectPath.get(this.config, \"aside.menu.dropdown\");\r\n if (asideMenuDropdown) {\r\n objectPath.push(this.classes, \"aside_menu\", \"aside-menu-dropdown\");\r\n this.attributes.aside_menu[\"data-menu-dropdown\"] = \"1\";\r\n }\r\n\r\n // Scrollable Menu\r\n this.attributes.aside_menu[\"data-menu-scroll\"] = asideMenuDropdown ? \"0\" : \"1\";\r\n\r\n const asideSubmenuDHoverTimeout = objectPath.get(\r\n this.config,\r\n \"aside.menu.submenu.dropdown.hover-timeout\"\r\n );\r\n if (asideSubmenuDHoverTimeout) {\r\n this.attributes.aside_menu[\r\n \"data-menu-dropdown-timeout\"\r\n ] = asideSubmenuDHoverTimeout;\r\n }\r\n }\r\n\r\n /**\r\n * Init Footer\r\n */\r\n initFooter() {\r\n // Fixed header\r\n if (objectPath.get(this.config, \"footer.fixed\")) {\r\n document.body.classList.add(\"footer-fixed\");\r\n }\r\n\r\n if (objectPath.get(this.config, \"footer.self.width\") === \"fluid\") {\r\n objectPath.push(this.classes, \"footer_container\", \"container-fluid\");\r\n } else {\r\n objectPath.push(this.classes, \"footer_container\", \"container\");\r\n }\r\n }\r\n\r\n /** Init Theme */\r\n initTheme() {\r\n const asideSelfDisplay = objectPath.get(this.config, \"aside.self.display\");\r\n if (!asideSelfDisplay) {\r\n const headerSelfTheme = objectPath.get(this.config, \"header.self.theme\");\r\n document.body.classList.add(`brand-${headerSelfTheme}`);\r\n } else {\r\n const brandSelfTheme = objectPath.get(this.config, \"brand.self.theme\");\r\n document.body.classList.add(`brand-${brandSelfTheme}`);\r\n }\r\n }\r\n}\r\n","import React, { createContext, useContext, useMemo } from \"react\";\r\nimport { getInitLayoutConfig } from \"./LayoutConfig\";\r\nimport { HtmlClassService } from \"./HTMLClassService\";\r\n\r\nconst LAYOUT_CONFIG_KEY =\r\n process.env.REACT_APP_LAYOUT_CONFIG_KEY || \"LayoutConfig\";\r\n\r\nfunction getConfig() {\r\n const ls = localStorage.getItem(LAYOUT_CONFIG_KEY);\r\n if (ls) {\r\n try {\r\n return JSON.parse(ls);\r\n } catch (er) {\r\n console.error(er);\r\n }\r\n }\r\n return getInitLayoutConfig();\r\n}\r\n\r\n// Side effect\r\nexport function setLayoutConfig(config) {\r\n localStorage.setItem(LAYOUT_CONFIG_KEY, JSON.stringify(config));\r\n window.location.reload();\r\n}\r\n\r\nconst HtmlClassServiceContext = createContext();\r\n\r\n/**\r\n *\r\n *\r\n * @export\r\n * @returns Layout context from 'localStorage'\r\n */\r\nexport function useHtmlClassService() {\r\n return useContext(HtmlClassServiceContext);\r\n}\r\n\r\nexport function withHtmlClassService(Component) {\r\n class WithHtmlClassService extends React.Component {\r\n static displayName = `WithHtmlClassService(${Component.displayName ||\r\n Component.name})`;\r\n\r\n static contextType = HtmlClassServiceContext;\r\n\r\n render() {\r\n return
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n {!layoutProps.offcanvas && (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n - \r\n {languages.map((language) => (\r\n
\r\n
\r\n )}\r\n \r\n );\r\n}\r\n","import React, { useMemo } from \"react\";\r\nimport objectPath from \"object-path\";\r\nimport SVG from \"react-inlinesvg\";\r\nimport { OverlayTrigger, Tooltip } from \"react-bootstrap\";\r\nimport { toAbsoluteUrl } from \"../../../_helpers\";\r\nimport { useHtmlClassService } from \"../../_core/MetronicLayout\";\r\nimport { SearchDropdown } from \"../extras/dropdowns/search/SearchDropdown\";\r\nimport { UserNotificationsDropdown } from \"../extras/dropdowns/UserNotificationsDropdown\";\r\nimport { QuickActionsDropdown } from \"../extras/dropdowns/QuickActionsDropdown\";\r\nimport { MyCartDropdown } from \"../extras/dropdowns/MyCartDropdown\";\r\nimport { LanguageSelectorDropdown } from \"../extras/dropdowns/LanguageSelectorDropdown\";\r\nimport { QuickUserToggler } from \"../extras/QuiclUserToggler\";\r\n\r\nexport function Topbar() {\r\n const uiService = useHtmlClassService();\r\n\r\n const layoutProps = useMemo(() => {\r\n return {\r\n viewSearchDisplay: objectPath.get(\r\n uiService.config,\r\n \"extras.search.display\"\r\n ),\r\n viewNotificationsDisplay: objectPath.get(\r\n uiService.config,\r\n \"extras.notifications.display\"\r\n ),\r\n viewQuickActionsDisplay: objectPath.get(\r\n uiService.config,\r\n \"extras.quick-actions.display\"\r\n ),\r\n viewCartDisplay: objectPath.get(uiService.config, \"extras.cart.display\"),\r\n viewQuickPanelDisplay: objectPath.get(\r\n uiService.config,\r\n \"extras.quick-panel.display\"\r\n ),\r\n viewLanguagesDisplay: objectPath.get(\r\n uiService.config,\r\n \"extras.languages.display\"\r\n ),\r\n viewUserDisplay: objectPath.get(uiService.config, \"extras.user.display\"),\r\n };\r\n }, [uiService]);\r\n\r\n return (\r\n \r\n <>\r\n\r\n Hi,\r\n \r\n {user.firstName}\r\n \r\n \r\n {(user.encodedImage) ? (\r\n
\r\n \r\n
\r\n ) : ({(user.firstName ? user.firstName[0] : \"\") + (user.lastName ? user.lastName[0] : \"\") })}\r\n \r\n \r\n \r\n {/*layoutProps.viewSearchDisplay && Quick panel}\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n \r\n )*/}\r\n {process.env.REACT_APP_ENVIRONMENT.startsWith('DEV') && \r\n 👨🏼💻 Development\r\n
}\r\n {layoutProps.viewLanguagesDisplay && - \r\n {/*begin::1 Level*/}\r\n
- \r\n
\r\n {intl.formatMessage({ id: \"MENU.DASHBOARD\" })}\r\n {layoutProps.rootArrowEnabled && ()}\r\n \r\n \r\n {/*end::1 Level*/}\r\n {/*begin::1 Level*/}\r\n {//isVerified &&\r\n isOperator && // temporarily\r\n - \r\n
\r\n {intl.formatMessage({ id: \"MENU.QUOTE\" })}\r\n {layoutProps.rootArrowEnabled && ()}\r\n \r\n \r\n }\r\n {/*end::1 Level*/}\r\n {/*begin::1 Level*/}\r\n {//isVerified &&\r\n isOperator && // temporarily \r\n - \r\n
\r\n {intl.formatMessage({ id: \"MENU.FBA_CONSOLIDATION\" })}\r\n {layoutProps.rootArrowEnabled && ()}\r\n \r\n \r\n }\r\n {/*end::1 Level*/}\r\n {/*begin::1 Level*/}\r\n {\r\n - \r\n
\r\n {intl.formatMessage({ id: \"MENU.SHIPMENT\" })}\r\n {layoutProps.rootArrowEnabled && ()}\r\n \r\n \r\n }\r\n {/*end::1 Level*/}\r\n {/*begin::1 Level*/}\r\n {isVerified &&\r\n - \r\n
\r\n {intl.formatMessage({ id: \"MENU.BILLING\" })}\r\n {layoutProps.rootArrowEnabled && ()}\r\n \r\n \r\n }\r\n {/*end::1 Level*/}\r\n\r\n {/*begin::1 Level*/}\r\n {isOperator &&\r\n - \r\n
\r\n {intl.formatMessage({ id: \"MENU.USER\" })}\r\n {layoutProps.rootArrowEnabled && ()}\r\n \r\n }\r\n {/*end::1 Level*/}\r\n
\r\n {intl.formatMessage({ id: \"AUTH.NEED_VERIFICATION_MSG\" })}\r\n
\r\n }\r\n {/*end::Header Nav*/}\r\n ;\r\n}\r\n","import React, {useMemo} from \"react\";\r\nimport objectPath from \"object-path\";\r\nimport {Link} from \"react-router-dom\";\r\nimport {toAbsoluteUrl} from \"../../../../_helpers\";\r\nimport {useHtmlClassService} from \"../../../_core/MetronicLayout\";\r\nimport {HeaderMenu} from \"./HeaderMenu\";\r\n\r\nexport function HeaderMenuWrapper() {\r\n const uiService = useHtmlClassService();\r\n const layoutProps = useMemo(() => {\r\n return {\r\n config: uiService.config,\r\n ktMenuClasses: uiService.getClasses(\"header_menu\", true),\r\n rootArrowEnabled: objectPath.get(\r\n uiService.config,\r\n \"header.menu.self.root-arrow\"\r\n ),\r\n menuDesktopToggle: objectPath.get(uiService.config, \"header.menu.desktop.toggle\"),\r\n headerMenuAttributes: uiService.getAttributes(\"header_menu\"),\r\n headerSelfTheme: objectPath.get(uiService.config, \"header.self.theme\"),\r\n ulClasses: uiService.getClasses(\"header_menu_nav\", true),\r\n disabledAsideSelfDisplay:\r\n objectPath.get(uiService.config, \"aside.self.display\") === false\r\n };\r\n }, [uiService]);\r\n const getHeaderLogo = () => {\r\n let result = \"logo_pnp_mini.png\";\r\n if (layoutProps.headerSelfTheme && layoutProps.headerSelfTheme !== \"dark\") {\r\n result = \"logo_pnp_mini.png\";\r\n }\r\n return toAbsoluteUrl(`/media/logos/${result}`);\r\n };\r\n\r\n return <>\r\n {/*begin::Header Menu Wrapper*/}\r\n \r\n {layoutProps.disabledAsideSelfDisplay && (\r\n <>\r\n {/*begin::Header Logo*/}\r\n
\r\n {/*Header Menu Wrapper*/}\r\n \r\n}\r\n","import React, {useMemo} from \"react\";\r\nimport objectPath from \"object-path\";\r\nimport {useHtmlClassService} from \"../../_core/MetronicLayout\";\r\nimport {Topbar} from \"./Topbar\";\r\nimport {HeaderMenuWrapper} from \"./header-menu/HeaderMenuWrapper\";\r\nimport {AnimateLoading} from \"../../../_partials/controls\";\r\n\r\nexport function Header() {\r\n const uiService = useHtmlClassService();\r\n\r\n const layoutProps = useMemo(() => {\r\n return {\r\n headerClasses: uiService.getClasses(\"header\", true),\r\n headerAttributes: uiService.getAttributes(\"header\"),\r\n headerContainerClasses: uiService.getClasses(\"header_container\", true),\r\n menuHeaderDisplay: objectPath.get(\r\n uiService.config,\r\n \"header.menu.self.display\"\r\n )\r\n };\r\n }, [uiService]);\r\n\r\n return (\r\n <>\r\n {/*begin::Header*/}\r\n \r\n \r\n }/)
\r\n \r\n
\r\n {/*end::Header Logo*/}\r\n \r\n )}\r\n {/*begin::Header Menu*/}\r\n \r\n
\r\n {/*end::Container*/}\r\n \r\n {/*end::Header*/}\r\n \r\n );\r\n}\r\n","import React, { useMemo } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport objectPath from \"object-path\";\r\nimport SVG from \"react-inlinesvg\";\r\nimport { toAbsoluteUrl } from \"../../../_helpers\";\r\nimport { useHtmlClassService } from \"../../_core/MetronicLayout\";\r\n\r\nexport function HeaderMobile() {\r\n const uiService = useHtmlClassService();\r\n\r\n const layoutProps = useMemo(() => {\r\n return {\r\n headerLogo: uiService.getStickyLogo(),\r\n asideDisplay: objectPath.get(uiService.config, \"aside.self.display\"),\r\n headerMenuSelfDisplay:\r\n objectPath.get(uiService.config, \"header.menu.self.display\") === true,\r\n headerMobileCssClasses: uiService.getClasses(\"header_mobile\", true),\r\n headerMobileAttributes: uiService.getAttributes(\"header_mobile\")\r\n };\r\n }, [uiService]);\r\n\r\n return (\r\n <>\r\n {/*begin::Header Mobile*/}\r\n \r\n {process.env.REACT_APP_ENVIRONMENT.startsWith('DEV') && \r\n \r\n \r\n \r\n \r\n {/*end::Topbar Mobile Toggle*/}\r\n
\r\n {/*end::Toolbar*/}\r\n \r\n {/*end::Header Mobile*/}\r\n \r\n );\r\n}\r\n","import React, {useMemo} from \"react\";\r\nimport {Link} from \"react-router-dom\";\r\nimport objectPath from \"object-path\";\r\nimport SVG from \"react-inlinesvg\";\r\nimport {useHtmlClassService} from \"../../_core/MetronicLayout\";\r\nimport {toAbsoluteUrl} from \"../../../_helpers\";\r\n\r\nexport function Brand() {\r\n const uiService = useHtmlClassService();\r\n\r\n const layoutProps = useMemo(() => {\r\n return {\r\n brandClasses: uiService.getClasses(\"brand\", true),\r\n asideSelfMinimizeToggle: objectPath.get(\r\n uiService.config,\r\n \"aside.self.minimize.toggle\"\r\n ),\r\n headerLogo: uiService.getLogo(),\r\n headerStickyLogo: uiService.getStickyLogo()\r\n };\r\n }, [uiService]);\r\n\r\n return (\r\n <>\r\n {/* begin::Brand */}\r\n \r\n 👨🏼💻 Development\r\n
}\r\n {layoutProps.asideDisplay && (\r\n <>\r\n {/*begin::Aside Mobile Toggle*/}\r\n \r\n {/*end::Aside Mobile Toggle*/}\r\n \r\n )}\r\n\r\n {layoutProps.headerMenuSelfDisplay && (\r\n <>\r\n {/*begin::Header Menu Mobile Toggle*/}\r\n \r\n {/*end::Header Menu Mobile Toggle*/}\r\n \r\n )}\r\n\r\n {/*begin::Topbar Mobile Toggle*/}\r\n - \r\n {/* begin::section */}\r\n
- \r\n
Dashboard
\r\n \r\n \r\n {/* end:: section */}\r\n {/*begin::1 Level*/}\r\n - \r\n
Quotation
\r\n \r\n \r\n {/* end:: section */}\r\n {/*begin::1 Level*/}\r\n {//isVerified &&\r\n //isOperator && // temporarily\r\n - \r\n
My Shipment
\r\n \r\n }\r\n {/* end:: section */}\r\n {/*begin::1 Level*/}\r\n {//isVerified &&\r\n //isOperator && // temporarily\r\n - \r\n
Billing
\r\n \r\n }\r\n {/* end:: section */}\r\n {/*begin::1 Level*/}\r\n {\r\n - \r\n
Organization
\r\n \r\n }\r\n {/* end:: section */}\r\n {/*begin::1 Level*/}\r\n {!isOperator && - \r\n
Operator
\r\n \r\n }\r\n {/* end:: section */}\r\n {/*begin::1 Level*/}\r\n {isOperator &&
\r\n
\r\n {/* end::Aside */}\r\n \r\n );\r\n}\r\n","import React, {useMemo} from \"react\";\r\nimport {useHtmlClassService} from \"../../_core/MetronicLayout\";\r\n\r\nexport function Footer() {\r\n const today = new Date().getFullYear();\r\n const uiService = useHtmlClassService();\r\n\r\n const layoutProps = useMemo(() => {\r\n return {\r\n footerClasses: uiService.getClasses(\"footer\", true),\r\n footerContainerClasses: uiService.getClasses(\"footer_container\", true)\r\n };\r\n }, [uiService]);\r\n\r\n return (\r\n \r\n {layoutProps.disableAsideSelfDisplay && (\r\n <>\r\n {/* begin::Header Logo */}\r\n \r\n
\r\n {/* end::Aside Menu */}\r\n \r\n \r\n 
\r\n \r\n
\r\n {/* end::Header Logo */}\r\n \r\n )}\r\n \r\n {today.toString()} ©{\" \"}\r\n \r\n Pnpline\r\n \r\n
\r\n \r\n \r\n About\r\n \r\n \r\n Team\r\n \r\n \r\n Contact\r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\n\r\nvar KTLayoutHeader = function() {\r\n // Private properties\r\n var _element;\r\n var _elementForMobile;\r\n var _object;\r\n\r\n\t// Private functions\r\n // Get Height\r\n var _getHeight = function() {\r\n var height = 0;\r\n\r\n if (_element) {\r\n height = KTUtil.actualHeight(_element) + 1;\r\n }\r\n\r\n return height;\r\n }\r\n\r\n // Get Height\r\n var _getHeightForMobile = function() {\r\n var height;\r\n\r\n height = KTUtil.actualHeight(_elementForMobile);\r\n\r\n return height;\r\n }\r\n\r\n // Public Methods\r\n\treturn {\r\n\t\tinit: function(id, idForMobile) {\r\n _element = KTUtil.getById(id);\r\n _elementForMobile = KTUtil.getById(idForMobile);\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\t\t},\r\n\r\n isFixed: function() {\r\n return KTUtil.hasClass(KTUtil.getBody(), 'header-fixed')\r\n },\r\n\r\n isFixedForMobile: function() {\r\n return KTUtil.hasClass(KTUtil.getBody(), 'header-mobile-fixed')\r\n },\r\n\r\n getElement: function() {\r\n return _element;\r\n },\r\n\r\n getElementForMobile: function() {\r\n return _elementForMobile;\r\n },\r\n\r\n getHeader: function() {\r\n return _object;\r\n },\r\n\r\n getHeight: function() {\r\n return _getHeight();\r\n },\r\n\r\n getHeightForMobile: function() {\r\n return _getHeightForMobile();\r\n }\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutHeader;\r\n}\r\n\r\nexport default KTLayoutHeader;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport KTOffcanvas from \"./../../components/offcanvas.js\";\r\nimport KTMenu from \"./../../components/menu.js\";\r\nimport { KTUtil } from \"./../../components/util.js\";\r\n\r\nvar KTLayoutHeaderMenu = function() {\r\n // Private properties\r\n\tvar _menuElement;\r\n var _menuObject;\r\n var _offcanvasElement;\r\n var _offcanvasObject;\r\n\r\n // Private functions\r\n\tvar _init = function() {\r\n\t\t_offcanvasObject = new KTOffcanvas(_offcanvasElement, {\r\n\t\t\toverlay: true,\r\n\t\t\tbaseClass: 'header-menu-wrapper',\r\n\t\t\tcloseBy: 'kt_header_menu_mobile_close_btn',\r\n\t\t\ttoggleBy: {\r\n\t\t\t\ttarget: 'kt_header_mobile_toggle',\r\n\t\t\t\tstate: 'mobile-toggle-active'\r\n\t\t\t}\r\n\t\t});\r\n\t\t\r\n\t\t_menuObject = new KTMenu(_menuElement, {\r\n\t\t\tsubmenu: {\r\n\t\t\t\tdesktop: 'dropdown',\r\n\t\t\t\ttablet: 'accordion',\r\n\t\t\t\tmobile: 'accordion'\r\n\t\t\t},\r\n\t\t\taccordion: {\r\n\t\t\t\tslideSpeed: 200, // accordion toggle slide speed in milliseconds\r\n\t\t\t\texpandAll: false // allow having multiple expanded accordions in the menu\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t// Close aside offcanvas panel before page reload On tablet and mobile\r\n _menuObject.on('linkClick', function(menu) {\r\n if (KTUtil.isBreakpointDown('lg')) { // Tablet and mobile mode\r\n _offcanvasObject.hide(); // Hide offcanvas after general link click\r\n }\r\n });\r\n\t}\r\n\r\n // Public methods\r\n\treturn {\r\n init: function(menuId, offcanvasId) {\r\n _menuElement = KTUtil.getById(menuId);\r\n _offcanvasElement = KTUtil.getById(offcanvasId);\r\n\r\n if (!_menuElement) {\r\n return;\r\n }\r\n\r\n // Initialize menu\r\n _init();\r\n\t\t},\r\n\r\n\t\tgetMenuElement: function() {\r\n\t\t\treturn _menuElement;\r\n\t\t},\r\n\r\n getOffcanvasElement: function() {\r\n\t\t\treturn _offcanvasElement;\r\n\t\t},\r\n\r\n getMenu: function() {\r\n\t\t\treturn _menuObject;\r\n\t\t},\r\n\r\n\t\tpauseDropdownHover: function(time) {\r\n\t\t\tif (_menuObject) {\r\n\t\t\t\t_menuObject.pauseDropdownHover(time);\r\n\t\t\t}\r\n\t\t},\r\n\r\n getOffcanvas: function() {\r\n\t\t\treturn _offcanvasObject;\r\n\t\t},\r\n\r\n\t\tcloseMobileOffcanvas: function() {\r\n\t\t\tif (_menuObject && KTUtil.isMobileDevice()) {\r\n\t\t\t\t_offcanvasObject.hide();\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutHeaderMenu;\r\n}\r\n\r\nexport default KTLayoutHeaderMenu;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport KTToggle from \"./../../components/toggle.js\";\r\nimport { KTUtil } from \"./../../components/util.js\";\r\n\r\nvar KTLayoutHeaderTopbar = function() {\r\n // Private properties\r\n\tvar _toggleElement;\r\n var _toggleObject;\r\n\r\n // Private functions\r\n var _init = function() {\r\n\t\t\t_toggleObject = new KTToggle(_toggleElement, {\r\n\t\t\t\ttarget: KTUtil.getBody(),\r\n\t\t\t\ttargetState: 'topbar-mobile-on',\r\n\t\t\t\ttoggleState: 'active',\r\n\t\t\t});\r\n }\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _toggleElement = KTUtil.getById(id);\r\n\r\n\t\t\tif (!_toggleElement) {\r\n return;\r\n }\r\n\r\n // Initialize\r\n _init();\r\n\t\t},\r\n\r\n getToggleElement: function() {\r\n return _toggleElement;\r\n }\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutHeaderTopbar;\r\n}\r\n\r\nexport default KTLayoutHeaderTopbar;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\n\r\nvar KTLayoutBrand = function() {\r\n // Private properties\r\n var _element;\r\n\r\n // Private functions\r\n var _getHeight = function() {\r\n var height = 0;\r\n\r\n if (_element) {\r\n height = KTUtil.actualHeight(_element);\r\n }\r\n\r\n return height;\r\n }\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\t\t},\r\n\r\n getElement: function() {\r\n return _element;\r\n },\r\n\r\n getHeight: function() {\r\n return _getHeight();\r\n }\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutBrand;\r\n}\r\n\r\nexport default KTLayoutBrand;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\nimport KTLayoutBrand from \"./brand.js\";\r\nimport KTMenu from \"./../../components/menu.js\";\r\nimport KTLayoutAside from \"./aside.js\";\r\n\r\nvar KTLayoutAsideMenu = function() {\r\n // Private properties\r\n var _element;\r\n var _menuObject;\r\n\r\n\t// Initialize\r\n\tvar _init = function() {\r\n\t\tvar menuDesktopMode = (KTUtil.attr(_element, 'data-menu-dropdown') === '1' ? 'dropdown' : 'accordion');\r\n var scroll;\r\n\r\n\t\tif (KTUtil.attr(_element, 'data-menu-scroll') === '1') {\r\n\t\t\tscroll = {\r\n\t\t\t\trememberPosition: true, // remember position on page reload\r\n\t\t\t\theight: function() { // calculate available scrollable area height\r\n\t\t\t\t\tvar height = parseInt(KTUtil.getViewPort().height);\r\n\r\n\t\t\t\t\tif (KTUtil.isBreakpointUp('lg')) {\r\n\t\t\t\t\t\theight = height - KTLayoutBrand.getHeight();\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\theight = height - (parseInt(KTUtil.css(_element, 'marginBottom')) + parseInt(KTUtil.css(_element, 'marginTop')));\r\n\r\n\t\t\t\t\treturn height;\r\n\t\t\t\t}\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\t_menuObject = new KTMenu(_element, {\r\n\t\t\t// Vertical scroll\r\n\t\t\tscroll: scroll,\r\n\r\n\t\t\t// Submenu setup\r\n\t\t\tsubmenu: {\r\n\t\t\t\tdesktop: menuDesktopMode,\r\n\t\t\t\ttablet: 'accordion', // menu set to accordion in tablet mode\r\n\t\t\t\tmobile: 'accordion' // menu set to accordion in mobile mode\r\n\t\t\t},\r\n\r\n\t\t\t// Accordion setup\r\n\t\t\taccordion: {\r\n\t\t\t\texpandAll: false // allow having multiple expanded accordions in the menu\r\n\t\t\t}\r\n\t\t});\r\n\r\n // Disable menu click if aside is fixed and minimized\r\n _menuObject.on('submenuToggle', function(menu) {\r\n if (KTLayoutAside.isMinimized() === true && KTLayoutAside.isHoverable() === false) {\r\n return false;\r\n }\r\n });\r\n\r\n // Close aside offcanvas panel before page reload On tablet and mobile\r\n _menuObject.on('linkClick', function(menu) {\r\n if (KTUtil.isBreakpointDown('lg')) { // Tablet and mobile mode\r\n KTLayoutAside.getOffcanvas().hide(); // Hide offcanvas after general link click\r\n }\r\n });\r\n\t}\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\r\n // Initialize menu\r\n _init();\r\n\t\t},\r\n\r\n\t\tgetElement: function() {\r\n\t\t\treturn _element;\r\n\t\t},\r\n\r\n getMenu: function() {\r\n\t\t\treturn _menuObject;\r\n\t\t},\r\n\r\n pauseDropdownHover: function(time) {\r\n\t\t\tif (_menuObject) {\r\n\t\t\t\t_menuObject.pauseDropdownHover(time);\r\n\t\t\t}\r\n\t\t},\r\n\r\n\t\tcloseMobileOffcanvas: function() {\r\n\t\t\tif (_menuObject && KTUtil.isMobileDevice()) {\r\n\t\t\t\t_menuObject.hide();\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutAsideMenu;\r\n}\r\n\r\nexport default KTLayoutAsideMenu;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\nimport KTOffcanvas from \"./../../components/offcanvas.js\";\r\nimport KTLayoutAsideMenu from \"./aside-menu.js\";\r\n\r\nvar KTLayoutAside = function() {\r\n // Private properties\r\n var _body;\r\n var _element;\r\n var _offcanvasObject;\r\n\r\n // Private functions\r\n\t// Initialize\r\n\tvar _init = function() {\r\n\t\tvar offcanvasClass = KTUtil.hasClass(_element, 'aside-offcanvas-default') ? 'aside-offcanvas-default' : 'aside';\r\n\r\n // Initialize mobile aside offcanvas\r\n\t\t_offcanvasObject = new KTOffcanvas(_element, {\r\n\t\t\tbaseClass: offcanvasClass,\r\n\t\t\toverlay: true,\r\n\t\t\tcloseBy: 'kt_aside_close_btn',\r\n\t\t\ttoggleBy: {\r\n\t\t\t\ttarget: 'kt_aside_mobile_toggle',\r\n\t\t\t\tstate: 'mobile-toggle-active'\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t// Handle Minimized Aside Hover\r\n\t\tif (KTUtil.hasClass(_body, 'aside-fixed') && KTUtil.hasClass(_body, 'aside-minimize-hoverable')) {\r\n\t\t\tvar insideTm;\r\n\t\t\tvar outsideTm;\r\n\r\n // Handle Aside Hover Mode\r\n\t\t\tKTUtil.addEvent(_element, 'mouseenter', function(e) {\r\n\t\t\t\te.preventDefault();\r\n\r\n\t\t\t\tif (KTUtil.isBreakpointUp('lg') === false) {\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (outsideTm) {\r\n\t\t\t\t\tclearTimeout(outsideTm);\r\n\t\t\t\t\toutsideTm = null;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tinsideTm = setTimeout(function() {\r\n\t\t\t\t\tif (KTUtil.hasClass(_body, 'aside-minimize') && KTUtil.isBreakpointUp('lg')) {\r\n\t\t\t\t\t\tKTUtil.removeClass(_body, 'aside-minimize');\r\n\r\n\t\t\t\t\t\t// Hover class\r\n\t\t\t\t\t\tKTUtil.addClass(_body, 'aside-minimize-hover');\r\n\r\n\t\t\t\t\t\tKTLayoutAsideMenu.getMenu().scrollUpdate();\r\n\t\t\t\t\t\tKTLayoutAsideMenu.getMenu().scrollTop();\r\n\t\t\t\t\t}\r\n\t\t\t\t}, 50);\r\n\t\t\t});\r\n\r\n\t\t\tKTUtil.addEvent(_element, 'mouseleave', function(e) {\r\n\t\t\t\te.preventDefault();\r\n\r\n\t\t\t\tif (KTUtil.isBreakpointUp('lg') === false) {\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (insideTm) {\r\n\t\t\t\t\tclearTimeout(insideTm);\r\n\t\t\t\t\tinsideTm = null;\r\n\t\t\t\t}\r\n\r\n\t\t\t\toutsideTm = setTimeout(function() {\r\n\t\t\t\t if (KTUtil.hasClass(_body, 'aside-minimize-hover') && KTUtil.isBreakpointUp('lg')) {\r\n\t\t\t\t\t KTUtil.removeClass(_body, 'aside-minimize-hover');\r\n\t\t\t\t\t KTUtil.addClass(_body, 'aside-minimize');\r\n\r\n\t\t\t\t\t\t// Hover class\r\n KTLayoutAsideMenu.getMenu().scrollUpdate();\r\n\t\t\t\t\t\tKTLayoutAsideMenu.getMenu().scrollTop();\r\n\t\t\t\t\t}\r\n\t\t\t\t}, 100);\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n _body = KTUtil.getBody();\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\r\n // Initialize\r\n _init();\r\n },\r\n\r\n getElement: function() {\r\n return _element;\r\n },\r\n\r\n getOffcanvas: function() {\r\n return _offcanvasObject;\r\n },\r\n\r\n isFixed: function() {\r\n return KTUtil.hasClass(_body, 'aside-fixed');\r\n },\r\n\r\n isMinimized: function() {\r\n return (KTUtil.hasClass(_body, 'aside-fixed') && KTUtil.hasClass(_body, 'aside-minimize'));\r\n },\r\n\r\n isHoverable: function() {\r\n return (KTUtil.hasClass(_body, 'aside-fixed') && KTUtil.hasClass(_body, 'aside-minimize-hoverable'));\r\n }\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutAside;\r\n}\r\n\r\nexport default KTLayoutAside;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\n\r\nvar KTLayoutSubheader = function() {\r\n // Private properties\r\n var _element;\r\n\r\n // Private functions\r\n var _getHeight = function() {\r\n var height = 0;\r\n\r\n if (_element) {\r\n height = KTUtil.actualHeight(_element);\r\n }\r\n\r\n return height;\r\n }\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\t\t},\r\n\r\n isFixed: function() {\r\n return KTUtil.hasClass(KTUtil.getBody(), 'subheader-fixed');\r\n },\r\n\r\n getElement: function() {\r\n return _element;\r\n },\r\n\r\n getHeight: function() {\r\n return _getHeight();\r\n }\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutSubheader;\r\n}\r\n\r\nexport default KTLayoutSubheader;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport KTLayoutHeader from \"./header.js\";\r\nimport KTCard from \"./../../components/card.js\";\r\nimport { KTUtil } from \"./../../components/util.js\";\r\nimport KTLayoutSubheader from \"./subheader.js\";\r\n\r\nvar KTLayoutStickyCard = function() {\r\n // Private properties\r\n\tvar _element;\r\n var _object;\r\n\r\n\t// Private functions\r\n\tvar _init = function() {\r\n\t\tvar offset = 300;\r\n\r\n\t\tif (typeof KTLayoutHeader !== 'undefined') {\r\n\t\t\toffset = KTLayoutHeader.getHeight();\r\n\t\t}\r\n\r\n _object = new KTCard(_element, {\r\n\t\t\tsticky: {\r\n\t\t\t\toffset: offset,\r\n\t\t\t\tzIndex: 90,\r\n\t\t\t\tposition: {\r\n\t\t\t\t\ttop: function() {\r\n\t\t\t\t\t\tvar pos = 0;\r\n var body = KTUtil.getBody();\r\n\r\n\t\t\t\t\t\tif (KTUtil.isBreakpointUp('lg')) {\r\n\t\t\t\t\t\t\tif (typeof KTLayoutHeader !== 'undefined' && KTLayoutHeader.isFixed()) {\r\n\t\t\t\t\t\t\t\tpos = pos + KTLayoutHeader.getHeight();\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tif (typeof KTLayoutSubheader !== 'undefined' && KTLayoutSubheader.isFixed()) {\r\n\t\t\t\t\t\t\t\tpos = pos + KTLayoutSubheader.getHeight();\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tif (typeof KTLayoutHeader !== 'undefined' && KTLayoutHeader.isFixedForMobile()) {\r\n\t\t\t\t\t\t\t\tpos = pos + KTLayoutHeader.getHeightForMobile();\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tpos = pos - 1; // remove header border width\r\n\r\n\t\t\t\t\t\treturn pos;\r\n\t\t\t\t\t},\r\n\t\t\t\t\tleft: function(card) {\r\n\t\t\t\t\t\treturn KTUtil.offset(_element).left;\r\n\t\t\t\t\t},\r\n\t\t\t\t\tright: function(card) {\r\n\t\t\t\t\t\tvar body = KTUtil.getBody();\r\n\r\n\t\t\t\t\t\tvar cardWidth = parseInt(KTUtil.css(_element, 'width'));\r\n\t\t\t\t\t\tvar bodyWidth = parseInt(KTUtil.css(body, 'width'));\r\n\t\t\t\t\t\tvar cardOffsetLeft = KTUtil.offset(_element).left;\r\n\r\n\t\t\t\t\t\treturn bodyWidth - cardWidth - cardOffsetLeft;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t_object.initSticky();\r\n\r\n\t\tKTUtil.addResizeHandler(function() {\r\n\t\t\t_object.updateSticky();\r\n\t\t});\r\n\t}\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\r\n // Initialize\r\n\t\t\t_init();\r\n\t\t},\r\n\r\n\t\tupdate: function() {\r\n\t\t\tif (_object) {\r\n\t\t\t\t_object.updateSticky();\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutStickyCard;\r\n}\r\n\r\nexport default KTLayoutStickyCard;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport KTToggle from \"./../../components/toggle.js\";\r\nimport KTLayoutStickyCard from \"./sticky-card.js\";\r\nimport KTLayoutHeaderMenu from \"./header-menu.js\";\r\nimport KTLayoutAsideMenu from \"./aside-menu.js\";\r\nimport { KTCookie } from \"./../../components/cookie.js\";\r\nimport { KTUtil } from \"./../../components/util.js\";\r\n\r\nvar KTLayoutAsideToggle = function() {\r\n // Private properties\r\n var _body;\r\n var _element;\r\n var _toggleObject;\r\n\r\n\t// Initialize\r\n\tvar _init = function() {\r\n\t\t_toggleObject = new KTToggle(_element, {\r\n\t\t\ttarget: _body,\r\n\t\t\ttargetState: 'aside-minimize',\r\n\t\t\ttoggleState: 'active'\r\n\t\t});\r\n\r\n\t\t_toggleObject.on('toggle', function(toggle) {\r\n // Update sticky card\r\n if (typeof KTLayoutStickyCard !== 'undefined') {\r\n KTLayoutStickyCard.update();\r\n }\r\n\r\n // Pause header menu dropdowns\r\n if (typeof KTLayoutHeaderMenu !== 'undefined') {\r\n KTLayoutHeaderMenu.pauseDropdownHover(800);\r\n }\r\n\r\n // Pause aside menu dropdowns\r\n if (typeof KTLayoutAsideMenu !== 'undefined') {\r\n KTLayoutAsideMenu.pauseDropdownHover(800);\r\n }\r\n\r\n // Remember state in cookie\r\n\t\t\tKTCookie.setCookie('kt_aside_toggle_state', toggle.getState());\r\n\t\t\t// to set default minimized left aside use this cookie value in your\r\n\t\t\t// server side code and add \"kt-primary--minimize aside-minimize\" classes to\r\n\t\t\t// the body tag in order to initialize the minimized left aside mode during page loading.\r\n\t\t});\r\n\r\n\t\t_toggleObject.on('beforeToggle', function(toggle) {\r\n\t\t\tif (KTUtil.hasClass(_body, 'aside-minimize') === false && KTUtil.hasClass(_body, 'aside-minimize-hover')) {\r\n\t\t\t\tKTUtil.removeClass(_body, 'aside-minimize-hover');\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n _body = KTUtil.getBody();\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\r\n // Initialize\r\n _init();\r\n\t\t},\r\n\r\n getElement: function() {\r\n return _element;\r\n },\r\n\r\n getToggle: function() {\r\n\t\t\treturn _toggleObject;\r\n\t\t},\r\n\r\n\t\tonToggle: function(handler) {\r\n\t\t\tif (typeof _toggleObject.element !== 'undefined') {\r\n\t\t\t\t_toggleObject.on('toggle', handler);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutAsideToggle;\r\n}\r\n\r\nexport default KTLayoutAsideToggle;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\n\r\nvar KTLayoutFooter = function() {\r\n // Private properties\r\n var _element;\r\n\r\n\t// Private functions\r\n\tvar _getHeight = function() {\r\n\t\tvar height = 0;\r\n\r\n if (_element) {\r\n height = KTUtil.actualHeight(_element);\r\n }\r\n\r\n\t\treturn height;\r\n\t}\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n\t\t},\r\n\r\n\t\tgetHeight: function() {\r\n\t\t\treturn _getHeight();\r\n\t\t},\r\n\r\n getElement: function() {\r\n return _element;\r\n }\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutFooter;\r\n}\r\n\r\nexport default KTLayoutFooter;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\nimport KTLayoutHeader from \"./header.js\";\r\nimport KTLayoutSubheader from \"./subheader.js\";\r\nimport KTLayoutFooter from \"./footer.js\";\r\n\r\nvar KTLayoutContent = function() {\r\n // Private properties\r\n var _element;\r\n\r\n\t// Private functions\r\n\tvar _getHeight = function() {\r\n\t\tvar height;\r\n\r\n\t\theight = KTUtil.getViewPort().height;\r\n\r\n if (_element) {\r\n height = height - parseInt(KTUtil.css(_element, 'paddingTop')) - parseInt(KTUtil.css(_element, 'paddingBottom'));\r\n }\r\n\r\n height = height - KTLayoutHeader.getHeight();\r\n height = height - KTLayoutSubheader.getHeight();\r\n height = height - KTLayoutFooter.getHeight();\r\n\r\n\t\treturn height;\r\n\t}\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n\t\t},\r\n\r\n\t\tgetHeight: function() {\r\n\t\t\treturn _getHeight();\r\n\t\t},\r\n\r\n getElement: function() {\r\n return _element;\r\n }\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutContent;\r\n}\r\n\r\nexport default KTLayoutContent;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport KTScrolltop from \"./../../components/scrolltop.js\";\r\nimport { KTUtil } from \"./../../components/util.js\";\r\n\r\nvar KTLayoutScrolltop = function() {\r\n // Private properties\r\n var _element;\r\n var _object;\r\n\r\n // Private functions\r\n var _init = function() {\r\n _object = new KTScrolltop(_element, {\r\n offset: 300,\r\n speed: 600,\r\n });\r\n }\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\r\n // Initialize\r\n _init();\r\n\t\t},\r\n\r\n getElement: function() {\r\n return _element;\r\n }\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutScrolltop;\r\n}\r\n\r\nexport default KTLayoutScrolltop;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\nimport KTLayoutContent from \"./content.js\";\r\n\r\nvar KTLayoutStretchedCard = function() {\r\n // Private properties\r\n\tvar _element;\r\n\r\n\t// Private functions\r\n\tvar _init = function() {\r\n\t\tvar scroll = KTUtil.find(_element, '.card-scroll');\r\n\t\tvar cardBody = KTUtil.find(_element, '.card-body');\r\n\t\tvar cardHeader = KTUtil.find(_element, '.card-header');\r\n\r\n\t\tvar height = KTLayoutContent.getHeight();\r\n\r\n\t\theight = height - parseInt(KTUtil.actualHeight(cardHeader));\r\n\r\n\t\theight = height - parseInt(KTUtil.css(_element, 'marginTop')) - parseInt(KTUtil.css(_element, 'marginBottom'));\r\n\t\theight = height - parseInt(KTUtil.css(_element, 'paddingTop')) - parseInt(KTUtil.css(_element, 'paddingBottom'));\r\n\r\n\t\theight = height - parseInt(KTUtil.css(cardBody, 'paddingTop')) - parseInt(KTUtil.css(cardBody, 'paddingBottom'));\r\n\t\theight = height - parseInt(KTUtil.css(cardBody, 'marginTop')) - parseInt(KTUtil.css(cardBody, 'marginBottom'));\r\n\r\n\t\theight = height - 3;\r\n\r\n\t\tKTUtil.css(scroll, 'height', height + 'px');\r\n\t}\r\n\r\n // Public methods\r\n\treturn {\r\n\t\tinit: function(id) {\r\n _element = KTUtil.getById(id);\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\r\n // Initialize\r\n\t\t\t_init();\r\n\r\n // Re-calculate on window resize\r\n KTUtil.addResizeHandler(function() {\r\n\t\t\t\t_init();\r\n\t\t\t});\r\n\t\t},\r\n\r\n\t\tupdate: function() {\r\n\t\t\t_init();\r\n\t\t}\r\n\t};\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutStretchedCard;\r\n}\r\n\r\nexport default KTLayoutStretchedCard;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\nimport KTOffcanvas from \"./../../components/offcanvas.js\";\r\n\r\nvar KTLayoutQuickPanel = function() {\r\n // Private properties\r\n var _element;\r\n var _offcanvasObject;\r\n var _notificationsElement;\r\n var _logsElement;\r\n var _settingsElement;\r\n\r\n // Private functions\r\n var _getContentHeight = function() {\r\n var height;\r\n\r\n var header = KTUtil.find(_element, '.offcanvas-header');\r\n var content = KTUtil.find(_element, '.offcanvas-content');\r\n\r\n var height = parseInt(KTUtil.getViewPort().height);\r\n\r\n if (header) {\r\n height = height - parseInt(KTUtil.actualHeight(header));\r\n height = height - parseInt(KTUtil.css(header, 'marginTop'));\r\n height = height - parseInt(KTUtil.css(header, 'marginBottom'));\r\n }\r\n\r\n if (content) {\r\n height = height - parseInt(KTUtil.css(content, 'marginTop'));\r\n height = height - parseInt(KTUtil.css(content, 'marginBottom'));\r\n }\r\n\r\n height = height - parseInt(KTUtil.css(_element, 'paddingTop'));\r\n height = height - parseInt(KTUtil.css(_element, 'paddingBottom'));\r\n\r\n height = height - 2;\r\n\r\n return height;\r\n }\r\n\r\n var _init = function() {\r\n _offcanvasObject = new KTOffcanvas(_element, {\r\n overlay: true,\r\n baseClass: 'offcanvas',\r\n placement: 'right',\r\n closeBy: 'kt_quick_panel_close',\r\n toggleBy: 'kt_quick_panel_toggle'\r\n });\r\n }\r\n\r\n var _initNotifications = function() {\r\n KTUtil.scrollInit(_notificationsElement, {\r\n mobileNativeScroll: true,\r\n resetHeightOnDestroy: true,\r\n handleWindowResize: true,\r\n height: function() {\r\n return _getContentHeight();\r\n }\r\n });\r\n }\r\n\r\n var _initLogs = function() {\r\n KTUtil.scrollInit(_logsElement, {\r\n mobileNativeScroll: true,\r\n resetHeightOnDestroy: true,\r\n handleWindowResize: true,\r\n height: function() {\r\n return _getContentHeight();\r\n }\r\n });\r\n }\r\n\r\n var _initSettings = function() {\r\n KTUtil.scrollInit(_settingsElement, {\r\n mobileNativeScroll: true,\r\n resetHeightOnDestroy: true,\r\n handleWindowResize: true,\r\n height: function() {\r\n return _getContentHeight();\r\n }\r\n });\r\n }\r\n\r\n var _updateScrollbars = function() {\r\n $(_element).find('a[data-toggle=\"tab\"]').on('shown.bs.tab', function (e) {\r\n KTUtil.scrollUpdate(_notificationsElement);\r\n KTUtil.scrollUpdate(_logsElement);\r\n KTUtil.scrollUpdate(_settingsElement);\r\n });\r\n }\r\n\r\n // Public methods\r\n return {\r\n init: function(id) {\r\n _element = KTUtil.getById(id);\r\n _notificationsElement = KTUtil.getById('kt_quick_panel_notifications');\r\n _logsElement = KTUtil.getById('kt_quick_panel_logs');\r\n _settingsElement = KTUtil.getById('kt_quick_panel_settings');\r\n\r\n _init();\r\n _initNotifications();\r\n _initLogs();\r\n _initSettings();\r\n\r\n \r\n }\r\n };\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutQuickPanel;\r\n}\r\n\r\nexport default KTLayoutQuickPanel;","/* eslint-disable */\r\n\"use strict\";\r\n\r\nimport { KTUtil } from \"./../../components/util.js\";\r\nimport KTOffcanvas from \"./../../components/offcanvas.js\";\r\n\r\nvar KTLayoutQuickUser = function() {\r\n // Private properties\r\n var _element;\r\n var _offcanvasObject;\r\n\r\n // Private functions\r\n var _init = function() {\r\n var header = KTUtil.find(_element, '.offcanvas-header');\r\n var content = KTUtil.find(_element, '.offcanvas-content');\r\n\r\n _offcanvasObject = new KTOffcanvas(_element, {\r\n overlay: true,\r\n baseClass: 'offcanvas',\r\n placement: 'right',\r\n closeBy: 'kt_quick_user_close',\r\n toggleBy: 'kt_quick_user_toggle'\r\n });\r\n\r\n KTUtil.scrollInit(content, {\r\n disableForMobile: true,\r\n resetHeightOnDestroy: true,\r\n handleWindowResize: true,\r\n height: function() {\r\n var height = parseInt(KTUtil.getViewPort().height);\r\n\r\n if (header) {\r\n height = height - parseInt(KTUtil.actualHeight(header));\r\n height = height - parseInt(KTUtil.css(header, 'marginTop'));\r\n height = height - parseInt(KTUtil.css(header, 'marginBottom'));\r\n }\r\n\r\n if (content) {\r\n height = height - parseInt(KTUtil.css(content, 'marginTop'));\r\n height = height - parseInt(KTUtil.css(content, 'marginBottom'));\r\n }\r\n\r\n height = height - parseInt(KTUtil.css(_element, 'paddingTop'));\r\n height = height - parseInt(KTUtil.css(_element, 'paddingBottom'));\r\n\r\n height = height - 2;\r\n\r\n return height;\r\n }\r\n });\r\n }\r\n\r\n // Public methods\r\n return {\r\n init: function(id) {\r\n _element = KTUtil.getById(id);\r\n\r\n if (!_element) {\r\n return;\r\n }\r\n\r\n // Initialize\r\n _init();\r\n },\r\n\r\n getElement: function() {\r\n return _element;\r\n }\r\n };\r\n}();\r\n\r\n// Webpack support\r\nif (typeof module !== 'undefined') {\r\n\t// module.exports = KTLayoutQuickUser;\r\n}\r\n\r\nexport default KTLayoutQuickUser;","import React, {useLayoutEffect} from \"react\";\r\nimport {KTUtil} from \"../../_assets/js/components/util\";\r\nimport KTLayoutHeader from \"../../_assets/js/layout/base/header\";\r\nimport KTLayoutHeaderMenu from \"../../_assets/js/layout/base/header-menu\";\r\nimport KTLayoutHeaderTopbar from \"../../_assets/js/layout/base/header-topbar\";\r\nimport KTLayoutBrand from \"../../_assets/js/layout/base/brand\";\r\nimport KTLayoutAside from \"../../_assets/js/layout/base/aside\";\r\nimport KTLayoutAsideToggle from \"../../_assets/js/layout/base/aside-toggle\";\r\nimport KTLayoutAsideMenu from \"../../_assets/js/layout/base/aside-menu\";\r\nimport KTLayoutContent from \"../../_assets/js/layout/base/content\";\r\nimport KTLayoutFooter from \"../../_assets/js/layout/base/footer\";\r\nimport KTLayoutSubheader from \"../../_assets/js/layout/base/subheader\";\r\nimport KTLayoutScrolltop from \"../../_assets/js/layout/extended/scrolltop\";\r\nimport KTLayoutStickyCard from \"../../_assets/js/layout/base/sticky-card\";\r\nimport KTLayoutStretchedCard from \"../../_assets/js/layout/base/stretched-card\";\r\nimport KTLayoutQuickPanel from \"../../_assets/js/layout/extended/quick-panel\";\r\nimport KTLayoutQuickUser from \"../../_assets/js/layout/extended/quick-user\";\r\n\r\nexport function LayoutInit() {\r\n useLayoutEffect(() => {\r\n // Initialization\r\n KTUtil.ready(function () {\r\n ////////////////////////////////////////////////////\r\n // Layout Base Partials(mandatory for core layout)//\r\n ////////////////////////////////////////////////////\r\n // Init Desktop & Mobile Headers\r\n KTLayoutHeader.init('kt_header', 'kt_header_mobile');\r\n\r\n // Init Header Menu\r\n KTLayoutHeaderMenu.init('kt_header_menu', 'kt_header_menu_wrapper');\r\n // Init Header Topbar For Mobile Mode\r\n KTLayoutHeaderTopbar.init('kt_header_mobile_topbar_toggle');\r\n // Init Brand Panel For Logo\r\n KTLayoutBrand.init('kt_brand');\r\n // Init Aside\r\n KTLayoutAside.init('kt_aside');\r\n\r\n // Init Aside Menu Toggle\r\n KTLayoutAsideToggle.init('kt_aside_toggle');\r\n //\r\n // Init Aside Menu\r\n KTLayoutAsideMenu.init('kt_aside_menu');\r\n\r\n // Init Content\r\n KTLayoutContent.init('kt_content');\r\n\r\n // Init Footer\r\n KTLayoutFooter.init('kt_footer');\r\n\r\n\r\n //////////////////////////////////////////////\r\n // Layout Extended Partials(optional to use)//\r\n //////////////////////////////////////////////\r\n KTLayoutSubheader.init('kt_subheader');\r\n\r\n // Init Scrolltop\r\n KTLayoutScrolltop.init('kt_scrolltop');\r\n\r\n // Init Sticky Card\r\n KTLayoutStickyCard.init('kt_page_sticky_card');\r\n\r\n // Init Stretched Card\r\n KTLayoutStretchedCard.init('kt_page_stretched_card');\r\n\r\n // Init Quick Offcanvas Panel\r\n KTLayoutQuickPanel.init('kt_quick_panel');\r\n\r\n // Init Quick User Panel\r\n KTLayoutQuickUser.init('kt_quick_user');\r\n });\r\n }, []);\r\n return <>;\r\n}\r\n","/* eslint-disable no-restricted-imports */\r\n/* eslint-disable no-script-url,jsx-a11y/anchor-is-valid */\r\nimport React, {forwardRef} from \"react\";\r\nimport {OverlayTrigger, Tooltip} from \"react-bootstrap\";\r\nimport Dropdown from \"react-bootstrap/Dropdown\";\r\nimport SVG from \"react-inlinesvg\";\r\nimport {DropdownMenu1} from \"../../../../_partials/dropdowns\";\r\nimport {toAbsoluteUrl} from \"../../../../_helpers\";\r\n\r\nconst QuickActionsDropdownToggle = forwardRef((props, ref) => {\r\n return (\r\n - \r\n
- \r\n \r\n \r\n \r\n \r\n {items.map((item, index) => (\r\n
- \r\n \r\n {item.title}\r\n \r\n \r\n ))}\r\n
\r\n {layoutProps.subheaderMobileToggle && (\r\n \r\n \r\n \r\n )}\r\n\r\n
\r\n\r\n {/* Toolbar */}\r\n \r\n
\r\n\r\n\r\n \r\n <>\r\n {subheader.title}\r\n \r\n {/**/}\r\n
\r\n\r\n\r\n \r\n Today\r\n {date} \r\n \r\n {/*
\r\n \r\n \r\n );\r\n}\r\n","/* eslint-disable no-script-url,jsx-a11y/anchor-is-valid,no-undef */\r\nimport React, {useState} from \"react\";\r\nimport SVG from \"react-inlinesvg\";\r\nimport {Tab, Nav} from \"react-bootstrap\";\r\nimport {toAbsoluteUrl} from \"../../../../_helpers\";\r\n\r\nexport function QuickPanel() {\r\n const [selectedTab, setSelectedTab] = useState(\"AuditLogs\");\r\n\r\n const setTab = _tabName => {\r\n setSelectedTab(_tabName);\r\n };\r\n\r\n return (\r\n \r\n \r\n {/*begin::Header*/}\r\n \r\n \r\n \r\n \r\n Audit Logs\r\n \r\n \r\n \r\n \r\n Notifications\r\n \r\n \r\n \r\n \r\n Settings\r\n \r\n \r\n \r\n\r\n
\r\n {/*end::Header*/}\r\n\r\n {/*begin::Content*/}\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 System Messages
\r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n Top Authors\r\n \r\n \r\n Most Successful Fellas\r\n \r\n
\r\n \r\n +82$\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n Popular Authors\r\n \r\n \r\n Most Successful Fellas\r\n \r\n
\r\n \r\n +280$\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n New Users\r\n \r\n \r\n Most Successful Fellas\r\n \r\n
\r\n \r\n +4500$\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n Active Customers\r\n \r\n \r\n Most Successful Fellas\r\n \r\n
\r\n \r\n +4500$\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Bestseller Theme\r\n \r\n \r\n Most Successful Fellas\r\n \r\n
\r\n \r\n +4500$\r\n \r\n \r\n
\r\n Notifications
\r\n\r\n\r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n \r\n Another purpose persuade\r\n \r\n \r\n Due in 2 Days\r\n \r\n
\r\n\r\n \r\n +28%\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Would be to people\r\n \r\n \r\n Due in 2 Days\r\n \r\n
\r\n\r\n \r\n +50%\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Purpose would be to persuade\r\n \r\n \r\n Due in 2 Days\r\n \r\n
\r\n\r\n \r\n -27%\r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n The best product\r\n \r\n \r\n Due in 2 Days\r\n \r\n
\r\n\r\n \r\n +8%\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 5 new user generated report\r\n
\r\n Reports based on sales
\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 2 new items submited\r\n
\r\n by Grog John
\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 79 PSD files generated\r\n
\r\n Reports based on sales
\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 $2900 worth producucts sold\r\n
\r\n Total 234 items
\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 4.5h-avarage response time\r\n
\r\n Fostest is Barry
\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 3 Defence alerts\r\n
\r\n \r\n 40% less alerts thar last week\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 Avarage 4 blog posts per author\r\n
\r\n Most posted 12 time
\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 16 authors joined last week\r\n
\r\n \r\n 9 photodrapehrs, 7 designer\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 2 new items have been submited\r\n
\r\n by Grog John
\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 2.8 GB-total downloads size\r\n
\r\n \r\n Mostly PSD end AL concepts\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 $2900 worth producucts sold\r\n
\r\n Total 234 items
\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 7 new user generated report\r\n
\r\n Reports based on sales
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n 4.5h-avarage response time\r\n
\r\n Fostest is Barry
\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 {intl.formatMessage({id:\"USER_PROFILE\"})}\r\n {/* 12 messages */}\r\n
\r\n\r\n \r\n\r\n {(user.encodedImage)? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n \r\n {(user.firstName ? user.firstName[0] : \"\") +\r\n (user.lastName ? user.lastName[0] : \"\")}\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n {(user.firstName ? user.firstName + \" \" : \"\") + (user.lastName ? user.lastName : \"\")}\r\n \r\n {openUserDialog()}}>\r\n \r\n \r\n
\r\n {user.userRole?.map((r,i)=> r.role + (user.userRole.length -1 == i ? '':', '))}
\r\n \r\n {/* \r\n Sign Out\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 My Profile
\r\n \r\n Account settings and more\r\n {\" \"}\r\n \r\n update\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 My Messages
\r\n Inbox and tasks
\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 My Activities
\r\n Logs and notifications
\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 My Tasks
\r\n latest tasks and projects
\r\n \r\n
*/}\r\n \r\n Recent Notifications
\r\n\r\n\r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n \r\n Another purpose persuade\r\n \r\n Due in 2 Days\r\n
\r\n\r\n \r\n +28%\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Would be to people\r\n \r\n Due in 2 Days\r\n
\r\n\r\n \r\n +50%\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n Purpose would be to persuade\r\n \r\n Due in 2 Days\r\n
\r\n\r\n \r\n -27%\r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n The best product\r\n \r\n Due in 2 Days\r\n
\r\n\r\n \r\n +8%\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\r\n );\r\n}\r\n","import React, {useMemo, useEffect, useLayoutEffect} from \"react\";\r\nimport objectPath from \"object-path\";\r\n// LayoutContext\r\nimport {useHtmlClassService} from \"../_core/MetronicLayout\";\r\nimport {useSubheader} from \"../_core/MetronicSubheader\";\r\n// Import Layout components\r\nimport {Header} from \"./header/Header\";\r\nimport {HeaderMobile} from \"./header-mobile/HeaderMobile\";\r\nimport {Aside} from \"./aside/Aside\";\r\nimport {Footer} from \"./footer/Footer\";\r\nimport {LayoutInit} from \"./LayoutInit\";\r\nimport {SubHeader} from \"./subheader/SubHeader\";\r\nimport {QuickPanel} from \"./extras/offcanvas/QuickPanel\";\r\nimport {QuickUser} from \"./extras/offcanvas/QuickUser\";\r\nimport {ScrollTop} from \"./extras/ScrollTop\";\r\nimport {StickyToolbar} from \"./extras/StickyToolbar\";\r\n\r\nexport function Layout({ children }) {\r\n const uiService = useHtmlClassService();\r\n const subheader = useSubheader();\r\n // Layout settings (cssClasses/cssAttributes)\r\n const layoutProps = useMemo(() => {\r\n return {\r\n layoutConfig: uiService.config,\r\n selfLayout: objectPath.get(uiService.config, \"self.layout\"),\r\n asideDisplay: objectPath.get(uiService.config, \"aside.self.display\"),\r\n subheaderDisplay: objectPath.get(uiService.config, \"subheader.display\"),\r\n desktopHeaderDisplay: objectPath.get(\r\n uiService.config,\r\n \"header.self.fixed.desktop\"\r\n ),\r\n contentCssClasses: uiService.getClasses(\"content\", true),\r\n contentContainerClasses: uiService.getClasses(\"content_container\", true),\r\n contentExtended: objectPath.get(uiService.config, \"content.extended\")\r\n };\r\n }, [uiService]);\r\n\r\n useLayoutEffect(() => {\r\n subheader.setEnabled(layoutProps.subheaderDisplay);\r\n // eslint-disable-next-line\r\n }, [location.pathname]);\r\n useEffect(() => {}, [subheader]);\r\n\r\n return layoutProps.selfLayout !== \"blank\" ? (\r\n <>\r\n {/*begin::Main*/}\r\n \r\n {/*begin::Page*/}\r\n
\r\n {/*end::Page*/}\r\n \r\n \r\n {layoutProps.asideDisplay && ()}\r\n {/*begin::Wrapper*/}\r\n
\r\n {/*end::Wrapper*/}\r\n \r\n \r\n {/*layoutProps.subheaderDisplay &&
\r\n {/*end::Content*/}\r\n \r\n \r\n {/*begin::Container*/}\r\n
\r\n )}\r\n\r\n {layoutProps.contentExtended && {children}}\r\n {/*end::Entry*/}\r\n \r\n {children}\r\n
\r\n {/*end::Container*/}\r\n {children}
\r\n );\r\n}\r\n","import React, {useEffect, useState} from \"react\";\r\nimport {useRouteMatch} from \"react-router-dom\";\r\n\r\nexport function Content({ children }) {\r\n const match = useRouteMatch() || {};\r\n const animationEndClass = \"grid-animateContent-finished\";\r\n const [cssClassesState, setCssClassesState] = useState([\r\n \"grid-animateContent\",\r\n animationEndClass\r\n ]);\r\n\r\n useEffect(() => {\r\n // for animation start should toggle 'grid-animateContent-finished' css class\r\n // TODO: change useMemo\r\n const fullClasses = [...cssClassesState];\r\n const startAnimation = fullClasses.filter(el => el !== animationEndClass);\r\n setCssClassesState(startAnimation);\r\n const timeOutId = setTimeout(() => {\r\n setCssClassesState(fullClasses);\r\n }, 200);\r\n\r\n return () => {\r\n clearTimeout(timeOutId);\r\n };\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [match.url]);\r\n\r\n return <>{children};\r\n}\r\n","import React from \"react\";\r\nimport {Route} from \"react-router-dom\";\r\nimport {Content} from \"./Content\";\r\n\r\nexport function ContentRoute({ children, component, render, ...props }) {\r\n return (\r\n - \r\n
- \r\n Choose Label:\r\n \r\n \r\n \r\n
- \r\n \r\n \r\n Customer\r\n \r\n \r\n \r\n
- \r\n \r\n \r\n Partner\r\n \r\n \r\n \r\n
- \r\n \r\n \r\n Suplier\r\n \r\n \r\n \r\n
- \r\n \r\n \r\n Member\r\n \r\n \r\n \r\n
- \r\n \r\n \r\n Staff\r\n \r\n \r\n \r\n \r\n
- \r\n \r\n \r\n Add new\r\n \r\n \r\n
- \r\n
- \r\n Add new:\r\n \r\n
- \r\n \r\n \r\n Order\r\n \r\n \r\n
- \r\n \r\n \r\n Event\r\n \r\n \r\n
- \r\n \r\n \r\n Report\r\n \r\n \r\n
- \r\n \r\n \r\n Post\r\n \r\n \r\n
- \r\n \r\n \r\n File\r\n \r\n \r\n
- \r\n
- \r\n \r\n \r\n New Group\r\n \r\n \r\n
- \r\n \r\n \r\n Contacts\r\n \r\n \r\n
- \r\n \r\n \r\n Groups\r\n \r\n new\r\n \r\n \r\n \r\n
- \r\n \r\n \r\n Calls\r\n \r\n \r\n
- \r\n \r\n \r\n Settings\r\n \r\n \r\n\r\n \r\n\r\n
- \r\n \r\n \r\n Help\r\n \r\n \r\n
- \r\n \r\n \r\n Privacy\r\n \r\n 5\r\n \r\n \r\n \r\n
Please wait...
};\r\n}\r\n\r\nexport function NoRecordsFoundMessage({ entities }) {\r\n const customersList = entities === null ? [] : entities;\r\n return (\r\n <>\r\n {customersList.length === 0 && entities !== null && (\r\n No records found
\r\n )}\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\n\r\nfunction SelectionCheckbox({ isSelected, onChange }) {\r\n return (\r\n <>\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction groupingItemOnSelect(props) {\r\n const { ids, setIds, customerId } = props;\r\n if (ids.some((id) => id === customerId)) {\r\n setIds(ids.filter((id) => id !== customerId));\r\n } else {\r\n const newIds = [...ids];\r\n newIds.push(customerId);\r\n setIds(newIds);\r\n }\r\n}\r\n\r\nfunction groupingAllOnSelect(props) {\r\n const { isSelected, setIds, entities } = props;\r\n if (!isSelected) {\r\n const allIds = [];\r\n entities.forEach((el) => allIds.push(el.id));\r\n setIds(allIds);\r\n } else {\r\n setIds([]);\r\n }\r\n\r\n return isSelected;\r\n}\r\n\r\n// check official documentations: https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Row%20Selection&selectedStory=Custom%20Selection%20Column%20Header%20Style&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel\r\nexport function getSelectRow(props) {\r\n const { entities, ids, setIds } = props;\r\n return {\r\n mode: \"checkbox\",\r\n clickToSelect: true,\r\n hideSelectAll: false,\r\n selectionHeaderRenderer: () => {\r\n const isSelected =\r\n entities && entities.length > 0 && entities.length === ids.length;\r\n const props = { isSelected, entities, setIds };\r\n return (\r\n